/* ============================================================
 * 基础层：设计令牌（颜色 / 尺寸 / 动效）+ 主题 + 全局重置
 * ------------------------------------------------------------
 * 主题通过 <html data-theme="dark|light"> 切换。
 * 所有颜色都收敛为令牌，新增主题或调整配色只需改这里。
 * ============================================================ */

/* ===== 通用令牌（与主题无关） ===== */
:root {
    --radius: 10px;
    --radius-sm: 6px;
    --transition: 0.2s ease;
    --font-mono: 'SF Mono', 'Cascadia Code', 'Consolas', 'Monaco', 'Menlo', monospace;
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
    /* 主题切换时长；切换瞬间会被临时置 0，避免颜色变换产生残影 */
    --theme-transition: 0.25s ease;
}

/* ===== 深色主题（默认，与原配色 1:1 对应） ===== */
:root,
:root[data-theme='dark'] {
    color-scheme: dark;

    /* 基础背景 / 文字 */
    --bg: #0d1117;
    --bg-card: #161b22;
    --bg-input: #1a1f2b;
    --bg-input-focus: #1d2330;
    --text: #e6edf3;
    --text-secondary: #b0b8c4;
    --text-muted: #8b949e;

    /* 边框 */
    --border: #30363d;
    --border-hover: #484f5a;
    --border-focus: #58a6ff;
    --border-soft: rgba(255, 255, 255, 0.06);
    --border-row: rgba(255, 255, 255, 0.05);

    /* 强调色 */
    --accent: #f0b940;
    --accent-glow: rgba(240, 185, 64, 0.3);
    --accent-bg: rgba(240, 185, 64, 0.2);
    --accent-bg-soft: rgba(240, 185, 64, 0.06);
    --accent-bg-mid: rgba(240, 185, 64, 0.15);
    --accent-bg-strong: rgba(240, 185, 64, 0.25);
    --accent-border: rgba(240, 185, 64, 0.4);

    --green: #3fb950;
    --green-bg-soft: rgba(63, 185, 80, 0.2);

    --red: #f85149;
    --red-bg-soft: rgba(248, 81, 73, 0.06);
    --red-bg-mid: rgba(248, 81, 73, 0.08);
    --red-border: rgba(248, 81, 73, 0.4);

    --blue: #58a6ff;
    --blue-bg: rgba(88, 166, 255, 0.12);
    --blue-bg-soft: rgba(88, 166, 255, 0.2);
    --blue-bg-hover: rgba(88, 166, 255, 0.22);
    --blue-border: rgba(88, 166, 255, 0.3);
    --blue-focus-ring: rgba(88, 166, 255, 0.15);
    --blue-focus-ring-soft: rgba(88, 166, 255, 0.12);
    --blue-glow: rgba(88, 166, 255, 0.2);

    --purple: #bc8cff;
    --purple-bg: rgba(188, 140, 255, 0.06);
    --purple-border: rgba(188, 140, 255, 0.35);
    --purple-focus-ring: rgba(188, 140, 255, 0.15);

    --orange: #f0883e;
    --orange-bg: rgba(240, 136, 62, 0.2);
    --orange-bg-soft: rgba(240, 136, 62, 0.08);
    --orange-border: rgba(240, 136, 62, 0.4);

    /* 阴影与叠加层 */
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    --shadow-hover: 0 2px 12px rgba(0, 0, 0, 0.3);
    --shadow-modal: 0 8px 40px rgba(0, 0, 0, 0.6);
    --overlay: rgba(0, 0, 0, 0.6);
    --bg-soft: rgba(255, 255, 255, 0.015);
    --bg-hover: rgba(255, 255, 255, 0.03);
    --bg-row-hover: rgba(255, 255, 255, 0.02);
    --bg-table-head: rgba(0, 0, 0, 0.2);

    /* 标题渐变 */
    --title-from: #f0d78c;
    --title-via: #f0b940;
    --title-to: #e8a820;

    /* body 装饰光晕 */
    --glow-1: rgba(240, 185, 64, 0.04);
    --glow-2: rgba(88, 166, 255, 0.05);
    --glow-3: rgba(139, 148, 158, 0.02);
}

/* ===== 浅色主题 ===== */
:root[data-theme='light'] {
    color-scheme: light;

    /* 基础背景 / 文字 */
    --bg: #f2f5f9;
    --bg-card: #ffffff;
    --bg-input: #f6f8fa;
    --bg-input-focus: #ffffff;
    --text: #1f2328;
    --text-secondary: #4d5560;
    --text-muted: #6b7280;

    /* 边框 */
    --border: #d0d7de;
    --border-hover: #a9b2bd;
    --border-focus: #0969da;
    --border-soft: rgba(31, 35, 40, 0.08);
    --border-row: rgba(31, 35, 40, 0.07);

    /* 强调色 */
    --accent: #b07800;
    --accent-glow: rgba(176, 120, 0, 0.25);
    --accent-bg: rgba(240, 185, 64, 0.28);
    --accent-bg-soft: rgba(240, 185, 64, 0.14);
    --accent-bg-mid: rgba(240, 185, 64, 0.2);
    --accent-bg-strong: rgba(240, 185, 64, 0.32);
    --accent-border: rgba(176, 120, 0, 0.45);

    --green: #1a7f37;
    --green-bg-soft: rgba(26, 127, 55, 0.18);

    --red: #cf222e;
    --red-bg-soft: rgba(207, 34, 46, 0.07);
    --red-bg-mid: rgba(207, 34, 46, 0.08);
    --red-border: rgba(207, 34, 46, 0.4);

    --blue: #0969da;
    --blue-bg: rgba(9, 105, 218, 0.1);
    --blue-bg-soft: rgba(9, 105, 218, 0.16);
    --blue-bg-hover: rgba(9, 105, 218, 0.18);
    --blue-border: rgba(9, 105, 218, 0.35);
    --blue-focus-ring: rgba(9, 105, 218, 0.15);
    --blue-focus-ring-soft: rgba(9, 105, 218, 0.12);
    --blue-glow: rgba(9, 105, 218, 0.18);

    --purple: #8250df;
    --purple-bg: rgba(130, 80, 223, 0.07);
    --purple-border: rgba(130, 80, 223, 0.4);
    --purple-focus-ring: rgba(130, 80, 223, 0.15);

    --orange: #bc4c00;
    --orange-bg: rgba(188, 76, 0, 0.16);
    --orange-bg-soft: rgba(188, 76, 0, 0.08);
    --orange-border: rgba(188, 76, 0, 0.4);

    /* 阴影与叠加层 */
    --shadow: 0 4px 20px rgba(31, 35, 40, 0.1);
    --shadow-hover: 0 2px 12px rgba(31, 35, 40, 0.12);
    --shadow-modal: 0 8px 40px rgba(31, 35, 40, 0.2);
    --overlay: rgba(31, 35, 40, 0.45);
    --bg-soft: rgba(31, 35, 40, 0.02);
    --bg-hover: rgba(31, 35, 40, 0.04);
    --bg-row-hover: rgba(31, 35, 40, 0.035);
    --bg-table-head: rgba(31, 35, 40, 0.04);

    /* 标题渐变 */
    --title-from: #b07800;
    --title-via: #d99a1a;
    --title-to: #9a6a00;

    /* body 装饰光晕 */
    --glow-1: rgba(240, 185, 64, 0.1);
    --glow-2: rgba(88, 166, 255, 0.09);
    --glow-3: rgba(139, 148, 158, 0.05);
}

/* ===== 全局重置与基础排版 ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    line-height: 1.6;
    min-height: 100vh;
    background-image:
        radial-gradient(ellipse at 20% 10%, var(--glow-1) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 90%, var(--glow-2) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 50%, var(--glow-3) 0%, transparent 70%);
    background-attachment: fixed;
}

/* 主题切换时的过渡：只作用于配色相关属性，避免影响布局与既有动效。
   切换瞬间 --theme-transition 被置 0，防止颜色变化产生残影。 */
html.theme-animating,
html.theme-animating body,
html.theme-animating body *:not(.modal-overlay):not(.toast) {
    transition:
        background-color var(--theme-transition),
        color var(--theme-transition),
        border-color var(--theme-transition),
        box-shadow var(--theme-transition) !important;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 16px 40px;
}

/* 通用可访问性：仅屏幕阅读器可见 */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}