:root {
  --bg: #05070e;
  --surface: #0a0f1c;
  --card: #0e1424;
  --border: rgba(130,170,255,0.08);
  --accent: #6c9fff;
  --accent2: #38bdf8;
  --gold: #fbbf24;
  --red: #f472b6;
  --green: #34d399;
  --purple: #c084fc;
  --text: #e0eaff;
  --muted: #475980;
  --glow: rgba(108,159,255,0.12);
  /* liquid glass tokens */
  --glass-bg: rgba(255,255,255,0.03);
  --glass-border: rgba(255,255,255,0.08);
  --glass-blur: 16px;
  --glass-highlight: rgba(255,255,255,0.06);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ========= HIGH-CONTRAST / LIGHT THEME ========= */
html.light {
  --bg: #f0f2f8;
  --surface: rgba(255,255,255,0.65);
  --card: rgba(255,255,255,0.55);
  --border: rgba(0,0,0,0.08);
  --accent: #2563eb;
  --accent2: #0ea5e9;
  --gold: #d97706;
  --red: #e11d48;
  --green: #059669;
  --purple: #7c3aed;
  --text: #0f172a;
  --muted: #64748b;
  --glow: rgba(37,99,235,0.06);
  --glass-bg: rgba(255,255,255,0.50);
  --glass-border: rgba(255,255,255,0.65);
  --glass-blur: 20px;
  --glass-highlight: rgba(255,255,255,0.70);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.90);
}
html.light body { background: var(--bg); color: var(--text); }
html.light .topbar { background: var(--glass-bg); border-bottom-color: var(--glass-border); }
html.light .logo { color: #0f172a; }
html.light .avatar { background: linear-gradient(135deg, var(--accent), var(--purple)); }
html.light #s0 {
  background: radial-gradient(ellipse at 20% 30%, rgba(37,99,235,0.07) 0%, transparent 60%),
              radial-gradient(ellipse at 75% 60%, rgba(124,58,237,0.05) 0%, transparent 50%),
              radial-gradient(ellipse at 50% 90%, rgba(14,165,233,0.04) 0%, transparent 50%),
              var(--bg);
}
html.light .hub-title { color: #0f172a; }
html.light .hub-card { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-color: var(--glass-border); box-shadow: var(--glass-shadow); }
html.light .hub-card:hover { box-shadow: 0 16px 48px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.9); }
html.light .stat-val { color: #0f172a; }
html.light .panel-title { color: #0f172a; }
html.light .hc-title { color: #0f172a; }
html.light .scenario-box { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--glass-shadow); }
html.light .scenario-box .difficulty-tag { background: rgba(255,255,255,0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
html.light .choice-btn { background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
html.light .choice-btn:hover { background: rgba(37,99,235,0.06); border-color: rgba(37,99,235,0.25); }
html.light .choice-btn.selected { background: rgba(37,99,235,0.08); border-color: var(--accent); }
html.light .choice-btn.correct-selected { background: rgba(5,150,105,0.08); border-color: var(--green); }
html.light .choice-btn.incorrect-selected { background: rgba(225,29,72,0.08); border-color: var(--red); }
html.light .choice-btn.missed-correct { background: rgba(5,150,105,0.05); border-color: rgba(5,150,105,0.3); }
html.light .choice-checkbox { border-color: #c0c8d8; }
html.light .choice-btn.selected .choice-checkbox { border-color: var(--accent); background: var(--accent); }
html.light .choice-btn.correct-selected .choice-checkbox { border-color: var(--green); background: var(--green); }
html.light .choice-btn.incorrect-selected .choice-checkbox { border-color: var(--red); background: var(--red); }
html.light .sidebar { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-right-color: var(--glass-border); }
html.light .scenario-item.active { background: rgba(37,99,235,0.06); border-color: rgba(37,99,235,0.2); }
html.light .scenario-item.done { background: rgba(5,150,105,0.05); border-color: rgba(5,150,105,0.15); }
html.light .game-progress { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); }
html.light .feedback-card { background: rgba(37,99,235,0.04); border-color: rgba(37,99,235,0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
html.light .theory-card { background: rgba(124,58,237,0.04); border-color: rgba(124,58,237,0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
html.light .insight-panel { background: rgba(5,150,105,0.04); border-color: rgba(5,150,105,0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
html.light .intro-narrative-box { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--glass-shadow); }
html.light .intro-narrative-box::before { background: rgba(255,255,255,0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
html.light .intro-stakes { background: rgba(225,29,72,0.05); border-color: rgba(225,29,72,0.15); }
html.light .intro-loading-bar { background: rgba(37,99,235,0.04); border-color: rgba(37,99,235,0.12); }
html.light .intro-ready-bar { background: rgba(5,150,105,0.05); border-color: rgba(5,150,105,0.15); }
html.light .result-bar { background: rgba(5,150,105,0.05); border-top-color: rgba(5,150,105,0.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
html.light .score-card { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--glass-shadow); }
html.light .score-card-val { color: inherit; }
html.light .archetype-card { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--glass-shadow); }
html.light .archetype-name { color: #0f172a; }
html.light .results-title { color: #0f172a; }
html.light .strength-card { background: rgba(5,150,105,0.05); border-color: rgba(5,150,105,0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
html.light .growth-card { background: rgba(217,119,6,0.05); border-color: rgba(217,119,6,0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
html.light .chat-container { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--glass-shadow); }
html.light .chat-msg-user { background: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.15); }
html.light .chat-msg-ai { background: rgba(255,255,255,0.5); border-color: var(--glass-border); }
html.light .chat-input { background: rgba(255,255,255,0.4); }
html.light .modal-content { background: var(--glass-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 24px 64px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.8); }
html.light .modal-overlay { background: rgba(0,0,0,0.3); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
html.light .badge-blue { background: rgba(37,99,235,0.08); color: var(--accent); border-color: rgba(37,99,235,0.15); }
html.light .badge-gold { background: rgba(217,119,6,0.08); color: var(--gold); border-color: rgba(217,119,6,0.15); }
html.light .badge-red { background: rgba(225,29,72,0.08); color: var(--red); border-color: rgba(225,29,72,0.15); }
html.light .badge-green { background: rgba(5,150,105,0.08); color: var(--green); border-color: rgba(5,150,105,0.15); }
html.light .badge-purple { background: rgba(124,58,237,0.08); color: var(--purple); border-color: rgba(124,58,237,0.15); }
html.light .btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 4px 16px rgba(37,99,235,0.25); }
html.light .btn-primary:hover { box-shadow: 0 6px 24px rgba(37,99,235,0.35); }
html.light .btn-ghost { border-color: var(--glass-border); color: var(--text); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
html.light .btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: rgba(37,99,235,0.04); }
html.light .btn-gold { background: linear-gradient(135deg, var(--gold), #f59e0b); color: #fff; }
html.light .xp-track { background: rgba(0,0,0,0.06); }
html.light .drilldown-btn { background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
html.light .drilldown-btn:hover { background: rgba(124,58,237,0.06); }
html.light .eco-canvas-title, html.light .conflict-title, html.light .intro-title { color: #0f172a; }
html.light .q-dot { background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: var(--glass-border); color: var(--muted); }
html.light .q-dot.active { background: var(--accent); border-color: var(--accent); color: #fff; }
html.light .q-dot.answered { border-color: var(--green); color: var(--green); }
html.light .q-dot.answered.active { background: var(--green); color: #fff; }
/* light glass overrides for new screens */
html.light .scoreboard-title, html.light .review-title, html.light .riq-title { color: #0f172a; }
html.light .scoreboard-stat, html.light .scoreboard-row, html.light .review-question,
html.light .riq-grade-card, html.light .riq-archetype-card, html.light .riq-domain-card,
html.light .riq-psych-card, html.light .riq-roadmap-step { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--glass-shadow); border-color: var(--glass-border); }
html.light .scoreboard-stat-val, html.light .scoreboard-info-title,
html.light .riq-score-big, html.light .riq-archetype-name, html.light .riq-step-title { color: #0f172a; }
html.light .profile-card { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--glass-shadow); border-color: var(--glass-border); }
html.light .profile-title { color: #0f172a; }
html.light .create-form { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); }
html.light .create-form input, html.light .create-form textarea { background: rgba(255,255,255,0.4); }
html.light .profile-field input, html.light .profile-field textarea { background: rgba(255,255,255,0.4); }

/* ========= i18n HELPER CLASSES (RTL-safe) ========= */
.avatar-menu-btn { display:flex;align-items:center;gap:8px;width:100%;padding:10px 16px;background:none;border:none;color:var(--text);font-size:13px;font-family:'Inter',sans-serif;cursor:pointer;text-align:start; }
.avatar-menu-btn:hover { background:var(--hover); }
.modal-panel { --modal-bg:#0e1424; --modal-inset:#141b2e; background:var(--modal-bg);border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:0 16px 48px rgba(0,0,0,0.4); }
html.light .modal-panel { --modal-bg:#ffffff; --modal-inset:#f0f2f8; }
.role-switcher-label { font-size:10px;color:var(--muted);margin-inline-end:8px; }

/* ========= i18n TRANSLATION STATE CLASSES ========= */
.i18n-translating { opacity: 0.6; pointer-events: none; transition: opacity 0.2s; }
.i18n-translated { cursor: pointer; }
.i18n-hover { border-bottom: 1px dashed var(--accent); cursor: help; }
.i18n-has-tooltip { border-bottom: 1px dotted var(--muted); cursor: help; }

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* NAV SCREENS */
.screen { display: none; }
.screen.active { display: flex; flex-direction: column; min-height: 100vh; }