/* 加载顺序：ui-base.css → ui-components.css → ui-app.css → pages/*.css
   设计 tokens 唯一来源；深色为默认，浅色主题在文件末尾通过 [data-theme="light"] 覆盖。 */
:root {
    color-scheme: dark;
    --bg-base: #070b14;
    --bg-raised: #0b111d;
    --surface-1: #0d1422;
    --surface-2: #121b2c;
    --surface-hover: #18243a;
    --surface-glass: rgb(13 20 34 / 72%);
    --text-main: #eaf2ff;
    --text-sub: #b3c1d8;
    --text-soft: #8d9cb6;
    --line: rgb(148 197 255 / 11%);
    --line-strong: rgb(148 197 255 / 22%);
    --line-control: #4a5d7c;
    --accent-cyan: #22d3ee;
    --accent-blue: #60a5fa;
    --accent-violet: #a78bfa;
    --accent-pink: #f472b6;
    --brand-blue: #3b82f6;
    --brand-violet: #8b5cf6;
    --brand-pink: #ec4899;
    --grad-signature: linear-gradient(135deg, #3b82f6 0%, #a78bfa 60%, #ec4899 100%);
    --primary-bg: #38bdf8;
    --primary-hover: #5cccf9;
    --on-primary: #04111f;
    --grad-primary: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
    --grad-brand: linear-gradient(135deg, var(--accent-cyan), var(--accent-violet));
    --grad-border: linear-gradient(180deg, rgb(148 197 255 / 24%), rgb(148 197 255 / 6%) 60%, rgb(167 139 250 / 12%));
    --grad-hairline: linear-gradient(90deg, transparent, rgb(34 211 238 / 55%), transparent);
    --glow-sm: 0 0 8px rgb(34 211 238 / 45%);
    --glow-md: 0 8px 28px rgb(34 211 238 / 22%);
    --grid-line: rgb(148 197 255 / 4.5%);
    --success: #5eead4;
    --success-bg: rgb(20 184 166 / 13%);
    --warning: #fcd34d;
    --warning-bg: rgb(245 158 11 / 13%);
    --danger: #fda4af;
    --danger-bg: rgb(244 63 94 / 14%);
    --info: #7dd3fc;
    --info-bg: rgb(56 189 248 / 12%);
    --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-title: clamp(1.5rem, 2.5vw, 1.75rem);
    --text-stat: clamp(1.75rem, 2.5vw, 2rem);
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 0 rgb(255 255 255 / 3%) inset, 0 8px 24px rgb(0 0 0 / 22%);
    --shadow-overlay: 0 24px 80px rgb(0 0 0 / 55%), 0 0 0 1px rgb(148 197 255 / 8%);
    --motion-fast: 120ms;
    --motion-base: 180ms;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --z-header: 20;
    --z-toast: 40;
    --z-overlay: 60;
    --input-bg: rgb(4 8 16 / 55%);
    --thead-bg: rgb(4 8 16 / 45%);
    --sidebar-bg: rgb(11 17 29 / 78%);
    --topbar-bg: rgb(7 11 20 / 72%);
    --chart-grid: rgb(148 197 255 / 9%);
    --chart-1: #22d3ee;
    --chart-2: #a78bfa;
    --chart-3: #f472b6;
    --chart-4: #60a5fa;
    --chart-5: #5eead4;
}

* { box-sizing: border-box; }
html { font-size: 16px; scroll-padding-top: 90px; }
body {
    position: relative;
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(ellipse 70% 45% at 50% -8%, rgb(34 211 238 / 10%), transparent 70%),
        radial-gradient(ellipse 40% 40% at 100% 0%, rgb(167 139 250 / 9%), transparent 70%),
        var(--bg-base);
    color: var(--text-main);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
/* Page-level grid texture only; it fades out and never sits inside content surfaces. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 85%);
}
body:has(dialog[open]) { overflow: hidden; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: var(--text-title); line-height: 1.3; letter-spacing: -0.025em; }
h2 { font-size: var(--text-lg); line-height: 1.4; }
h3 { font-size: var(--text-md); line-height: 1.5; }
a { color: var(--accent-blue); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; }
button, input, select, textarea, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
button, a, input, select, textarea { touch-action: manipulation; }
img, svg { max-width: 100%; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { margin-bottom: var(--space-4); font-weight: 600; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; }
::selection { color: var(--text-main); background: rgb(34 211 238 / 32%); }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.text-sub { color: var(--text-sub); }
.text-soft, .page-note { color: var(--text-soft); }
.text-small { font-size: var(--text-xs); }
.numeric, .stat { font-variant-numeric: tabular-nums; }
.text-accent { color: var(--accent-cyan); }
.mono { font-family: var(--font-mono); }
.text-right { text-align: right; }
.nowrap { white-space: nowrap; }
.wrap { overflow-wrap: anywhere; }
.stack { display: grid; gap: var(--space-6); min-width: 0; }
.stack-sm { display: grid; gap: var(--space-3); min-width: 0; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- 浅色主题 ---------- */
:root[data-theme="light"] {
    color-scheme: light;
    --bg-base: #f3f6fb;
    --bg-raised: #ffffff;
    --surface-1: #ffffff;
    --surface-2: #eef2f8;
    --surface-hover: #e6ecf5;
    --surface-glass: rgb(255 255 255 / 80%);
    --text-main: #0f1b2d;
    --text-sub: #3d4e66;
    --text-soft: #5f6f87;
    --line: rgb(15 40 80 / 10%);
    --line-strong: rgb(15 40 80 / 20%);
    --line-control: #a9b6c9;
    --accent-cyan: #0891b2;
    --accent-blue: #2563eb;
    --accent-violet: #7c3aed;
    --accent-pink: #db2777;
    --primary-bg: #0ea5e9;
    --on-primary: #ffffff;
    --grad-primary: linear-gradient(135deg, #06b6d4, #3b82f6);
    --grad-border: linear-gradient(180deg, rgb(15 40 80 / 14%), rgb(15 40 80 / 6%) 60%, rgb(124 58 237 / 12%));
    --grad-hairline: linear-gradient(90deg, transparent, rgb(8 145 178 / 45%), transparent);
    --glow-sm: 0 0 6px rgb(8 145 178 / 35%);
    --glow-md: 0 8px 24px rgb(8 145 178 / 18%);
    --grid-line: rgb(15 40 80 / 5%);
    --success: #0f766e;
    --success-bg: rgb(20 184 166 / 12%);
    --warning: #a16207;
    --warning-bg: rgb(245 158 11 / 14%);
    --danger: #be123c;
    --danger-bg: rgb(244 63 94 / 10%);
    --info: #0369a1;
    --info-bg: rgb(56 189 248 / 12%);
    --shadow-sm: 0 1px 2px rgb(15 40 80 / 6%), 0 6px 20px rgb(15 40 80 / 6%);
    --shadow-overlay: 0 24px 60px rgb(15 40 80 / 18%), 0 0 0 1px rgb(15 40 80 / 6%);
    --input-bg: #ffffff;
    --thead-bg: #f5f8fc;
    --sidebar-bg: rgb(255 255 255 / 86%);
    --topbar-bg: rgb(243 246 251 / 80%);
    --chart-grid: rgb(15 40 80 / 8%);
    --chart-1: #0891b2;
    --chart-2: #7c3aed;
    --chart-3: #db2777;
    --chart-4: #2563eb;
    --chart-5: #0f766e;
}