*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg: #0f1119;
    --bg-glass: rgba(22, 27, 44, 0.92);
    --bg-card: rgba(255, 255, 255, 0.04);
    --bg-card-hover: rgba(255, 255, 255, 0.07);
    --border-glass: rgba(255, 255, 255, 0.06);
    --border-card: rgba(255, 255, 255, 0.08);
    --text-primary: #e8edf5;
    --text-secondary: #8b95a8;
    --text-muted: #59647a;
    --accent: #5b8def;
    --accent-glow: rgba(91, 141, 239, 0.25);
    --accent-hover: #7ba7f5;
    --green: #34d399;
    --green-bg: rgba(52, 211, 153, 0.12);
    --red: #f87171;
    --red-bg: rgba(248, 113, 113, 0.12);
    --orange: #fb923c;
    --orange-bg: rgba(251, 146, 60, 0.12);
    --yellow: #facc15;
    --yellow-bg: rgba(250, 204, 21, 0.12);
    --radius: 14px;
    --radius-sm: 8px;
    --radius-xs: 6px;
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-lg: 0 25px 60px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --toggle-w: 85px;
}

[data-theme="light"] {
    --bg: #f1f5f9;
    --bg-glass: rgba(255, 255, 255, 0.88);
    --bg-card: rgba(0, 0, 0, 0.03);
    --bg-card-hover: rgba(0, 0, 0, 0.05);
    --border-glass: rgba(0, 0, 0, 0.08);
    --border-card: rgba(0, 0, 0, 0.1);
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --accent: #2563eb;
    --accent-glow: rgba(37, 99, 235, 0.2);
    --accent-hover: #1d4ed8;
    --green: #16a34a;
    --green-bg: rgba(22, 163, 74, 0.1);
    --red: #dc2626;
    --red-bg: rgba(220, 38, 38, 0.1);
    --orange: #ea580c;
    --orange-bg: rgba(234, 88, 12, 0.1);
    --yellow: #ca8a04;
    --yellow-bg: rgba(202, 138, 4, 0.1);
    --shadow-lg: 0 25px 60px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.1);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
}