:root{
    --bg: #f3f6fb;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --surface-3: #eef3fb;
    --text: #0f172a;
    --muted: #64748b;
    --border: #dbe4f0;
    --input-border: #cbd5e1;
    --primary: #1677ff;
    --primary-hover: #0f67df;
    --dark-btn: #0f172a;
    --success-bg: #dcfce7;
    --success-text: #166534;
    --warning-bg: #fef3c7;
    --warning-text: #92400e;
    --error-bg: #fee2e2;
    --error-text: #991b1b;
    --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);

    --chart-1: #1677ff;
    --chart-2: #10b981;
    --chart-3: #f59e0b;
    --chart-4: #ef4444;
}

html[data-theme="dark"]{
    --bg: #041226;
    --surface: #08182f;
    --surface-2: #0c1f3b;
    --surface-3: #132846;
    --text: #e5eefb;
    --muted: #8ea4c7;
    --border: #183252;
    --input-border: #294261;
    --primary: #4c8fff;
    --primary-hover: #76a8ff;
    --dark-btn: #dbeafe;
    --success-bg: #052e16;
    --success-text: #86efac;
    --warning-bg: #3b2a09;
    --warning-text: #fcd34d;
    --error-bg: #450a0a;
    --error-text: #fca5a5;
    --shadow: 0 14px 40px rgba(0, 0, 0, 0.35);

    --chart-1: #4c8fff;
    --chart-2: #34d399;
    --chart-3: #fbbf24;
    --chart-4: #f87171;
}

html, body{
    background: var(--bg) !important;
    color: var(--text) !important;
}

body{
    transition: background .2s ease, color .2s ease;
}

.topbar, .card, .box, .container{
    background: var(--surface) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow) !important;
    border: 1px solid var(--border) !important;
}

h1, h2, h3, h4, h5, h6, p, span, strong, label, td, th, div, li{
    color: inherit;
}

a{
    color: var(--primary);
}

input, select, textarea{
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--input-border) !important;
}

input::placeholder, textarea::placeholder{
    color: var(--muted) !important;
}

table th{
    background: var(--surface-3) !important;
}

table th, table td{
    border-bottom: 1px solid var(--border) !important;
}

pre{
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

.btn{
    background: var(--primary) !important;
    color: #fff !important;
    border: 0 !important;
}

.btn:hover{
    background: var(--primary-hover) !important;
}

.btn-light{
    background: var(--surface-3) !important;
    color: var(--text) !important;
}

.btn-dark, .logout, .logout-button{
    background: var(--dark-btn) !important;
    color: var(--bg) !important;
}

.alert-success{
    background: var(--success-bg) !important;
    color: var(--success-text) !important;
}

.alert-error{
    background: var(--error-bg) !important;
    color: var(--error-text) !important;
}

.theme-toggle{
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:40px;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid var(--border);
    background:linear-gradient(180deg, var(--surface), var(--surface-2));
    color:var(--text);
    cursor:pointer;
    box-shadow:var(--shadow);
    font-size:12px;
    font-weight:800;
    letter-spacing:.01em;
    transition:
        background .18s ease,
        border-color .18s ease,
        transform .12s ease,
        box-shadow .18s ease;
}

.theme-toggle:hover{
    background:var(--surface-3);
    border-color:var(--primary);
    transform:translateY(-1px);
}

.theme-toggle:active{
    transform:translateY(0);
}

.theme-toggle:focus-visible{
    outline:none;
    border-color:var(--primary);
    box-shadow:
        0 0 0 3px rgba(22,119,255,.18),
        var(--shadow);
}

.theme-toggle__icon{
    width:22px;
    height:22px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--surface-3);
    border:1px solid var(--border);
    font-size:12px;
    flex:0 0 22px;
}

.theme-toggle__text{
    line-height:1;
    white-space:nowrap;
}

html[data-theme="dark"] .theme-toggle{
    background:linear-gradient(180deg, var(--surface), var(--surface-2));
}

html[data-theme="dark"] .theme-toggle__icon{
    background:rgba(255,255,255,.04);
}