@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --ssq-red: #ef3657;
        --ssq-red-deep: #c8193e;
        --ssq-blue: #4f91ff;
        --ssq-blue-deep: #245ec4;
        --ssq-green: #27c9a1;
        --ssq-ink: #f2f6fc;
        --ssq-muted: #a9b6c8;
        --ssq-line: rgba(166, 184, 210, .18);
        --ssq-glass: rgba(17, 25, 38, .76);
        --ssq-glass-strong: rgba(22, 31, 46, .9);
        --ssq-shadow: 0 24px 72px rgba(0, 0, 0, .38);
        --bs-body-color: var(--ssq-ink);
        --bs-body-bg: #0b1018;
        --bs-secondary-color: var(--ssq-muted);
        --bs-border-color: rgba(166, 184, 210, .18);
        --bs-link-color: #82adff;
        --bs-link-hover-color: #a8c6ff;
    }

    body {
        background:
            radial-gradient(circle at 8% 4%, rgba(225, 43, 74, .15), transparent 32%),
            radial-gradient(circle at 94% 5%, rgba(29, 111, 232, .2), transparent 36%),
            radial-gradient(circle at 76% 94%, rgba(15, 159, 130, .1), transparent 38%),
            linear-gradient(180deg, #0b1018 0%, #111827 48%, #090e16 100%);
    }

    body::before {
        background-image:
            linear-gradient(rgba(181, 198, 222, .045) 1px, transparent 1px),
            linear-gradient(90deg, rgba(181, 198, 222, .045) 1px, transparent 1px);
    }

    ::selection {
        color: #fff;
        background: rgba(225, 43, 74, .72);
    }

    .navbar {
        background: rgba(9, 15, 24, .76) !important;
        border-bottom-color: rgba(166, 184, 210, .14);
        box-shadow: 0 14px 44px rgba(0, 0, 0, .28);
    }

    .navbar-brand,
    .navbar-brand:hover,
    .navbar-brand:focus {
        color: var(--ssq-ink);
    }

    .navbar-toggler {
        border-color: rgba(166, 184, 210, .28);
        box-shadow: none;
    }

    .navbar-toggler-icon {
        filter: invert(1) grayscale(1) brightness(1.8);
    }

    .nav-link {
        color: rgba(226, 234, 246, .76);
    }

    .nav-link:hover,
    .nav-link:focus {
        color: #ff879b;
        background: rgba(148, 163, 184, .1);
    }

    .dropdown-menu {
        color: var(--ssq-ink);
        background: rgba(17, 25, 38, .96);
        border-color: rgba(166, 184, 210, .18);
        box-shadow: 0 22px 60px rgba(0, 0, 0, .38);
    }

    .dropdown-item {
        color: var(--ssq-ink);
    }

    .dropdown-item:hover,
    .dropdown-item:focus {
        color: #fff;
        background: rgba(79, 145, 255, .16);
    }

    .panel {
        background: var(--ssq-glass);
        border-color: var(--ssq-line);
    }

    .panel::before {
        background: linear-gradient(90deg, transparent, rgba(198, 211, 231, .28), transparent);
    }

    .hero-panel,
    .auth-card,
    .result-hero {
        background:
            radial-gradient(circle at top right, rgba(79, 145, 255, .12), transparent 38%),
            linear-gradient(145deg, rgba(26, 36, 53, .9), rgba(14, 22, 34, .76)),
            linear-gradient(135deg, rgba(225, 43, 74, .09), rgba(29, 111, 232, .1));
    }

    .auth-hint-card {
        background:
            linear-gradient(135deg, rgba(225, 43, 74, .13), rgba(22, 31, 46, .84)),
            linear-gradient(315deg, rgba(29, 111, 232, .12), rgba(13, 20, 31, .72));
        border-color: rgba(239, 54, 87, .24);
    }

    .form-label {
        color: rgba(235, 241, 250, .88);
    }

    .form-control,
    .form-select {
        color: var(--ssq-ink);
        background-color: rgba(8, 14, 23, .68);
        border-color: rgba(166, 184, 210, .2);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 9px 24px rgba(0, 0, 0, .14);
    }

    .form-control::placeholder {
        color: rgba(169, 182, 200, .66);
        opacity: 1;
    }

    .form-control:focus,
    .form-select:focus {
        color: #fff;
        background-color: rgba(12, 20, 32, .94);
        border-color: rgba(79, 145, 255, .58);
        box-shadow: 0 0 0 .25rem rgba(79, 145, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .05);
    }

    .form-control:disabled,
    .form-control[readonly],
    .form-select:disabled {
        color: rgba(226, 234, 246, .78);
        background-color: rgba(8, 14, 23, .58);
        opacity: 1;
    }

    .form-select option {
        color: var(--ssq-ink);
        background: #151e2d;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus {
        -webkit-text-fill-color: var(--ssq-ink);
        box-shadow: 0 0 0 1000px #111a29 inset;
        transition: background-color 9999s ease-out 0s;
    }

    .form-text {
        color: var(--ssq-muted);
    }

    .btn-outline-secondary {
        color: var(--ssq-ink);
        background: rgba(20, 30, 45, .72);
        border-color: rgba(166, 184, 210, .22);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
    }

    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus {
        color: #fff;
        background: rgba(39, 54, 77, .9);
        border-color: rgba(132, 160, 202, .42);
    }

    .btn-outline-danger {
        color: #ff8196;
        background: rgba(80, 18, 33, .2);
        border-color: rgba(239, 54, 87, .42);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
    }

    .btn-outline-danger:hover,
    .btn-outline-danger:focus {
        color: #fff;
        background: rgba(200, 25, 62, .78);
        border-color: rgba(255, 129, 150, .5);
    }

    .stat-panel {
        background:
            linear-gradient(145deg, rgba(25, 36, 53, .84), rgba(13, 21, 33, .72)),
            linear-gradient(135deg, rgba(15, 159, 130, .12), rgba(29, 111, 232, .1));
    }

    .section-kicker,
    .pending-ranking-score {
        color: #ff8aa0;
    }

    .switch-pill {
        color: var(--ssq-ink);
        background: rgba(19, 29, 44, .74);
        border-color: rgba(166, 184, 210, .18);
        box-shadow: 0 14px 34px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .035);
    }

    .switch-pill:hover {
        color: #fff;
        background: rgba(30, 43, 63, .92);
    }

    .switch-pill.active {
        color: #fff;
        border-color: rgba(166, 184, 210, .28);
        box-shadow: 0 18px 44px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .12);
    }

    .mode-grid .btn {
        color: var(--ssq-ink);
        background: rgba(13, 21, 33, .68);
        border-color: rgba(166, 184, 210, .18);
    }

    .mode-grid .btn-check:checked + .btn {
        color: #fff;
        border-color: rgba(166, 184, 210, .26);
    }

    .field-surface,
    .result-row,
    .history-card,
    .pending-ranking-item {
        background: rgba(20, 30, 45, .64);
        border-color: rgba(166, 184, 210, .16);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
    }

    .pill-tag {
        color: rgba(232, 239, 249, .82);
        background: rgba(31, 43, 62, .72);
        border-color: rgba(166, 184, 210, .17);
    }

    .glass-modal {
        color: var(--ssq-ink);
        background:
            linear-gradient(145deg, rgba(24, 34, 50, .98), rgba(11, 18, 28, .96)),
            linear-gradient(135deg, rgba(225, 43, 74, .1), rgba(29, 111, 232, .12));
        border-color: rgba(166, 184, 210, .2);
        box-shadow: 0 30px 100px rgba(0, 0, 0, .58);
    }

    .modal-header,
    .modal-footer {
        border-color: rgba(166, 184, 210, .14) !important;
    }

    .modal-backdrop.show {
        opacity: .72;
    }

    .btn-close {
        filter: invert(1) grayscale(1) brightness(1.8);
    }

    .pending-ranking-launch {
        background:
            radial-gradient(circle at 12% 18%, rgba(255, 200, 87, .12), transparent 30%),
            radial-gradient(circle at 92% 12%, rgba(79, 145, 255, .15), transparent 34%),
            linear-gradient(145deg, rgba(25, 35, 52, .9), rgba(12, 20, 31, .76));
    }

    .pending-ranking-position {
        color: #ffd889;
        background: rgba(197, 118, 8, .2);
        border-color: rgba(255, 200, 87, .22);
    }

    .pending-ranking-toast {
        color: var(--ssq-ink);
        background: rgba(20, 30, 45, .97);
        border-color: rgba(166, 184, 210, .2);
        box-shadow: 0 20px 58px rgba(0, 0, 0, .44);
    }

    .table {
        --bs-table-color: var(--ssq-ink);
        --bs-table-bg: transparent;
        --bs-table-border-color: rgba(166, 184, 210, .14);
        --bs-table-hover-color: #fff;
        --bs-table-hover-bg: rgba(79, 145, 255, .08);
        color: var(--ssq-ink);
    }

    .table thead th {
        color: rgba(203, 214, 230, .72);
        background: rgba(29, 41, 59, .76);
        border-bottom-color: rgba(166, 184, 210, .18);
    }

    .table td,
    .table th {
        border-color: rgba(166, 184, 210, .14);
    }

    .alert {
        color: var(--ssq-ink);
        background: rgba(22, 32, 47, .9);
        border-color: rgba(166, 184, 210, .18);
        box-shadow: 0 16px 38px rgba(0, 0, 0, .22);
    }

    .alert-success {
        background: rgba(15, 159, 130, .15);
        border-color: rgba(39, 201, 161, .28);
    }

    .alert-danger {
        background: rgba(225, 43, 74, .14);
        border-color: rgba(239, 54, 87, .28);
    }

    .alert-warning {
        background: rgba(197, 118, 8, .15);
        border-color: rgba(255, 200, 87, .28);
    }

    code {
        color: #ff9bc5;
    }

    hr,
    .dropdown-divider {
        border-color: rgba(166, 184, 210, .16);
    }

    * {
        scrollbar-color: rgba(122, 143, 174, .56) rgba(9, 15, 24, .5);
    }
}