/* Multiple Marketplace Shopping */
:root{
  --navy:#0F1E3A; --navy2:#16294D; --navy3:#1E3560;
  --gold:#C6A75E; --gold2:#E3CD96; --gold-faint:rgba(198,167,94,.14);
  --ink:#182234; --muted:#5C6677; --line:#E6E9EF; --bg:#F5F7FA; --card:#FFFFFF;
  --green:#1E7A44; --green-bg:#E7F5EC; --amber:#A66A00; --amber-bg:#FBF1DE; --red:#B3261E; --red-bg:#FBE9E7;
  --auth-midnight:#081321; --auth-deep:#0c1b2e; --auth-gold:#d6b96f;
  --auth-gold-soft:#f0dfb0; --auth-paper:#fbfaf7;
  --r:12px; --ease:cubic-bezier(.22,.7,.35,1);
}
*{box-sizing:border-box}
html{scroll-padding-top:82px;scroll-padding-bottom:96px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Inter','Segoe UI',system-ui,Arial,sans-serif;font-size:15px;line-height:1.5}
a{color:var(--navy3)}
h1,h2,h3{margin:0}
.hidden{display:none!important}

/* header */
header.top{background:linear-gradient(140deg,var(--navy),var(--navy2));color:#fff;padding:16px 20px}
.top .in{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.top h1{font-size:18px;font-weight:700}
.top h1 span{color:var(--gold2)}
.top .sub{font-size:12px;color:#9FB3D1;margin-top:2px}
.shopping-note{font-size:11.5px;color:var(--navy);background:var(--gold2);padding:6px 12px;border-radius:999px;font-weight:600}

/* stage nav */
.stages{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.stages .in{max-width:1180px;margin:0 auto;display:flex;gap:4px;overflow-x:auto;padding:0 12px}
.stage-tab{flex:0 0 auto;padding:13px 14px;font-size:12.5px;font-weight:600;color:var(--muted);border:0;background:none;cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
.stage-tab .n{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--line);color:var(--muted);font-size:11px;margin-right:6px}
/* completed steps get a green number; the CURRENT page stands out clearly (gold tint + underline + gold number) */
.stage-tab.done .n{background:var(--green);color:#fff}
.stage-tab.active{color:var(--navy);font-weight:800;border-bottom-color:var(--gold);background:var(--gold-faint)}
.stage-tab.active .n{background:var(--gold);color:#fff}

main{max-width:1180px;margin:22px auto 80px;padding:0 20px}
.panel{display:none}
.panel.active{display:block;animation:rise .35s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.panel h2{font-size:20px;margin-bottom:4px}
.panel .lead{color:var(--muted);font-size:13.5px;margin-bottom:18px;max-width:70ch}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:18px;box-shadow:0 1px 3px rgba(15,30,58,.05)}
.card h3{font-size:15px;margin-bottom:12px}

label{display:block;font-size:12px;font-weight:600;margin:12px 0 5px}
label .opt{font-weight:400;color:var(--muted)}
.fieldhint{font-size:10.5px;color:var(--muted);margin:5px 0 0;line-height:1.35}
input[readonly]{background:#EEF1F6;color:var(--navy);font-weight:700;cursor:default}
input,select,textarea{width:100%;border:1.5px solid var(--line);border-radius:9px;padding:9px 11px;font:inherit;font-size:14px;background:#FBFCFE;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-faint)}
textarea{resize:vertical;min-height:60px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 16px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:0 14px}
@media(max-width:720px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}

.btn{font:inherit;font-weight:600;cursor:pointer;border:0;border-radius:9px;padding:10px 18px;font-size:14px;transition:transform .12s,box-shadow .12s,background .12s}
.btn:active{transform:scale(.98)}
.btn-gold{background:linear-gradient(135deg,var(--gold),#B6923F);color:#fff;box-shadow:0 4px 12px rgba(198,167,94,.35)}
.btn-gold:hover{box-shadow:0 6px 16px rgba(198,167,94,.5)}
.btn-navy{background:var(--navy);color:#fff}
.btn-ghost{background:#EEF1F6;color:var(--ink)}
.btn-ghost:hover{background:#E2E7EF}
.btn-sm{padding:6px 12px;font-size:12.5px}
.btn-danger{background:var(--red-bg);color:var(--red)}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}
.hint{font-size:12px;color:var(--muted)}

/* marketplace buttons */
.mk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
@media(max-width:640px){.mk-grid{grid-template-columns:1fr 1fr}}
.mk{display:flex;align-items:center;justify-content:space-between;gap:8px;text-decoration:none;color:var(--navy);border:1px solid var(--line);border-radius:9px;padding:11px 13px;background:#fff;font-weight:600;font-size:13px}
.mk:hover{border-color:var(--gold);background:var(--gold-faint)}
.mk .arr{color:var(--gold)}

/* pills */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em}
.pill.g{background:var(--green-bg);color:var(--green)}
.pill.y{background:var(--amber-bg);color:var(--amber)}
.pill.r{background:var(--red-bg);color:var(--red)}
.pill.n{background:var(--line);color:var(--muted)}

/* stat tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:720px){.tiles{grid-template-columns:1fr 1fr}}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.tile b{display:block;font-size:24px;color:var(--navy);font-weight:800}
.tile small{color:var(--muted);font-size:12px}
.tile.g b{color:var(--green)} .tile.y b{color:var(--amber)} .tile.r b{color:var(--red)}

/* listing cards */
.vcard{border:1px solid var(--line);border-left:5px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:14px;background:#fff}
.vcard.g{border-left-color:var(--green)} .vcard.y{border-left-color:var(--amber)} .vcard.r{border-left-color:var(--red)}
.vcard .vh{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start}
.vcard .vt{font-weight:700;font-size:15px}
.vcard .vmeta{font-size:12.5px;color:var(--muted);margin-top:2px}
.vcard .vprice{font-size:19px;font-weight:800;color:var(--navy)}
.vcard .vrow{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12.5px;margin-top:10px;color:#3c4657}
.vcard .why{font-size:12px;color:var(--muted);margin-top:10px;border-top:1px dashed var(--line);padding-top:9px}
.vcard .why b{color:var(--ink)}
.rank{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--navy);color:var(--gold2);font-weight:800;font-size:13px;margin-right:6px}

table.data{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}
table.data th{background:var(--navy);color:#fff;text-align:left;padding:7px 9px;font-size:11.5px;white-space:nowrap}
table.data td{border-top:1px solid var(--line);padding:7px 9px;vertical-align:top}
table.data tr:nth-child(even) td{background:#F7F9FC}
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}

.range-badge{display:inline-block;background:var(--navy);color:#fff;border-radius:8px;padding:8px 14px;font-weight:700;font-size:15px;margin:4px 8px 4px 0}
.range-badge small{display:block;color:var(--gold2);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.warn{background:var(--amber-bg);color:var(--amber);border-radius:9px;padding:10px 13px;font-size:13px;margin:10px 0}
.calc-out{background:var(--navy);color:#fff;border-radius:10px;padding:14px 16px;margin-top:12px}
.calc-out .big{font-size:22px;font-weight:800;color:var(--gold2)}
.calc-out .dgrid{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px}
.calc-out .dgrid b{color:#fff}
.calc-out .dgrid .big2{color:var(--gold2);font-size:16px}
.chk{display:flex;align-items:flex-start;gap:9px;font-weight:400;font-size:13px;margin:7px 0;cursor:pointer}
.chk input{width:16px;height:16px;margin-top:2px;accent-color:var(--red);flex:0 0 auto}
.footer-note{text-align:center;color:var(--muted);font-size:12px;margin-top:30px}
.empty{color:var(--muted);font-size:13.5px;padding:18px;text-align:center;border:1px dashed var(--line);border-radius:10px}

/* qualification card extras */
.nextact{margin-top:10px;border-radius:9px;padding:9px 12px;font-size:13px;background:#EEF1F6;color:var(--ink)}
.nextact.g{background:var(--green-bg);color:var(--green)} .nextact.y{background:var(--amber-bg);color:var(--amber)} .nextact.r{background:var(--red-bg);color:var(--red)}
.stillneed{margin-top:9px;font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.miss-chip{display:inline-block;background:var(--amber-bg);color:var(--amber);border:1px solid #f0dcae;border-radius:999px;padding:2px 9px;font-size:11px;font-weight:600}

/* qualification editor */
.qedit{margin-top:12px;border-top:2px solid var(--gold);padding-top:12px}
.qsec{background:#FBFCFE;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px}
.qsec h4{font-size:12.5px;color:var(--navy);margin-bottom:9px;display:flex;align-items:center;gap:8px;justify-content:space-between}
.chkgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px 14px}
@media(max-width:720px){.chkgrid{grid-template-columns:1fr 1fr}}
.qsec .chk{font-size:12.5px}
.qsec label{margin:6px 0 4px}
.scorebars{display:grid;gap:6px}
.sb{display:grid;grid-template-columns:130px 1fr 34px;align-items:center;gap:10px;font-size:12px}
.sb span small{color:var(--muted)}
.sb .bar{background:var(--line);border-radius:6px;height:9px;overflow:hidden}
.sb .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#B6923F);border-radius:6px}
.sb b{text-align:right;color:var(--navy)}
ol.sq{margin:0;padding-left:18px;font-size:12.5px;color:#3c4657}
ol.sq li{margin:3px 0}
ul.sq{margin:0;padding-left:18px;font-size:12.5px;color:#3c4657}
ul.sq li{margin:3px 0}
/* result panel (5D / 5E) — dark card with light text */
.prot{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;border-radius:12px;padding:14px 18px;margin-top:14px}
.prot h2{color:#fff;font-size:14px;margin:0 0 8px;padding-bottom:4px;border-bottom:2px solid var(--gold);display:inline-block}
.prot ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin-top:4px}
.prot li{font-size:12px;color:#DCE4F0;padding-left:18px;position:relative}
.prot li:before{content:"\2713";position:absolute;left:0;color:var(--gold2);font-weight:800}
.prot li b{color:#fff}
.gate{margin-top:4px}

/* ---------- Phase 1 auth ---------- */
body.auth-loading .top, body.auth-loading nav.stages, body.auth-loading main,
body.anon .top, body.anon nav.stages, body.anon main,
body.recovery .top, body.recovery nav.stages, body.recovery main { display:none; }
#authGate{
  --auth-midnight:#081321;
  --auth-deep:#0c1b2e;
  --auth-gold:#d6b96f;
  --auth-gold-soft:#f0dfb0;
  --auth-paper:#fbfaf7;
  display:none;
  position:fixed;
  inset:0;
  z-index:1000;
  min-height:100vh;
  min-height:100dvh;
  padding:clamp(16px,3vw,38px);
  overflow-x:hidden;
  overflow-y:auto;
  align-items:center;
  justify-content:center;
  isolation:isolate;
  background:
    radial-gradient(circle at 13% 16%,rgba(42,91,132,.48),transparent 33%),
    radial-gradient(circle at 88% 78%,rgba(198,167,94,.16),transparent 26%),
    linear-gradient(145deg,#07111e 0%,#0b1c2f 54%,#07121f 100%);
}
#authGate::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0;
  opacity:.22;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(circle at 50% 45%,#000,transparent 76%);
  mask-image:radial-gradient(circle at 50% 45%,#000,transparent 76%);
}
#authGate::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:min(48vw,680px);
  aspect-ratio:1;
  right:-18vw;
  top:-32vw;
  border-radius:50%;
  background:rgba(214,185,111,.12);
  filter:blur(90px);
  animation:authGlow 8s ease-in-out infinite alternate;
}
body.anon #authGate, body.recovery #authGate{ display:flex; }

.auth-card{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr);
  width:min(100%,1040px);
  min-height:min(650px,calc(100dvh - clamp(32px,6vw,76px)));
  margin:auto;
  overflow:hidden;
  position:relative;
  border:1px solid rgba(255,255,255,.22);
  border-radius:28px;
  background:var(--auth-paper);
  box-shadow:0 40px 100px rgba(0,7,18,.52),0 8px 30px rgba(0,7,18,.24);
  animation:authCardIn .65s var(--ease) both;
}
.auth-showcase{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:42px 46px 38px;
  color:#fff;
  background:
    linear-gradient(155deg,rgba(26,60,94,.45),transparent 48%),
    linear-gradient(145deg,var(--auth-midnight),var(--auth-deep));
}
.auth-showcase::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:440px;
  height:440px;
  right:-220px;
  bottom:-240px;
  border:1px solid rgba(240,223,176,.18);
  border-radius:50%;
  box-shadow:0 0 0 58px rgba(240,223,176,.045),0 0 0 124px rgba(240,223,176,.028);
}
.auth-showcase::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  opacity:.16;
  background:linear-gradient(116deg,transparent 0 64%,rgba(255,255,255,.18) 64.2%,transparent 64.5%);
}
.auth-brand{ display:flex; align-items:center; gap:12px; color:#fff; }
.auth-mark{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  flex:0 0 44px;
  color:var(--auth-gold-soft);
  border:1px solid rgba(240,223,176,.38);
  border-radius:13px;
  background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 24px rgba(0,0,0,.16);
}
.auth-mark svg{ width:28px; height:28px; }
.auth-wordmark{ font-size:20px; font-weight:600; line-height:1; letter-spacing:-.03em; }
.auth-wordmark b{ color:var(--auth-gold-soft); font-weight:800; }
.auth-wordmark small{ display:block; margin-top:6px; color:rgba(224,232,241,.55); font-size:8px; font-weight:700; letter-spacing:.17em; }
.auth-showcase-copy{ max-width:440px; margin:auto 0 38px; }
.auth-kicker{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
  color:var(--auth-gold-soft);
  font-size:10px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.auth-kicker span{ width:20px; height:1px; background:currentColor; }
.auth-showcase h1{ max-width:10ch; color:#f8fbff; font-size:clamp(38px,4vw,50px); font-weight:600; line-height:1.06; letter-spacing:-.055em; }
.auth-showcase h1 span{ color:var(--auth-gold-soft); }
.auth-showcase-copy p{ max-width:44ch; margin:22px 0 0; color:#aab9ca; font-size:14px; line-height:1.7; }
.auth-journey{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; position:relative; padding-top:20px; border-top:1px solid rgba(255,255,255,.11); }
.auth-journey-step{ display:flex; align-items:flex-start; gap:9px; min-width:0; color:#718399; }
.auth-journey-step > span{ display:grid; place-items:center; width:23px; height:23px; flex:0 0 23px; border:1px solid currentColor; border-radius:50%; font-size:8px; font-weight:800; }
.auth-journey-step div{ min-width:0; }
.auth-journey-step b{ display:block; color:#d5deea; font-size:11px; line-height:1.2; }
.auth-journey-step small{ display:block; overflow:hidden; margin-top:4px; color:#718399; font-size:8.5px; line-height:1.3; white-space:nowrap; text-overflow:ellipsis; }
.auth-journey-step.is-active{ color:var(--auth-gold); }
.auth-journey-step.is-active b{ color:var(--auth-gold-soft); }
.auth-showcase-foot{ display:flex; align-items:center; gap:8px; margin-top:25px; color:#7f91a6; font-size:10px; letter-spacing:.02em; }
.auth-showcase-foot svg{ width:15px; height:15px; color:var(--auth-gold); }

.auth-panel{ display:grid; place-items:center; padding:48px 56px; background:var(--auth-paper); }
.auth-panel-inner{ width:100%; max-width:390px; }
.auth-overline{ margin-bottom:12px; color:#987c3b; font-size:9.5px; font-weight:800; letter-spacing:.18em; }
.auth-heading h2,.auth-recovery-heading h2{ color:#10233a; font-size:34px; font-weight:700; line-height:1.15; letter-spacing:-.045em; }
.auth-tag{ margin:9px 0 0; color:#697585; font-size:13px; line-height:1.55; }
.auth-recovery-heading{ display:none; }
.authmsg{ display:flex; align-items:flex-start; margin:18px 0 -2px; padding:10px 12px; border:1px solid transparent; border-radius:10px; font-size:11.5px; line-height:1.45; }
.authmsg:empty{ display:none; }
.authmsg.err{ color:#715a25; border-color:#ead9ab; background:#fdf9ed; }
.authmsg.ok{ color:#2d6b49; border-color:#c9e5d4; background:#eff9f3; }
.authmsg.err::before,.authmsg.ok::before{ content:""; width:6px; height:6px; flex:0 0 6px; margin:5px 8px 0 0; border-radius:50%; background:currentColor; }
.auth-form,.auth-recovery{ margin-top:26px; }
.auth-field + .auth-field{ margin-top:17px; }
.auth-card label{ display:block; margin:0 0 7px; color:#233850; font-size:11.5px; font-weight:700; letter-spacing:.015em; }
.auth-label-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.auth-input-shell{ position:relative; color:#8b96a3; }
.auth-input-shell > svg{ position:absolute; z-index:1; left:16px; top:50%; width:18px; height:18px; transform:translateY(-50%); transition:color .18s ease; pointer-events:none; }
.auth-card input{
  width:100%;
  height:52px;
  padding:0 16px 0 46px;
  color:#14283f;
  border:1px solid #dce1e5;
  border-radius:11px;
  outline:none;
  background:#fff;
  box-shadow:0 1px 2px rgba(15,30,58,.025);
  font-size:13px;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.auth-card input::placeholder{ color:#a4adb7; }
.auth-card input:hover{ border-color:#c7cfd6; }
.auth-card input:focus{ border-color:#b59955; background:#fff; box-shadow:0 0 0 3px rgba(198,167,94,.17),0 5px 18px rgba(15,30,58,.06); }
.auth-card input:-webkit-autofill{ -webkit-text-fill-color:#14283f; box-shadow:inset 0 0 0 1000px #fff; }
.auth-input-shell:focus-within{ color:#9c7d36; }
.auth-link{ margin:0 0 7px; padding:2px 0; color:#75602f; border:0; outline:none; background:none; font:inherit; font-size:11px; font-weight:700; cursor:pointer; }
.auth-link:hover{ color:#3f3218; }
.auth-link:focus-visible{ border-radius:3px; box-shadow:0 0 0 3px rgba(198,167,94,.28); }
.auth-actions{ display:flex; flex-direction:column; gap:12px; margin-top:23px; }
.auth-actions .btn,.auth-recovery .btn{ width:100%; min-height:50px; border-radius:11px; font-size:12.5px; font-weight:700; }
.auth-primary{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 18px; color:#142238; background:linear-gradient(135deg,#e5cc8d,#c7a758); box-shadow:0 10px 24px rgba(168,133,50,.23),inset 0 1px 0 rgba(255,255,255,.5); }
.auth-primary svg{ width:19px; height:19px; transition:transform .18s ease; }
.auth-primary:hover{ background:linear-gradient(135deg,#ecd79f,#ceb263); box-shadow:0 13px 30px rgba(168,133,50,.29),inset 0 1px 0 rgba(255,255,255,.55); transform:translateY(-1px); }
.auth-primary:hover svg{ transform:translateX(3px); }
.auth-primary:focus-visible,.auth-secondary:focus-visible{ outline:3px solid rgba(198,167,94,.35); outline-offset:2px; }
.auth-secondary{ color:#20344b; border:1px solid #dce1e5; background:transparent; box-shadow:none; }
.auth-secondary:hover{ color:#10233a; border-color:#aeb8c2; background:#fff; }
.auth-divider{ display:flex; align-items:center; gap:12px; color:#9099a4; font-size:9.5px; line-height:1; }
.auth-divider::before,.auth-divider::after{ content:""; height:1px; flex:1; background:#e3e6e8; }
.auth-divider span{ white-space:nowrap; }
.auth-recovery{ display:none; }
.auth-recovery .auth-primary{ margin-top:22px; }
.auth-field-hint{ margin-top:7px; color:#8a949f; font-size:10px; }
.auth-note{ display:flex; align-items:flex-start; gap:9px; margin:22px 0 0; padding:12px 13px; color:#78838e; border:1px solid #e4e6e4; border-radius:10px; background:rgba(255,255,255,.55); font-size:10.5px; line-height:1.55; }
.auth-note svg{ width:15px; height:15px; flex:0 0 15px; margin-top:1px; color:#a38642; }
body.recovery .auth-form,body.recovery .auth-heading{ display:none; }
body.recovery .auth-recovery,body.recovery .auth-recovery-heading{ display:block; }

@keyframes authCardIn{ from{ opacity:0; transform:translateY(14px) scale(.985); } to{ opacity:1; transform:none; } }
@keyframes authGlow{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(-5vw,4vw,0) scale(1.12); } }
@media(max-width:860px){
  .auth-card{ grid-template-columns:1fr; width:min(100%,590px); min-height:0; }
  .auth-showcase{ min-height:136px; flex-direction:row; align-items:center; justify-content:space-between; gap:28px; padding:25px 34px; }
  .auth-showcase-copy{ max-width:270px; margin:0; }
  .auth-kicker,.auth-showcase-copy p,.auth-journey,.auth-showcase-foot{ display:none; }
  .auth-showcase h1{ max-width:12ch; font-size:23px; line-height:1.12; }
  .auth-panel{ padding:38px 44px 42px; }
}
@media(max-width:560px){
  #authGate{ padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); align-items:flex-start; }
  .auth-card{ margin:auto; border-radius:21px; }
  .auth-showcase{ min-height:84px; padding:19px 21px; }
  .auth-showcase-copy{ display:none; }
  .auth-mark{ width:40px; height:40px; flex-basis:40px; border-radius:12px; }
  .auth-mark svg{ width:25px; height:25px; }
  .auth-wordmark{ font-size:18px; }
  .auth-panel{ padding:29px 22px 25px; }
  .auth-heading h2,.auth-recovery-heading h2{ font-size:29px; }
  .auth-tag{ font-size:12px; }
  .auth-form,.auth-recovery{ margin-top:22px; }
  .auth-card input{ height:50px; font-size:12.5px; }
  .auth-actions .btn,.auth-recovery .btn{ min-height:48px; }
  .auth-note{ margin-top:18px; padding:10px 11px; }
}
@media(max-height:720px) and (min-width:861px){
  #authGate{ padding:12px clamp(18px,3vw,38px); }
  .auth-card{ min-height:calc(100dvh - 24px); }
  .auth-showcase{ padding:28px 40px 24px; }
  .auth-showcase h1{ font-size:38px; }
  .auth-showcase-copy{ margin-bottom:20px; }
  .auth-showcase-copy p{ margin-top:14px; line-height:1.55; }
  .auth-journey{ padding-top:14px; }
  .auth-showcase-foot{ margin-top:14px; }
  .auth-panel{ padding:24px 44px; }
  .auth-heading h2,.auth-recovery-heading h2{ font-size:30px; }
  .auth-tag{ margin-top:6px; }
  .auth-form,.auth-recovery{ margin-top:20px; }
  .auth-field + .auth-field{ margin-top:13px; }
  .auth-card input{ height:48px; }
  .auth-actions{ gap:9px; margin-top:17px; }
  .auth-actions .btn,.auth-recovery .btn{ min-height:46px; }
  .auth-note{ margin-top:15px; padding:9px 11px; }
}
@media(prefers-reduced-motion:reduce){
  .auth-card,#authGate::after{ animation:none; }
  .auth-primary,.auth-primary svg,.auth-card input{ transition:none; }
}
.top-right{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.acctbar{ display:none; align-items:center; gap:10px; }
body.authed .acctbar{ display:flex; }
.acct-email{ font-size:12px; color:#cdd8ec; }

/* ---------- Unified journey: step tools + mobile Next bar ---------- */
.steptools{ background:#fff; border-bottom:1px solid var(--line); display:none; }
.steptools .in{ max-width:1180px; margin:0 auto; display:flex; gap:8px; padding:8px 12px; overflow-x:auto; }
.steplink{ flex:0 0 auto; border:1px solid var(--line); background:#fff; color:var(--navy); border-radius:999px; padding:5px 13px; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; }
.steplink:hover{ border-color:var(--gold); background:var(--gold-faint); }
#nextBar{ position:sticky; bottom:0; z-index:30; background:#fff; border-top:1px solid var(--line); box-shadow:0 -4px 16px rgba(15,30,58,.08); }
#nextBar .in{ max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px; }
#nextHint{ font-size:12.5px; color:var(--muted); font-weight:600; }
#btnNextStep{ font-size:15px; padding:12px 26px; }
@media(max-width:640px){ #btnNextStep{ flex:1; } #nextBar .in{ padding:9px 12px; } #nextHint{ font-size:11.5px; } main{ padding-bottom:14px; } }
body.anon #nextBar, body.recovery #nextBar, body.auth-loading #nextBar,
body.anon .steptools, body.recovery .steptools, body.auth-loading .steptools{ display:none !important; }

/* ---------- Phase 5: helper / advisor mode ---------- */
#helpBanner{ display:none; }
body.helping #helpBanner{ display:block; position:sticky; top:0; z-index:50; background:linear-gradient(90deg,#0f1d3a,#1a3a6b); color:#fff; border-bottom:2px solid var(--gold); box-shadow:0 2px 12px rgba(15,30,58,.25); }
#helpBanner .in{ max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 16px; font-size:13.5px; }
#helpBanner .in b{ color:#fff; }
#helpBanner .help-exit{ color:#fff; border:1px solid rgba(255,255,255,.45); background:transparent; }
body.helping nav.stages{ top:46px; }                 /* sit below the helper banner */
body.anon #btnHelpers, body.anon #btnHelping, body.recovery #btnHelpers, body.recovery #btnHelping, body.auth-loading #btnHelpers, body.auth-loading #btnHelping{ display:none; }
/* view-only helpers: can open/read files & navigate, but cannot enter data */
body.helping-view main .panel input, body.helping-view main .panel select, body.helping-view main .panel textarea{ pointer-events:none; opacity:.9; }
/* any helper: never delete the customer's items or files (owner-only) */
body.helping main .panel .btn-danger{ display:none !important; }

/* ---------- Vehicle research report ---------- */
.research-box{ margin-top:10px; }
.research-report{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-top:8px; font-size:13.5px; line-height:1.5; }
.research-report .rh{ color:var(--navy); margin:12px 0 4px; font-size:15px; }
.research-report p{ margin:6px 0; } .research-report ul.sq{ margin:4px 0 8px 18px; }
.research-report table.data{ margin-top:6px; }

/* ---------- Premium authenticated experience ---------- */
body.authed{
  --app-bg:#f2efe8;
  --app-surface:#fffdfa;
  --app-surface-2:#f8f5ee;
  --app-line:#dedbd3;
  --app-line-strong:#cfd4d6;
  --app-ink:#13253b;
  --app-muted:#6b7682;
  --app-shadow:0 18px 48px rgba(8,19,33,.09),0 2px 8px rgba(8,19,33,.04);
  min-height:100vh;
  color:var(--app-ink);
  background:
    radial-gradient(circle at 8% 4%,rgba(214,185,111,.12),transparent 24rem),
    radial-gradient(circle at 92% 24%,rgba(22,52,84,.08),transparent 30rem),
    var(--app-bg);
}
body.authed ::selection{ color:#fff; background:#9b7c34; }

/* App masthead */
body.authed .top{
  position:relative;
  overflow:hidden;
  padding:0;
  color:#fff;
  border-bottom:1px solid rgba(240,223,176,.22);
  background:
    linear-gradient(90deg,rgba(8,19,33,.99) 0%,rgba(8,19,33,.94) 42%,rgba(8,19,33,.67) 72%,rgba(8,19,33,.82) 100%),
    url('assets/carscope-hero.jpg') 72% 66%/cover no-repeat;
  box-shadow:0 10px 34px rgba(8,19,33,.18);
}
body.authed .top::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.14;
  background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 68%);
  mask-image:linear-gradient(90deg,#000,transparent 68%);
}
body.authed .top .in{ position:relative; max-width:1240px; min-height:108px; padding:20px 24px; flex-wrap:nowrap; }
body.authed .app-brand{ display:flex; align-items:center; gap:14px; min-width:0; }
body.authed .app-mark{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  flex:0 0 48px;
  color:var(--auth-gold-soft);
  border:1px solid rgba(240,223,176,.38);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 26px rgba(0,0,0,.2);
}
body.authed .app-mark svg{ width:30px; height:30px; }
body.authed .app-brand-copy{ min-width:0; }
body.authed .app-wordmark{ display:flex; align-items:baseline; gap:10px; }
body.authed .top h1{ color:#fff; font-size:21px; font-weight:600; line-height:1; letter-spacing:-.035em; }
body.authed .top h1 span{ color:var(--auth-gold-soft); font-weight:800; }
body.authed .app-wordmark small{ color:rgba(224,232,241,.55); font-size:8px; font-weight:700; letter-spacing:.17em; }
body.authed .top .sub{ max-width:540px; margin-top:7px; color:#9fb0c3; font-size:11.5px; }
body.authed .top-right{ min-width:0; align-items:flex-end; gap:8px; }
body.authed .acctbar{
  display:flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  padding:6px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:15px;
  background:rgba(7,17,30,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 10px 30px rgba(0,0,0,.13);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
body.authed .acct-identity{ display:flex; align-items:center; gap:7px; min-width:0; padding:0 7px 0 4px; }
body.authed .acct-presence{ width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:#6fd49a; box-shadow:0 0 0 3px rgba(111,212,154,.12); }
body.authed .acct-email{ display:block; max-width:180px; overflow:hidden; color:#dce4ed; font-size:10.5px; font-weight:600; white-space:nowrap; text-overflow:ellipsis; }
body.authed .top .btn-ghost{ color:#e8edf3; border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.07); box-shadow:none; }
body.authed .top .btn-ghost:hover{ border-color:rgba(240,223,176,.4); background:rgba(255,255,255,.13); }
body.authed .top #btnLogout{ color:#b9c4d0; background:transparent; }
body.authed .shopping-note{ order:-1; padding:5px 10px; color:var(--auth-gold-soft); border:1px solid rgba(240,223,176,.26); background:rgba(214,185,111,.09); font-size:8.5px; font-weight:800; letter-spacing:.15em; }

/* Journey navigation */
body.authed .stages{
  top:0;
  z-index:40;
  border-bottom:1px solid rgba(8,19,33,.1);
  background:rgba(255,253,250,.9);
  box-shadow:0 8px 30px rgba(8,19,33,.055);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}
body.authed .stages .in{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); max-width:1240px; gap:5px; padding:8px 18px; scrollbar-width:none; }
body.authed .stages .in::-webkit-scrollbar,body.authed .steptools .in::-webkit-scrollbar{ display:none; }
body.authed .stage-tab{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:8px 10px;
  color:#697685;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  font-size:11px;
  font-weight:700;
  letter-spacing:.01em;
  transition:color .18s ease,border-color .18s ease,background .18s ease,transform .18s ease;
}
body.authed .stage-tab:hover{ color:var(--app-ink); border-color:#e1ddd4; background:#fff; }
body.authed .stage-tab .n{ width:25px; height:25px; margin:0; flex:0 0 25px; color:#7d8792; border:1px solid #d7d9d8; background:#f0eee9; font-size:9.5px; font-weight:800; }
body.authed .stage-tab.done .n{ color:#fff; border-color:#277d4c; background:#277d4c; box-shadow:0 0 0 3px rgba(39,125,76,.09); }
body.authed .stage-tab.active{ color:#18293e; border-color:#e2d3ad; background:linear-gradient(135deg,#fbf5e5,#f4ead0); box-shadow:0 5px 16px rgba(133,102,32,.1); }
body.authed .stage-tab.active .n{ color:#13253b; border-color:#caaa59; background:linear-gradient(135deg,#ead59e,#caaa59); box-shadow:0 0 0 3px rgba(198,167,94,.12); }
body.authed .stage-tab.active::after{ content:""; position:absolute; right:14px; bottom:-9px; left:14px; height:2px; border-radius:2px; background:var(--auth-gold); }
body.authed .stage-tab:focus-visible,body.authed .steplink:focus-visible{ outline:3px solid rgba(198,167,94,.3); outline-offset:2px; }
body.authed .steptools{ border-bottom:1px solid rgba(8,19,33,.09); background:#ebe7de; }
body.authed .steptools .in{ max-width:1240px; gap:7px; padding:8px 20px; scrollbar-width:none; }
body.authed .steplink{ color:#24384e; border:1px solid #d6d2c9; border-radius:999px; background:#fffdfa; box-shadow:0 2px 6px rgba(8,19,33,.035); font-size:10.5px; font-weight:700; }
body.authed .steplink:hover{ color:#172a40; border-color:#b99a51; background:#fbf4e2; }

/* Page heroes and content canvas */
body.authed main{ max-width:1240px; margin:30px auto 112px; padding:0 24px; }
body.authed .panel{ position:relative; isolation:isolate; }
body.authed .panel.active{ animation:appPanelIn .42s var(--ease); }
body.authed .panel.active::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  right:0;
  left:0;
  height:192px;
  border:1px solid rgba(240,223,176,.2);
  border-radius:23px;
  background:
    linear-gradient(90deg,rgba(8,19,33,.99) 0%,rgba(8,19,33,.92) 47%,rgba(8,19,33,.48) 75%,rgba(8,19,33,.66) 100%),
    url('assets/carscope-hero.jpg') 72% 66%/cover no-repeat;
  box-shadow:0 20px 55px rgba(8,19,33,.17);
}
body.authed .panel > h2{ padding:38px 42px 0; color:#fff; font-size:clamp(27px,3vw,36px); font-weight:650; line-height:1.12; letter-spacing:-.045em; }
body.authed .panel > h2::before{ display:block; margin-bottom:10px; color:var(--auth-gold-soft); font-size:9px; font-weight:800; letter-spacing:.18em; line-height:1.2; }
body.authed .panel[data-panel="ownership"] > h2::before{ content:"01 / OWNERSHIP"; }
body.authed .panel[data-panel="equity"] > h2::before{ content:"02 / EQUITY"; }
body.authed .panel[data-panel="profile"] > h2::before{ content:"03 / BUDGET"; }
body.authed .panel[data-panel="snapshot"] > h2::before{ content:"04 / RESEARCH"; }
body.authed .panel[data-panel="expanded"] > h2::before{ content:"RESEARCH TOOL / EXPANDED SEARCH"; }
body.authed .panel[data-panel="listings"] > h2::before{ content:"05 / SHOPPING"; }
body.authed .panel[data-panel="top5"] > h2::before{ content:"SHOPPING TOOL / TOP 5"; }
body.authed .panel[data-panel="dashboard"] > h2::before{ content:"SHOPPING TOOL / MARKET REPORT"; }
body.authed .panel[data-panel="paperwork"] > h2::before{ content:"06 / PAPERWORK"; }
body.authed .panel[data-panel="delivery"] > h2::before{ content:"07 / DELIVERY"; }
body.authed .panel[data-panel="helpers"] > h2::before{ content:"ACCOUNT / ACCESS CONTROL"; }
body.authed .panel[data-panel="helping"] > h2::before{ content:"ACCOUNT / ADVISOR WORKSPACE"; }
body.authed .panel > .lead{ min-height:115px; max-width:78ch; margin:0 0 24px; padding:10px 42px 32px; color:#b6c3d1; font-size:13px; line-height:1.65; }
body.authed .panel > .lead b{ color:#fff; }

/* Forms, layouts and buttons */
body.authed main label{ margin:10px 0 6px; color:#273b51; font-size:11px; font-weight:750; letter-spacing:.012em; }
body.authed main .opt,body.authed main label .opt{ color:#735a22; font-size:9.5px; font-weight:650; }
body.authed main input:not([type="checkbox"]):not([type="file"]),body.authed main select,body.authed main textarea{
  min-height:47px;
  padding:11px 13px;
  color:#172b41;
  border:1px solid #d8dcdd;
  border-radius:11px;
  background:#fff;
  box-shadow:0 1px 2px rgba(8,19,33,.025);
  font-size:13px;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
body.authed main textarea{ min-height:78px; line-height:1.55; }
body.authed main input::placeholder,body.authed main textarea::placeholder{ color:#667482; }
body.authed main input:not([type="checkbox"]):hover,body.authed main select:hover,body.authed main textarea:hover{ border-color:#bcc5ca; }
body.authed main input:focus,body.authed main select:focus,body.authed main textarea:focus{ border-color:#b39249; outline:none; box-shadow:0 0 0 3px rgba(198,167,94,.17),0 6px 18px rgba(8,19,33,.055); }
body.authed main input[readonly],body.authed main textarea[readonly]{ color:#3b4d60; border-color:#e0ded8; background:#f0eee8; }
body.authed main input:-webkit-autofill{ -webkit-text-fill-color:#172b41; box-shadow:inset 0 0 0 1000px #fff; }
body.authed main :is(a,button,input,select,textarea):focus{ scroll-margin-top:82px; scroll-margin-bottom:96px; }
body.authed .grid2,body.authed .grid3,body.authed .grid4{ gap:12px 18px; }
body.authed .grid2 > *,body.authed .grid3 > *,body.authed .grid4 > *{ min-width:0; }
body.authed .btn{
  min-height:43px;
  padding:10px 17px;
  border:1px solid transparent;
  border-radius:11px;
  font-size:12.5px;
  font-weight:750;
  letter-spacing:.005em;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease,color .16s ease;
}
body.authed .btn:hover{ transform:translateY(-1px); }
body.authed .btn:active{ transform:translateY(0) scale(.985); }
body.authed .btn:focus-visible{ outline:3px solid rgba(198,167,94,.32); outline-offset:2px; }
body.authed .btn-gold{ color:#13253b; border-color:#c8a850; background:linear-gradient(135deg,#e7d092,#c7a756); box-shadow:0 9px 22px rgba(160,126,45,.2),inset 0 1px 0 rgba(255,255,255,.55); }
body.authed .btn-gold:hover{ border-color:#bc9844; background:linear-gradient(135deg,#efdda9,#d0b364); box-shadow:0 12px 28px rgba(160,126,45,.27),inset 0 1px 0 rgba(255,255,255,.58); }
body.authed .btn-navy{ color:#fff; border-color:#142b43; background:linear-gradient(145deg,#183650,#0b1c2e); box-shadow:0 8px 20px rgba(8,19,33,.18),inset 0 1px 0 rgba(255,255,255,.08); }
body.authed .btn-navy:hover{ border-color:#284967; background:linear-gradient(145deg,#20435f,#0d2237); box-shadow:0 11px 25px rgba(8,19,33,.24); }
body.authed .btn-ghost{ color:#293d53; border-color:#d6dadb; background:#fffdfa; box-shadow:0 3px 9px rgba(8,19,33,.045); }
body.authed .btn-ghost:hover{ color:#11263c; border-color:#b9c1c5; background:#fff; }
body.authed .btn-danger{ color:#a43a33; border-color:#efd2ce; background:#fff1ef; box-shadow:none; }
body.authed .btn-danger:hover{ color:#86251f; border-color:#e4b8b2; background:#fde6e3; }
body.authed .btn-sm{ min-height:34px; padding:7px 11px; border-radius:9px; font-size:10.5px; }
body.authed .actions{ gap:8px; margin-top:18px; }
body.authed .hint{ color:#566575; font-size:11.5px; line-height:1.55; }
body.authed .fieldhint{ color:#596877; font-size:10px; line-height:1.45; }
@keyframes appPanelIn{ from{ opacity:0; transform:translateY(9px); } to{ opacity:1; transform:none; } }

/* Cards and shared data components */
body.authed .card{
  margin-bottom:18px;
  padding:22px 24px;
  border:1px solid var(--app-line);
  border-radius:18px;
  background:var(--app-surface);
  box-shadow:var(--app-shadow);
}
body.authed .card > h3:first-child,body.authed .panel > h3{ color:#172a40; font-size:14px; font-weight:800; letter-spacing:-.012em; }
body.authed [data-panel="profile"] > .card > h3:not(:first-child){ margin-top:22px !important; padding-top:18px; border-top:1px solid #e5e1d9; }
body.authed .calc-out{
  position:relative;
  overflow:hidden;
  margin-top:16px;
  padding:18px 20px;
  color:#dce5ef;
  border:1px solid rgba(240,223,176,.2);
  border-radius:15px;
  background:radial-gradient(circle at 88% 10%,rgba(214,185,111,.15),transparent 34%),linear-gradient(145deg,var(--auth-midnight),#102b45);
  box-shadow:0 14px 32px rgba(8,19,33,.15);
}
body.authed .calc-out .big{ color:var(--auth-gold-soft); font-size:25px; letter-spacing:-.035em; }
body.authed .calc-out .dgrid{ gap:8px 22px; font-size:12.5px; }
body.authed .calc-out .big2{ color:var(--auth-gold-soft); }
body.authed .range-badge{ margin:5px 6px 5px 0; padding:10px 15px; color:#fff; border:1px solid rgba(240,223,176,.18); border-radius:11px; background:linear-gradient(145deg,#173650,var(--auth-midnight)); box-shadow:0 7px 18px rgba(8,19,33,.14); }
body.authed .range-badge small{ color:var(--auth-gold-soft); letter-spacing:.1em; }
body.authed .warn{
  position:relative;
  margin:12px 0;
  padding:13px 15px 13px 43px;
  color:#70551d;
  border:1px solid #ead7a8;
  border-left:3px solid #c59d40;
  border-radius:12px;
  background:#fcf7e9;
  font-size:12px;
  line-height:1.55;
}
body.authed .warn::before{ content:"!"; position:absolute; top:13px; left:14px; display:grid; place-items:center; width:18px; height:18px; color:#73571c; border:1px solid #d7ba70; border-radius:50%; font-size:10px; font-weight:800; }
body.authed .warn[style*="green-bg"]{ border-color:#c8e3d2; border-left-color:#2f8554; }
body.authed .warn[style*="green-bg"]::before{ content:"✓"; color:#267548; border-color:#8fc4a3; }
body.authed .warn[style*="red-bg"]{ border-color:#efccc7; border-left-color:#b7463e; }
body.authed .warn[style*="red-bg"]::before{ color:#9d332c; border-color:#dfa69f; }
body.authed .empty{
  position:relative;
  padding:30px 22px;
  color:#586675;
  border:1px dashed #cdd1d1;
  border-radius:16px;
  background:rgba(255,253,250,.68);
  font-size:12.5px;
}
body.authed .empty::before{ content:""; display:block; width:28px; height:3px; margin:0 auto 12px; border-radius:3px; background:linear-gradient(90deg,#d8c184,#a78539); }
body.authed .footer-note{ margin-top:25px; color:#596776; font-size:11px; }

body.authed .mk-grid{ gap:11px; margin-top:10px; }
body.authed .mk{
  min-height:52px;
  padding:12px 15px;
  color:#1d334a;
  border:1px solid #dcdedc;
  border-radius:13px;
  background:linear-gradient(145deg,#fff,#faf8f2);
  box-shadow:0 5px 15px rgba(8,19,33,.05);
  font-size:11.5px;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
body.authed .mk:hover{ color:#10253b; border-color:#b99a51; background:#fffaf0; box-shadow:0 9px 22px rgba(8,19,33,.08); transform:translateY(-2px); }
body.authed .mk .arr{ color:#a68132; font-size:16px; }
body.authed .mk:focus-visible{ outline:3px solid rgba(198,167,94,.28); outline-offset:2px; }

body.authed .pill{
  gap:5px;
  padding:4px 8px;
  border:1px solid transparent;
  border-radius:999px;
  font-size:8.5px;
  font-weight:800;
  letter-spacing:.075em;
  line-height:1.25;
}
body.authed .pill.g{ color:#236d43; border-color:#bfe0cb; background:#ebf7ef; }
body.authed .pill.y{ color:#805d17; border-color:#ead6a5; background:#fcf5e2; }
body.authed .pill.r{ color:#9b3932; border-color:#edcbc7; background:#fdf0ee; }
body.authed .pill.n{ color:#4d5c6c; border-color:#d9dddf; background:#f0f2f2; }

body.authed .tiles{ grid-template-columns:repeat(auto-fit,minmax(min(155px,100%),1fr)); gap:12px; }
body.authed #dashTiles{ grid-template-columns:repeat(5,minmax(0,1fr)); }
body.authed .tile{
  position:relative;
  overflow:hidden;
  min-height:105px;
  padding:19px;
  border:1px solid var(--app-line);
  border-radius:16px;
  background:linear-gradient(145deg,#fff,#faf8f3);
  box-shadow:0 9px 24px rgba(8,19,33,.06);
}
body.authed .tile::after{ content:""; position:absolute; right:0; bottom:0; left:0; height:3px; background:#c8c4bb; }
body.authed .tile b{ color:#152b42; font-size:clamp(21px,2.5vw,28px); font-weight:750; letter-spacing:-.045em; line-height:1.1; }
body.authed .tile small{ display:block; margin-top:7px; color:#576675; font-size:10px; line-height:1.35; }
body.authed .tile.g{ background:linear-gradient(145deg,#fff,#f2faf5); } body.authed .tile.g::after{ background:#328557; }
body.authed .tile.y{ background:linear-gradient(145deg,#fff,#fdf8e9); } body.authed .tile.y::after{ background:#c39a3d; }
body.authed .tile.r{ background:linear-gradient(145deg,#fff,#fdf2f0); } body.authed .tile.r::after{ background:#b64c44; }
body.authed .tile.g b{ color:#27764a; } body.authed .tile.y b{ color:#88651b; } body.authed .tile.r b{ color:#a73d36; }

body.authed .vcard{
  position:relative;
  margin-bottom:16px;
  padding:20px 21px;
  border:1px solid #dddcd7;
  border-left:4px solid #aeb6ba;
  border-radius:18px;
  background:var(--app-surface);
  box-shadow:0 13px 34px rgba(8,19,33,.075);
}
body.authed .vcard.g{ border-left-color:#2f8554; } body.authed .vcard.y{ border-left-color:#c29a3c; } body.authed .vcard.r{ border-left-color:#b64a42; }
body.authed .vcard .vh{ gap:16px; }
body.authed .vcard .vt{ color:#152a40; font-size:15px; font-weight:800; letter-spacing:-.015em; }
body.authed .vcard .vmeta{ margin-top:5px; color:#566575; font-size:10.5px; }
body.authed .vcard .vprice{ color:#172d44; font-size:23px; font-weight:750; letter-spacing:-.04em; }
body.authed .vrow{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:11px; padding-top:10px; color:#445363; border-top:1px solid #e8e5df; font-size:11.5px; line-height:1.5; }
body.authed .vrow b{ color:#1a2e44; }
body.authed .vcard .why,body.authed .why{ margin-top:11px; padding-top:10px; color:#566575; border-top:1px dashed #d9d8d3; font-size:10.5px; line-height:1.55; }
body.authed .vcard .why b,body.authed .why b{ color:#314459; }
body.authed .rank{ width:29px; height:29px; margin-right:8px; color:#17283c; border:1px solid #bc9945; background:linear-gradient(135deg,#ead69e,#c4a04c); box-shadow:0 4px 10px rgba(160,126,45,.18); }
body.authed .nextact{ margin-top:12px; padding:11px 13px; color:#425267; border:1px solid #dce0e1; border-left:3px solid #8997a4; border-radius:11px; background:#f2f4f4; font-size:11.5px; }
body.authed .nextact.g{ color:#286b45; border-color:#c7e1d0; border-left-color:#318657; background:#edf8f1; }
body.authed .nextact.y{ color:#785b20; border-color:#e8d7ad; border-left-color:#bf963d; background:#fcf7e9; }
body.authed .nextact.r{ color:#923c35; border-color:#eccbc7; border-left-color:#b54b43; background:#fdf0ee; }
body.authed .stillneed{ margin-top:10px; gap:6px; color:#566575; font-size:10.5px; }
body.authed .miss-chip{ color:#775a1e; border-color:#e4d09c; background:#fcf4df; font-size:9px; }

body.authed .tblwrap{
  overflow-x:auto;
  border:1px solid #d9dcdb;
  border-radius:15px;
  background:#fff;
  box-shadow:0 10px 28px rgba(8,19,33,.065);
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
}
body.authed table.data{ margin:0; color:#33465a; font-size:11.5px; }
body.authed table.data th{ padding:11px 12px; color:#f7f9fb; border-right:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg,#17334e,#0c1e31); font-size:9px; font-weight:800; letter-spacing:.065em; text-transform:uppercase; }
body.authed table.data td{ padding:11px 12px; border-top:1px solid #e5e6e3; }
body.authed table.data tr:nth-child(even) td{ background:#faf9f5; }
body.authed table.data tr:hover td{ background:#fbf6ea; }
body.authed table.data input:not([type="checkbox"]),body.authed table.data select{ min-width:105px; min-height:38px; padding:7px 9px; border-radius:8px; font-size:10.5px; }

/* Qualification and the generated 5D-7 workspaces */
body.authed .qedit{ margin-top:16px; padding-top:18px; border-top:2px solid #c7a657; }
body.authed .qsec{
  margin-bottom:12px;
  padding:16px 17px;
  border:1px solid #deded9;
  border-radius:14px;
  background:linear-gradient(145deg,#faf9f5,#f6f3ec);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
body.authed .qsec h4{ position:relative; gap:10px; margin:0 0 11px; padding:0 0 9px 16px; color:#1c334a; border-bottom:1px solid #e2dfd8; font-size:11.5px; font-weight:800; }
body.authed .qsec h4::before{ content:""; position:absolute; top:4px; left:0; width:6px; height:6px; border-radius:50%; background:#c5a14e; box-shadow:0 0 0 3px rgba(197,161,78,.12); }
body.authed .chkgrid{ gap:4px 18px; }
body.authed .chk{ gap:9px; min-width:0; margin:8px 0; color:#425365; font-size:11.5px; line-height:1.45; overflow-wrap:anywhere; }
body.authed .chk input[type="checkbox"]{ width:17px; height:17px; min-height:17px; flex:0 0 17px; margin:1px 0 0; padding:0; accent-color:#a98333; }
body.authed .scorebars{ gap:9px; }
body.authed .sb{ grid-template-columns:145px 1fr 38px; gap:11px; color:#556375; font-size:10.5px; }
body.authed .sb .bar{ height:8px; background:#dedfdd; }
body.authed .sb .bar i{ background:linear-gradient(90deg,#b18e3e,#ead59a); }
body.authed .sb b{ color:#1e344a; }
body.authed ul.sq,body.authed ol.sq{ color:#4d5b6a; font-size:11.5px; line-height:1.55; }
body.authed .prot{ position:relative; overflow:hidden; margin-top:16px; padding:19px 21px; border:1px solid rgba(240,223,176,.2); border-radius:16px; background:radial-gradient(circle at 92% 8%,rgba(214,185,111,.14),transparent 30%),linear-gradient(145deg,#102b45,var(--auth-midnight)); box-shadow:0 14px 32px rgba(8,19,33,.17); }
body.authed .prot h2{ color:#fff; border-bottom-color:var(--auth-gold); font-size:13px; }
body.authed .prot li{ color:#c7d2de; font-size:10.5px; }
body.authed .gate .vrow:first-child{ border-top:0; }
body.authed [id^="fees_"] > .card,body.authed [id^="insp_"] > .card,body.authed [id^="dealer_"] > .card,body.authed [id^="offer_"] > .card,body.authed [id^="paper_"] > .card,body.authed [id^="deliv_"] > .card{
  margin-top:16px !important;
  padding:22px !important;
  border:1px solid #d7d8d5;
  border-top:3px solid #c5a24f;
  border-radius:17px;
  background:#f9f7f1 !important;
  box-shadow:0 15px 34px rgba(8,19,33,.08);
}
body.authed .fvi:not([type="checkbox"]),body.authed .ivi:not([type="checkbox"]),body.authed .dvi:not([type="checkbox"]),body.authed .ovi:not([type="checkbox"]),body.authed .pvi:not([type="checkbox"]),body.authed .lvi:not([type="checkbox"]){ background:#fffefa; }
body.authed textarea[readonly]{ color:#35485c; border-color:#d9d1bc; background:#f5eedc; }
body.authed .research-report{ margin-top:11px; padding:18px 20px; color:#35485a; border:1px solid #dcdedb; border-radius:15px; background:#fffefa; box-shadow:0 10px 26px rgba(8,19,33,.06); font-size:12px; line-height:1.65; }
body.authed .research-report .rh{ color:#19344d; font-size:14px; }

/* Journey footer, helpers and feedback */
body.authed #nextBar{
  z-index:60;
  color:#fff;
  border-top:1px solid rgba(240,223,176,.24);
  background:rgba(8,19,33,.96);
  box-shadow:0 -12px 34px rgba(8,19,33,.17);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}
body.authed #nextBar .in{ max-width:1240px; min-height:68px; padding:10px 24px calc(10px + env(safe-area-inset-bottom)); }
body.authed .next-context{ display:flex; flex-direction:column; min-width:0; gap:2px; }
body.authed .next-kicker{ color:#a88a46; font-size:7.5px; font-weight:800; letter-spacing:.17em; }
body.authed #nextHint{ color:#d8e0e8; font-size:11px; font-weight:650; }
body.authed #btnNextStep{ display:flex; align-items:center; gap:18px; min-width:190px; justify-content:space-between; padding:11px 17px; font-size:12px; }
body.authed #btnNextStep::after{ content:"→"; font-size:17px; font-weight:500; }

body.helping #helpBanner{
  height:52px;
  border-bottom:1px solid rgba(240,223,176,.32);
  background:linear-gradient(90deg,#071725,#123755);
  box-shadow:0 10px 28px rgba(8,19,33,.2);
}
body.helping #helpBanner .in{ max-width:1240px; height:52px; padding:7px 20px; color:#dbe4ed; font-size:11px; }
body.helping #helpBanner .in > span{ min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
body.helping #helpBanner .in b{ color:#fff; }
body.helping #helpBanner .help-exit{ min-height:34px; flex:0 0 auto; color:var(--auth-gold-soft); border-color:rgba(240,223,176,.34); background:rgba(255,255,255,.06); }
body.helping nav.stages{ top:52px; }
body.authed[data-helper="true"] main{ opacity:.99; }
body.helping-view main .panel input,body.helping-view main .panel select,body.helping-view main .panel textarea{ color:#5e6974; background:#ecebe7; }

#toast{
  top:18px !important;
  padding:12px 17px !important;
  color:#fff !important;
  border:1px solid rgba(240,223,176,.38) !important;
  border-radius:12px !important;
  background:rgba(8,19,33,.96) !important;
  box-shadow:0 18px 45px rgba(0,7,18,.32) !important;
  font-size:11.5px !important;
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
#accessErr{
  padding:12px 17px !important;
  border:1px solid #d8847d !important;
  border-radius:12px !important;
  background:rgba(132,39,32,.96) !important;
  box-shadow:0 18px 45px rgba(0,7,18,.28) !important;
  font-size:11.5px !important;
}

/* The generated hero gives the login the automotive focal point requested. */
.auth-showcase{
  background:
    linear-gradient(90deg,rgba(8,19,33,.97) 0%,rgba(8,19,33,.86) 52%,rgba(8,19,33,.36) 100%),
    linear-gradient(180deg,rgba(8,19,33,.12),rgba(8,19,33,.58)),
    url('assets/carscope-hero.jpg') 67% center/cover no-repeat;
}
.auth-showcase-copy p{ color:#c0cbd6; }
.auth-journey{ padding:16px 15px 14px; border:1px solid rgba(255,255,255,.1); border-radius:13px; background:rgba(5,14,24,.58); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); }
.auth-showcase-foot{ color:#9eabb9; }

@media(max-width:1040px){
  body.authed .stages .in{ display:flex; overflow-x:auto; padding-right:16px; padding-left:16px; }
  body.authed .stage-tab{ flex:0 0 132px; }
  body.authed .grid4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.authed .grid3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.authed #dashTiles{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:780px){
  body.authed .top .in{ min-height:0; flex-direction:column; align-items:stretch; gap:17px; padding:18px 18px 16px; }
  body.authed .top-right{ width:100%; align-items:flex-start; }
  body.authed .shopping-note{ position:absolute; top:21px; right:18px; }
  body.authed .acctbar{ width:100%; flex-wrap:wrap; padding:7px; }
  body.authed .acct-identity{ flex:1 0 calc(100% - 10px); min-height:27px; }
  body.authed .acct-email{ max-width:100%; }
  body.authed .acctbar .btn{ flex:1 1 120px; }
  body.authed main{ margin-top:18px; padding:0 14px; }
  body.authed .panel.active::before{ height:204px; border-radius:19px; background-position:center,70% 66%; }
  body.authed .panel > h2{ padding:30px 26px 0; font-size:28px; }
  body.authed .panel > .lead{ min-height:137px; padding:9px 26px 27px; font-size:12px; }
  body.authed .card{ padding:19px; border-radius:16px; }
  body.authed .qsec{ padding:14px; }
  body.authed .grid2,body.authed .grid3,body.authed .grid4{ grid-template-columns:1fr; gap:8px; }
  body.authed .grid2 > [style*="grid-column"],body.authed .grid3 > [style*="grid-column"],body.authed .grid4 > [style*="grid-column"]{ grid-column:1/-1 !important; }
  body.authed .chkgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.authed .prot ul{ grid-template-columns:1fr; }
  body.authed .prot > div[style*="display:grid"]{ grid-template-columns:1fr !important; }
  body.authed .vcard{ padding:17px; }
  body.authed .vcard .vh{ flex-direction:column; }
  body.authed .vcard .vh > [style*="text-align:right"]{ width:100%; text-align:left !important; }
  body.authed .vrow{ gap:7px 14px; }
  body.authed .qsec .tblwrap table.data{ min-width:680px; }
  body.authed [id^="fees_"] > .card,body.authed [id^="insp_"] > .card,body.authed [id^="dealer_"] > .card,body.authed [id^="offer_"] > .card,body.authed [id^="paper_"] > .card,body.authed [id^="deliv_"] > .card{ padding:17px !important; }
}
@media(max-width:560px){
  body.authed .app-mark{ width:42px; height:42px; flex-basis:42px; border-radius:12px; }
  body.authed .app-mark svg{ width:26px; height:26px; }
  body.authed .top h1{ font-size:19px; }
  body.authed .app-wordmark small{ display:none; }
  body.authed .top .sub{ max-width:250px; font-size:10px; }
  body.authed .shopping-note{ padding:4px 8px; font-size:7px; }
  body.authed .stage-tab{ flex-basis:116px; min-height:44px; font-size:10px; }
  body.authed .stage-tab .n{ width:23px; height:23px; flex-basis:23px; }
  body.authed main{ margin-bottom:104px; padding:0 10px; }
  body.authed .panel.active::before{ height:218px; border-radius:17px; }
  body.authed .panel > h2{ padding:26px 21px 0; font-size:25px; }
  body.authed .panel > h2::before{ margin-bottom:8px; font-size:8px; }
  body.authed .panel > .lead{ min-height:157px; padding:8px 21px 24px; font-size:11px; line-height:1.55; }
  body.authed .card{ padding:16px 14px; border-radius:14px; }
  body.authed main input:not([type="checkbox"]):not([type="file"]),body.authed main select,body.authed main textarea{ min-height:45px; font-size:12px; }
  body.authed .mk-grid{ grid-template-columns:1fr; }
  body.authed .tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.authed #dashTiles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.authed .tile{ min-height:94px; padding:15px; }
  body.authed .tile b{ font-size:20px; }
  body.authed .chkgrid{ grid-template-columns:minmax(0,1fr); }
  body.authed .sb{ grid-template-columns:1fr 34px; gap:5px 9px; }
  body.authed .sb > span{ grid-column:1/-1; }
  body.authed .vcard{ padding:15px 13px; border-radius:15px; }
  body.authed .vcard .vt{ font-size:13.5px; }
  body.authed .vcard .vprice{ font-size:21px; }
  body.authed .vcard .actions .btn{ flex:1 1 130px; }
  body.authed .qsec{ padding:13px 11px; border-radius:12px; }
  body.authed .prot{ padding:16px 14px; }
  body.authed #nextBar .in{ gap:9px; padding:9px 10px calc(9px + env(safe-area-inset-bottom)); }
  body.authed .next-kicker{ display:none; }
  body.authed #nextHint{ max-width:108px; overflow:hidden; font-size:9.5px; white-space:nowrap; text-overflow:ellipsis; }
  body.authed #btnNextStep{ min-width:0; flex:1; min-height:44px; }
  body.helping #helpBanner .in{ padding-right:10px; padding-left:10px; font-size:9.5px; }
  body.helping #helpBanner .help-exit{ padding:6px 9px; font-size:9px; }
  .auth-showcase{ min-height:132px; background-position:center,center,72% 68%; }
}
@media(max-width:370px){
  body.authed .tiles{ grid-template-columns:1fr; }
  body.authed #dashTiles{ grid-template-columns:1fr; }
  body.authed .shopping-note{ display:none; }
  body.authed .acctbar{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.authed .acct-identity{ grid-column:1/-1; width:100%; }
  body.authed .acctbar .btn{ width:100%; min-width:0; padding-right:7px; padding-left:7px; }
  body.authed .acctbar #btnLogout{ grid-column:1/-1; }
  body.authed .panel > .lead{ min-height:170px; }
}
@media(prefers-reduced-motion:reduce){
  body.authed .panel.active{ animation:none; }
  body.authed .btn,body.authed .stage-tab,body.authed .mk{ scroll-behavior:auto; transition:none; }
}

/* ---------- Cinematic showroom login ---------- */
#authGate{
  padding:clamp(20px,3.4vw,54px);
  background:
    linear-gradient(90deg,rgba(3,11,23,.67) 0%,rgba(3,12,25,.43) 39%,rgba(3,12,25,.17) 65%,rgba(3,11,23,.33) 100%),
    linear-gradient(180deg,rgba(2,8,18,.12),rgba(2,8,18,.36)),
    url('assets/carscope-login-showroom.jpg') center/cover no-repeat;
}
#authGate::before,#authGate::after{ display:none; }
.auth-card{
  grid-template-columns:minmax(0,1fr) minmax(390px,470px);
  gap:clamp(34px,5vw,82px);
  width:min(100%,1450px);
  min-width:0;
  min-height:min(820px,calc(100dvh - clamp(40px,6.8vw,108px)));
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.auth-showcase{
  overflow:visible;
  padding:26px 0 28px clamp(0px,2vw,30px);
  background:none;
}
.auth-showcase::before,.auth-showcase::after{ display:none; }
.auth-brand{ gap:16px; }
.auth-mark{
  width:54px;
  height:60px;
  flex-basis:54px;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}
.auth-mark svg{ width:48px; height:56px; filter:drop-shadow(0 8px 18px rgba(0,0,0,.28)); }
.auth-wordmark{ font-size:27px; letter-spacing:-.04em; text-shadow:0 2px 16px rgba(0,0,0,.34); }
.auth-wordmark small{ margin-top:7px; color:rgba(221,232,244,.64); font-size:8px; }
.auth-showcase-copy{ max-width:540px; margin:clamp(82px,12vh,138px) 0 auto; }
.auth-kicker{ margin-bottom:17px; font-size:9.5px; text-shadow:0 2px 12px rgba(0,0,0,.4); }
.auth-showcase h1{ max-width:540px; font-size:clamp(42px,3.55vw,56px); line-height:1.04; text-shadow:0 4px 25px rgba(0,0,0,.4); }
.auth-showcase-copy p{ max-width:42ch; margin-top:19px; color:#d0d9e3; font-size:14px; line-height:1.65; text-shadow:0 2px 15px rgba(0,0,0,.5); }
.auth-journey,.auth-showcase-foot{ display:none; }

.auth-panel{
  align-self:center;
  justify-self:end;
  width:100%;
  min-width:0;
  min-height:0;
  padding:clamp(36px,4vw,52px) clamp(34px,4.2vw,56px);
  border:1px solid rgba(255,255,255,.72);
  border-radius:27px;
  background:rgba(251,250,247,.965);
  box-shadow:0 35px 90px rgba(0,5,15,.44),0 7px 24px rgba(0,5,15,.2),inset 0 1px 0 rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
.auth-panel-inner{ width:100%; min-width:0; max-width:390px; }
.auth-panel-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:25px;
  color:#10233a;
  font-size:27px;
  font-weight:650;
  letter-spacing:-.045em;
}
.auth-panel-brand b{ color:#a98431; font-weight:800; }
.auth-panel-mark{ display:grid; place-items:center; width:42px; height:48px; color:#b28c37; }
.auth-panel-mark svg{ width:39px; height:46px; }
.auth-heading,.auth-recovery-heading{ text-align:center; }
.auth-overline{ display:none; }
.auth-heading h2,.auth-recovery-heading h2{ font-size:31px; }
.auth-tag{ margin-top:7px; color:#647180; font-size:12.5px; }
.auth-form,.auth-recovery{ margin-top:27px; }
.auth-card label{ margin-bottom:8px; color:#192d45; font-size:11px; }
.auth-card input{ height:54px; border-color:#d5dbe0; background:rgba(255,255,255,.9); }
.auth-card input:focus-visible,.auth-primary:focus-visible,.auth-secondary:focus-visible,.auth-link:focus-visible{ outline:3px solid #1b5683; outline-offset:2px; }
.auth-field + .auth-field{ margin-top:18px; }
.auth-forgot-row{ margin-top:8px; text-align:right; }
.auth-forgot-row .auth-link{ margin:0; }
.auth-actions{ gap:13px; margin-top:24px; }
.auth-actions .btn,.auth-recovery .btn{ min-height:52px; }
.auth-divider{ display:none; }
.auth-primary{ position:relative; justify-content:center; color:#10233a; }
.auth-primary span{ flex:1; text-align:center; }
.auth-primary svg{ position:absolute; right:18px; }
.auth-secondary{ color:#1d3047; background:rgba(255,255,255,.48); }
.auth-note{ margin-top:19px; padding:11px 12px; color:#697583; background:rgba(255,255,255,.42); font-size:11px; }

@media(max-width:960px){
  #authGate{
    padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
    align-items:flex-start;
    background:linear-gradient(145deg,#061323,#0b2138);
  }
  .auth-card{
    grid-template-columns:1fr;
    gap:0;
    width:min(100%,620px);
    min-height:0;
    margin:auto;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.28);
    border-radius:25px;
    background:var(--auth-paper);
    box-shadow:0 30px 80px rgba(0,6,17,.48);
  }
  .auth-showcase{
    min-height:176px;
    padding:24px 28px;
    background:
      linear-gradient(90deg,rgba(4,13,26,.58),rgba(4,13,26,.1)),
      linear-gradient(180deg,rgba(4,13,26,.03),rgba(4,13,26,.3)),
      url('assets/carscope-login-showroom.jpg') 24% 68%/cover no-repeat;
  }
  .auth-showcase-copy,.auth-journey,.auth-showcase-foot{ display:none; }
  .auth-panel{ justify-self:stretch; padding:36px 46px 40px; border:0; border-radius:0; background:var(--auth-paper); box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .auth-panel-brand{ display:none; }
}

@media(max-width:560px){
  #authGate{ padding:max(9px,env(safe-area-inset-top)) max(9px,env(safe-area-inset-right)) max(9px,env(safe-area-inset-bottom)) max(9px,env(safe-area-inset-left)); }
  .auth-card{ border-radius:20px; }
  .auth-showcase{ min-height:150px; padding:19px 21px; background-position:center,center,23% 69%; }
  .auth-mark{ width:43px; height:48px; flex-basis:43px; }
  .auth-mark svg{ width:39px; height:46px; }
  .auth-wordmark{ font-size:20px; }
  .auth-panel{ padding:28px 22px 25px; }
  .auth-panel-inner{ max-width:100%; }
  .auth-heading h2,.auth-recovery-heading h2{ font-size:28px; }
  .auth-tag{ font-size:11.5px; }
  .auth-form,.auth-recovery{ margin-top:22px; }
  .auth-card input{ height:50px; }
  .auth-actions{ margin-top:21px; }
  .auth-actions .btn,.auth-recovery .btn{ min-height:48px; }
  .auth-forgot-row .auth-link{ display:inline-flex; min-height:44px; align-items:center; justify-content:flex-end; padding:9px 2px; }
  .auth-note{ margin-top:17px; font-size:11px; }
}

@media(max-width:340px){
  .auth-showcase{ min-height:136px; }
  .auth-panel{ padding:24px 22px 21px; }
  .auth-field + .auth-field{ margin-top:15px; }
  .auth-actions{ margin-top:17px; }
  .auth-note{ margin-top:14px; }
}

@media(max-height:740px) and (min-width:961px){
  #authGate{ padding:16px 34px; }
  .auth-card{ min-height:calc(100dvh - 32px); }
  .auth-showcase{ padding-top:18px; padding-bottom:18px; }
  .auth-showcase-copy{ margin-top:52px; }
  .auth-showcase h1{ font-size:42px; }
  .auth-panel{ padding:27px 44px; }
  .auth-panel-brand{ margin-bottom:15px; font-size:24px; }
  .auth-panel-mark{ width:35px; height:40px; }
  .auth-panel-mark svg{ width:33px; height:39px; }
  .auth-heading h2,.auth-recovery-heading h2{ font-size:28px; }
  .auth-form,.auth-recovery{ margin-top:19px; }
  .auth-field + .auth-field{ margin-top:13px; }
  .auth-card input{ height:48px; }
  .auth-actions{ gap:9px; margin-top:17px; }
  .auth-actions .btn,.auth-recovery .btn{ min-height:46px; }
  .auth-note{ margin-top:13px; padding:8px 10px; }
}