/* ═══════════════════════════════════════════════════════════════════════
   GXM theme — black & white cyber. Loaded after app.css on every page.
   Change the tokens below to re-skin; everything else follows them.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --brandfont: "Chakra Petch", "Inter", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --bg: #000; --bg-2: #050505; --surface: #0a0a0a; --surface-2: #111; --surface-3: #1a1a1a;
  --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.16);
  --text: #f4f4f4; --text-2: #b8b8b8; --muted: #767676;
  --brand: #fff; --brand-hover: #dcdcdc; --brand-press: #bdbdbd;
  --brand-soft: rgba(255,255,255,.07); --brand-grad: #fff;
  --berry: #fff; --plum: #fff; --lilac: #d4d4d4; --rose: #fff; --orchid: #fff;
  --ok: #3ddc84; --ok-soft: rgba(61,220,132,.10);
  --warn: #e8e8e8; --warn-soft: rgba(255,255,255,.07);
  --bad: #ff5a5a; --bad-soft: rgba(255,90,90,.10);
  --info: #e8e8e8; --info-soft: rgba(255,255,255,.07);
  --r-lg: 6px; --r: 4px; --r-sm: 3px;
  --shadow: none;
  --glass: none;
  --grid: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 28px 28px,
          linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 28px 28px;
  --cut: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

/* ── Canvas: black with a faint blueprint grid + scanlines ─────────────── */
html, body { background: #000 !important; color: var(--text); }
body { font-family: var(--font); }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--grid), radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.06), transparent 60%), #000; }
body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px); }
::selection { background: #fff; color: #000; }
* { scrollbar-color: #333 #000; }
.hearts, .sparkle, .ambient, canvas.ambient, .bg-hearts { display: none !important; }

/* ── Type: angular display face, uppercase labels in mono ──────────────── */
body.ac h1, body.ac h2, body.ac h3, .card-h h2, .topbar h1, .sec-h h2, .hero-s h1, .feat h3, .auth-card h1, .cta-band h2 {
  font-family: var(--brandfont); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.card-h h2 { font-size: 14.5px; letter-spacing: .06em; }
.hero-s h1 { letter-spacing: -.005em; line-height: 1.02; }
.hero-s h1 .g, .hero-s h1 em { background: none !important; color: #fff; -webkit-text-fill-color: #fff;
  text-shadow: 0 0 24px rgba(255,255,255,.25); }
.eyebrow, .kicker, .db-kpi small, .rc-stats small, .ro-cur-main small, .cp-hero-txt small, .field > span, .tbl th {
  font-family: var(--mono) !important; letter-spacing: .14em !important; text-transform: uppercase; }
.mono, code, kbd { font-family: var(--mono); }
a { color: #fff; }

/* ── Surfaces: sharp, framed, corner-cut ───────────────────────────────── */
.card-a, .route-card, .db-kpi, .rl-group, .cp-card, .cp-step, .fl-row, .modal-a .box, .auth-card, .feat, .price-card, .tile, .sc-status {
  background: rgba(10,10,10,.92) !important; border: 1px solid var(--line-2) !important; border-radius: var(--r-lg) !important;
  box-shadow: none !important; }
.card-a { position: relative; }
.card-a::before { content: ""; position: absolute; top: -1px; left: -1px; width: 14px; height: 14px; pointer-events: none;
  border-top: 2px solid #fff; border-left: 2px solid #fff; background: none !important; right: auto; }
.card-a::after { content: ""; position: absolute; bottom: -1px; right: -1px; width: 14px; height: 14px; pointer-events: none;
  border-bottom: 2px solid #fff; border-right: 2px solid #fff; }

/* Big hero panels become dark grid panels with a white frame */
.ro-cur, .db-hero, .tu-hero, .cid-hero, .cta-band, .hero-new, .ct-me, .rt-check, .cp-hero, .hero-card, .tg-hero {
  background: var(--grid), linear-gradient(135deg, #111, #000 70%) !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,.28) !important; border-radius: var(--r-lg) !important; box-shadow: none !important; }
.db-art, .tu-art { filter: grayscale(1) contrast(1.1); opacity: .9; }

/* ── Buttons: white slabs with cut corners ─────────────────────────────── */
.btn-a { border-radius: var(--r) !important; font-family: var(--mono); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
.btn-primary-a, .db-btn-w, .cta-band .btn-a, .hero-card .btn-a, .rt-best .btn-a, .tg-main,
body.ac .cp-hero .btn-a.db-btn-w, body.ac .db-hero .btn-a.db-btn-w, body.ac .ct-me .btn-a.ct-w, body.ac .tg-hero .btn-a.tg-main {
  background: #fff !important; color: #000 !important; border: 1px solid #fff !important; clip-path: var(--cut); box-shadow: none !important; }
.btn-primary-a:hover, .db-btn-w:hover { background: #dcdcdc !important; }
.btn-primary-a svg, .db-btn-w svg { color: #000; }
.btn-ghost-a, .db-btn-t, .btn-a.btn-ghost-a { background: transparent !important; color: #fff !important; border: 1px solid var(--line-2) !important; }
.btn-ghost-a:hover, .db-btn-t:hover { border-color: #fff !important; background: rgba(255,255,255,.05) !important; }
.btn-ok-a, .call-btn:not(.hang) { background: #fff !important; color: #000 !important; }
.call-btn.hang, .btn-bad-a { background: transparent !important; color: #ff5a5a !important; border: 1px solid rgba(255,90,90,.6) !important; }
.call-btn.hang svg { color: #ff5a5a; }

/* Everything else that sat on the old brand colour: white bg → black text */
.chip.on, .nav-a .nav-badge, .avatar, .bal-chip .plus, .step-n, .fl-row:first-child .fl-rank, .ro-res-steps .ro-n,
.cp-day input:checked + span, .cs-b.on span, .rt-best .pill, .rt-route em, .amt em, .info-list li::before, .cid-acts .cid-call {
  background: #fff !important; color: #000 !important; border-color: #fff !important; }
.chip.on span { color: rgba(0,0,0,.6) !important; }
.nav-a.active { background: rgba(255,255,255,.06) !important; color: #fff !important; }
.nav-a.active::before { background: #fff !important; }
.brand-name { background: none !important; color: #fff !important; -webkit-text-fill-color: #fff; }
.stats-strip b { background: none !important; color: #fff !important; -webkit-text-fill-color: #fff; }

/* Icon tiles: monochrome outlines */
.tile-ic, .ic-brand, .ic-green, .ic-orange, .ic-violet, .ic-blue, .ic-cyan, .ic-red {
  background: transparent !important; color: #fff !important; border: 1px solid var(--line-2); border-radius: var(--r) !important; }

/* Inputs */
.input, select.input, textarea.input, .rt-num { background: #050505 !important; border: 1px solid var(--line-2) !important; border-radius: var(--r) !important; color: #fff; }
.input:focus, .rt-num:focus-within { border-color: #fff !important; box-shadow: 0 0 0 3px rgba(255,255,255,.12) !important; }
.seg, .chip { border-radius: var(--r) !important; }
.seg button { border-radius: 2px !important; font-family: var(--mono); letter-spacing: .06em; }
.seg button.on { background: #fff !important; color: #000 !important; }
.pill { border-radius: 2px !important; font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; font-size: 10.5px !important; }
.pill-brand, .pill-mute, .pill-info, .pill-warn { color: #fff !important; background: transparent !important; box-shadow: inset 0 0 0 1px var(--line-2); }
.pill-ok { color: #3ddc84 !important; background: transparent !important; box-shadow: inset 0 0 0 1px rgba(61,220,132,.4); }
.pill-bad { color: #ff5a5a !important; background: transparent !important; box-shadow: inset 0 0 0 1px rgba(255,90,90,.4); }
.cs-range, .switch-row input, input[type=checkbox], input[type=radio] { accent-color: #fff; }
.skel { background: #1a1a1a !important; }

/* ── Shell: sidebar + top bar ──────────────────────────────────────────── */
.sidebar, .side, .app-side { background: #000 !important; border-right: 1px solid var(--line-2) !important; }
.topbar, .app-top { background: rgba(0,0,0,.85) !important; border-bottom: 1px solid var(--line) !important; backdrop-filter: blur(8px); }
.bal-chip { border-radius: var(--r) !important; border: 1px solid var(--line-2) !important; background: #050505 !important; }
.site-nav, .site-head { background: rgba(0,0,0,.8) !important; border-bottom: 1px solid var(--line) !important; }

/* Logo: wordmark in headers, square mark elsewhere */
.brand-word { display: block; height: 22px; width: auto; }
.brand-mark { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.brand-mark .brand-sub { display: block; margin: 0; }
.brand-mark .brand-sub { font-family: var(--mono); letter-spacing: .18em; text-transform: uppercase; font-size: 9.5px; color: var(--muted); }

/* ── Data bits ─────────────────────────────────────────────────────────── */
.tbl th { color: var(--muted) !important; font-size: 10px !important; }
.tbl td { border-color: var(--line) !important; }
.rl-row.cur, .route-card.current, .fl-row.cur { box-shadow: inset 3px 0 0 #fff !important; background: rgba(255,255,255,.04) !important; }
.cp-progress i, .db-prog i, .cs-bar i, .db-bar.today i, .bar.today i, .wave i { background: #fff !important; }
.rl-on { background: #fff !important; color: #000 !important; }
.rl-more, .ro-res-steps a, .ro-cur-meta a { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; }
.ro-px { background: #fff !important; color: #000 !important; border-radius: 2px !important; }
.globe-wrap canvas { filter: grayscale(1) contrast(1.15); }

/* Toasts / dialogs */
.toast-a { background: #0a0a0a !important; border: 1px solid #fff !important; border-radius: var(--r) !important; color: #fff !important; font-family: var(--mono); }
.modal-a .box { border: 1px solid #fff !important; }

/* Call-again buttons and call icons: mono instead of green */
.ri-call { background: transparent !important; color: #fff !important; border: 1px solid var(--line-2) !important; border-radius: var(--r) !important; }
.ri-call:hover { border-color: #fff !important; }
.ri-ic, .ri-ic.ok { background: transparent !important; color: #fff !important; border: 1px solid var(--line-2); border-radius: var(--r) !important; }
.ri-ic.bad { color: #ff5a5a !important; border-color: rgba(255,90,90,.4); }

/* ═══ Landing (gx-*) ═══════════════════════════════════════════════════ */
.gx .sec { padding-top: 84px; }
.gx-hero { padding-top: 26px; }
.gx-status { display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: space-between; padding: 9px 14px; border: 1px solid var(--line-2);
  font-size: 11px; letter-spacing: .16em; color: var(--text-2); background: rgba(0,0,0,.6); }
.gx-status span { display: inline-flex; align-items: center; gap: 8px; }
.gx-dot { width: 7px; height: 7px; background: #3ddc84; display: inline-block; box-shadow: 0 0 10px #3ddc84; animation: gxBlink 1.6s steps(2) infinite; }
@keyframes gxBlink { 50% { opacity: .35; } }
.gx-hero-c { text-align: center; padding: 72px 0 46px; position: relative; }
.gx-hero-mark { width: min(300px, 62vw); height: auto; display: block; margin: 0 auto 34px; filter: drop-shadow(0 0 28px rgba(255,255,255,.28)); }
.gx-hero-c h1 { font-family: var(--brandfont); font-size: clamp(34px, 6.4vw, 78px); line-height: .98; margin: 0 0 34px; letter-spacing: .01em; text-transform: uppercase; }
.gx-cursor { display: inline-block; margin-left: 4px; animation: gxBlink 1s steps(2) infinite; }
.gx-hero-c .hero-ctas { justify-content: center; }
.gx-console { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0; border: 1px solid rgba(255,255,255,.28); position: relative;
  background: rgba(5,5,5,.92); }
.gx-console::before, .gx-console::after { content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none; }
.gx-console::before { top: -2px; left: -2px; border-top: 2px solid #fff; border-left: 2px solid #fff; }
.gx-console::after { bottom: -2px; right: -2px; border-bottom: 2px solid #fff; border-right: 2px solid #fff; }
.gx-term, .gx-mon { min-width: 0; position: relative; overflow: hidden; }
.gx-mon { border-left: 1px solid var(--line-2); }
.gx-term-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 10.5px; letter-spacing: .16em; color: var(--muted); }
.gx-term-bar i { width: 9px; height: 9px; border: 1px solid var(--line-2); }
.gx-term-bar span { margin-left: 6px; } .gx-mon .gx-term-bar { justify-content: space-between; } .gx-mon .gx-term-bar span { margin: 0; }
.gx-live { display: inline-flex; align-items: center; gap: 7px; color: #fff; }
.gx-term-body { margin: 0; padding: 18px 18px 22px; min-height: 290px; font-size: 13px; line-height: 1.75; white-space: pre-wrap; color: var(--text-2); }
.gx-term-body .cmd { color: #fff; } .gx-term-body .ok { color: #3ddc84; }
.gx-term-body div:last-child::after { content: "█"; margin-left: 2px; animation: gxBlink 1s steps(2) infinite; color: #fff; }
.gx-chans { position: relative; z-index: 1; display: grid; }
.gx-chan { display: grid; grid-template-columns: auto auto minmax(0, 1fr) 70px auto; grid-template-areas: "id f n w t" "id f r w t"; align-items: center; gap: 2px 10px;
  padding: 13px 14px; border-bottom: 1px solid var(--line); }
.gx-ch-id { grid-area: id; font-size: 10px; color: var(--muted); letter-spacing: .12em; }
.gx-chan .flag { grid-area: f; width: 22px; height: 16px; border-radius: 2px; }
.gx-ch-n { grid-area: n; font-size: 12.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-ch-r { grid-area: r; font-size: 9.5px; color: var(--muted); letter-spacing: .14em; }
.gx-ch-t { grid-area: t; font-size: 13px; color: #fff; }
.gx-wave { grid-area: w; display: flex; align-items: center; gap: 2px; height: 26px; }
.gx-wave i { flex: 1 1 0; background: #fff; height: 30%; transition: height .18s linear; opacity: .85; }
.gx-radar { position: absolute; right: -70px; bottom: -70px; width: 260px; height: 260px; opacity: .55; pointer-events: none; }
.gx-sweep { transform-origin: 100px 100px; animation: gxSweep 4s linear infinite; }
@keyframes gxSweep { to { transform: rotate(360deg); } }

.gx-ticker { margin-top: 46px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); overflow: hidden; background: #050505; }
.gx-ticker-track { display: flex; gap: 46px; width: max-content; padding: 13px 0; font-size: 12px; letter-spacing: .14em; color: var(--text-2); animation: gxTick 60s linear infinite; }
.gx-ticker-track span { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.gx-ticker-track b { color: #fff; font-weight: 700; }
.gx-ticker .flag { width: 18px; height: 13px; border-radius: 2px; }
@keyframes gxTick { to { transform: translateX(-50%); } }

.gx-sec-h { display: grid; gap: 10px; margin-bottom: 30px; max-width: 760px; }
.gx-sec-h > span { font-size: 11px; letter-spacing: .22em; color: var(--muted); }
.gx-sec-h h2 { margin: 0; font-family: var(--brandfont); font-size: clamp(26px, 3.4vw, 40px); text-transform: uppercase; }
.gx-sec-h p { margin: 0; color: var(--text-2); font-size: 15px; }

.gx-mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); }
.gx-mod { position: relative; padding: 28px 24px 26px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); background: rgba(0,0,0,.55);
  transition: background .2s ease; min-width: 0; }
.gx-mod:hover { background: #fff; color: #000; }
.gx-mod:hover h3, .gx-mod:hover p, .gx-mod:hover li, .gx-mod:hover em, .gx-mod:hover svg { color: #000; }
.gx-mod em { position: absolute; top: 16px; right: 18px; font-style: normal; font-size: 10.5px; letter-spacing: .16em; color: var(--muted); }
.gx-mod svg { width: 28px; height: 28px; color: #fff; margin-bottom: 18px; }
.gx-mod h3 { margin: 0 0 8px; font-family: var(--brandfont); font-size: 19px; text-transform: uppercase; color: #fff; }
.gx-mod p { margin: 0 0 14px; color: var(--text-2); font-size: 14px; line-height: 1.55; }
.gx-mod ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 11px; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.gx-mod li::before { content: "› "; }

.gx-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.gx-plan { display: flex; flex-direction: column; gap: 18px; padding: 26px; border: 1px solid var(--line-2); background: rgba(5,5,5,.92); clip-path: var(--cut); }
.gx-plan.on { background: #fff; color: #000; border-color: #fff; }
.gx-plan-h { display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.gx-plan-h b { font-size: 9.5px; padding: 4px 7px; border: 1px solid currentColor; }
.gx-plan-p { font-family: var(--brandfont); font-size: 54px; font-weight: 700; line-height: 1; display: flex; align-items: baseline; gap: 10px; }
.gx-plan-p small { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .6; }
.gx-plan ul { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid currentColor; border-color: var(--line-2); display: grid; gap: 10px; flex: 1 1 auto; font-size: 14px; }
.gx-plan.on ul { border-color: rgba(0,0,0,.18); }
.gx-plan li::before { content: "■"; font-size: 8px; vertical-align: 2px; margin-right: 10px; }
.gx-plan.on .btn-primary-a { background: #000 !important; color: #fff !important; border-color: #000 !important; }
.gx-note { margin: 18px 0 0; font-size: 11.5px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }

.gx-lookup { border: 1px solid var(--line-2); padding: 22px; background: rgba(5,5,5,.92); }
.gx-prompt { display: flex; align-items: center; gap: 14px; border: 1px solid #fff; padding: 0 16px; height: 62px; background: #000; }
.gx-prompt span { color: var(--muted); font-size: 14px; white-space: nowrap; }
.gx-prompt input { flex: 1 1 auto; min-width: 0; background: none; border: 0; outline: none; color: #fff; font-size: 22px; letter-spacing: .06em; }
.gx-pop-h { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 26px 0 12px; font-size: 11px; letter-spacing: .16em; }
.gx-lookup .dest-a { border-radius: var(--r) !important; background: #050505 !important; border: 1px solid var(--line-2) !important; }
.gx-lookup .dest-a:hover { border-color: #fff !important; }

.gx-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: none; position: relative; }
.gx-flow li { display: grid; gap: 8px; padding: 26px 24px 0 0; border-top: 2px solid #fff; position: relative; }
.gx-flow li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; background: #fff; }
.gx-flow em { font-style: normal; font-size: 11px; letter-spacing: .2em; color: var(--muted); }
.gx-flow b { font-family: var(--brandfont); font-size: 22px; text-transform: uppercase; color: #fff; }
.gx-flow span { color: var(--text-2); font-size: 14px; max-width: 34ch; }
.gx-faq { border-top: 1px solid var(--line-2); max-width: 900px; }
.gx-faq .faq-a { border-bottom: 1px solid var(--line-2); padding: 4px 0; }

.gx-cta { margin: 96px 0 30px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 30px; align-items: center; padding: 34px; border: 1px solid #fff;
  background: var(--grid), #050505; }
.gx-cta img { width: 150px; height: auto; }
.gx-cta h2 { margin: 0 0 6px; font-family: var(--brandfont); font-size: 30px; text-transform: uppercase; }
.gx-cta p { margin: 0; font-size: 11.5px; letter-spacing: .16em; color: var(--muted); text-transform: uppercase; }

@media (max-width: 900px) {
  .gx-console { grid-template-columns: minmax(0, 1fr); }
  .gx-mon { border-left: 0; border-top: 1px solid var(--line-2); }
  .gx-mods, .gx-plans { grid-template-columns: minmax(0, 1fr); }
  .gx-flow { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .gx-cta { grid-template-columns: minmax(0, 1fr); text-align: left; }
}
@media (max-width: 560px) {
  .gx-hero-c { padding: 46px 0 32px; }
  .gx-term-body { font-size: 11px; min-height: 250px; padding: 14px; }
  .gx-chan { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "f n t" "f r t"; }
  .gx-ch-id, .gx-wave { display: none; }
  .gx-prompt input { font-size: 17px; }
  .gx-plan-p { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) { .gx-ticker-track, .gx-sweep, .gx-dot, .gx-cursor { animation: none; } }

/* ═══ App shell (unique GXM console look) ══════════════════════════════ */
.side { counter-reset: gxnav; }
.nav-sec-t { font-family: var(--mono) !important; letter-spacing: .22em !important; font-size: 9.5px !important; color: var(--muted) !important; }
.nav-sec-t::before { content: "// "; }
.nav-a { counter-increment: gxnav; border-radius: 0 !important; font-family: var(--mono); font-size: 12px !important; letter-spacing: .08em; text-transform: uppercase;
  border-left: 2px solid transparent !important; }
.nav-a::after { content: counter(gxnav, decimal-leading-zero); margin-left: auto; font-size: 9.5px; color: var(--muted); letter-spacing: .1em; }
.nav-a:hover { background: rgba(255,255,255,.04) !important; border-left-color: rgba(255,255,255,.4) !important; }
.nav-a.active { background: #fff !important; color: #000 !important; border-left-color: #fff !important; }
.nav-a.active svg, .nav-a.active::after { color: #000 !important; }
.nav-a.active::before { display: none !important; }
.nav-a .nav-badge { margin-left: 6px; }
.side-foot { border-top: 1px solid var(--line-2) !important; }
.side-foot .avatar { border-radius: 0 !important; }
.topbar h1 { font-family: var(--mono) !important; font-size: 17px !important; letter-spacing: .1em !important; }
.gx-pfx { color: var(--muted); margin-right: 2px; }
.topbar .crumb { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.reg-dot { border-radius: 0 !important; font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px !important; }
.content { padding-bottom: 64px !important; }
.gx-hud { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: 22px; align-items: center; height: 28px; padding: 0 16px;
  background: #fff; color: #000; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; }
.gx-hud span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.gx-hud .gx-dot { background: #000; box-shadow: none; }
.gx-hud-r { margin-left: auto; }
@media (max-width: 900px) { .gx-hud { display: none; } .content { padding-bottom: 24px !important; } }

/* Dashboard hero: HUD with the GXM mark instead of artwork */
.db-hero { min-height: 300px; }
.gx-dbhud { position: absolute; right: 0; top: 0; bottom: 0; width: 46%; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 26px 30px;
  border-left: 1px solid var(--line-2); background: repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 10px); }
.gx-dbhud img { width: 72%; max-width: 260px; height: auto; opacity: .95; filter: drop-shadow(0 0 18px rgba(255,255,255,.25)); }
.gx-dbhud-l { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 10.5px; letter-spacing: .18em; color: var(--muted); }
.gx-dbhud-l b { color: #fff; font-weight: 600; }
.gx-dbhud-bars { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.gx-dbhud-bars i { flex: 1 1 0; background: #fff; opacity: .8; animation: gxEq 1.2s ease-in-out infinite; }
.gx-dbhud-bars i:nth-child(3n) { animation-delay: -.4s; } .gx-dbhud-bars i:nth-child(3n+1) { animation-delay: -.8s; } .gx-dbhud-bars i:nth-child(4n) { animation-duration: .9s; }
@keyframes gxEq { 0%, 100% { height: 18%; } 50% { height: 100%; } }
@media (max-width: 760px) { .gx-dbhud { display: none; } }
@media (prefers-reduced-motion: reduce) { .gx-dbhud-bars i { animation: none; height: 50%; } }

/* ═══ Auth: split console ═════════════════════════════════════════════ */
.gx-auth { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 0; width: min(1040px, 100%); max-width: 1040px; margin: 0 auto; align-content: center; place-items: stretch !important; justify-content: center; }
.gx-auth > * { margin: 0 !important; }
.gx-auth-side { align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 26px; padding: 44px; border: 1px solid var(--line-2);
  border-right: 0; background: var(--grid), #050505; min-height: 460px; }
.gx-auth-side img { width: 220px; height: auto; filter: drop-shadow(0 0 22px rgba(255,255,255,.22)); }
.gx-auth-side pre { margin: 0; font-size: 12.5px; line-height: 1.9; color: var(--text-2); }
.gx-auth-side > span { font-size: 10.5px; letter-spacing: .22em; color: var(--muted); }
.gx-auth .auth-card { max-width: none; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 40px 36px; }
.gx-auth .auth-card .head { text-align: left; }
.gx-auth-tag { display: inline-block; font-size: 10.5px; letter-spacing: .22em; color: var(--muted); margin-bottom: 10px; }
@media (max-width: 820px) { .gx-auth { grid-template-columns: minmax(0, 1fr); } .gx-auth-side { display: none; } }

/* Display currency £ / $ */
.cur-toggle { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.cur-opt { min-width: 34px; padding: 6px 10px; font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text-2); background: transparent; border: 0; border-radius: 2px; cursor: pointer; line-height: 1; }
.cur-opt:hover { color: var(--text); background: var(--brand-soft); }
.cur-opt.on { color: #000; background: var(--brand); }
.topbar .right .cur-toggle { margin-right: 8px; }
.site-cta .cur-toggle { margin-right: 10px; }