/* ============ App-specific variables ============ */
    :root {
      --sidebar-width: 260px;
    }

    /* Legacy variable mapping (for gradual migration) */
    :root {
      --bg: var(--bg-primary);
      --bg-darker: var(--bg-secondary);
      --card-bg: var(--bg-secondary);
      --sidebar-bg: var(--bg-secondary);
      --border: var(--border-primary);
      --text: var(--text-primary);
      --text-dim: var(--text-secondary);
      --green: var(--success);
      --red: var(--error);
      --yellow: var(--warning);
      --purple: #a855f7;
      --orange: var(--warning);
    }

    /* ============ Theme: Default (Telegram/TON Blue) ============ */
    [data-theme="default"] {
      /* Uses base design system colors - no overrides needed */
      /* Legacy aliases for consistency */
      --bg: var(--bg-primary);
      --bg-darker: var(--bg-secondary);
      --card-bg: var(--bg-secondary);
      --sidebar-bg: var(--bg-secondary);
      --border: var(--border-primary);
      --text: var(--text-primary);
      --text-dim: var(--text-secondary);
      --green: var(--success);
      --red: var(--error);
      --yellow: var(--warning);
      --purple: #a855f7;
      --orange: var(--warning);
    }

    /* ============ Theme: Fragment Dark (GitHub-style) ============ */
    [data-theme="fragment-dark"] {
      /* Design system overrides */
      --bg-primary: #0d1117;
      --bg-secondary: #161b22;
      --bg-tertiary: #1c2128;
      --bg-hover: #252b33;
      --border-primary: #30363d;
      --border-secondary: #484f58;
      --text-primary: #e6edf3;
      --text-secondary: #7d8590;
      --accent: #2f81f7;
      --accent-hover: #58a6ff;
      --success: #3fb950;
      --error: #f85149;
      --warning: #d29922;
      /* Legacy aliases */
      --bg: #0d1117;
      --bg-darker: #010409;
      --card-bg: #161b22;
      --sidebar-bg: #0d1117;
      --border: #30363d;
      --text: #e6edf3;
      --text-dim: #7d8590;
      --green: #3fb950;
      --red: #f85149;
      --yellow: #d29922;
      --purple: #a371f7;
      --orange: #db6d28;
    }

    /* ============ Theme: Fragment Premium (Gold accent) ============ */
    [data-theme="fragment-premium"] {
      /* Design system overrides */
      --bg-primary: #0a0a0a;
      --bg-secondary: #141414;
      --bg-tertiary: #1a1a1a;
      --bg-hover: #222222;
      --border-primary: #2a2a2a;
      --border-secondary: #3a3a3a;
      --text-primary: #ffffff;
      --text-secondary: #888888;
      --accent: #d4a853;
      --accent-hover: #f0c264;
      --success: #4ade80;
      --error: #f87171;
      --warning: #fbbf24;
      /* Legacy aliases */
      --bg: #0a0a0a;
      --bg-darker: #000000;
      --card-bg: #141414;
      --sidebar-bg: #0f0f0f;
      --border: #2a2a2a;
      --text: #ffffff;
      --text-dim: #888888;
      --green: #4ade80;
      --red: #f87171;
      --yellow: #fbbf24;
      --purple: #c084fc;
      --orange: #fb923c;
    }

    /* ============ Theme: TON Crystal (Cyan/Teal) ============ */
    [data-theme="ton-crystal"] {
      /* Design system overrides */
      --bg-primary: #0c1821;
      --bg-secondary: #132230;
      --bg-tertiary: #1a2d3d;
      --bg-hover: #22394a;
      --border-primary: #1f3a4f;
      --border-secondary: #2a4a5f;
      --text-primary: #e0f2fe;
      --text-secondary: #7dd3fc;
      --accent: #0ea5e9;
      --accent-hover: #38bdf8;
      --success: #34d399;
      --error: #fb7185;
      --warning: #fcd34d;
      /* Legacy aliases */
      --bg: #0c1821;
      --bg-darker: #060d13;
      --card-bg: #132230;
      --sidebar-bg: #0f1922;
      --border: #1f3a4f;
      --text: #e0f2fe;
      --text-dim: #7dd3fc;
      --green: #34d399;
      --red: #fb7185;
      --yellow: #fcd34d;
      --purple: #a78bfa;
      --orange: #fdba74;
    }

    /* ============ Theme Switcher in Topbar ============ */
    .theme-switcher {
      display: flex !important;
      align-items: center;
      gap: 6px;
      background: var(--card-bg) !important;
      border: 1px solid var(--border) !important;
      color: var(--text-dim) !important;
      padding: 6px 10px !important;
      transition: all 0.15s;
    }
    .theme-switcher:hover {
      background: var(--bg-darker) !important;
      color: var(--text) !important;
      border-color: var(--text-dim) !important;
    }
    .theme-switcher .theme-icon {
      font-size: 13px;
      color: var(--accent);
    }
    .theme-switcher .theme-name {
      font-size: 11px;
      font-weight: 500;
      max-width: 90px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .theme-switcher kbd {
      font-size: 9px;
      padding: 1px 4px;
      background: var(--bg-darker);
      border-radius: 3px;
      font-family: inherit;
      opacity: 0.5;
      border: 1px solid var(--border);
    }