:root {
                /* Colors */
                --navy-900: #142144;
                --navy-800: #0b1a2b;
                --navy-700: #0f2136;
                --ink: #ffffff;
                --muted: #bcd0ef;
                --gold: #e9b84b;
                --gold-2: #ffcb66;
                --blue-1: #1555ff;
                --blue-2: #33a6ff;
                --stroke: rgba(156,179,212,.22);
                --good: #28a745;
                --warn: #fd7e14;
                --bad: #dc3545;
                /* Effects */
                --radius: 22px;
                --shadow: 0 10px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03);
                --focus: #e9b84b;
                --ease: cubic-bezier(.2,.8,.2,1);
                --dur: 160ms;
                --subnav-top: 64px;
                /* computed in JS */
            }

            :root[data-bs-theme="light"] {
                --ink: #0c1730;
                --muted: #4a5a78;
                --stroke: rgba(12,23,48,.12);
                --navy-900: #FAFBED;
                --navy-800: #eef2f8;
                --navy-700: #e7eef8;
                --focus: #e9b84b;
            }

            html {
                color-scheme: light dark;
            }

            * {
                font-family: 'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif
            }

            body {
                color: var(--ink);
                background: var(--navy-900);
                min-height: 100dvh
            }

            a {
                text-decoration: none
            }

            :focus-visible {
                outline: 2px solid var(--focus);
                outline-offset: 3px
            }

            [id] {
                scroll-margin-top: 84px;
            }

            /* Ambient bg */
            .bg-ambient,.bg-ambient-2 {
                position: fixed;
                inset: -20vmax;
                z-index: -3;
                pointer-events: none;
                filter: blur(70px);
                background: radial-gradient(40vmax 30vmax at 20% 15%, #1555ff22, transparent 60%), radial-gradient(35vmax 25vmax at 80% 0%, #ffcb6620, transparent 60%);
                animation: driftA 24s var(--ease) infinite alternate;
            }

            .bg-ambient-2 {
                z-index: -4;
                filter: blur(100px);
                opacity: .6;
                animation: driftB 32s var(--ease) infinite alternate;
            }

            @keyframes driftA {
                from {
                    transform: translate3d(-2%,0,0) rotate(0)
                }

                to {
                    transform: translate3d(2%,1%,0) rotate(8deg)
                }
            }

            @keyframes driftB {
                from {
                    transform: translate3d(1%,-1%,0) rotate(-6deg)
                }

                to {
                    transform: translate3d(-1%,2%,0) rotate(6deg)
                }
            }

            @media (prefers-reduced-motion:reduce) {
                .bg-ambient,.bg-ambient-2 {
                    animation: none;
                    filter: blur(40px)
                }
            }

            .reduced-effects .glass {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }

            .reduced-effects .bg-ambient,.reduced-effects .bg-ambient-2 {
                animation: none !important;
                filter: blur(40px) !important;
            }

            /* Navbar */
            .navbar {
                background: linear-gradient(180deg,rgba(10,23,39,.72),rgba(10,23,39,.42));
                backdrop-filter: blur(10px);
                border-bottom: 1px solid var(--stroke)
            }

            :root[data-bs-theme="light"] .navbar {
                background: linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.65))
            }

            .logo-type {
                font-family: 'Bebas Neue';
                font-size: 1.6rem;
                letter-spacing: .7px;
                color: #fff
            }

            :root[data-bs-theme="light"] .logo-type {
                color: var(--ink)
            }

            /* Light theme: ensure readable links/brand */
            :root[data-bs-theme="light"] .navbar .nav-link, :root[data-bs-theme="light"] .navbar .navbar-brand, :root[data-bs-theme="light"] .logo-type {
                color: var(--ink) !important;
            }

            :root[data-bs-theme="light"] .navbar .nav-link:hover, :root[data-bs-theme="light"] .navbar .nav-link:focus {
                color: var(--ink) !important;
                opacity: .85;
            }

            .btn-gold {
                background: linear-gradient(180deg,var(--gold-2),var(--gold));
                color: #1b1407;
                border: none;
                font-weight: 700;
                transition: filter var(--dur) var(--ease)
            }

            .btn-gold:hover {
                filter: brightness(1.05)
            }

            .btn-outline-light {
                color: #fff;
                border-color: rgba(255,255,255,.28);
                transition: background var(--dur) var(--ease), color var(--dur) var(--ease)
            }

            .btn-outline-light:hover {
                color: #fff!important;
                background: rgba(255,255,255,.08)
            }

            :root[data-bs-theme="light"] .btn-outline-light {
                color: var(--ink);
                border-color: rgba(12,23,48,.25)
            }

            :root[data-bs-theme="light"] .btn-outline-light:hover {
                background: rgba(12,23,48,.06);
                color: var(--ink)!important
            }

            /* Glass */
            .glass {
                position: relative;
                border-radius: var(--radius);
                background: radial-gradient(120% 180% at 10% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%), linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
                border: 1px solid var(--stroke);
                box-shadow: var(--shadow);
                overflow: hidden;
                backdrop-filter: blur(14px);
                -webkit-backdrop-filter: blur(14px);
                transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
                /*height: 192px;*/
            }

            .glass::after {
                content: "";
                position: absolute;
                inset: -20%;
                pointer-events: none;
                background: radial-gradient(30% 50% at 10% 5%, rgba(255,255,255,.08), transparent 60%), radial-gradient(40% 60% at 90% 10%, rgba(21,85,255,.06), transparent 70%), radial-gradient(50% 70% at 50% 120%, rgba(255,203,102,.07), transparent 60%);
                mix-blend-mode: soft-light;
                filter: blur(16px);
                animation: pulseGlow 8s var(--ease) infinite alternate;
            }

            @keyframes pulseGlow {
                0% {
                    transform: translate3d(-2%,-1%,0) scale(1);
                    opacity: .9
                }

                100% {
                    transform: translate3d(2%,1%,0) scale(1.02);
                    opacity: 1
                }
            }

            @media (prefers-reduced-motion:reduce) {
                .glass::after {
                    animation: none
                }
            }

            .lift:hover {
                transform: translateY(-4px)
            }

            /* Hero */
            .auth-hero {
                border-bottom: 1px solid var(--stroke);
                background: linear-gradient(180deg,#0e2240 0%,#0a1b33 100%)
            }

            :root[data-bs-theme="light"] .auth-hero {
                background: linear-gradient(180deg,#eef2f8 0%,#e7eef8 100%)
            }

            .auth-hero h1 {
                font-family: 'Bebas Neue';
                font-size: 3rem;
                letter-spacing: 1px
            }

            .auth-hero p {
                max-width: 60ch
            }

            /* Subnav — sticky + inner scroller */
            .subnav {
                position: sticky;
                top: var(--subnav-top, 64px);
                z-index: 1040;
                backdrop-filter: blur(10px);
                background: linear-gradient(180deg,rgba(10,23,39,.66),rgba(10,23,39,.35));
                border: 1px solid var(--stroke);
                border-radius: 999px;
                padding: .35rem;
                box-shadow: var(--shadow);
            }

            .subnav > .scroller {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                white-space: nowrap;
                padding: .35rem 0;
            }

            :root[data-bs-theme="light"] .subnav {
                background: linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.65))
            }

            /* Chips — 10% smaller */
            .chip {
                border-radius: 999px;
                border: 1px solid var(--stroke);
                padding: .36rem .72rem;
                /* was .4 .8 */
                font-size: .9rem;
                /* ~10% smaller */
                transition: background var(--dur) var(--ease), color var(--dur) var(--ease)
            }

            .chip.active {
                background: rgba(255,255,255,.10)
            }

            :root[data-bs-theme="light"] .chip.active {
                background: rgba(0,0,0,.06)
            }

            :root[data-bs-theme="light"] .subnav .chip {
                color: var(--ink) !important;
                border-color: rgba(12,23,48,.18);
            }

            :root[data-bs-theme="light"] .subnav .chip:hover {
                background: rgba(12,23,48,.08);
                color: var(--ink) !important;
            }

            .chip:focus-visible {
                outline: 2px solid var(--focus);
                outline-offset: 2px
            }

            /* Pills */
            .pill {
                display: inline-flex;
                align-items: center;
                gap: .35rem;
                padding: .25rem .5rem;
                border-radius: 999px;
                font-size: .8rem;
                border: 1px solid var(--stroke)
            }

            .pill.good {
                color: #0f5132;
                background: #d1e7dd;
                border-color: #badbcc
            }

            .pill.warn {
                color: #664d03;
                background: #fff3cd;
                border-color: #ffecb5
            }

            .pill.bad {
                color: #842029;
                background: #f8d7da;
                border-color: #f5c2c7
            }

            :root[data-bs-theme="dark"] .pill.good {
                color: #b8f5cd;
                background: rgba(40,167,69,.15);
                border-color: rgba(40,167,69,.35)
            }

            :root[data-bs-theme="dark"] .pill.warn {
                color: #ffe08a;
                background: rgba(253,126,20,.15);
                border-color: rgba(253,126,20,.35)
            }

            :root[data-bs-theme="dark"] .pill.bad {
                color: #ffb3bd;
                background: rgba(220,53,69,.15);
                border-color: rgba(220,53,69,.35)
            }

            /* Avatar */
            .avatar-wrap {
                display: flex;
                align-items: center;
                gap: 1rem
            }

            .avatar {
                width: 88px;
                height: 88px;
                border-radius: 18px;
                object-fit: cover;
                border: 1px solid var(--stroke);
                box-shadow: var(--shadow);
                background: #111;
            }

            /* Tables */
            .table thead th {
                border-bottom-color: var(--stroke)
            }

            .table tbody tr {
                border-color: var(--stroke)
            }

            .table-hover tbody tr:hover {
                background: rgba(255,255,255,.04)
            }

            :root[data-bs-theme="light"] .table-hover tbody tr:hover {
                background: rgba(0,0,0,.03)
            }

            /* Username status */
            .status-row {
                display: flex;
                align-items: center;
                gap: .5rem;
                min-height: 1.25rem
            }

            .status-icon {
                font-size: 1rem;
                line-height: 1
            }

            .status-text {
                font-size: .9rem
            }

            /* Save-all bar */
            .savebar {
                position: sticky;
                bottom: 0;
                z-index: 10;
                transform: translateY(120%);
                transition: transform var(--dur) var(--ease);
            }

            .savebar.show {
                transform: translateY(0);
            }

            .data-saver-hint {
                font-size: .875rem;
                color: var(--muted)
            }
            section#overview h2 {}

.d-flex.justify-content-between.align-items-start.flex-wrap.gap-3 {}

section#overview h2 {
    color: white;
}

section#profile h2 {
    color: white;
}

section#security h2 {
    color: white;
}

section#notifications h2 {
    color: white;
}

section#payouts h2 {
    color: white;
}

section#payouts th,section#payouts td {
    color: white;
}

section#connected h2 {
    color: white;
}

section#preferences h2 {
    color: white;
}

section#danger h2 {
    color: white;
}

body.light-theme h2, body.light-theme td, body.light-theme th {
    color: black !important;
}

body.light-theme .btn-outline-light {
    color: black;
    border-color: black;
}