:root {
  --navy: #101827;
  --ink: #152033;
  --muted: #6f7c90;
  --line: #dfe6ef;
  --blue: #0f6fea;
  --green: #14a66e;
  --gold: #ffb23f;
  --red: #e54255;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #f4f7fb; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, select:focus-visible { outline: 3px solid rgba(255, 178, 63, .35); outline-offset: 2px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 286px minmax(0, 1fr); }
.sidebar { min-height: 100vh; padding: 22px 14px; display: flex; flex-direction: column; gap: 16px; color: #fff; background: #101827; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 10px; }
.brand-mark { width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center; color: var(--navy); background: var(--gold); font-size: 26px; font-weight: 950; }
.brand strong { display: block; font-size: 29px; }
.brand small { display: block; color: #91a0b8; }
.company-select { border: 1px solid #26364f; border-radius: 8px; padding: 11px 12px; display: grid; gap: 8px; background: #172236; }
.company-select span { font-weight: 800; }
.company-select select { border: 0; outline: 0; color: #d9e4f2; background: transparent; }

.nav { display: grid; gap: 7px; }
.nav-item, .sub-nav { min-height: 44px; border: 0; border-radius: 8px; padding: 0 14px; display: flex; align-items: center; gap: 12px; color: #c8d3e1; background: transparent; text-align: left; font-weight: 760; }
.nav-item i { color: #71819a; font-style: normal; font-size: 11px; }
.nav-item b { margin-left: auto; min-width: 28px; height: 23px; border-radius: 999px; display: grid; place-items: center; color: #101827; background: var(--gold); font-size: 12px; }
.nav-item.active, .nav-item:hover { color: #101827; background: var(--gold); }
.nav-item.active i, .nav-item:hover i { color: #101827; }
.sub-nav { margin-left: 42px; min-height: 30px; border-left: 1px solid #26364f; color: #91a0b8; }
.sub-nav.active { color: #ffce86; }

.summary-card { margin-top: auto; border: 1px solid #26364f; border-radius: 10px; padding: 16px; background: #172236; }
.summary-card p { margin: 0 0 8px; color: #91a0b8; }
.summary-card strong { display: block; font-size: 30px; }
.summary-card small { display: block; margin: 7px 0 14px; color: #27c58b; font-weight: 800; }
.target { height: 9px; border-radius: 999px; background: #26364f; overflow: hidden; }
.target i { display: block; height: 100%; background: var(--gold); }
.summary-card button { width: 100%; height: 40px; margin-top: 14px; border: 1px solid var(--gold); border-radius: 8px; color: #fff; background: transparent; font-weight: 800; }

.workspace { min-width: 0; overflow-x: auto; }
.topbar { min-height: 84px; padding: 15px 28px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); background: #fff; position: sticky; top: 0; z-index: 20; }
.title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.topbar h1 { margin: 0; font-size: 26px; }
.topbar p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.demo-badge { border: 1px solid rgba(255, 178, 63, .32); border-radius: 999px; padding: 5px 10px; color: #a26200; background: #fff4e1; font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.top-select { margin-left: auto; }
.top-select select, .date-btn, .icon-btn { height: 40px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; }
.top-select select { min-width: 170px; padding: 0 12px; }
.date-btn { padding: 0 18px; }
.icon-btn { width: 42px; font-weight: 900; }
.alert { color: var(--red); }
.demo-strip { margin: 14px 28px 0; border: 1px solid rgba(255, 178, 63, .32); border-radius: 8px; padding: 12px 14px; color: #8a5706; background: linear-gradient(135deg, #fff4e1, #fffdf8); font-weight: 760; }

.mockup-stage { padding: 20px 28px 28px; display: grid; grid-template-columns: minmax(760px, 1fr) 260px; gap: 18px; align-items: start; }
.browser-frame { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 20px 42px rgba(21, 32, 51, .08); }
.frame-bar { height: 44px; padding: 0 16px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); background: #fbfcfe; }
.frame-bar span { width: 10px; height: 10px; border-radius: 999px; background: #ffd38a; }
.frame-bar span:nth-child(2) { background: #8ce0bd; }
.frame-bar span:nth-child(3) { background: #9fc8ff; }
.frame-bar strong { margin-left: 8px; color: var(--muted); font-size: 13px; }
.screen-canvas { min-height: min(72vh, 740px); padding: 22px; background: #f4f7fb; }
.rent-view { display: none; }
.rent-view.active { display: block; }
.mini-kpis { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 16px; }
.mini-kpis article,
.panel-card,
.list-card,
.detail-card,
.flow-card,
.message-card { border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 14px 30px rgba(21, 32, 51, .06); }
.mini-kpis article { min-height: 104px; padding: 18px; }
.mini-kpis small,
.panel-card small,
.detail-card small,
.message-card b { color: var(--muted); font-weight: 780; }
.mini-kpis strong { display: block; margin: 8px 0 4px; font-size: 32px; line-height: 1; }
.mini-kpis span { color: var(--green); font-size: 12px; font-weight: 850; }
.dashboard-board { margin-top: 18px; display: grid; grid-template-columns: minmax(420px, 1.3fr) minmax(260px, .8fr); gap: 18px; }
.panel-card { padding: 22px; min-width: 0; }
.panel-card.wide { grid-row: span 2; }
.panel-card h2,
.list-card h2,
.detail-card h2,
.flow-card h2,
.message-card h2 { margin: 0 0 18px; font-size: 19px; }
.timeline-list { display: grid; gap: 14px; }
.timeline-list button { min-height: 70px; border: 0; border-radius: 12px; padding: 12px 16px 12px 58px; position: relative; color: var(--ink); background: #f8fafc; text-align: left; }
.timeline-list i { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; position: absolute; left: 16px; top: 20px; color: #101827; background: var(--gold); font-style: normal; font-weight: 900; }
.timeline-list b,
.timeline-list span,
.compact-list b,
.compact-list span { display: block; }
.timeline-list span,
.compact-list span,
.detail-card p,
.detail-card span,
.vehicle-strip span { color: var(--muted); }
.fleet-bars { display: grid; gap: 16px; }
.fleet-bars p { height: 48px; margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.fleet-bars i { grid-column: 1 / -1; height: 9px; border-radius: 99px; background: var(--gold); box-shadow: 0 0 0 1px rgba(255, 178, 63, .22); }
.compact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.compact-list li { border-radius: 12px; padding: 13px 14px; background: #f8fafc; }
.workspace-grid { display: grid; grid-template-columns: 320px minmax(480px, 1fr); gap: 18px; }
.list-card,
.detail-card,
.flow-card,
.message-card { padding: 22px; }
.search-row { min-height: 42px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 16px; padding: 0 14px; display: flex; align-items: center; color: #8b97a8; background: #f8fafc; font-size: 13px; }
.reservation-card { width: 100%; min-height: 112px; border: 1px solid var(--line); border-radius: 12px; margin-top: 12px; padding: 16px; display: grid; grid-template-columns: 1fr auto; gap: 7px; color: var(--ink); background: #fff; text-align: left; }
.reservation-card.active { border-color: var(--gold); background: #fff9ee; }
.reservation-card b,
.reservation-card span,
.reservation-card small { grid-column: 1 / -1; }
.reservation-card em { border-radius: 999px; padding: 5px 9px; color: #14865d; background: #e8fff5; font-size: 11px; font-style: normal; font-weight: 900; }
.detail-head { display: flex; justify-content: space-between; gap: 18px; align-items: start; }
.detail-head span { border-radius: 999px; padding: 7px 14px; color: #14865d; background: #e8fff5; font-weight: 900; }
.info-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 14px; }
.info-grid article { border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: #f8fafc; }
.info-grid strong { display: block; margin: 9px 0 5px; font-size: 22px; }
.vehicle-strip { margin-top: 18px; border-radius: 16px; min-height: 156px; padding: 20px; display: flex; gap: 24px; align-items: center; color: #fff; background: #101827; }
.vehicle-strip b { display: block; margin-bottom: 8px; font-size: 20px; }
.car-silhouette { width: 250px; height: 90px; border-radius: 65px 70px 22px 22px; position: relative; background: var(--gold); flex: 0 0 auto; }
.car-silhouette::before { content: ""; width: 130px; height: 42px; border-radius: 28px 28px 5px 5px; position: absolute; left: 60px; top: -20px; background: #26364f; }
.car-silhouette i { width: 34px; height: 34px; border: 7px solid #fff; border-radius: 999px; position: absolute; bottom: -13px; background: #101827; }
.car-silhouette i:first-child { left: 34px; }
.car-silhouette i:last-child { right: 34px; }
.automation-layout { display: grid; grid-template-columns: minmax(520px, 1fr) 320px; gap: 18px; }
.flow-card { min-height: 540px; }
.flow-nodes { min-height: 440px; border: 1px solid #e9eef5; border-radius: 14px; position: relative; overflow: hidden; background: radial-gradient(#dfe6ef 1px, transparent 1px); background-size: 22px 22px; }
.flow-nodes::before { content: ""; position: absolute; left: 15%; right: 15%; top: 48%; height: 3px; background: #cbd5e1; }
.flow-nodes button { width: 154px; min-height: 74px; border: 1px solid #ffd38a; border-radius: 16px; position: absolute; color: #101827; background: #fff9ee; font-weight: 900; }
.flow-nodes button:nth-child(1) { left: 6%; top: 14%; }
.flow-nodes button:nth-child(2) { left: 38%; top: 14%; }
.flow-nodes button:nth-child(3) { right: 6%; top: 14%; }
.flow-nodes button:nth-child(4) { right: 6%; bottom: 16%; }
.flow-nodes button:nth-child(5) { left: 38%; bottom: 16%; background: #e8fff5; border-color: #a7f3d0; }
.flow-nodes button:nth-child(6) { left: 6%; bottom: 16%; background: #e9f2ff; border-color: #bfdbfe; }
.wa-bubble { border-radius: 16px 16px 16px 4px; padding: 18px; color: #16351f; background: #dcf8c6; line-height: 1.65; }
.message-card p { border: 1px solid var(--line); border-radius: 12px; margin: 14px 0 0; padding: 16px; background: #f8fafc; }
.message-card strong { display: block; margin-top: 6px; font-size: 30px; }
.demo-side { display: grid; gap: 12px; }
.demo-side article { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: #fff; box-shadow: 0 14px 32px rgba(21, 32, 51, .05); }
.demo-side small, .demo-side span { color: var(--muted); }
.demo-side strong { display: block; margin: 8px 0; font-size: 30px; }
.toast { position: fixed; right: 22px; bottom: 22px; padding: 14px 18px; border-radius: 8px; color: #fff; background: #101827; box-shadow: 0 18px 36px rgba(0, 0, 0, .22); opacity: 0; transform: translateY(18px); pointer-events: none; transition: .2s; z-index: 50; }
.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 1200px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { min-height: auto; }
  .mockup-stage { grid-template-columns: 1fr; }
  .dashboard-board,
  .workspace-grid,
  .automation-layout { grid-template-columns: 1fr; }
  .mini-kpis { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
}