:root {
  --bg-0:#f5f5f5; --bg-1:#ffffff; --bg-2:#faf9f8; --bg-3:#f3f2f1;
  --line:#edebe9; --line-strong:#d2d0ce;
  --fg-0:#201f1e; --fg-1:#323130; --fg-2:#605e5c; --fg-3:#8a8886;
  --money:#0078d4; --up:#d13438; --down:#107c10;
  --dx-price:#0078d4; --dx-merch:#5c2d91; --dx-audience:#107c10;
  --warn:#ffaa44; --held:#038387;
  --ms-red:#f25022; --ms-green:#7fba00; --ms-blue:#00a4ef; --ms-yellow:#ffb900;
  --font-ui:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  --font-num:"Cascadia Mono","Segoe UI Mono",ui-monospace,monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--fg-0);
  background: linear-gradient(180deg, #ffffff 0, var(--bg-0) 260px);
  font-family: var(--font-ui);
  letter-spacing: 0;
}
button { font: inherit; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 220px 1fr; }
.sidebar {
  padding: 18px 14px;
  background: #ffffff;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.brand { display: flex; gap: 10px; align-items: center; }
.brand-mark {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 4px; color: transparent;
  font-family: var(--font-num); font-weight: 700; position: relative; background: #fff;
}
.brand-mark::before {
  content: ""; width: 20px; height: 20px; display: block;
  background:
    linear-gradient(var(--ms-red),var(--ms-red)) 0 0/9px 9px no-repeat,
    linear-gradient(var(--ms-green),var(--ms-green)) 11px 0/9px 9px no-repeat,
    linear-gradient(var(--ms-blue),var(--ms-blue)) 0 11px/9px 9px no-repeat,
    linear-gradient(var(--ms-yellow),var(--ms-yellow)) 11px 11px/9px 9px no-repeat;
}
.brand span:last-child, .time-card span, .time-card small, .eyebrow, small { color: var(--fg-2); }
.brand strong { display: block; }
nav { display: grid; gap: 4px; }
nav a {
  color: var(--fg-1); text-decoration: none; padding: 10px 12px; border-radius: 3px;
}
nav a.active, nav a:hover { background: #eff6fc; color: #004578; box-shadow: inset 3px 0 0 var(--money); }
.time-card { margin-top: auto; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-1); }
.time-card strong { display: block; margin: 6px 0; font-family: var(--font-num); font-size: 24px; color: var(--money); }
.workspace { padding: 18px; display: grid; gap: 14px; min-width: 0; }
.topbar, .panel-title, .panel-head, .controls, .legend, .cost-breakdown, .unit-facts {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
h1, h2, h3, p { margin: 0; }
h1 { font-size: 24px; font-weight: 650; }
h2 { font-size: 17px; font-weight: 650; }
h3 { font-size: 14px; color: var(--fg-1); }
.eyebrow { margin-bottom: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0; }
.controls button, .recommendation button {
  border: 1px solid var(--line-strong); border-radius: 3px; background: var(--bg-1); color: var(--fg-1);
  padding: 8px 11px; cursor: pointer;
}
.controls button.active, .recommendation button { border-color: var(--money); color: #fff; background: var(--money); }
.recommendation button.secondary { background: var(--bg-2); border-color: var(--line); margin-left: 8px; }
.hero-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 12px; }
.panel, .ticker-panel, .stat-tile {
  background: var(--bg-1); border: 1px solid var(--line); border-radius: 4px; padding: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.ticker-panel { min-height: 144px; }
.money { margin: 8px 0 10px; font-family: var(--font-num); font-size: 46px; line-height: 1; color: var(--money); font-variant-numeric: tabular-nums; }
.cost-breakdown { justify-content: flex-start; flex-wrap: wrap; color: var(--fg-2); font-size: 12px; }
.stat-tile span { color: var(--fg-2); font-size: 12px; }
.stat-tile strong { display: block; margin: 10px 0 6px; font-family: var(--font-num); font-size: 31px; }
.stat-tile.danger strong { color: var(--up); }
.stat-tile.good strong, .status-pill.good { color: var(--down); }
.main-grid { display: grid; grid-template-columns: minmax(640px, 1.55fr) minmax(360px, .85fr); gap: 12px; }
.lower-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.legend { justify-content: flex-end; color: var(--fg-2); font-size: 12px; }
.legend i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; }
.legend .price { background: var(--dx-price); } .legend .merch { background: var(--dx-merch); } .legend .audience { background: var(--dx-audience); }
.vehicle-table { margin-top: 12px; display: grid; border-top: 1px solid var(--line); }
.table-row { display: grid; grid-template-columns: 2.1fr .45fr .55fr .55fr .8fr 2fr; gap: 10px; align-items: center; min-height: 48px; padding: 7px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
.table-head { min-height: 32px; color: var(--fg-2); font-size: 11px; text-transform: uppercase; }
.table-row b { display: block; font-weight: 650; }
.table-row small { display: block; margin-top: 2px; }
.table-row span:nth-child(n+2):nth-child(-n+4) { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.table-row em { font-style: normal; padding: 4px 7px; border-radius: 3px; background: var(--bg-3); }
.dx-price { border-left: 3px solid var(--dx-price); }
.dx-merch { border-left: 3px solid var(--dx-merch); }
.dx-audience { border-left: 3px solid var(--dx-audience); }
.selected { background: #eff6fc; }
.status-pill { border: 1px solid var(--line-strong); border-radius: 999px; padding: 5px 8px; color: var(--fg-1); font-size: 12px; background: #fff; }
.status-pill.warn { color: var(--warn); }
.unit-facts { justify-content: flex-start; flex-wrap: wrap; margin: 13px 0; }
.unit-facts span { background: var(--bg-2); border: 1px solid var(--line); border-radius: 3px; padding: 7px 9px; font-family: var(--font-num); font-size: 12px; }
.diagnosis-card, .recommendation, .service-card { margin-top: 12px; padding: 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; }
.diagnosis-card p, .recommendation p, .conversation p, .service-card p { margin-top: 8px; color: var(--fg-1); line-height: 1.45; }
.funnel { display: grid; gap: 7px; margin-top: 12px; }
.funnel span { position: relative; overflow: hidden; padding: 7px 9px; border-radius: 3px; background: var(--bg-3); font-size: 12px; }
.funnel span::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: rgba(0,120,212,.16); }
.funnel b { position: relative; float: right; font-family: var(--font-num); }
.match-list, .compliance-log, .event-stream { display: grid; gap: 8px; margin-top: 12px; }
.match-list div, .event-stream div {
  display: grid; gap: 3px; padding: 10px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px;
}
.match-list span, .event-stream span { color: var(--fg-2); font-size: 12px; }
.match-list em { color: var(--down); font-style: normal; font-size: 12px; }
.reply { padding: 10px; border-left: 3px solid var(--held); background: var(--bg-2); }
.compliance-log span { color: var(--fg-1); border-top: 1px solid var(--line); padding-top: 8px; font-size: 12px; }
.service-card span { display: block; margin-top: 6px; color: var(--money); font-family: var(--font-num); }
.live-panel { min-height: 190px; }
.progress-track { width: 260px; height: 8px; overflow: hidden; background: var(--bg-3); border-radius: 999px; border: 1px solid var(--line); }
.progress-track span { display: block; width: 0; height: 100%; background: var(--money); transition: width .4s linear; }
.event-stream { grid-template-columns: repeat(4, 1fr); }
.event-stream div:first-child { border-color: var(--money); }
@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .hero-grid, .main-grid, .lower-grid, .event-stream { grid-template-columns: 1fr; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .table-row { grid-template-columns: 1.5fr .45fr .55fr .55fr .8fr 1.4fr; }
}