:root {
    --bg: #090b10;
    --bg-soft-1: rgba(109, 124, 255, .22);
    --bg-soft-2: rgba(34, 211, 238, .15);
    --card: #111620;
    --card2: #151c28;
    --line: #263244;
    --text: #edf3ff;
    --muted: #99a7bd;
    --primary: #6d7cff;
    --primary2: #22d3ee;
    --link: #9fb0ff;
    --nav-bg: rgba(9, 11, 16, .78);
    --nav-line: rgba(255, 255, 255, .07);
    --field-bg: #0c111b;
    --placeholder: #69758a;
    --card-shadow: rgba(0, 0, 0, .28);
    --soft-panel: rgba(255, 255, 255, .045);
    --soft-line: rgba(255, 255, 255, .08);
    --copy-bg: #0c111b;
    --copy-line: #354159;
    --copy-text: #d8e4ff;
    --focus-ring: rgba(109, 124, 255, .18);
    --card-top: rgba(21, 28, 40, .94);
    --card-bottom: rgba(17, 22, 32, .94);
    --hero-primary: rgba(109, 124, 255, .20);
    --hero-secondary: rgba(34, 211, 238, .09);
}

html[data-theme="light"] {
    --bg: #f5f7fb;
    --bg-soft-1: rgba(76, 111, 255, .13);
    --bg-soft-2: rgba(0, 150, 136, .10);
    --card: #ffffff;
    --card2: #f9fbff;
    --line: #d8e0ee;
    --text: #1b2433;
    --muted: #66758a;
    --primary: #3457d5;
    --primary2: #00a6a6;
    --link: #244dba;
    --nav-bg: rgba(255, 255, 255, .86);
    --nav-line: rgba(27, 36, 51, .11);
    --field-bg: #ffffff;
    --placeholder: #7c8797;
    --card-shadow: rgba(28, 42, 68, .12);
    --soft-panel: rgba(52, 87, 213, .07);
    --soft-line: rgba(27, 36, 51, .11);
    --copy-bg: #f6f8fc;
    --copy-line: #b8c4d8;
    --copy-text: #263449;
    --focus-ring: rgba(52, 87, 213, .18);
    --card-top: rgba(255, 255, 255, .96);
    --card-bottom: rgba(249, 251, 255, .96);
    --hero-primary: rgba(52, 87, 213, .12);
    --hero-secondary: rgba(0, 166, 166, .08);
}

* { box-sizing: border-box; }

body {
    background:
        radial-gradient(circle at 10% 0%, var(--bg-soft-1), transparent 28%),
        radial-gradient(circle at 88% 8%, var(--bg-soft-2), transparent 30%),
        var(--bg);
    color: var(--text);
    min-height: 100vh;
}

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

.glass-nav {
    background: var(--nav-bg);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--nav-line);
}

html[data-theme="light"] .navbar-dark .navbar-brand,
html[data-theme="light"] .navbar-dark .navbar-nav .nav-link {
    color: #263449;
}

html[data-theme="light"] .navbar-dark .navbar-nav .nav-link {
    border-radius: 12px;
    padding-left: .72rem;
    padding-right: .72rem;
}

html[data-theme="light"] .navbar-dark .navbar-nav .nav-link:hover,
html[data-theme="light"] .navbar-dark .navbar-nav .nav-link:focus {
    background: rgba(52, 87, 213, .08);
    color: var(--primary);
}

html[data-theme="light"] .navbar-dark .navbar-nav .text-warning {
    background: rgba(181, 116, 0, .10);
    color: #8a5700 !important;
}

html[data-theme="light"] .navbar-dark .navbar-toggler {
    border-color: rgba(27, 36, 51, .18);
    filter: invert(1);
}

.brand-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 99px;
    background: linear-gradient(135deg, var(--primary), var(--primary2));
    box-shadow: 0 0 20px rgba(109, 124, 255, .7);
    margin-right: 8px;
}

.card-dark {
    background: linear-gradient(180deg, var(--card-top), var(--card-bottom));
    border: 1px solid var(--soft-line);
    border-radius: 24px;
    box-shadow: 0 18px 50px var(--card-shadow);
}

.muted { color: var(--muted); }

.form-control,
.form-select {
    background: var(--field-bg);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 14px;
}

.form-control:focus,
.form-select:focus {
    background: var(--field-bg);
    color: var(--text);
    border-color: var(--primary);
    box-shadow: 0 0 0 .2rem var(--focus-ring);
}

.form-control::placeholder { color: var(--placeholder); }

.btn {
    border-radius: 14px;
    font-weight: 700;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), #8a5cff);
    border: 0;
}

.btn-info-soft {
    background: rgba(34, 211, 238, .12);
    border: 1px solid rgba(34, 211, 238, .25);
    color: #b9f6ff;
}

html[data-theme="light"] .btn-info-soft {
    background: rgba(0, 166, 166, .10);
    border-color: rgba(0, 166, 166, .25);
    color: #066;
}

.btn-theme-toggle {
    border: 1px solid var(--soft-line);
    background: var(--soft-panel);
    color: var(--text);
    width: 34px;
    height: 34px;
    min-width: 34px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    line-height: 1;
    border-radius: 50%;
}

.btn-theme-toggle span {
    font-size: 1rem;
    line-height: 1;
}

.btn-theme-toggle:hover,
.btn-theme-toggle:focus {
    border-color: var(--primary);
    color: var(--text);
}

html[data-theme="light"] .btn-theme-toggle {
    background: rgba(0, 166, 166, .10);
    border-color: rgba(0, 126, 126, .30);
    color: #006b6b;
}

html[data-theme="light"] .btn-theme-toggle:hover,
html[data-theme="light"] .btn-theme-toggle:focus {
    background: rgba(0, 166, 166, .16);
    border-color: #008484;
    color: #004f4f;
}

html[data-theme="light"] .btn-outline-light {
    background: #eef3ff;
    border-color: #b8c4d8;
    color: #263449;
}

html[data-theme="light"] .btn-outline-light:hover,
html[data-theme="light"] .btn-outline-light:focus {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

html[data-theme="light"] .glass-nav .btn-outline-light {
    background: rgba(52, 87, 213, .07);
    border-color: rgba(52, 87, 213, .24);
    color: #263449;
}

html[data-theme="light"] .glass-nav .btn-outline-light:hover,
html[data-theme="light"] .glass-nav .btn-outline-light:focus {
    background: rgba(52, 87, 213, .13);
    border-color: rgba(52, 87, 213, .38);
    color: var(--primary);
}

html[data-theme="light"] .glass-nav .btn-logout {
    background: rgba(220, 53, 69, .08);
    border-color: rgba(220, 53, 69, .30);
    color: #b02a37;
}

html[data-theme="light"] .glass-nav .btn-logout:hover,
html[data-theme="light"] .glass-nav .btn-logout:focus {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

.stat {
    padding: 18px;
    border-radius: 20px;
    background: var(--soft-panel);
    border: 1px solid var(--soft-line);
}

.hero {
    padding: 34px;
    border-radius: 28px;
    background: linear-gradient(135deg, var(--hero-primary), var(--hero-secondary));
    border: 1px solid var(--soft-line);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--soft-line);
}

.badge-pending { background: #735d17; color: #ffe08a; }
.badge-approved { background: #104b34; color: #84ffc2; }
.badge-rejected { background: #5a1b28; color: #ff9daf; }

html[data-theme="light"] .badge-pending { background: #fff2bf; color: #775a00; }
html[data-theme="light"] .badge-approved { background: #dff8ec; color: #14633f; }
html[data-theme="light"] .badge-rejected { background: #ffe2e8; color: #8f263b; }

.qr-box {
    background: white;
    border-radius: 22px;
    padding: 12px;
}

.copy-box {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: var(--copy-bg);
    border: 1px dashed var(--copy-line);
    border-radius: 14px;
    padding: 12px;
    color: var(--copy-text);
}

.app-icon {
    width: 54px;
    height: 54px;
    border-radius: 17px;
    background: linear-gradient(135deg, var(--primary), var(--primary2));
    display: grid;
    place-items: center;
    font-weight: 900;
    color: white;
}

.mini { font-size: .85rem; }
.alert { border-radius: 16px; }
.text-secondary { color: var(--muted) !important; }

html[data-theme="light"] .modal-content.bg-dark {
    background: var(--card) !important;
    color: var(--text) !important;
    border: 1px solid var(--soft-line) !important;
}

html[data-theme="light"] .modal-header,
html[data-theme="light"] .modal-footer {
    border-color: var(--soft-line) !important;
}

html[data-theme="light"] .btn-close-white {
    filter: none;
}