:root {
    --surface: #FFFFFF;
    --surface-muted: #FAFBFC;
    --surface-hover: #EBECF0;
    --surface-selected: #EBF5FF;
    --text-muted: #7A869A;
    --overlay: rgba(9, 30, 66, .5);
    color-scheme: light;
}

html[data-theme="dark"] {
    --primary: #579DFF;
    --primary-dark: #85B8FF;
    --text: #F1F2F4;
    --text-secondary: #B6C2CF;
    --text-muted: #9FADBC;
    --bg: #101214;
    --surface: #1D2125;
    --surface-muted: #22272B;
    --surface-hover: #2C333A;
    --surface-selected: #1C2B41;
    --border: #3D4754;
    --card-shadow: 0 2px 8px rgba(0, 0, 0, .34);
    --overlay: rgba(0, 0, 0, .72);
    color-scheme: dark;
}

html,
body,
.topbar,
.admin-sidebar,
.admin-content,
.sidebar,
.notice-panel,
.side-card,
.modal,
.login-card {
    transition: background-color .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease;
}

/* 三态主题切换器 */
.theme-switcher {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-muted);
    box-shadow: inset 0 1px 2px rgba(9, 30, 66, .05);
}

.theme-option {
    width: 28px;
    height: 26px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font: inherit;
    font-size: 15px;
    line-height: 1;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .1s ease;
}

.theme-option:hover {
    color: var(--text);
    background: var(--surface-hover);
}

.theme-option:active {
    transform: translateY(1px);
}

.theme-option:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.theme-option.is-active {
    color: var(--primary);
    background: var(--surface);
    box-shadow: 0 1px 4px rgba(9, 30, 66, .16);
}

.theme-switcher-floating {
    position: fixed;
    z-index: 50;
    top: 20px;
    right: 20px;
}

/* 暗夜主题：公共结构与表单 */
html[data-theme="dark"] body,
html[data-theme="dark"] .admin-content {
    background: var(--bg);
    color: var(--text);
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .notice-panel,
html[data-theme="dark"] .side-card,
html[data-theme="dark"] .admin-sidebar,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .chart-box,
html[data-theme="dark"] .chart-box-large,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .io-card,
html[data-theme="dark"] .notification-settings-card,
html[data-theme="dark"] .admin-card,
html[data-theme="dark"] .self-card,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .log-table {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
    box-shadow: var(--card-shadow);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-grid input,
html[data-theme="dark"] .form-grid select,
html[data-theme="dark"] .form-grid textarea,
html[data-theme="dark"] .filter-bar input,
html[data-theme="dark"] .filter-bar select,
html[data-theme="dark"] .export-field input,
html[data-theme="dark"] .setting-group input,
html[data-theme="dark"] #emailContentTemplate,
html[data-theme="dark"] #emailRecipients,
html[data-theme="dark"] #emailFromName,
html[data-theme="dark"] #emailSubjectPrefix {
    background-color: var(--surface-muted) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="month"] {
    color-scheme: dark;
}

html[data-theme="dark"] .brand span,
html[data-theme="dark"] .topbar .brand span,
html[data-theme="dark"] .login-card h1 span {
    color: #85B8FF;
}

html[data-theme="dark"] .brand b,
html[data-theme="dark"] .topbar .brand b,
html[data-theme="dark"] .login-card h1 {
    color: #7EE2D4;
}

html[data-theme="dark"] .text-button:hover,
html[data-theme="dark"] .category-menu button:hover,
html[data-theme="dark"] .admin-sidebar .menu-item:hover,
html[data-theme="dark"] .notice-actions button:hover,
html[data-theme="dark"] .pagination button:hover,
html[data-theme="dark"] .pagination-bar button:hover,
html[data-theme="dark"] .btn-outline:hover,
html[data-theme="dark"] .setting-actions .btn-outline:hover {
    background: var(--surface-hover);
    border-color: #596773;
    color: var(--text);
}

html[data-theme="dark"] .data-actions,
html[data-theme="dark"] .filter-bar,
html[data-theme="dark"] .follow-composer,
html[data-theme="dark"] .notice-modal-header,
html[data-theme="dark"] .notice-meta-grid,
html[data-theme="dark"] .log-table-header,
html[data-theme="dark"] th,
html[data-theme="dark"] #notifStatus,
html[data-theme="dark"] .status-msg,
html[data-theme="dark"] .setting-hint,
html[data-theme="dark"] .import-progress {
    background: var(--surface-muted);
    border-color: var(--border);
    color: var(--text-secondary);
}

html[data-theme="dark"] .notice-modal-body {
    background: var(--bg);
}

html[data-theme="dark"] .notice-content-panel,
html[data-theme="dark"] .notice-follow-panel {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--card-shadow);
}

html[data-theme="dark"] .data-actions .import-label,
html[data-theme="dark"] .data-actions .month-picker,
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .pagination-bar button,
html[data-theme="dark"] .pagination button,
html[data-theme="dark"] .modal-actions button,
html[data-theme="dark"] .export-field,
html[data-theme="dark"] .drop-zone,
html[data-theme="dark"] .notice-modal button.btn-secondary,
html[data-theme="dark"] .batch-delete-toolbar .btn-batch-select-all,
html[data-theme="dark"] .batch-delete-toolbar .btn-batch-cancel {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text-secondary);
}

html[data-theme="dark"] .notice-modal button.btn-secondary:hover {
    background: var(--surface-hover);
    border-color: #596773;
    color: var(--text);
}

/* 首页公告列表 */
html[data-theme="dark"] .notice-item,
html[data-theme="dark"] .notice-item:nth-child(odd) {
    background: var(--surface);
    border-color: var(--border);
}

html[data-theme="dark"] .notice-item:nth-child(odd) {
    background: var(--surface-muted);
}

html[data-theme="dark"] .notice-item:hover {
    background: var(--surface-hover);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .36);
}

html[data-theme="dark"] .notice-item.selected,
html[data-theme="dark"] .notice-item.selected:hover {
    background: var(--surface-selected);
}

html[data-theme="dark"] .notice-item.pending-booking,
html[data-theme="dark"] .notice-item.todo-highlight,
html[data-theme="dark"] .notice-item.todo-highlight:hover {
    background: #352B17;
}

html[data-theme="dark"] .notice-item.pending-booking:hover {
    background: #40341C;
}

html[data-theme="dark"] .notice-item.completed-booking,
html[data-theme="dark"] .notice-item.completed-booking:hover {
    background: #2C333A;
}

html[data-theme="dark"] .follow-list::before,
html[data-theme="dark"] .follow-item,
html[data-theme="dark"] .read-row,
html[data-theme="dark"] td,
html[data-theme="dark"] .log-table-row,
html[data-theme="dark"] .notice-modal-header,
html[data-theme="dark"] .notice-meta-grid,
html[data-theme="dark"] .notice-modal-actions,
html[data-theme="dark"] .notice-follow-header,
html[data-theme="dark"] .modal-follow-item,
html[data-theme="dark"] .setting-divider {
    border-color: var(--border);
}

html[data-theme="dark"] .follow-text,
html[data-theme="dark"] .notice-head h2,
html[data-theme="dark"] .log-detail,
html[data-theme="dark"] .log-table-row,
html[data-theme="dark"] .notice-title-text,
html[data-theme="dark"] .user-name,
html[data-theme="dark"] .notice-follow-header h3,
html[data-theme="dark"] .notice-schedule-placeholder strong,
html[data-theme="dark"] td {
    color: var(--text);
}

html[data-theme="dark"] .follow-time,
html[data-theme="dark"] .follow-list > p,
html[data-theme="dark"] .modal-follow-empty,
html[data-theme="dark"] .chart-period,
html[data-theme="dark"] .dashboard-section-heading p {
    color: var(--text-muted);
}

html[data-theme="dark"] .notice-modal-eyebrow,
html[data-theme="dark"] .notice-meta-field,
html[data-theme="dark"] .notice-title-field,
html[data-theme="dark"] .notice-content-field,
html[data-theme="dark"] .notice-cycle-field .cycle-schedule-row,
html[data-theme="dark"] .notice-cycle-field .cycle-start-date,
html[data-theme="dark"] .notice-pin-field,
html[data-theme="dark"] .notice-schedule-placeholder,
html[data-theme="dark"] .notice-follow-header span,
html[data-theme="dark"] .modal-follow-item {
    color: var(--text-secondary);
}

html[data-theme="dark"] .notice-modal.is-readonly [data-notice-field]:disabled {
    opacity: 1;
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text);
    background: var(--surface-muted) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] .notice-modal.is-readonly .notice-content-field textarea:disabled {
    background: var(--surface) !important;
}

html[data-theme="dark"] .notice-modal-close,
html[data-theme="dark"] .complete-btn.completed {
    background: var(--surface-hover);
    border-color: var(--border);
    color: var(--text-secondary);
}

html[data-theme="dark"] .avatar,
html[data-theme="dark"] .avatar i,
html[data-theme="dark"] .follow-dot {
    border-color: var(--surface);
}

/* 管理后台 */
html[data-theme="dark"] .dashboard-page-header {
    border-color: var(--border);
    background: linear-gradient(120deg, #1D2125 0%, #1B2736 100%);
    box-shadow: var(--card-shadow);
}

html[data-theme="dark"] #page-dashboard .dashboard-stat-card {
    background: var(--surface);
    border-color: var(--border);
}

html[data-theme="dark"] #page-dashboard .dashboard-stat-card .stat-icon {
    background: color-mix(in srgb, var(--stat-accent) 24%, var(--surface));
}

html[data-theme="dark"] .dashboard-highlight-card,
html[data-theme="dark"] .highlight-metric {
    background: linear-gradient(155deg, var(--surface) 0%, var(--surface-muted) 100%);
    border-color: var(--border);
}

html[data-theme="dark"] .dashboard-page-header p,
html[data-theme="dark"] #page-dashboard .dashboard-stat-card .stat-info .stat-label,
html[data-theme="dark"] #page-dashboard .dashboard-stat-card .stat-info small,
html[data-theme="dark"] .highlight-metric span,
html[data-theme="dark"] .highlight-metric strong small,
html[data-theme="dark"] .highlight-card-heading p,
html[data-theme="dark"] #page-dashboard .chart-period,
html[data-theme="dark"] .dashboard-updated {
    color: var(--text-secondary);
}

html[data-theme="dark"] .dashboard-section-heading h3,
html[data-theme="dark"] #page-dashboard .chart-panel-header h4,
html[data-theme="dark"] #page-dashboard .chart-box h4.chart-card-title,
html[data-theme="dark"] .highlight-card-heading h4,
html[data-theme="dark"] .highlight-metric strong {
    color: var(--text);
}

html[data-theme="dark"] .dashboard-updated {
    border-color: var(--border);
    background: rgba(29, 33, 37, .82);
}

html[data-theme="dark"] #page-dashboard .chart-click-hint {
    background: var(--surface-selected);
}

html[data-theme="dark"] #page-dashboard .chart-period {
    background: var(--surface-hover);
}

html[data-theme="dark"] .highlight-card-heading,
html[data-theme="dark"] .highlight-metric {
    border-color: var(--border);
}

html[data-theme="dark"] .highlight-tip,
html[data-theme="dark"] .category-tag,
html[data-theme="dark"] .log-action-default,
html[data-theme="dark"] .setting-hint,
html[data-theme="dark"] .status-msg {
    background: var(--surface-hover);
    border-color: var(--border);
    color: var(--text-secondary);
}

html[data-theme="dark"] tr.user-row:hover,
html[data-theme="dark"] tr.log-row:hover,
html[data-theme="dark"] tr.notice-row:hover,
html[data-theme="dark"] .log-table-row:nth-child(odd),
html[data-theme="dark"] .log-table-row:hover {
    background: var(--surface-muted);
}

html[data-theme="dark"] tr.user-row.is-current,
html[data-theme="dark"] tr.user-row.is-current:hover,
html[data-theme="dark"] tr.notice-row.selected,
html[data-theme="dark"] tr.notice-row.selected:hover {
    background: var(--surface-selected);
}

html[data-theme="dark"] .batch-delete-toolbar {
    background: #362425;
    border-color: #71383A;
}

html[data-theme="dark"] .export-sensitive-hint,
html[data-theme="dark"] .notice-loading-caption {
    background: #352B17;
    border-color: #725B20;
    color: #F5CD47;
}

html[data-theme="dark"] .io-card:hover,
html[data-theme="dark"] .drop-zone:hover {
    border-color: var(--primary);
    background: var(--surface-selected);
}

html[data-theme="dark"] .admin-data-loading {
    background: rgba(16, 18, 20, .88);
}

html[data-theme="dark"] .admin-loading-card {
    background: var(--surface);
    border-color: var(--primary);
    color: var(--text-secondary);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .42);
}

html[data-theme="dark"] .admin-loading-card strong {
    color: var(--text);
}

html[data-theme="dark"] .admin-loading-card > span:not(.admin-loading-spinner) {
    color: var(--text-muted);
}

html[data-theme="dark"] .admin-loading-bars i,
html[data-theme="dark"] .skeleton-card,
html[data-theme="dark"] .skeleton-chart,
html[data-theme="dark"] .skeleton-chart-wide,
html[data-theme="dark"] .skeleton-notice-item,
html[data-theme="dark"] .skeleton-notice-item::before,
html[data-theme="dark"] .skeleton-notice-item::after,
html[data-theme="dark"] .skeleton-notice-item .sk-line,
html[data-theme="dark"] .skeleton-notice-item .sk-footer {
    background: linear-gradient(90deg, #22272B 20%, #3D4754 50%, #22272B 80%);
    background-size: 200% 100%;
}

html[data-theme="dark"] .modal-mask {
    background: var(--overlay);
}

html[data-theme="dark"] .toast {
    background: #2C333A;
    color: var(--text);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] .slider {
    background: #596773;
}

html[data-theme="dark"] .slider::before {
    background: #F1F2F4;
}

/* 登录页 */
html[data-theme="dark"] body.theme-page-login {
    background: linear-gradient(125deg, #101827, #173B32, #142C46, #30233A, #3D2025);
    background-size: 500%;
}

html[data-theme="dark"] .login-card {
    box-shadow: 0 18px 50px rgba(0, 0, 0, .48);
}

html[data-theme="dark"] .login-card p,
html[data-theme="dark"] .login-card small {
    color: var(--text-secondary);
}

html[data-theme="dark"] .login-auth-hint {
    border-color: #27466B;
    background: #17263A;
    color: var(--text-secondary);
}

html[data-theme="dark"] .login-auth-hint-icon {
    background: #1C3B61;
    color: #85B8FF;
}

html[data-theme="dark"] .login-auth-hint strong {
    color: var(--text);
}

@media (max-width: 720px) {
    .topbar .user-area {
        gap: 8px;
    }

    .theme-switcher {
        transform: scale(.94);
        transform-origin: right center;
    }
}

@media (prefers-reduced-motion: reduce) {
    html,
    body,
    .topbar,
    .admin-sidebar,
    .admin-content,
    .sidebar,
    .notice-panel,
    .side-card,
    .modal,
    .login-card {
        transition: none;
    }
}