/* ============================================================
   评审与分析系统 · 共享主题样式
   浅色（默认）/ 深色 双主题，通过 <html data-theme="dark"> 切换

   结构：
     1. 设计令牌（颜色 / 间距 / 字号 / 圆角）
     2. 重置与骨架
     3. 背景装饰（**全静态**：零 filter、零无限动画）
     4. 布局层（shell / pagehead / toolbar / section / grid）
     5. 组件（卡片 / 按钮 / 表单 / 标签 / 统计 / 表格 / 弹窗 / 轻提示）
     6. 跨页复用的小组件（评委码 / 评委进度 / 命题与查重）
   ============================================================ */

/* ============================================================
   1. 设计令牌
   ============================================================ */
:root {
    --font-sans: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI',
        'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Source Han Sans SC',
        'Noto Sans CJK SC', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;

    /* ---------- 间距标尺（4 的倍数） ---------- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 22px;
    --sp-6: 30px;

    /* ---------- 字号标尺 ---------- */
    --fs-xs: 0.72rem;
    --fs-sm: 0.8rem;
    --fs-md: 0.875rem;
    --fs-lg: 0.95rem;
    --fs-xl: 1.15rem;
    --fs-2xl: 1.4rem;

    /* ---------- 圆角 ---------- */
    --r-sm: 0.45rem;
    --r-md: 0.7rem;
    --r-lg: 0.9rem;
    --r-pill: 999px;

    /* ---------- 布局常量 ---------- */
    --shell-max: 1200px;
    --shell-wide: 1440px;
    --read-width: 68ch;
    --dist-loading: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3C/svg%3E");

    /* ---------- 浅色主题（默认）· 樱花 × 淡绿 ---------- */
    /* 四层分工：
         环境层（粉）  页面底 / 光斑 / 标题渐变 —— 樱花氛围，不承担动作语义
         面层（淡绿）  卡片 / 面板 / 弹层 —— 淡绿梦幻雾面（--card-bg / --bg-mid）
         阅读层（米黄）长文正文区 —— 护眼米黄（--paper-reading），只给 review 用
         动作层（三档绿）主操作竹绿 · 肯定薄荷 · 次操作青绿 · 辅助苔绿
       状态色：杏金 gold 数值 / 苏芳红 rose 危险 / 藤紫 violet 标准差 / 桔梗蓝 blue 命题。
       每个强调色都带一份 -rgb 分量，半透明底一律写 rgba(var(--x-rgb), α)，
       不再散落十六进制 / rgb 字面量（改主题只需动这一块）。 */
    --page-bg: linear-gradient(180deg, #fff7fb 0%, #fdeaf3 100%);
    --bg-deep: #fdeaf3;
    --bg-mid: #f6fdf9;
    --card-bg: rgba(220, 249, 233, 0.92);
    /* 「梦幻」不靠 filter：卡面挂一层绿色内雾（inset 0 0 22px），
       配合顶部 1px 高光，得到玻璃感又零重绘成本 */
    --gloss-inset: inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 0 22px rgba(120, 220, 175, 0.10);
    --card-shadow: 0 1px 2px rgba(56, 130, 98, 0.07), 0 12px 28px rgba(56, 130, 98, 0.10),
        var(--gloss-inset);
    --border: rgba(56, 130, 98, 0.18);
    --border-strong: rgba(56, 130, 98, 0.34);
    --text-primary: #1f3a30;
    --text-muted: #4f6a5d;

    --accent-brand: #a83a63;
    --accent-brand-rgb: 168, 58, 99;
    --accent-gold: #82580a;
    --accent-gold-rgb: 130, 88, 10;
    --accent-rose: #bd2f45;
    --accent-rose-rgb: 189, 47, 69;
    --accent-green: #276b4c;
    --accent-green-rgb: 39, 107, 76;
    --accent-violet: #7a4fb5;
    --accent-violet-rgb: 122, 79, 181;
    --accent-blue: #4d5aa8;
    --accent-blue-rgb: 77, 90, 168;
    /* 樱瓣：只做装饰填充（微粒 / 光斑），不承担文字色 */
    --accent-petal: #e58bb2;
    --accent-petal-rgb: 229, 139, 178;

    /* ---------- 动作绿：按功能层级分三档 ----------
       不能"一个绿走天下"——主操作和次要动作必须一眼分得出轻重，所以同族不同色相：

         ① 主操作 · 竹绿   实心面 + 白字（4.85 / 6.33:1）  提交 / 保存 / 登录
         ② 肯定   · 薄荷   亮面   + 深绿字（6.76 / 5.57:1）通过 / 保留 / 确认
         ③ 次操作 · 青绿   描边   + 青绿字                取消 / 返回 / 次要动作
         ④ 辅助   · 苔绿   描边 / hover 变色               幽灵按钮与轻量触发器

       层级越高"面"越重；色相从黄绿（苔）→ 竹绿 → 薄荷 → 青绿依次拉开。
       ⚠️ 浅色下要压白字 ⇒ 面亮度上限 0.1833（≈ #337f5c 到顶），
          所以竹绿已经是最亮的那一档；要更清新只能改用「亮面 + 深字」（薄荷档）。 */
    --action: var(--accent-green);
    --action-rgb: var(--accent-green-rgb);
    --grad-action: linear-gradient(135deg, #337f5c, #2b6b4e);
    --glow-action: rgba(47, 125, 91, 0.24);
    --action-soft: rgba(47, 125, 91, 0.12);

    --action-alt: #1c7168;
    --action-alt-rgb: 28, 113, 104;
    --glow-action-alt: rgba(28, 113, 104, 0.24);
    --action-alt-soft: rgba(28, 113, 104, 0.12);

    --action-mild: #4f7326;
    --action-mild-rgb: 79, 115, 38;

    --grad-confirm: linear-gradient(135deg, #7fcda6, #63bd90);
    --glow-confirm: rgba(99, 189, 144, 0.30);

    /* ---------- 护眼阅读纸（长文正文区专用）----------
       纯白长文在暗环境下刺眼：白底蓝通道满值（255），米黄把它压到 214，
       色温下移、照度降一档，正文对比度仍有 10.7:1（次要文字 4.7:1）。 */
    --paper-reading: #f7efd6;
    --paper-border: rgba(160, 128, 62, 0.28);
    --paper-shadow: 0 1px 2px rgba(150, 118, 52, 0.09), 0 12px 28px rgba(150, 118, 52, 0.13);

    --grad-gold: linear-gradient(135deg, #e8b552, #d09b2c);
    --grad-rose: linear-gradient(135deg, #bd3f52, #99263a);
    /* 标题：樱花玫 → 藤紫（两端都压得住白底，4.5:1 以上） */
    --grad-title: linear-gradient(120deg, #b23f6a 0%, #a3459b 58%, #7a4fb5 100%);
    /* 进度轨：樱 → 藤，是整页唯一的"梦幻"渐变 */
    --grad-track: linear-gradient(90deg, #b23f6a, #7a4fb5);

    /* 按钮文字色：浅色主题用白字压在深竹绿面上；薄荷档反过来用深绿字；
       --btn-on-gold 专供亮金底（白字仅 3.24:1） */
    --btn-on-accent: #ffffff;
    --btn-on-confirm: #0f3a27;
    --btn-on-gold: #3d2a05;

    --surface-inset: rgba(56, 130, 98, 0.07);
    --surface-soft: rgba(56, 130, 98, 0.04);
    --surface-hover: rgba(56, 130, 98, 0.09);
    --overlay: rgba(20, 44, 36, 0.44);
    --on-scrim: #ffffff;
    --scroll-thumb: rgba(56, 130, 98, 0.24);

    /* 静态色雾：用 radial-gradient 直接画柔和光斑，不再靠 filter: blur()
       三团雾 = 樱粉 + 藤紫 + 薄荷绿 —— 粉绿交叠出梦幻感，且全是静态渐变 */
    --aurora-1: radial-gradient(circle, rgba(247, 176, 208, 0.55) 0%, rgba(247, 176, 208, 0.18) 45%, transparent 72%);
    --aurora-2: radial-gradient(circle, rgba(196, 162, 235, 0.40) 0%, rgba(196, 162, 235, 0.12) 45%, transparent 72%);
    --aurora-3: radial-gradient(circle, rgba(146, 236, 195, 0.50) 0%, rgba(146, 236, 195, 0.15) 45%, transparent 72%);
    --aurora-opacity: 1;
    /* 樱瓣微粒层：纯静态点阵，浅色下也留一点点，避免上半屏太秃 */
    --petal-opacity: 0.55;
}

/* 深色 = 夜樱 × 墨绿：底色仍是「深梅紫 → 胭脂」（樱花氛围），
   卡片层改墨绿雾面、动作绿一律反转成「亮面 + 深字」（浅色下是「深面 + 白字」） */
[data-theme="dark"] {
    --page-bg: linear-gradient(180deg, #191021 0%, #241522 100%);
    --bg-deep: #191021;
    --bg-mid: #1f2f2b;
    --card-bg: rgba(28, 52, 44, 0.74);
    --gloss-inset: inset 0 1px 0 rgba(190, 255, 220, 0.10),
        inset 0 0 26px rgba(90, 200, 155, 0.10);
    --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.36), 0 14px 32px rgba(0, 0, 0, 0.34),
        var(--gloss-inset);
    --border: rgba(190, 255, 220, 0.12);
    --border-strong: rgba(190, 255, 220, 0.26);
    --text-primary: #eaf5ef;
    --text-muted: #a8c4b6;

    --accent-brand: #f4a2c2;
    --accent-brand-rgb: 244, 162, 194;
    --accent-gold: #e8c073;
    --accent-gold-rgb: 232, 192, 115;
    --accent-rose: #ff8e93;
    --accent-rose-rgb: 255, 142, 147;
    --accent-green: #7ad3a4;
    --accent-green-rgb: 122, 211, 164;
    --accent-violet: #c9a8ff;
    --accent-violet-rgb: 201, 168, 255;
    --accent-blue: #a6b6ff;
    --accent-blue-rgb: 166, 182, 255;
    --accent-petal: #f7c8dd;
    --accent-petal-rgb: 247, 200, 221;

    --action: var(--accent-green);
    --action-rgb: var(--accent-green-rgb);
    --grad-action: linear-gradient(135deg, #a7e3c1, #86d2a8);
    --glow-action: rgba(122, 211, 164, 0.24);
    --action-soft: rgba(122, 211, 164, 0.14);

    --action-alt: #78d6c6;
    --action-alt-rgb: 120, 214, 198;
    --glow-action-alt: rgba(120, 214, 198, 0.24);
    --action-alt-soft: rgba(120, 214, 198, 0.14);

    --action-mild: #b9e08a;
    --action-mild-rgb: 185, 224, 138;

    --grad-confirm: linear-gradient(135deg, #9fe8dd, #7fd8cb);
    --glow-confirm: rgba(127, 216, 203, 0.26);

    --paper-reading: #2a2418;
    --paper-border: rgba(226, 200, 150, 0.20);
    --paper-shadow: 0 1px 2px rgba(0, 0, 0, 0.36), 0 14px 32px rgba(0, 0, 0, 0.34);

    --grad-gold: linear-gradient(135deg, #efc97e, #dcae5f);
    --grad-rose: linear-gradient(135deg, #ff9fa4, #ef8087);
    --grad-title: linear-gradient(120deg, #f7b3cd 0%, #d9a6ee 58%, #c9a8ff 100%);
    --grad-track: linear-gradient(90deg, #f4a2c2, #c9a8ff);

    /* 深色主题是浅色面 + 深字，绿面同样配深绿 / 深青字 */
    --btn-on-accent: #123a29;
    --btn-on-confirm: #0b3a35;
    --btn-on-gold: #2b1522;

    --surface-inset: rgba(190, 255, 220, 0.07);
    --surface-soft: rgba(190, 255, 220, 0.05);
    --surface-hover: rgba(190, 255, 220, 0.10);
    --overlay: rgba(8, 20, 16, 0.68);
    --on-scrim: #f2fffa;
    --scroll-thumb: rgba(190, 255, 220, 0.22);

    --aurora-1: radial-gradient(circle, rgba(214, 120, 168, 0.28) 0%, rgba(214, 120, 168, 0.10) 45%, transparent 72%);
    --aurora-2: radial-gradient(circle, rgba(150, 110, 205, 0.24) 0%, rgba(150, 110, 205, 0.09) 45%, transparent 72%);
    --aurora-3: radial-gradient(circle, rgba(96, 200, 150, 0.26) 0%, rgba(96, 200, 150, 0.09) 45%, transparent 72%);
    --aurora-opacity: 0.9;
    --petal-opacity: 0.6;
}

/* ============================================================
   2. 重置与骨架
   ============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 渐变背景挂在 fixed 伪元素上：
   ① 滚动时背景不重绘（等价于旧 background-attachment: fixed，但没有它的重绘开销）
   ② body 本身只留纯色底，避免整页贴图重算 */
html {
    background: var(--bg-deep);
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100%;
    font-family: var(--font-sans);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeSpeed;
    line-height: 1.6;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--page-bg);
    pointer-events: none;
}

body { transition: color 0.25s ease; }

[hidden] { display: none !important; }

/* ============================================================
   3. 背景装饰 —— 全静态
   旧实现是 3 个 600px 级元素常驻 `filter: blur(80px)` 且带 20s 无限动画，
   每页都在持续占用合成/栅格资源。现在改成纯 radial-gradient 光斑：
   柔和度由渐变本身提供，零 filter、零动画、零每帧开销。
   ============================================================ */
.bg-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}

.aurora {
    position: absolute;
    border-radius: 50%;
    opacity: var(--aurora-opacity);
}

.aurora-1 { width: 760px; height: 760px; background: var(--aurora-1); top: -320px; left: -220px; }
.aurora-2 { width: 660px; height: 660px; background: var(--aurora-2); top: 44%; right: -240px; }
.aurora-3 { width: 580px; height: 580px; background: var(--aurora-3); bottom: -260px; left: 26%; }

/* 樱瓣微粒：同样是静态点阵（一次绘制，无动画），
   浅色下当作「飘着的花瓣」、深色下当作「夜樱的星屑」 */
.stars {
    position: absolute;
    inset: 0;
    opacity: var(--petal-opacity);
    background-image:
        radial-gradient(2px 2px at 18% 28%, rgba(var(--accent-petal-rgb), 0.85) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 38% 68%, rgba(var(--accent-petal-rgb), 0.6) 0%, transparent 100%),
        radial-gradient(2.5px 2.5px at 58% 18%, rgba(var(--accent-petal-rgb), 0.75) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 78% 48%, rgba(var(--accent-petal-rgb), 0.5) 0%, transparent 100%),
        radial-gradient(2px 2px at 90% 78%, rgba(var(--accent-petal-rgb), 0.55) 0%, transparent 100%);
}

/* ============================================================
   4. 布局层
   ============================================================ */

/* 页面外壳：所有页面统一用它，间距与最大宽度都有默认值 */
.shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--shell-max);
    margin: 0 auto;
    padding: var(--sp-5) var(--sp-5) var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.shell--wide { max-width: var(--shell-wide); }

/* 登录页：窄栏 + 垂直居中 */
.shell--narrow {
    max-width: 420px;
    min-height: 100vh;
    min-height: 100dvh;
    justify-content: center;
    padding: var(--sp-5) var(--sp-4);
}

/* 评审页：整页锁高、内部双栏各自滚动 */
.shell--full {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    padding: var(--sp-4);
    gap: var(--sp-4);
}

/* 页头：标题 / 副标题 / 右侧操作 */
.pagehead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

.pagehead .titles { min-width: 0; flex: 1 1 260px; }

.pagehead h1 {
    font-size: var(--fs-2xl);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.3;
    background: var(--grad-title);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pagehead .sub {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: 1.7;
    margin-top: var(--sp-1);
    max-width: var(--read-width);
}

.pagehead .sub b { color: var(--accent-brand); font-weight: 600; }
.pagehead .actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* 卡片内的顶部工具栏（标题 + 右侧按钮） */
.bar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.bar .spacer { flex: 1 1 auto; }

/* 竖排堆叠容器 */
.stack { display: flex; flex-direction: column; gap: var(--sp-3); }

/* 通用栅格 */
.grid { display: grid; gap: var(--sp-3); }
.grid--stats { grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); }
.grid--form { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid--halves { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ============================================================
   5. 组件
   ============================================================ */

/* ---------- 卡片 ---------- */
/* 已移除 backdrop-filter：背景是静态渐变，模糊只会带来持续的背景重采样开销 */
.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--card-shadow);
    padding: var(--sp-5);
    position: relative;
    transition: border-color 0.25s ease;
}

.card--stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.card--flush { padding: 0; overflow: hidden; }

.card-title {
    font-size: var(--fs-lg);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    min-height: 26px;
}

.card-title .spacer { flex: 1 1 auto; }
.card-title.section-sub-title { font-size: var(--fs-md); margin-top: var(--sp-4); }

.card-desc,
.section-desc {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: 1.75;
    max-width: var(--read-width);
}

.card-desc { margin-top: var(--sp-2); }

/* ---------- 按钮 ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 1.05rem;
    border-radius: var(--r-sm);
    font-weight: 500;
    font-size: var(--fs-md);
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.18s ease, box-shadow 0.18s ease,
        background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* 功能性按钮按层级分档（四档绿 + 一档红）：
     .btn-primary   主操作 · 竹绿实心 + 白字
     .btn-success   肯定   · 薄荷亮面 + 深绿字
     .btn-secondary 次操作 · 青绿描边 + 青绿字
     .btn-ghost     辅助   · 中性描边，hover 转苔绿
     .btn-danger    破坏性 · 苏芳红描边（把"删除/终止"涂绿是可用性缺陷，语义不可丢） */
.btn-primary { background: var(--grad-action); color: var(--btn-on-accent); }
.btn-success { background: var(--grad-confirm); color: var(--btn-on-confirm); }

.btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 18px var(--glow-action); }
.btn-success:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 18px var(--glow-confirm); }

.btn-secondary {
    background: transparent;
    border-color: rgba(var(--action-alt-rgb), 0.55);
    color: var(--action-alt);
}
.btn-secondary:hover:not(:disabled) { border-color: var(--action-alt); background: var(--action-alt-soft); }

.btn-danger { background: transparent; border-color: var(--accent-rose); color: var(--accent-rose); }
.btn-danger:hover:not(:disabled) { background: var(--surface-hover); }

.btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--text-muted); }
.btn-ghost:hover:not(:disabled) { border-color: var(--action-mild); color: var(--action-mild); }

.btn-tiny { min-height: 28px; padding: 0 0.65rem; font-size: var(--fs-xs); border-radius: var(--r-sm); }
.btn-block { width: 100%; }

/* ---------- 表单 ---------- */
input[type="text"],
input[type="password"],
input[type="number"],
textarea,
select {
    padding: 0 0.75rem;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-soft);
    color: var(--text-primary);
    font-size: var(--fs-md);
    font-family: inherit;
    outline: none;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

textarea { height: auto; padding: 0.6rem 0.75rem; line-height: 1.7; font-family: var(--font-mono); font-size: var(--fs-sm); resize: vertical; }

input:focus, textarea:focus, select:focus {
    border-color: var(--action);
    background: var(--surface-inset);
    box-shadow: 0 0 0 3px var(--glow-action);
}

input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 0.7; }

label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* 字段组：统一「标签 + 控件」的竖向间距 */
.field { display: flex; flex-direction: column; min-width: 0; }
.field > label { margin-bottom: 6px; }
.field > input, .field > select, .field > textarea { width: 100%; }
.field + .field { margin-top: var(--sp-3); }

/* 横向表单行：自动换行 + 统一间距 */
.form-row {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    align-items: flex-end;
}
.form-row + .form-row { margin-top: var(--sp-3); }
.form-row > .grow { flex: 1 1 220px; min-width: 0; }
.form-row > .grow > input { width: 100%; }

/* 评分范围行（min - max 单位） */
.range-row { display: flex; align-items: center; gap: 6px; }
.range-row input[type="number"] { width: 4.4rem; text-align: center; }
.range-row input.unit-input { width: 5rem; text-align: center; }
.range-row .sep { color: var(--text-muted); }

.optional-tip { color: var(--text-muted); font-weight: 400; font-size: var(--fs-xs); }
.req { color: var(--accent-rose); }

/* ---------- 标签 ---------- */
.tag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 500;
    border: 1px solid transparent;
    white-space: nowrap;
}

.tag-active { background: rgba(var(--accent-green-rgb), 0.13); color: var(--accent-green); border-color: rgba(var(--accent-green-rgb), 0.32); }
.tag-closed { background: rgba(var(--accent-rose-rgb), 0.13); color: var(--accent-rose); border-color: rgba(var(--accent-rose-rgb), 0.32); }
.tag-muted { background: var(--surface-soft); color: var(--text-muted); border-color: var(--border); }

[data-theme="dark"] .tag-active { background: rgba(var(--accent-green-rgb), 0.15); border-color: rgba(var(--accent-green-rgb), 0.32); }
[data-theme="dark"] .tag-closed { background: rgba(var(--accent-rose-rgb), 0.15); border-color: rgba(var(--accent-rose-rgb), 0.32); }

/* ---------- 统计格 ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); gap: var(--sp-3); }

.stat-item {
    background: var(--surface-inset);
    padding: var(--sp-3) var(--sp-2);
    border-radius: var(--r-md);
    text-align: center;
    min-width: 0;
    box-shadow: inset 0 1px 0 rgba(var(--accent-petal-rgb), 0.45);
}

.stat-value { font-size: 1.45rem; font-weight: 700; color: var(--accent-gold); line-height: 1.25; }
.stat-label { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; letter-spacing: 0.04em; }

/* ---------- 进度 ---------- */
.progress-bar { height: 5px; background: var(--surface-inset); border-radius: var(--r-pill); overflow: hidden; }
.progress-fill { height: 100%; background: var(--grad-track); border-radius: var(--r-pill); transition: width 0.3s ease; }
.progress-mini { height: 5px; background: var(--surface-inset); border-radius: var(--r-pill); overflow: hidden; min-width: 66px; }
.progress-mini > i { display: block; height: 100%; background: var(--grad-track); }
.progress-wrap { display: flex; align-items: center; gap: var(--sp-2); }
.progress-wrap span { font-size: var(--fs-xs); color: var(--text-muted); min-width: 36px; }

/* ---------- 表格 ---------- */
/* .table-wrapper 为历史类名，保留别名，避免改动已有 JS 生成的标记 */
.table-wrapper,
.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-soft);
}

/* 需要纵向滚动 + 吸顶表头的场景 */
.table-wrap--scroll { max-height: var(--table-max, 60vh); overflow-y: auto; }

table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }

th, td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

th {
    background: var(--surface-inset);
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    white-space: nowrap;
}

.table-wrap--scroll thead th { position: sticky; top: 0; z-index: 2; }

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-hover); }

/* ---------- 空态与提示 ---------- */
.hint { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.75; max-width: var(--read-width); }
.empty-hint,
.empty { color: var(--text-muted); font-size: var(--fs-md); padding: var(--sp-5) var(--sp-3); text-align: center; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; color: var(--text-muted); padding: var(--sp-5); text-align: center; }
.empty-state > svg { width: 56px; height: 56px; margin-bottom: var(--sp-3); opacity: 0.45; }

/* ---------- 弹窗 ---------- */
/* 同卡片：去掉 backdrop-filter，用更实的遮罩代替 */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--overlay);
    z-index: 200;
    justify-content: center;
    align-items: center;
    padding: var(--sp-4);
    overflow: auto;
}
.modal.show { display: flex; }

.modal-content {
    background: var(--bg-mid);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--card-shadow);
    width: 100%;
    max-width: 480px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: var(--fs-lg);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: none;
}

.modal-body { padding: var(--sp-5); overflow-y: auto; }
.modal-footer {
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--border);
    display: flex;
    gap: var(--sp-2);
    justify-content: flex-end;
    flex-wrap: wrap;
    flex: none;
    background: var(--surface-soft);
}

/* ---------- 轻提示 ---------- */
.toast {
    position: fixed;
    top: var(--sp-4);
    left: 50%;
    transform: translateX(-50%) translateY(-16px);
    background: var(--bg-mid);
    border: 1px solid var(--border);
    box-shadow: var(--card-shadow);
    color: var(--text-primary);
    padding: 11px 18px;
    border-radius: var(--r-md);
    font-size: var(--fs-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 300;
    max-width: min(90vw, 520px);
    text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success { border-color: var(--action); color: var(--action); }
.toast.error { border-color: var(--accent-rose); color: var(--accent-rose); }

/* ---------- 主题切换按钮 ---------- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface-soft);
    color: var(--text-muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.theme-toggle:hover { color: var(--action-alt); border-color: var(--action-alt); }
.theme-toggle:active { transform: scale(0.95); }
.theme-toggle svg { width: 18px; height: 18px; pointer-events: none; }

.theme-toggle--floating {
    position: fixed;
    top: var(--sp-4);
    right: var(--sp-4);
    z-index: 120;
    background: var(--bg-mid);
    box-shadow: var(--card-shadow);
}

/* ============================================================
   6. 跨页复用的小组件
   ============================================================ */

/* ---------- 评委码 ---------- */
.code-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.code-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px 10px;
    border-radius: var(--r-sm);
    background: var(--surface-inset);
    border: 1px solid var(--border);
    font-size: var(--fs-sm);
}
.code-item.revoked { opacity: 0.6; border-color: var(--accent-rose); }
.code-value { font-family: var(--font-mono); font-size: var(--fs-md); font-weight: 600; letter-spacing: 0.06em; }
.code-meta { color: var(--text-muted); font-size: var(--fs-xs); }

/* ---------- 评委进度 ---------- */
.judge-progress { display: flex; flex-direction: column; gap: var(--sp-2); }
.judge-progress-row { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); }
.judge-progress-row .name { min-width: 104px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 命题标签 ---------- */
.topic-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    background: rgba(var(--accent-blue-rgb), 0.13);
    color: var(--accent-blue);
    border: 1px solid rgba(var(--accent-blue-rgb), 0.28);
    border-radius: var(--r-sm);
    font-size: var(--fs-xs);
    font-weight: 500;
}
[data-theme="dark"] .topic-tag { background: rgba(var(--accent-blue-rgb), 0.18); border-color: rgba(var(--accent-blue-rgb), 0.28); }

/* ---------- 排名徽章 ---------- */
.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: var(--fs-xs);
    font-weight: 600;
}
.rank-1 { background: linear-gradient(135deg, #f7c56a, #e9a13c); color: #4a2c00; }
.rank-2 { background: linear-gradient(135deg, #ecd7e6, #d3b9cf); color: #3c2836; }
.rank-3 { background: linear-gradient(135deg, #eebf9a, #d79772); color: #43230d; }
.rank-other { background: var(--surface-inset); color: var(--text-muted); }

/* ---------- 评分详情 ---------- */
.score-detail { display: flex; flex-wrap: wrap; gap: 5px; }
.score-tag { padding: 3px 8px; background: var(--surface-inset); border-radius: var(--r-sm); font-size: var(--fs-xs); }
.score-tag.high { background: rgba(var(--accent-brand-rgb), 0.15); color: var(--accent-brand); }
.score-tag.low { background: rgba(var(--accent-rose-rgb), 0.15); color: var(--accent-rose); }
.score-tag.excluded { background: var(--surface-inset); color: var(--text-muted); text-decoration: line-through; }
.score-tag.std-dev { background: rgba(var(--accent-violet-rgb), 0.13); color: var(--accent-violet); border: 1px solid rgba(var(--accent-violet-rgb), 0.32); font-weight: 600; }

.std-dev-cell { color: var(--accent-violet); font-size: var(--fs-sm); font-weight: 600; }
.std-dev-empty { color: var(--text-muted); opacity: 0.4; }

.score-bar { height: 4px; background: var(--surface-inset); border-radius: var(--r-pill); overflow: hidden; min-width: 48px; }
.score-fill { height: 100%; background: var(--grad-track); border-radius: var(--r-pill); }

/* ---------- 展开行 ---------- */
.detail-row { cursor: pointer; }
.detail-panel { display: none; background: var(--surface-inset); }
.detail-panel.show { display: table-row; }

.collapsible-content { transition: max-height 0.35s ease, opacity 0.25s ease; overflow: hidden; max-height: 1000px; opacity: 1; }
.collapsible-content.collapsed { max-height: 0; opacity: 0; }

.toggle-icon { display: inline-block; transition: transform 0.25s ease; margin-left: auto; font-size: var(--fs-sm); color: var(--text-muted); }
.toggle-icon.collapsed { transform: rotate(-90deg); }
.card-header-row { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; user-select: none; }
.card-header-row:hover .toggle-icon { color: var(--action-mild); }
.card-minimized-badge { display: none; font-size: var(--fs-sm); color: var(--accent-brand); margin-left: 6px; }
.card-minimized-badge.show { display: inline; }

/* ---------- 命题分组 ---------- */
.topic-group { margin-bottom: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.topic-group-header { padding: 9px 12px; background: rgba(var(--accent-blue-rgb), 0.07); font-weight: 600; font-size: var(--fs-md); color: var(--text-primary); }
.topic-group-body { padding: 0; }
.topic-article-item { display: flex; align-items: center; gap: var(--sp-2); padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: var(--fs-md); }
.topic-article-item:last-child { border-bottom: none; }
.topic-rank { min-width: 24px; text-align: center; font-weight: 600; color: var(--text-muted); }
.topic-article-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topic-article-author { color: var(--text-muted); font-size: var(--fs-sm); min-width: 0; }
.topic-article-score { color: var(--accent-gold); min-width: 48px; text-align: right; }

/* ---------- 查重分组 ---------- */
.dup-group-item { margin-bottom: var(--sp-3); border: 1px solid rgba(var(--accent-rose-rgb), 0.22); border-radius: var(--r-md); overflow: hidden; }
.dup-group-item .dup-group-title { padding: 9px 12px; background: rgba(var(--accent-rose-rgb), 0.07); font-weight: 600; font-size: var(--fs-sm); color: var(--accent-rose); }
.dup-group-articles { padding: 0; }
.dup-article-row { display: flex; align-items: center; gap: var(--sp-2); padding: 7px 12px; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.dup-article-row:last-child { border-bottom: none; }
.dup-article-row.is-original { background: rgba(var(--accent-brand-rgb), 0.07); }
.dup-article-status { min-width: 48px; font-size: var(--fs-xs); font-weight: 500; }
.dup-article-row.is-original .dup-article-status { color: var(--accent-brand); }
.dup-article-row:not(.is-original) .dup-article-status { color: var(--text-muted); }
.dup-article-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dup-article-author { color: var(--text-muted); font-size: var(--fs-xs); min-width: 0; text-align: right; }

.dup-rank-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 500; }
.dup-rank-badge.original { background: rgba(var(--accent-brand-rgb), 0.15); color: var(--accent-brand); border: 1px solid rgba(var(--accent-brand-rgb), 0.28); }
.dup-rank-badge.duplicate { background: rgba(var(--accent-rose-rgb), 0.15); color: var(--accent-rose); border: 1px solid rgba(var(--accent-rose-rgb), 0.28); }

/* ---------- 任务选择条 ---------- */
.task-bar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.task-select {
    height: 38px;
    padding: 0 0.75rem;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text-primary);
    font-size: var(--fs-md);
    font-family: inherit;
    min-width: 220px;
    cursor: pointer;
    outline: none;
}
.task-select:focus { border-color: var(--action); }
.task-status { font-size: var(--fs-sm); color: var(--text-muted); }
.task-status.is-active { color: var(--accent-brand); }
.task-status.is-closed { color: var(--accent-rose); }

/* ---------- 操作按钮组 ---------- */
.action-buttons { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }

/* ---------- 少量排版工具类（替代零散内联样式） ---------- */
.u-brand { color: var(--accent-brand); }
.u-gold { color: var(--accent-gold); }
.u-rose { color: var(--accent-rose); }
.u-right { margin-left: auto; }
.u-nowrap { white-space: nowrap; }

.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }

.w-full { width: 100%; }
.w-xs { width: 3.6rem; }
.w-sm { width: 5.5rem; }
.w-md { width: 7rem; }
.w-lg { width: 13rem; }

/* ============================================================
   7. 响应式与无障碍
   ============================================================ */
@media (max-width: 768px) {
    :root {
        --sp-5: 16px;
        --sp-6: 22px;
        --fs-2xl: 1.2rem;
        --shell-max: 100%;
    }

    .shell { padding: var(--sp-4) var(--sp-3) var(--sp-6); gap: var(--sp-4); }
    .shell--full { height: auto; min-height: 100dvh; overflow: visible; }
    .pagehead { align-items: flex-start; }
    .pagehead .actions { width: 100%; }
    .pagehead .actions .btn { flex: 1 1 auto; }
    .card { padding: var(--sp-4); border-radius: var(--r-md); }
    .modal-content { max-width: 100%; max-height: 92vh; }
    .modal-footer .btn { flex: 1; }
    .grid--stats, .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-value { font-size: 1.2rem; }
    th, td { padding: 8px 10px; }
    .judge-progress-row .name { min-width: 76px; }
    .action-buttons { width: 100%; }
}

/* 尊重系统「减弱动态效果」 */
@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;
    }
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }