/**
 * ============================================================================
 * 全站设计 Token（单一事实来源，UI 统一核心基准）
 * 加载顺序：必须在 common.css / 各页样式 / admin.css / retest.css 之后引入，
 * 同名变量以后来者为准实现全站收敛与去 AI 杂质。
 * ============================================================================
 */

:root {
    color-scheme: light dark;
    /* ---------- 1. 唯一主强调色（经典克制蓝 #2563eb，无杂色渐变与光晕） ---------- */
    --brand-500: #2563eb;
    --brand-600: #1d4ed8;
    --brand-700: #1e40af;
    --brand-rgb: 37, 99, 235;
    --brand-light: rgba(37, 99, 235, 0.10);
    --brand-border: rgba(37, 99, 235, 0.22);
    --brand-glow: transparent;
    --brand-gradient: var(--brand-500);

    /* ---------- 2. 中性色阶：深色默认（Graphite 石墨灰） ---------- */
    --n-0: #0f0f10;  /* 侧栏/最深层/底栏 */
    --n-1: #141415;  /* 页面底色 */
    --n-2: #19191b;  /* 卡片主底色 */
    --n-3: #232325;  /* 输入框/抬高表面/选中行 */
    --line: rgba(237, 237, 237, 0.08);
    --line-subtle: rgba(237, 237, 237, 0.05);
    --line-strong: rgba(237, 237, 237, 0.14);

    --text-1: #ededed;
    --text-2: #a1a1a6;
    --text-3: #85858b;

    /* 语义色（低饱和，与石墨底融合） */
    --positive: #4cc38a;
    --negative: #e5484d;
    --warning: #e0a43a;
    --accent-ink: #6b9bff;

    /* ---------- 3. 规范圆角阶梯（严格按嵌套关系：内圆角 = 外圆角 - 内边距） ---------- */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px; /* 仅用于开关滑块、圆形头像、状态圆点 */

    /* ---------- 4. 字体排印规范 ---------- */
    --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 16px;
    --text-lg: 20px;
    --text-xl: 28px;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;

    /* ---------- 5. 阴影规范（深色依赖层级色差与发丝线，杜绝彩色发光） ---------- */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.7);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.8);
    --shadow-glow: none;

    /* ---------- 6. 动效规范（单一缓动曲线、具体属性过渡、禁抓屏缩放） ---------- */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 150ms;
    --dur-normal: 200ms;
    --dur-enter: 300ms;
    --transition-fast: 0.15s var(--ease);
    --transition-normal: 0.2s var(--ease);
    --transition-smooth: 0.3s var(--ease);
    --transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);

    /* ---------- 7. 层级阶梯 ---------- */
    --z-dropdown: 50;
    --z-sticky: 100;
    --z-overlay: 1000;
    --z-modal: 1100;
    --z-toast: 1200;
    --z-max: 9999;

    /* ---------- 7.1 移动端安全区与触控规范 ---------- */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --touch-min-size: 42px;

    /* ---------- 8. 存量兼容收敛映射（强制覆盖各页旧变量） ---------- */
    --accent: var(--brand-500);
    --accent-hover: var(--brand-600);
    --accent-primary: var(--brand-500);
    --accent-secondary: var(--brand-500);
    --accent-tertiary: var(--brand-600);
    --accent-rgb: var(--brand-rgb);
    --accent-glow: transparent;
    --accent-gradient: var(--brand-500);
    --primary: var(--brand-500);
    --primary-hover: var(--brand-600);
    --primary-glow: transparent;

    --bg-primary: var(--n-1);
    --bg-secondary: var(--n-0);
    --bg-tertiary: var(--n-3);
    --bg-card: var(--n-2);
    --bg-elevated: var(--n-2);
    --bg-hover: var(--n-3);
    --bg-overlay: rgba(0, 0, 0, 0.65);
    --bg-pattern-color: transparent;

    --text-primary: var(--text-1);
    --text-secondary: var(--text-2);
    --text-tertiary: var(--text-3);
    --text-muted: var(--text-3);

    --border-color: var(--line);
    --border-light: var(--line-subtle);
    --border-hover: var(--line-strong);
    --border-subtle: var(--line);

    /* 消除全站磨砂玻璃与漂浮渐变杂质 */
    --ui-glass-nav: var(--n-1);
    --ui-glass-card: var(--n-2);
    --ui-glass-card-strong: var(--n-2);
    --ui-modal-bg: var(--n-2);
    --ui-modal-border: var(--line);
    --ui-toast-bg: var(--n-3);
    --ui-toast-border: var(--line);
    --ui-float-bg: var(--n-2);
    --ui-float-border: var(--line);

    --focus-ring: 2px solid var(--brand-500);
    --focus-offset: 2px;
}

/* 浅色主题收敛 */
[data-theme="light"] {
    color-scheme: light;
    --n-0: #f4f4f5;
    --n-1: #fafafa;
    --n-2: #ffffff;
    --n-3: #f4f4f5;
    --line: rgba(23, 23, 23, 0.08);
    --line-subtle: rgba(23, 23, 23, 0.05);
    --line-strong: rgba(23, 23, 23, 0.16);

    --text-1: #171717;
    --text-2: #525252;
    --text-3: #737373;

    --accent-ink: #1d4ed8;
    --positive: #16a34a;
    --negative: #dc2626;
    --warning: #b45309;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.07);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.06);
    --shadow-xl: 0 12px 28px rgba(0, 0, 0, 0.08);
    --shadow-glow: none;

    --bg-primary: var(--n-1);
    --bg-secondary: var(--n-0);
    --bg-tertiary: var(--n-3);
    --bg-card: var(--n-2);
    --bg-elevated: var(--n-2);
    --bg-hover: var(--n-3);
    --bg-overlay: rgba(0, 0, 0, 0.4);

    --text-primary: var(--text-1);
    --text-secondary: var(--text-2);
    --text-tertiary: var(--text-3);
    --text-muted: var(--text-3);

    --border-color: var(--line);
    --border-light: var(--line-subtle);
    --border-hover: var(--line-strong);
    --border-subtle: var(--line);

    --ui-glass-nav: var(--n-1);
    --ui-glass-card: var(--n-2);
    --ui-glass-card-strong: var(--n-2);
    --ui-modal-bg: var(--n-2);
    --ui-toast-bg: var(--n-2);
    --ui-float-bg: var(--n-2);
}

/* 深色主题显式保障 */
[data-theme="dark"] {
    color-scheme: dark;
    --primary: var(--brand-500);
    --primary-hover: var(--brand-600);
}

/* 全站字体与排版统一收敛 */
body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* 移动端触控优化：消除点击延迟与灰色/蓝色高亮闪烁 */
button, .btn, a, select, input, textarea, [role="button"], label {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* ============================================================================
   9. 全局 Toast 统一收敛规范（Unslop 纯净准则，覆盖存量各页样式）
   ============================================================================ */
.toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: var(--z-toast, 1200) !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    max-width: calc(100vw - 48px);
}

.toast-item,
.toast {
    pointer-events: auto;
    min-width: 240px;
    max-width: 400px;
    padding: 10px 14px;
    border-radius: var(--radius-md) !important;
    background: var(--ui-toast-bg) !important;
    border: 1px solid var(--ui-toast-border) !important;
    box-shadow: var(--shadow-lg) !important;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-sm) !important;
    font-weight: var(--weight-medium) !important;
    line-height: 1.45;
    color: var(--text-primary) !important;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--dur-normal) var(--ease), transform var(--dur-normal) var(--ease) !important;
    box-sizing: border-box;
    white-space: normal;
    text-align: left;
}

.toast-item.show,
.toast.show {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 语义微指示线（克制发丝左边条，3px 无发光） */
.toast-item.toast-success,
.toast-item.success,
.toast.success {
    border-left: 3px solid var(--positive) !important;
}

.toast-item.toast-error,
.toast-item.error,
.toast.error {
    border-left: 3px solid var(--negative) !important;
}

.toast-item.toast-warning,
.toast-item.warning,
.toast-item.warn,
.toast.warning {
    border-left: 3px solid var(--warning) !important;
}

.toast-item.toast-info,
.toast-item.info,
.toast.info {
    border-left: 3px solid var(--brand-500) !important;
}

/* 统一线性图标 */
.toast-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    flex-shrink: 0 !important;
    display: inline-block;
}

.toast-item.success .toast-icon,
.toast-item.toast-success .toast-icon,
.toast.success .toast-icon { color: var(--positive) !important; }

.toast-item.error .toast-icon,
.toast-item.toast-error .toast-icon,
.toast.error .toast-icon { color: var(--negative) !important; }

.toast-item.warning .toast-icon,
.toast-item.warn .toast-icon,
.toast-item.toast-warning .toast-icon,
.toast.warning .toast-icon { color: var(--warning) !important; }

.toast-item.info .toast-icon,
.toast-item.toast-info .toast-icon,
.toast.info .toast-icon { color: var(--brand-500) !important; }

.toast-content {
    flex: 1;
    min-width: 0;
    line-height: 1.45;
    word-break: break-word;
}

@media (max-width: 640px) {
    .toast-container {
        top: calc(16px + var(--safe-top, 0px));
        left: 16px;
        right: 16px;
        max-width: none;
        align-items: stretch;
    }
    .toast-item,
    .toast {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
}

/* ============================================================================
   10. 三态主题分段控件（浅色 / 深色 / 跟随系统）
   ============================================================================ */
.theme-segmented {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: var(--radius-md);
    background: var(--n-3);
    border: 1px solid var(--line-strong);
    flex-shrink: 0;
}

.theme-seg-btn {
    width: 28px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: calc(var(--radius-md) - 2px);
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    padding: 0;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.theme-seg-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.theme-seg-btn:hover {
    color: var(--text-1);
}

.theme-seg-btn.active {
    background: var(--n-2);
    color: var(--brand-500);
    box-shadow: var(--shadow-xs);
}

.theme-seg-btn:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 1px;
}

/* ============================================================================
   11. 原生 <dialog> 与 Top Layer Popover 提示层
   ============================================================================ */
dialog.native-dialog {
    margin: auto;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xl);
    background: var(--ui-modal-bg, var(--n-2));
    color: var(--text-primary);
    box-shadow: var(--shadow-xl);
    max-width: min(92vw, 480px);
    max-height: 90dvh;
    overflow: auto;
    overscroll-behavior: contain;
}

dialog.native-dialog.dialog-overlay,
dialog.native-dialog.modal-overlay,
dialog.native-dialog.choice-overlay,
dialog.native-dialog.wechat-guide-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 100vw;
    height: 100%;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    overflow: auto;
    overscroll-behavior: contain;
}

dialog.native-dialog:not([open]) {
    display: none !important;
}

dialog.native-dialog.dialog-overlay[open],
dialog.native-dialog.modal-overlay[open],
dialog.native-dialog.choice-overlay[open],
dialog.native-dialog.wechat-guide-overlay[open] {
    display: flex;
}

dialog.native-dialog::backdrop {
    background: rgba(0, 0, 0, 0.56);
    overflow: hidden;
}

[data-theme="light"] dialog.native-dialog::backdrop {
    background: rgba(15, 23, 42, 0.45);
}

dialog.wechat-guide-overlay::backdrop {
    background: rgba(15, 23, 42, 0.88);
}

[popover].toast-container {
    margin: 0;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    overflow: visible;
    width: auto;
    height: auto;
    inset: 24px 24px auto auto;
}

@media (max-width: 640px) {
    [popover].toast-container {
        inset: calc(16px + var(--safe-top, 0px)) 16px auto 16px;
    }
}

/* ============================================================================
   12. 减少动态效果降级（尊重系统辅助功能设置）
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}