:root {
    color-scheme: light;
    --app-text: #253044;
    --app-heading: #1f2937;
    --app-muted: #7b8798;
    --app-border: #e8edf4;
    --app-border-strong: #dfe7f1;
    --app-surface: #fff;
    --app-bg: #f4f6f9;
    --brand-primary: #069a8e;
    --brand-primary-dark: #057f75;
    --brand-primary-soft: #e8faf5;
    --brand-primary-border: #bfeade;
    --brand-accent: #4ec8b3;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --app-text: #d8e2ec;
    --app-heading: #f3f7fb;
    --app-muted: #94a3b8;
    --app-border: #263445;
    --app-border-strong: #344457;
    --app-surface: #111b28;
    --app-bg: #08111b;
    --brand-primary: #20c9b5;
    --brand-primary-dark: #14a895;
    --brand-primary-soft: rgba(32, 201, 181, .13);
    --brand-primary-border: rgba(45, 212, 191, .35);
    --brand-accent: #5eead4;
}

.theme-toggle-button {
    display: inline-flex !important;
    width: 2.65rem !important;
    height: 2.65rem !important;
    align-items: center;
    justify-content: center;
    align-self: center;
    margin: .85rem .1rem;
    padding: 0 !important;
    border: 1px solid var(--app-border) !important;
    border-radius: 50%;
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
    line-height: 1;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease;
}
.topbar .theme-toggle-wrap {
    display: flex;
    min-height: 4.375rem;
    align-self: center;
    align-items: center;
    justify-content: center;
}

.theme-toggle-button:hover,
.theme-toggle-button:focus {
    border-color: var(--brand-primary) !important;
    background: var(--brand-primary-soft) !important;
    color: var(--brand-primary) !important;
    outline: none;
    transform: translateY(-1px);
}

.theme-toggle-button i {
    font-size: 1rem;
    pointer-events: none;
}

.auth-theme-toggle {
    position: fixed;
    top: max(1rem, env(safe-area-inset-top));
    right: 1rem;
    z-index: 20;
    margin: 0;
    box-shadow: 0 .4rem 1.2rem rgba(15, 23, 42, .14);
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] #content-wrapper,
:root[data-theme="dark"] #content {
    background-color: var(--app-bg) !important;
    color: var(--app-text);
}

:root[data-theme="dark"] .navbar-light.bg-white,
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .sticky-footer,
:root[data-theme="dark"] footer {
    background-color: #0d1723 !important;
    color: var(--app-text);
}

:root[data-theme="dark"] .topbar {
    border-bottom: 1px solid var(--app-border);
    box-shadow: 0 .2rem 1.2rem rgba(0, 0, 0, .24) !important;
}
:root[data-theme="dark"] .sidebar .sidebar-divider {
    border-top-color: rgba(94, 234, 212, .22);
}

:root[data-theme="dark"] .topbar-user-summary .topbar-user-name,
:root[data-theme="dark"] .navbar-light .navbar-nav .nav-link,
:root[data-theme="dark"] .navbar-light .navbar-nav .nav-link:focus {
    color: #dce6ef !important;
}

:root[data-theme="dark"] .navbar-light .navbar-nav .nav-link:hover {
    color: var(--brand-primary) !important;
}

:root[data-theme="dark"] .navbar-nav.bg-gradient-primary.sidebar {
    background-color: #045f5a;
    background-image: linear-gradient(180deg, #033d3b 0%, #045f5a 52%, #087c70 100%);
}

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

:root[data-theme="dark"] .card-header,
:root[data-theme="dark"] .card-footer,
:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer,
:root[data-theme="dark"] .dropdown-header,
:root[data-theme="dark"] .popover-header {
    border-color: var(--app-border) !important;
    background-color: #142130 !important;
    color: var(--app-heading) !important;
}

:root[data-theme="dark"] .card.shadow,
:root[data-theme="dark"] .card.shadow-sm,
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .modal-content {
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .24) !important;
}

:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6,
:root[data-theme="dark"] .h1,
:root[data-theme="dark"] .h2,
:root[data-theme="dark"] .h3,
:root[data-theme="dark"] .h4,
:root[data-theme="dark"] .h5,
:root[data-theme="dark"] .h6,
:root[data-theme="dark"] .text-gray-800,
:root[data-theme="dark"] .text-gray-900 {
    color: var(--app-heading) !important;
}

:root[data-theme="dark"] .text-gray-400,
:root[data-theme="dark"] .text-gray-500,
:root[data-theme="dark"] .text-gray-600,
:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] small,
:root[data-theme="dark"] .small {
    color: var(--app-muted) !important;
}

:root[data-theme="dark"] a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link) {
    color: #5eead4;
}

:root[data-theme="dark"] a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link):hover {
    color: #99f6e4;
}

:root[data-theme="dark"] hr,
:root[data-theme="dark"] .dropdown-divider {
    border-color: var(--app-border) !important;
}

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

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

:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .custom-select,
:root[data-theme="dark"] .custom-file-label,
:root[data-theme="dark"] .input-group-text,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
    border-color: var(--app-border-strong) !important;
    background-color: #0c1723 !important;
    color: #e5edf5 !important;
}

:root[data-theme="dark"] .form-control::placeholder,
:root[data-theme="dark"] textarea::placeholder,
:root[data-theme="dark"] input::placeholder {
    color: #718096 !important;
    opacity: 1;
}

:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .custom-select:focus,
:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] textarea:focus {
    border-color: var(--brand-primary) !important;
    background-color: #0f1c29 !important;
    color: #fff !important;
    box-shadow: 0 0 0 .2rem rgba(32, 201, 181, .15) !important;
}

:root[data-theme="dark"] .form-control:disabled,
:root[data-theme="dark"] .form-control[readonly],
:root[data-theme="dark"] .custom-select:disabled {
    background-color: #182433 !important;
    color: #8391a3 !important;
}

:root[data-theme="dark"] .table {
    color: var(--app-text);
}

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

:root[data-theme="dark"] .table thead th,
:root[data-theme="dark"] .table-light th,
:root[data-theme="dark"] .table-light td {
    border-color: var(--app-border) !important;
    background-color: #162332 !important;
    color: var(--app-heading) !important;
}

:root[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, .025);
}

:root[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(32, 201, 181, .07);
    color: #fff;
}

:root[data-theme="dark"] .dropdown-item {
    color: var(--app-text) !important;
}

:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus,
:root[data-theme="dark"] .dropdown-item.active,
:root[data-theme="dark"] .dropdown-item:active {
    background-color: var(--brand-primary-soft) !important;
    color: #74f4df !important;
}

:root[data-theme="dark"] .topbar-account-menu .dropdown-item i {
    color: var(--app-muted);
}

:root[data-theme="dark"] .nav-tabs,
:root[data-theme="dark"] .nav-tabs .nav-link {
    border-color: var(--app-border) !important;
}

:root[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--app-muted);
}

:root[data-theme="dark"] .nav-tabs .nav-link:hover,
:root[data-theme="dark"] .nav-tabs .nav-link:focus,
:root[data-theme="dark"] .nav-tabs .nav-item.show .nav-link,
:root[data-theme="dark"] .nav-tabs .nav-link.active {
    border-color: var(--app-border) !important;
    background-color: var(--app-surface) !important;
    color: var(--brand-primary) !important;
}

:root[data-theme="dark"] .page-link {
    border-color: var(--app-border) !important;
    background-color: var(--app-surface);
    color: var(--brand-primary);
}

:root[data-theme="dark"] .page-link:hover {
    background-color: var(--brand-primary-soft);
    color: #74f4df;
}

:root[data-theme="dark"] .page-item.disabled .page-link {
    border-color: var(--app-border);
    background-color: #121e2b;
    color: #64748b;
}

:root[data-theme="dark"] .btn-light,
:root[data-theme="dark"] .btn-secondary {
    border-color: var(--app-border-strong) !important;
    background-color: #1b2a3a !important;
    color: #e2e8f0 !important;
}

:root[data-theme="dark"] .btn-light:hover,
:root[data-theme="dark"] .btn-secondary:hover {
    background-color: #24364a !important;
}

:root[data-theme="dark"] .close {
    color: #fff;
    text-shadow: none;
    opacity: .8;
}

:root[data-theme="dark"] .alert {
    border-color: rgba(255, 255, 255, .1);
    color: #e7eef6;
}

:root[data-theme="dark"] .alert-info {
    background-color: rgba(14, 165, 233, .14);
}

:root[data-theme="dark"] .alert-success {
    background-color: rgba(16, 185, 129, .14);
}

:root[data-theme="dark"] .alert-warning {
    background-color: rgba(245, 158, 11, .15);
}

:root[data-theme="dark"] .alert-danger {
    background-color: rgba(239, 68, 68, .14);
}

:root[data-theme="dark"] .progress {
    background-color: #203043;
}

:root[data-theme="dark"] .mobile-quick-order-sheet,
:root[data-theme="dark"] .mobile-quick-order-header,
:root[data-theme="dark"] .mobile-quick-platform,
:root[data-theme="dark"] .mobile-quick-service {
    border-color: var(--app-border) !important;
    background-color: var(--app-surface) !important;
    color: var(--app-text) !important;
}

:root[data-theme="dark"] .mobile-quick-platform.is-active {
    border-color: var(--brand-primary) !important;
    background-color: var(--brand-primary-soft) !important;
    color: var(--brand-primary) !important;
}

:root[data-theme="dark"] .mobile-bottom-nav {
    border-top-color: rgba(255, 255, 255, .14);
}

:root[data-theme="dark"] .mobile-bottom-nav-item {
    color: #dbe7f2;
}

:root[data-theme="dark"] .sidebar-mobile-backdrop,
:root[data-theme="dark"] .mobile-quick-order-backdrop {
    background: rgba(0, 0, 0, .6);
}

:root[data-theme="dark"] .editor-toolbar {
    border-color: var(--app-border) !important;
    background: #142130 !important;
}

:root[data-theme="dark"] .editor-toolbar button,
:root[data-theme="dark"] .editor-toolbar select {
    border-color: var(--app-border-strong) !important;
    background-color: #0c1723 !important;
    color: var(--app-text) !important;
}

:root[data-theme="dark"] body.auth-page {
    background: var(--app-bg) !important;
    color: var(--app-text);
}

:root[data-theme="dark"] .auth-frame,
:root[data-theme="dark"] .auth-form-panel {
    border-color: var(--app-border);
    background: var(--app-surface);
    color: var(--app-text);
}

:root[data-theme="dark"] .auth-frame {
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .35);
}

:root[data-theme="dark"] .auth-brand-panel {
    background: linear-gradient(160deg, #034944, #087b70);
}

:root[data-theme="dark"] .auth-heading h1,
:root[data-theme="dark"] .auth-field label {
    color: var(--app-heading);
}

:root[data-theme="dark"] .auth-heading p,
:root[data-theme="dark"] .auth-switch,
:root[data-theme="dark"] .auth-check,
:root[data-theme="dark"] .auth-captcha span {
    color: var(--app-muted) !important;
}

:root[data-theme="dark"] .auth-input {
    border-color: var(--app-border-strong);
    background: #0c1723;
    color: #e5edf5;
}

:root[data-theme="dark"] .auth-input::placeholder {
    color: #718096;
}

:root[data-theme="dark"] .auth-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(32, 201, 181, .16);
}

:root[data-theme="dark"] .auth-switch {
    border-top-color: var(--app-border);
}

:root[data-theme="dark"] .auth-captcha {
    border-color: var(--brand-primary-border);
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
}

:root[data-theme="dark"] .auth-alert.is-error {
    border-color: rgba(248, 113, 113, .36);
    background: rgba(239, 68, 68, .12);
    color: #fca5a5;
}

:root[data-theme="dark"] .auth-alert.is-success {
    border-color: rgba(52, 211, 153, .34);
    background: rgba(16, 185, 129, .12);
    color: #6ee7b7;
}

@media (max-width: 767.98px) {
    #content .topbar > .navbar-nav {
        align-items: center;
    }

    #content .topbar .theme-toggle-wrap {
        height: 4.375rem;
        min-height: 4.375rem;
        align-self: center;
    }

    .theme-toggle-button {
        width: 2.35rem !important;
        height: 2.35rem !important;
        margin: 0 .15rem !important;
    }

    :root[data-theme="dark"] #content .topbar::before {
        background: #0d1723;
    }
}

@media (max-width: 480px) {
    .auth-theme-toggle {
        top: max(.7rem, env(safe-area-inset-top));
        right: .7rem;
    }

    :root[data-theme="dark"] body.auth-page {
        background:
            radial-gradient(circle at 12% 8%, rgba(94, 234, 212, .12), transparent 32%),
            radial-gradient(circle at 90% 88%, rgba(6, 154, 142, .2), transparent 38%),
            linear-gradient(145deg, #032f2e 0%, #064f4a 58%, #08776b 100%) !important;
    }

    :root[data-theme="dark"] .auth-frame {
        border-color: rgba(255, 255, 255, .12);
        background: var(--app-surface);
    }
}

/* Home and service-page components rendered after the shared head. */
:root[data-theme="dark"] .landing-section {
    border-top-color: var(--app-border);
}

:root[data-theme="dark"] .hero-title,
:root[data-theme="dark"] .section-title,
:root[data-theme="dark"] .info-card h3,
:root[data-theme="dark"] .service-group-head h3,
:root[data-theme="dark"] .service-name,
:root[data-theme="dark"] .platform-title,
:root[data-theme="dark"] .platform-service-name,
:root[data-theme="dark"] .step-item h3,
:root[data-theme="dark"] .faq-item summary {
    color: var(--app-heading);
}

:root[data-theme="dark"] .hero-text,
:root[data-theme="dark"] .section-lead,
:root[data-theme="dark"] .info-card p,
:root[data-theme="dark"] .platform-service-meta,
:root[data-theme="dark"] .step-item p,
:root[data-theme="dark"] .check-list li,
:root[data-theme="dark"] .tip-item,
:root[data-theme="dark"] .faq-answer {
    color: var(--app-muted);
}

:root[data-theme="dark"] .feature-chip,
:root[data-theme="dark"] .info-card,
:root[data-theme="dark"] .service-card,
:root[data-theme="dark"] .platform-service-card,
:root[data-theme="dark"] .tips-card,
:root[data-theme="dark"] .faq-item {
    border-color: var(--app-border);
    background: var(--app-surface);
    color: var(--app-text);
    box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .2);
}

:root[data-theme="dark"] .service-card-top {
    border-bottom-color: var(--app-border);
}

:root[data-theme="dark"] .service-card-bottom,
:root[data-theme="dark"] .platform-service-link {
    border-color: var(--app-border);
    background: #0c1723;
    color: var(--app-text);
}

:root[data-theme="dark"] .service-price,
:root[data-theme="dark"] .line-ico,
:root[data-theme="dark"] .platform-title-icon,
:root[data-theme="dark"] .service-detail-pill.is-category,
:root[data-theme="dark"] .platform-service-tag.is-refill,
:root[data-theme="dark"] .platform-service-tag.is-cancel {
    border-color: var(--brand-primary-border);
    background: var(--brand-primary-soft);
    color: #5eead4;
}

:root[data-theme="dark"] .service-detail-pill.is-min,
:root[data-theme="dark"] .platform-service-tag.is-fast {
    border-color: rgba(56, 189, 248, .3);
    background: rgba(14, 165, 233, .12);
    color: #7dd3fc;
}

:root[data-theme="dark"] .service-detail-pill.is-max,
:root[data-theme="dark"] .platform-service-tag.is-speed,
:root[data-theme="dark"] .platform-service-tag.is-support {
    border-color: rgba(251, 191, 36, .3);
    background: rgba(245, 158, 11, .12);
    color: #fcd34d;
}

:root[data-theme="dark"] .platform-service-tag.is-easy {
    border-color: rgba(167, 139, 250, .3);
    background: rgba(139, 92, 246, .12);
    color: #c4b5fd;
}

:root[data-theme="dark"] .platform-service-tag.is-limit {
    border-color: var(--app-border);
    background: #172433;
    color: #b8c5d4;
}

:root[data-theme="dark"] .step-number {
    border-color: #183044;
}

:root[data-theme="dark"] .buff-content-placeholder .buff-content-toc {
    border-color: var(--app-border);
    background: linear-gradient(135deg, #10251f, #0d211d);
}

:root[data-theme="dark"] .buff-content-placeholder .buff-content-toc-title {
    color: var(--app-heading);
}

:root[data-theme="dark"] .buff-content-placeholder .buff-content-toc-list a,
:root[data-theme="dark"] .buff-content-placeholder .buff-content-inner {
    color: var(--app-text);
}

:root[data-theme="dark"] .buff-content-placeholder .buff-content-toc-list a::before,
:root[data-theme="dark"] .buff-content-placeholder .buff-content-inner h3::before {
    border-color: var(--brand-primary-border);
    background: var(--brand-primary-soft);
    color: #5eead4;
}

:root[data-theme="dark"] .buff-content-inner.is-collapsed::after {
    background: linear-gradient(180deg, rgba(17, 27, 40, 0), var(--app-surface) 70%);
}

:root[data-theme="dark"] .site-popup-card,
:root[data-theme="dark"] .site-popup-header {
    border-color: var(--app-border);
    background: var(--app-surface);
    color: var(--app-text);
}

:root[data-theme="dark"] .site-popup-content blockquote {
    background: var(--brand-primary-soft);
}