:root,
body.theme-dark,
[data-theme="dark"] {
    --bg:radial-gradient(circle at 7% 0%, rgba(74, 132, 220, 0.22), transparent 270px),
        radial-gradient(circle at 95% 12%, rgba(60, 100, 170, 0.12), transparent 320px),
        linear-gradient(135deg, #06111f 0%, #071426 45%, #050e1b 100%);
    --panel:linear-gradient(145deg, #111c2e 0%, #0b1728 48%, #071321 100%) padding-box,
        radial-gradient(
            circle at 0% 0%,
            rgba(92, 157, 255, 0.95) 0%,
            rgba(84, 137, 220, 0.75) 22%,
            rgba(65, 90, 135, 0.55) 48%,
            rgba(54, 69, 100, 0.48) 100%
        ) border-box;
    --panel-strong:#0b1020;
    --panel-soft:#162033;
    --surface:var(--panel);
    --surface-soft:rgba(255,255,255,.035);
    --surface-soft-2:rgba(255,255,255,.025);
    --surface-soft-3:rgba(255,255,255,.018);
    --surface-hover:rgba(255,255,255,.07);
    --surface-strong:rgba(255,255,255,.08);
    --surface-dark-soft:rgba(0,0,0,.12);

    --text:#e5e7eb;
    --hero-text: #f8fafc;
    --muted:#94a3b8;
    --accent:#60a5fa;
    --accent-hover:#3b82f6;
    --accent-subtle:rgba(96,165,250,.12);
    --line:#334155;
    --border:var(--line);

    --input-bg:#0b1220;
    --input-text:#e5e7eb;
    --input-border:#334155;

    --button-bg:#2563eb;
    --button-text:#ffffff;
    --button-border:rgba(120,160,255,.22);
    --button-bg-soft:rgba(15,25,45,.72);
    --button-bg-hover:rgba(18,32,58,.88);

    --hero-tablet: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), rgba(8, 15, 30, .92);
    --hero-book-after: rgba(147, 197, 253, .35);
    --hero-book: linear-gradient(90deg, rgba(96, 165, 250, .22), rgba(37, 99, 235, .08)), rgba(15, 23, 42, .82);
    --hero-number: rgba(15, 23, 42, .48);
    --hero-orbit: rgba(15, 23, 42, .48);

    --home-hero-bg:
        radial-gradient(circle at 0% 20%, rgba(96, 165, 250, .16), transparent 34%),
        radial-gradient(circle at 88% 48%, rgba(37, 99, 235, .18), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
        #0f172a;
    --home-hero-border:rgba(96, 165, 250, .32);
    --home-hero-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 18px 42px rgba(0,0,0,.24),
        0 0 34px rgba(37, 99, 235, .16);
    --home-hero-title:#f8fafc;
    --home-hero-text:#cbd5e1;
    --home-hero-muted:#9ca3af;
    --home-hero-grid:rgba(96, 165, 250, .04);
    --home-hero-core-bg:
        radial-gradient(circle at 30% 20%, rgba(96, 165, 250, .25), transparent 48%),
        linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.018)),
        rgba(8, 15, 30, .92);
    --home-hero-core-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 20px 42px rgba(0,0,0,.3),
        0 0 42px rgba(37, 99, 235, .22);
    --home-hero-chip-bg:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.014)),
        rgba(15, 23, 42, .76);
    --home-hero-chip-text:#dbeafe;
    --home-hero-chip-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 14px 28px rgba(0,0,0,.22),
        0 0 24px rgba(37, 99, 235, .12);
    --home-hero-line:linear-gradient(90deg, transparent, rgba(96, 165, 250, .38), transparent);

    --code-bg:#020617;
    --code-text:#e5e7eb;
    --code-editor-bg:#08111f;
    --code-editor-text:#e5edf8;
    --code-editor-border:#475569;
    --code-gutter-bg:#0d1828;
    --code-gutter-text:#94a3b8;
    --code-active-line:#12233b;
    --code-selection:#1e3a5f;
    --code-cursor:#93c5fd;
    --code-token-comment:#a3b1c2;
    --code-token-keyword:#fca5a5;
    --code-token-string:#86efac;
    --code-token-number:#fde68a;
    --code-token-function:#d8b4fe;
    --code-token-variable:#e5edf8;
    --code-token-operator:#f9a8d4;
    --code-token-builtin:#67e8f9;
    --code-token-error-bg:#7f1d1d;
    --code-token-error-text:#fecaca;
    --code-output-bg:#08111f;
    --code-output-border:#334155;
    --code-output-text:#e5edf8;
    --code-stdout-bg:#0d1828;
    --code-stderr-bg:#2b1117;

    --success-bg:#052e1a;
    --success-text:#bbf7d0;
    --success-accent:#22c55e;

    --danger-bg:#7f1d1d;
    --danger-text:#fca5a5;
    --danger-soft-text:#fca5a5;
    --danger-border:#ef4444;

    --warning-text:#fde68a;
    --warning-bg:rgba(245,158,11,.08);

    --overlay-bg:rgba(0,0,0,.55);
    --drawer-shadow:rgba(0,0,0,.5);
    --popup-shadow:rgba(0,0,0,.34);
    --popup-shadow-soft:rgba(0,0,0,.28);
    --shadow-color-md:rgba(0,0,0,.24);
    --toast-shadow:rgba(0,0,0,.42);

    --icon-blue:#80b9ff;
    --icon-border:var(--line);
    --gold:#f2b544;
    --blue-shadow:#518bd4;
    --course-pill-bg:#192236;
    --course-pill-shadow:#4a7bc7;
    --course-stat-bg-shadow:transparent;
    --course-stat-bg: radial-gradient(circle at top left, rgba(96, 165, 250, 0.22), transparent 32%), linear-gradient(135deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.96));
    --course-stat-grid-bg: rgba(0,0,0,.13);
    --course-landing-bg: radial-gradient(circle at 20% 0%, rgba(96, 165, 250, .12), transparent 34%), linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), rgba(15, 23, 42, .72);
    --highlight:#facc15;

    --toast-bg:#090f1a;
    --toast-text:#e5e7eb;
    --toast-title:#f8fafc;
    --toast-message:#b6c2d2;
    --toast-meta:#7f8ea3;
    --toast-close:#94a3b8;
    --toast-info:#3b82f6;
    --toast-warning:#f59e0b;

    --black:#000;
    --white:#fff;

    --font-family-base:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    --font-family-mono:"Monaco","Menlo","Ubuntu Mono",ui-monospace,monospace;

    --font-weight-medium:500;
    --font-weight-semibold:600;
    --font-weight-bold:700;

    --radius-sm:6px;
    --radius-md:12px;
    --radius-lg:16px;
    --shadow-md:0 4px 12px rgba(0,0,0,.15);
    --transition-base:.22s ease;

    --site-header-height:62px;
    --site-container-width:1200px;
    --site-container-padding:18px;
    --site-card-padding:18px;
    --site-card-radius:16px;
    --site-card-gap:16px;
    --site-grid-gap:16px;
    --site-border-width:1px;
    --site-font-base:18px;
    --site-line-height:1.55;

    --auth-gradient:linear-gradient(140deg,rgba(21,25,33),rgba(32,68,150));
    --nav-bg: rgba(255,255,255,.035);
    --nav-border: #334155;
    --nav-text: #e5e7eb;
    --nav-muted: #94a3b8;
    --nav-hover-bg: rgba(96,165,250,.12);
    --nav-hover-border: #60a5fa;
    --nav-hover-text: #60a5fa;

}