:root {
  color-scheme: dark;
  --bg: #070a10;
  --panel: rgba(16, 22, 33, .82);
  --panel-strong: rgba(20, 28, 42, .96);
  --panel-soft: rgba(255,255,255,.035);
  --line: rgba(255,255,255,.09);
  --line-hot: rgba(255, 177, 0, .35);
  --text: #f6f8fb;
  --muted: #98a5b8;
  --accent: #ffb000;
  --accent-2: #ff7a00;
  --good: #51d88a;
  --warn: #ffca5c;
  --bad: #ff6376;
  --blue: #67b7ff;
  --radius: 22px;
  --shadow: 0 18px 60px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); background: radial-gradient(circle at 15% -10%, rgba(255,176,0,.12), transparent 26rem), radial-gradient(circle at 110% 25%, rgba(55,126,255,.10), transparent 30rem), var(--bg); overflow-x: hidden; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.ambient { position: fixed; width: 30rem; height: 30rem; border-radius: 50%; filter: blur(90px); opacity: .08; pointer-events: none; z-index: -1; }
.ambient-one { background: var(--accent); top: -18rem; left: -12rem; }
.ambient-two { background: #3478ff; right: -20rem; top: 30vh; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(12px, env(safe-area-inset-top)) 16px 12px; background: rgba(7,10,16,.78); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255,255,255,.05); }
.brand-lockup { display:flex; align-items:center; gap:10px; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; display:grid; place-items:center; background: linear-gradient(145deg, var(--accent), var(--accent-2)); color:#111827; font-size:24px; font-weight:900; box-shadow: 0 8px 24px rgba(255,176,0,.22); }
.eyebrow, .section-kicker, .hero-kicker { margin:0; font-size:.64rem; letter-spacing:.18em; font-weight:800; color:var(--accent); }
.topbar h1 { margin:0; font-size:1.1rem; line-height:1.05; letter-spacing:-.02em; }
.status-pill { border:1px solid var(--line); border-radius:999px; padding:7px 11px; font-size:.75rem; font-weight:750; background:rgba(255,255,255,.04); white-space:nowrap; }
.status-online { color:var(--good); border-color:rgba(81,216,138,.32); background:rgba(81,216,138,.08); }
.status-connecting { color:var(--warn); border-color:rgba(255,202,92,.3); background:rgba(255,202,92,.08); }
.status-error { color:var(--bad); border-color:rgba(255,99,118,.3); background:rgba(255,99,118,.08); }
.app-shell { width:min(1100px, 100%); margin:0 auto; padding:16px 14px 110px; }
.app-view { display:none; animation:viewIn .24s ease; }
.app-view.active { display:block; }
@keyframes viewIn { from { opacity:.3; transform:translateY(6px) } to { opacity:1; transform:none } }
.hero-panel, .view-hero { border:1px solid rgba(255,255,255,.08); border-radius:28px; padding:24px; background:linear-gradient(145deg, rgba(255,176,0,.11), rgba(18,24,36,.8) 44%, rgba(18,24,36,.94)); box-shadow:var(--shadow); overflow:hidden; position:relative; }
.hero-panel::after { content:""; position:absolute; width:180px; height:180px; right:-45px; top:-60px; border-radius:50%; background:radial-gradient(circle, rgba(255,176,0,.24), transparent 67%); pointer-events:none; }
.hero-copy h2, .view-hero h2 { margin:7px 0 8px; font-size:clamp(1.55rem, 7vw, 2.45rem); line-height:1.02; letter-spacing:-.045em; max-width:700px; }
.hero-copy p, .view-hero p { margin:0; color:var(--muted); line-height:1.52; max-width:720px; }
.hero-actions { display:grid; grid-template-columns:1fr auto; gap:10px; margin-top:22px; align-items:stretch; }
.cta-button { min-height:68px; border:0; border-radius:18px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#11131a; display:flex; gap:11px; align-items:center; justify-content:center; padding:12px 16px; font-weight:850; box-shadow:0 12px 30px rgba(255,176,0,.2); }
.cta-button .cta-icon { font-size:1.35rem; }
.cta-button span:last-child { display:flex; flex-direction:column; text-align:left; line-height:1.05; }
.cta-button small { font-size:.68rem; opacity:.72; margin-top:4px; }
.cta-button:disabled { filter:grayscale(.6); opacity:.45; box-shadow:none; }
.card { margin-top:14px; padding:18px; border-radius:var(--radius); border:1px solid var(--line); background:var(--panel); backdrop-filter:blur(14px); box-shadow:0 10px 34px rgba(0,0,0,.2); }
.card-accent { border-color:rgba(255,176,0,.17); }
.card-heading-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
h2 { margin:3px 0 0; font-size:1.02rem; letter-spacing:-.015em; }
h3 { margin:0 0 10px; font-size:.84rem; color:#dce3ed; }
.instruction, .note { color:var(--muted); line-height:1.48; font-size:.84rem; }
.instruction { margin:9px 0 13px; }
.note { margin:12px 0 0; }
.mini-badge { display:inline-flex; align-items:center; min-height:27px; padding:5px 9px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.035); color:#b8c4d4; font-size:.68rem; font-weight:750; white-space:nowrap; }
.button-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
button { border:1px solid var(--line); border-radius:13px; padding:11px 12px; background:rgba(255,255,255,.045); color:var(--text); font-weight:750; cursor:pointer; transition:transform .12s ease, border-color .12s ease, background .12s ease; }
button:active:not(:disabled) { transform:scale(.985); }
button:disabled { opacity:.38; cursor:not-allowed; }
button.primary, .primary { background:linear-gradient(135deg,rgba(255,176,0,.95),rgba(255,122,0,.95)); border-color:transparent; color:#11151c; }
.ghost-button { background:transparent; }
.danger { color:#fff; background:rgba(255,99,118,.12); border-color:rgba(255,99,118,.28); }
.danger-outline { color:#ff9ba7; border-color:rgba(255,99,118,.2); background:transparent; }
.small-button { padding:7px 9px; font-size:.72rem; border-radius:10px; }
.capture-step-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:14px; }
.capture-step { display:flex; align-items:center; gap:9px; min-height:61px; padding:10px; border-radius:15px; border:1px solid rgba(255,255,255,.055); background:rgba(255,255,255,.025); }
.capture-step > span { width:28px; height:28px; border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,.055); color:#8290a4; font-size:.72rem; font-weight:900; }
.capture-step div { min-width:0; display:flex; flex-direction:column; }
.capture-step strong { font-size:.75rem; }
.capture-step small { color:var(--muted); margin-top:3px; font-size:.66rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.capture-step.running { border-color:rgba(255,176,0,.28); background:rgba(255,176,0,.06); }
.capture-step.running > span { background:var(--accent); color:#111; }
.capture-step.done { border-color:rgba(81,216,138,.24); background:rgba(81,216,138,.055); }
.capture-step.done > span { background:rgba(81,216,138,.18); color:var(--good); }
.capture-step.warn { border-color:rgba(255,202,92,.26); }
.capture-step.error { border-color:rgba(255,99,118,.28); background:rgba(255,99,118,.05); }
.capture-step.error > span { color:var(--bad); }
.snapshot-grid, .facts-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:14px; }
.snapshot-item, .facts-grid > div { min-height:73px; padding:11px; border-radius:15px; background:var(--panel-soft); border:1px solid rgba(255,255,255,.045); display:flex; flex-direction:column; gap:5px; overflow:hidden; }
.snapshot-item.wide { grid-column:1/-1; }
.snapshot-item span, .facts-grid span { color:var(--muted); font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; font-weight:750; }
.snapshot-item strong, .facts-grid strong { font-size:.82rem; word-break:break-word; }
.snapshot-item small { color:var(--accent); font-size:.7rem; }
.hero-vin strong { font-size:1rem; letter-spacing:.04em; }
.report-actions { display:flex; gap:6px; }
.dtc-columns { display:grid; gap:10px; margin-top:14px; }
.dtc-columns > div { padding:12px; border-radius:16px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.045); }
.count-badge { display:inline-grid; place-items:center; min-width:22px; height:22px; border-radius:8px; margin-left:4px; background:rgba(255,255,255,.06); color:var(--accent); font-size:.68rem; }
.code-list { display:flex; flex-wrap:wrap; gap:7px; }
.code-chip { border:1px solid rgba(255,255,255,.09); border-radius:12px; padding:8px 9px; background:rgba(255,255,255,.04); display:flex; flex-direction:column; gap:2px; min-width:105px; }
.code-chip strong { color:#fff; font-size:.82rem; }
.code-chip span { color:var(--muted); font-size:.65rem; }
.code-chip-button { text-align:left; }
.empty-state { color:#7f8b9d; font-size:.8rem; }
.mode06-grid, .ecu-grid, .network-grid, .module-grid, .pack-grid { display:grid; gap:8px; margin-top:12px; }
.mode06-row, .ecu-card, .network-row, .module-row, .pack-row { border:1px solid rgba(255,255,255,.055); background:rgba(255,255,255,.025); border-radius:14px; padding:11px; }
.mode06-row, .network-row, .module-row, .pack-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mode06-row span, .network-row span, .module-row span, .pack-row span { color:var(--muted); font-size:.72rem; text-align:right; }
.ecu-card h3 { margin-bottom:6px; }
.advanced-card > summary { list-style:none; cursor:pointer; font-weight:800; color:#d8e0ec; }
.advanced-card > summary::-webkit-details-marker { display:none; }
.advanced-card > summary::after { content:"+"; float:right; color:var(--accent); }
.advanced-card[open] > summary::after { content:"−"; }
.advanced-section { padding-top:16px; margin-top:15px; border-top:1px solid var(--line); }
.manual-form label { display:block; font-size:.7rem; color:var(--muted); margin-bottom:6px; }
.manual-row { display:grid; grid-template-columns:1fr auto; gap:8px; }
input[type="text"] { width:100%; border-radius:12px; border:1px solid var(--line); background:#090d14; color:var(--text); padding:10px; }
.log-card pre { max-height:300px; overflow:auto; border-radius:13px; background:#05070b; color:#9fd6aa; padding:12px; font-size:.68rem; line-height:1.45; white-space:pre-wrap; }
.compact-hero { display:flex; flex-direction:column; gap:17px; }
.live-actions, .library-actions { display:flex; gap:8px; }
.pid-selector { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.pid-option { position:relative; }
.pid-option input { position:absolute; opacity:0; pointer-events:none; }
.pid-option span { display:block; padding:9px 11px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.025); font-size:.73rem; font-weight:750; }
.pid-option input:checked + span { border-color:rgba(255,176,0,.38); background:rgba(255,176,0,.1); color:#ffd77d; }
.live-data-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; }
.live-tile { min-height:145px; padding:14px; border-radius:20px; background:linear-gradient(145deg,rgba(21,29,43,.96),rgba(13,18,27,.96)); border:1px solid rgba(255,255,255,.07); overflow:hidden; }
.live-tile header { display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:.67rem; font-weight:750; }
.live-value { margin-top:11px; font-size:1.55rem; font-weight:850; letter-spacing:-.035em; }
.live-unit { color:var(--muted); font-size:.7rem; margin-left:3px; }
.sparkline { width:100%; height:43px; margin-top:8px; overflow:visible; }
.sparkline polyline { fill:none; stroke:var(--accent); stroke-width:2; vector-effect:non-scaling-stroke; }
.live-minmax { display:flex; justify-content:space-between; color:#6f7c8f; font-size:.62rem; margin-top:4px; }
.empty-panel { grid-column:1/-1; padding:26px; text-align:center; color:#738095; border:1px dashed rgba(255,255,255,.08); border-radius:18px; }
.library-list { display:grid; gap:10px; margin-top:14px; }
.library-card { padding:15px; border:1px solid var(--line); border-radius:20px; background:var(--panel); }
.library-card-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.library-card h3 { margin:0; font-size:.92rem; }
.library-card .vin { color:var(--muted); font-size:.68rem; margin-top:3px; letter-spacing:.04em; }
.capture-completeness { display:flex; flex-wrap:wrap; gap:5px; margin-top:11px; }
.capture-completeness span { font-size:.61rem; border:1px solid rgba(255,255,255,.055); border-radius:8px; padding:4px 6px; color:#8190a4; }
.capture-completeness .ok { color:var(--good); border-color:rgba(81,216,138,.18); }
.library-card-actions { display:flex; gap:7px; margin-top:12px; }
.settings-grid { display:grid; gap:10px; margin-top:14px; }
.setting-card { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; }
.setting-card > button, .setting-card > .switch { grid-column:1/-1; }
.setting-icon { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; color:var(--accent); background:rgba(255,176,0,.08); border:1px solid rgba(255,176,0,.14); font-weight:900; }
.setting-card h2 { margin:0 0 4px; }
.setting-card p { margin:0; color:var(--muted); font-size:.78rem; line-height:1.4; }
.toggle-card { grid-template-columns:auto 1fr auto; }
.toggle-card > .switch { grid-column:auto; }
.switch { position:relative; width:48px; height:28px; }
.switch input { position:absolute; opacity:0; }
.switch span { position:absolute; inset:0; border-radius:999px; background:#252c38; border:1px solid var(--line); transition:.15s; }
.switch span::after { content:""; position:absolute; width:20px; height:20px; left:3px; top:3px; border-radius:50%; background:#7e8999; transition:.15s; }
.switch input:checked + span { background:rgba(255,176,0,.18); border-color:rgba(255,176,0,.35); }
.switch input:checked + span::after { transform:translateX(20px); background:var(--accent); }
.privacy-card { border-color:rgba(81,216,138,.13); }
.bottom-nav { position:fixed; z-index:40; left:50%; transform:translateX(-50%); bottom:max(10px, env(safe-area-inset-bottom)); width:min(520px, calc(100% - 20px)); display:grid; grid-template-columns:repeat(4,1fr); gap:5px; padding:7px; border:1px solid rgba(255,255,255,.08); border-radius:22px; background:rgba(10,14,21,.9); backdrop-filter:blur(22px); box-shadow:0 16px 50px rgba(0,0,0,.45); }
.nav-button { border:0; border-radius:15px; padding:7px 4px; background:transparent; display:flex; flex-direction:column; align-items:center; gap:2px; color:#748196; }
.nav-button span { font-size:1rem; height:20px; }
.nav-button small { font-size:.6rem; font-weight:800; }
.nav-button.active { color:#111; background:linear-gradient(135deg,var(--accent),var(--accent-2)); }
.app-footer { text-align:center; color:#5f6c7e; font-size:.62rem; padding:8px 14px 105px; display:flex; justify-content:center; gap:12px; }
.dtc-dialog { width:min(680px,calc(100% - 24px)); border:1px solid var(--line); border-radius:22px; background:#101620; color:var(--text); box-shadow:var(--shadow); }
.dtc-dialog::backdrop { background:rgba(0,0,0,.68); backdrop-filter:blur(5px); }
.dialog-heading { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.inline-warning { color:var(--warn); font-size:.68rem; }
@media (min-width: 680px) {
  .app-shell { padding:24px 22px 120px; }
  .hero-panel { display:grid; grid-template-columns:1.35fr .9fr; align-items:end; gap:24px; padding:30px; }
  .hero-actions { grid-template-columns:1fr; margin:0; }
  .capture-step-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .snapshot-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .snapshot-item.wide { grid-column:span 2; }
  .hero-vin { grid-column:span 2 !important; }
  .dtc-columns { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .live-data-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .compact-hero { flex-direction:row; align-items:end; justify-content:space-between; }
  .settings-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .setting-card > button { grid-column:1/-1; }
}
@media (min-width: 980px) {
  .live-data-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .button-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
/* Compatibility styling for generated diagnostic detail rows */
.ecu-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.ecu-heading h3 { margin:0; }
.ecu-detail { display:grid; grid-template-columns:minmax(120px,.8fr) minmax(0,1.6fr); gap:10px; padding:7px 0; border-top:1px solid rgba(255,255,255,.045); }
.ecu-detail span { color:var(--muted); font-size:.68rem; }
.ecu-detail strong { font-size:.72rem; text-align:right; word-break:break-word; }
.ecu-error { margin:9px 0 0; color:#ff9ba7; font-size:.68rem; line-height:1.4; }
.ecu-ok { color:var(--good); border-color:rgba(81,216,138,.2); }
.ecu-warn { color:var(--warn); border-color:rgba(255,202,92,.2); }
.network-id-row { display:grid; grid-template-columns:auto 1fr; gap:5px 10px; align-items:center; border:1px solid rgba(255,255,255,.055); background:rgba(255,255,255,.025); border-radius:14px; padding:11px; }
.network-can-id { color:var(--accent); font-size:.78rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.network-id-row span { color:var(--muted); font-size:.68rem; text-align:right; }
.network-id-row code { grid-column:1/-1; padding:6px 8px; border-radius:8px; background:#080c12; color:#aeb9c8; overflow:auto; font-size:.64rem; }
.mode06-pass { border-color:rgba(81,216,138,.18); }
.mode06-pass strong { color:var(--good); }
.mode06-fail { border-color:rgba(255,99,118,.24); background:rgba(255,99,118,.045); }
.mode06-fail strong { color:var(--bad); }
.mode06-unknown strong { color:var(--warn); }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; }
.detail-grid > div { padding:10px; border:1px solid rgba(255,255,255,.05); border-radius:12px; background:rgba(255,255,255,.025); }
.detail-grid span { display:block; color:var(--muted); font-size:.64rem; margin-bottom:3px; }
.detail-grid strong { font-size:.75rem; }
.dtc-dialog { padding:0; overflow:hidden; }
.dtc-dialog form { margin:0; }
.dtc-dialog .dialog-heading { padding:16px 18px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.02); }
.dtc-dialog .dialog-body { padding:18px; max-height:min(70vh,680px); overflow:auto; }
@media (max-width: 460px) {
  .ecu-detail { grid-template-columns:1fr; gap:3px; }
  .ecu-detail strong { text-align:left; }
  .detail-grid { grid-template-columns:1fr; }
}