    :root {
        --theme-bg: #f6f9fc;
        --theme-surface: #ffffff;
        --theme-surface-raised: #f8fafc;
        --theme-surface-soft: #f1f5f9;
        --theme-surface-translucent: rgba(255, 255, 255, 0.85);
        --theme-border: #e2e8f0;
        --theme-divider: #e9ecef;
        --theme-text: #32325d;
        --theme-copy: #525f7f;
        --theme-muted: #8898aa;
        --theme-primary: #5e72e4;
        --theme-primary-rgb: 94, 114, 228;
        --theme-on-primary: #ffffff;
        --theme-on-success: #062d20;
        --theme-on-danger: #300812;
        --theme-logo-filter: none;
        --theme-success: #2dce89;
        --theme-warning: #d99a24;
        --theme-danger: #f5365c;
        --theme-success-text: #146c43;
        --theme-warning-text: #7a4a00;
        --theme-danger-text: #b4233f;
        --theme-success-soft: rgba(45, 206, 137, 0.1);
        --theme-warning-soft: rgba(217, 154, 36, 0.12);
        --theme-danger-soft: rgba(245, 54, 92, 0.1);
        --theme-input-bg: #ffffff;
        --theme-overview-start: #f6f9ff;
        --theme-overview-end: #eef3ff;
        --theme-shadow-soft: 0 8px 22px rgba(50, 50, 93, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
        --theme-shadow-hover: 0 14px 34px rgba(50, 50, 93, 0.12), 0 6px 14px rgba(0, 0, 0, 0.06);
    }

    html[data-theme="dark"] {
        --theme-bg: #070b14;
        --theme-surface: #10182b;
        --theme-surface-raised: #15213a;
        --theme-surface-soft: #0c1426;
        --theme-surface-translucent: rgba(16, 24, 43, 0.92);
        --theme-border: #263553;
        --theme-divider: #263553;
        --theme-text: #eef3ff;
        --theme-copy: #b4c0d8;
        --theme-muted: #8794b0;
        --theme-primary: #39c6e6;
        --theme-primary-rgb: 57, 198, 230;
        --theme-on-primary: #07111d;
        --theme-on-success: #071d16;
        --theme-on-danger: #2a0714;
        --theme-logo-filter: brightness(0) invert(1);
        --theme-success: #57d6a4;
        --theme-warning: #f2b84b;
        --theme-danger: #f0648f;
        --theme-success-text: #7ee2b8;
        --theme-warning-text: #ffd27a;
        --theme-danger-text: #ff94ad;
        --theme-success-soft: rgba(45, 206, 137, 0.1);
        --theme-warning-soft: rgba(242, 184, 75, 0.1);
        --theme-danger-soft: rgba(240, 100, 143, 0.1);
        --theme-input-bg: #091224;
        --theme-overview-start: #10182b;
        --theme-overview-end: #0c1426;
        --theme-shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.24);
        --theme-shadow-hover: 0 16px 34px rgba(0, 0, 0, 0.3);
        --w-e-textarea-bg-color: var(--theme-input-bg);
        --w-e-textarea-color: var(--theme-text);
        --w-e-textarea-border-color: var(--theme-border);
        --w-e-textarea-slight-border-color: var(--theme-border);
        --w-e-textarea-slight-color: var(--theme-muted);
        --w-e-textarea-slight-bg-color: var(--theme-surface-soft);
        --w-e-toolbar-color: var(--theme-copy);
        --w-e-toolbar-bg-color: var(--theme-surface-raised);
        --w-e-toolbar-active-color: var(--theme-primary);
        --w-e-toolbar-active-bg-color: var(--theme-surface);
        --w-e-toolbar-disabled-color: #66748f;
        --w-e-toolbar-border-color: var(--theme-border);
        color-scheme: dark;
    }

    html.theme-switching *,
    html.theme-switching *::before,
    html.theme-switching *::after {
        transition: none !important;
    }

    .theme-toggle {
        align-items: center;
        background: transparent;
        border: 0;
        color: inherit;
        cursor: pointer;
        display: inline-flex;
        justify-content: center;
        min-height: 40px;
        min-width: 40px;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        position: relative;
        z-index: 1;
    }

    .theme-toggle-item {
        margin-right: 0.25rem;
        position: relative;
        z-index: 2;
    }

    .theme-toggle .fa {
        font-size: 1rem;
        margin: 0;
    }

    html[data-theme="dark"] body {
        background-color: var(--theme-bg);
        color: var(--theme-copy);
    }

    html[data-theme="dark"] .profile-page,
    html[data-theme="dark"] .section-skew,
    html[data-theme="dark"] .user-standalone-page,
    html[data-theme="dark"] .root-result-page {
        background-color: var(--theme-bg) !important;
    }

    html[data-theme="dark"] .section-shaped .bg-gradient-default,
    html[data-theme="dark"] .section-profile-cover .shape-default {
        background: linear-gradient(135deg, #080d18 0%, #0d1628 55%, #10182b 100%) !important;
    }

    html[data-theme="dark"] .card,
    html[data-theme="dark"] .modal-content,
    html[data-theme="dark"] .dropdown-menu,
    html[data-theme="dark"] .list-group-item,
    html[data-theme="dark"] .popover {
        background-color: var(--theme-surface) !important;
        border-color: var(--theme-border) !important;
        color: var(--theme-copy);
    }

    html[data-theme="dark"] .card-header,
    html[data-theme="dark"] .card-footer,
    html[data-theme="dark"] .modal-header,
    html[data-theme="dark"] .modal-footer,
    html[data-theme="dark"] .navbar-collapse-header {
        background-color: var(--theme-surface-raised) !important;
        border-color: var(--theme-border) !important;
    }

    html[data-theme="dark"] h1,
    html[data-theme="dark"] h2,
    html[data-theme="dark"] h3,
    html[data-theme="dark"] h4,
    html[data-theme="dark"] h5,
    html[data-theme="dark"] h6,
    html[data-theme="dark"] label,
    html[data-theme="dark"] legend,
    html[data-theme="dark"] .heading,
    html[data-theme="dark"] .card-title,
    html[data-theme="dark"] .modal-title,
    html[data-theme="dark"] .text-dark,
    html[data-theme="dark"] .text-default {
        color: var(--theme-text) !important;
    }

    html[data-theme="dark"] .description,
    html[data-theme="dark"] .card-text,
    html[data-theme="dark"] .text-muted {
        color: var(--theme-muted) !important;
    }

    html[data-theme="dark"] hr,
    html[data-theme="dark"] .border,
    html[data-theme="dark"] .border-top,
    html[data-theme="dark"] .border-bottom,
    html[data-theme="dark"] .border-left,
    html[data-theme="dark"] .border-right {
        border-color: var(--theme-border) !important;
    }

    html[data-theme="dark"] .form-control:not(.password-input-control),
    html[data-theme="dark"] .custom-select,
    html[data-theme="dark"] .custom-file-label,
    html[data-theme="dark"] .input-group-text,
    html[data-theme="dark"] textarea,
    html[data-theme="dark"] select {
        background-color: var(--theme-input-bg) !important;
        border-color: var(--theme-border) !important;
        color: var(--theme-text) !important;
    }

    html[data-theme="dark"] .form-control:disabled,
    html[data-theme="dark"] .form-control[readonly],
    html[data-theme="dark"] .custom-select:disabled {
        background-color: var(--theme-surface-soft) !important;
        color: var(--theme-copy) !important;
    }

    html[data-theme="dark"] .form-control::placeholder,
    html[data-theme="dark"] textarea::placeholder {
        color: var(--theme-muted) !important;
    }

    html[data-theme="dark"] .close {
        color: var(--theme-text);
        opacity: 0.78;
        text-shadow: none;
    }

    html[data-theme="dark"] .close:hover,
    html[data-theme="dark"] .close:focus {
        color: var(--theme-primary);
        opacity: 1;
    }

    html[data-theme="dark"] .custom-control-input:not(:checked) ~ .custom-control-label::before {
        background-color: var(--theme-surface-soft);
        border-color: var(--theme-border);
    }

    html[data-theme="dark"] .table,
    html[data-theme="dark"] .table td,
    html[data-theme="dark"] .table th {
        color: var(--theme-copy);
    }

    html[data-theme="dark"] .table td,
    html[data-theme="dark"] .table th,
    html[data-theme="dark"] .table thead th {
        border-color: var(--theme-border) !important;
    }

    html[data-theme="dark"] .table thead th,
    html[data-theme="dark"] .table tbody tr:hover td,
    html[data-theme="dark"] .table-hover tbody tr:hover {
        background-color: var(--theme-surface-raised) !important;
    }

    html[data-theme="dark"] .dropdown-item,
    html[data-theme="dark"] .dropdown-header {
        color: var(--theme-copy);
    }

    html[data-theme="dark"] .dropdown-item:hover,
    html[data-theme="dark"] .dropdown-item:focus,
    html[data-theme="dark"] .dropdown-item.active,
    html[data-theme="dark"] .dropdown-item:active {
        background-color: var(--theme-surface-raised);
        color: var(--theme-primary);
    }

    @media (min-width: 992px) {
        html[data-theme="dark"] .navbar-nav .dropdown-menu::before {
            background: var(--theme-surface);
            z-index: -1;
        }
    }

    html[data-theme="dark"] .page-link,
    html[data-theme="dark"] .nav-tabs .nav-link,
    html[data-theme="dark"] .nav-pills .nav-link:not(.active) {
        background-color: var(--theme-surface);
        border-color: var(--theme-border);
        color: var(--theme-copy);
    }

    html[data-theme="dark"] .page-item.active .page-link,
    html[data-theme="dark"] .nav-tabs .nav-link.active,
    html[data-theme="dark"] .nav-pills .nav-link.active {
        background-color: var(--theme-primary);
        border-color: var(--theme-primary);
        color: #07111d;
    }

    html[data-theme="dark"] .btn-secondary,
    html[data-theme="dark"] .btn-default,
    html[data-theme="dark"] .btn-light,
    html[data-theme="dark"] .btn-white {
        background-color: var(--theme-surface-raised);
        border-color: var(--theme-border);
        color: var(--theme-text);
    }

    html[data-theme="dark"] .btn-outline-primary {
        border-color: rgba(var(--theme-primary-rgb), 0.65);
        color: var(--theme-primary);
    }

    html[data-theme="dark"] .btn-outline-primary:hover,
    html[data-theme="dark"] .btn-outline-primary:focus {
        background-color: rgba(var(--theme-primary-rgb), 0.14);
        color: var(--theme-text);
    }

    html[data-theme="dark"] .bg-white,
    html[data-theme="dark"] .bg-secondary,
    html[data-theme="dark"] .bg-lighter {
        background-color: var(--theme-surface) !important;
    }

    html[data-theme="dark"] .alert-info {
        background-color: rgba(57, 198, 230, 0.1);
        border-color: rgba(57, 198, 230, 0.24);
        color: #bfeef7;
    }

    html[data-theme="dark"] .alert-warning {
        background-color: rgba(242, 184, 75, 0.1);
        border-color: rgba(242, 184, 75, 0.24);
        color: #f6d58f;
    }

    html[data-theme="dark"] .alert-danger {
        background-color: rgba(240, 100, 143, 0.1);
        border-color: rgba(240, 100, 143, 0.24);
        color: #f5b1c8;
    }

    html[data-theme="dark"] .navbar-collapse .navbar-nav .nav-link,
    html[data-theme="dark"] .navbar-utility .nav-link,
    html[data-theme="dark"] .navbar-collapse .navbar-toggler,
    html[data-theme="dark"] .theme-toggle {
        color: var(--theme-text) !important;
    }

    html[data-theme="dark"] .collapse-brand img {
        filter: brightness(0) invert(1);
    }

    html[data-theme="dark"] .footer,
    html[data-theme="dark"] .root-footer-cta {
        background-color: var(--theme-bg) !important;
        border-color: var(--theme-border) !important;
    }

    html[data-theme="dark"] .footer .nav-link,
    html[data-theme="dark"] .root-footer-copy {
        color: var(--theme-muted) !important;
    }

    html[data-theme="dark"] .root-footer-title {
        color: var(--theme-text) !important;
    }

    html[data-theme="dark"] :focus-visible {
        outline-color: rgba(var(--theme-primary-rgb), 0.5);
    }

    @media (max-width: 991.98px) {
        html[data-theme="dark"] .navbar-collapse,
        html[data-theme="dark"] .navbar-collapse.collapsing,
        html[data-theme="dark"] .navbar-collapse.show {
            background-color: var(--theme-surface);
        }

    }

    /* 暗黑模式与语言切换常驻顶栏，手机端不收进折叠菜单；展开键始终在最右 */
    .navbar-utility {
        align-items: center;
        flex-direction: row;
        margin-left: auto;
    }

    .navbar-utility .nav-link {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }

    .navbar-transparent .navbar-utility .nav-link {
        color: rgba(255, 255, 255, 0.95);
    }

    .navbar-transparent .navbar-utility .nav-link:is(:hover, :focus-visible) {
        color: rgba(255, 255, 255, 0.65);
    }

    @media (min-width: 992px) {
        .navbar-utility {
            order: 1;
        }
    }

    /* 顶栏空间有限，折叠状态下只留图标，完整名称在 title / aria-label 上 */
    @media (max-width: 991.98px) {
        .navbar-utility .nav-link-inner--text {
            display: none;
        }
    }

    /* 窄到顶栏放不下时，才把这两项收进折叠菜单，并与上面的入口分隔开 */
    .navbar-utility-menu {
        display: none;
    }

    .navbar-utility-menu .theme-toggle {
        justify-content: flex-start;
        width: 100%;
    }

    @media (max-width: 359.98px) {
        .navbar-utility {
            display: none;
        }

        .navbar-utility-menu {
            display: flex;
        }
    }

    /* 导航分割线：顶栏里竖排一道，收进折叠菜单时改为横线 */
    .navbar-main .navbar-nav .nav-divider {
        align-self: center;
        background: rgba(255, 255, 255, 0.35);
        flex: 0 0 auto;
        height: 1.25rem;
        margin: 0 0.5rem;
        width: 1px;
    }

    @media (max-width: 991.98px) {
        .navbar-main .navbar-nav .nav-divider {
            align-self: stretch;
            background: var(--theme-border);
            height: 1px;
            margin: 0.5rem 0;
            width: auto;
        }
    }

    /* argon.css 的 button:focus 轮廓鼠标点击也会画出来，只在键盘聚焦时保留。
       .btn 系列自带 outline: 0 不受影响，这里管的是没套 .btn 的按钮 */
    button:focus:not(:focus-visible) {
        outline: none;
    }

    .theme-toggle:focus-visible,
    .nav-logout:focus-visible,
    .navbar-toggler:focus-visible {
        outline: 2px solid rgba(var(--theme-primary-rgb), 0.6);
        outline-offset: 2px;
    }
