/* Million Diamonds Jerusalem — production web client.
   Design system aligned to the approved manager demo (light.css): cream + navy + gold,
   Frank Ruhl Libre headings, ✦ diamond brand, flourishes. Map stays dark (MVP-14). LTR-global. */
:root {
  --paper: #f4f1ea;
  --paper-2: #efeae0;
  --card: #ffffff;
  --wash: #f7f5ef;

  --navy: #17284b;
  --navy-2: #1f335c;
  --navy-deep: #0f1c38;

  --gold: #c69b45;
  --gold-bright: #e2be6e;
  --gold-deep: #a9822f;
  --gold-soft: rgba(198, 155, 69, 0.14);
  --gold-line: rgba(198, 155, 69, 0.42);

  --ink: #1a2440;
  --ink-soft: #4a5679;
  --ink-mut: #8a91a8;
  --ink-faint: #aab0c2;

  --line: #e7e1d3;
  --line-2: #eceae3;
  --line-cool: #e6e8ef;
  --err: #d1495b;

  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px;
  --shadow-card: 0 24px 70px rgba(6, 10, 24, 0.5), 0 2px 8px rgba(23, 40, 75, 0.06);
  --shadow-btn: 0 8px 22px rgba(23, 40, 75, 0.22);
  /* was referenced by .kpi/.table-card but never defined — cards rendered flat */
  --shadow-soft: 0 10px 30px rgba(23, 40, 75, 0.07), 0 1px 3px rgba(23, 40, 75, 0.05);

  --font-body: 'Assistant', 'Heebo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-head: 'Frank Ruhl Libre', 'Assistant', Georgia, serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { overflow: hidden; background: #05070f; color: var(--ink); font-family: var(--font-body); }

#map { position: fixed; inset: 0; }
/* soft vignette so the light UI reads cleanly over the star-map */
.map-vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(140% 90% at 50% 0%, rgba(5, 7, 15, 0.55) 0%, transparent 42%),
    radial-gradient(120% 80% at 50% 100%, rgba(5, 7, 15, 0.5) 0%, transparent 45%);
}

h1, h2, h3 { font-family: var(--font-head); color: var(--navy); margin: 0; font-weight: 700; }

/* ---- brand mark (topbar) ---- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20; direction: ltr;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px;
  background: linear-gradient(180deg, rgba(5, 7, 15, 0.9) 0%, rgba(5, 7, 15, 0) 100%);
}
.count-badge { direction: ltr; }
.brand { display: flex; align-items: center; gap: 11px; color: #fff; }
.brand-diamond { color: var(--gold-bright); flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-family: var(--font-head); font-weight: 700; letter-spacing: 4px; font-size: 15px; color: #fff; }
.brand-sub {
  letter-spacing: 6px; font-size: 8.5px; font-weight: 700; color: var(--gold-bright);
  margin-top: 2px; padding-left: 2px;
}
.top-actions { display: flex; align-items: center; gap: 10px; }

.lang { display: flex; background: rgba(255, 255, 255, 0.08); border-radius: var(--r-pill); padding: 2px; }
.lang button {
  border: 0; background: transparent; color: #cdd6f0; padding: 5px 11px; border-radius: var(--r-pill);
  cursor: pointer; font-size: 12px; font-family: var(--font-body); font-weight: 600; transition: all 0.15s;
}
.lang button.active { background: rgba(226, 190, 110, 0.2); color: #fff; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-size: 15px; font-weight: 700; padding: 12px 22px;
  border-radius: var(--r-md); cursor: pointer; border: 1px solid var(--line); background: var(--card);
  color: var(--navy); transition: all 0.16s ease;
}
.btn:hover { border-color: var(--gold); color: var(--gold-deep); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(180deg, var(--navy-2), var(--navy-deep));
  border: 1px solid var(--navy-deep); color: #fff; box-shadow: var(--shadow-btn);
}
.btn-primary:hover { color: #fff; border-color: var(--gold); transform: translateY(-1px); }
.btn-gold { background: transparent; border: 1px solid var(--gold-line); color: var(--gold-deep); }
.btn-gold:hover { background: var(--gold-soft); border-color: var(--gold); }
.btn-block { width: 100%; margin-top: 16px; }
.btn-link { background: transparent; border: 0; color: var(--navy-2); font-weight: 600; margin-top: 6px; }
.btn-link:hover { color: var(--gold-deep); }
/* topbar variants that pop against the dark map */
.btn.gold {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%);
  border: 1px solid var(--gold-deep); color: #2a2205; box-shadow: 0 6px 18px rgba(198, 155, 69, 0.3);
}
.btn.gold:hover { filter: brightness(1.06); color: #2a2205; }
.btn.ghost-light { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); color: #eef1fb; }
.btn.ghost-light:hover { background: rgba(255, 255, 255, 0.16); color: #fff; border-color: var(--gold-line); }

.tagline {
  position: fixed; left: 0; right: 0; bottom: 24px; z-index: 10; text-align: center;
  color: rgba(255, 246, 223, 0.72); font-size: 14px; letter-spacing: 0.5px; pointer-events: none;
  font-family: var(--font-head); font-style: italic;
}

/* ---- flow panel (light luxury card) ---- */
.scrim { position: fixed; inset: 0; z-index: 25; background: rgba(4, 6, 14, 0.62); backdrop-filter: blur(3px); }
.panel {
  position: fixed; z-index: 30; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(430px, calc(100vw - 28px)); max-height: calc(100vh - 80px); overflow: auto;
  background: var(--card); border-radius: var(--r-lg); padding: 30px 28px 24px;
  box-shadow: var(--shadow-card); border-top: 3px solid var(--gold);
}
/* gold sheen line under the top border */
.panel::before {
  content: ''; position: absolute; inset-inline: 28px; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent); opacity: 0.9;
}
/* faint light rays in the panel header (Jerusalem light motif) */
.panel-rays {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 320px; height: 150px;
  pointer-events: none; z-index: 0; opacity: 0.5;
  background: conic-gradient(from 250deg at 50% 0%,
    rgba(255, 255, 255, 0) 0deg, rgba(255, 245, 220, 0.55) 6deg, rgba(255, 255, 255, 0) 13deg,
    rgba(255, 255, 255, 0) 28deg, rgba(255, 245, 220, 0.4) 34deg, rgba(255, 255, 255, 0) 41deg,
    rgba(255, 255, 255, 0) 60deg, rgba(255, 245, 220, 0.45) 66deg, rgba(255, 255, 255, 0) 73deg);
  filter: blur(2px);
}
.panel-close {
  position: absolute; top: 12px; right: 14px; z-index: 3; border: 0; background: transparent;
  font-size: 24px; line-height: 1; color: var(--ink-mut); cursor: pointer;
}
.panel-brand { text-align: center; position: relative; z-index: 2; margin-bottom: 6px; }

.screen-title { position: relative; z-index: 2; font-size: 25px; line-height: 1.2; text-align: center; margin-top: 6px; }
.flourish { text-align: center; color: var(--gold); font-size: 12px; margin: 10px 0 14px; }
.flourish::before, .flourish::after {
  content: ''; display: inline-block; width: 46px; height: 1px; vertical-align: middle; margin: 0 12px;
  background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
}
.hint { font-size: 13.5px; color: var(--ink-mut); }
.hint.center { text-align: center; margin: 0 auto 8px; max-width: 340px; }

.step { position: relative; z-index: 2; }

/* ---- inputs ---- */
.field {
  width: 100%; padding: 13px 16px; margin-top: 12px; font-size: 15px; font-family: var(--font-body);
  background: var(--wash); border: 1px solid var(--line-cool); border-radius: var(--r-md); color: var(--ink); outline: none;
}
.field::placeholder { color: var(--ink-faint); }
.field:focus { border-color: var(--gold); background: #fff; box-shadow: 0 0 0 3px var(--gold-soft); }
.field.mono { font-family: var(--font-mono); letter-spacing: 1px; }
.field.center-code { text-align: center; font-size: 24px; letter-spacing: 8px; }
textarea.field { resize: vertical; min-height: 108px; line-height: 1.7; }
.row { display: flex; gap: 10px; }
.row .field { flex: 1; }

.check { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; font-size: 13px; color: var(--ink-soft); }
.check input { margin-top: 2px; accent-color: var(--gold-deep); }

.err { color: var(--err); font-size: 13px; min-height: 18px; margin-top: 8px; text-align: center; }
.spark { font-size: 46px; text-align: center; }

/* ---- my stars (blessing cards) ---- */
#starsList { margin-top: 4px; }
.star-card {
  position: relative; border: 1px solid var(--line); border-radius: var(--r-md); margin-top: 12px;
  padding: 16px 18px 14px; background: var(--wash);
}
.star-card .quote {
  font-family: var(--font-head); font-size: 15px; line-height: 1.7; color: var(--ink);
  padding: 0 18px; position: relative;
}
.star-card .quote::before { content: '\201D'; position: absolute; inset-inline-start: -2px; top: -6px; color: var(--gold); font-size: 26px; font-family: var(--font-head); }
.star-meta { color: var(--ink-mut); font-size: 12px; margin-top: 10px; }
.star-actions { display: flex; gap: 8px; margin-top: 12px; }
.btn-sm { padding: 8px 13px; font-size: 13px; }

/* ---- toast ---- */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(12px); z-index: 60;
  background: var(--navy-deep); color: #fff6df; padding: 11px 20px; border-radius: var(--r-pill);
  border: 1px solid var(--gold-line); font-size: 14px; font-weight: 600; box-shadow: 0 12px 34px rgba(4, 6, 15, 0.5);
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: #5c1c26; border-color: #d1495b; color: #ffe9ec; }

/* =========================================================================
   Full-screen light app (login / account / admin)
   ========================================================================= */
body.viewing-screen .topbar,
body.viewing-screen .count-badge,
body.viewing-screen .map-reset,
body.viewing-screen .tagline,
body.viewing-screen .addr-search { display: none !important; }

#screenRoot {
  position: fixed; inset: 0; z-index: 35; overflow: auto; color: var(--ink);
  background:
    radial-gradient(1200px 620px at 78% -10%, rgba(198, 155, 69, 0.06), transparent),
    linear-gradient(180deg, #f7f4ed 0%, var(--paper) 40%, var(--paper-2) 100%);
}

/* -- centered screens (login) -- */
.screen-center { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; text-align: center; }
.screen-center .card { width: min(440px, 100%); }

/* -- app shell with sidebar -- */
.app-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.app-side {
  background: linear-gradient(180deg, var(--navy-2), var(--navy-deep));
  display: flex; flex-direction: column; padding: 22px 16px; position: relative; overflow: hidden;
  border-inline-end: 1px solid rgba(198, 155, 69, 0.25);
}
.side-brand { text-align: center; color: #fff; margin-bottom: 20px; }
.side-brand .brand-name { color: #fff; font-family: var(--font-head); letter-spacing: 4px; font-size: 14px; display: block; }
.side-brand .brand-sub { color: var(--gold-bright); letter-spacing: 5px; font-size: 8px; }
.nav { display: flex; flex-direction: column; gap: 3px; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r-md); color: #c9d2e8; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.nav a .ic { color: var(--gold-bright); width: 20px; text-align: center; }
.nav a:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.nav a.active { background: #f7f5ef; color: var(--navy); }
.nav a.active .ic { color: var(--gold-deep); }
.nav-sep { height: 1px; background: rgba(255, 255, 255, 0.14); margin: 10px 6px; }
.side-foot { margin-top: auto; }

.app-main { padding: 26px clamp(18px, 3vw, 40px) 44px; min-width: 0; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { font-size: 28px; }
.page-head p { color: var(--ink-soft); font-size: 14px; margin: 4px 0 0; }
.who { color: var(--ink-soft); font-size: 13px; }
.who b { color: var(--navy); }

/* KPI cards */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--shadow-soft); }
.kpi .lab { font-size: 12px; color: var(--ink-soft); font-weight: 700; }
.kpi .val { font-size: 30px; font-weight: 700; color: var(--navy); font-family: var(--font-head); margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
/* hero: the one number the eye should land on first (dashboard revenue) */
.kpi.hero { border-top: 2px solid var(--gold); }
.kpi.hero .val { font-size: 36px; }

/* tables */
.table-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-soft); overflow: auto; margin-top: 8px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl thead th { text-align: start; font-weight: 700; color: #eaeefc; font-size: 12.5px; padding: 13px 16px; background: linear-gradient(180deg, var(--navy-2), var(--navy-deep)); white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.tbl tbody td { padding: 10px 16px; border-bottom: 1px solid var(--line-2); color: var(--ink); vertical-align: middle; }
.tbl tbody tr:nth-child(even) { background: #fbfaf6; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: #f5efdf; }
.tbl .mono { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }
.tbl .cell-ic { width: 36px; color: var(--gold-deep); }
.tbl .cell-date { text-align: end; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-mut); white-space: nowrap; }
/* real-data proportion bar (geo table) — not a chart, just the number made visible */
.propbar { display: block; height: 6px; border-radius: 3px; background: var(--wash); overflow: hidden; min-width: 70px; }
.propbar > span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--gold), #e8cf8e); }
/* branded empty / loading / error state */
.empty { padding: 36px 20px; text-align: center; color: var(--ink-mut); font-size: 13.5px; }
.empty .glyph { display: block; font-size: 24px; color: var(--gold); opacity: 0.55; margin-bottom: 8px; }
.empty.error { color: var(--err); }
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); }
.pill.ok { background: #e7f6ee; color: #2f9e6f; }
.pill.warn { background: #fbf1da; color: #c8901f; }
.pill.err { background: #fbe9ec; color: #d1495b; }
.pill.mut { background: var(--wash); color: var(--ink-mut); }
.pill.gold { background: #f7efdb; color: #a6791d; }

/* blessing card (account) */
.bcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: 26px 28px; }
.bcard .quote { font-family: var(--font-head); font-size: 18px; line-height: 1.8; color: var(--ink); padding: 0 26px; position: relative; }
.bcard .quote::before { content: '\201D'; position: absolute; inset-inline-start: -4px; top: -8px; color: var(--gold); font-size: 34px; }
.bcard .b-meta { display: flex; gap: 22px; margin-top: 18px; flex-wrap: wrap; color: var(--ink-soft); font-size: 13px; }
.bcard .b-meta b { color: var(--navy); }

/* dev role picker (login) */
.dev-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.dev-roles button {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--wash); color: var(--navy); font-family: var(--font-body);
}
.dev-roles button:hover { border-color: var(--gold); background: #fff; }
.dev-roles .role { font-weight: 700; font-size: 14px; }
.dev-roles .desc { font-size: 11px; color: var(--ink-mut); }
.dev-note { font-size: 11px; color: var(--ink-mut); margin-top: 12px; }
.divider-or { display: flex; align-items: center; gap: 10px; color: var(--ink-mut); font-size: 12px; margin: 18px 0; }
.divider-or::before, .divider-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ===================== AUTH SCREEN — AUTH-UI-06 (premium refinement) ===================== */
/* Page ground: warm cream + a soft light halo behind the card + one faint diamond motif.
   Deliberately calm — the card and type are always the subject. */
#screenRoot .auth-page {
  position: relative; isolation: isolate;
  background:
    radial-gradient(58% 42% at 50% 26%, rgba(198,155,69,.10), rgba(198,155,69,0) 72%),
    radial-gradient(100% 80% at 50% 34%, #fbf9f4 0%, var(--paper) 62%, var(--paper-2) 100%);
}
#screenRoot .auth-page::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='300' viewBox='0 0 34 30'%3E%3Cg fill='none' stroke='%23c69b45' stroke-width='.5'%3E%3Cpath d='M6 3H28L33 10L17 28L1 10Z'/%3E%3Cpath d='M1 10H33M6 3L11 10L17 28M28 3L23 10L17 28M11 10L17 3L23 10'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center 14%; background-size: min(440px, 74%); opacity: .05;
}

/* Page-level language bar (above the card) */
.auth-langbar { display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 22px; }
.auth-lang { background: none; border: 0; font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--ink-mut); padding: 6px 12px 4px; border-radius: var(--r-sm); cursor: pointer; line-height: 1.2; }
.auth-lang:hover { color: var(--navy); }
.auth-lang[aria-current="true"] { color: var(--navy); font-weight: 700; }
.auth-lang .u { display: block; height: 2px; margin-top: 4px; border-radius: 2px; background: transparent; }
.auth-lang[aria-current="true"] .u { background: var(--gold); }
.auth-lang:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.auth-sep { color: var(--line); user-select: none; }

/* Card — floats gently on the ground */
.auth-card {
  width: min(430px, 100%); background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-soft); padding: 34px 32px 26px; text-align: center; position: relative;
}
.auth-card::before {
  content: ''; position: absolute; inset-inline: 0; top: 0; height: 2px; border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
}
.auth-brand { color: var(--gold); margin-bottom: 10px; }
.auth-title { font-family: var(--font-head); color: var(--navy); font-size: 26px; font-weight: 600; line-height: 1.25; margin: 0; text-wrap: balance; }
.auth-sub { color: var(--ink-soft); font-size: 13.5px; line-height: 1.6; margin: 9px auto 0; max-width: 30ch; }
.auth-flourish { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--gold); font-size: 11px; margin: 16px 0 18px; }
.auth-flourish::before, .auth-flourish::after { content: ''; height: 1px; width: 46px; }
.auth-flourish::before { background: linear-gradient(90deg, transparent, var(--gold-line)); }
.auth-flourish::after { background: linear-gradient(90deg, var(--gold-line), transparent); }

/* Primary decision — segmented control (the main element after the title) */
.auth-tabs { display: flex; gap: 4px; background: var(--wash); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px; margin-bottom: 20px; }
.auth-tab { flex: 1; padding: 11px 10px; border: 0; background: transparent; border-radius: var(--r-pill); font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--ink-soft); cursor: pointer; transition: color .18s, background .18s, box-shadow .18s; }
.auth-tab:hover { color: var(--navy); }
.auth-tab[aria-selected="true"] { background: var(--navy); color: #fff; box-shadow: inset 0 0 0 1px var(--gold-line), 0 6px 16px rgba(23,40,75,.18); }
.auth-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Field label + secondary channel choice (quieter than the tabs) */
.fld-label { display: block; text-align: start; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin: 12px 0 6px; }
.ch-seg { display: flex; gap: 6px; margin-bottom: 2px; }
.ch-opt { flex: 1; padding: 9px 10px; border: 1px solid var(--line-cool); background: var(--card); color: var(--ink-soft); border-radius: var(--r-md); font-family: var(--font-body); font-weight: 600; font-size: 14px; cursor: pointer; transition: color .16s, border-color .16s, background .16s, box-shadow .16s; }
.ch-opt:hover { border-color: var(--gold-line); color: var(--navy); }
.ch-opt[aria-pressed="true"] { border-color: var(--navy); color: var(--navy); background: var(--wash); box-shadow: inset 0 0 0 1px var(--navy); }
.ch-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Primary CTA */
.auth-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 18px; padding: 14px; border: 0; border-radius: var(--r-md); font-family: var(--font-body); font-weight: 700; font-size: 15px; color: #fff; background: linear-gradient(180deg, var(--navy-2), var(--navy-deep)); box-shadow: var(--shadow-btn); cursor: pointer; transition: transform .12s, box-shadow .18s, opacity .18s; }
.auth-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(23,40,75,.26); }
.auth-cta:active { transform: translateY(0); }
.auth-cta:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.auth-cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.auth-spin { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: auth-spin .7s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* "or" divider + secondary (password) + back */
.auth-alt { margin-top: 18px; }
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--ink-mut); font-size: 12px; margin: 0 0 4px; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-secondary { background: none; border: 0; color: var(--navy-2); font-weight: 600; font-size: 14px; padding: 8px; cursor: pointer; font-family: var(--font-body); }
.auth-secondary:hover { color: var(--gold-deep); }
.auth-secondary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.auth-back { display: block; margin: 12px auto 0; background: none; border: 0; color: var(--ink-mut); font-weight: 600; font-size: 13px; padding: 6px; cursor: pointer; font-family: var(--font-body); }
.auth-back:hover { color: var(--navy); }
.auth-back:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

/* Signup stepper */
.auth-steps { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 2px 0 16px; }
.auth-step { display: flex; align-items: center; gap: 6px; }
.auth-step .dot { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--ink-mut); background: var(--card); }
.auth-step .lbl { font-size: 11.5px; color: var(--ink-mut); }
.auth-step.active .dot { background: var(--navy); color: #fff; border-color: var(--navy); }
.auth-step.active .lbl { color: var(--navy); font-weight: 600; }
.auth-step.done .dot { background: var(--gold-soft); color: var(--gold-deep); border-color: var(--gold-line); }
.auth-step-bar { width: 18px; height: 1px; background: var(--line); }

/* OTP + hints */
.auth-hint { font-size: 13px; color: var(--ink-soft); text-align: center; line-height: 1.5; margin: 6px 0; }
.auth-otp-actions { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .auth-spin { animation-duration: 1.6s; }
  .auth-cta, .auth-tab, .ch-opt { transition: none; }
}
@media (max-width: 420px) {
  .auth-card { padding: 26px 20px 22px; border-radius: var(--r-md); }
  .auth-title { font-size: 23px; }
}

@media (max-width: 700px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-side { flex-direction: row; align-items: center; gap: 10px; padding: 12px; overflow-x: auto; }
  .app-side .side-brand, .app-side .side-foot { display: none; }
  .nav { flex-direction: row; }
}

/* =========================================================================
   Demo-faithful user screens (ported from light.css), scoped to #screenRoot
   ========================================================================= */
#screenRoot .app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
#screenRoot .app > .stage { grid-column: 2; grid-row: 1; min-width: 0; }
#screenRoot .app > .app-side { grid-column: 1; grid-row: 1; }
#screenRoot .stage { position: relative; padding: 40px clamp(20px, 4vw, 64px) 56px; overflow: hidden; min-width: 0; }
#screenRoot .stage-center { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
#screenRoot .brand { text-align: center; line-height: 1.1; display: block; }
#screenRoot .brand svg { color: var(--gold); }
#screenRoot .brand .name { font-family: var(--font-head); letter-spacing: 5px; color: var(--navy); font-size: 19px; font-weight: 700; display: block; }
#screenRoot .brand .sub { letter-spacing: 6px; color: var(--gold-deep); font-size: 10px; font-weight: 700; margin-top: 3px; position: relative; display: inline-block; padding: 0 22px; }
#screenRoot .brand .sub::before, #screenRoot .brand .sub::after { content: ''; position: absolute; top: 50%; width: 15px; height: 1px; background: var(--gold-deep); opacity: 0.7; }
#screenRoot .brand .sub::before { inset-inline-start: 0; }
#screenRoot .brand .sub::after { inset-inline-end: 0; }
#screenRoot .brand.sm .name { font-size: 14px; letter-spacing: 4px; }
#screenRoot .brand.sm .sub { font-size: 8px; }
#screenRoot .side-brand .name { color: #fff; }
#screenRoot .screen-sub { text-align: center; color: var(--ink-soft); font-size: 15px; max-width: 520px; margin: 0 auto; }

#screenRoot .rays { position: absolute; inset-block-start: -10%; inset-inline-start: -6%; width: 260px; height: 260px; pointer-events: none; z-index: 0;
  background: conic-gradient(from 210deg at 20% 15%, rgba(255,255,255,0) 0deg, rgba(255,245,220,0.5) 8deg, rgba(255,255,255,0) 16deg, rgba(255,255,255,0) 24deg, rgba(255,245,220,0.35) 30deg, rgba(255,255,255,0) 40deg, rgba(255,255,255,0) 60deg, rgba(255,245,220,0.4) 66deg, rgba(255,255,255,0) 74deg); filter: blur(2px); opacity: 0.8; }
#screenRoot .holyland { position: absolute; inset-block: 0; inset-inline-start: 0; width: 300px; pointer-events: none; z-index: 0; opacity: 0.9;
  background: radial-gradient(320px 300px at 30% 12%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(500px 500px at 20% 40%, rgba(226,190,110,0.1), transparent 70%), linear-gradient(180deg, rgba(244,241,234,0) 40%, var(--paper) 96%); }
#screenRoot .holyland svg { position: absolute; inset-block-end: 6%; inset-inline-start: -4%; width: 108%; opacity: 0.5; }
#screenRoot .side-city { position: absolute; inset-block-end: 0; inset-inline: 0; height: 150px; opacity: 0.18; color: var(--gold); pointer-events: none; }

#screenRoot .field-row { margin: 14px 0; }
#screenRoot .label { display: block; font-size: 13px; color: var(--ink-soft); font-weight: 700; margin-bottom: 4px; }
#screenRoot .label .req { color: var(--err); }
#screenRoot .field { width: 100%; padding: 13px 16px; background: var(--card); border: 1px solid var(--line-cool); border-radius: var(--r-md); color: var(--ink); font-size: 15px; font-family: var(--font-body); margin-top: 0; }
#screenRoot .field:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
#screenRoot textarea.field { resize: vertical; min-height: 120px; line-height: 1.7; }
#screenRoot .input-inline { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line-cool); border-radius: var(--r-md); padding: 4px 14px 4px 6px; }
#screenRoot .input-inline:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
#screenRoot .input-inline .tag { display: inline-flex; align-items: center; color: var(--gold); }
#screenRoot .input-inline input { flex: 1; border: 0; background: transparent; font-size: 15px; color: var(--ink); padding: 12px 6px; font-family: var(--font-body); }
#screenRoot .input-inline input:focus { outline: none; }

#screenRoot .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
#screenRoot .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
#screenRoot .card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-soft); }
#screenRoot .card-pad { padding: 24px 28px; }
#screenRoot .card.gold-top::before { content: ''; position: absolute; inset-inline: 26px; inset-block-start: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0.8; }
#screenRoot .privacy-card.on { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }

#screenRoot .social { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); font-size: 12.5px; color: var(--ink-soft); font-weight: 600; cursor: pointer; }
#screenRoot .social:hover { border-color: var(--gold); }
#screenRoot .social .dot { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; }
#screenRoot .qr { width: 118px; height: 118px; border-radius: var(--r-sm); border: 1px solid var(--line); background: repeating-conic-gradient(var(--navy) 0% 25%, #fff 0% 50%) 0 0 / 13px 13px; }
#screenRoot .chev { font-size: 13px; opacity: 0.85; }
#screenRoot .app-main { padding: 26px clamp(18px, 3vw, 40px) 44px; }

/* ---- live pulse marker ---- */
.pulse { width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 217, 138, 0.9); animation: pulse 1.6s ease-out 2; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 217, 138, 0.6); }
  100% { box-shadow: 0 0 0 34px rgba(255, 217, 138, 0); }
}

/* ---- map region modes (top bar) ---- */
.modes {
  display: flex; gap: 5px; background: rgba(12, 19, 48, 0.72); padding: 5px; border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(8px);
}
.modes button {
  border: 0; background: transparent; color: #c9d2e8; font-family: var(--font-body); font-size: 13px;
  font-weight: 600; padding: 7px 15px; border-radius: var(--r-pill); cursor: pointer; white-space: nowrap;
}
.modes button:hover { color: #fff; }
.modes button.on { background: var(--gold); color: #14213e; font-weight: 700; }

/* ---- global light counter ---- */
.count-badge {
  position: fixed; bottom: 20px; left: 20px; z-index: 10; padding: 9px 18px; border-radius: var(--r-pill);
  background: rgba(12, 19, 48, 0.72); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(8px);
  color: #e7ecf7; font-size: 14px;
}
.count-badge b { color: var(--gold-bright); font-family: var(--font-head); font-weight: 700; }

.map-reset {
  position: fixed; bottom: 62px; left: 20px; z-index: 10; width: 40px; height: 40px; cursor: pointer;
  border: 1px solid rgba(198, 155, 69, 0.5); background: rgba(23, 40, 75, 0.85); color: #f6dd9a;
  border-radius: 50%; font-size: 18px; backdrop-filter: blur(6px); line-height: 1;
}
.map-reset:hover { border-color: var(--gold); color: #fff6df; }

/* ---- language dropdown ---- */
.lang-drop { position: relative; }
.lang-btn {
  display: flex; align-items: center; gap: 8px; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(23, 40, 75, 0.55); color: #f6dd9a; border-radius: var(--r-pill); padding: 7px 12px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; backdrop-filter: blur(6px);
}
.lang-btn:hover { border-color: var(--gold-line); }
.lang-caret { opacity: 0.7; font-size: 11px; }
.lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px; z-index: 40; padding: 5px;
  background: rgba(15, 24, 48, 0.98); border: 1px solid rgba(198, 155, 69, 0.4); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
}
.lang-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; cursor: pointer; border: 0;
  background: transparent; color: #e7ecf7; font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  padding: 8px 12px; border-radius: 8px; white-space: nowrap;
}
.lang-menu button:hover { background: rgba(255, 255, 255, 0.07); }
.flag {
  display: inline-flex; width: 23px; height: 15px; border-radius: 3px; overflow: hidden; flex: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.flag svg { display: block; }

/* ---- address search ---- */
.addr-search {
  position: fixed; top: 66px; left: 50%; transform: translateX(-50%); z-index: 22; display: flex; gap: 6px;
  background: rgba(12, 19, 48, 0.86); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--r-pill);
  padding: 5px 6px 5px 14px; backdrop-filter: blur(8px);
}
.addr-search[hidden] { display: none; }
.addr-search input {
  background: transparent; border: 0; color: #eef1fb; font-family: var(--font-body); font-size: 14px;
  width: min(46vw, 320px); outline: none;
}
.addr-search input::placeholder { color: #8a93b0; }
.addr-search button {
  border: 0; background: var(--gold); color: #14213e; font-family: var(--font-body); font-weight: 700;
  border-radius: var(--r-pill); padding: 7px 16px; cursor: pointer;
}
.addr-pin { width: 16px; height: 16px; border-radius: 50%; background: #fff6df; box-shadow: 0 0 16px 5px rgba(255, 207, 107, 0.8); border: 2px solid var(--gold); }

/* ---- dark info-window (matches the star-map) ---- */
.maplibregl-popup.mdj-popup .maplibregl-popup-content {
  background: linear-gradient(180deg, #14203f, #0e1830); border: 1px solid rgba(198, 155, 69, 0.3);
  border-radius: var(--r-md); color: #e7ecf7; padding: 14px 16px; min-width: 210px;
  box-shadow: 0 18px 50px rgba(4, 6, 15, 0.6); font-family: var(--font-body);
}
.maplibregl-popup.mdj-popup .maplibregl-popup-tip { border-top-color: #0e1830 !important; border-bottom-color: #0e1830 !important; }
.maplibregl-popup.mdj-popup .maplibregl-popup-close-button { color: #8a93b0; font-size: 18px; }
.mdj-popup .pop-eyebrow { color: var(--gold); font-size: 11px; letter-spacing: 2px; margin-bottom: 6px; opacity: 0.9; }
.mdj-popup .pop-name { color: var(--gold-bright); font-family: var(--font-head); font-size: 16px; }
.mdj-popup .pop-loc { color: #8a93b0; font-size: 12px; margin-bottom: 8px; }
.mdj-popup .pop-msg { font-size: 14px; line-height: 1.55; color: #e7ecf7; }
.mdj-popup .pop-date { color: #6b7488; font-size: 11px; margin-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 8px; }

/* =========================================================================
   View 2 — Radial Light Map (light constellation). Dark, luxurious, gold —
   an integral part of the existing star-map, never a foreign screen. Shares
   the same data + selection as the geographic map (see radial.js / map.js).
   ========================================================================= */
#radial.radial {
  position: fixed; inset: 0; z-index: 2;
  /* deep charcoal/near-black, cool and neutral — no brown wash (owner review 2026-07-19) */
  background: radial-gradient(120% 100% at 50% 50%, #070a13 0%, #04060b 55%, #020307 100%);
}
#radial[hidden] { display: none; }
.radial-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.radial-canvas:active { cursor: grabbing; }
/* keyboard focus on the canvas itself (points get a drawn focus ring) */
.radial-canvas:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }

/* screen-reader live region for keyboard navigation announcements */
.sr-live {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Hide geographic-only chrome while the radial view is active. */
body.radial-mode #map,
body.radial-mode .map-vignette,
body.radial-mode .map-reset { visibility: hidden; }
body.radial-mode #views,
body.radial-mode .addr-search { display: none !important; }
/* The radial view hides with the map when a full screen (account/admin) is open. */
body.viewing-screen #radial { display: none !important; }

/* View toggle button (top bar) — replaces the old Diamond ID CTA. */
.view-toggle { gap: 7px; }
.view-toggle .vt-ic { font-size: 15px; line-height: 1; }
.view-toggle.on { background: rgba(23, 40, 75, 0.62); border-color: var(--gold-line); color: #f6dd9a; box-shadow: none; }
.view-toggle.on:hover { color: #fff6df; filter: none; }

/* Zoom + recenter — bottom-right, mirroring the geographic nav corner. */
.radial-zoom { position: absolute; right: 20px; bottom: 20px; z-index: 12; display: flex; flex-direction: column; gap: 6px; }
.radial-zoom .rz-btn {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 18px; line-height: 1;
  border: 1px solid rgba(198, 155, 69, 0.5); background: rgba(23, 40, 75, 0.85); color: #f6dd9a; backdrop-filter: blur(6px);
}
.radial-zoom .rz-btn:hover { border-color: var(--gold); color: #fff6df; }

/* Legend — bottom-left, above the light counter. Never clipped: capped height + inner
   scroll, safe margins on every edge. On small screens it collapses into an info button. */
.radial-legend {
  /* physically anchored bottom-LEFT, directly above the lights counter (.count-badge,
     left:20px/bottom:20px) — does NOT flip in RTL, so it never lands on the zoom controls */
  position: absolute; left: 20px; bottom: 72px; z-index: 11;
  width: min(300px, calc(100vw - 40px)); max-height: min(34vh, calc(100vh - 160px)); overflow-y: auto;
  padding: 13px 15px; border-radius: var(--r-md); background: rgba(8, 12, 26, 0.85);
  border: 1px solid rgba(198, 155, 69, 0.28); backdrop-filter: blur(8px); box-shadow: 0 14px 40px rgba(2, 4, 10, 0.55);
}
.radial-legend .rl-head { display: flex; align-items: center; gap: 8px; color: var(--gold-bright); font-family: var(--font-head); font-size: 14.5px; }
.radial-legend .rl-star { color: var(--gold); }
.radial-legend .rl-body { margin: 7px 0 0; color: #aab3c9; font-size: 12px; line-height: 1.5; }
/* legend info-toggle — hidden on desktop, replaces the always-open legend on small screens */
.rl-toggle {
  display: none; position: absolute; left: 14px; bottom: 118px; z-index: 12;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 15px;
  border: 1px solid rgba(198, 155, 69, 0.5); background: rgba(10, 15, 30, 0.85); color: #f6dd9a; backdrop-filter: blur(6px);
}
.rl-toggle:hover { border-color: var(--gold); color: #fff6df; }

/* Info card (right side, below the top bar) — no Diamond ID, per spec. */
.radial-card {
  position: absolute; top: 84px; inset-inline-end: 20px; z-index: 13; width: min(340px, calc(100vw - 32px));
  max-height: calc(100vh - 120px); overflow-y: auto; /* long blessings scroll, never clip (QA F19) */
  padding: 20px; color: #e7ecf7; background: linear-gradient(180deg, #16223f, #0d1730);
  border: 1px solid rgba(198, 155, 69, 0.34); border-top: 3px solid var(--gold);
  border-radius: var(--r-lg); box-shadow: 0 26px 70px rgba(4, 6, 15, 0.7);
}
.radial-card[hidden] { display: none; }
.radial-card .rc-close {
  position: absolute; top: 12px; inset-inline-end: 12px; width: 30px; height: 30px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, 0.06); color: #9aa4bd; font-size: 18px; cursor: pointer;
}
.radial-card .rc-close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.radial-card .rc-head { display: flex; align-items: center; gap: 12px; padding-inline-end: 26px; }
.radial-card .rc-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  color: var(--gold-bright); background: rgba(198, 155, 69, 0.12); border: 1px solid rgba(198, 155, 69, 0.4);
}
.radial-card .rc-name { font-family: var(--font-head); font-size: 19px; color: var(--gold-bright); line-height: 1.15; }
.radial-card .rc-loc { display: flex; align-items: center; gap: 5px; color: #9aa4bd; font-size: 12.5px; margin-top: 3px; }
.radial-card .rc-blessing-lbl { margin-top: 16px; color: var(--gold); font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; }
.radial-card .rc-blessing { margin-top: 6px; font-size: 17px; line-height: 1.6; color: #f2f5fb; font-family: var(--font-head); }
.radial-card .rc-rows { margin-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.09); }
.radial-card .rc-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.radial-card .rc-row:last-child { border-bottom: 0; }
.radial-card .rc-ic {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(198, 155, 69, 0.1); border: 1px solid rgba(198, 155, 69, 0.3); color: var(--gold-bright); font-size: 15px;
}
.radial-card .rc-k { color: var(--gold); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; }
.radial-card .rc-v { color: #f2f5fb; font-size: 17px; font-weight: 700; margin-top: 1px; }
.radial-card .rc-v-sm { font-size: 14px; font-weight: 600; }
.radial-card .rc-note { margin-top: 12px; color: #8a93b0; font-size: 11.5px; line-height: 1.5; }
.radial-card .rc-desc { margin-top: 14px; color: #c6cfe4; font-size: 13.5px; line-height: 1.65; border-top: 1px solid rgba(255, 255, 255, 0.09); padding-top: 12px; }
.radial-card .rc-core-avatar { font-size: 20px; background: rgba(198, 155, 69, 0.2); }

/* bearing/distance rows inside the geographic popup — same computed values as View 2 */
.mdj-popup .pop-metrics { margin-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 8px; display: grid; gap: 4px; }
.mdj-popup .pop-metrics > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.mdj-popup .pop-metrics .pm-k { color: var(--gold); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; }
.mdj-popup .pop-metrics .pm-v { color: #f2f5fb; font-size: 13px; font-weight: 700; unicode-bidi: isolate; }
.mdj-popup .pop-note { color: #6b7488; font-size: 10.5px; margin-top: 6px; }
.mdj-popup .pop-core-desc { margin-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 8px; }

@media (max-width: 700px) {
  .radial-card { top: auto; bottom: 0; inset-inline: 0; width: 100%; max-height: 62vh; overflow: auto; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  /* legend becomes an info button that opens the panel (never clipped, never covering the core) */
  .radial-legend { display: none; }
  .radial-legend.open { display: block; bottom: 164px; max-height: 42vh; }
  .rl-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .radial-zoom { flex-direction: row; right: 12px; bottom: auto; top: 66px; }
}

/* =========================================================================
   Admin commerce screens — demo parity (dashboard · distributors ·
   purchases · attribution). Scoped to #screenRoot; never touches the map topbar.
   ========================================================================= */
#screenRoot .ad-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
#screenRoot .ad-user { display: flex; align-items: center; gap: 10px; }
#screenRoot .avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--navy); color: #fff; font-weight: 800; font-size: 14px; }
#screenRoot .avatar.gold { background: linear-gradient(135deg, var(--gold), var(--gold-bright)); color: #2a2205; }
#screenRoot .icabtn { position: relative; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--line); color: var(--ink-soft); cursor: pointer; }
#screenRoot .badge-dot { position: absolute; top: -3px; inset-inline-end: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--err); color: #fff; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
#screenRoot .badge-dot.gold { background: var(--gold); color: #2a2205; }

/* KPI card — demo variant (top row + delta footer) */
#screenRoot .kpi .top { display: flex; align-items: center; justify-content: space-between; }
#screenRoot .kpi .ic { width: 32px; height: 32px; border-radius: 50%; background: #f7efdb; display: inline-flex; align-items: center; justify-content: center; color: var(--gold-deep); font-size: 15px; }
#screenRoot .kpi .val .cur { font-size: 18px; color: var(--gold-deep); margin-inline-end: 2px; }
#screenRoot .kpi .foot { font-size: 12px; color: var(--ink-mut); margin-top: 8px; }
#screenRoot .delta { font-weight: 800; font-size: 12px; padding: 2px 8px; border-radius: var(--r-pill); }
#screenRoot .delta.up { color: #2f9e6f; background: #e7f6ee; }
#screenRoot .delta.down { color: var(--err); background: #fbe9ec; }
#screenRoot .kpi.clickable { cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
#screenRoot .kpi.clickable:hover { border-color: var(--gold); transform: translateY(-1px); }
#screenRoot .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
@media (max-width: 1100px) { #screenRoot .grid-2 { grid-template-columns: 1fr; } }

/* toolbar / filters */
#screenRoot .toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0 8px; }
#screenRoot .toolbar .grow { flex: 1; min-width: 200px; }
#screenRoot .search { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line-cool); border-radius: var(--r-md); padding: 8px 14px; color: var(--ink-mut); }
#screenRoot .search input { border: 0; background: transparent; outline: none; flex: 1; font-family: var(--font-body); font-size: 14px; color: var(--ink); }
#screenRoot .select { display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line-cool); border-radius: var(--r-md); padding: 9px 14px; font-size: 13px; color: var(--ink-soft); font-weight: 600; cursor: pointer; }
#screenRoot .select .cx { color: var(--gold-deep); font-size: 11px; }
#screenRoot select.select { appearance: none; }

/* table extras */
#screenRoot .tbl .num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--navy); }
#screenRoot .tbl .muted { color: var(--ink-mut); font-weight: 600; }
#screenRoot .pill.info { background: #e8effb; color: #2f6bd8; }
#screenRoot .actions { display: flex; gap: 6px; }
#screenRoot .iconbtn { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); cursor: pointer; font-size: 13px; }
#screenRoot .iconbtn:hover { border-color: var(--gold); color: var(--gold-deep); }

/* section headers inside a table-card */
#screenRoot .sec-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
#screenRoot .sec-head h3 { font-size: 16px; }
#screenRoot .sec-foot { padding: 12px 16px; border-top: 1px solid var(--line-2); }
#screenRoot .sec-foot a { color: var(--gold-deep); font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; }

/* pager */
#screenRoot .pager { display: flex; gap: 4px; align-items: center; }
#screenRoot .pg { min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); font-size: 13px; font-weight: 700; cursor: pointer; }
#screenRoot .pg.active { background: var(--navy); color: #fff; border-color: var(--navy); }
#screenRoot .pager-info { color: var(--ink-mut); font-size: 13px; }

/* attribution priority flow */
#screenRoot .attr-flow { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin: 12px 0 6px; }
#screenRoot .attr-step { text-align: center; flex: 1; position: relative; }
#screenRoot .attr-step .node { width: 54px; height: 54px; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--gold-line); background: var(--card); color: var(--navy); font-size: 20px; position: relative; }
#screenRoot .attr-step .num { position: absolute; top: -8px; inset-inline-end: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: #3a2c05; font-weight: 800; font-size: 11px; display: flex; align-items: center; justify-content: center; }
#screenRoot .attr-step h4 { font-size: 14px; margin-top: 10px; color: var(--navy); }
#screenRoot .attr-step p { font-size: 11.5px; color: var(--ink-mut); margin: 4px 6px 0; }
#screenRoot .mini-map { position: relative; border-radius: var(--r-md); background: linear-gradient(180deg, #eef1f7, #e3e8f2); min-height: 180px; overflow: hidden; }

/* ---- admin modal (replaces native prompt/alert) ---- */
.modal-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(4, 6, 14, 0.55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { width: min(460px, 100%); background: var(--card); border-radius: var(--r-lg); border-top: 3px solid var(--gold); box-shadow: var(--shadow-card); padding: 24px 26px; max-height: 90vh; overflow: auto; }
.modal h3 { font-size: 20px; margin-bottom: 6px; }
.modal .hint { margin-bottom: 8px; }
.mf-row { display: block; margin-top: 12px; }
.mf-row > span { display: block; font-size: 13px; font-weight: 700; color: var(--ink-soft); margin-bottom: 5px; }
.mf-input { width: 100%; padding: 11px 14px; font-size: 15px; font-family: var(--font-body); background: var(--wash); border: 1px solid var(--line-cool); border-radius: var(--r-md); color: var(--ink); outline: none; }
.mf-input:focus { border-color: var(--gold); background: #fff; box-shadow: 0 0 0 3px var(--gold-soft); }
select.mf-input { appearance: none; cursor: pointer; }
.mf-err { color: var(--err); font-size: 13px; min-height: 16px; margin-top: 8px; }
.mf-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.btn-danger { background: linear-gradient(180deg, #d1495b, #b23a4a); border: 1px solid #a33342; color: #fff; }
.btn-danger:hover { color: #fff; filter: brightness(1.05); border-color: #a33342; }

/* ---- code lookup card ---- */
#screenRoot .lookup { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
#screenRoot .lookup input { flex: 1; min-width: 240px; }
#screenRoot .lookup-result { margin-top: 16px; }
#screenRoot .kv { display: flex; flex-wrap: wrap; gap: 8px 28px; }
#screenRoot .kv > div { min-width: 140px; }
#screenRoot .kv .k { font-size: 12px; color: var(--ink-mut); font-weight: 700; }
#screenRoot .kv .v { font-size: 15px; color: var(--navy); font-weight: 700; }
#screenRoot .count-chips { display: flex; gap: 6px; flex-wrap: wrap; }
#screenRoot .cchip { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-pill); background: var(--wash); color: var(--ink-soft); border: 1px solid var(--line); }

/* ---- settings ---- */
#screenRoot .set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
#screenRoot .set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 2px; border-bottom: 1px solid var(--line-2); }
#screenRoot .set-row:last-child { border-bottom: 0; }
#screenRoot .set-row .t b { color: var(--navy); font-size: 14.5px; }
#screenRoot .set-row .t p { margin: 2px 0 0; font-size: 12px; color: var(--ink-mut); }
#screenRoot .toggle { width: 46px; height: 26px; border-radius: 999px; border: 0; background: var(--line); position: relative; cursor: pointer; flex: none; transition: background 0.15s; }
#screenRoot .toggle::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: inset-inline-start 0.15s; }
#screenRoot .toggle.on { background: var(--gold); }
#screenRoot .toggle.on::after { inset-inline-start: 23px; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media (max-width: 520px) {
  .brand-name { font-size: 13px; letter-spacing: 3px; }
  .btn { padding: 9px 14px; font-size: 13px; }
  .tagline { display: none; }
}