@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Barlow+Semi+Condensed:wght@500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

  /* ═══ ZENTHRA TYPE SYSTEM ═══
     GT America Expanded, Suisse Int'l, Neue Haas Grotesk, and Berkeley Mono are
     licensed commercial fonts — they aren't available on any public font CDN.
     Each stack below lists the licensed family FIRST, so the moment you self-host
     the real files (see @font-face block right under this) every element upgrades
     automatically. Until then, the browser falls through to the closest free
     equivalent so the layout still looks intentional. */
  @font-face {
    font-family: 'GT America Expanded';
    src: local('GT America Expanded'), url('/fonts/GT-America-Expanded.woff2') format('woff2');
    font-weight: 400 700; font-display: swap;
  }
  @font-face {
    font-family: 'Suisse Intl';
    src: local('Suisse Intl'), url('/fonts/SuisseIntl.woff2') format('woff2');
    font-weight: 300 700; font-display: swap;
  }
  @font-face {
    font-family: 'Neue Haas Grotesk';
    src: local('Neue Haas Grotesk'), url('/fonts/NeueHaasGrotesk.woff2') format('woff2');
    font-weight: 400 700; font-display: swap;
  }
  @font-face {
    font-family: 'Berkeley Mono';
    src: local('Berkeley Mono'), url('/fonts/BerkeleyMono.woff2') format('woff2');
    font-weight: 400 700; font-display: swap;
  }

  :root {
    /* ═══ ZENTHRA CORE PALETTE — Deep Black & Indigo/Blue-Violet ═══ */
    --bg: #0B0A08;               /* Deep Black */
    --bg-secondary: #16140F;     /* Dark Charcoal */
    --surface: rgba(108,124,255,0.045);
    --surface-hover: rgba(108,124,255,0.09);
    --border: rgba(108,124,255,0.16);        /* Deep Accent border */
    --border-bright: rgba(108,124,255,0.38); /* Bright Indigo Glow */
    --text: #F3EFE4;             /* Soft White */
    --text-dim: rgba(243,239,228,0.45);     /* Secondary text (gray) */
    --text-mid: rgba(243,239,228,0.7);

    --gold: #6C7CFF;             /* Primary Accent — Indigo (var names kept as --gold* for backward compatibility with existing CSS) */
    --gold-soft: #9AA6FF;        /* Secondary Accent — Soft Blue-Violet */
    --gold-bright: #C6CDFF;      /* Hover — Highlight */
    --gold-deep: #4656C8;        /* Deep Accent */
    --gold-selected: #8B96FF;    /* Selected state */

    /* Module accents kept as tonal variants of the indigo/blue-violet theme, for wayfinding only — never a hue outside the family */
    --accent-game: var(--gold);
    --accent-sat: var(--gold-deep);
    --accent-ielts: #7C86E8;
    --accent-physics: #5A6BDE;
    --accent-math: var(--gold-soft);
    --accent-astro: var(--gold-selected);

    --accent-warn: #E0A030;      /* Amber */
    --accent-danger: #E5786B;    /* Soft Red */
    --accent-good: #6FBF8B;      /* Elegant Green */

    --glow-game: rgba(108,124,255,0.28);
    --glow-physics: rgba(90,107,222,0.22);

    /* ═══ Appearance settings (overridden inline by Settings panel / JS) ═══ */
    --radius-scale: 1;
    --anim-speed: 1;
    --glow-intensity: 1;
    --density: 1;

    --logo: 'GT America Expanded', 'Barlow Semi Condensed', sans-serif;      /* Logo / wordmark */
    --sans: 'Suisse Intl', 'Inter', 'Helvetica Neue', sans-serif;            /* Headings, body, cards, sidebar */
    --body: var(--sans);                                                    /* Body text — same family as sans */
    --numbers: 'Neue Haas Grotesk', 'Suisse Intl', 'Inter', sans-serif;     /* Large numeric readouts (XP, timers, %) */
    --mono: 'Berkeley Mono', 'JetBrains Mono', monospace;                   /* Code / mono UI micro-labels */
  }

  /* LIGHT THEME — pure variable overrides, same layout/markup as dark mode. */
  html[data-theme="light"] {
    --bg: #FAF7F0;
    --bg-secondary: #F1EBDC;
    --surface: rgba(140,111,46,0.05);
    --surface-hover: rgba(140,111,46,0.09);
    --border: rgba(140,111,46,0.18);
    --border-bright: rgba(140,111,46,0.34);
    --text: #221C10;
    --text-dim: rgba(34,28,16,0.5);
    --text-mid: rgba(34,28,16,0.72);
  }
  html[data-theme="light"] .header { background: rgba(250,247,240,0.9); }

  html.reduced-motion, html.reduced-motion * { animation-duration: 0.001s !important; transition-duration: 0.001s !important; scroll-behavior: auto !important; }
  html.compact-mode .main { padding: 16px 24px; }
  html.compact-mode .card-body.pad, html.compact-mode .card-body { padding: 12px; }
  html.compact-mode .hero { gap: 10px; }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--body);
    min-height: 100vh;
    overflow-x: hidden;
    background-image:
      radial-gradient(ellipse 80% 50% at 20% 10%, rgba(154,166,255,0.07) 0%, transparent 60%),
      radial-gradient(ellipse 60% 40% at 80% 80%, rgba(198,205,255,0.05) 0%, transparent 60%),
      radial-gradient(ellipse 40% 30% at 60% 30%, rgba(70,86,200,0.04) 0%, transparent 50%);
  }

  /* HEADER */
  .header {
    position: sticky; top: 0; z-index: 200;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 28px;
    background: rgba(16,13,6,0.88);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap; gap: 10px;
  }
  .header-logo { font-family: var(--logo); font-size: 12px; letter-spacing: 0.2em; color: var(--text-mid); text-transform: uppercase; display:flex; align-items:center; gap:14px;}
  .header-logo span { color: var(--gold); }
  .header-logo .brand-mark { height: 20px; width: auto; display: block; filter: drop-shadow(0 0 10px rgba(108,124,255,calc(0.35 * var(--glow-intensity)))); transition: filter 0.3s ease; }
  .header-logo:hover .brand-mark { filter: drop-shadow(0 0 16px rgba(108,124,255,calc(0.55 * var(--glow-intensity)))); }
  .mode-pill {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform:uppercase;
    padding: 3px 9px; border-radius: 20px; border: 1px solid var(--border-bright);
    color: var(--text-mid); background: rgba(108,124,255,0.04);
  }

  .clock-block { text-align: right; }
  .clock-time { font-family: var(--numbers); font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: 0.06em; line-height: 1; }
  .clock-date { font-family: var(--mono); font-size: 9px; color: var(--text-dim); letter-spacing: 0.1em; margin-top: 3px; text-transform: uppercase; }

  .nav-tabs { display: flex; gap: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 4px; flex-wrap: wrap; max-width: calc(720px * var(--sidebar-scale, 1)); }
  .nav-tab { padding: 6px 12px; font-family: var(--sans); font-size: 11px; font-weight: 500; color: var(--text-dim); border: none; background: transparent; border-radius: 7px; cursor: pointer; transition: all 0.2s; letter-spacing: 0.02em; white-space:nowrap;}
  .nav-tab.active, .nav-tab:hover { background: rgba(154,166,255,0.15); color: var(--text); }
  .nav-tab.active { color: #F2D4AD; }

  /* Grouped nav dropdowns */
  .nav-group { position: relative; }
  .nav-group-btn { padding: 6px 12px; font-family: var(--sans); font-size: 11px; font-weight: 500; color: var(--text-dim); border: none; background: transparent; border-radius: 7px; cursor: pointer; transition: all 0.2s; letter-spacing: 0.02em; white-space:nowrap; display:flex; align-items:center; gap:4px; }
  .nav-group-btn:hover, .nav-group.open .nav-group-btn { background: rgba(154,166,255,0.15); color: var(--text); }
  .nav-group.has-active .nav-group-btn { color: #F2D4AD; }
  .nav-group-btn .caret { font-size: 8px; opacity: 0.6; transition: transform 0.2s; }
  .nav-group.open .nav-group-btn .caret { transform: rotate(180deg); }
  .nav-dropdown { position: absolute; top: calc(100% + 6px); left: 0; min-width: 190px; background: rgba(22,18,10,0.97); backdrop-filter: blur(20px); border: 1px solid var(--border-bright); border-radius: 10px; padding: 6px; display: none; flex-direction: column; gap: 2px; z-index: 300; box-shadow: 0 12px 32px rgba(0,0,0,0.4); }
  .nav-group.open .nav-dropdown { display: flex; }
  .nav-dropdown .nav-tab { text-align: left; width: 100%; }

  .main { padding: 28px; max-width: 1520px; margin: 0 auto; }
  .section { display: none; }
  .section.active { display: block; }

  .hero { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
  .hero-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px; position: relative; overflow: hidden; transition: border-color 0.3s, transform 0.2s; }
  .hero-card:hover { border-color: var(--border-bright); transform: translateY(-2px); }
  .hero-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--card-accent, var(--accent-game)); }
  .hero-card .label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; color: var(--text-dim); text-transform: uppercase; margin-bottom: 8px; }
  .hero-card .value { font-family: var(--numbers); font-size: 30px; font-weight: 700; line-height: 1; color: var(--card-accent, var(--accent-game)); }
  .hero-card .sub { font-size: 11px; color: var(--text-dim); margin-top: 6px; }

  .glass { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; backdrop-filter: blur(10px); transition: border-color 0.2s; }
  .glass:hover { border-color: var(--border-bright); }

  /* ── Auth gate (Phase 11) ── */
  .auth-gate-overlay { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: var(--bg); }
  .auth-gate-box { width: 320px; max-width: calc(100vw - 40px); padding: 28px 24px; text-align: center; }
  .auth-gate-box #authGateForm { text-align: left; }
  .auth-gate-logo { font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; color: var(--gold-soft, var(--accent-game)); margin-bottom: 22px; }
  .auth-gate-loading { display: flex; flex-direction: column; align-items: center; padding: 10px 0; }
  .auth-gate-spinner { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent-game); animation: authGateSpin 0.8s linear infinite; }
  @keyframes authGateSpin { to { transform: rotate(360deg); } }
  .auth-gate-error { font-size: 11px; color: var(--accent-danger); background: rgba(229,120,107,0.1); border: 1px solid rgba(229,120,107,0.3); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; }
  .auth-gate-info { font-size: 11px; color: var(--accent-good); background: rgba(111,191,139,0.1); border: 1px solid rgba(111,191,139,0.3); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; }

  /* ── Cloud sync status pill (Phase 11) ── */
  .sync-status-pill { display: flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 11px; color: var(--text-dim); background: rgba(108,124,255,0.03); border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; margin-left: 8px; white-space: nowrap; transition: color 0.2s, border-color 0.2s; }
  .sync-status-pill.status-saving #syncStatusIcon { animation: authGateSpin 1s linear infinite; display: inline-block; }
  .sync-status-pill.status-error { color: var(--accent-danger); border-color: rgba(229,120,107,0.3); }
  .sync-status-pill.status-offline { color: var(--accent-warn); border-color: rgba(224,160,48,0.3); }

  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
  .grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
  .grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
  .grid-auto-sm { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }

  .card-title { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 18px; padding: 18px 18px 0; display:flex; align-items:center; justify-content:space-between; }
  .card-body { padding: 0 18px 18px; }
  .card-body.pad { padding: 18px; }

  .btn { padding: 10px 18px; border-radius: 10px; border: none; cursor: pointer; font-family: var(--sans); font-size: 12px; font-weight: 600; transition: all 0.2s; letter-spacing: 0.02em; }
  .btn-primary { background: var(--accent-game); color: #fff; }
  .btn-primary:hover { background: #ECC188; transform: translateY(-1px); }
  .btn-ghost { background: var(--surface); color: var(--text-mid); border: 1px solid var(--border); }
  .btn-ghost:hover { border-color: var(--border-bright); color: var(--text); }
  .btn-sm { padding: 6px 12px; font-size: 11px; }

  .form-group label { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; color: var(--text-dim); text-transform: uppercase; margin-bottom: 7px; }
  .form-group select, .form-group input, .form-group textarea { width: 100%; background: rgba(108,124,255,0.05); border: 1px solid var(--border); border-radius: 10px; padding: 9px 13px; color: var(--text); font-family: var(--body); font-size: 13px; outline: none; transition: border-color 0.2s; appearance: none; }
  .form-group select:focus, .form-group input:focus, .form-group textarea:focus { border-color: var(--accent-game); }
  .form-group textarea { resize: vertical; min-height: 70px; font-family: var(--body); }

  .log-table { width: 100%; border-collapse: collapse; }
  .log-table th { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; color: var(--text-dim); text-transform: uppercase; padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); }
  .log-table td { padding: 11px 12px; font-size: 12px; color: var(--text-mid); border-bottom: 1px solid var(--border); }
  .log-table tr:last-child td { border-bottom: none; }
  .log-table tr:hover td { background: var(--surface-hover); }

  .tag { display: inline-block; padding: 3px 9px; border-radius: 20px; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.05em; }

  .xp-bar-wrap { background: rgba(108,124,255,0.06); border-radius: 4px; height: 7px; overflow: hidden; margin: 7px 0; }
  .xp-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent-game), #F2D4AD); border-radius: 4px; transition: width 1s ease; }

  .badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 20px; background: rgba(108,124,255,0.05); border: 1px solid var(--border); font-size: 11px; color: var(--text-mid); font-family: var(--mono); letter-spacing: 0.03em; }
  .badge.earned { border-color: var(--accent-game); color: #F2D4AD; background: rgba(154,166,255,0.1); }

  canvas { display: block; }

  .timeline { position: relative; padding-left: 26px; }
  .timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 1px; background: var(--border); }
  .timeline-item { position: relative; padding-bottom: 22px; }
  .timeline-item::before { content: ''; position: absolute; left: -22px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--dot-color, var(--border)); border: 2px solid var(--bg); box-shadow: 0 0 0 3px var(--dot-color, var(--border)); }
  .timeline-item.active::before { background: var(--accent-game); box-shadow: 0 0 0 3px rgba(154,166,255,0.3); }
  .timeline-age { font-family: var(--mono); font-size: 9px; color: var(--text-dim); letter-spacing: 0.1em; margin-bottom: 4px; }
  .timeline-title { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
  .timeline-detail { font-size: 11px; color: var(--text-dim); line-height: 1.6; }

  .stat-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
  .stat-chip { background: rgba(108,124,255,0.04); border: 1px solid var(--border); border-radius: 8px; padding: 8px 13px; text-align: center; min-width: 76px; }
  .stat-chip .cv { font-family: var(--numbers); font-size: 17px; font-weight: 700; }
  .stat-chip .cl { font-size: 9px; color: var(--text-dim); margin-top: 2px; font-family: var(--mono); letter-spacing: 0.06em; }

  .toast { position: fixed; bottom: 26px; right: 26px; background: rgba(38,34,20,0.95); border: 1px solid var(--accent-game); border-radius: 12px; padding: 13px 17px; font-size: 12px; color: var(--text); backdrop-filter: blur(20px); transform: translateY(80px); opacity: 0; transition: all 0.3s ease; z-index: 999; max-width: 300px; }
  .toast.show { transform: translateY(0); opacity: 1; }

  .phase-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; cursor:pointer; border:1px solid transparent;}
  .phase-current { background: rgba(154,166,255,0.15); color: #F2D4AD; border-color: rgba(154,166,255,0.3); }
  .phase-upcoming { background: rgba(108,124,255,0.04); color: var(--text-dim); border-color: var(--border); }

  .skill-tree { display: flex; flex-direction: column; gap: 10px; }
  .skill-node { display: flex; align-items: center; gap: 12px; padding: 10px 13px; background: rgba(108,124,255,0.03); border-radius: 10px; border: 1px solid var(--border); transition: border-color 0.2s; cursor:pointer;}
  .skill-node:hover { border-color: var(--border-bright); }
  .skill-icon { font-size: 15px; }
  .skill-info { flex: 1; min-width:0; }
  .skill-name { font-size: 12px; font-weight: 600; margin-bottom: 3px; }
  .skill-level { font-family: var(--mono); font-size: 9px; color: var(--text-dim); }
  .skill-xp-mini { height: 4px; width: 70px; background: rgba(108,124,255,0.06); border-radius: 2px; overflow: hidden; }
  .skill-xp-fill { height: 100%; border-radius: 2px; transition: width 1s ease; }

  ::-webkit-scrollbar { width: 6px; height:6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(108,124,255,0.1); border-radius: 3px; }

  @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
  .section.active > * { animation: fadeIn 0.3s ease forwards; }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
  @keyframes celebratePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } 50% { box-shadow: 0 0 24px 6px rgba(74,222,128,0.45); } }
  .celebrate { animation: celebratePulse 0.6s ease 2; border-color: var(--accent-good) !important; }
  .live-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; display: inline-block; animation: pulse 2s infinite; margin-right: 6px; }

  /* T Center — workspace selector */
  @keyframes tcFadeScale { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
  @keyframes tcGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(198,205,255,0); } 50% { box-shadow: 0 0 32px 4px rgba(198,205,255,0.18); } }
  .tc-select-wrap { animation: tcFadeScale 0.35s cubic-bezier(0.22,1,0.36,1) forwards; }
  .tc-select-card {
    position: relative; border-radius: 20px; padding: 36px 28px; cursor: pointer;
    background: linear-gradient(160deg, rgba(108,124,255,0.04), rgba(108,124,255,0.01));
    border: 1px solid var(--border);
    transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), border-color 0.25s ease, background 0.25s ease;
    opacity: 0; animation: tcFadeScale 0.45s cubic-bezier(0.22,1,0.36,1) forwards;
  }
  .tc-select-card:nth-child(1) { animation-delay: 0.05s; }
  .tc-select-card:nth-child(2) { animation-delay: 0.15s; }
  .tc-select-card:hover { transform: translateY(-4px) scale(1.015); border-color: rgba(198,205,255,0.5); animation: tcGlow 1.8s ease infinite; }
  .tc-select-icon { font-size: 40px; margin-bottom: 14px; display: block; }
  .tc-select-title { font-family: var(--sans); font-weight: 700; font-size: 17px; margin-bottom: 6px; }
  .tc-select-desc { font-size: 12px; color: var(--text-dim); line-height: 1.6; }

  .divider { height: 1px; background: var(--border); margin: 20px 0; }
  .mb-12 { margin-bottom: 12px; }
  .mb-16 { margin-bottom: 16px; }
  .mb-24 { margin-bottom: 24px; }
  .text-accent { color: var(--accent-game); }
  .text-dim { color: var(--text-dim); }
  .flex { display: flex; align-items: center; gap: 8px; }
  .flex-between { display: flex; align-items: center; justify-content: space-between; }
  .flex-wrap { flex-wrap: wrap; }

  /* ═══ NEW SYSTEMS STYLES ═══ */

  /* Sub-tab pills used inside sections (e.g. Game Dev subtrees) */
  .subtab-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
  .subtab { padding: 7px 14px; border-radius: 9px; border: 1px solid var(--border); background: rgba(108,124,255,0.03); color: var(--text-dim); font-family: var(--sans); font-size: 11px; font-weight: 500; cursor: pointer; transition: all 0.2s; }
  .subtab:hover { border-color: var(--border-bright); color: var(--text); }
  .subtab.active { background: rgba(154,166,255,0.15); border-color: rgba(154,166,255,0.4); color: #F2D4AD; }

  /* Skill tree node detail card (progression tree mastery) */
  .tree-card { border-radius: 14px; padding: 18px; border: 1px solid var(--border); background: rgba(108,124,255,0.025); position: relative; transition: all 0.25s; }
  .tree-card:hover { transform: translateY(-2px); border-color: var(--border-bright); }
  .tree-card .ti { font-size: 20px; margin-bottom: 10px; display:block; }
  .tree-card .tn { font-family: var(--sans); font-weight: 700; font-size: 14px; margin-bottom: 4px; }
  .tree-card .td { font-size: 10px; color: var(--text-dim); margin-bottom: 12px; line-height:1.5; }
  .metric-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 10px; }
  .metric-row .ml { color: var(--text-dim); font-family: var(--mono); letter-spacing: 0.04em; }
  .metric-row .mv { font-family: var(--numbers); font-weight: 700; }
  .mini-bar { height: 4px; background: rgba(108,124,255,0.06); border-radius: 2px; overflow: hidden; margin-bottom: 10px; }
  .mini-bar-fill { height: 100%; border-radius: 2px; transition: width 0.8s ease; }
  .curr-lesson-row { display:flex; align-items:flex-start; gap:10px; padding:8px 0; border-top:1px solid var(--border); font-size:12.5px; line-height:1.5; }
  .curr-lesson-row:first-child { border-top:none; }
  .curr-lesson-row.done .curr-lesson-title { color:var(--text-dim); text-decoration:line-through; text-decoration-color:rgba(108,124,255,0.25); }
  .curr-checkbox { width:16px; height:16px; margin-top:2px; flex-shrink:0; cursor:pointer; accent-color:#E9B879; }

  /* ── T Center Library (The Universe → encyclopedia-style browsing UI) ── */
  .tc-lib-sidebar { width:200px; flex-shrink:0; }
  @media (max-width:760px) { .tc-lib-sidebar { display:none; } }
  .tc-lib-sidebar-section { margin-bottom:16px; }
  .tc-lib-sidebar-item { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:7px 10px; border-radius:8px; font-size:12px; color:var(--text-mid); cursor:pointer; transition:background 0.15s; }
  .tc-lib-sidebar-item:hover { background:rgba(108,124,255,0.05); }
  .tc-lib-sidebar-item.active { background:rgba(154,166,255,0.15); color:#F2D4AD; }
  .tc-lib-count { font-family:var(--mono); font-size:9.5px; color:var(--text-dim); }
  .tc-lib-sidebar-actions { display:flex; gap:2px; opacity:0.7; }
  .tc-lib-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:14px; }
  .tc-lib-card { border-radius:14px; border:1px solid var(--border); background:rgba(108,124,255,0.025); overflow:hidden; cursor:pointer; position:relative; transition:all 0.2s; display:flex; flex-direction:column; }
  .tc-lib-card:hover { transform:translateY(-2px); border-color:var(--border-bright); }
  .tc-lib-card[draggable="true"] { cursor:grab; }
  .tc-lib-drag-handle { position:absolute; top:6px; left:6px; z-index:2; background:rgba(6,5,4,0.5); border-radius:5px; padding:1px 5px; font-size:11px; color:var(--text-dim); }
  .tc-lib-cover { width:100%; height:120px; background:rgba(108,124,255,0.06); display:flex; align-items:center; justify-content:center; font-size:30px; overflow:hidden; }
  .tc-lib-cover img { width:100%; height:100%; object-fit:cover; display:block; }
  .tc-lib-card-body { padding:12px 14px 14px; }
  .tc-lib-list { display:flex; flex-direction:column; gap:8px; }
  .tc-lib-row { display:flex; align-items:center; gap:12px; border:1px solid var(--border); border-radius:10px; padding:10px 12px; cursor:pointer; background:rgba(108,124,255,0.02); transition:all 0.2s; }
  .tc-lib-row:hover { border-color:var(--border-bright); }
  .tc-lib-row[draggable="true"] { cursor:grab; }
  .tc-lib-row-thumb { width:44px; height:44px; border-radius:8px; background:rgba(108,124,255,0.08); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:18px; overflow:hidden; }
  .tc-lib-row-thumb img { width:100%; height:100%; object-fit:cover; display:block; }

  /* Large inline images inside a T Center entry's content — the article/
     encyclopedia-style display, as opposed to the small attachment chips
     used for non-image files. Click opens the existing media lightbox. */
  .tc-inline-image-wrap { max-width:680px; margin:16px auto; }
  .tc-inline-image { display:block; width:100%; max-height:520px; object-fit:contain; border-radius:12px; cursor:zoom-in; box-shadow:0 10px 34px rgba(0,0,0,0.28); background:rgba(108,124,255,0.03); }
  @media (max-width:640px) { .tc-inline-image { max-height:340px; } }
  .curr-lesson-title { color:var(--text); }

  /* Adaptive schedule engine */
  .energy-selector { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
  .energy-btn { flex: 1; min-width: 130px; padding: 14px; border-radius: 12px; border: 1px solid var(--border); background: rgba(108,124,255,0.03); cursor: pointer; transition: all 0.2s; text-align: center; }
  .energy-btn:hover { border-color: var(--border-bright); }
  .energy-btn.active { border-color: var(--e-color); background: var(--e-color-bg); box-shadow: 0 0 0 1px var(--e-color); }
  .energy-btn .ei { font-size: 22px; margin-bottom: 6px; }
  .energy-btn .en { font-family: var(--sans); font-size: 12px; font-weight: 600; }
  .energy-btn .ed { font-size: 9px; color: var(--text-dim); margin-top: 3px; font-family: var(--mono); }

  .schedule-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
  .day-col { display: flex; flex-direction: column; gap: 6px; }
  .day-header { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; color: var(--text-dim); text-transform: uppercase; padding: 8px 0; text-align: center; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
  .session-block { border-radius: 8px; padding: 8px 9px; font-size: 10px; font-weight: 500; line-height: 1.4; border-left: 3px solid; }
  .session-rest { background: rgba(108,124,255,0.03); border-left-color: var(--border); color: var(--text-dim); font-size: 9px; text-align: center; padding: 12px 4px; font-family: var(--mono); }

  /* ── Manual Schedule (user-driven) ── */
  .daytype-row { display:grid; grid-template-columns: repeat(7,1fr); gap:8px; }
  .daytype-cell { border:1px solid var(--border); border-radius:10px; padding:8px 6px; text-align:center; }
  .daytype-cell .dtn { font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); margin-bottom:6px; }
  .daytype-toggle { display:flex; gap:4px; justify-content:center; }
  .daytype-btn { font-family:var(--mono); font-size:8.5px; padding:4px 6px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--text-dim); cursor:pointer; }
  .daytype-btn.active-study { background: rgba(70,86,200,0.15); color: var(--accent-good); border-color: rgba(70,86,200,0.3); }
  .daytype-btn.active-rest { background: rgba(154,166,255,0.15); color: var(--accent-game); border-color: rgba(154,166,255,0.3); }
  .planner-day-block { border:1px solid var(--border); border-radius:10px; padding:10px 12px; margin-bottom:10px; }
  .planner-session-row { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:11px; padding:6px 0; border-bottom:1px solid var(--border); }
  .planner-session-row:last-child { border-bottom:none; }

  /* ── Sunday Planning & Recovery Experience ── */
  @keyframes sundayFadeUp { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform: translateY(0); } }
  @keyframes sundayGlowPulse { 0%,100% { box-shadow: 0 0 0px rgba(212,175,55,0.0); } 50% { box-shadow: 0 0 28px rgba(212,175,55,0.35); } }
  @keyframes sundayMoonFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
  .sunday-hero { text-align:center; padding: 44px 24px; border-radius:20px; background: linear-gradient(160deg, rgba(212,175,55,0.08), rgba(154,166,255,0.05)); border:1px solid rgba(212,175,55,0.25); animation: sundayFadeUp 0.7s ease both; }
  .sunday-moon { font-size:40px; animation: sundayMoonFloat 3.5s ease-in-out infinite; margin-bottom:10px; }
  .sunday-title { font-family: var(--sans); font-size:22px; font-weight:700; background: linear-gradient(90deg,#D4AF37,#F2EFE8); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:8px; }
  .sunday-sub { font-size:12.5px; color:var(--text-dim); max-width:440px; margin:0 auto; line-height:1.6; }
  .sunday-fade { animation: sundayFadeUp 0.7s ease both; }
  .sunday-fade:nth-of-type(2) { animation-delay: 0.08s; }
  .sunday-fade:nth-of-type(3) { animation-delay: 0.16s; }
  .sunday-plan-cta { animation: sundayFadeUp 0.7s ease both, sundayGlowPulse 2.6s ease-in-out infinite; animation-delay: 0.24s, 0.9s; border-radius:14px; padding:2px; }
  .sunday-plan-cta .btn-primary { background: linear-gradient(90deg,#D4AF37,#b8860b); border:none; color:#100D0A; font-weight:700; letter-spacing:.02em; }

  /* Second Brain notes */
  .note-card { background: rgba(108,124,255,0.03); border: 1px solid var(--border); border-radius: 12px; padding: 14px; transition: border-color 0.2s; }
  .note-card:hover { border-color: var(--border-bright); }
  .note-type { font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 8px; border-radius: 10px; display: inline-block; margin-bottom: 8px; }
  .note-subject { font-size: 9px; color: var(--text-dim); font-family: var(--mono); margin-bottom: 6px; }
  .note-content { font-size: 12px; color: var(--text-mid); line-height: 1.6; }
  .note-date { font-size: 9px; color: var(--text-dim); margin-top: 10px; font-family: var(--mono); }

  /* Project management */
  .project-card { background: rgba(108,124,255,0.03); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
  .project-status { font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; }
  .status-active { background: rgba(74,222,128,0.15); color: #4ade80; }
  .status-planning { background: rgba(255,209,102,0.15); color: #FFD166; }
  .status-paused { background: rgba(108,124,255,0.06); color: var(--text-dim); }
  .status-done { background: rgba(154,166,255,0.15); color: #F2D4AD; }

  /* Age progression architecture */
  .age-stage { border-radius: 18px; padding: 24px; position: relative; overflow: hidden; border: 1px solid var(--border); min-height: 200px; display:flex; flex-direction:column; }
  .age-stage.locked { opacity: 0.4; filter: grayscale(0.6); }
  .age-stage.current { border-color: var(--accent-game); box-shadow: 0 0 0 1px var(--accent-game), 0 20px 60px rgba(154,166,255,0.15); }
  .age-stage .lock-icon { position: absolute; top: 18px; right: 18px; font-size: 16px; opacity: 0.5; }
  .age-range { font-family: var(--mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.12em; margin-bottom: 8px; }
  .age-title { font-family: var(--sans); font-size: 18px; font-weight: 700; margin-bottom: 10px; }
  .age-desc { font-size: 12px; color: var(--text-dim); line-height: 1.7; flex: 1; }
  .age-status-tag { margin-top: 14px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; }

  /* Retention ring (circular progress) */
  .ring-wrap { position: relative; width: 64px; height: 64px; }
  .ring-label { position: absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family: var(--numbers); font-size: 12px; font-weight: 700; }

  /* Sick day banner */
  .alert-banner { display:flex; align-items:center; gap: 12px; padding: 14px 18px; border-radius: 12px; margin-bottom: 18px; border: 1px solid; font-size: 12px; }
  .alert-warn { background: rgba(255,159,69,0.08); border-color: rgba(255,159,69,0.3); color: #FF9F45; }
  .alert-danger { background: rgba(255,84,112,0.08); border-color: rgba(255,84,112,0.3); color: #FF5470; }
  .alert-good { background: rgba(74,222,128,0.08); border-color: rgba(74,222,128,0.3); color: #4ade80; }
  .alert-info { background: rgba(154,166,255,0.08); border-color: rgba(154,166,255,0.3); color: #F2D4AD; }

  /* Task checklist */
  .task-row { display:flex; align-items:center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
  .task-row:last-child { border-bottom: none; }
  .task-check { width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--border-bright); cursor: pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:10px; transition: all 0.2s; }
  .task-check.checked { background: var(--accent-good); border-color: var(--accent-good); color: #100D06; }
  .task-text { font-size: 12px; flex: 1; }
  .task-text.checked { text-decoration: line-through; color: var(--text-dim); }

  /* responsive */
  @media (max-width: 1100px) {
    .hero { grid-template-columns: 1fr 1fr; }
    .grid-4 { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 900px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .schedule-grid { grid-template-columns: repeat(4, 1fr); }
    .main { padding: 16px; }
    .nav-tabs { display: none; }
    .nav-tabs.mobile-open {
      display: flex; flex-direction: column; align-items: stretch; gap: 4px;
      position: absolute; top: 100%; left: 0; right: 0; z-index: 500;
      background: var(--bg-card, #1D1A15); border-bottom: 1px solid var(--border);
      padding: 10px; max-height: 70vh; overflow-y: auto;
    }
    .nav-tabs.mobile-open .nav-dropdown { position: static; box-shadow: none; padding-left: 12px; }
    .mobileNavToggle { display: flex !important; }
    #searchTriggerBtn span:last-child { display: none; }
  }
  @media (min-width: 901px) { .mobileNavToggle { display: none; } }
  @media (max-width: 600px) {
    .hero { grid-template-columns: 1fr; }
    .header { padding: 12px 16px; flex-wrap: wrap; }
    .schedule-grid { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: 1fr; }
    .clock-block { display: none; }
    #cmdOverlay > div { width: 96vw; }
  }

  /* ── Personal vault (hidden module) ── */
  #vaultOverlay {
    position: fixed; inset: 0; z-index: 9999; display: none;
    background: radial-gradient(ellipse at 50% 0%, rgba(176,184,255,0.10), transparent 60%), #0B0905;
    backdrop-filter: blur(6px);
    font-family: var(--sans);
    color: var(--text);
    overflow: hidden;
  }
  #vaultOverlay.open { display: flex; flex-direction: column; }
  .vault-lockscreen { flex: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 22px; }
  .vault-lock-icon { font-size: 40px; opacity: 0.85; filter: drop-shadow(0 0 24px rgba(176,184,255,0.5)); }
  .vault-lock-title { font-family: var(--mono); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-dim); }
  .vault-pin-dots { display: flex; gap: 14px; }
  .vault-pin-dot { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid rgba(108,124,255,0.25); transition: all 0.15s; }
  .vault-pin-dot.filled { background: #9AA6FF; border-color: #9AA6FF; box-shadow: 0 0 10px rgba(154,166,255,0.7); }
  .vault-keypad { display: grid; grid-template-columns: repeat(3, 62px); gap: 14px; }
  .vault-key { width: 62px; height: 62px; border-radius: 50%; border: 1px solid rgba(108,124,255,0.08);
    background: rgba(108,124,255,0.03); color: var(--text); font-family: var(--mono); font-size: 18px;
    cursor: pointer; transition: all 0.15s; }
  .vault-key:hover { background: rgba(176,184,255,0.14); border-color: rgba(176,184,255,0.4); }
  .vault-key:active { transform: scale(0.93); }
  .vault-lock-msg { font-size: 11px; color: var(--text-dim); min-height: 16px; letter-spacing: 0.04em; }
  .vault-lock-hint { font-size: 10px; color: var(--text-dim); opacity: 0.6; margin-top: -6px; }
  .vault-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 26px; border-bottom: 1px solid rgba(108,124,255,0.06); flex-shrink: 0; }
  .vault-brand { font-family: var(--logo); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: #C2CBFF; display: flex; align-items: center; gap: 10px; }
  .vault-body { flex: 1; display: flex; overflow: hidden; }
  .vault-rail { width: calc(216px * var(--sidebar-scale, 1)); flex-shrink: 0; border-right: 1px solid rgba(108,124,255,0.06); overflow-y: auto; padding: 14px 10px; }
  .vault-rail-btn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 9px; border: none; background: transparent; color: var(--text-dim); font-family: var(--sans); font-size: 12.5px; cursor: pointer; margin-bottom: 2px; transition: all 0.15s; }
  .vault-rail-btn:hover { background: rgba(108,124,255,0.04); color: var(--text); }
  .vault-rail-btn.active { background: rgba(176,184,255,0.14); color: #D6DCFF; }
  .vault-rail-group { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; color: var(--text-dim); opacity: 0.5; text-transform: uppercase; padding: 14px 12px 6px; }
  .vault-content { flex: 1; overflow-y: auto; padding: 26px 32px 60px; }
  .vault-chip-group { margin-bottom: 20px; }
  .vault-chip-group-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 10px; }
  .vault-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .vault-chip { padding: 7px 14px; border-radius: 20px; border: 1px solid rgba(108,124,255,0.09); background: rgba(108,124,255,0.02); color: var(--text-dim); font-size: 11.5px; cursor: pointer; transition: all 0.15s; }
  .vault-chip.on { background: rgba(176,184,255,0.18); border-color: #9AA6FF; color: #EDEFFF; }
  .vault-streak-row { display: flex; gap: 5px; margin-top: 14px; }
  .vault-streak-dot { width: 15px; height: 15px; border-radius: 4px; background: rgba(108,124,255,0.05); border: 1px solid rgba(108,124,255,0.06); }
  .vault-streak-dot.on { background: #9AA6FF; border-color: #9AA6FF; }
  .vault-note { width: 100%; background: rgba(108,124,255,0.03); border: 1px solid rgba(108,124,255,0.08); border-radius: 10px; color: var(--text); font-family: var(--sans); font-size: 12.5px; padding: 10px 12px; resize: vertical; min-height: 60px; }
  .vault-journal-entry { padding: 14px 16px; border-radius: 12px; background: rgba(108,124,255,0.025); border: 1px solid rgba(108,124,255,0.06); margin-bottom: 10px; cursor: default; }
  .vault-journal-entry.locked-hidden { filter: blur(6px); cursor: pointer; user-select: none; }
  .vault-journal-meta { display: flex; gap: 8px; align-items: center; font-family: var(--mono); font-size: 9px; color: var(--text-dim); margin-bottom: 6px; letter-spacing: 0.05em; }
  .vault-tag { padding: 2px 8px; border-radius: 10px; background: rgba(176,184,255,0.15); color: #D6DCFF; font-size: 9px; }

  /* ═══════════════════════════════════════════════════════════
     ZENTHRA DESIGN SYSTEM — Phase 4 polish layer
     Everything below rides on the tokens above; nothing here
     introduces a hue outside the black/gold/semantic family.
     ═══════════════════════════════════════════════════════════ */

  /* Global radius + motion scaling, driven by Settings */
  .hero-card, .glass, .tree-card, .note-card, .project-card, .age-stage,
  .tc-select-card, .skill-node, .energy-btn, .daytype-cell, .planner-day-block,
  .btn, .form-group select, .form-group input, .form-group textarea, .badge,
  .stat-chip, .toast, .nav-tabs, .nav-dropdown { border-radius: calc(var(--r, 14px) * var(--radius-scale)); }
  .btn { --r: 10px; }
  .form-group select, .form-group input, .form-group textarea { --r: 10px; }
  .badge, .tag, .stat-chip { --r: 20px; }

  *, *::before, *::after { transition-duration: calc(0.2s * var(--anim-speed)); }
  .hero-card, .glass, .tree-card, .note-card, .tc-select-card { transition-duration: calc(0.28s * var(--anim-speed)) !important; }

  /* Premium scrollbar */
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: linear-gradient(var(--gold-deep), var(--gold)); border-radius: 4px; border: 2px solid var(--bg); background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background: var(--gold); background-clip: padding-box; }
  * { scrollbar-width: thin; scrollbar-color: var(--gold-deep) transparent; }

  /* Sticky section headers already exist via .card-title; give them a subtle backdrop when pinned */
  .card-title { position: relative; }

  /* Focus-visible — accessible, on-brand */
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
  textarea:focus-visible, [tabindex]:focus-visible, .nav-tab:focus-visible,
  .hero-card:focus-visible, .tc-select-card:focus-visible {
    outline: 2px solid var(--gold-bright);
    outline-offset: 2px;
    border-radius: 6px;
  }

  /* Premium buttons */
  .btn { position: relative; overflow: hidden; }
  .btn-primary {
    background: linear-gradient(135deg, var(--gold-soft), var(--gold) 55%, var(--gold-deep));
    color: #14110A; font-weight: 700; box-shadow: 0 2px 12px rgba(108,124,255,calc(0.25*var(--glow-intensity)));
  }
  .btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 4px 20px rgba(108,124,255,calc(0.4*var(--glow-intensity))); }
  .btn-primary:active { transform: translateY(0) scale(0.98); }
  .btn-ghost:hover { background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--border-bright); }
  .btn-ghost:active, .btn:active { transform: scale(0.97); }
  .btn::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, transparent 60%);
    opacity: 0; transform: scale(0.4); transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none;
  }
  .btn.zenthra-ripple::after { opacity: 1; transform: scale(1.6); transition: opacity 0.5s ease, transform 0.5s ease; }

  /* Premium inputs / selects / dropdowns */
  .form-group select, .form-group input, .form-group textarea {
    background: var(--surface); border-color: var(--border);
  }
  .form-group select:hover, .form-group input:hover, .form-group textarea:hover { border-color: var(--border-bright); }
  .form-group select:focus, .form-group input:focus, .form-group textarea:focus {
    border-color: var(--gold); box-shadow: 0 0 0 3px rgba(108,124,255,calc(0.15*var(--glow-intensity)));
  }
  .form-group select { background-image: linear-gradient(45deg, transparent 50%, var(--gold-soft) 50%), linear-gradient(135deg, var(--gold-soft) 50%, transparent 50%); background-position: calc(100% - 18px) center, calc(100% - 13px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; }

  /* Premium range sliders (used by appearance settings below) */
  input[type="range"].zenthra-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--gold-deep), var(--gold) var(--pct,50%), var(--border) var(--pct,50%)); outline: none; cursor: pointer; }
  input[type="range"].zenthra-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 0 3px rgba(108,124,255,0.2), 0 2px 6px rgba(0,0,0,0.4); cursor: pointer; transition: transform 0.15s ease; }
  input[type="range"].zenthra-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
  input[type="range"].zenthra-slider::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--gold-bright); border: none; box-shadow: 0 0 0 3px rgba(108,124,255,0.2); cursor: pointer; }

  /* Premium toggle switch */
  .zenthra-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
  .zenthra-switch input { opacity: 0; width: 0; height: 0; }
  .zenthra-switch .track { position: absolute; inset: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; transition: all 0.25s ease; cursor: pointer; }
  .zenthra-switch .track::before { content: ''; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; background: var(--text-dim); border-radius: 50%; transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1); }
  .zenthra-switch input:checked + .track { background: rgba(108,124,255,0.25); border-color: var(--gold); }
  .zenthra-switch input:checked + .track::before { transform: translateX(18px); background: var(--gold-bright); box-shadow: 0 0 8px rgba(108,124,255,0.7); }

  /* Card hover lift + gold hairline sweep */
  .hero-card, .glass, .tree-card, .note-card, .project-card, .skill-node, .tc-select-card {
    will-change: transform;
  }
  .hero-card::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: linear-gradient(120deg, transparent 30%, rgba(108,124,255,calc(0.5*var(--glow-intensity))) 50%, transparent 70%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity 0.4s ease; pointer-events: none;
  }
  .hero-card:hover::after { opacity: 1; }

  /* Section / page transitions */
  @keyframes zenthraFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes zenthraScaleIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
  .section.active { animation: zenthraFadeUp calc(0.4s * var(--anim-speed)) cubic-bezier(0.22,1,0.36,1) both; }
  .nav-dropdown, #cmdOverlay > div, .toast.show, .zenthra-modal-card { animation: zenthraScaleIn calc(0.25s * var(--anim-speed)) ease both; }

  /* Achievement / unlock / success burst */
  @keyframes zenthraUnlockPop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
  @keyframes zenthraGoldPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(108,124,255,0); } 50% { box-shadow: 0 0 22px 5px rgba(108,124,255,calc(0.45*var(--glow-intensity))); } }
  .zenthra-unlock { animation: zenthraUnlockPop calc(0.5s * var(--anim-speed)) cubic-bezier(0.34,1.56,0.64,1) both, zenthraGoldPulse calc(1.6s * var(--anim-speed)) ease 1; }

  /* Progress bar / ring fill shimmer */
  @keyframes zenthraShimmer { 0% { background-position: -120px 0; } 100% { background-position: 120px 0; } }
  .xp-bar-fill, .mini-bar-fill, .skill-xp-fill { position: relative; overflow: hidden; }
  .xp-bar-fill::after, .mini-bar-fill::after, .skill-xp-fill::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    background-size: 60px 100%; animation: zenthraShimmer 2.2s linear infinite;
  }

  /* Sidebar / nav-dropdown transitions already animate; add active glow */
  .nav-tab.active, .nav-group.has-active .nav-group-btn { box-shadow: inset 0 0 0 1px rgba(108,124,255,calc(0.35*var(--glow-intensity))); }

  html.reduced-motion .xp-bar-fill::after, html.reduced-motion .mini-bar-fill::after, html.reduced-motion .skill-xp-fill::after,
  html.reduced-motion .live-dot, html.reduced-motion .section.active { animation: none !important; }

  /* Appearance / settings panel (Phase 4) */
  .zenthra-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  @media (max-width: 900px) { .zenthra-settings-grid { grid-template-columns: 1fr; } }
  .zenthra-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .zenthra-setting-row:last-child { border-bottom: none; }
  .zenthra-setting-label { font-family: var(--sans); font-size: 12.5px; font-weight: 500; color: var(--text); }
  .zenthra-setting-sub { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }
  .zenthra-setting-control { width: 150px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
  .zenthra-setting-val { font-family: var(--mono); font-size: 10px; color: var(--gold-soft); width: 34px; text-align: right; flex-shrink: 0; }

/* ── Auth gate additions (rebuild) ── */
.auth-gate-box { width: 360px; }
.auth-gate-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.auth-gate-tabs button { flex: 1; font-size: 11px; }
.auth-gate-tabs button.on { background: rgba(108,124,255,.18); border-color: var(--accent-game); color: var(--text); }
.auth-gate-link { background: none; border: 0; color: var(--text-dim); font-size: 11px; text-decoration: underline; cursor: pointer; padding: 4px 0; }
.sync-status-pill.status-stale { color: var(--accent-warn); border-color: rgba(224,160,48,0.3); cursor: pointer; }