/* =========================================================================
   PREMIER AUTO LOUNGE — ///MPIRE app concept
   Brand: black ground, chrome script mark, off-white type.
   The only colour is the M stripe, used as a signature and nothing else.
   ========================================================================= */

:root{
  --ink:#000;
  --stage:#060607;
  --bg:#0A0A0B;
  --surf:#111113;
  --surf2:#17171A;
  --surf3:#202024;
  --surf4:#2A2A30;

  --line:rgba(255,255,255,.07);
  --line2:rgba(255,255,255,.13);
  --line3:rgba(255,255,255,.22);

  --text:#F2F2F3;
  --dim:#9A9AA1;
  --dim2:#6A6A72;
  --dim3:#48484F;

  /* chrome — lifted off their logo */
  --chrome1:#FFFFFF;
  --chrome2:#D8DADE;
  --chrome3:#9DA1A8;
  --chrome4:#6E7278;
  --chrome-g:linear-gradient(155deg,#FFF 0%,#E4E6EA 18%,#9DA1A8 42%,#F2F3F5 58%,#8A8E95 78%,#D4D7DB 100%);

  /* M stripe — signature only */
  --m1:#0653B6;
  --m2:#1C4E8C;
  --m3:#E7222E;

  --good:#3E9E6C;
  --warn:#C8993A;
  --bad:#B4453E;

  --r:14px; --r-lg:22px; --r-sm:9px; --r-xs:6px;

  --f:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Inter,Roboto,Helvetica,Arial,sans-serif;
  --fm:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease2:cubic-bezier(.65,0,.35,1);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--f);background:var(--stage);color:var(--text);
  min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1100px 620px at 10% -14%, rgba(255,255,255,.055), transparent 60%),
    radial-gradient(900px 520px at 96% 2%, rgba(120,140,180,.045), transparent 62%);
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
img{display:block;max-width:100%}
ul{list-style:none}
.num,.mono{font-variant-numeric:tabular-nums}
.mono{font-family:var(--fm)}

/* micro label */
.ml{
  font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim2);
}

/* the M stripe signature */
.mstripe{display:inline-flex;gap:2px;vertical-align:middle}
.mstripe i{width:3px;height:100%;min-height:12px;display:block;border-radius:1px}
.mstripe i:nth-child(1){background:var(--m1)}
.mstripe i:nth-child(2){background:var(--m2)}
.mstripe i:nth-child(3){background:var(--m3)}
.mstripe.sk i{transform:skewX(-16deg)}

.chrome{
  background:var(--chrome-g);-webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* =========================================================================
   STAGE
   ========================================================================= */
.stage{max-width:1620px;margin:0 auto;padding:22px 26px 44px}

.stage-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--line);flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:16px}
.brand-mark{width:106px;height:auto;filter:brightness(1.35) contrast(1.05)}
.brand-txt h1{font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.brand-txt p{font-size:12.5px;color:var(--dim);margin-top:3px;letter-spacing:.01em}
.head-right{display:flex;flex-direction:column;align-items:flex-end;gap:7px;margin-left:auto}
.head-meta{display:flex;gap:20px;font-size:11.5px;color:var(--dim2);flex-wrap:wrap;justify-content:flex-end}
.head-meta b{color:var(--text);font-weight:600}
.head-meta i{font-style:normal;color:var(--chrome3)}
.by{font-size:11px;color:var(--dim3)}
.by b{color:var(--dim);font-weight:600}
.head-actions{display:flex;gap:8px}
.ghost{
  border:1px solid var(--line2);border-radius:100px;padding:7px 15px;
  font-size:11.5px;font-weight:500;color:var(--dim);transition:.2s var(--ease);
}
.ghost:hover{border-color:var(--line3);color:var(--text);background:rgba(255,255,255,.04)}

.stage-body{display:grid;grid-template-columns:206px 1fr 340px;gap:30px;align-items:start}
@media (max-width:1320px){.stage-body{grid-template-columns:190px 1fr}.notes{display:none}}
@media (max-width:900px){.stage-body{grid-template-columns:1fr}.rail{display:none}}

/* =========================================================================
   RAIL
   ========================================================================= */
.rail{position:sticky;top:20px;display:flex;flex-direction:column;gap:1px}
.rail-h{
  font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim3);margin:19px 0 7px;padding-left:11px;
}
.rail-h:first-child{margin-top:0}
.rail button{
  text-align:left;padding:8px 11px;border-radius:8px;font-size:12.8px;
  color:var(--dim);transition:.16s var(--ease);position:relative;line-height:1.3;
}
.rail button:hover{color:var(--text);background:rgba(255,255,255,.045)}
.rail button.on{color:var(--text);background:rgba(255,255,255,.075);font-weight:500}
.rail button.on::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:2px;height:15px;border-radius:2px;background:var(--chrome2);
}

/* =========================================================================
   PHONE
   ========================================================================= */
.phone-wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
.phone{
  position:relative;width:395px;height:812px;border-radius:56px;flex:none;
  background:linear-gradient(150deg,#3A3A40,#0C0C0E 26%,#08080A 62%,#33333A);
  padding:11px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.07),
    0 44px 90px -24px rgba(0,0,0,.9),
    0 12px 34px -10px rgba(0,0,0,.8),
    inset 0 1px 1px rgba(255,255,255,.13);
}
.phone-side{position:absolute;background:linear-gradient(90deg,#2A2A30,#101014);border-radius:2px}
.phone-side-l{left:-2px;top:150px;width:3px;height:30px}
.phone-side-l2{left:-2px;top:196px;width:3px;height:56px}
.phone-side-r{right:-2px;top:184px;width:3px;height:86px}

.screen{
  position:relative;width:100%;height:100%;border-radius:46px;overflow:hidden;
  background:var(--bg);display:flex;flex-direction:column;
}
.notch{
  position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:112px;height:31px;background:#000;border-radius:100px;z-index:60;
}
.sbar{
  position:relative;z-index:55;height:50px;flex:none;
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 26px 5px;font-size:13.5px;font-weight:600;color:#fff;
  pointer-events:none;
}
.sbar-r{display:flex;align-items:center;gap:5px;color:#fff}

.app{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;scrollbar-width:none}
.app::-webkit-scrollbar{display:none}

.phone-cap{text-align:center;max-width:395px}
.phone-cap p{font-size:12px;color:var(--dim2);line-height:1.5}
.cap-btns{display:flex;gap:8px;justify-content:center;margin-top:11px}

/* =========================================================================
   NOTES PANEL
   ========================================================================= */
.notes{position:sticky;top:20px;max-height:calc(100vh - 46px);overflow-y:auto;scrollbar-width:thin}
.notes::-webkit-scrollbar{width:3px}
.notes::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}
.notes-in{
  border:1px solid var(--line);border-radius:var(--r);padding:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.026),transparent);
}
.notes h3{font-size:14.5px;font-weight:600;letter-spacing:-.01em;margin-bottom:4px}
.notes .nsub{font-size:11.5px;color:var(--dim2);margin-bottom:16px;line-height:1.5}
.notes h4{
  font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim3);margin:19px 0 8px;
}
.notes p{font-size:12.4px;color:var(--dim);line-height:1.62;margin-bottom:9px}
.notes p b{color:var(--text);font-weight:600}
.notes p em{color:var(--chrome3);font-style:normal}
.notes ul{display:flex;flex-direction:column;gap:7px}
.notes li{font-size:12.2px;color:var(--dim);line-height:1.55;padding-left:13px;position:relative}
.notes li::before{content:'';position:absolute;left:0;top:8px;width:4px;height:4px;border-radius:50%;background:var(--dim3)}
.notes li b{color:var(--text);font-weight:600}
.tagrow{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.tag{
  font-size:10px;padding:3.5px 8px;border-radius:100px;border:1px solid var(--line2);
  color:var(--dim);letter-spacing:.02em;
}
.tag.real{border-color:rgba(62,158,108,.34);color:#69C295}
.tag.inv{border-color:rgba(200,153,58,.32);color:#D3AC5E}

/* =========================================================================
   IN-APP PRIMITIVES
   ========================================================================= */
.pad{padding:0 20px}
.gap{height:16px}
.gap-s{height:9px}
.gap-l{height:26px}

.scr{animation:fade .34s var(--ease);padding-bottom:104px}
@keyframes fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* app header */
.ahead{
  position:sticky;top:0;z-index:40;background:rgba(10,10,11,.86);
  backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid var(--line);
}
.ahead-in{display:flex;align-items:center;gap:12px;padding:9px 18px 11px;min-height:48px}
.ahead h2{font-size:17px;font-weight:600;letter-spacing:-.02em;flex:1;line-height:1.2}
.ahead .sml{font-size:11px;color:var(--dim2);margin-top:1px;font-weight:400;letter-spacing:0}
.iconbtn{
  width:31px;height:31px;border-radius:50%;display:grid;place-items:center;flex:none;
  color:var(--dim);transition:.18s var(--ease);
}
.iconbtn:hover{background:rgba(255,255,255,.08);color:var(--text)}
.iconbtn.solid{background:rgba(255,255,255,.08);color:var(--text)}

/* section head */
.sh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:11px}
.sh h3{font-size:14.5px;font-weight:600;letter-spacing:-.015em}
.sh .lnk{font-size:11.5px;color:var(--chrome3);font-weight:500}
.sh .lnk:hover{color:var(--text)}
.sect-lbl{
  font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim3);margin-bottom:9px;display:flex;align-items:center;gap:8px;
}
.sect-lbl::after{content:'';flex:1;height:1px;background:var(--line)}

/* cards */
.card{
  background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:.2s var(--ease);
}
.card.tap{cursor:pointer}
.card.tap:active{transform:scale(.985)}
.card-p{padding:15px}

/* buttons */
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:14px;border-radius:12px;font-size:14px;font-weight:600;letter-spacing:-.01em;
  transition:.18s var(--ease);
}
.btn-p{background:var(--text);color:#000}
.btn-p:active{transform:scale(.985);background:#fff}
.btn-s{background:var(--surf3);color:var(--text);border:1px solid var(--line2)}
.btn-s:active{transform:scale(.985)}
.btn-o{border:1px solid var(--line2);color:var(--text)}
.btn-o:active{background:rgba(255,255,255,.05)}
.btn-sm{padding:10px 14px;font-size:12.5px;border-radius:10px;width:auto}
.btn-row{display:flex;gap:9px}
.btn-row .btn{flex:1}

/* chips */
.chips{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:1px 0}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;padding:7px 13px;border-radius:100px;border:1px solid var(--line2);
  font-size:12px;color:var(--dim);white-space:nowrap;transition:.16s var(--ease);font-weight:500;
}
.chip:active{transform:scale(.96)}
.chip.on{background:var(--text);color:#000;border-color:var(--text);font-weight:600}
.chip .n{opacity:.5;margin-left:5px;font-size:11px}

/* pills / badges */
.pill{
  display:inline-flex;align-items:center;gap:5px;padding:3.5px 9px;border-radius:100px;
  font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  border:1px solid var(--line2);color:var(--dim);white-space:nowrap;
}
.pill.hi{background:var(--text);color:#000;border-color:var(--text)}
.pill.ind{border-color:rgba(157,161,168,.42);color:var(--chrome2)}
.pill.good{border-color:rgba(62,158,108,.4);color:#69C295}
.pill.warn{border-color:rgba(200,153,58,.4);color:#D3AC5E}
.pill.bad{border-color:rgba(180,69,62,.42);color:#D08078}
.pill.dark{background:rgba(0,0,0,.62);border-color:rgba(255,255,255,.2);color:#fff;backdrop-filter:blur(8px)}

/* key-value rows */
.kv{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9.5px 0;border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:0}
.kv dt{font-size:12.4px;color:var(--dim2);flex:1 1 auto;min-width:0;line-height:1.4}
.kv dd{font-size:12.8px;color:var(--text);text-align:right;font-weight:500;line-height:1.4;flex:none}
.kv dd.mono{font-size:12px}

/* stat block */
.stats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stats.c2{grid-template-columns:1fr 1fr}
.stats.c3{grid-template-columns:repeat(3,1fr)}
.stat{background:var(--surf);padding:13px 14px}
.stat .v{font-size:19px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.stat .v.sm{font-size:15px}
.stat .l{font-size:10px;color:var(--dim2);margin-top:4px;letter-spacing:.04em}

/* progress */
.bar{height:3px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px;background:var(--chrome2);transition:width .5s var(--ease)}
.bar.thick{height:6px;border-radius:6px}

/* =========================================================================
   TAB BAR
   ========================================================================= */
.tabbar{
  position:absolute;bottom:0;left:0;right:0;z-index:50;
  display:grid;grid-template-columns:repeat(5,1fr);gap:2px;
  padding:8px 8px 26px;
  background:rgba(10,10,11,.9);backdrop-filter:saturate(180%) blur(24px);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
  border-top:1px solid var(--line);
}
.tabbar button{
  display:flex;flex-direction:column;align-items:center;gap:4px;padding:5px 2px;
  color:var(--dim3);transition:.18s var(--ease);border-radius:9px;
}
.tabbar button span{font-size:9.5px;font-weight:500;letter-spacing:.01em}
.tabbar button.on{color:var(--text)}
.tabbar button:active{transform:scale(.94)}
.tab-dot{position:absolute;top:6px;right:calc(50% - 15px);width:5px;height:5px;border-radius:50%;background:var(--m3)}

/* =========================================================================
   PHOTOGRAPHY
   ========================================================================= */
.ph{position:relative;overflow:hidden;background:var(--surf2)}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph.r43{aspect-ratio:4/3}
.ph.r169{aspect-ratio:16/9}
.ph.r11{aspect-ratio:1}
.ph.r54{aspect-ratio:5/4}
.ph-grad{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.45) 26%,transparent 58%);
}
.ph-grad.soft{background:linear-gradient(to top,rgba(0,0,0,.72),transparent 52%)}
.ph-grad.both{background:
  linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.5) 24%,transparent 56%),
  linear-gradient(to bottom,rgba(0,0,0,.55),transparent 20%)}
.ph-top{position:absolute;top:11px;left:11px;right:11px;display:flex;gap:6px;align-items:flex-start}
.ph-bot{position:absolute;left:15px;right:15px;bottom:14px}
.nophoto{
  aspect-ratio:16/10;display:grid;place-items:center;text-align:center;padding:16px;
  position:relative;overflow:hidden;
  background:
    radial-gradient(115% 88% at 50% 38%, rgba(255,255,255,.055), transparent 72%),
    repeating-linear-gradient(45deg,#0C0C0E 0 11px,#131317 11px 22px);
}
.nophoto.tall{aspect-ratio:4/3}
.nophoto::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);
}
.nophoto-in{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:252px}
.nophoto-ic{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:1px solid var(--line2);color:var(--dim2);background:rgba(255,255,255,.035);
  margin-bottom:2px;
}
.nophoto .ml{color:var(--dim)}
.nophoto p{font-size:11.8px;color:var(--dim2);line-height:1.5}

/* gallery strip */
.gstrip{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
.gstrip::-webkit-scrollbar{display:none}
.gstrip .ph{flex:none;width:74px;height:56px;border-radius:7px;scroll-snap-align:start;opacity:.5;transition:.2s}
.gstrip .ph.on{opacity:1;box-shadow:0 0 0 1.5px var(--chrome2)}

/* full-bleed swipe gallery */
.swipe{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.swipe::-webkit-scrollbar{display:none}
.swipe>*{flex:none;width:100%;scroll-snap-align:center}
.dots{display:flex;gap:4px;justify-content:center;margin-top:10px}
.dots i{width:5px;height:5px;border-radius:50%;background:var(--line3);transition:.2s}
.dots i.on{background:var(--text);width:14px;border-radius:3px}

/* =========================================================================
   INVENTORY CARD
   ========================================================================= */
.cars{display:flex;flex-direction:column;gap:13px}
.carc{border-radius:var(--r);overflow:hidden;background:var(--surf);border:1px solid var(--line);cursor:pointer;transition:.2s var(--ease)}
.carc:active{transform:scale(.99)}
.carc .ph{aspect-ratio:16/10}
.carc-b{padding:13px 14px 14px}
.carc-t{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.carc-n{font-size:15px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.carc-n .yr{color:var(--dim2);font-weight:400}
.carc-tr{font-size:11.5px;color:var(--dim);margin-top:3px;line-height:1.35}
.carc-pr{font-size:15px;font-weight:600;letter-spacing:-.02em;text-align:right;flex:none}
.carc-pr .call{font-size:11.5px;color:var(--chrome3);font-weight:500}
.carc-m{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.carc-m span{font-size:11px;color:var(--dim2);display:flex;align-items:center;gap:4px}
.carc-m b{color:var(--dim);font-weight:500}

/* spec sheet grid */
.spec{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.spec div{background:var(--surf);padding:11px 13px}
.spec dt{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim3)}
.spec dd{font-size:13px;margin-top:4px;font-weight:500;line-height:1.35}
.spec dd.mono{font-size:11.5px;letter-spacing:.01em}

/* option list */
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opt{
  font-size:11.5px;padding:6px 10px;border-radius:8px;background:var(--surf2);
  border:1px solid var(--line);color:var(--dim);line-height:1.3;
}
.opt.hit{border-color:rgba(157,161,168,.4);color:var(--text);background:var(--surf3)}

/* mod ledger */
.ledger{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ledger-r{display:flex;justify-content:space-between;gap:14px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--surf);align-items:baseline}
.ledger-r:last-child{border-bottom:0}
.ledger-r .t{font-size:12.6px;line-height:1.4;color:var(--text)}
.ledger-r .n{font-size:10.5px;color:var(--dim3);margin-top:2px}
.ledger-r .c{font-size:12.4px;color:var(--dim);flex:none;font-variant-numeric:tabular-nums}
.ledger-f{display:flex;justify-content:space-between;padding:13px 14px;background:var(--surf3);align-items:baseline}
.ledger-f .t{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--dim)}
.ledger-f .c{font-size:17px;font-weight:600;letter-spacing:-.02em}

/* =========================================================================
   MATCH SCORE
   ========================================================================= */
.score{display:flex;align-items:center;gap:13px}
.ring{position:relative;width:52px;height:52px;flex:none}
.ring svg{transform:rotate(-90deg)}
.ring .v{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;font-weight:600;letter-spacing:-.02em}
.ring.lg{width:74px;height:74px}
.ring.lg .v{font-size:19px}

.matchrow{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.mtag{font-size:10.5px;padding:4px 8px;border-radius:6px;display:flex;align-items:center;gap:4px;line-height:1.2}
.mtag.y{background:rgba(62,158,108,.13);color:#79CFA2;border:1px solid rgba(62,158,108,.26)}
.mtag.n{background:rgba(180,69,62,.12);color:#D5877F;border:1px solid rgba(180,69,62,.24)}

/* =========================================================================
   TIMELINE / STAGES
   ========================================================================= */
.tl{position:relative;padding-left:26px}
.tl::before{content:'';position:absolute;left:8.5px;top:6px;bottom:14px;width:1px;background:var(--line2)}
.tl-i{position:relative;padding-bottom:20px}
.tl-i:last-child{padding-bottom:0}
.tl-i::before{
  content:'';position:absolute;left:-22px;top:4px;width:11px;height:11px;border-radius:50%;
  background:var(--bg);border:1.5px solid var(--line3);
}
.tl-i.done::before{background:var(--chrome2);border-color:var(--chrome2)}
.tl-i.now::before{background:var(--bg);border-color:var(--text);box-shadow:0 0 0 3px rgba(255,255,255,.12)}
.tl-i .t{font-size:13.2px;font-weight:500;line-height:1.35}
.tl-i.done .t{color:var(--text)}
.tl-i:not(.done):not(.now) .t{color:var(--dim2)}
.tl-i .d{font-size:10.5px;color:var(--dim3);margin-top:3px;letter-spacing:.02em}
.tl-i .n{font-size:11.8px;color:var(--dim);margin-top:6px;line-height:1.5}

/* progress rail (horizontal) */
.prail{display:flex;gap:3px;margin:12px 0}
.prail i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.1)}
.prail i.on{background:var(--chrome2)}

/* =========================================================================
   FORMS
   ========================================================================= */
.field{margin-bottom:14px}
.field label{display:block;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim3);margin-bottom:7px}
.inp{
  width:100%;padding:12px 13px;border-radius:11px;background:var(--surf2);
  border:1px solid var(--line2);font-size:14px;color:var(--text);transition:.18s var(--ease);
}
.inp:focus{outline:0;border-color:var(--line3);background:var(--surf3)}
.inp::placeholder{color:var(--dim3)}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dim2) 50%),linear-gradient(135deg,var(--dim2) 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}

/* option cards (spec builder) */
.ocard{
  display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:12px;
  border:1px solid var(--line2);background:var(--surf);transition:.16s var(--ease);cursor:pointer;width:100%;text-align:left;
}
.ocard:active{transform:scale(.99)}
.ocard.on{border-color:var(--chrome3);background:var(--surf3)}
.ocard .t{font-size:13.6px;font-weight:500;line-height:1.3}
.ocard .s{font-size:11px;color:var(--dim2);margin-top:2px;line-height:1.35}
.ocard .bx{
  width:19px;height:19px;border-radius:6px;border:1.5px solid var(--line3);flex:none;
  display:grid;place-items:center;transition:.16s var(--ease);
}
.ocard.on .bx{background:var(--text);border-color:var(--text);color:#000}
.ocard.rad .bx{border-radius:50%}
.ostack{display:flex;flex-direction:column;gap:8px}

/* slider */
.slide{width:100%;-webkit-appearance:none;height:3px;border-radius:3px;background:var(--surf3);outline:0}
.slide::-webkit-slider-thumb{
  -webkit-appearance:none;width:21px;height:21px;border-radius:50%;
  background:var(--text);cursor:grab;box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.slide::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.1)}

/* =========================================================================
   SHEET (bottom modal)
   ========================================================================= */
.sheet-bd{
  position:absolute;inset:0;z-index:70;background:rgba(0,0,0,.72);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  animation:bdin .26s var(--ease);
}
@keyframes bdin{from{opacity:0}to{opacity:1}}
.sheet{
  position:absolute;left:0;right:0;bottom:0;z-index:71;max-height:86%;
  background:var(--surf);border-radius:26px 26px 0 0;border-top:1px solid var(--line2);
  display:flex;flex-direction:column;animation:shin .38s var(--ease);
  box-shadow:0 -18px 50px rgba(0,0,0,.6);
}
@keyframes shin{from{transform:translateY(100%)}to{transform:none}}
.sheet-h{padding:14px 20px 12px;border-bottom:1px solid var(--line);flex:none;position:relative}
.sheet-h::before{content:'';position:absolute;top:7px;left:50%;transform:translateX(-50%);width:34px;height:4px;border-radius:4px;background:var(--line3)}
.sheet-h h3{font-size:16px;font-weight:600;letter-spacing:-.02em;margin-top:6px}
.sheet-h p{font-size:11.5px;color:var(--dim2);margin-top:3px;line-height:1.45}
.sheet-b{padding:16px 20px 26px;overflow-y:auto;scrollbar-width:none}
.sheet-b::-webkit-scrollbar{display:none}

/* toast */
.toast{
  position:absolute;left:18px;right:18px;bottom:96px;z-index:80;
  background:rgba(240,240,242,.97);color:#000;border-radius:13px;padding:12px 15px;
  font-size:13px;font-weight:500;box-shadow:0 12px 34px rgba(0,0,0,.5);
  animation:tin .34s var(--ease);display:flex;align-items:center;gap:10px;
}
@keyframes tin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* push banner */
.push{
  position:absolute;top:12px;left:12px;right:12px;z-index:90;
  background:rgba(28,28,32,.95);backdrop-filter:blur(22px);
  border:1px solid var(--line2);border-radius:19px;padding:13px 15px;
  box-shadow:0 16px 44px rgba(0,0,0,.62);animation:pin .42s var(--ease);cursor:pointer;
}
@keyframes pin{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}
.push-h{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.push-h .ic{width:17px;height:17px;border-radius:4.5px;background:var(--chrome-g);flex:none}
.push-h .nm{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.push-h .tm{font-size:10.5px;color:var(--dim3);margin-left:auto}
.push .t{font-size:13.5px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.push .b{font-size:12.4px;color:var(--dim);margin-top:3px;line-height:1.45}

/* =========================================================================
   MISC BLOCKS
   ========================================================================= */
.hero{position:relative;height:392px;overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover}
.hero-in{position:absolute;left:20px;right:20px;bottom:20px;z-index:2}
.hero-t{font-size:27px;font-weight:600;letter-spacing:-.035em;line-height:1.08}
.hero-s{font-size:13px;color:rgba(255,255,255,.8);margin-top:6px;line-height:1.45}

.avatar{
  width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--surf3);border:1px solid var(--line2);
  font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--chrome2);
}
.avatar.lg{width:50px;height:50px;font-size:16px}

.person{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line)}
.person:last-child{border-bottom:0}
.person .nm{font-size:13.6px;font-weight:600;letter-spacing:-.01em}
.person .rl{font-size:11px;color:var(--dim2);margin-top:1px}
.person .bi{font-size:11.8px;color:var(--dim);margin-top:6px;line-height:1.5}

.quote{padding:15px;border-radius:var(--r);background:var(--surf);border:1px solid var(--line)}
.quote p{font-size:12.8px;line-height:1.62;color:var(--dim)}
.quote .who{display:flex;align-items:center;gap:9px;margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}
.quote .nm{font-size:12.4px;font-weight:600}
.quote .cr{font-size:10.5px;color:var(--dim3)}
.stars{display:flex;gap:1.5px;color:var(--chrome2)}

/* merch */
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.mcard{border-radius:var(--r);overflow:hidden;background:var(--surf);border:1px solid var(--line);cursor:pointer}
.mcard:active{transform:scale(.985)}
.mcard .ph{aspect-ratio:1;background:var(--surf2)}
.mcard .ph img{object-fit:cover}
.mcard-b{padding:10px 11px 12px}
.mcard .t{font-size:12.4px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.mcard .s{font-size:10.5px;color:var(--dim2);margin-top:2px}
.mcard .p{font-size:13px;font-weight:600;margin-top:6px}
.sizes{display:flex;flex-wrap:wrap;gap:6px}
.size{
  min-width:44px;padding:9px 10px;border-radius:9px;border:1px solid var(--line2);
  font-size:12.5px;text-align:center;font-weight:500;transition:.16s var(--ease);
}
.size.on{background:var(--text);color:#000;border-color:var(--text)}
.size.out{color:var(--dim3);border-color:var(--line);text-decoration:line-through;cursor:not-allowed}

/* event */
.ev{display:flex;gap:13px;padding:14px;border-radius:var(--r);background:var(--surf);border:1px solid var(--line);cursor:pointer}
.ev:active{transform:scale(.99)}
.evd{
  width:50px;flex:none;text-align:center;padding:8px 0;border-radius:10px;
  background:var(--surf3);border:1px solid var(--line);
}
.evd .m{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim2)}
.evd .d{font-size:20px;font-weight:600;letter-spacing:-.03em;line-height:1.1;margin-top:1px}
.ev .t{font-size:14px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.ev .w{font-size:11.5px;color:var(--dim2);margin-top:4px;line-height:1.4}

/* media row */
.mrow{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer;align-items:center}
.mrow:last-child{border-bottom:0}
.mrow .ph{width:106px;height:62px;border-radius:9px;flex:none}
.mrow .play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.28)}
.mrow .t{font-size:12.8px;font-weight:500;line-height:1.35}
.mrow .m{font-size:10.5px;color:var(--dim3);margin-top:5px;display:flex;gap:9px}

/* empty */
.empty{text-align:center;padding:46px 26px}
.empty .t{font-size:14.5px;font-weight:600;margin-top:13px}
.empty .s{font-size:12.4px;color:var(--dim2);margin-top:6px;line-height:1.55}

/* compare */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cmp-h{background:var(--surf3);padding:11px 12px}
.cmp-c{background:var(--surf);padding:10px 12px}
.cmp-l{grid-column:1/-1;background:var(--surf2);padding:6px 12px;font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim3)}
.cmp-c .v{font-size:12.8px;font-weight:500;line-height:1.35}
.cmp-c.win .v{color:#79CFA2}

/* value chart */
.vchart{display:flex;align-items:flex-end;gap:4px;height:66px;margin:14px 0 8px}
.vchart i{flex:1;border-radius:3px 3px 0 0;background:var(--surf4);transition:.4s var(--ease)}
.vchart i.on{background:var(--chrome-g)}
.vlab{display:flex;justify-content:space-between;font-size:9.5px;color:var(--dim3);letter-spacing:.04em}

/* channel bars */
.chb{display:flex;align-items:center;gap:11px;padding:8px 0}
.chb .n{font-size:12px;width:104px;flex:none;color:var(--dim)}
.chb .t{flex:1;height:5px;border-radius:5px;background:var(--surf3);overflow:hidden}
.chb .t i{display:block;height:100%;background:var(--chrome2);border-radius:5px}
.chb .v{font-size:11.5px;color:var(--dim2);width:50px;text-align:right;flex:none}

/* =========================================================================
   MOBILE
   Below 700px the phone frame stops being a prop and starts being in the
   way — the bezel, the notch and the fake status bar all come off and the
   app takes the whole screen. Nothing inside the app changes.
   ========================================================================= */
.only-mobile{display:none}
.notes-close{display:none}

/* the .rail base rule sets display:flex further up the file, so the hide has
   to be restated here to win on source order */
@media (max-width:900px){ .rail{display:none} }

@media (max-width:700px){
  body{
    background:var(--bg);background-image:none;
    overflow:hidden;                       /* the app scrolls, not the page */
  }

  .stage{
    max-width:none;padding:0;
    display:flex;flex-direction:column;
    height:100vh;height:100svh;
  }

  /* slim brand bar — keeps the concept framing without eating the screen */
  .stage-head{
    flex:none;display:flex;align-items:center;gap:10px;flex-wrap:nowrap;
    margin:0;padding:calc(env(safe-area-inset-top) + 8px) 13px 8px;
    border-bottom:1px solid var(--line);
    background:rgba(6,6,7,.94);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
  }
  .brand{gap:0}
  .brand-mark{width:78px}
  .brand-txt,.head-right,.head-meta,.by{display:none}
  .head-actions{margin-left:auto;gap:6px}
  .ghost{padding:6px 11px;font-size:11px}
  .only-mobile{display:inline-flex}

  .stage-body{display:block;flex:1;min-height:0;gap:0}

  .phone-wrap{display:block;height:100%;gap:0}
  .phone{
    width:100%;height:100%;padding:0;border-radius:0;
    background:none;box-shadow:none;
  }
  .phone-side,.notch,.sbar,.phone-cap{display:none}
  .screen{border-radius:0;height:100%}

  /* the tab bar sits on the real home indicator */
  .tabbar{padding:8px 6px calc(8px + env(safe-area-inset-bottom))}

  /* a hero that eats the whole viewport is a worse hero */
  .hero{height:min(392px,46svh)}

  /* the notes panel becomes a full-screen overlay behind a header button */
  .notes{
    display:none;position:fixed;inset:0;z-index:300;
    max-height:none;overflow-y:auto;background:var(--bg);
    padding:calc(env(safe-area-inset-top) + 16px) 18px
            calc(env(safe-area-inset-bottom) + 40px);
  }
  body.notes-open{overflow:hidden}
  body.notes-open .notes{display:block}
  .notes-in{border:0;border-radius:0;padding:0;background:none}
  .notes-close{
    display:grid;place-items:center;position:absolute;
    top:calc(env(safe-area-inset-top) + 12px);right:14px;
    width:34px;height:34px;border-radius:50%;
    background:var(--surf3);border:1px solid var(--line2);color:var(--text);
  }
  .notes h3,.notes .nsub{padding-right:46px}
}

/* very small handsets — claw back a little horizontal room */
@media (max-width:360px){
  .pad{padding:0 15px}
  .tabbar button span{font-size:9px}
  .hero-t{font-size:24px}
}