/* =====================================================================
   XORA COSMIC GOLD THEME (theme layer, loaded after the inline UI tokens)
   Matches "XORA: THE EMPIRE OS UNLEASHED": deep space navy, warm gold light,
   glass panels with gold hairlines, holographic slab edges, purple/blue accents.
   Rules: effects live BEHIND content; body text stays solid and AA-contrast;
   no images, no JS, one optional slow twinkle (off for reduced motion).
   Supersedes the copper/patina tint; keeps a faint grit/metal texture on surfaces.
   ===================================================================== */
:root {
  /* Space */
  --bg: #090817;
  --card: #121130;
  --surface: #1A1840;
  --surface-2: #23204D;
  --glass: rgba(20,18,50,0.78);
  --glass-strong: rgba(13,12,34,0.9);
  /* Gold light */
  --gold: #F2B84B;
  --gold-l: #FFD98A;
  --gold-d: #B9781A;
  --gold-grad: linear-gradient(135deg, #B9781A 0%, #F2B84B 42%, #FFE3A3 72%, #E9A83A 100%);
  --metal-grad: linear-gradient(180deg, #FFF4D2 0%, #FFD98A 38%, #F2B84B 62%, #C8891F 100%);
  /* Accents from the poster */
  --purple: #B9A4FF;
  --blue: #8FB0FF;
  --teal: #7FD8EA;
  --holo: linear-gradient(125deg, rgba(255,217,138,0.75), rgba(185,164,255,0.45) 34%, rgba(127,216,234,0.4) 58%, rgba(242,184,75,0.7));
  /* Text: all >= 4.5:1 on --bg, --card, --surface and --surface-2 (checked) */
  --text: #F4EEE3;
  --muted: #C8C0DA;
  --dim: #ADA5C4;
  --border: rgba(242,184,75,0.20);
  --border-s: rgba(242,184,75,0.45);
  --slab-edge: rgba(255,236,200,0.08);
  --stamp-ink: #FFD98A;
  --xred: #FF8A78;
  --ok: #8EDB9C;
  --warn: #FFC266;
  --info: #8FD3F0;
  --focus-ring: 0 0 0 3px rgba(255,217,138,0.55);
  --gold-glow: 0 0 0 1px rgba(242,184,75,0.14), 0 0 36px rgba(242,184,75,0.16);
  --shadow-1: 0 1px 2px rgba(0,0,0,0.5), 0 8px 24px -10px rgba(2,1,12,0.8);
  --shadow-3: 0 18px 60px rgba(2,1,12,0.75);
  --stars-sm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Ccircle cx='67' cy='152' r='0.6' fill='%23E9E4FF' fill-opacity='0.63'/%3E%3Ccircle cx='163' cy='170' r='0.8' fill='%23fff' fill-opacity='0.51'/%3E%3Ccircle cx='66' cy='279' r='0.6' fill='%23E9E4FF' fill-opacity='0.64'/%3E%3Ccircle cx='179' cy='42' r='0.7' fill='%23E9E4FF' fill-opacity='0.58'/%3E%3Ccircle cx='4' cy='218' r='0.4' fill='%23E9E4FF' fill-opacity='0.38'/%3E%3Ccircle cx='218' cy='231' r='0.5' fill='%23E9E4FF' fill-opacity='0.78'/%3E%3Ccircle cx='246' cy='200' r='0.9' fill='%23fff' fill-opacity='0.79'/%3E%3Ccircle cx='162' cy='270' r='0.4' fill='%23fff' fill-opacity='0.41'/%3E%3Ccircle cx='38' cy='61' r='0.9' fill='%23fff' fill-opacity='0.82'/%3E%3Ccircle cx='239' cy='118' r='0.8' fill='%23E9E4FF' fill-opacity='0.56'/%3E%3Ccircle cx='164' cy='164' r='0.8' fill='%23E9E4FF' fill-opacity='0.90'/%3E%3Ccircle cx='8' cy='78' r='0.7' fill='%23E9E4FF' fill-opacity='0.45'/%3E%3Ccircle cx='241' cy='270' r='0.8' fill='%23E9E4FF' fill-opacity='0.41'/%3E%3Ccircle cx='184' cy='177' r='0.9' fill='%23fff' fill-opacity='0.52'/%3E%3Ccircle cx='18' cy='239' r='0.9' fill='%23fff' fill-opacity='0.56'/%3E%3Ccircle cx='19' cy='251' r='0.4' fill='%23fff' fill-opacity='0.81'/%3E%3Ccircle cx='244' cy='12' r='0.7' fill='%23fff' fill-opacity='0.58'/%3E%3Ccircle cx='164' cy='154' r='0.9' fill='%23fff' fill-opacity='0.65'/%3E%3Ccircle cx='280' cy='87' r='0.4' fill='%23E9E4FF' fill-opacity='0.67'/%3E%3Ccircle cx='266' cy='272' r='0.5' fill='%23fff' fill-opacity='0.44'/%3E%3Ccircle cx='12' cy='243' r='0.5' fill='%23fff' fill-opacity='0.89'/%3E%3Ccircle cx='106' cy='129' r='0.6' fill='%23E9E4FF' fill-opacity='0.87'/%3E%3Ccircle cx='191' cy='29' r='0.9' fill='%23E9E4FF' fill-opacity='0.51'/%3E%3Ccircle cx='178' cy='200' r='0.9' fill='%23fff' fill-opacity='0.94'/%3E%3Ccircle cx='146' cy='154' r='0.4' fill='%23fff' fill-opacity='0.94'/%3E%3Ccircle cx='88' cy='105' r='0.7' fill='%23fff' fill-opacity='0.39'/%3E%3Ccircle cx='176' cy='131' r='0.7' fill='%23fff' fill-opacity='0.72'/%3E%3Ccircle cx='78' cy='137' r='0.7' fill='%23E9E4FF' fill-opacity='0.36'/%3E%3Ccircle cx='103' cy='176' r='0.5' fill='%23E9E4FF' fill-opacity='0.54'/%3E%3Ccircle cx='102' cy='88' r='0.6' fill='%23E9E4FF' fill-opacity='0.51'/%3E%3Ccircle cx='220' cy='29' r='0.8' fill='%23E9E4FF' fill-opacity='0.76'/%3E%3Ccircle cx='37' cy='140' r='0.7' fill='%23fff' fill-opacity='0.49'/%3E%3Ccircle cx='52' cy='122' r='0.7' fill='%23fff' fill-opacity='0.71'/%3E%3Ccircle cx='266' cy='189' r='0.5' fill='%23fff' fill-opacity='0.40'/%3E%3Ccircle cx='208' cy='61' r='0.7' fill='%23fff' fill-opacity='0.49'/%3E%3Ccircle cx='34' cy='148' r='0.5' fill='%23E9E4FF' fill-opacity='0.46'/%3E%3Ccircle cx='78' cy='226' r='0.7' fill='%23E9E4FF' fill-opacity='0.56'/%3E%3Ccircle cx='36' cy='82' r='0.8' fill='%23fff' fill-opacity='0.63'/%3E%3Ccircle cx='178' cy='81' r='0.7' fill='%23fff' fill-opacity='0.90'/%3E%3Ccircle cx='44' cy='1' r='0.9' fill='%23E9E4FF' fill-opacity='0.94'/%3E%3Ccircle cx='122' cy='266' r='0.9' fill='%23fff' fill-opacity='0.37'/%3E%3Ccircle cx='128' cy='211' r='0.8' fill='%23fff' fill-opacity='0.68'/%3E%3Ccircle cx='249' cy='241' r='0.8' fill='%23fff' fill-opacity='0.42'/%3E%3Ccircle cx='68' cy='10' r='0.8' fill='%23E9E4FF' fill-opacity='0.90'/%3E%3Ccircle cx='251' cy='252' r='0.7' fill='%23fff' fill-opacity='0.64'/%3E%3Ccircle cx='34' cy='141' r='0.5' fill='%23fff' fill-opacity='0.66'/%3E%3C/svg%3E");
  --stars-lg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Ccircle cx='259' cy='209' r='0.9' fill='%23fff' fill-opacity='0.35'/%3E%3Ccircle cx='282' cy='503' r='0.9' fill='%23fff' fill-opacity='0.91'/%3E%3Ccircle cx='392' cy='408' r='0.9' fill='%23CFD8FF' fill-opacity='0.92'/%3E%3Ccircle cx='237' cy='94' r='0.8' fill='%23FFE6B0' fill-opacity='0.65'/%3E%3Ccircle cx='517' cy='331' r='1.4' fill='%23CFD8FF' fill-opacity='0.82'/%3E%3Ccircle cx='497' cy='515' r='1.0' fill='%23FFE6B0' fill-opacity='0.79'/%3E%3Ccircle cx='236' cy='49' r='1.0' fill='%23FFE6B0' fill-opacity='0.59'/%3E%3Ccircle cx='191' cy='24' r='1.4' fill='%23FFE6B0' fill-opacity='0.88'/%3E%3Ccircle cx='31' cy='212' r='1.2' fill='%23FFE6B0' fill-opacity='0.49'/%3E%3Ccircle cx='412' cy='476' r='1.6' fill='%23FFE6B0' fill-opacity='0.42'/%3E%3Ccircle cx='324' cy='501' r='1.0' fill='%23FFE6B0' fill-opacity='0.89'/%3E%3Ccircle cx='75' cy='514' r='1.2' fill='%23fff' fill-opacity='0.65'/%3E%3Ccircle cx='516' cy='235' r='1.1' fill='%23fff' fill-opacity='0.81'/%3E%3Ccircle cx='392' cy='81' r='1.6' fill='%23fff' fill-opacity='0.92'/%3E%3Ccircle cx='30' cy='311' r='1.3' fill='%23FFE6B0' fill-opacity='0.80'/%3E%3Ccircle cx='413' cy='322' r='0.8' fill='%23fff' fill-opacity='0.59'/%3E%3Ccircle cx='507' cy='91' r='1.2' fill='%23fff' fill-opacity='0.57'/%3E%3Ccircle cx='378' cy='331' r='1.4' fill='%23FFE6B0' fill-opacity='0.87'/%3E%3Ccircle cx='62' cy='494' r='1.1' fill='%23FFE6B0' fill-opacity='0.59'/%3E%3Ccircle cx='552' cy='322' r='0.8' fill='%23fff' fill-opacity='0.55'/%3E%3Ccircle cx='243' cy='120' r='1.2' fill='%23CFD8FF' fill-opacity='0.84'/%3E%3Ccircle cx='172' cy='160' r='1.2' fill='%23FFE6B0' fill-opacity='0.37'/%3E%3C/svg%3E");
  color-scheme: dark;
}

/* ---------- Backdrop: nebula + gold beam + stars, one fixed layer behind everything ---------- */
html { background: var(--bg); }
body { background: transparent !important; }  /* html paints the canvas; the fixed layer below sits on top of it */
body::before, #auth-screen::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--bg);
  background-image:
    radial-gradient(28% 60% at 50% -8%, rgba(255,214,130,0.20), rgba(242,184,75,0.06) 55%, transparent 75%),
    linear-gradient(90deg, transparent 47.6%, rgba(255,226,160,0.07) 49.4%, rgba(255,236,190,0.11) 50%, rgba(255,226,160,0.07) 50.6%, transparent 52.4%),
    radial-gradient(55% 45% at 6% 18%, rgba(110,80,220,0.24), transparent 70%),
    radial-gradient(50% 50% at 98% 30%, rgba(60,110,230,0.20), transparent 70%),
    radial-gradient(70% 45% at 50% 108%, rgba(242,160,60,0.14), transparent 70%),
    var(--stars-lg), var(--stars-sm),
    linear-gradient(180deg, #0B0A1F 0%, #090817 55%, #07061A 100%);
  background-size: auto, auto, auto, auto, auto, 560px 560px, 280px 280px, auto;
}
/* Moving starfield (founder, Phase 3): one fixed CSS layer drifting slowly behind the glass panels on every screen.
   GPU-cheap: transform + opacity only, stepped to ~30fps (steps), no JS, no canvas. Browsers stop painting it in hidden
   tabs. prefers-reduced-motion: static (rule below). Nexus palette: white + electric-blue twinkles on navy. */
:root { --stars-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Ccircle cx='48' cy='70' r='1.1' fill='%2366B2FF' fill-opacity='0.85'/%3E%3Ccircle cx='310' cy='36' r='0.8' fill='%23fff' fill-opacity='0.8'/%3E%3Ccircle cx='470' cy='150' r='1.3' fill='%233D9BFF' fill-opacity='0.8'/%3E%3Ccircle cx='130' cy='260' r='0.9' fill='%23fff' fill-opacity='0.7'/%3E%3Ccircle cx='400' cy='300' r='1.2' fill='%2399CCFF' fill-opacity='0.85'/%3E%3Ccircle cx='220' cy='420' r='1.0' fill='%233D9BFF' fill-opacity='0.75'/%3E%3Ccircle cx='520' cy='470' r='0.8' fill='%23fff' fill-opacity='0.7'/%3E%3Ccircle cx='80' cy='520' r='1.2' fill='%2366B2FF' fill-opacity='0.8'/%3E%3Ccircle cx='350' cy='540' r='0.7' fill='%23fff' fill-opacity='0.6'/%3E%3Ccircle cx='180' cy='140' r='0.7' fill='%23CFE6FF' fill-opacity='0.8'/%3E%3C/svg%3E"); }
html::after {
  content: ''; position: fixed; left: 0; right: 0; top: -560px; height: calc(100% + 560px); z-index: -1; pointer-events: none;
  background-image: var(--stars-blue), var(--stars-lg); background-size: 560px 560px, 560px 560px; background-position: 0 0, 210px 140px;
  opacity: 0.4; will-change: transform, opacity; transform: translate3d(0,0,0);
  animation: xora-drift 240s steps(7200) infinite, xora-twinkle 9s ease-in-out infinite alternate;
}
@keyframes xora-drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,560px,0); } }
@keyframes xora-twinkle { from { opacity: 0.22; } to { opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { html::after { animation: none !important; transform: none; opacity: 0.4; } }
/* film grain stays but quieter (it was 0.14) */
body::after { opacity: 0.07 !important; }
#main-content-a1b2, .main-content { background: transparent; }

/* ---------- Headings: metallic gold, clean edges ---------- */
#main-app-r5s3 .screen > h1, #main-app-r5s3 .screen h1.font-display, #main-app-r5s3 .screen h1,
#header-title-c3d4, #main-app-r5s3 h1.gold-gradient-text, #onboard-tour-title {
  background-image: var(--metal-grad) !important; -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: var(--gold-l);
  -webkit-mask-image: none !important; mask-image: none !important;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.55)) drop-shadow(0 0 18px rgba(242,184,75,0.18));
}
#main-app-r5s3 .gold-gradient-text { background-image: var(--metal-grad); }
#main-app-r5s3 h2:not(#header-title-c3d4) { color: var(--gold-l); }
#main-app-r5s3 :is(h3, h4) { color: var(--text); }

/* ---------- Glass panels with a gold hairline and holographic slab edge ---------- */
.card-base {
  background: linear-gradient(180deg, rgba(255,236,200,0.045), rgba(255,236,200,0) 42%), linear-gradient(160deg, #16153A 0%, #111030 60%, #0F0E2A 100%) !important;
  border: 1px solid rgba(242,184,75,0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,236,200,0.07), 0 1px 0 rgba(0,0,0,0.5), 0 14px 32px -16px rgba(2,1,12,0.9);
}
.card-base::before { opacity: 0.16; mix-blend-mode: normal; }   /* faint grit/metal texture */
.card-base::after {
  inset: -1px; padding: 1px; border: 0; border-radius: inherit; opacity: 0.38;
  background: var(--holo);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity .25s var(--ease);
}
.card-base:hover { border-color: rgba(242,184,75,0.3) !important; box-shadow: inset 0 1px 0 rgba(255,236,200,0.09), 0 1px 0 rgba(0,0,0,0.5), 0 18px 36px -16px rgba(2,1,12,0.9), 0 0 28px -8px rgba(242,184,75,0.35); }
.card-base:hover::after { opacity: 0.85; }

/* ---------- Buttons ---------- */
.btn-gold {
  background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0) 48%), var(--gold-grad) !important;
  color: #1B1204 !important; text-shadow: 0 1px 0 rgba(255,240,205,0.45);
  border: 1px solid rgba(120,70,10,0.65) !important;
  box-shadow: inset 0 1px 0 rgba(255,246,220,0.7), inset 0 -2px 0 rgba(120,70,10,0.35), 0 4px 18px -6px rgba(242,184,75,0.55);
}
.btn-gold:hover { filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255,246,220,0.7), inset 0 -2px 0 rgba(120,70,10,0.35), 0 6px 26px -4px rgba(242,184,75,0.7); }
.btn-ghost {
  background: rgba(26,24,64,0.72) !important; color: var(--text);
  border: 1px solid rgba(242,184,75,0.38) !important;
  box-shadow: inset 0 1px 0 rgba(255,236,200,0.06), 0 2px 10px -4px rgba(0,0,0,0.6);
}
.btn-ghost:hover { background: rgba(35,32,80,0.85) !important; border-color: rgba(255,217,138,0.65) !important; }

/* ---------- Inputs ---------- */
#main-app-r5s3 :is(input[type=text], input[type=number], input[type=email], input[type=password], input[type=url], input[type=search], input:not([type]), select, textarea) {
  background-color: rgba(7,6,22,0.6); box-shadow: inset 0 2px 6px rgba(0,0,0,0.45);
}
#main-app-r5s3 select { background-color: var(--surface); }
select option { background: var(--surface); color: var(--text); }
.slider-gold { background: rgba(242,184,75,0.2); }
.progress-bar-bg, .axis-track { background: rgba(4,3,14,0.6); }
.progress-bar-fill, .axis-fill { background: var(--gold-grad); box-shadow: 0 0 10px rgba(242,184,75,0.45); }

/* ---------- Chips ---------- */
.coll-filter-btn[aria-pressed="true"], .coll-grade-btn[aria-pressed="true"], .coll-source-btn[aria-pressed="true"], .role-chip[aria-pressed="true"] { box-shadow: inset 0 1px 0 rgba(255,246,220,0.5), 0 0 14px -4px rgba(242,184,75,0.6); }

/* ---------- Header: navy glass + gold light rule ---------- */
#main-content-a1b2 > header { background: rgba(9,8,23,0.72) !important; backdrop-filter: saturate(150%) blur(16px); -webkit-backdrop-filter: saturate(150%) blur(16px); }
#main-content-a1b2 > header::after { height: 1px; background: linear-gradient(90deg, transparent, rgba(185,164,255,0.35) 18%, rgba(255,217,138,0.85) 50%, rgba(143,176,255,0.35) 82%, transparent); -webkit-mask-image: none; mask-image: none; box-shadow: 0 0 12px rgba(242,184,75,0.4); }
#xp-display-e5f6 { white-space: nowrap; background: rgba(242,184,75,0.12) !important; color: var(--gold-l) !important; border: 1px solid rgba(242,184,75,0.28); }

/* ---------- Sidebar ---------- */
#sidebar-t8u4 {
  background-color: rgba(8,7,22,0.88) !important;
  background-image: radial-gradient(120% 40% at 0% 0%, rgba(110,80,220,0.18), transparent 70%), radial-gradient(90% 30% at 50% 100%, rgba(242,184,75,0.08), transparent 70%), linear-gradient(180deg, rgba(18,16,46,0.9), rgba(8,7,22,0.95)) !important;
  border-right: 1px solid rgba(242,184,75,0.14) !important; box-shadow: 1px 0 0 rgba(0,0,0,0.5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
#sidebar-nav-y3z6 .nav-item { color: var(--muted); }
#sidebar-nav-y3z6 .nav-item:hover { background: rgba(242,184,75,0.08) !important; color: var(--text) !important; }
#sidebar-nav-y3z6 .nav-item[aria-current="page"] {
  background: linear-gradient(90deg, rgba(242,184,75,0.22), rgba(242,184,75,0.04)) !important;
  color: var(--gold-l) !important; box-shadow: inset 0 0 0 1px rgba(242,184,75,0.28), 0 0 18px -8px rgba(242,184,75,0.6) !important;
}
#sidebar-nav-y3z6 .nav-item[aria-current="page"]::before { -webkit-mask-image: none; mask-image: none; box-shadow: 0 0 10px rgba(242,184,75,0.8); }
.nav-group-label::after, #mob-more-sheet .more-group-label::after { background: linear-gradient(90deg, rgba(242,184,75,0.45), transparent); opacity: 0.8; }

/* ---------- Brand: new XORA emblem + wordmark (assets/brand, from /brand/logos) ---------- */
.xora-mark { width: 26px; height: 30px; filter: drop-shadow(0 0 6px rgba(242,184,75,0.35)); }
.xora-mark--sm { width: 18px; height: 21px; }
.xora-word { display: block; width: 84px; height: 20px; filter: drop-shadow(0 0 8px rgba(242,184,75,0.25)); }
.xora-wordmark:has(.xora-word) { -webkit-text-fill-color: initial; background: none; }
.sr-only-x { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Phone bottom bar + More sheet ---------- */
.mobile-bottom-bar {
  background-color: rgba(9,8,24,0.86) !important;
  background-image: linear-gradient(180deg, rgba(26,24,64,0.6), rgba(9,8,24,0.2)) !important;
  border-top: 1px solid rgba(242,184,75,0.26) !important;
  backdrop-filter: saturate(150%) blur(16px); -webkit-backdrop-filter: saturate(150%) blur(16px);
  box-shadow: 0 -10px 30px rgba(2,1,12,0.6);
}
.mobile-bottom-bar > button { color: var(--muted) !important; }
.mobile-bottom-bar .mob-nav[aria-current="page"] { color: var(--gold-l) !important; text-shadow: 0 0 12px rgba(242,184,75,0.6); position: relative; }
.mobile-bottom-bar .mob-nav[aria-current="page"]::before { content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 2px; border-radius: 2px; background: var(--gold-grad); box-shadow: 0 0 10px rgba(242,184,75,0.8); }
#mob-more-sheet .more-backdrop { background: rgba(4,3,14,0.72); backdrop-filter: blur(3px); }
#mob-more-sheet .more-panel { background-color: #100F2B; background-image: radial-gradient(90% 40% at 50% 0%, rgba(242,184,75,0.1), transparent 70%), linear-gradient(180deg, #15143A, #0D0C26); border-top: 1px solid rgba(242,184,75,0.4); }
#mob-more-sheet .more-item { background: rgba(30,28,72,0.7); background-image: none; border-color: rgba(242,184,75,0.16); }

/* ---------- Toasts, dialogs, empty states, welcome ---------- */
.xora-toast { background: rgba(14,13,38,0.96) !important; border-color: rgba(242,184,75,0.35); box-shadow: var(--shadow-3), 0 0 24px -8px rgba(242,184,75,0.4); }
#pack-modal-i9j0 > div, #fee-checkout-modal > div, #confirm-dialog-y7z8 > div { background-color: #121130 !important; background-image: linear-gradient(180deg, rgba(255,236,200,0.04), transparent 40%) !important; border-color: rgba(242,184,75,0.3) !important; }
.xora-empty { background: rgba(18,17,48,0.55) !important; border: 1px dashed rgba(242,184,75,0.35) !important; }
#onboard-coach {
  position: relative; overflow: hidden;
  background: radial-gradient(60% 120% at 100% 0%, rgba(110,80,220,0.22), transparent 70%), radial-gradient(80% 140% at 0% 0%, rgba(242,184,75,0.2), transparent 60%), linear-gradient(160deg, #17163E, #0F0E2A) !important;
  border: 1px solid rgba(242,184,75,0.38) !important;
}
/* emblem watermark behind the welcome card (decorative, behind text) */
#onboard-coach::before { content: ''; position: absolute; right: -18px; top: -10px; width: 150px; height: 170px; pointer-events: none; opacity: 0.16;
  background: url("/assets/brand/xora-emblem.svg") center / contain no-repeat; }
#onboard-coach > * { position: relative; }
.faq-item { background: rgba(18,17,48,0.75) !important; }
.faq-item[open] { border-color: rgba(242,184,75,0.4); box-shadow: 0 0 20px -10px rgba(242,184,75,0.5); }

/* ---------- Old hard-coded soot browns from inline styles, mapped to space tones ---------- */
[style*="background:#241E19"], [style*="background: #241E19"] { background: var(--surface) !important; }
[style*="background:#1A1613"], [style*="background: #1A1613"] { background: var(--card) !important; }
[style*="background:#100E0C"], [style*="background:#07060A"] { background: var(--bg) !important; }
[style*="background:#15121C"], [style*="background:#0F0D14"] { background: var(--surface) !important; }
[style*="background:rgba(16,14,12"], [style*="background: rgba(16,14,12"] { background: rgba(9,8,23,0.9) !important; }
::-webkit-scrollbar-thumb { background: #2E2B5A; }
::-webkit-scrollbar-thumb:hover { background: #46427E; }

/* ---------- Sign-in screen ---------- */
/* opaque: the app behind must not show through; same space backdrop as the page (shared rule above) */
#auth-screen { background: var(--bg) !important; isolation: isolate; }
#auth-screen > div {
  background: linear-gradient(180deg, rgba(255,236,200,0.05), transparent 30%), rgba(16,15,42,0.86) !important;
  border: 1px solid rgba(242,184,75,0.32) !important;
  box-shadow: 0 30px 80px rgba(2,1,12,0.75), 0 0 60px -20px rgba(242,184,75,0.35) !important;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.auth-logo { display: block; width: 240px; max-width: 80%; height: auto; margin: 0 auto 10px; filter: drop-shadow(0 0 22px rgba(242,184,75,0.3)); }
.auth-tagline { font-size: 14px; letter-spacing: 0.02em; color: var(--muted); line-height: 1.45; max-width: 300px; margin: 0 auto; }
#auth-screen [style*="background:#07060A"] { background: rgba(5,4,16,0.7) !important; }
#auth-screen [style*="color:#8B7D6B"] { color: var(--muted) !important; }
#auth-screen #tab-signin[style*="linear-gradient"], #auth-screen #tab-join[style*="linear-gradient"], #auth-screen button[onclick^="do"], #pd-redeem { background: var(--gold-grad) !important; color: #1B1204 !important; box-shadow: inset 0 1px 0 rgba(255,246,220,0.6), 0 4px 18px -6px rgba(242,184,75,0.6); }
#auth-screen [style*="rgba(201,162,39"] { border-color: rgba(242,184,75,0.3) !important; }
#auth-screen input { color: var(--text) !important; }
#auth-screen input::placeholder { color: var(--dim); }
#auth-screen a[style*="#C9A227"], #auth-legal-line a { color: var(--gold-l) !important; }
#auth-screen #google-btn { background: rgba(26,24,64,0.8) !important; border-color: rgba(242,184,75,0.3) !important; color: var(--text) !important; }
#k21149719 { color: var(--muted) !important; }
#k7eb33998 { background: rgba(7,6,20,0.96) !important; }
#k7eb33998 > div.relative { background: rgba(16,15,42,0.85) !important; border-color: rgba(242,184,75,0.3) !important; }

/* ---------- Reduced motion / print ---------- */
@media (prefers-reduced-motion: reduce) { html::after { animation: none !important; opacity: 0.3; } }
@media print { body::before, html::after { display: none; } }
/* When the canvas space scene is running it owns the moving layer; the CSS drift layer steps aside (no duplicate). */
html.xspace-on::after { display: none; }
/* Space background switched off in Settings: keep the still backdrop, no motion. */
html.xspace-off::after { animation: none !important; }