:root,
[data-theme="light"] {
    --ui-font-sans: "Inter", "SF Pro Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --ui-bg: #f4f7fb;
    --ui-surface: rgba(255, 255, 255, 0.94);
    --ui-surface-muted: rgba(247, 250, 253, 0.92);
    --ui-border: #d7e3f0;
    --ui-border-strong: #c0d2e8;
    --ui-text: #17263d;
    --ui-text-soft: #6d7f95;
    --ui-primary: #2563eb;
    --ui-primary-hover: #1d4ed8;
    --ui-danger: #d63939;
    --ui-danger-hover: #b92f2f;
    --ui-success-bg: rgba(16, 185, 129, 0.14);
    --ui-success-text: #0f8a63;
    --ui-shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.05);
    --ui-shadow-md: 0 22px 46px rgba(15, 23, 42, 0.08);
    --ui-radius-sm: 12px;
    --ui-radius-md: 16px;
    --ui-radius-lg: 22px;
    --ui-control-height: 42px;
    --ui-control-height-sm: 34px;
    --ui-control-padding-x: 14px;
    --ui-transition: all 0.15s ease;
    --ui-page-gradient-a: rgba(37, 99, 235, 0.08);
    --ui-page-gradient-b: rgba(59, 130, 246, 0.06);
    --ui-page-base-start: #f5f8fd;
    --ui-page-base-end: #eef4fb;
    --ui-card-start: rgba(255, 255, 255, 0.98);
    --ui-card-end: rgba(247, 250, 253, 0.93);
    --ui-code-bg: #f3f6fb;
    --ui-overlay: rgba(15, 23, 42, 0.22);
    --ui-sidebar-bg: #ffffff;
    --ui-sidebar-surface: #f7faff;
    --ui-sidebar-hover: #eef4ff;
    --ui-sidebar-text: #1e3350;
    --ui-sidebar-text-soft: #6f8198;
    --ui-sidebar-border: #d9e4f0;
    --ui-sidebar-accent: #2563eb;
    --ui-sidebar-danger: #d63939;
}

[data-theme="dark"] {
    --ui-bg: #081120;
    --ui-surface: rgba(13, 23, 42, 0.88);
    --ui-surface-muted: rgba(15, 23, 42, 0.82);
    --ui-border: #20324d;
    --ui-border-strong: #2f4768;
    --ui-text: #e6eef8;
    --ui-text-soft: #99afc7;
    --ui-primary: #38bdf8;
    --ui-primary-hover: #60a5fa;
    --ui-danger: #fb7185;
    --ui-danger-hover: #f43f5e;
    --ui-success-bg: rgba(16, 185, 129, 0.2);
    --ui-success-text: #6ee7b7;
    --ui-shadow-sm: 0 4px 12px rgba(2, 6, 23, 0.26);
    --ui-shadow-md: 0 26px 58px rgba(2, 6, 23, 0.38);
    --ui-page-gradient-a: rgba(56, 189, 248, 0.14);
    --ui-page-gradient-b: rgba(37, 99, 235, 0.12);
    --ui-page-base-start: #081120;
    --ui-page-base-end: #0d172a;
    --ui-card-start: rgba(13, 23, 42, 0.96);
    --ui-card-end: rgba(15, 23, 42, 0.9);
    --ui-code-bg: #101b2d;
    --ui-overlay: rgba(2, 6, 23, 0.56);
    --ui-sidebar-bg: #09111f;
    --ui-sidebar-surface: #0f1a2d;
    --ui-sidebar-hover: #15243b;
    --ui-sidebar-text: #eef4fb;
    --ui-sidebar-text-soft: #91a8c3;
    --ui-sidebar-border: #1f314b;
    --ui-sidebar-accent: #38bdf8;
    --ui-sidebar-danger: #fb7185;
}

html, body {
    font-family: var(--ui-font-sans);
    color: var(--ui-text);
    background: var(--ui-bg);
}

body {
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(circle at top right, var(--ui-page-gradient-a), transparent 28%),
        radial-gradient(circle at top left, var(--ui-page-gradient-b), transparent 24%),
        linear-gradient(180deg, var(--ui-page-base-start) 0%, var(--ui-page-base-end) 100%);
    text-rendering: optimizeLegibility;
}

.sidebar-overlay {
    background: transparent;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: var(--ui-transition);
    z-index: 1035;
}

.sidebar {
    background: var(--ui-sidebar-bg);
    border-right: 1px solid var(--ui-sidebar-border);
    bottom: 0;
    color: var(--ui-sidebar-text);
    display: flex;
    flex-direction: column;
    left: 0;
    overflow-y: auto;
    padding: 16px 14px 18px;
    position: fixed;
    top: 0;
    transform: translateX(0);
    transition: var(--ui-transition);
    width: 268px;
    z-index: 1040;
}

.sidebar-brand {
    border-bottom: 1px solid var(--ui-sidebar-border);
    color: var(--ui-sidebar-text);
    margin-bottom: 10px;
    padding-bottom: 14px;
}

.sidebar-top-link,
.sidebar-link,
.sidebar-footer-link,
.sidebar-section__toggle {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 14px;
    color: var(--ui-sidebar-text);
    display: flex;
    gap: 10px;
    min-height: 42px;
    padding: 10px 12px;
    text-decoration: none;
    transition: var(--ui-transition);
    width: 100%;
}

.sidebar-top-link:hover,
.sidebar-link:hover,
.sidebar-footer-link:hover,
.sidebar-section__toggle:hover {
    background: var(--ui-sidebar-hover);
    border-color: var(--ui-sidebar-border);
    color: var(--ui-sidebar-text);
}

.sidebar-top-link.active,
.sidebar-link.active,
.sidebar-section__toggle.is-open {
    background: var(--ui-sidebar-surface);
    border-color: var(--ui-sidebar-border);
    color: var(--ui-sidebar-accent);
}

.sidebar-section {
    margin-top: 8px;
}

.sidebar-section__toggle {
    background: transparent;
    justify-content: space-between;
}

.sidebar-section__label {
    align-items: center;
    display: inline-flex;
    gap: 10px;
}

.sidebar-section__chevron {
    color: var(--ui-sidebar-text-soft);
    transition: transform 0.15s ease;
}

.sidebar-section__toggle.is-open .sidebar-section__chevron {
    transform: rotate(90deg);
}

.sidebar-section__links {
    display: none;
    margin-top: 6px;
    padding-left: 10px;
}

.sidebar-section__links.is-open {
    display: grid;
    gap: 6px;
}

.sidebar-link {
    color: var(--ui-sidebar-text-soft);
}

.sidebar-theme {
    background: var(--ui-sidebar-surface);
    border: 1px solid var(--ui-sidebar-border);
    border-radius: 16px;
    margin-top: 16px;
    padding: 12px;
}

.sidebar-theme__label {
    color: var(--ui-sidebar-text-soft);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.sidebar-theme__group {
    display: grid;
    gap: 8px;
}

.sidebar-theme__button {
    align-items: center;
    background: transparent;
    border: 1px solid var(--ui-sidebar-border);
    border-radius: 12px;
    color: var(--ui-sidebar-text);
    display: inline-flex;
    gap: 8px;
    justify-content: center;
    min-height: 38px;
    padding: 8px 10px;
}

.sidebar-theme__button:hover,
.sidebar-theme__button.is-active {
    background: var(--ui-sidebar-hover);
    border-color: var(--ui-sidebar-accent);
    color: var(--ui-sidebar-accent);
}

.sidebar-footer-link {
    margin-top: 8px;
}

.sidebar-toggle {
    align-items: center;
    background: var(--ui-sidebar-accent);
    border: none;
    border-radius: 0 14px 14px 0;
    box-shadow: var(--ui-shadow-sm);
    color: #fff;
    display: inline-flex;
    height: 56px;
    justify-content: center;
    left: 268px;
    position: fixed;
    top: 82px;
    transition: var(--ui-transition);
    width: 26px;
    z-index: 1045;
}

.content-area {
    margin-left: 268px;
    min-width: 0;
    padding: 20px 8px 28px;
}

body.sidebar-collapsed .sidebar {
    transform: translateX(-100%);
}

body.sidebar-collapsed .sidebar-toggle {
    left: 0;
}

body.sidebar-collapsed .content-area {
    margin-left: 0;
}

body.sidebar-open .sidebar-overlay {
    background: var(--ui-overlay);
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
        width: min(82vw, 300px);
    }

    .sidebar-toggle {
        left: 0;
        top: 78px;
    }

    .content-area {
        margin-left: 0;
        padding: 16px 0 24px;
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
    }
}

a {
    color: var(--ui-primary);
}

a:hover {
    color: var(--ui-primary-hover);
}

.card,
.modal-content {
    background:
        linear-gradient(180deg, var(--ui-card-start), var(--ui-card-end));
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow:
        var(--ui-shadow-md),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.alert {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 16px;
    box-shadow: var(--ui-shadow-sm);
    color: var(--ui-text);
}

.alert-success {
    background: var(--ui-success-bg);
    border-color: rgba(16, 185, 129, 0.2);
    color: var(--ui-success-text);
}

.alert-info {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.16);
    color: var(--ui-primary);
}

.alert-warning {
    background: rgba(217, 139, 43, 0.12);
    border-color: rgba(217, 139, 43, 0.18);
    color: #b96c13;
}

.alert-danger {
    background: rgba(214, 57, 57, 0.12);
    border-color: rgba(214, 57, 57, 0.2);
    color: var(--ui-danger);
}

.table {
    --bs-table-color: var(--ui-text);
    --bs-table-bg: var(--ui-surface);
    --bs-table-border-color: #e8edf3;
}

.table > :not(caption) > * > * {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

.table-light,
.table-light > th,
.table-light > td,
.table > thead.table-light > tr > th {
    --bs-table-bg: var(--ui-surface-muted);
    --bs-table-color: var(--ui-text-soft);
}

.table-dark,
.table-dark > th,
.table-dark > td,
.table > thead.table-dark > tr > th {
    --bs-table-bg: #1f2937;
    --bs-table-color: #e5ecf5;
}

.form-control,
.form-select,
.ui-control {
    appearance: none;
    -webkit-appearance: none;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    box-shadow: none;
    color: var(--ui-text);
    font-size: 14px;
    font-weight: 500;
    height: var(--ui-control-height);
    line-height: 20px;
    min-height: var(--ui-control-height);
    padding: 10px var(--ui-control-padding-x);
    transition: var(--ui-transition);
}

.form-select {
    background-position: right 0.8rem center;
    background-size: 14px 10px;
    padding-right: calc(var(--ui-control-padding-x) + 26px);
    text-overflow: ellipsis;
}

.form-control::placeholder,
.ui-control::placeholder {
    color: var(--ui-text-soft);
    opacity: 1;
}

.form-control:focus,
.form-select:focus,
.ui-control:focus {
    border-color: rgba(14, 165, 233, 0.52);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.12);
}

.form-control-sm,
.form-select-sm,
.ui-control--sm,
.qm-control.qm-control--sm {
    border-radius: 10px;
    font-size: 13px;
    height: var(--ui-control-height-sm);
    min-height: var(--ui-control-height-sm);
    padding: 6px 12px;
}

.form-select-sm {
    padding-right: 36px;
}

.form-label,
label.form-label {
    color: var(--ui-text-soft);
    font-size: 13px;
    font-weight: 700;
}

.btn,
.ui-btn,
.qm-btn,
.session-export-btn,
.session-sync-btn,
.integration-sync-btn,
.integration-open-btn {
    align-items: center;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.04);
    color: var(--ui-text);
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
    justify-content: center;
    line-height: 20px;
    min-height: var(--ui-control-height);
    padding: 10px 14px;
    text-decoration: none;
    transition: var(--ui-transition);
    vertical-align: middle;
    white-space: nowrap;
}

.settings-shell {
    color: var(--ui-text);
    display: grid;
    gap: 20px;
    margin: 0 auto;
    padding: 24px 0 36px;
}

.settings-shell__header {
    align-items: start;
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.14), transparent 34%),
        linear-gradient(180deg, var(--ui-surface), var(--ui-surface-muted));
    border: 1px solid var(--ui-border);
    border-radius: 28px;
    box-shadow: var(--ui-shadow-md);
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 22px 26px;
}

.settings-shell__eyebrow {
    color: var(--ui-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.settings-shell__title {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.05em;
    margin: 0;
}

.settings-shell__lead {
    color: var(--ui-text-soft);
    line-height: 1.7;
    margin: 10px 0 0;
    max-width: 920px;
}

.settings-shell__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.settings-shell__pill {
    align-items: center;
    background: var(--ui-surface-muted);
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    color: var(--ui-text-soft);
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    min-height: 38px;
    padding: 0 14px;
}

.settings-nav {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.settings-nav__item {
    align-items: flex-start;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 20px;
    box-shadow: var(--ui-shadow-sm);
    color: var(--ui-text);
    cursor: pointer;
    display: grid;
    gap: 8px;
    min-height: 112px;
    padding: 18px 18px 16px;
    text-align: left;
    transition: var(--ui-transition);
}

.settings-nav__item:hover {
    border-color: var(--ui-border-strong);
    transform: translateY(-1px);
}

.settings-nav__item.is-active {
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.14), transparent 40%),
        linear-gradient(180deg, var(--ui-surface), var(--ui-surface-muted));
    border-color: rgba(37, 99, 235, 0.18);
    box-shadow: var(--ui-shadow-md);
}

.settings-nav__title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.settings-nav__desc {
    color: var(--ui-text-soft);
    font-size: 13px;
    line-height: 1.6;
}

.settings-block {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 24px;
    box-shadow: var(--ui-shadow-sm);
    overflow: hidden;
}

[data-settings-section].settings-block {
    display: none;
}

[data-settings-section].settings-block.is-active {
    display: block;
}

.settings-block__head {
    align-items: start;
    border-bottom: 1px solid var(--ui-border);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 18px 20px 16px;
}

.settings-block__title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.04em;
    margin: 0;
}

.settings-block__desc {
    color: var(--ui-text-soft);
    line-height: 1.6;
    margin: 8px 0 0;
}

.settings-block__tag {
    align-items: center;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 999px;
    color: var(--ui-primary);
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    min-height: 34px;
    padding: 0 12px;
    white-space: nowrap;
}

.settings-block__body {
    padding: 18px 20px 20px;
}

.settings-block__grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-field-card {
    background: var(--ui-surface-muted);
    border: 1px solid var(--ui-border);
    border-radius: 20px;
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 18px;
}

.settings-field-card__head {
    align-items: start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.settings-field-card__summary {
    min-width: 0;
}

.settings-field-card__title {
    font-size: 16px;
    font-weight: 800;
    margin: 0;
}

.settings-field-card__desc {
    color: var(--ui-text-soft);
    font-size: 13px;
    line-height: 1.6;
    margin-top: 8px;
}

.settings-field-card__status {
    flex-shrink: 0;
}

.settings-field-card__meta {
    color: var(--ui-text-soft);
    font-size: 12px;
}

.settings-field-card__control {
    display: grid;
    gap: 10px;
}

.settings-field-card__control-label {
    color: var(--ui-text-soft);
    font-size: 13px;
    font-weight: 800;
}

.settings-account-permissions {
    grid-column: 1 / -1;
    gap: 16px;
}

.settings-account-permissions__head {
    border-bottom: 1px solid var(--ui-border);
    margin-bottom: 2px;
    padding-bottom: 12px;
}

.settings-account-permissions__groups {
    display: grid;
    gap: 12px;
}

.settings-account-permission-group {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    padding: 12px;
}

.settings-account-permission-group__title {
    color: var(--ui-text);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
}

.settings-account-permission-group__grid {
    display: grid;
    gap: 8px 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-block__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.settings-status-pill {
    align-items: center;
    background: var(--ui-surface-muted);
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    color: var(--ui-text-soft);
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    min-height: 32px;
    padding: 0 10px;
}

.settings-status-pill--live {
    background: var(--ui-success-bg);
    border-color: rgba(16, 185, 129, 0.2);
    color: var(--ui-success-text);
}

.settings-status-pill--warn {
    background: rgba(217, 139, 43, 0.14);
    border-color: rgba(217, 139, 43, 0.18);
    color: #b96c13;
}

.settings-status-pill--danger {
    background: rgba(214, 57, 57, 0.12);
    border-color: rgba(214, 57, 57, 0.2);
    color: var(--ui-danger);
}

.settings-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 1199.98px) {
    .settings-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-block__grid {
        grid-template-columns: 1fr;
    }

    .settings-block__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .settings-shell__header {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .settings-nav {
        grid-template-columns: 1fr;
    }

    .settings-nav__item {
        min-height: auto;
    }

    .settings-shell__title {
        font-size: 30px;
    }

    .settings-block__head,
    .settings-block__body {
        padding-left: 18px;
        padding-right: 18px;
    }

    .settings-shell__actions {
        justify-content: flex-start;
    }

    .settings-account-permission-group__grid {
        grid-template-columns: 1fr;
    }
}

.btn:hover,
.ui-btn:hover,
.qm-btn:hover,
.session-export-btn:hover,
.session-sync-btn:hover,
.integration-sync-btn:hover,
.integration-open-btn:hover {
    background: rgba(255, 255, 255, 0.98);
    border-color: var(--ui-border-strong);
    color: var(--ui-text);
    transform: translateY(-1px);
}

.btn-sm,
.ui-btn--sm,
.qm-btn.qm-btn--sm {
    border-radius: 10px;
    font-size: 13px;
    min-height: var(--ui-control-height-sm);
    padding: 6px 12px;
}

.btn-primary,
.btn.btn-primary,
.btn.btn-outline-primary[data-manual-sync],
.ui-btn--primary,
.qm-btn--primary {
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-hover));
    border-color: transparent;
    box-shadow: 0 10px 22px rgba(14, 165, 233, 0.22);
    color: #fff;
}

.btn-primary:hover,
.btn.btn-primary:hover,
.btn.btn-outline-primary[data-manual-sync]:hover,
.ui-btn--primary:hover,
.qm-btn--primary:hover {
    background: linear-gradient(135deg, #0284c7, #1d4ed8);
    border-color: transparent;
    color: #fff;
}

.btn-outline-primary,
.btn.btn-outline-primary,
.ui-btn--outline-primary {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--ui-primary);
    color: var(--ui-primary);
}

.btn-outline-primary:hover,
.btn.btn-outline-primary:hover,
.ui-btn--outline-primary:hover {
    background: rgba(14, 165, 233, 0.10);
    border-color: var(--ui-primary);
    color: var(--ui-primary);
}

.btn-secondary,
.btn-outline-secondary,
.btn.btn-secondary,
.btn.btn-outline-secondary,
.ui-btn--secondary {
    background: var(--ui-surface);
    border-color: var(--ui-border);
    color: var(--ui-text);
}

.btn-danger,
.btn.btn-danger,
.ui-btn--danger,
.qm-btn--danger {
    background: var(--ui-surface);
    border-color: var(--ui-danger);
    color: var(--ui-danger);
}

.btn-danger:hover,
.btn.btn-danger:hover,
.ui-btn--danger:hover,
.qm-btn--danger:hover {
    background: rgba(214, 57, 57, 0.08);
    border-color: var(--ui-danger-hover);
    color: var(--ui-danger-hover);
}

.btn:disabled,
.btn.disabled,
.ui-btn:disabled,
.qm-btn:disabled,
.session-export-btn:disabled,
.session-sync-btn:disabled,
.integration-sync-btn:disabled,
.integration-open-btn:disabled {
    background: var(--ui-surface-muted);
    border-color: var(--ui-border);
    box-shadow: none !important;
    color: var(--ui-text-soft);
    opacity: 1;
}

.badge,
.ui-pill,
.qm-pill,
.session-env-pill,
.jd-pill {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    min-height: 32px;
    padding: 0 12px;
}

.session-env-pill,
.jd-pill,
.qm-pill,
.ui-pill--success {
    background: var(--ui-success-bg);
    border: 1px solid rgba(16, 185, 129, 0.16);
    color: var(--ui-success-text);
}

.badge.bg-light {
    background: var(--ui-surface-muted) !important;
    border: 1px solid var(--ui-border) !important;
    color: var(--ui-text) !important;
}

.badge.bg-warning {
    background: rgba(217, 139, 43, 0.14) !important;
    border: 1px solid rgba(217, 139, 43, 0.18) !important;
    color: #b96c13 !important;
}

.badge.bg-info {
    background: rgba(37, 99, 235, 0.12) !important;
    border: 1px solid rgba(37, 99, 235, 0.16) !important;
    color: var(--ui-primary) !important;
}

.ui-pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    justify-content: flex-end;
    margin-top: 20px;
    text-align: right;
    width: 100%;
}

.ui-pagination__summary {
    color: var(--ui-text-soft);
    font-size: 13px;
}

.ui-pagination__controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    justify-content: flex-end;
}

.ui-pagination__form {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.ui-pagination__label {
    color: var(--ui-text-soft);
    font-size: 13px;
    font-weight: 600;
}

.ui-pagination__select {
    min-width: 96px;
    width: 96px;
}

.ui-pagination__group {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.ui-pagination__indicator {
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    color: var(--ui-text);
    display: inline-flex;
    font-size: 13px;
    font-weight: 600;
    justify-content: center;
    min-height: var(--ui-control-height-sm);
    padding: 6px 12px;
}

.ui-pagination__input {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    background: rgba(255, 255, 255, 0.9);
    text-align: center;
    width: 78px;
}

.ui-pagination__submit {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

.text-muted,
.small.text-muted {
    color: var(--ui-text-soft) !important;
}

.text-dark,
.text-body {
    color: var(--ui-text) !important;
}

.text-white-50 {
    color: var(--ui-text-soft) !important;
}

.bg-light {
    background-color: var(--ui-surface-muted) !important;
}

.border-bottom {
    border-bottom-color: var(--ui-border) !important;
}

.table th,
.table td {
    border-color: var(--ui-border);
    color: var(--ui-text);
}

.session-page,
.integration-page,
.integration-hero,
.sys-config-section .card-body,
.settings-field-group,
.config-section-card,
.jd-hero,
.jd-card,
.jd-stats__hero,
.jd-stats__table,
.dashboard-v2__hero,
.dash-card,
.leaderboard-hero,
.leaderboard-board,
.leaderboard-summary__card,
.jira-card,
.sf-card,
.jira-column-panel,
.sf-column-panel,
.integration-page > .card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92)) !important;
    border: 1px solid var(--ui-border) !important;
    box-shadow:
        0 22px 46px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

.session-page,
.integration-page,
.integration-hero,
.settings-field-group,
.config-section-card,
.jd-hero,
.jd-card,
.jd-stats__hero,
.jd-stats__table,
.dashboard-v2__hero,
.dash-card,
.leaderboard-hero,
.leaderboard-board,
.leaderboard-summary__card {
    border-radius: 22px !important;
}

.session-layout__detail,
.jira-detail-drawer,
.sf-detail-drawer {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94)) !important;
}

.modal-header,
.modal-footer {
    background: transparent !important;
    border-color: var(--ui-border) !important;
}

.modal-title,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: var(--ui-text);
}

.session-table thead tr,
.jira-table-wrap thead tr,
.sf-table-wrap thead tr {
    background: var(--ui-surface-muted) !important;
}

.session-table tbody tr:hover,
.jira-row-trigger:hover,
.sf-row-trigger:hover {
    background: rgba(14, 165, 233, 0.045) !important;
}

code {
    background: var(--ui-code-bg);
    border-radius: 8px;
    color: var(--ui-text);
    padding: 0.15rem 0.45rem;
}

.login-body {
    background:
        radial-gradient(circle at top right, var(--ui-page-gradient-a), transparent 30%),
        linear-gradient(180deg, var(--ui-page-base-start) 0%, var(--ui-page-base-end) 100%);
}

.login-card {
    border-radius: 22px !important;
    box-shadow: var(--ui-shadow-md) !important;
}

.sys-config-field {
    background: var(--ui-surface-muted) !important;
    border: 1px solid var(--ui-border) !important;
}

.sys-config-help,
.settings-toolbar__hint,
.settings-account-id,
.settings-servicer-empty,
.settings-help,
.jd-hero__meta,
.jd-card__label,
.jd-card__hint,
.jd-list__meta,
.jd-empty,
.stats-tag,
.dashboard-stats__meta,
.stats-card__kicker,
.stats-metric__hint,
.stats-metric__label,
.stats-mini__label,
.stats-section__title p,
.leaderboard-hero__desc,
.leaderboard-summary__label,
.leaderboard-board__meta {
    color: var(--ui-text-soft) !important;
}

.settings-time-chip,
.stats-mini,
.jd-list__item,
.jira-stat-chip,
.sf-stat-chip {
    background: var(--ui-surface-muted) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

.settings-servicer-group__label--active,
.sync-status-pill--success,
.jira-pill--success,
.sf-pill--success,
.jd-pill {
    background: var(--ui-success-bg) !important;
    color: var(--ui-success-text) !important;
}

.settings-servicer-group__label--paused,
.jira-pill--warning,
.sf-pill--warning {
    background: rgba(217, 139, 43, 0.14) !important;
    color: #c67a1b !important;
}

.settings-servicer-group__label--stopped {
    background: var(--ui-surface-muted) !important;
    color: var(--ui-text-soft) !important;
}

.config-strategy-panel,
.config-strategy-panel--accent {
    background: var(--ui-surface-muted) !important;
    border-color: var(--ui-border) !important;
}

.wecom-message-panel,
.jingmai-message-panel,
.session-detail-card,
.session-bubble,
.jingmai-bubble {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

.session-list-item,
.jingmai-session-item {
    background: transparent !important;
    color: var(--ui-text) !important;
}

.session-list-item:hover,
.session-list-item.is-active,
.jingmai-session-item:hover,
.jingmai-session-item.is-active {
    background: rgba(37, 99, 235, 0.08) !important;
}

.dashboard-v2,
.dashboard-stats,
.leaderboard-page,
.jd-page,
.jd-stats,
.settings-page,
.sys-config-page {
    color: var(--ui-text) !important;
}

[data-theme="dark"] .dashboard-v2,
[data-theme="dark"] .dashboard-stats,
[data-theme="dark"] .leaderboard-page,
[data-theme="dark"] .jd-page,
[data-theme="dark"] .jd-stats,
[data-theme="dark"] .settings-page,
[data-theme="dark"] .sys-config-page {
    color: var(--ui-text) !important;
}

[data-theme="dark"] .sidebar-toggle {
    box-shadow: 0 16px 30px rgba(2, 6, 23, 0.36);
}

[data-theme="dark"] .sidebar-overlay {
    background: var(--ui-overlay);
}

[data-theme="dark"] .table-dark,
[data-theme="dark"] .table-dark > th,
[data-theme="dark"] .table-dark > td,
[data-theme="dark"] .table > thead.table-dark > tr > th {
    --bs-table-bg: #111b2f;
    --bs-table-color: #dbe7f5;
}

[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light > th,
[data-theme="dark"] .table-light > td,
[data-theme="dark"] .table > thead.table-light > tr > th {
    --bs-table-bg: rgba(18, 29, 48, 0.82);
    --bs-table-color: var(--ui-text-soft);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .ui-control {
    background-color: rgba(9, 17, 31, 0.92);
    border-color: var(--ui-border);
    color: var(--ui-text);
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .ui-control::placeholder {
    color: var(--ui-text-soft);
}

[data-theme="dark"] .form-select,
[data-theme="dark"] .qm-select {
    color: var(--ui-text);
}

[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"] {
    color-scheme: dark;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
    padding-right: 34px;
}

[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    -webkit-appearance: none;
    appearance: none;
    background: transparent !important;
    color: transparent !important;
    cursor: pointer;
    height: 18px;
    margin: 0;
    opacity: 0 !important;
    padding: 0;
    position: absolute;
    right: 8px;
    width: 18px;
    z-index: 2;
}

[data-theme="dark"] input[type="date"]::-webkit-clear-button,
[data-theme="dark"] input[type="datetime-local"]::-webkit-clear-button {
    display: none;
}

[data-theme="dark"] input[type="date"]::-webkit-inner-spin-button,
[data-theme="dark"] input[type="datetime-local"]::-webkit-inner-spin-button {
    display: none;
}

[data-theme="dark"] input[type="date"]::-moz-focus-inner,
[data-theme="dark"] input[type="datetime-local"]::-moz-focus-inner {
    border: 0;
    padding: 0;
}

[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"] {
    position: relative;
    cursor: pointer;
}

[data-theme="dark"] .btn,
[data-theme="dark"] .ui-btn,
[data-theme="dark"] .qm-btn,
[data-theme="dark"] .session-export-btn,
[data-theme="dark"] .session-sync-btn,
[data-theme="dark"] .integration-sync-btn,
[data-theme="dark"] .integration-open-btn {
    background: rgba(13, 23, 42, 0.92);
    border-color: var(--ui-border);
    color: var(--ui-text);
}

[data-theme="dark"] .btn:hover,
[data-theme="dark"] .ui-btn:hover,
[data-theme="dark"] .qm-btn:hover,
[data-theme="dark"] .session-export-btn:hover,
[data-theme="dark"] .session-sync-btn:hover,
[data-theme="dark"] .integration-sync-btn:hover,
[data-theme="dark"] .integration-open-btn:hover {
    background: rgba(18, 29, 48, 0.98);
    border-color: var(--ui-border-strong);
    color: var(--ui-text);
}

[data-theme="dark"] .btn-outline-primary,
[data-theme="dark"] .btn.btn-outline-primary,
[data-theme="dark"] .ui-btn--outline-primary {
    background: rgba(13, 23, 42, 0.92);
    border-color: var(--ui-primary);
    color: var(--ui-primary);
}

[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn.btn-secondary,
[data-theme="dark"] .btn.btn-outline-secondary,
[data-theme="dark"] .ui-btn--secondary {
    background: rgba(13, 23, 42, 0.92);
    border-color: var(--ui-border);
    color: var(--ui-text);
}

[data-theme="dark"] .btn-close {
    filter: invert(0.92);
}

[data-theme="dark"] .ui-pagination__indicator {
    background: rgba(13, 23, 42, 0.92);
    border-color: var(--ui-border);
    color: var(--ui-text);
}

[data-theme="dark"] .ui-pagination__input {
    background: rgba(9, 17, 31, 0.92);
    border-color: var(--ui-border);
    color: var(--ui-text);
}

[data-theme="dark"] .ui-pagination .pagination .page-link {
    background: rgba(13, 23, 42, 0.96);
    border-color: var(--ui-border-strong);
    color: #d8e5f5;
}

[data-theme="dark"] .ui-pagination .pagination .page-item.active .page-link {
    background: var(--ui-primary);
    border-color: var(--ui-primary);
    color: #081120;
}

[data-theme="dark"] .ui-pagination .pagination .page-item.disabled .page-link {
    background: rgba(17, 30, 50, 0.9);
    border-color: var(--ui-border);
    color: #7f96b3;
}

[data-theme="dark"] .bg-body {
    background-color: rgba(13, 23, 42, 0.92) !important;
    color: var(--ui-text) !important;
}

[data-theme="dark"] .log-page-container .badge.log-type-badge {
    background: rgba(18, 29, 48, 0.9) !important;
    border: 1px solid var(--ui-border) !important;
    color: var(--ui-text) !important;
}

[data-theme="dark"] .log-page-container .badge.bg-info.text-dark {
    background: rgba(59, 130, 246, 0.22) !important;
    color: #93c5fd !important;
}

[data-theme="dark"] .log-page-container .badge.bg-warning.text-dark {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fcd34d !important;
}

[data-theme="dark"] .bg-white {
    background-color: rgba(13, 23, 42, 0.96) !important;
    color: var(--ui-text) !important;
}

/* 修复深色模式下的导航栏 */
[data-theme="dark"] .navbar {
    background-color: rgba(13, 23, 42, 0.96) !important;
    border-bottom-color: var(--ui-border) !important;
}

[data-theme="dark"] .navbar-light .navbar-brand {
    color: var(--ui-text) !important;
}

[data-theme="dark"] .navbar-light .navbar-nav .nav-link {
    color: var(--ui-text) !important;
}

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

[data-theme="dark"] .navbar-light .navbar-nav .show > .nav-link,
[data-theme="dark"] .navbar-light .navbar-nav .nav-link.active {
    color: var(--ui-primary) !important;
}

/* 修复深色模式下的下拉菜单 */
[data-theme="dark"] .dropdown-menu {
    background-color: rgba(18, 29, 48, 0.98) !important;
    border-color: var(--ui-border) !important;
}

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

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: rgba(56, 189, 248, 0.1) !important;
    color: var(--ui-primary) !important;
}

[data-theme="dark"] .dropdown-item.active,
[data-theme="dark"] .dropdown-item:active {
    background-color: rgba(56, 189, 248, 0.2) !important;
    color: var(--ui-primary) !important;
}

/* 修复深色模式下的导航栏切换按钮 */
[data-theme="dark"] .navbar-light .navbar-toggler {
    color: var(--ui-text-soft) !important;
    border-color: var(--ui-border) !important;
}

[data-theme="dark"] .navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28230, 238, 248, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* 修复深色模式下的浅色模式切换按钮 */
[data-theme="dark"] .theme-btn[data-theme="light"] {
    color: var(--ui-text) !important;
}

[data-theme="dark"] .theme-btn[data-theme="light"]:hover {
    color: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .modal-content {
    background:
        linear-gradient(180deg, rgba(14, 26, 46, 0.96), rgba(12, 20, 36, 0.92)) !important;
    border-color: var(--ui-border) !important;
    box-shadow:
        0 22px 46px rgba(2, 6, 23, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

[data-theme="dark"] .bg-light {
    background-color: rgba(15, 23, 42, 0.88) !important;
}

[data-theme="dark"] .badge.bg-light {
    background: rgba(18, 29, 48, 0.82) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

[data-theme="dark"] .badge.bg-warning {
    background: rgba(251, 191, 36, 0.14) !important;
    border-color: rgba(251, 191, 36, 0.22) !important;
    color: #fbbf24 !important;
}

[data-theme="dark"] .badge.bg-info {
    background: rgba(56, 189, 248, 0.14) !important;
    border-color: rgba(56, 189, 248, 0.22) !important;
    color: #7dd3fc !important;
}

[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-secondary,
[data-theme="dark"] .small.text-muted,
[data-theme="dark"] .text-body-secondary {
    color: var(--ui-text-soft) !important;
}

[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light > th,
[data-theme="dark"] .table-light > td,
[data-theme="dark"] .table > thead.table-light > tr > th,
[data-theme="dark"] .table > thead > tr.table-light > th {
    --bs-table-bg: rgba(18, 29, 48, 0.82);
    --bs-table-color: var(--ui-text-soft);
}

[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: rgba(56, 189, 248, 0.06) !important;
    color: var(--ui-text) !important;
}

[data-theme="dark"] .session-sort-link__icon {
    color: var(--ui-text-soft) !important;
}

[data-theme="dark"] .session-sort-link.is-active .session-sort-link__icon {
    color: var(--ui-primary) !important;
}

[data-theme="dark"] .session-customer__avatar {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.16), rgba(96, 165, 250, 0.08)) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

[data-theme="dark"] .timeline-day,
[data-theme="dark"] .session-detail__title small,
[data-theme="dark"] .session-empty {
    color: var(--ui-text-soft) !important;
}

[data-theme="dark"] .timeline-day span {
    background: rgba(18, 29, 48, 0.82) !important;
    color: var(--ui-text-soft) !important;
}

[data-theme="dark"] .timeline-media-link {
    color: var(--ui-primary) !important;
}

[data-theme="dark"] .session-kf-name,
[data-theme="dark"] .leaderboard-badge--jingmai,
[data-theme="dark"] .integration-pill--warn {
    color: #fbbf24 !important;
}

[data-theme="dark"] .session-customer__tag,
[data-theme="dark"] .integration-pill--ok {
    color: #6ee7b7 !important;
}

[data-theme="dark"] .dashboard-v2 {
    --dash-ink: var(--ui-text);
    --dash-subtle: var(--ui-text-soft);
    --dash-line: var(--ui-border);
    --dash-surface: rgba(13, 23, 42, 0.94);
    --dash-surface-alt: linear-gradient(180deg, rgba(14, 26, 46, 0.96) 0%, rgba(12, 20, 36, 0.92) 100%);
    --dash-accent: #6ee7b7;
    --dash-accent-soft: rgba(16, 185, 129, 0.18);
    --dash-warm: #fbbf24;
    --dash-warm-soft: rgba(251, 191, 36, 0.16);
    --dash-alert: #fb7185;
    --dash-alert-soft: rgba(251, 113, 133, 0.16);
    --dash-shadow: var(--ui-shadow-md);
}

[data-theme="dark"] .dashboard-v2__hero::after,
[data-theme="dark"] .dashboard-stats__hero::after {
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.18), rgba(96, 165, 250, 0.14));
}

[data-theme="dark"] .dashboard-v2__headline h1,
[data-theme="dark"] .dashboard-stats__headline h1,
[data-theme="dark"] .leaderboard-hero__title h1,
[data-theme="dark"] .jd-hero__headline h1,
[data-theme="dark"] .jd-stats__headline h1,
[data-theme="dark"] .settings-page h1,
[data-theme="dark"] .settings-page h2 {
    color: var(--ui-text) !important;
}

[data-theme="dark"] .dash-card,
[data-theme="dark"] .stats-card,
[data-theme="dark"] .integration-hero,
[data-theme="dark"] .dashboard-v2__hero,
[data-theme="dark"] .dashboard-stats__hero,
[data-theme="dark"] .leaderboard-hero,
[data-theme="dark"] .leaderboard-board,
[data-theme="dark"] .leaderboard-summary__card,
[data-theme="dark"] .jd-hero,
[data-theme="dark"] .jd-card,
[data-theme="dark"] .jd-stats__hero,
[data-theme="dark"] .jd-stats__table,
[data-theme="dark"] .integration-hero,
[data-theme="dark"] .integration-card,
[data-theme="dark"] .sys-config-field,
[data-theme="dark"] .jira-card,
[data-theme="dark"] .sf-card {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    box-shadow: var(--ui-shadow-md) !important;
}

[data-theme="dark"] .dash-mini,
[data-theme="dark"] .stats-mini,
[data-theme="dark"] .jd-list__item,
[data-theme="dark"] .jira-column-panel,
[data-theme="dark"] .sf-column-panel,
[data-theme="dark"] .jira-detail-item,
[data-theme="dark"] .sf-detail-item,
[data-theme="dark"] .settings-field-group,
[data-theme="dark"] .config-section-card,
[data-theme="dark"] .config-section-card .card-body,
[data-theme="dark"] .config-strategy-panel,
[data-theme="dark"] .config-strategy-panel--accent,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-body,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    background: var(--ui-surface-muted) !important;
    border-color: var(--ui-border) !important;
}

[data-theme="dark"] .leaderboard-summary__value,
[data-theme="dark"] .leaderboard-score,
[data-theme="dark"] .jd-card__value,
[data-theme="dark"] .dash-metric__value strong,
[data-theme="dark"] .dash-mini__value,
[data-theme="dark"] .stats-metric__value strong,
[data-theme="dark"] .stats-mini__value {
    color: var(--ui-text) !important;
}

[data-theme="dark"] .dashboard-v2__pill,
[data-theme="dark"] .dashboard-stats__pill,
[data-theme="dark"] .jd-stats__pill,
[data-theme="dark"] .jd-pill,
[data-theme="dark"] .session-env-pill {
    background: var(--ui-success-bg) !important;
    color: var(--ui-success-text) !important;
    border: 1px solid rgba(110, 231, 183, 0.14);
}

[data-theme="dark"] .dash-table th,
[data-theme="dark"] .dash-table td {
    border-bottom-color: var(--ui-border);
    color: var(--ui-text);
}

[data-theme="dark"] .dash-table th {
    background: rgba(18, 29, 48, 0.82);
    color: var(--ui-text-soft);
}

[data-theme="dark"] .dash-table tbody tr:hover {
    background: rgba(56, 189, 248, 0.05);
}

[data-theme="dark"] .dashboard-stats {
    --stats-ink: var(--ui-text);
    --stats-subtle: var(--ui-text-soft);
    --stats-line: var(--ui-border);
    --stats-surface: rgba(13, 23, 42, 0.94);
    --stats-surface-alt: linear-gradient(180deg, rgba(14, 26, 46, 0.96) 0%, rgba(12, 20, 36, 0.92) 100%);
    --stats-accent: #6ee7b7;
    --stats-accent-soft: rgba(16, 185, 129, 0.18);
    --stats-shadow: var(--ui-shadow-md);
}

[data-theme="dark"] .leaderboard-page {
    --rank-ink: var(--ui-text);
    --rank-subtle: var(--ui-text-soft);
    --rank-line: var(--ui-border);
    --rank-surface: rgba(13, 23, 42, 0.94);
    --rank-soft: linear-gradient(180deg, rgba(14, 26, 46, 0.96) 0%, rgba(12, 20, 36, 0.92) 100%);
    --rank-accent: var(--ui-primary);
    --rank-accent-soft: rgba(56, 189, 248, 0.16);
    --rank-ai: #6ee7b7;
    --rank-ai-soft: rgba(16, 185, 129, 0.18);
    --rank-shadow: var(--ui-shadow-md);
}

[data-theme="dark"] .leaderboard-table th {
    background: rgba(18, 29, 48, 0.82);
    color: var(--ui-text-soft);
}

[data-theme="dark"] .leaderboard-table td {
    border-bottom-color: var(--ui-border);
    color: var(--ui-text);
}

[data-theme="dark"] .leaderboard-rank {
    background: rgba(148, 163, 184, 0.12);
    color: var(--ui-text);
}

[data-theme="dark"] .leaderboard-rank--1 {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

[data-theme="dark"] .leaderboard-rank--2 {
    background: rgba(148, 163, 184, 0.16);
    color: #cbd5e1;
}

[data-theme="dark"] .leaderboard-rank--3 {
    background: rgba(249, 115, 22, 0.18);
    color: #fb923c;
}

[data-theme="dark"] .leaderboard-badge--jingmai {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
}

[data-theme="dark"] .jd-page,
[data-theme="dark"] .jd-stats {
    color: var(--ui-text);
}

[data-theme="dark"] .jd-page .jd-hero__meta,
[data-theme="dark"] .jd-page .jd-card__label,
[data-theme="dark"] .jd-page .jd-card__hint,
[data-theme="dark"] .jd-page .jd-list__meta,
[data-theme="dark"] .jd-stats .jd-stats__meta,
[data-theme="dark"] .jd-stats .jd-empty,
[data-theme="dark"] .jd-page .jd-empty {
    color: var(--ui-text-soft) !important;
}

[data-theme="dark"] .jd-page .table td,
[data-theme="dark"] .jd-page .table th,
[data-theme="dark"] .jd-stats .table td,
[data-theme="dark"] .jd-stats .table th {
    color: var(--ui-text);
}

[data-theme="dark"] .jd-page .table th,
[data-theme="dark"] .jd-stats .table th {
    color: var(--ui-text-soft);
}

[data-theme="dark"] .settings-page {
    color: var(--ui-text);
}

[data-theme="dark"] .settings-time-chip,
[data-theme="dark"] .config-strategy-panel,
[data-theme="dark"] .config-strategy-panel--accent,
[data-theme="dark"] .settings-field-group,
[data-theme="dark"] .config-section-card,
[data-theme="dark"] .config-section-card .card-body {
    background: rgba(15, 23, 42, 0.86) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

[data-theme="dark"] .settings-account-id,
[data-theme="dark"] .settings-servicer-empty,
[data-theme="dark"] .settings-help,
[data-theme="dark"] .settings-toolbar__hint,
[data-theme="dark"] .settings-servicer-group__names {
    color: var(--ui-text-soft) !important;
}

[data-theme="dark"] .settings-servicer-group__label--active {
    background: rgba(16, 185, 129, 0.18) !important;
    color: #6ee7b7 !important;
}

[data-theme="dark"] .settings-servicer-group__label--paused {
    background: rgba(251, 191, 36, 0.16) !important;
    color: #fbbf24 !important;
}

[data-theme="dark"] .settings-servicer-group__label--stopped {
    background: rgba(148, 163, 184, 0.12) !important;
    color: var(--ui-text-soft) !important;
}

[data-theme="dark"] .session-page {
    background: rgba(13, 23, 42, 0.94) !important;
    box-shadow: var(--ui-shadow-md) !important;
}

[data-theme="dark"] .session-page__header,
[data-theme="dark"] .session-detail__header,
[data-theme="dark"] .session-table th,
[data-theme="dark"] .session-table td,
[data-theme="dark"] .session-layout__detail {
    border-color: var(--ui-border) !important;
}

[data-theme="dark"] .session-page__title,
[data-theme="dark"] .session-table td,
[data-theme="dark"] .session-customer__name,
[data-theme="dark"] .session-detail__name,
[data-theme="dark"] .session-detail__title,
[data-theme="dark"] .session-detail__value {
    color: var(--ui-text) !important;
}

[data-theme="dark"] .session-table th,
[data-theme="dark"] .session-page__meta,
[data-theme="dark"] .session-detail__meta,
[data-theme="dark"] .session-filter-range__sep,
[data-theme="dark"] .session-sort-link__icon,
[data-theme="dark"] .session-detail__sub,
[data-theme="dark"] .session-detail__hint,
[data-theme="dark"] .session-detail__empty,
[data-theme="dark"] .session-message__meta,
[data-theme="dark"] .session-empty,
[data-theme="dark"] .session-action-link {
    color: var(--ui-text-soft) !important;
}

[data-theme="dark"] .session-table thead tr,
[data-theme="dark"] .session-message-system,
[data-theme="dark"] .session-message__bubble--system,
[data-theme="dark"] .session-message__attachment,
[data-theme="dark"] .session-detail-card {
    background: rgba(18, 29, 48, 0.82) !important;
    border-color: var(--ui-border) !important;
}

[data-theme="dark"] .session-table tbody tr.is-active,
[data-theme="dark"] .session-table tbody tr:hover {
    background: rgba(56, 189, 248, 0.06) !important;
}

[data-theme="dark"] .session-detail__header,
[data-theme="dark"] .session-layout__detail {
    background: rgba(13, 23, 42, 0.96) !important;
}

[data-theme="dark"] .session-detail__body {
    background: rgba(9, 17, 31, 0.94) !important;
    color: var(--ui-text) !important;
}

[data-theme="dark"] .timeline-message__meta {
    color: var(--ui-text-soft) !important;
}

[data-theme="dark"] .timeline-message__bubble {
    background: rgba(18, 29, 48, 0.88) !important;
    border: 1px solid var(--ui-border) !important;
    color: var(--ui-text) !important;
}

[data-theme="dark"] .timeline-message--right .timeline-message__bubble {
    background: rgba(20, 36, 61, 0.94) !important;
    border-color: rgba(56, 189, 248, 0.18) !important;
}

[data-theme="dark"] .session-customer__avatar {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.22), rgba(56, 189, 248, 0.18)) !important;
    border-color: rgba(56, 189, 248, 0.18) !important;
    color: var(--ui-text) !important;
}

[data-theme="dark"] .integration-page {
    background: rgba(13, 23, 42, 0.94) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 22px !important;
    box-shadow: var(--ui-shadow-md) !important;
    color: var(--ui-text);
    overflow: hidden;
}

[data-theme="dark"] .integration-hero {
    background: rgba(13, 23, 42, 0.96) !important;
    border-color: var(--ui-border) !important;
    box-shadow: var(--ui-shadow-md) !important;
}

[data-theme="dark"] .integration-page h1,
[data-theme="dark"] .jira-detail-drawer,
[data-theme="dark"] .sf-detail-drawer,
[data-theme="dark"] .jira-detail-drawer__body,
[data-theme="dark"] .sf-detail-drawer__body,
[data-theme="dark"] .jira-detail-drawer__title,
[data-theme="dark"] .sf-detail-drawer h5,
[data-theme="dark"] .jira-detail-item__value,
[data-theme="dark"] .sf-detail-item__value,
[data-theme="dark"] .jira-table-wrap td,
[data-theme="dark"] .sf-table-wrap td {
    color: var(--ui-text) !important;
}

[data-theme="dark"] .jira-card h6,
[data-theme="dark"] .sf-card h6,
[data-theme="dark"] .jira-subtle,
[data-theme="dark"] .sf-subtle,
[data-theme="dark"] .jira-detail-drawer__header .btn,
[data-theme="dark"] .sf-detail-drawer__header .btn,
[data-theme="dark"] .jira-detail-item__label,
[data-theme="dark"] .sf-detail-item__label,
[data-theme="dark"] .jira-sort-trigger__icon,
[data-theme="dark"] .sf-sort-trigger__icon {
    color: var(--ui-text-soft) !important;
}

[data-theme="dark"] .jira-detail-drawer,
[data-theme="dark"] .sf-detail-drawer {
    background: rgba(13, 23, 42, 0.98) !important;
    border-left: 1px solid var(--ui-border) !important;
}

[data-theme="dark"] .jira-detail-drawer__header,
[data-theme="dark"] .sf-detail-drawer__header {
    background: rgba(13, 23, 42, 0.98) !important;
    border-bottom-color: var(--ui-border) !important;
}

[data-theme="dark"] .jira-detail-drawer__body,
[data-theme="dark"] .sf-detail-drawer__body {
    background: rgba(9, 17, 31, 0.96) !important;
}

[data-theme="dark"] .jira-column-panel,
[data-theme="dark"] .sf-column-panel,
[data-theme="dark"] .jira-detail-item,
[data-theme="dark"] .sf-detail-item {
    background: rgba(18, 29, 48, 0.82) !important;
    border-color: var(--ui-border) !important;
}

[data-theme="dark"] .jira-table-wrap thead tr,
[data-theme="dark"] .sf-table-wrap thead tr {
    background: rgba(18, 29, 48, 0.82) !important;
}

[data-theme="dark"] .jira-table-wrap th,
[data-theme="dark"] .sf-table-wrap th {
    color: var(--ui-text-soft) !important;
}

[data-theme="dark"] .jira-table-wrap td,
[data-theme="dark"] .sf-table-wrap td {
    border-color: var(--ui-border) !important;
}

[data-theme="dark"] .jira-row-trigger:hover,
[data-theme="dark"] .sf-row-trigger:hover {
    background: rgba(56, 189, 248, 0.06) !important;
}

[data-theme="dark"] .jira-status-pill--ok,
[data-theme="dark"] .sf-status-pill-top--ok {
    background: rgba(16, 185, 129, 0.18) !important;
    color: #6ee7b7 !important;
}

[data-theme="dark"] .jira-status-pill--warn,
[data-theme="dark"] .sf-status-pill-top--warn {
    background: rgba(251, 191, 36, 0.16) !important;
    color: #fbbf24 !important;
}

[data-theme="dark"] .jira-priority--p1 {
    background: rgba(251, 113, 133, 0.18) !important;
    color: #fda4af !important;
}

[data-theme="dark"] .jira-priority--p2 {
    background: rgba(251, 191, 36, 0.16) !important;
    color: #fbbf24 !important;
}

[data-theme="dark"] .jira-priority--p3,
[data-theme="dark"] .sf-status-pill {
    background: rgba(56, 189, 248, 0.18) !important;
    color: #7dd3fc !important;
}

@media (max-width: 767.98px) {
    .btn,
    .ui-btn,
    .qm-btn,
    .session-export-btn,
    .session-sync-btn,
    .integration-sync-btn,
    .integration-open-btn,
    .form-control,
    .form-select,
    .ui-control {
        font-size: 15px;
        min-height: 46px;
    }

    .btn-sm,
    .form-control-sm,
    .form-select-sm,
    .ui-btn--sm,
    .ui-control--sm,
    .qm-btn.qm-btn--sm,
    .qm-control.qm-control--sm {
        min-height: 40px;
    }

    .ui-pagination,
    .ui-pagination__controls {
        justify-content: flex-start;
        text-align: left;
    }
}

.ui-page-hero {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 24px;
    box-shadow: var(--ui-shadow-md);
    margin-bottom: 24px;
    overflow: hidden;
}

.ui-page-hero__inner {
    padding: 24px;
}

.ui-page-hero__head {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
}

.ui-page-hero__titles {
    flex: 1 1 420px;
    min-width: 0;
}

.ui-page-hero__title {
    color: var(--ui-text);
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0;
}

.ui-page-hero__subtitle {
    color: var(--ui-text-soft);
    font-size: 14px;
    line-height: 1.75;
    margin-top: 10px;
}

.ui-page-hero__actions {
    align-items: center;
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.ui-page-hero__search {
    margin-top: 18px;
}

.ui-hero-select {
    min-width: 170px;
}

.ui-pill {
    align-items: center;
    background: var(--ui-surface-muted);
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    color: var(--ui-text-soft);
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    gap: 8px;
    justify-content: center;
    line-height: 1;
    min-height: 40px;
    padding: 0 14px;
    white-space: nowrap;
}

.ui-pill--success {
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(16, 185, 129, 0.24);
    color: #059669;
}

.ui-pill--info {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.18);
    color: #2563eb;
}

[data-theme="dark"] .ui-pill--success {
    background: rgba(16, 185, 129, 0.16);
    border-color: rgba(52, 211, 153, 0.2);
    color: #6ee7b7;
}

[data-theme="dark"] .ui-pill--info {
    background: rgba(56, 189, 248, 0.16);
    border-color: rgba(56, 189, 248, 0.18);
    color: #7dd3fc;
}

@media (max-width: 991.98px) {
    .ui-page-hero__actions {
        justify-content: flex-start;
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .ui-page-hero__inner {
        padding: 20px 16px;
    }

    .ui-page-hero__title {
        font-size: 28px;
    }

    .ui-page-hero__actions {
        width: 100%;
    }

    .ui-page-hero__actions > * {
        flex: 1 1 100%;
    }

    .ui-hero-select {
        min-width: 0;
        width: 100%;
    }

    .ui-pill {
        width: 100%;
    }
}