/* ============================================================
   FOREX SUCCESS AI — Dashboard theme (user + admin)
   Self-contained, matches the landing page palette.
   ============================================================ */
:root{
  --bg:#070b14; --bg-2:#0b101d; --bg-3:#0f1626;
  --card:rgba(17,24,40,.72); --line:rgba(232,182,76,.16); --line-soft:rgba(255,255,255,.08);
  --gold:#e8b64c; --gold-2:#f5d179; --green:#25c07d; --red:#ef5064; --blue:#5aa9ff;
  --text:#f2f5fa; --text-2:rgba(235,240,248,.68);

  /* --text-3 was .42 alpha. Over --card that lands at roughly 3.5:1 against the
     panel behind it, and it is used almost exclusively for SMALL text (stat
     labels, table headers, hints) where 4.5:1 is the bar. Raised to .58, which
     measures ~5.1:1, without losing the "this is secondary" read. The old value
     is kept as --text-4 for genuinely decorative marks (chart gridline labels,
     disabled glyphs) where contrast is not a reading requirement. */
  --text-3:rgba(235,240,248,.58); --text-4:rgba(235,240,248,.42);

  --radius:14px; --font-head:'Sora','Inter',sans-serif; --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;

  /* ---- spacing scale: every gap/margin below picks from this ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:22px; --sp-6:30px; --sp-7:42px; --sp-8:60px;

  /* ---- type scale ---- */
  --fs-xs:.76rem; --fs-sm:.86rem; --fs-base:.94rem; --fs-md:1.05rem;
  --fs-lg:1.28rem; --fs-xl:1.6rem; --fs-2xl:2.05rem;
  --lh-prose:1.7; --lh-tight:1.3;

  /* ---- shell ---- */
  --shell:1560px;          /* content column ceiling, topbar + main + footer */
  --gutter:clamp(14px,2%,40px);
  --prose:70ch;            /* paragraphs never run wider than this */
  --focus:var(--gold-2);

  /* Field colours are tokenised so the -webkit-autofill inset shadow below can
     match them exactly. #121a2b was previously hard-coded in one place only. */
  --field-bg:var(--bg-3); --field-bg-focus:#121a2b;
  /* Opaque equivalent of --line-soft composited over --field-bg. An inset
     box-shadow is clipped to the PADDING box, but Chrome paints its autofill
     background across the whole BORDER box — so a 92%-transparent border let
     the blue through as a bright 1px ring. The autofill rule needs an opaque
     border, and this is that colour. */
  --field-border-solid:#212837;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.mono{font-family:var(--font-mono)}
.muted{color:var(--text-2)}
.small{font-size:.85rem}

/* layout */
/* .topbar stays a flex row so the two simple checkout headers (brand / .spacer /
   button, no .topbar-in) keep working exactly as before. The dashboard headers
   put a single .topbar-in grid inside it — see the V9 section. */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:18px;
  padding:14px var(--gutter);
  background:rgba(7,11,20,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:800;letter-spacing:.3px}
.brand .dot{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--gold),var(--gold-2));display:inline-block}
.brand small{display:block;font-size:.62rem;font-weight:600;letter-spacing:2px;color:var(--gold);text-transform:uppercase}
.nav{display:flex;gap:6px;flex-wrap:wrap;margin-left:6px}
.nav a{padding:8px 14px;border-radius:10px;font-weight:600;font-size:.9rem;color:var(--text-2);transition:.15s}
.nav a:hover{background:var(--bg-3);color:var(--text)}
.nav a.active{background:rgba(232,182,76,.12);color:var(--gold)}
.topbar .spacer{flex:1}
.userchip{display:flex;align-items:center;gap:10px;font-size:.86rem;color:var(--text-2)}
.wrap{width:min(1240px,96%);margin:26px auto 60px}
.pagehead{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.pagehead h1{font-family:var(--font-head);font-size:1.5rem;font-weight:800}
.pagehead p{color:var(--text-2);font-size:.92rem;margin-top:3px}

/* cards + grid */
.grid{display:grid;gap:16px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr)}}
/* The `.nav{display:none}` that used to live here is gone for good: it hid the
   only navigation on the page below 620px and offered nothing in its place.
   The hamburger + #primary-nav panel in the V9 section replaces it. */
@media(max-width:620px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);padding:20px}
.card h2{font-family:var(--font-head);font-size:1.05rem;font-weight:700;margin-bottom:14px}
.card h3{font-size:.95rem;font-weight:700;margin-bottom:10px}
.stat{display:flex;flex-direction:column;gap:6px}
.stat .label{font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-3);font-weight:700}
.stat .value{font-family:var(--font-head);font-size:1.7rem;font-weight:800}
.stat .value.mono{font-family:var(--font-mono)}
.pos{color:var(--green)}.neg{color:var(--red)}

/* tables */
.table-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
table.tbl th,table.tbl td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
table.tbl th{font-size:.72rem;letter-spacing:1px;text-transform:uppercase;color:var(--text-3);font-weight:700}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tbody tr:hover{background:rgba(255,255,255,.02)}

/* badges */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:.74rem;font-weight:700;letter-spacing:.3px}
.badge.green{background:rgba(37,192,125,.14);color:var(--green)}
.badge.red{background:rgba(239,80,100,.14);color:var(--red)}
.badge.gold{background:rgba(232,182,76,.14);color:var(--gold)}
.badge.grey{background:rgba(255,255,255,.08);color:var(--text-2)}
.badge.blue{background:rgba(90,169,255,.14);color:var(--blue)}

/* forms */
.field{margin-bottom:15px}
.field label{display:block;font-size:.8rem;font-weight:600;color:var(--text-2);margin-bottom:6px}
.field input,.field select{width:100%;padding:11px 13px;background:var(--field-bg);border:1px solid var(--line-soft);
  border-radius:10px;color:var(--text);font-family:inherit;font-size:.95rem;transition:.15s}
.field input:focus,.field select:focus{outline:none;border-color:var(--gold);background:var(--field-bg-focus)}

/* Chrome/Edge paint autofilled inputs rgb(232,240,254) via a UA background that
   normal `background` cannot override. A 1000px inset shadow in the field colour
   is the only way to cover it; -webkit-text-fill-color the only way to recolour
   the text. MUST stay after `.field input:focus` — both selectors are
   specificity (0,2,1), so source order alone decides the winner.
   The box-shadow is the load-bearing half: section 23 forces
   transition-duration:.001ms !important on *, which voids the 9999s transition
   for anyone with prefers-reduced-motion. Neither half may be dropped. */
.field input:-webkit-autofill,.field select:-webkit-autofill,.field textarea:-webkit-autofill,
.field input:-webkit-autofill:hover,.field select:-webkit-autofill:hover,.field textarea:-webkit-autofill:hover,
.field input:-webkit-autofill:active,.field select:-webkit-autofill:active,.field textarea:-webkit-autofill:active{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--field-bg) inset;
          box-shadow:0 0 0 1000px var(--field-bg) inset;
  caret-color:var(--text);
  border:1px solid var(--field-border-solid);
  transition:background-color 9999s ease-in-out 0s;
}
.field input:-webkit-autofill:focus,.field select:-webkit-autofill:focus,.field textarea:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--field-bg-focus) inset;
          box-shadow:0 0 0 1000px var(--field-bg-focus) inset;
  border-color:var(--gold);
}
/* Separate block on purpose: a browser that cannot parse :autofill would discard
   the whole rule if it shared a selector list with :-webkit-autofill. */
.field input:autofill,.field select:autofill,.field textarea:autofill,
.field input:autofill:hover,.field select:autofill:hover,.field textarea:autofill:hover,
.field input:autofill:active,.field select:autofill:active,.field textarea:autofill:active{
  -webkit-text-fill-color:var(--text);
  box-shadow:0 0 0 1000px var(--field-bg) inset;
  caret-color:var(--text);
}
.field input:autofill:focus,.field select:autofill:focus,.field textarea:autofill:focus{
  box-shadow:0 0 0 1000px var(--field-bg-focus) inset}
/* Firefox tints via filter, not background. Own block for the same reason. */
.field input:-moz-autofill,
.field input:-moz-autofill-preview{filter:none}

.field .hint{font-size:.76rem;color:var(--text-3);margin-top:5px}
.row-inline{display:flex;gap:12px;flex-wrap:wrap}
.row-inline>*{flex:1;min-width:150px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:10px;
  font-weight:700;font-size:.9rem;cursor:pointer;border:1px solid transparent;transition:.15s;font-family:inherit}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#1a1204}
.btn-gold:hover{filter:brightness(1.06)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--text)}
.btn-ghost:hover{background:var(--bg-3)}
.btn-danger{background:rgba(239,80,100,.14);color:var(--red);border-color:rgba(239,80,100,.3)}
.btn-danger:hover{background:rgba(239,80,100,.22)}
.btn-sm{padding:7px 12px;font-size:.82rem}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* toggle */
.switch{position:relative;display:inline-block;width:46px;height:26px}
/* Visually hidden, NOT display:none — the latter takes the checkbox out of
   the tab order, so the toggle could not be operated by keyboard at all
   (and the :focus-visible rule further down could never match). */
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch .slider{position:absolute;inset:0;background:#2a3346;border-radius:999px;transition:.2s;cursor:pointer}
.switch .slider::before{content:"";position:absolute;height:20px;width:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked+.slider{background:var(--green)}
.switch input:checked+.slider::before{transform:translateX(20px)}

/* alerts */
.alert{padding:12px 15px;border-radius:10px;margin-bottom:16px;font-size:.9rem;border:1px solid transparent}
.alert-success{background:rgba(37,192,125,.12);border-color:rgba(37,192,125,.3);color:#8ff0c4}
.alert-danger{background:rgba(239,80,100,.12);border-color:rgba(239,80,100,.3);color:#ffb4be}
.alert-warning{background:rgba(232,182,76,.12);border-color:rgba(232,182,76,.3);color:#f5d179}
.alert-info{background:rgba(90,169,255,.12);border-color:rgba(90,169,255,.3);color:#bcd9ff}

/* Flash messages carry their own dismiss button. The markup used to be
   Bootstrap's (.alert-dismissible + .btn-close + data-bs-dismiss), which has
   not been loaded by this app for a long time — every flash shipped an
   unstyled native button that did nothing. display_flash_messages() now emits
   .alert-body + .alert-x, styled here. */
.alert:has(.alert-x){display:flex;align-items:flex-start;gap:12px}
.alert .alert-body{flex:1;min-width:0}
.alert .alert-x{flex:none;background:none;border:0;cursor:pointer;color:inherit;
  opacity:.55;font-size:1.25rem;line-height:1;padding:2px 4px;border-radius:6px;
  min-width:32px;min-height:32px;font-family:inherit;transition:.15s}
.alert .alert-x:hover{opacity:1;background:rgba(255,255,255,.08)}
@media(max-width:620px){.alert .alert-x{min-width:44px;min-height:44px}}

/* auth pages */
.auth-shell{min-height:100vh;display:grid;place-items:center;padding:30px 16px;
  background:radial-gradient(1200px 600px at 50% -10%,rgba(232,182,76,.08),transparent),var(--bg)}
.auth-card{width:min(430px,100%);background:var(--card);border:1px solid var(--line);border-radius:18px;padding:32px}
.auth-card .brand{justify-content:center;margin-bottom:6px;font-size:1.15rem}
.auth-card h1{font-family:var(--font-head);font-size:1.4rem;text-align:center;margin-bottom:4px}
.auth-card .sub{text-align:center;color:var(--text-2);font-size:.9rem;margin-bottom:22px}
.auth-card .btn{width:100%;margin-top:4px}
.auth-alt{text-align:center;margin-top:18px;font-size:.88rem;color:var(--text-2)}
.auth-alt a{color:var(--gold);font-weight:600}
.divider{height:1px;background:var(--line-soft);margin:20px 0}
.bar{height:8px;background:var(--bg-3);border-radius:999px;overflow:hidden}
.bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-2))}

/* ============================================================
   V4 — analysis dashboard: charts, tabs, status bar, trackers
   ============================================================ */

/* status bar + kill switch */
.statusbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sb-main{display:flex;align-items:center;gap:14px}
.sb-title{font-family:var(--font-head);font-size:1.15rem;font-weight:800;line-height:1.2}
.sb-dot{width:14px;height:14px;border-radius:50%;flex:none;position:relative}
.sb-dot.on{background:var(--green);box-shadow:0 0 0 4px rgba(37,192,125,.16)}
.sb-dot.off{background:var(--red);box-shadow:0 0 0 4px rgba(239,80,100,.16)}
.sb-dot.on::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--green);
  animation:sbpulse 2s ease-out infinite}
@keyframes sbpulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.6);opacity:0}}

/* granularity tabs */
.tabs{display:inline-flex;gap:4px;padding:4px;background:var(--bg-3);border:1px solid var(--line-soft);
  border-radius:12px;flex-wrap:wrap}
.tabs a{padding:8px 16px;border-radius:9px;font-size:.86rem;font-weight:600;color:var(--text-2);transition:.15s}
.tabs a:hover{color:var(--text)}
.tabs a.active{background:rgba(232,182,76,.14);color:var(--gold)}

/* standalone select (account picker in the page head) */
.pagehead select{padding:10px 13px;background:var(--bg-3);border:1px solid var(--line-soft);
  border-radius:10px;color:var(--text);font-family:inherit;font-size:.9rem;min-width:230px}
.pagehead select:focus{outline:none;border-color:var(--gold)}

/* ---- charts ---- */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart-empty{padding:34px 12px;text-align:center;color:var(--text-3);font-size:.88rem}
.cgrid{stroke:rgba(255,255,255,.055);stroke-width:1}
.czero{stroke:rgba(255,255,255,.16);stroke-width:1}
.cylab{fill:var(--text-3);font-size:10px;font-family:var(--font-mono);text-anchor:end}
.cxlab{fill:var(--text-3);font-size:10px;font-family:var(--font-body)}

/* line draws itself in, area fades up behind it */
.cline{stroke-dasharray:4000;stroke-dashoffset:4000;animation:cdraw 1.5s cubic-bezier(.22,.75,.3,1) forwards}
@keyframes cdraw{to{stroke-dashoffset:0}}
.carea{opacity:0;transform-origin:bottom;animation:carea 1.1s .25s ease-out forwards}
@keyframes carea{from{opacity:0;transform:scaleY(.72)}to{opacity:1;transform:scaleY(1)}}
.cdot{opacity:0;animation:cdot .4s 1.35s ease-out forwards}
@keyframes cdot{from{opacity:0;r:0}to{opacity:1}}

/* bars grow out of the zero line */
.cbar{transform:scaleY(0);animation:cbar .6s cubic-bezier(.2,.8,.3,1) forwards}
.cbar.pos{fill:var(--green)}
.cbar.neg{fill:var(--red)}
.cbar:hover{filter:brightness(1.25)}
@keyframes cbar{to{transform:scaleY(1)}}

/* donut slices sweep clockwise */
.donut{max-width:190px}
.donutwrap{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.donutwrap>div{flex:1;min-width:190px}
.dslice{animation:dsweep .9s cubic-bezier(.25,.8,.3,1) both}
@keyframes dsweep{from{stroke-dasharray:0 10000}}
.dcentre{fill:var(--text);font-family:var(--font-head);font-size:22px;font-weight:800}
.dcentre-sub{fill:var(--text-3);font-size:9px;letter-spacing:1.4px;text-transform:uppercase}
.clegend{display:flex;flex-direction:column;gap:8px}
.citem{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--text-2)}
.citem i{width:10px;height:10px;border-radius:3px;flex:none}
.citem b{margin-left:auto;font-family:var(--font-mono);color:var(--text)}

/* key/value rows next to the donut */
.kv{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:.87rem;color:var(--text-2)}

/* drawdown mini-bar in the tracker table */
.trk td{vertical-align:middle}
.ddbar{height:4px;border-radius:3px;background:rgba(255,255,255,.07);margin-top:6px;width:110px;overflow:hidden}
.ddbar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#ef5064,#ff8f9c);
  animation:ddgrow .9s cubic-bezier(.2,.8,.3,1) forwards;transform-origin:left;transform:scaleX(0)}
@keyframes ddgrow{to{transform:scaleX(1)}}

@media (max-width:900px){
  .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
  .statusbar{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .cline,.carea,.cdot,.cbar,.dslice,.ddbar i,.sb-dot.on::after{animation:none}
  .cline{stroke-dashoffset:0}.carea,.cdot{opacity:1}
  .cbar{transform:scaleY(1)}.ddbar i{transform:scaleX(1)}
}

/* impersonation banner (admin viewing a client account) */
.imp-bar{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;padding:9px 22px;font-size:.86rem;
  background:linear-gradient(90deg,rgba(90,169,255,.20),rgba(90,169,255,.10));
  border-bottom:1px solid rgba(90,169,255,.42);color:#dcebff}
.imp-bar .imp-txt strong{color:var(--blue);letter-spacing:.3px}
.imp-bar .mono{color:#fff}
.imp-btn{background:rgba(90,169,255,.18);border-color:rgba(90,169,255,.45);color:#dcebff}
.imp-btn:hover{background:rgba(90,169,255,.30)}
/* The impersonation bar does NOT stick.
 *
 * It used to be position:sticky;top:0 with the topbar offset by a hardcoded
 * `top:41px`. Two problems, both real:
 *   - 41px was measured against a text-only bar. It contains a .btn-sm, so it
 *     is ~53px tall — a permanent 12px overlap at every width.
 *   - The <=640px block reset the topbar to top:0 while the bar stayed pinned,
 *     so both occupied the same strip. The bar has the higher z-index and its
 *     right-aligned "Return to admin" button sat exactly where the hamburger
 *     is: tapping the menu dropped the impersonation session instead.
 * Making it a normal block that scrolls away removes the whole class of bug —
 * and it is a one-time notice, not something that needs to follow you down the
 * page. */
.imp-bar{position:static}
@media (max-width:640px){ .imp-bar{padding:8px 14px} }

/* monthly profit cap meter (packages) */
.capbar{height:8px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.capbar i{display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,var(--green),#7ce0b0);transition:width .5s ease}
.capbar i.over{background:linear-gradient(90deg,var(--red),#ff8f9c)}
.capcard-hit{border-color:rgba(239,80,100,.45);background:linear-gradient(180deg,rgba(239,80,100,.08),var(--card))}

/* ============================================================
   V6 — commerce: checkout, billing, pricing admin
   ============================================================ */

/* section heading between card groups */
.section-h{font-family:var(--font-head);font-size:1.05rem;font-weight:800;letter-spacing:.2px;
  margin:26px 0 12px;display:flex;align-items:center;gap:12px;color:var(--text)}
.section-h::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.sec-kicker{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--gold);margin-bottom:8px}

/* textarea shares the field styling with inputs */
.field textarea{width:100%;padding:11px 13px;background:var(--field-bg);border:1px solid var(--line-soft);
  border-radius:10px;color:var(--text);font-family:inherit;font-size:.92rem;line-height:1.6;resize:vertical}
.field textarea:focus{outline:none;border-color:var(--gold);background:var(--field-bg-focus)}

/* inline checkbox with a label */
.chk{display:flex;align-items:center;gap:9px;font-size:.88rem;color:var(--text-2);
  padding:8px 0;cursor:pointer;white-space:nowrap}
.chk input{width:16px;height:16px;accent-color:var(--gold);cursor:pointer}

/* tick list used on plans and checkout */
.ticklist{list-style:none;display:flex;flex-direction:column;gap:9px;margin:4px 0}
.ticklist li{position:relative;padding-left:26px;font-size:.88rem;color:var(--text-2);line-height:1.5}
.ticklist li::before{content:"";position:absolute;left:2px;top:.42em;width:12px;height:7px;
  border-left:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:rotate(-45deg);border-radius:1px}

/* ---- checkout summary ---- */
.checkout-line{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:.9rem;color:var(--text-2)}
.checkout-line strong{color:var(--text);text-align:right}
.checkout-total{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:.95rem}
.checkout-total b{font-size:1.7rem;font-family:var(--font-head);color:var(--gold)}

/* ---- payment success ---- */
.paid-hero{text-align:center;padding:38px 24px;
  background:radial-gradient(700px 300px at 50% -30%,rgba(37,192,125,.16),transparent),var(--card);
  border-color:rgba(37,192,125,.32)}
.paid-hero h1{font-family:var(--font-head);font-size:1.8rem;font-weight:800;margin-bottom:8px}
.paid-hero p{color:var(--text-2);max-width:560px;margin-inline:auto;font-size:.95rem}
.paid-tick{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;
  background:rgba(37,192,125,.14);color:var(--green);border:1px solid rgba(37,192,125,.4);
  animation:paidpop .5s cubic-bezier(.2,1.3,.4,1) both}
@keyframes paidpop{from{transform:scale(.5);opacity:0}}
.paid-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}

/* ---- locked download ---- */
.lock-panel{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:16px;
  border-color:rgba(232,182,76,.34);
  background:linear-gradient(120deg,rgba(232,182,76,.09),var(--card))}
.lock-panel>div:nth-child(2){flex:1;min-width:240px}
.lock-icon{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;flex:none;
  background:rgba(232,182,76,.13);color:var(--gold);border:1px solid rgba(232,182,76,.3)}
.dl-card{display:flex;flex-direction:column;gap:16px}
.dl-top{display:flex;align-items:center;gap:14px}
.dl-mark{width:52px;height:52px;border-radius:13px;flex:none;display:grid;place-items:center;
  font-family:var(--font-head);font-weight:800;font-size:.9rem;letter-spacing:.5px}
.dl-mark.mt5{background:rgba(90,169,255,.14);color:var(--blue);border:1px solid rgba(90,169,255,.3)}
.dl-mark.mt4{background:rgba(232,182,76,.13);color:var(--gold);border:1px solid rgba(232,182,76,.3)}

/* ---- onboarding strip on the dashboard ---- */
.onboard{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-bottom:16px;
  border-color:rgba(232,182,76,.3);
  background:radial-gradient(600px 240px at 12% -40%,rgba(232,182,76,.13),transparent),var(--card)}
.onboard-body{flex:1;min-width:270px}
.onboard-body h2{font-family:var(--font-head);font-size:1.28rem;margin-bottom:6px}
.onboard-steps{list-style:none;display:flex;flex-direction:column;gap:11px;min-width:240px}
.onboard-steps li{display:flex;align-items:center;gap:11px;font-size:.88rem;color:var(--text-2)}
.onboard-steps li span{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:.78rem;font-weight:800;background:var(--bg-3);color:var(--text-3);border:1px solid var(--line-soft)}
.onboard-steps li.done{color:var(--text)}
.onboard-steps li.done span{background:rgba(37,192,125,.16);color:var(--green);border-color:rgba(37,192,125,.4)}

/* ---- plan cards (billing page) ---- */
.plan-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px}
.plan-card{position:relative;display:flex;flex-direction:column;gap:13px;padding:24px;
  background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);transition:.2s}
.plan-card:hover{transform:translateY(-3px);border-color:rgba(232,182,76,.34)}
.plan-card.featured{border-color:rgba(232,182,76,.45);
  background:linear-gradient(180deg,rgba(232,182,76,.08),var(--card))}
.plan-card.mine{border-color:rgba(37,192,125,.42)}
.plan-card h3{font-family:var(--font-head);font-size:1.2rem;font-weight:800}
.plan-tagline{margin-top:-8px}
.plan-tag{position:absolute;top:-11px;right:16px;padding:4px 12px;border-radius:999px;
  font-size:.68rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#1a1204}
.plan-tag.current{background:rgba(37,192,125,.9);color:#04180f}
.plan-cost{display:flex;align-items:baseline;gap:8px}
.plan-cost b{font-family:var(--font-head);font-size:2.1rem;font-weight:800;letter-spacing:-1px}
.plan-cost span{font-size:.82rem;color:var(--text-3)}
.plan-was{font-size:.78rem;color:var(--text-3);margin-top:-8px}
.plan-ceiling{font-size:.8rem;font-weight:700;letter-spacing:.4px;padding:7px 12px;border-radius:9px;
  background:rgba(232,182,76,.1);color:var(--gold);text-align:center}
.plan-card .btn{margin-top:auto}

/* ---- add-on cards ---- */
.addon-card{display:flex;flex-direction:column;gap:11px}
.addon-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.addon-price{font-family:var(--font-head);font-weight:800;font-size:1.25rem;color:var(--gold)}

/* ---- admin: package editor ---- */
.pkg-editor{margin-bottom:16px}
.pkg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  flex-wrap:wrap;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line-soft)}
.pkg-price-preview{font-family:var(--font-head);font-size:1.6rem;font-weight:800;color:var(--gold)}
.pkg-danger{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}

/* ---- admin: revenue bars ---- */
.revbars{display:flex;align-items:flex-end;gap:10px;height:170px;padding-top:22px;overflow-x:auto}
.revbar{flex:1;min-width:38px;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;height:100%;gap:6px}
.revbar i{display:block;width:100%;max-width:46px;border-radius:6px 6px 2px 2px;
  background:linear-gradient(180deg,var(--gold),rgba(232,182,76,.35));
  transform-origin:bottom;animation:revgrow .7s cubic-bezier(.2,.8,.3,1) both}
@keyframes revgrow{from{transform:scaleY(0)}}
.revbar:hover i{filter:brightness(1.2)}
.rb-val{font-family:var(--font-mono);font-size:.68rem;color:var(--text-3);white-space:nowrap}
.rb-lbl{font-size:.72rem;color:var(--text-3)}

@media (max-width:640px){
  .paid-hero{padding:28px 16px}
  .paid-hero h1{font-size:1.45rem}
  .revbars{height:140px}
  .rb-val{display:none}
}
@media (prefers-reduced-motion:reduce){
  .paid-tick,.revbar i{animation:none}
  .revbar i{transform:scaleY(1)}
  .plan-card:hover{transform:none}
}

/* ============================================================
   V7 — guest checkout, friendlier dashboard, mobile navigation
   ============================================================ */

/* ---- small-screen chrome. The horizontal-scroll nav that used to live here
        was replaced in V9 by a real hamburger panel; what remains applies to
        the two lightweight checkout headers (brand / .spacer / button). ---- */
@media(max-width:620px){
  .topbar{flex-wrap:wrap;row-gap:10px}
  .topbar .spacer{display:none}
  .userchip{font-size:.8rem}
  .wrap{width:94%;margin-top:18px}
  .pagehead h1{font-size:1.3rem}
}

/* ---- form validation message ---- */
.field-err{margin-top:6px;font-size:.82rem;color:#ffb4be;font-weight:600}

/* ---- card header row ---- */
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.card-head h2{margin:0}
.empty{text-align:center;padding:22px 10px}
.empty p{margin-bottom:14px}

/* ---- stat extras ---- */
.statnote{font-size:.76rem;color:var(--text-3);font-weight:600}
.statnote.pos{color:var(--green)}.statnote.neg{color:var(--red)}
.statlink{font-size:.78rem;color:var(--gold);font-weight:700}

/* ---- plan bar ---- */
.planbar{margin-bottom:16px}
.planbar-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.planbar-top h2{font-family:var(--font-head);font-size:1.25rem;margin:2px 0 4px}
.planbar-num{text-align:right}
.planbar-num .mono{font-size:1.3rem;font-weight:700}
.planbar-num .muted{font-size:.88rem}

/* ---- onboarding: "now" marks the step the client is actually on ---- */
.onboard-steps li.now span{background:rgba(232,182,76,.16);color:var(--gold);
  border-color:rgba(232,182,76,.45);box-shadow:0 0 0 4px rgba(232,182,76,.08)}
.onboard-steps li div{display:flex;flex-direction:column;line-height:1.35}
.onboard-steps li em{font-style:normal;font-size:.78rem;color:var(--text-3)}
.onboard-steps li strong{font-weight:600}
.onboard-steps li.done strong{color:var(--text)}

/* ---- account rows: a table on desktop, stacked cards on a phone ---- */
.acct-list{display:flex;flex-direction:column;gap:10px}
.acct{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:16px;
  padding:14px 16px;background:var(--bg-3);border:1px solid var(--line-soft);border-radius:12px;transition:.15s}
.acct:hover{border-color:rgba(232,182,76,.28)}
.acct-id{display:flex;align-items:center;gap:12px;min-width:0}
.acct-num{font-size:1rem;font-weight:700}
.acct-meta{display:flex;align-items:center;gap:8px;margin-top:3px;flex-wrap:wrap}
.acct-dot{width:9px;height:9px;border-radius:50%;flex:none}
.acct-dot.on{background:var(--green);box-shadow:0 0 0 3px rgba(37,192,125,.18)}
.acct-dot.off{background:#39435a}
.acct-fig{display:flex;flex-direction:column;align-items:flex-end;line-height:1.3}
.acct-fig .label{font-size:.68rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-3);font-weight:700}
.acct-fig b{font-size:1rem}
.acct-fig em{font-style:normal;font-size:.76rem;font-weight:700}
@media(max-width:760px){
  .acct{grid-template-columns:1fr auto;row-gap:12px}
  .acct-fig{align-items:flex-end}
  .acct-state{grid-column:1}
  .acct-act{grid-column:2;text-align:right}
}

/* ---- quick actions ---- */
.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qa{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:12px;
  background:var(--bg-3);border:1px solid var(--line-soft);transition:.15s}
.qa:hover{border-color:rgba(232,182,76,.35);transform:translateY(-2px)}
.qa div{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.qa strong{font-size:.9rem;font-weight:700}
.qa em{font-style:normal;font-size:.75rem;color:var(--text-3)}
.qa-ic{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:rgba(232,182,76,.12);color:var(--gold);font-size:1rem;font-weight:700}
@media(max-width:520px){.qa-grid{grid-template-columns:1fr}}

/* ---- checkout ---- */
.co-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:start}
@media(max-width:900px){
  .co-grid{grid-template-columns:1fr}
  /* the summary reads first on a phone; the reassurance panel follows */
  .co-side{order:2}
}
.co-main{padding:26px}
.co-asuser{display:flex;align-items:baseline;gap:10px;padding:12px 14px;margin-bottom:16px;
  background:var(--bg-3);border:1px solid var(--line-soft);border-radius:10px;flex-wrap:wrap}
.btn-lg{padding:15px 24px;font-size:1rem}
.co-trust{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:16px;
  font-size:.78rem;color:var(--text-3);font-weight:600}
.co-steps{list-style:none;display:flex;flex-direction:column;gap:14px;margin:4px 0 0}
.co-steps li{display:flex;gap:13px;align-items:flex-start}
.co-steps li span{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:.78rem;font-weight:800;background:rgba(232,182,76,.13);color:var(--gold);
  border:1px solid rgba(232,182,76,.3)}
.co-steps li div{display:flex;flex-direction:column;line-height:1.45}
.co-steps li strong{font-size:.92rem}
.co-steps li em{font-style:normal;font-size:.82rem;color:var(--text-2)}

/* ---- post-purchase claim prompt ---- */
.claim-panel{display:flex;gap:18px;align-items:flex-start;margin-bottom:16px;
  border-color:rgba(90,169,255,.35);
  background:linear-gradient(120deg,rgba(90,169,255,.10),var(--card))}
.claim-panel h2{font-family:var(--font-head);font-size:1.1rem;margin-bottom:6px}
.claim-icon{width:46px;height:46px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:rgba(90,169,255,.14);color:var(--blue);border:1px solid rgba(90,169,255,.32)}

/* ============================================================
   Payment mode switcher
   ============================================================ */
.modeflag{flex:none;font-size:.68rem;font-weight:800;letter-spacing:1.4px;
  padding:5px 11px;border-radius:999px;white-space:nowrap;transition:.15s}
.modeflag.test{background:rgba(232,182,76,.14);color:var(--gold);border:1px solid rgba(232,182,76,.34)}
.modeflag.live{background:rgba(37,192,125,.16);color:var(--green);border:1px solid rgba(37,192,125,.42)}
.modeflag:hover{filter:brightness(1.18)}

.modecard.is-test{border-color:rgba(232,182,76,.36);
  background:linear-gradient(120deg,rgba(232,182,76,.07),var(--card))}
.modecard.is-live{border-color:rgba(37,192,125,.4);
  background:linear-gradient(120deg,rgba(37,192,125,.09),var(--card))}
.modecard-top{display:flex;justify-content:space-between;align-items:flex-start;
  gap:18px;flex-wrap:wrap;margin-bottom:18px}
.modecard-top h2{font-family:var(--font-head);font-size:1.2rem;margin:2px 0 5px}
.modeswitch{display:flex;gap:6px;flex:none}
.modechip{padding:7px 15px;border-radius:9px;font-size:.72rem;font-weight:800;letter-spacing:1.2px;
  background:var(--bg-3);color:var(--text-3);border:1px solid var(--line-soft)}
.modechip.on{background:rgba(232,182,76,.16);color:var(--gold);border-color:rgba(232,182,76,.42)}
.modechip.on.live{background:rgba(37,192,125,.18);color:var(--green);border-color:rgba(37,192,125,.45)}

.modegrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.modegrid{grid-template-columns:1fr}}
.modecol{padding:18px;border-radius:12px;background:var(--bg-3);border:1px solid var(--line-soft)}
.modecol.active{border-color:rgba(232,182,76,.32);background:rgba(232,182,76,.05)}
.modecol h3{display:flex;align-items:center;gap:9px;font-size:.95rem;margin-bottom:12px}

/* readiness checklist — green tick, amber warning, red blocker */
.checklist{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:14px}
.checklist li{display:flex;gap:11px;align-items:flex-start}
.checklist li>span{width:20px;height:20px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:.7rem;font-weight:800;margin-top:1px}
.checklist li.yes>span{background:rgba(37,192,125,.16);color:var(--green)}
.checklist li.warn>span{background:rgba(232,182,76,.16);color:var(--gold)}
.checklist li.no>span{background:rgba(239,80,100,.16);color:var(--red)}
.checklist li div{display:flex;flex-direction:column;line-height:1.4;min-width:0}
.checklist li strong{font-size:.86rem;font-weight:700}
.checklist li em{font-style:normal;font-size:.78rem;color:var(--text-3)}
.checklist li.no em{color:#ffb4be}

/* ---- EA file slots ---- */
.eacard.empty{border-color:rgba(232,182,76,.28)}
.eacard.has{border-color:rgba(37,192,125,.28)}
.eacard .dl-top{align-items:center}
.eameta{margin-top:14px;font-size:.85rem}
.eameta th{text-transform:none;letter-spacing:0;font-size:.78rem;width:110px;color:var(--text-3)}
.eabak{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:12px;padding:10px 13px;border-radius:10px;
  background:rgba(90,169,255,.08);border:1px solid rgba(90,169,255,.22)}
.field input[type=file]{width:100%;padding:10px 12px;background:var(--bg-3);
  border:1px dashed var(--line-soft);border-radius:10px;color:var(--text-2);
  font-family:inherit;font-size:.86rem;cursor:pointer}
.field input[type=file]:hover{border-color:rgba(232,182,76,.45)}

/* ---- who the auth form belongs to ---- */
.whoami{text-align:center;font-family:var(--font-mono);font-size:.86rem;color:var(--gold);
  background:rgba(232,182,76,.09);border:1px solid rgba(232,182,76,.22);
  border-radius:9px;padding:9px 12px;margin-bottom:18px;word-break:break-all}

/* ============================================================
   V9 — shell, centred nav, mobile menu, admin dropdowns,
        referrals, support, dashboard, HCI polish
   ------------------------------------------------------------
   Everything below EXTENDS the rules above. No earlier selector was
   deleted; where a value is overridden it is because the newer one is
   better on every page that uses it.
   ============================================================ */

/* ------------------------------------------------------------
   1. SHELL — width, sticky footer, no horizontal page scroll
   ------------------------------------------------------------
   The topbar, the main column and the footer all resolve to the same
   inner width — min(--shell,100%) inside a --gutter of 2% — so the logo,
   the first card and the copyright line sit on one vertical edge at
   every viewport size.
   ------------------------------------------------------------ */
body{
  display:flex;flex-direction:column;min-height:100vh;
  /* clip, not hidden: overflow:hidden on the body kills position:sticky for
     the topbar. `clip` does not create a scroll container, so the header
     keeps sticking while a stray wide child can never make the PAGE scroll
     sideways. Wide content scrolls inside its own .table-wrap. */
  overflow-x:clip;
}
.wrap{flex:1 0 auto;min-width:0}
/* Matches the topbar/footer padding EXACTLY at every width. 96% disagreed
   with the --gutter clamp below ~700px (it floors at 14px), so on a 390px
   phone the first card's edge sat 6px outside the logo and the footer. */
.wrap-wide{width:min(var(--shell),calc(100% - 2 * var(--gutter)))}
.auth-shell{flex:1 0 auto}

/* Prose stays readable even though the page is now 1560px wide. */
.pagehead p,
.card>p,
.eastat-why,
.refcard-blurb{max-width:var(--prose)}
.card p{line-height:var(--lh-prose)}
.empty p{max-width:62ch;margin-inline:auto}
/* .hint is used both inside .field and as a standalone note. The only
   sizing rule used to be `.field .hint`, so a standalone one rendered at
   full body size in full-strength text — indistinguishable from real copy.
   The .card p line-height also outranked it, hence the explicit override. */
/* The sticky topbar covers whatever an in-page anchor scrolls to, so the
   skip link dropped keyboard users behind the header. */
html{scroll-behavior:smooth}
#main,[id]{scroll-margin-top:96px}
@media(max-width:900px){#main,[id]{scroll-margin-top:80px}}
.hint{font-size:var(--fs-xs);color:var(--text-3)}
.hint,.field .hint,.card p.hint{line-height:1.55}

/* Long unbroken strings (ticket subjects, emails, licence keys) wrap rather
   than push the layout wider than the viewport. */
.pagehead h1,.card h2,.card h3,.card-title,.eastat-head{overflow-wrap:anywhere}

/* ------------------------------------------------------------
   2. SKIP LINK
   ------------------------------------------------------------ */
.skip-link{position:fixed;top:10px;left:10px;z-index:200;
  padding:11px 18px;border-radius:10px;font-weight:800;font-size:.88rem;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#1a1204;
  transform:translateY(-160%);transition:transform .18s ease}
.skip-link:focus{transform:translateY(0)}

/* ------------------------------------------------------------
   3. TOPBAR — three columns: brand | nav | account
   ------------------------------------------------------------
   Both side tracks are minmax(0,1fr), so they are always the SAME width
   and the auto-sized middle track is genuinely centred on the bar — not
   "centred in whatever is left over after the logo".
   ------------------------------------------------------------ */
.topbar-in{
  flex:1 1 auto;width:min(var(--shell),100%);margin-inline:auto;min-width:0;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;column-gap:18px;row-gap:12px}
.topbar-in>.brand      {grid-column:1;grid-row:1;justify-self:start;min-width:0}
.topbar-in>.navpanel   {grid-column:2;grid-row:1;justify-self:center;min-width:0}
.topbar-in>.topbar-acct{grid-column:3;grid-row:1;justify-self:end}
.topbar-in>.nav-toggle {grid-column:3;grid-row:1;justify-self:end;display:none}

/* brand */
.brand-mark{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:rgba(232,182,76,.10);border:1px solid rgba(232,182,76,.24);transition:.18s}
.brand:hover .brand-mark{background:rgba(232,182,76,.18);border-color:rgba(232,182,76,.44)}
.brand-txt{display:block;min-width:0;font-size:1rem;line-height:1.15;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.brand-txt small{display:block;font-size:.6rem;font-weight:700;letter-spacing:2px;
  color:var(--gold);text-transform:uppercase;margin-top:2px}
.brand-admin .brand-mark{background:rgba(90,169,255,.10);border-color:rgba(90,169,255,.26)}
.brand-admin:hover .brand-mark{background:rgba(90,169,255,.18);border-color:rgba(90,169,255,.44)}
.brand-admin .brand-txt small{color:var(--blue)}
.topbar-admin{border-bottom-color:rgba(90,169,255,.24)}

/* account cluster on the right */
.topbar-acct{display:flex;align-items:center;gap:10px;min-width:0}
.acct-full{display:flex;align-items:center;gap:10px;min-width:0}
/* display:block, not the inherited flex: text-overflow only applies to a
   block container, so on flex the ellipsis was silently dropped and long
   emails were hard-clipped mid-glyph with no sign they were truncated. */
.userchip{display:block;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ------------------------------------------------------------
   4. NAV LINKS
   ------------------------------------------------------------ */
.navpanel{display:flex;align-items:center;gap:14px;min-width:0}
.nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center;margin-left:0}
.navlink,.nav a{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 13px;border-radius:10px;font-weight:600;font-size:.885rem;
  color:var(--text-2);white-space:nowrap;border:1px solid transparent;
  transition:background .15s ease,color .15s ease,border-color .15s ease}
.navlink:hover,.nav a:hover{background:var(--bg-3);color:var(--text)}
.navlink.active,.nav a.active{background:rgba(232,182,76,.13);color:var(--gold);
  border-color:rgba(232,182,76,.26)}
.topbar-admin .navlink.active{background:rgba(90,169,255,.14);color:var(--blue);
  border-color:rgba(90,169,255,.28)}
/* The account block duplicated inside the panel is for the mobile layout only. */
.navpanel-acct{display:none}

/* ------------------------------------------------------------
   5. ADMIN DROPDOWNS — <details class="navgrp">
   ------------------------------------------------------------ */
.navgrp{position:relative}
.navgrp>summary{list-style:none;cursor:pointer}
.navgrp>summary::-webkit-details-marker{display:none}
.navgrp>summary::marker{content:""}
.navgrp-btn{user-select:none}
.chev{display:inline-flex;align-items:center;opacity:.72;transition:transform .18s ease,opacity .18s ease}
.navgrp[open]>summary .chev{transform:rotate(180deg);opacity:1}
.navgrp[open]>summary{background:var(--bg-3);color:var(--text)}
.navgrp[open]>summary.active{background:rgba(90,169,255,.17);color:var(--blue)}

.navgrp-menu{
  position:absolute;top:calc(100% + 11px);left:50%;transform:translateX(-50%);
  z-index:60;min-width:198px;display:flex;flex-direction:column;gap:2px;padding:7px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:13px;
  box-shadow:0 22px 48px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03)}
/* Invisible bridge across the 11px gap, so the pointer can travel from the
   summary into the menu without the hover-close handler firing. */
.navgrp-menu::before{content:"";position:absolute;left:0;right:0;top:-13px;height:13px}
.navgrp-menu .navsub{display:flex;width:100%;padding:10px 12px;font-size:.87rem;
  border-radius:9px;color:var(--text-2)}
.navgrp-menu .navsub:hover{background:var(--bg-3);color:var(--text)}
.navgrp-menu .navsub.active{background:rgba(90,169,255,.15);color:var(--blue);
  border-color:rgba(90,169,255,.3)}
.navgrp[open] .navgrp-menu{animation:navpop .16s cubic-bezier(.2,.8,.3,1)}
@keyframes navpop{from{opacity:0;transform:translate(-50%,-7px)}}

/* ------------------------------------------------------------
   6. HAMBURGER
   ------------------------------------------------------------ */
.nav-toggle{
  align-items:center;gap:10px;min-height:44px;min-width:44px;padding:9px 14px;
  border-radius:11px;background:var(--bg-3);border:1px solid var(--line-soft);
  color:var(--text);font-family:inherit;font-size:.85rem;font-weight:700;cursor:pointer;
  transition:border-color .15s ease,background .15s ease}
.nav-toggle:hover{border-color:rgba(232,182,76,.4);background:#141c2e}
.nav-toggle-bars{display:grid;gap:4px;width:18px;flex:none}
.nav-toggle-bars i{display:block;height:2px;border-radius:2px;background:var(--gold);
  transition:transform .22s ease,opacity .18s ease}
.topbar[data-nav="open"] .nav-toggle-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.topbar[data-nav="open"] .nav-toggle-bars i:nth-child(2){opacity:0;transform:scaleX(.35)}
.topbar[data-nav="open"] .nav-toggle-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ------------------------------------------------------------
   7. NAV BREAKPOINTS
   ------------------------------------------------------------
   The header script switches to panel mode at exactly 900px, so the bar
   has to survive 901px on its own. Between ~1250px and 901px the chrome
   sheds weight in this order: brand subtitle, brand wordmark, the name
   chip — the navigation itself is the last thing to give up space.
   ------------------------------------------------------------ */
@media (max-width:1250px){
  .topbar-in{column-gap:12px}
  .navlink,.nav a{padding:8px 11px;font-size:.85rem}
  .navgrp-menu .navsub{padding:10px 12px;font-size:.86rem}
  .brand-txt small{display:none}
  .userchip{max-width:130px;font-size:.8rem}
}
@media (max-width:1080px){
  .navlink,.nav a{padding:7px 9px;font-size:.82rem}
  .brand-txt{display:none}
  .acct-full .userchip{display:none}
}

/* ---- panel mode ---- */
@media (max-width:900px){
  .topbar{padding-block:11px}
  .topbar-in{grid-template-columns:minmax(0,1fr) auto auto;column-gap:10px}
  .topbar-in>.brand{grid-column:1;grid-row:1}
  .topbar-in>.topbar-acct{grid-column:2;grid-row:1}
  .topbar-in>.nav-toggle{grid-column:3;grid-row:1;display:inline-flex}
  .topbar-in>.navpanel{grid-column:1 / -1;grid-row:2;justify-self:stretch;width:100%}

  /* the wordmark comes back — there is room for it once the nav has moved */
  .brand-txt{display:block}
  .brand-txt small{display:block}
  /* the desktop account cluster hides, but the admin LIVE/TEST flag must not:
     not knowing whether real cards are being charged is how an incident starts */
  .topbar-acct .acct-full{display:none}
  .topbar-acct:not(:has(.modeflag)){display:none}

  .navpanel{display:flex;flex-direction:column;align-items:stretch;gap:6px;
    padding-top:6px;border-top:1px solid var(--line-soft);
    max-height:min(72vh,560px);overflow-y:auto;overscroll-behavior:contain;
    transition:max-height .28s cubic-bezier(.3,.8,.35,1),opacity .22s ease .03s,
               padding-top .28s ease,visibility 0s linear 0s}
  .nav{flex-direction:column;align-items:stretch;gap:2px;width:100%}
  .navlink,.nav a{width:100%;min-height:46px;padding:12px 14px;font-size:.94rem;border-radius:11px}
  .navpanel-acct{display:flex;align-items:center;justify-content:space-between;gap:12px;
    flex-wrap:wrap;margin-top:8px;padding-top:12px;border-top:1px solid var(--line-soft)}
  .navpanel-acct .userchip{max-width:none;font-size:.88rem}
  .navpanel-acct .btn{min-height:44px}

  /* closed state — animated, and inert to the keyboard while shut */
  .topbar[data-nav="closed"] .navpanel{
    max-height:0;opacity:0;padding-top:0;border-top-color:transparent;
    visibility:hidden;pointer-events:none;overflow:hidden;
    transition:max-height .24s cubic-bezier(.3,.8,.35,1),opacity .16s ease,
               padding-top .24s ease,visibility 0s linear .24s}

  /* dropdowns become inline accordions */
  .navgrp{width:100%}
  .navgrp>summary{justify-content:space-between}
  .navgrp[open]>summary{border-radius:11px 11px 0 0}
  .navgrp-menu{position:static;transform:none;min-width:0;width:100%;
    background:transparent;border:0;border-left:2px solid var(--line);border-radius:0;
    box-shadow:none;padding:4px 0 8px 10px;margin:2px 0 4px 16px;animation:none}
  .navgrp-menu::before{display:none}
  .navgrp-menu .navsub{min-height:44px;align-items:center;font-size:.9rem}
}

/* ------------------------------------------------------------
   8. FOOTER
   ------------------------------------------------------------ */
.sitefoot{flex:none;margin-top:auto;padding:20px var(--gutter);
  border-top:1px solid var(--line-soft);background:rgba(9,13,24,.7)}
.sitefoot-admin{border-top-color:rgba(90,169,255,.18)}
.foot-in{width:min(var(--shell),100%);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap}
.foot-copy{font-size:.82rem;color:var(--text-3)}
.foot-links{display:flex;gap:2px;flex-wrap:wrap}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;padding:10px 12px;
  border-radius:9px;font-size:.84rem;font-weight:600;color:var(--text-2);transition:.15s}
.foot-links a:hover{background:var(--bg-3);color:var(--gold)}
.sitefoot-admin .foot-links a:hover{color:var(--blue)}
@media (max-width:620px){
  .foot-in{flex-direction:column;align-items:flex-start;gap:4px}
}

/* ------------------------------------------------------------
   9. FOCUS + HOVER AFFORDANCES
   ------------------------------------------------------------
   Every interactive element gets the same visible keyboard ring. The
   .field rules above set `outline:none` on :focus, which also removed it
   for keyboard users — these restore it for :focus-visible only, at equal
   specificity so they win by source order.
   ------------------------------------------------------------ */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
/* No border-radius here: this selector outranks .btn/.navlink/.field input,
   so setting one made every control visibly change shape on focus. An
   outline follows the element's own radius already. */
[tabindex]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,
.pagehead select:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.navgrp>summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.switch input:focus-visible+.slider{outline:2px solid var(--focus);outline-offset:3px}
.skip-link:focus-visible{outline:2px solid #fff;outline-offset:3px}

.btn{min-height:40px}
.btn-sm{min-height:34px}
.btn-ghost:hover{border-color:rgba(232,182,76,.42)}
.btn:not(:disabled):active{transform:translateY(1px)}
.btn:disabled{filter:grayscale(.3)}
a:not(.btn):not(.navlink):not(.qa):not(.brand){transition:color .15s ease}
tbody tr:hover .btn-ghost{border-color:rgba(232,182,76,.3)}

/* Bigger touch targets where fingers are the input device. */
@media (max-width:620px){
  .btn{min-height:44px;padding:12px 18px}
  /* .btn-sm carries the primary action on a phone (Open ticket, Pause EA,
     Analysis, filter pills), so it gets the full 44px like any other. */
  .btn-sm{min-height:44px;padding:11px 16px}
  .chk{padding:11px 0}
  .chk input{width:19px;height:19px}
}

/* ------------------------------------------------------------
   10. GRID LADDER
   ------------------------------------------------------------
   The V4 block collapsed cols-2/3/4 to a single column at 900px, which
   wastes half a tablet. This is the replacement ladder: four-up thins to
   two-up early, three-up holds two-up through the tablet range, and
   everything stacks on a phone.
   ------------------------------------------------------------ */
@media (max-width:1180px){.grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.cols-2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:680px){
  .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:minmax(0,1fr)}
}
/* Grid children must be allowed to shrink or a wide table inside one of them
   pushes the whole row past the viewport. */
.grid>*{min-width:0}

/* ------------------------------------------------------------
   11. SPACING + TYPE RHYTHM
   ------------------------------------------------------------ */
.pagehead{margin-bottom:var(--sp-5);padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--line-soft)}
.pagehead h1{font-size:var(--fs-xl);line-height:1.22;letter-spacing:-.4px}
.pagehead p{line-height:1.6;margin-top:6px}
.pagehead-acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:none}
.dash-sec{margin-bottom:var(--sp-7)}
.dash-sec:last-of-type{margin-bottom:var(--sp-4)}
.dash-sec>.section-h:first-child{margin-top:0}
.card h2{font-size:var(--fs-md);line-height:1.35}
.card-title{font-family:var(--font-head);font-size:var(--fs-md);font-weight:700;line-height:1.35}
.card-head{flex-wrap:wrap}
.card-head h2,.card-head h3,.card-head .card-title{margin:0}
.card-head .muted{font-weight:500}
.divider{margin:var(--sp-5) 0}
.section-h{margin:var(--sp-6) 0 var(--sp-3)}
.stat .label{color:var(--text-3)}
.field label{font-size:.82rem;color:var(--text-2)}
.field-last{margin-bottom:var(--sp-3)}

/* .row-inline stretches every child to at least 150px, which turns a strip of
   filter buttons into a row of slabs. Buttons, badges and inline forms opt out;
   .field children (its original purpose) are untouched. */
.row-inline>.btn,.row-inline>form,.row-inline>.badge,
.row-inline>span,.row-inline>a.btn{flex:0 0 auto;min-width:0}

/* ------------------------------------------------------------
   12. TABLES — always scroll inside their own box
   ------------------------------------------------------------ */
.table-wrap{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:rgba(232,182,76,.38) transparent;
  border-radius:10px}
.table-wrap::-webkit-scrollbar{height:9px}
.table-wrap::-webkit-scrollbar-track{background:transparent}
.table-wrap::-webkit-scrollbar-thumb{background:rgba(232,182,76,.3);border-radius:999px}
.table-wrap::-webkit-scrollbar-thumb:hover{background:rgba(232,182,76,.5)}
table.tbl th{color:var(--text-3)}
table.tbl tbody tr{transition:background .12s ease}
table.tbl tbody tr:hover{background:rgba(232,182,76,.045)}
/* Second lines under a cell (emails, message counts, void reasons) are prose,
   not data — they wrap instead of stretching the column. */
table.tbl td .muted.small,table.tbl td .small.muted{white-space:normal;line-height:1.45}
/* Plain links inside a table read as links; .btn keeps its own colours. */
table.tbl td>a:not(.btn):hover{color:var(--gold-2);text-decoration:underline}

/* ------------------------------------------------------------
   13. READONLY "COPY ME" INPUTS (referral link/code, licence keys)
   ------------------------------------------------------------ */
.field input[readonly]{background:rgba(232,182,76,.05);border-color:rgba(232,182,76,.22);
  color:var(--gold-2);cursor:text}
.field input[readonly]:hover{border-color:rgba(232,182,76,.42);background:rgba(232,182,76,.08)}
.field input[readonly]:focus{background:rgba(232,182,76,.08)}

/* ------------------------------------------------------------
   14. DASHBOARD — banners
   ------------------------------------------------------------ */
.trialbar,.noticebar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 18px;line-height:1.6}
.trialbar-icon,.noticebar-icon{flex:none;font-size:1.3rem;line-height:1}
.trialbar-fig{display:flex;flex-direction:column;flex:none;line-height:1.1;
  padding-right:16px;border-right:1px solid rgba(255,255,255,.14)}
.trialbar-fig b{font-size:1.5rem;font-weight:800;letter-spacing:-.5px}
.trialbar-fig em{font-style:normal;font-size:.63rem;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;opacity:.72;margin-top:3px}
.trialbar-txt,.noticebar-txt{flex:1 1 320px;min-width:0;font-size:.9rem}
.trialbar .btn,.noticebar .btn{flex:none}
/* The default (plenty of time left) state was emitted but undefined. */
.trialbar-calm{box-shadow:0 0 0 1px rgba(90,169,255,.14) inset}
.trialbar-urgent{box-shadow:0 0 0 1px rgba(232,182,76,.16) inset}
.trialbar-ended{box-shadow:0 0 0 1px rgba(239,80,100,.18) inset}
@media (max-width:620px){
  .trialbar-fig{border-right:0;padding-right:0}
  .trialbar .btn,.noticebar .btn{width:100%}
}

/* ------------------------------------------------------------
   15. DASHBOARD — live status card
   ------------------------------------------------------------ */
.eastat{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(250px,1fr);
  gap:24px;align-items:start;padding:24px}
.eastat-ok  {border-color:rgba(37,192,125,.30);
  background:radial-gradient(720px 280px at 6% -70%,rgba(37,192,125,.12),transparent),var(--card)}
.eastat-warn{border-color:rgba(232,182,76,.32);
  background:radial-gradient(720px 280px at 6% -70%,rgba(232,182,76,.12),transparent),var(--card)}
.eastat-stop{border-color:rgba(239,80,100,.34);
  background:radial-gradient(720px 280px at 6% -70%,rgba(239,80,100,.12),transparent),var(--card)}
.eastat-main{min-width:0}
.eastat-flag{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.eastat-dot{width:11px;height:11px;border-radius:50%;flex:none;position:relative}
.eastat-dot-ok  {background:var(--green);box-shadow:0 0 0 4px rgba(37,192,125,.16)}
.eastat-dot-warn{background:var(--gold); box-shadow:0 0 0 4px rgba(232,182,76,.16)}
.eastat-dot-stop{background:var(--red);  box-shadow:0 0 0 4px rgba(239,80,100,.16)}
.eastat-dot-ok::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--green);animation:sbpulse 2.4s ease-out infinite}
.eastat-word{font-size:.69rem;font-weight:800;letter-spacing:2.2px;text-transform:uppercase}
.eastat-ok   .eastat-word{color:var(--green)}
.eastat-warn .eastat-word{color:var(--gold)}
.eastat-stop .eastat-word{color:var(--red)}
.eastat-head{font-family:var(--font-head);font-size:var(--fs-lg);font-weight:800;
  line-height:1.3;margin-bottom:8px}
.eastat-why{color:var(--text-2);font-size:.92rem;line-height:var(--lh-prose);margin-bottom:18px}
.eastat-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);border-radius:12px;overflow:hidden}
.eastat-fact{display:flex;flex-direction:column;gap:5px;padding:14px 16px;background:var(--bg-3)}
.eastat-fact dt{font-size:.66rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--text-3)}
.eastat-fact dd{font-size:1.02rem;font-weight:700;line-height:1.25}
.eastat-fact dd .muted{font-size:.8rem;font-weight:500}
@media (max-width:860px){
  .eastat{grid-template-columns:minmax(0,1fr);gap:20px;padding:20px}
}
@media (max-width:420px){
  .eastat-facts{grid-template-columns:minmax(0,1fr)}
}

/* ------------------------------------------------------------
   16. DASHBOARD — onboarding, plan bar, metrics
   ------------------------------------------------------------ */
.onboard{padding:24px}
.onboard-title{font-family:var(--font-head);font-size:var(--fs-lg);font-weight:800;
  line-height:1.28;margin:2px 0 8px}
.onboard-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.onboard-steps{background:var(--bg-3);border:1px solid var(--line-soft);
  border-radius:13px;padding:16px 18px}

.planbar{padding:22px}
.planbar-id{flex:1 1 280px;min-width:0}
.planbar-name{font-family:var(--font-head);font-size:var(--fs-lg);font-weight:800;margin:2px 0 6px}
.planbar-num{flex:none}
.planbar-num .label{display:block;font-size:.66rem;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--text-3);margin-bottom:5px}
.planbar-val{font-size:1.35rem;font-weight:700;line-height:1.2}
.planbar-cta{margin-top:16px}
.planbar-trial{border-color:rgba(90,169,255,.30);
  background:linear-gradient(160deg,rgba(90,169,255,.09),var(--card))}
@media (max-width:620px){.planbar-num{text-align:left}}

.metrics{gap:14px}
.metric{gap:7px;padding:18px 20px;transition:border-color .18s ease,transform .18s ease}
.metric:hover{border-color:rgba(232,182,76,.24)}
.metric .value{line-height:1.15;letter-spacing:-.6px}
.metric-lead{border-color:rgba(232,182,76,.28);
  background:linear-gradient(155deg,rgba(232,182,76,.10),var(--card))}
.metric-lead .value{font-size:2rem}
.metric-of{font-size:.92rem;font-weight:600;margin-left:8px;letter-spacing:0}
.statnote{line-height:1.45}
.statlink{display:inline-block;transition:color .15s ease}
.statlink:hover{color:var(--gold-2);text-decoration:underline}
@media (max-width:620px){.metric-lead .value{font-size:1.75rem}}

/* ------------------------------------------------------------
   17. DASHBOARD — account rows, quick actions, teasers
   ------------------------------------------------------------ */
.acct-idtext{min-width:0}
.acct-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.acct-seen{white-space:nowrap}
.acct-foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}
.acct-on{border-color:rgba(37,192,125,.22)}
/* The offline counterpart was emitted by user/dashboard.php but never
   defined, so a disconnected account looked identical to a healthy one. */
.acct-off{border-color:rgba(255,255,255,.10);background:rgba(255,255,255,.015)}
.acct-off .acct-num{color:var(--text-2)}

/* .acctrow — the wider licence row on user/accounts.php.
   It carries a licence-key field and a full-width meta footer, so it is a
   flex/wrap component, not the 4-column grid .acct uses on the dashboard.
   This used to live in an inline style attribute, where the media queries
   below could never reach it. */
.acctrow{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;padding:16px 18px}
.acctrow>.acct-id{flex:1 1 190px}
.acctrow .acct-key{flex:1 1 250px;min-width:0;margin-bottom:0}
.acctrow .acct-state{flex:0 0 auto;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.acctrow .acct-act{flex:0 0 auto;display:flex;gap:8px;margin-left:auto}
.acctrow .acct-meta-row{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:5px 22px;
  padding-top:12px;border-top:1px solid var(--line-soft);font-size:var(--fs-xs);color:var(--text-3)}
@media(max-width:560px){
  .acctrow .acct-act{margin-left:0;width:100%}
  .acctrow .acct-act form,.acctrow .acct-act .btn{flex:1 1 auto}
}
@media (max-width:560px){
  .acct{grid-template-columns:minmax(0,1fr)}
  .acct-fig{align-items:flex-start}
  .acct-state,.acct-act{grid-column:1;text-align:left}
  .acct-meta{gap:6px}
}

.qa{min-height:60px}
.qa:focus-visible{border-color:rgba(232,182,76,.5)}
.card>.qa-ic{width:38px;height:38px;border-radius:11px;font-size:1.05rem;
  border:1px solid rgba(232,182,76,.24)}

.dash-stack{align-content:start}
.refcard{display:flex;flex-direction:column}
.refcard-blurb{margin-bottom:2px}
.refstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  gap:10px;margin:14px 0 16px}
.refstat{display:flex;flex-direction:column;gap:4px;padding:12px 14px;
  background:var(--bg-3);border:1px solid var(--line-soft);border-radius:11px}
.refstat dt{font-size:.66rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--text-3);line-height:1.35}
.refstat dd{font-size:1.15rem;font-weight:700;color:var(--gold-2)}

.helpcard{display:flex;flex-direction:column}
.helpcard-alert{display:flex;align-items:flex-start;gap:9px;margin:14px 0;
  padding:11px 14px;border-radius:11px;font-size:.87rem;line-height:1.55;
  background:rgba(232,182,76,.11);border:1px solid rgba(232,182,76,.28);color:var(--gold-2)}
.helpcard-alert-calm{background:rgba(90,169,255,.10);border-color:rgba(90,169,255,.26);color:#bcd9ff}
.helplinks{list-style:none;display:flex;flex-direction:column;gap:2px;margin:14px 0 16px}
.helplinks a{display:flex;align-items:center;min-height:44px;padding:10px 12px;
  border-radius:10px;font-size:.87rem;color:var(--text-2);
  border:1px solid transparent;transition:.15s}
.helplinks a:hover{background:var(--bg-3);color:var(--gold);border-color:var(--line-soft)}
.helpcard .btn,.refcard .btn{align-self:flex-start;margin-top:auto}

/* ------------------------------------------------------------
   18. REFERRALS — link hero, copy control, commission tables
   ------------------------------------------------------------
   The referral pages compose from .card / .row-inline / .field / .tbl, so
   this section tunes those in the referral context rather than inventing a
   parallel component. The link box itself is .field input[readonly] above.
   ------------------------------------------------------------ */
.card>.row-inline{align-items:flex-end;gap:14px}
.card>.row-inline>.field{margin-bottom:0}
/* the copy button sits on the input's baseline, not the label's */
.card>.row-inline .btn{min-height:44px}

/* Commission and payout figures read as money: monospace, tabular, aligned. */
.mono{font-variant-numeric:tabular-nums}
.stat .value.mono,.tbl td.mono{font-variant-numeric:tabular-nums}

/* Status badges. The four commission states and the three ticket states both
   map onto these; the colour carries the meaning, the weight carries urgency. */
.badge{white-space:nowrap;border:1px solid transparent}
.badge.gold {border-color:rgba(232,182,76,.28)}
.badge.green{border-color:rgba(37,192,125,.28)}
.badge.red  {border-color:rgba(239,80,100,.30)}
.badge.blue {border-color:rgba(90,169,255,.28)}
.badge.grey {border-color:rgba(255,255,255,.12)}

/* "How it works" numbered steps get a little more air on a wide card. */
.card>.co-steps{gap:16px}

/* ------------------------------------------------------------
   19. SUPPORT — ticket queue, thread, new-ticket form
   ------------------------------------------------------------ */
/* New-ticket / reply composer. A 6-row textarea that is 3 lines tall on a
   phone is the fastest way to make someone write less than they should. */
.field textarea[rows="6"],.field textarea[rows="7"]{min-height:158px}
/* --text-3 (5.96:1 on --bg-3), not --text-4 (3.71:1). A placeholder is
   read text, not a decorative mark, so it has to clear AA like any label. */
.field textarea::placeholder,.field input::placeholder{color:var(--text-3);opacity:1}

/* Thread bubbles. user/support.php and admin/support.php currently carry
   equivalents inline; these are the shared component the markup collapses to
   the moment either page is edited again. Client and support are told apart by
   three signals at once — alignment rail, tint, and the author colour — so the
   distinction survives both colour-blindness and a greyscale screenshot. */
.tk-thread{display:flex;flex-direction:column;gap:14px}
.tk-msg{min-width:0}
.tk-who{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-bottom:6px;font-size:.86rem;font-weight:700}
.tk-bubble{border-radius:12px;padding:14px 16px;line-height:1.62;font-size:.93rem;
  word-break:break-word;background:rgba(255,255,255,.035);
  border:1px solid var(--line-soft);border-left:3px solid rgba(255,255,255,.22)}
.tk-msg-staff .tk-bubble{background:rgba(232,182,76,.07);border-color:var(--line);
  border-left-color:var(--gold)}
.tk-msg-staff .tk-who{color:var(--gold)}
.topbar-admin ~ .wrap .tk-msg-staff .tk-bubble{background:rgba(90,169,255,.08);
  border-color:rgba(90,169,255,.25);border-left-color:var(--blue)}
.topbar-admin ~ .wrap .tk-msg-staff .tk-who{color:var(--blue)}

/* Queue rows: the subject is the target, so it gets the affordance. */
.tbl td a[href*="support.php?id="]{font-weight:600}

/* ------------------------------------------------------------
   20. BILLING — reassurance strip
   ------------------------------------------------------------
   Three .card panels, each `display:flex` with a .qa-ic glyph and a text
   block. The glyph rule is in section 17; this gives the strip its own
   rhythm and keeps the copy from running the width of a 1560px page.
   ------------------------------------------------------------ */
.card>.qa-ic+div{min-width:0}
.card>.qa-ic+div strong{font-family:var(--font-head);font-size:.96rem;line-height:1.35}
.card>.qa-ic+div p{max-width:46ch}
.plan-cards{gap:var(--sp-4)}
.addon-card{height:100%}

/* Checkout stays a readable two-column form even though .wrap is wider now. */
.co-grid{max-width:1180px;margin-inline:auto}

/* ------------------------------------------------------------
   21. AUTH PAGES — login / register / forgot-password / set-password
   ------------------------------------------------------------
   One centred column: brand lockup, card, trust row, footer link.
   The card is a <form> on the four form states and a <div> on the two
   terminal states (forgot "sent", set-password "expired"); .is-terminal
   is the only difference between them.
   NOTE: never set box-shadow on .auth-card .field input — that property
   is owned by the autofill rules in the forms block near the top.
   ------------------------------------------------------------ */
.auth-shell{
  /* z-index:1 — the shell must sit ABOVE the fixed .auth-bg canvas (z-index:0).
     Its background is deliberately gradients-only: the opaque var(--bg) that
     used to close this stack lives on <body> now, otherwise it would paint
     straight over the animation. */
  position:relative;z-index:1;overflow:hidden;
  min-height:100vh;min-height:100svh;
  display:grid;place-items:center;
  padding:var(--sp-7) var(--sp-4);
  background:
    radial-gradient(900px 520px at 50% -8%,rgba(232,182,76,.13),transparent 70%),
    radial-gradient(700px 460px at 8% 104%,rgba(37,192,125,.07),transparent 70%),
    radial-gradient(760px 500px at 96% 8%,rgba(90,169,255,.06),transparent 70%),
    linear-gradient(180deg,rgba(7,11,20,.55),rgba(7,11,20,.72));
}
.auth-shell::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(680px 520px at 50% 34%,#000,transparent 76%);
          mask-image:radial-gradient(680px 520px at 50% 34%,#000,transparent 76%);
}
.auth-col{position:relative;z-index:1;width:min(448px,100%)}

/* ---- animated candlestick backdrop (assets/js/auth-bg.js) ----
   Fixed, behind everything, never interactive. It is decoration: if the JS
   never runs the canvas simply stays transparent and the gradients below
   carry the page on their own. */
.auth-bg{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;display:block;
  opacity:.85}

/* ---- brand lockup, INSIDE the card, top centre, stacked ----
   .auth-wordmark, NOT .brand-txt: .brand-txt is display:none between 901px
   and 1080px (see the topbar breakpoints) and its <small> between 901px and
   1250px, so a .brand-txt wordmark would silently vanish on a 1024px laptop. */
.auth-brand{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-3);margin:0 auto var(--sp-5);
  text-align:center;text-decoration:none;color:inherit}
.auth-brand .brand-mark{
  display:grid;place-items:center;
  width:64px;height:64px;min-width:64px;min-height:64px;border-radius:20px;
  background:linear-gradient(135deg,#141c30,#0d1322);
  border:1px solid rgba(232,182,76,.35);
  box-shadow:0 10px 30px rgba(232,182,76,.16),inset 0 0 16px rgba(232,182,76,.08);
  transition:border-color .18s ease,background .18s ease,transform .18s ease}
.auth-brand:hover .brand-mark{
  background:linear-gradient(135deg,#182137,#0f1526);
  border-color:rgba(232,182,76,.55);
  transform:translateY(-2px)}
.auth-brand:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:16px}
.auth-wordmark{display:block;font-family:var(--font-head);font-weight:800;
  font-size:1.24rem;line-height:1.15;letter-spacing:.2px;color:var(--text)}
.auth-wordmark small{
  display:block;margin-top:5px;font-family:var(--font-body);
  font-size:var(--fs-xs);font-weight:600;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--text-3,var(--text-2))}

/* ---- card ---- */
.auth-card{
  position:relative;width:100%;
  /* Near-opaque on purpose. The candlestick canvas runs behind this card, and
     a form you have to read through moving graphics is a bad form. The blur is
     a bonus for browsers that have it, never load-bearing. */
  background:linear-gradient(180deg,rgba(19,27,46,.955),rgba(11,17,31,.975));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:18px;
  padding:var(--sp-6);
  box-shadow:0 26px 70px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.02)}
.auth-card::before{
  content:"";position:absolute;left:22px;right:22px;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,182,76,.55),transparent)}

.auth-eyebrow{display:block;font-size:var(--fs-xs);font-weight:700;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--gold);margin-bottom:var(--sp-2)}
.auth-card h1{font-family:var(--font-head);font-size:var(--fs-xl);font-weight:800;
  line-height:1.22;letter-spacing:-.4px;text-align:left;margin-bottom:var(--sp-2)}
.auth-card .sub{text-align:left;color:var(--text-2);font-size:var(--fs-base);
  line-height:1.6;margin-bottom:var(--sp-5);
  /* An email address has no break opportunity at "." or "@", so on the
     "check your inbox" card it sized the grid track and pushed the card off
     a 360px screen — silently, because the shell clips instead of scrolling.
     .whoami already does this; the terminal card had been missed. */
  overflow-wrap:anywhere;word-break:break-word}

/* ---- terminal states: no fields to align to, so centre ---- */
.auth-card.is-terminal{text-align:center}
.auth-card.is-terminal h1,.auth-card.is-terminal .sub{text-align:center}
.auth-card.is-terminal .sub{max-width:38ch;margin-inline:auto}
.auth-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  margin:0 auto var(--sp-4)}
.auth-icon.ok{background:rgba(37,192,125,.12);border:1px solid rgba(37,192,125,.32);color:var(--green)}
.auth-icon.warn{background:rgba(232,182,76,.12);border:1px solid rgba(232,182,76,.32);color:var(--gold)}
.auth-note{text-align:left;font-size:var(--fs-sm);line-height:1.6}

/* ---- errors ---- */
.auth-errs{margin-bottom:var(--sp-3)}
.auth-errs .alert{margin-bottom:var(--sp-3)}
.auth-errs .alert:last-child{margin-bottom:0}

/* ---- fields + button ---- */
.auth-card .field{margin-bottom:var(--sp-4)}
.auth-card .field label{font-size:.82rem;font-weight:600;color:var(--text-2);margin-bottom:7px}
.auth-card .field input{padding:13px 14px;font-size:1rem;border-radius:11px;min-height:48px}
.auth-card .field input:hover:not(:focus){border-color:rgba(255,255,255,.16)}
.auth-card .field .hint{margin-top:6px}
.up{text-transform:uppercase}
.auth-card .btn{width:100%;min-height:50px;font-size:.95rem;margin-top:var(--sp-2)}

/* ---- secondary links ---- */
.auth-sep{height:1px;background:var(--line-soft);margin:var(--sp-5) 0 var(--sp-3)}
.auth-alt{text-align:center;margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--text-2)}
.auth-alt a{color:var(--gold);font-weight:600;transition:color .15s ease}
.auth-alt a:hover{color:var(--gold-2);text-decoration:underline}
.auth-alt.quiet a{color:var(--text-3);font-weight:500}
.auth-alt.quiet a:hover{color:var(--text-2);text-decoration:underline}

/* ---- trust row + footer, outside the card ---- */
.auth-trust{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--sp-2) var(--sp-4);margin-top:var(--sp-5);
  font-size:var(--fs-xs);font-weight:500;color:var(--text-3)}
.auth-trust li{display:inline-flex;align-items:center;gap:6px}
.auth-trust svg{flex:none;color:var(--green)}
.auth-foot{margin-top:var(--sp-4);text-align:center;font-size:var(--fs-xs);color:var(--text-4)}
.auth-foot a{color:var(--text-3);font-weight:600}
.auth-foot a:hover{color:var(--gold)}

/* 44px hit areas for the standalone links ("Forgot your password?",
   "Back to log in", "Email support", "Back to the main site"). Each sits
   alone in its own div, so the WCAG "inline in a sentence" exemption does
   not apply. The negative margin cancels the padding so spacing is
   unchanged — only the tappable box grows. */
.auth-alt a,.auth-foot a{display:inline-block;padding:14px 12px;margin:-14px -12px}
@media (hover:none){.auth-alt a,.auth-foot a{padding:15px 14px;margin:-15px -14px}}

/* ---- responsive: 620 / 480 / 400, matching the existing ladder ---- */
@media (max-width:620px){
  .auth-shell{padding:var(--sp-5) var(--sp-4)}
  .auth-shell::before{background-size:44px 44px}
  .auth-card{padding:var(--sp-5) var(--sp-4);border-radius:16px}
  .auth-card::before{left:16px;right:16px}
  .auth-brand{margin-bottom:var(--sp-4)}
}
@media (max-width:480px){
  /* Deterministic stack. The default .row-inline min-width:150px clears the
     available inner width by only ~16px at 360px — too close to trust. */
  .auth-card .row-inline{display:block}
  .auth-card .row-inline>.field{min-width:0}
}
@media (max-width:400px){
  .auth-shell{padding:var(--sp-4) var(--sp-3)}
  .auth-card{padding:18px 16px}
  .auth-card h1{font-size:var(--fs-lg)}
  /* min-width/min-height too — the base rule sets them to 64px, and width
     alone would lose to it and leave the mark stuck at full size. */
  .auth-brand .brand-mark{width:54px;height:54px;min-width:54px;min-height:54px;border-radius:16px}
  .auth-wordmark{font-size:1.06rem}
}

/* ------------------------------------------------------------
   22. PHONE SWEEP
   ------------------------------------------------------------
   Every page in the product was walked at 1920 / 1440 / 1180 / 1024 /
   900 / 768 / 560 / 390 / 320. These are the adjustments that survived.
   ------------------------------------------------------------ */
@media (max-width:768px){
  .pagehead{align-items:flex-start}
  .pagehead-acts{width:100%}
  .planbar-top{gap:12px}
  .modecard-top{gap:12px}
  .checkout-total b{font-size:1.45rem}
}
@media (max-width:620px){
  .card{padding:17px}
  .onboard,.planbar,.eastat,.co-main{padding:18px}
  .dash-sec{margin-bottom:var(--sp-6)}
  .section-h{margin:var(--sp-5) 0 var(--sp-3);font-size:1rem}
  .pagehead h1{font-size:1.32rem}
  .pagehead-acts .btn{flex:1 1 auto;justify-content:center}
  .onboard-cta .btn{width:100%}
  .stat .value{font-size:1.5rem}
  .plan-cost b{font-size:1.85rem}
  .lock-panel .btn,.claim-panel .btn{width:100%}
  .imp-bar{font-size:.8rem}
}
@media (max-width:400px){
  .card{padding:15px}
  .brand-txt{font-size:.92rem}
  .nav-toggle-txt{display:none}
  .nav-toggle{padding:9px 12px}
  .tabs{width:100%}
  .tabs a{flex:1 1 auto;text-align:center}
}

/* ------------------------------------------------------------
   23. REDUCED MOTION
   ------------------------------------------------------------
   The earlier blocks neutralise the chart and hero animations by name.
   This is the catch-all for everything added since — the nav panel, the
   hamburger morph, the dropdown pop, the card lifts — so a new
   transition can never sneak past the preference.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    /* the nav panel delays its visibility flip until the height finishes;
       without this the panel would still linger for a quarter of a second */
    transition-delay:.001ms !important;
    scroll-behavior:auto !important}
  .metric:hover,.qa:hover,.plan-card:hover{transform:none}
  .btn:not(:disabled):active{transform:none}
  .eastat-dot-ok::after{animation:none;display:none}
}