body.dark {
    --bg-primary: #0a1628;
    --bg-secondary: #0f1f38;
    --bg-glass: rgba(15, 25, 45, .65);
    --bg-glass-border: rgba(255, 255, 255, .06);
    --bg-input: rgba(15, 25, 45, .5);
    --bg-input-border: rgba(255, 255, 255, .08);
    --bg-input-focus: rgba(20, 35, 60, .6);
    --bg-card-gradient: linear-gradient(145deg, rgba(20,35,60,.55), rgba(12,22,40,.4));
    --bg-card-border: rgba(255, 255, 255, .1);
    --bg-mini-card: rgba(10, 20, 38, .6);
    --bg-mini-card-border: rgba(255, 255, 255, .05);
    --text-primary: #e8edf5;
    --text-secondary: rgba(232, 237, 245, .72);
    --text-muted: rgba(232, 237, 245, .5);
    --text-faint: rgba(232, 237, 245, .4);
    --border-light: rgba(255, 255, 255, .06);
    --border-card-inner: rgba(255, 255, 255, .12);
    --glow-blue: #1a5a9e;
    --glow-blue2: #143d6e;
    --glow-blue3: #1e6cb5;
    --accent: #4a9eff;
    --accent-text: #0a1628;
    --green: #8de67a;
    --shadow-dark: rgba(0, 0, 0, .3);
    --shadow-dark2: rgba(0, 0, 0, .35);
    --shadow-dark3: rgba(0, 0, 0, .4);
    --shadow-dark4: rgba(0, 0, 0, .3);
    --card-shadow: 0 30px 70px var(--shadow-dark3), inset 0 1px 0 var(--border-card-inner);
}

body.dark {
    background: var(--bg-primary);
}

body.dark .page {
    background:
        radial-gradient(circle at 52% 48%, rgba(26, 90, 158, .2), transparent 28%),
        radial-gradient(circle at 12% 75%, rgba(20, 61, 110, .25), transparent 34%),
        radial-gradient(circle at 88% 15%, rgba(30, 108, 181, .12), transparent 30%),
        linear-gradient(135deg, #081020 0%, var(--bg-secondary) 48%, var(--bg-primary) 100%);
}

body.dark nav {
    background: var(--bg-glass);
    border-color: var(--bg-glass-border);
}

body.dark nav a.active {
    background: var(--accent);
    color: var(--accent-text);
}

body.dark .center-input {
    background: var(--bg-input);
    border-color: var(--bg-input-border);
    color: var(--text-primary);
}

body.dark .center-input:focus {
    border-color: rgba(74, 158, 255, .3);
    background: var(--bg-input-focus);
}

body.dark .execute-btn {
    background: var(--accent);
    color: var(--accent-text);
}

body.dark .card {
    background: var(--bg-card-gradient);
    border-color: var(--bg-card-border);
    box-shadow: var(--card-shadow);
}

body.dark .card-link {
    color: var(--text-primary);
}

body.dark .card-top {
    color: rgba(232, 237, 245, .9);
}

body.dark .tiny-logo {
    background: var(--accent);
    color: var(--accent-text);
}

body.dark .card-bottom button {
    background: rgba(74, 158, 255, .15);
    color: var(--text-primary);
}

body.dark .card-bottom button:active {
    background: rgba(74, 158, 255, .25);
}

body.dark .mini-card {
    background: var(--bg-mini-card);
    border-color: var(--bg-mini-card-border);
}

body.dark .mini-card small {
    color: var(--text-primary);
}

body.dark .stat-row {
    border-color: var(--border-light);
}

body.dark .api-box {
    background: var(--bg-glass);
    border-color: var(--bg-glass-border);
}

body.dark .api-example {
    background: rgba(0, 0, 0, .3);
}

body.dark .error-box {
    background: var(--bg-card-gradient);
    border-color: var(--bg-card-border);
}

body.dark .error-box a {
    background: var(--accent);
    color: var(--accent-text);
}

body.dark .message-area.success {
    background: rgba(46, 160, 67, .15);
    border-color: rgba(46, 160, 67, .25);
    color: #a0e88a;
}

body.dark .message-area.error {
    background: rgba(220, 53, 69, .15);
    border-color: rgba(220, 53, 69, .25);
    color: #ffaaaa;
}