:root{
  --bg:#0e1218; --panel:#161b23; --border:#262e3a; --btn:#1b212b;
  --text:#e8eaed; --muted:#8b94a3; --subtle:#aeb6c2;
  --accent:#e8731c; --accent-ink:#231003; --green:#7fcf9b;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--text);
  font-family:'DejaVu Sans',-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.6; display:flex; flex-direction:column; min-height:100vh;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted)}

/* page-width column */
.site-header,.site-main,.site-footer{ width:100%; max-width:980px; margin:0 auto; padding-left:24px; padding-right:24px; }

/* header */
.site-header{ padding-top:16px; }
.topbar{ display:flex; align-items:center; justify-content:space-between; padding-bottom:12px; }
.brand{display:flex; flex-direction:column; line-height:1.1}
.brand-main{font-size:21px; font-weight:bold; color:var(--text)}
.brand-sub{font-size:12px; color:var(--muted); letter-spacing:.04em}
.topbar-right{display:flex; align-items:center; gap:12px}
.who{color:var(--muted); font-size:14px}
.nav-login{border:1px solid var(--accent); border-radius:8px; padding:7px 15px; color:var(--accent)!important; font-size:14px}
.nav-login:hover{background:var(--accent); color:var(--accent-ink)!important; text-decoration:none}
.navbar{ display:flex; gap:6px; flex-wrap:wrap; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:6px; }
.navbar a{ color:var(--subtle); padding:9px 16px; border-radius:7px; font-size:15px; }
.navbar a:hover{ background:var(--btn); color:var(--text); text-decoration:none; }

/* main */
.site-main{ flex:1; padding-top:28px; padding-bottom:32px; }
h1{font-size:34px; margin:.2em 0} h2{font-size:24px; margin:1.5em 0 .5em} h3{font-size:18px}
.lead{font-size:18px; color:var(--subtle); max-width:60ch}
.tag{display:inline-block; font-size:13px; color:var(--accent); border:1px solid var(--accent); border-radius:20px; padding:3px 12px; margin-bottom:12px}

/* hero */
.hero{display:flex; gap:34px; align-items:flex-start; flex-wrap:wrap; padding:10px 0 6px}
.hero-text{flex:1 1 300px}
.hero-text h1{margin-top:0}
.hero-phone{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:8px; margin:0 auto}
.hero-cap{font-size:12px; color:var(--muted)}
.btnrow{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px}
.btn{display:inline-block; border-radius:10px; padding:12px 22px; font-weight:bold; font-size:16px}
.btn-primary{background:var(--accent); color:var(--accent-ink)!important}
.btn-primary:hover{filter:brightness(1.08); text-decoration:none}
.btn-ghost{border:1px solid var(--border); color:var(--text)!important; background:var(--panel)}
.btn-ghost:hover{border-color:var(--accent); text-decoration:none}
/* narration callout synced to the hero phone animation */
.hero-narrate{ margin-top:24px; max-width:470px; min-height:64px; display:flex; flex-direction:column; justify-content:center; gap:5px;
  padding:14px 18px; border-radius:13px; background:#16233a; border:1px solid #2c3e5c; border-left:3px solid var(--accent);
  opacity:0; transform:translateY(5px); transition:opacity .35s ease, transform .35s ease }
.hero-narrate.show{ opacity:1; transform:none }
.hn-eyebrow{ font-size:10.5px; font-weight:bold; letter-spacing:.8px; text-transform:uppercase; color:var(--accent) }
.hn-q{ font-size:16px; font-weight:600; color:#e6eef8; line-height:1.3 }

/* cards / sections */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:16px}
.card{background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:16px 18px}
.card h3{margin-top:0; color:var(--accent)}
.placeholder{border:1px dashed var(--border); border-radius:12px; padding:20px; color:var(--muted); background:#11161d; margin:14px 0}
.notice{border-left:3px solid var(--accent); background:#191b1a; padding:10px 16px; border-radius:0 8px 8px 0; margin:18px 0; color:var(--subtle)}

/* ── phone frame: life-size 75×155 mm. RULES: no scaling; ~5px pad all around;
   everything fits with NO scroll; only car/logo/knob keep a locked aspect. ── */
.phone{ width:75mm; height:155mm; max-width:90vw;
  background:linear-gradient(135deg,#f4f5f7 0%,#bcc0c6 17%,#72767d 41%,#e0e3e7 57%,#9498a0 76%,#5d6167 100%);
  border:1px solid #44484e; border-radius:34px; padding:8px;
  box-shadow:0 12px 34px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.18); overflow:hidden; flex:0 0 auto; }
.phone-screen{ position:relative; width:100%; height:100%; overflow:hidden; border-radius:27px;
  background:linear-gradient(168deg,#1c2b46 0%, #122036 52%, #0d1726 100%); }

/* in-phone bottom-sheet pop-up (save / library) */
.sheet{ position:absolute; inset:0; z-index:5; display:flex; align-items:flex-end; justify-content:center;
  padding:7px; border-radius:27px; background:rgba(6,10,18,.72); }
.sheet[hidden]{ display:none }
.sheet-card{ width:100%; max-height:calc(100% - 12px); overflow-y:auto; scrollbar-width:none;
  background:linear-gradient(168deg,#23344f,#16243c); border:1px solid #3a4d70;
  border-radius:15px; padding:11px 12px; color:#eaf0f7; box-shadow:0 -8px 22px rgba(0,0,0,.45); }
.sheet-card::-webkit-scrollbar{ display:none }
.sheet-title{ font-size:13px; font-weight:bold; color:var(--accent); margin-bottom:7px }
.sheet label{ display:block; font-size:9.5px; color:#9fb2cb; margin:6px 0 2px }
.sheet input:not([type=checkbox]), .sheet textarea{ width:100%; margin:0; background:#0f1a2c; border:1px solid #38496a;
  border-radius:8px; color:#eaf0f7; font-size:12.5px; padding:7px; box-sizing:border-box }
.sheet textarea{ resize:none; height:46px }
.sheet-actions{ display:flex; gap:7px; margin-top:10px }
.sheet-actions button{ flex:1; width:auto; margin:0; padding:8px; font-size:12px; font-weight:bold;
  border-radius:9px; border:none; background:var(--accent); color:var(--accent-ink); cursor:pointer }
.sheet-actions .sheet-btn-ghost{ background:transparent; border:1.5px solid #43577d; color:#cfe0f5 }
.sheet-list{ max-height:200px; overflow-y:auto; scrollbar-width:none }
.sheet-list::-webkit-scrollbar{ display:none }
.sheet-row{ display:flex; align-items:center; justify-content:space-between; gap:6px; padding:7px 0;
  border-bottom:1px solid #2a3a55; font-size:12px }
.sheet-row:last-child{ border-bottom:none }
.sheet-row .r-actions{ display:flex; gap:6px; flex-shrink:0 }
.sheet-mini{ width:auto; margin:0; padding:5px 9px; font-size:10.5px; font-weight:normal; border-radius:7px;
  background:#22324a; border:1px solid #38496a; color:#cfe0f5; cursor:pointer }
.sheet-mini.recall{ border-color:var(--accent); color:var(--accent) }
.sheet-mini.del{ color:#f0997b; border-color:#5a3030 }
.sheet-empty{ font-size:11px; color:#7f93ad; padding:8px 0 }
.sheet select{ width:100%; margin:0; background:#0f1a2c; border:1px solid #38496a; border-radius:8px;
  color:#eaf0f7; font-size:12.5px; padding:7px; box-sizing:border-box }
.sheet input[type=file]{ font-size:10px; padding:5px; background:#0f1a2c }
.sheet-meta{ font-size:11px; color:#9fb2cb; margin-bottom:9px }
.sheet-stack{ display:flex; flex-direction:column; gap:6px }
.sheet-row-btn{ width:100%; margin:0; text-align:left; background:#22324a; border:1px solid #38496a;
  color:#eaf0f7; border-radius:9px; padding:9px 11px; font-size:12px; font-weight:normal; cursor:pointer }
.sheet-row-btn.danger{ color:#f0997b; border-color:#5a3030 }
/* vehicle settings form + toggles */
.sheet-titlebar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px }
.sheet-titlebar .sheet-title{ margin:0 }
.vs-gear{ width:auto; margin:0; padding:4px 11px; font-size:11px; font-weight:bold; line-height:1;
  background:#0f1a2c; border:1px solid var(--accent); color:var(--accent); border-radius:13px; cursor:pointer }
/* Customize page — build-by-placement cards */
.cz-group{ background:linear-gradient(160deg,#27374f,#1a2840); border:1px solid #38496a;
  border-radius:12px; padding:7px 9px; margin-bottom:6px }
.cz-group.off{ opacity:.5 }
.cz-ghead{ display:flex; align-items:center; gap:6px }
.cz-tog{ width:auto; margin:0; flex:none; transform:scale(1.2); accent-color:var(--accent); cursor:pointer }
.cz-gname{ flex:1; min-width:0; font-size:12px; font-weight:bold; color:#eaf0f7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cz-gname em{ font-size:9px; color:#7f93ad; font-style:normal; margin-left:4px }
.cz-actions{ display:flex; gap:4px; flex:none }
.cz-actions button{ width:auto; margin:0; background:transparent; border:none; cursor:pointer; padding:0 3px; font-size:12px; line-height:1 }
.cz-gedit, .cz-fedit{ color:#9fb2cb }
.cz-gdel, .cz-fdel{ color:#f0997b }
.cz-fields{ display:grid; grid-template-columns:1fr 1fr; gap:3px 7px; margin-top:5px }
.cz-field{ display:flex; align-items:center; justify-content:space-between; gap:4px; background:#0f1a2c;
  border:1px solid #2a3a55; border-radius:7px; padding:4px 7px }
.cz-flabel{ min-width:0; font-size:10px; color:#cfe0f5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cz-addf{ grid-column:1 / -1; justify-self:start; width:auto; margin:1px 0 0; background:transparent;
  border:1px dashed #38496a; color:#9fb2cb; border-radius:7px; padding:4px 8px; font-size:10px; cursor:pointer }
.cz-rename{ width:100%; margin:0; background:#0f1a2c; border:1px solid var(--accent); border-radius:6px;
  color:#eaf0f7; font-size:11px; padding:3px 6px; box-sizing:border-box }
.vs-group{ margin-top:9px }
.vs-glabel{ display:flex; align-items:center; justify-content:space-between; font-size:9.5px;
  font-weight:bold; color:var(--accent); margin-bottom:3px; text-transform:uppercase; letter-spacing:.03em }
.vs-del{ width:auto; margin:0; background:transparent; border:none; color:#f0997b; font-size:11px;
  line-height:1; cursor:pointer; padding:0 2px }
.ccs{ margin-bottom:8px; border:1px solid #38496a; border-radius:10px; background:#0f1a2c }
.ccs-toggle{ width:100%; margin:0; background:transparent; border:none; color:var(--accent);
  font-size:11px; font-weight:bold; text-align:left; padding:8px 10px; cursor:pointer }
.ccs-body{ padding:0 10px 10px }
.ccs-body label{ margin:6px 0 2px }
.ccs-field{ margin-bottom:4px }
.ccs-add{ width:auto; margin:3px 0 0; background:transparent; border:1px solid #38496a; color:#cfe0f5;
  border-radius:8px; padding:5px 9px; font-size:10px; font-weight:normal; cursor:pointer }
.ccs-create{ width:100%; margin-top:8px; background:#0c1422; border:1.5px solid var(--accent);
  color:#eaf0f7; border-radius:9px; padding:8px; font-size:11px; font-weight:bold; cursor:pointer }
.vs-grid{ display:grid; grid-template-columns:1fr 1fr; gap:5px 7px }
.vs-f{ display:flex; flex-direction:column; gap:1px }
.vs-f span{ font-size:8.5px; color:#9fb2cb }
.vs-f input{ width:100%; margin:0; background:#0f1a2c; border:1px solid #38496a; border-radius:6px;
  color:#eaf0f7; font-size:11px; padding:5px 6px; box-sizing:border-box }
.vs-toggles{ display:flex; flex-direction:column }
.vs-toggle{ display:flex; align-items:center; justify-content:space-between; padding:8px 2px;
  border-bottom:1px solid #2a3a55; font-size:12px; cursor:pointer }
.vs-toggle:last-child{ border-bottom:none }
.vs-toggle em{ font-size:9px; color:#7f93ad; font-style:normal; margin-left:4px }
.vs-toggle input[type=checkbox]{ width:auto; margin:0; transform:scale(1.25); accent-color:var(--accent); cursor:pointer }
.lib-full{ font-size:8px; color:var(--accent); font-style:normal; border:1px solid var(--accent);
  border-radius:5px; padding:0 4px; margin-left:5px; vertical-align:middle }
/* app-settings photo + cropper */
.sheet-divider{ height:1px; background:#2a3a55; margin:11px 0 9px }
.ph-hint{ font-size:9px; color:#9fb2cb; margin:2px 0 5px; line-height:1.35 }
.ph-hint b{ color:#cfe0f5 }
.ph-status{ font-size:10px; color:var(--green); margin-top:5px }
.crop-box{ position:relative; width:100%; aspect-ratio:730/300; overflow:hidden; border-radius:8px;
  background:#0f1a2c; touch-action:none; cursor:grab; margin-top:2px }
.crop-img{ position:absolute; top:0; left:0; max-width:none; user-select:none; -webkit-user-drag:none; pointer-events:none }
.crop-zoom{ width:100%; margin:8px 0 0; accent-color:var(--accent) }
.rig-content{ width:100%; height:100%; padding:10px 5px 8px; display:flex; flex-direction:column; gap:3px; color:#eaf0f7; line-height:1.15; }

/* ── header + footer — IDENTICAL for both tiers; logo to top-left, ✕ to top-right ── */
.rig-top{display:flex; align-items:flex-start; justify-content:space-between; gap:6px; padding:0 5px}
.rig-brand{min-width:0; display:flex; flex-direction:column; line-height:1.04}
.rig-logo-img{height:21px; display:block}
.rig-sub{font-size:9px; color:#9fb2cb; white-space:nowrap; margin-top:2px}
.rig-top-btns{display:flex; align-items:center; gap:4px; flex-shrink:0}
.rig-pill{font-size:8.5px; color:#c3d3e8; background:#22324a; border:1px solid #38496a; border-radius:10px; padding:3px 6px; white-space:nowrap}
.rig-conn{display:inline-flex; align-items:center; gap:1px; line-height:0; white-space:nowrap}
.rig-conn.ok{color:var(--green)}
.rig-conn.off{color:#f0997b}
.rc-mark{font-size:9px; line-height:1; font-weight:bold}
.rig-x{font-size:11px; color:#c3d3e8; background:#22324a; border:1px solid #38496a; border-radius:7px; padding:1px 6px; line-height:1.3}
.rig-toprow{display:flex; align-items:center; justify-content:space-between; margin-top:5px}
.rig-tuning{font-size:9.5px; color:var(--accent); font-weight:bold; cursor:pointer}
.rig-vehset{font-size:9.5px; color:var(--accent); font-weight:bold; cursor:pointer}
.rig-legend{display:flex; justify-content:space-between; font-size:11px; font-weight:bold; margin-top:9px}
.odot{color:var(--accent)}
.lg-active{color:var(--accent); font-weight:bold; font-size:10px}
/* car: whole car always visible, never cropped (aspect locked) */
.rig-car{display:block; width:100%; height:auto; margin:1px auto; border-radius:8px}
/* clicker container — FIXED height, identical for both tiers (so footers line up) */
.appcard{background:linear-gradient(160deg,#27374f,#1a2840); border:1px solid #38496a; border-radius:12px; padding:5px 9px; height:121px; flex:0 0 auto; display:flex; flex-direction:column}
.appcard-head{display:flex; align-items:center; justify-content:space-between; font-size:12.5px; font-weight:bold; color:#eaf0f7}
.ch-title{display:inline-flex; align-items:center; gap:6px}
.card-scale{ font-size:8px; font-weight:normal; color:#8b94a3; white-space:nowrap; letter-spacing:.2px }
.cdot{color:var(--accent); font-size:10px}
.csub{margin-left:auto; font-size:9.5px; color:#9fb2cb; font-weight:normal}
.plabel{font-size:9.5px; color:#9fb2cb; margin:0; line-height:1}
.pchips{display:flex; gap:6px; margin-top:-2px}
.prow2{display:flex; gap:6px}
.prow3{display:flex; gap:6px; margin-top:10px}
.prow2 .pchip, .prow3 .pchip{flex:1}
.rig-content .psave{ width:calc(100% - 20px); margin:10px auto 0 }
.pchip{width:auto; margin:0; background:#22324a; color:#c3d3e8; border:1px solid #38496a; border-radius:13px; padding:6px 0; font-size:10.5px; cursor:pointer}
.pchip.active{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.libset{margin-top:6px; background:#0f1a2c; border:1px solid #38496a; border-radius:10px; padding:7px 9px; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.libset-label{color:#9fb2cb; font-size:10px}
.libset-name{color:var(--accent); font-weight:bold}
.libset.active{border-color:var(--accent)}
.prow{display:flex; gap:6px; margin-top:6px}
.prow .psave, .prow .plibrary{flex:1; width:auto; margin:0}
.psave, .plibrary{width:100%; margin:0; background:#0c1422; color:#eaf0f7; border:1.5px solid var(--accent); border-radius:10px; padding:8px; font-size:10.5px; font-weight:bold; cursor:pointer}
.tuning{width:100%; margin-top:3px; background:#1a2840; color:#c3d3e8; border:1px solid #38496a; border-radius:10px; padding:6px; font-size:10.5px; text-align:left; cursor:pointer}
.rig-foot{text-align:center; font-size:8.5px; color:#7f93ad; margin-top:2px}

/* knob component — sized natively, no scaling. Buttons centered in their box. */
.knob-unit{ margin:1px 0 }
.knob-label{font-size:10.5px; color:#9fb2cb; margin-bottom:1px; line-height:1; text-align:left}
.knob-row{display:flex; align-items:center; justify-content:space-between; gap:6px; position:relative}
.knob-grp{display:flex; align-items:center; gap:5px}   /* −/+ kept close to the knob */
.knob-holder{display:inline-block; line-height:0; flex:none}
.knob-holder .knobsvg{display:block; width:100%; height:100%}
.kbtn{ flex:none; width:auto; margin:0; display:flex; align-items:center; justify-content:center; padding:0 10px; height:34px; border-radius:9px; background:transparent; border:1.5px solid var(--accent); color:#eaf0f7; font-size:11px; font-weight:600; line-height:1; white-space:nowrap; cursor:pointer; transition:background .12s }
.kbtn:active,.kbtn.pressed{background:var(--accent); color:var(--accent-ink)}
.knob-val{font-size:9.5px; color:#9fb2cb; line-height:1.05; text-align:left}
.knob-val .v{font-size:30px; font-weight:800; color:#fff; line-height:1; display:block}
/* clickers fill the container and center vertically; 1 knob = R&T, 2 = TTX */
.clickers{flex:1; display:flex; align-items:center; justify-content:center; gap:8px}
.clickers .knob-unit{flex:1; min-width:0; margin:0}
/* R&T (single knob): big number left, − knob + tight on the right */
.clickers .knob-unit:only-child .knob-row{flex-direction:row; justify-content:space-between}
/* TTX (two knobs): label + number stacked on top, − knob + below, centered */
.clickers .knob-unit:not(:only-child){text-align:center}
.clickers .knob-unit:not(:only-child) .knob-label{text-align:center}
.clickers .knob-unit:not(:only-child) .knob-row{flex-direction:column; gap:2px; justify-content:center}
.clickers .knob-unit:not(:only-child) .knob-val{text-align:center; order:1}
.clickers .knob-unit:not(:only-child) .knob-val .v{font-size:15px; display:inline}
.clickers .knob-unit:not(:only-child) .knob-val .u{margin-left:3px}
.clickers .knob-unit:not(:only-child) .knob-grp{gap:3px}
.clickers .knob-unit:not(:only-child) .kbtn{padding:0 5px; height:30px; font-size:8.5px; border-radius:7px}
.demo-hand{ position:absolute; top:0; left:0; z-index:6; pointer-events:none;
  transition:transform .6s cubic-bezier(.4,0,.2,1); filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)) }
.demo-hand span{ display:inline-block; font-size:26px; transition:transform .12s ease }
.demo-hand.tap span{ transform:scale(.7) }
.finger{position:absolute; bottom:-4px; right:0; font-size:30px; pointer-events:none; animation:fingerbob 1.2s ease-in-out infinite}
@keyframes fingerbob{0%,100%{transform:translateY(0)} 45%{transform:translateY(-8px)}}

/* demo: two phones */
.demo-phones{display:flex; gap:30px; justify-content:center; flex-wrap:wrap; margin-top:18px}
.demo-phone-wrap{display:flex; flex-direction:column; align-items:center; gap:10px}
.demo-phone-wrap h3{margin:0; color:var(--accent)}

/* footer + admin menu */
.site-footer{ padding-top:18px; padding-bottom:24px; border-top:1px solid var(--border); }
.admin-menu{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:#1a130a; border:1px solid #5a3d12; border-radius:10px; padding:10px 14px; margin-bottom:12px; }
.admin-tag{ font-size:12px; font-weight:bold; color:var(--accent-ink); background:var(--accent); border-radius:6px; padding:3px 8px }
.admin-menu a{color:var(--accent); font-size:14px}
.footer-main{display:flex; flex-direction:column; gap:2px; color:var(--subtle); font-size:13px}

/* forms */
.formwrap{max-width:380px; margin:24px auto; background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:24px}
label{display:block; font-size:13px; color:var(--muted); margin:12px 0 4px}
input{width:100%; padding:11px; border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:15px}
button{margin-top:18px; width:100%; background:var(--accent); color:var(--accent-ink); border:none; border-radius:10px; padding:12px; font-weight:bold; font-size:16px; cursor:pointer}
.error{color:#f0997b; font-size:14px; margin-top:10px}
.footnote{font-size:13px; color:var(--muted); margin-top:10px}

/* ── logged-in app (Demo page when signed in) ── */
.welcome-sub{margin-top:2px}
.app-layout{display:flex; gap:30px; align-items:flex-start; flex-wrap:wrap; margin-top:10px}
.app-phone{flex:0 0 auto; margin:0 auto}
.app-side{flex:1 1 320px; display:flex; flex-direction:column; gap:16px; min-width:280px}
.app-side .card h3{margin-top:0; color:var(--accent)}
.app-side select{width:100%; padding:11px; border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:15px}
.setup-list{list-style:none; margin:0; padding:0}
.setup-list li{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--border)}
.setup-list li:last-child{border-bottom:none}
.setup-name{font-weight:bold}
.setup-actions{display:flex; gap:8px}
.mini{width:auto; margin:0; padding:6px 12px; font-size:13px; font-weight:normal; border-radius:8px; background:var(--btn); color:var(--text); border:1px solid var(--border)}
.mini.recall{border-color:var(--accent); color:var(--accent)}
.mini.del{color:#f0997b; border-color:#5a3030}