/* ==========================================================================
   电子数据取证比赛平台 — 前端皮肤包（多套视觉风格，后台可切换）
   --------------------------------------------------------------------------
   这是与 theme.css **正交**的第二条视觉轴：

     <html data-theme="dark|light">   模式轴：用户自选，存本机 localStorage
     <html data-skin="...">           皮肤轴：管理员在后台统一选择，平台级生效

   默认皮肤是 tactical（战术墨绿）= theme.css 里的默认值 —— 本文件**不为它
   写任何覆盖块**，所以「没装这个文件」与「装了但选默认皮肤」渲染完全一致。

   ── 三条实现约定（改动前务必先读） ────────────────────────────────────────

   1) **每个皮肤必须写深、浅两套完整色板，且两块定义同一组 token。**
      层叠上 `:root[data-skin="x"]` 与 theme.css 的 `:root[data-theme="light"]`
      特异性相同（都是 0,2,0），而本文件在 theme.css 之后加载 ——
      若某个皮肤只写深色块，它在浅色模式下会**把整个浅色主题压掉**。
      因此浅色一律写 `:root[data-skin="x"][data-theme="light"]`（0,3,0）。

   2) **只覆盖 token，不覆盖组件规则**（签名样式那一段除外）。
      颜色全部收敛在 theme.css 的语义 token 上，所以一套皮肤就是一组变量值；
      组件规则（.btn / .panel / .input …）不需要知道皮肤的存在。

   3) **大屏（screen.css）的 --scr-* 也要覆盖。**
      大屏页只加载 screen.css + 本文件，且同样受第 1 条的层叠规则约束 ——
      所以每个皮肤也把 --scr-* 写成深浅两份。

   ── 加一套新皮肤要动的地方（四处，缺一不可） ─────────────────────────────
     · 本文件：`:root[data-skin="<id>"]` 与 `[data-theme="light"]` 两个块
     · backend/internal/model/model.go：model.SkinIDs 白名单（服务端校验）
     · web/assets/skin.js：SKINS 注册表（id / 名称 / 说明 / 预览色）
     · tests/skin-verify.mjs 会自动校验上面三处一致，不用手写用例
   ========================================================================== */

/* ==========================================================================
   0. tactical · 战术墨绿（**原默认皮肤**）
   --------------------------------------------------------------------------
   本套配色原先直接写在 theme.css 的裸 :root 上（即「默认皮肤」）。现在默认
   皮肤换成「红色西电」xidian，因此这里把它落成一套显式色板，保持可选。
   取值与迁移前的裸 :root 完全一致。
   ========================================================================== */
:root[data-skin="tactical"] {
  --user-page-bg: #0a0f14;
  --user-surface: rgba(12, 39, 47, 0.35);
  --user-surface-solid: #121a22;
  --user-surface-elevated: #161f2a;
  --user-text-primary: #e5e7eb;
  --user-text-secondary: #94a3b8;
  --user-border: rgba(148, 163, 184, 0.52);
  --user-border-soft: rgba(148, 163, 184, 0.28);
  --user-accent: #20ad7b;
  --user-accent-hover: #2ec98f;
  --user-accent-alt: #8fd0d5;
  --user-warn: #ffb020;
  --user-danger: #e5484d;
  --user-blue: #3b82f6;
  --user-header-bg: linear-gradient(180deg, rgba(10, 15, 20, 0.92) 0%, rgba(10, 15, 20, 0.86) 100%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03)),
    linear-gradient(180deg, rgba(55, 65, 81, 0.1) 0%, rgba(71, 85, 105, 0.1) 100%);
  --user-panel-bg: linear-gradient(0deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03)),
    linear-gradient(rgba(55, 65, 81, 0.1) 0%, rgba(71, 85, 105, 0.1) 100%);
  --user-panel-border: rgba(148, 163, 184, 0.52);
  --user-shadow: 0 12px 26px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(226, 232, 240, 0.08);
  --user-shadow-sm: 0 6px 16px rgba(0, 0, 0, 0.22);
  --radius-sm: 2px;
  --tt-on-accent: #04140d;
  --tt-on-blue: #04101f;
  --tt-page-glow-1: rgba(32, 173, 123, 0.10);
  --tt-page-glow-2: rgba(143, 208, 213, 0.07);
  --tt-page-bg-end: #070b0f;
  --tt-field-bg: rgba(15, 23, 42, 0.45);
  --tt-field-bg-focus: rgba(15, 23, 42, 0.62);
  --tt-field-bg-soft: rgba(15, 23, 42, 0.28);
  --tt-field-bg-strong: rgba(15, 23, 42, 0.55);
  --tt-neutral-weak: rgba(148, 163, 184, 0.08);
  --tt-neutral: rgba(148, 163, 184, 0.12);
  --tt-neutral-strong: rgba(148, 163, 184, 0.18);
  --tt-accent-weak: rgba(32, 173, 123, 0.10);
  --tt-accent-soft: rgba(32, 173, 123, 0.14);
  --tt-accent-line: rgba(32, 173, 123, 0.50);
  --tt-accent-text: #6ee7b7;
  --tt-accent-text-strong: #7ce8bb;
  --tt-blue-text: #93c5fd;
  --tt-warn-text: #ffd48a;
  --tt-danger-text: #ffb4b6;
  --tt-danger-text-strong: #ff9ea1;
  --tt-thead-bg: #131c26;
  --tt-thead-bg-solid: #131c26;
  --tt-thead-text: #cbd5e1;
  --user-text-strong: #d1d5db;
  --user-text-body: #cbd5e1;
  --tt-heading: #e5e7eb;
  --tt-float-bg: #16202c;
  --tt-mask: rgba(3, 7, 10, 0.72);
  --skin-corner: #20ad7bf2;
  --skin-corner-fade: #20ad7b33;
  --skin-corner-glow: rgba(32, 173, 123, 0.42);
  --tt-warn-rgb: 255, 176, 32;
  --tt-warn-hover: #ffc247;
  --tt-on-warn: #241701;
  --tt-danger-rgb: 229, 72, 77;
  --tt-blue-rgb: 59, 130, 246;
  --scr-bg: #070b10;
  --scr-bg-end: #05080c;
  --scr-panel: rgba(18, 28, 38, 0.72);
  --scr-head-bg: #101a24;
  --scr-head-text: #b9c8d8;
  --scr-text: #e8eef5;
  --scr-dim: #93a4b8;
  --scr-line: rgba(148, 163, 184, 0.22);
  --scr-accent: #20ad7b;
  --scr-score: #6ee7b7;
  --scr-score-flash: rgba(32, 173, 123, 0.42);
  --scr-glow-1: rgba(32, 173, 123, 0.16);
  --scr-glow-2: rgba(143, 208, 213, 0.10);
  --scr-msg-team: #8fd0d5;
  --radius: 2px;
}

:root[data-skin="tactical"][data-theme="light"] {
  --user-page-bg: #f4f6f9;
  --user-surface: rgba(15, 118, 87, 0.06);
  --user-surface-solid: #ffffff;
  --user-surface-elevated: #ffffff;
  --user-text-primary: #101828;
  --user-text-secondary: #58677b;
  --user-border: rgba(71, 85, 105, 0.34);
  --user-border-soft: rgba(71, 85, 105, 0.18);
  --user-accent: #0f7a57;
  --user-accent-hover: #0b9468;
  --user-accent-alt: #146c6b;
  --user-warn: #b26a00;
  --user-danger: #c2323a;
  --user-blue: #1d4ed8;
  --user-header-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.88) 100%),
    linear-gradient(0deg, rgba(15, 23, 42, 0.02), rgba(15, 23, 42, 0.02));
  --user-panel-bg: #ffffff;
  --user-panel-border: rgba(71, 85, 105, 0.30);
  --user-shadow: 0 10px 24px rgba(15, 23, 42, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  --user-shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.08);
  --radius-sm: 2px;
  --tt-on-accent: #ffffff;
  --tt-on-blue: #ffffff;
  --tt-page-glow-1: rgba(15, 122, 87, 0.10);
  --tt-page-glow-2: rgba(20, 108, 107, 0.08);
  --tt-page-bg-end: #e8ecf2;
  --tt-field-bg: #ffffff;
  --tt-field-bg-focus: #ffffff;
  --tt-field-bg-soft: rgba(15, 23, 42, 0.035);
  --tt-field-bg-strong: rgba(15, 23, 42, 0.06);
  --tt-neutral-weak: rgba(71, 85, 105, 0.06);
  --tt-neutral: rgba(71, 85, 105, 0.10);
  --tt-neutral-strong: rgba(71, 85, 105, 0.16);
  --tt-accent-weak: rgba(15, 122, 87, 0.10);
  --tt-accent-soft: rgba(15, 122, 87, 0.14);
  --tt-accent-line: rgba(15, 122, 87, 0.48);
  --tt-accent-text: #0b6b4d;
  --tt-accent-text-strong: #0a5f45;
  --tt-blue-text: #1d4ed8;
  --tt-warn-text: #92530a;
  --tt-danger-text: #b0202a;
  --tt-danger-text-strong: #a31b24;
  --tt-thead-bg: #eef1f6;
  --tt-thead-bg-solid: #eef1f6;
  --tt-thead-text: #3d4a5c;
  --user-text-strong: #26303d;
  --user-text-body: #3f4a5a;
  --tt-heading: #101828;
  --tt-float-bg: #ffffff;
  --tt-mask: rgba(15, 23, 42, 0.42);
  --skin-corner: rgba(15, 122, 87, 0.95);
  --skin-corner-fade: rgba(15, 122, 87, 0.2);
  --skin-corner-glow: rgba(15, 122, 87, 0.28);
  --tt-warn-rgb: 178, 106, 0;
  --tt-warn-hover: #9c5c00;
  --tt-on-warn: #ffffff;
  --tt-danger-rgb: 194, 50, 58;
  --tt-blue-rgb: 29, 78, 216;
  --scr-bg: #eef1f6;
  --scr-bg-end: #e2e7ef;
  --scr-panel: rgba(255, 255, 255, 0.92);
  --scr-head-bg: #e4e9f0;
  --scr-head-text: #3d4a5c;
  --scr-text: #101828;
  --scr-dim: #58677b;
  --scr-line: rgba(71, 85, 105, 0.24);
  --scr-accent: #0f7a57;
  --scr-score: #0b6b4d;
  --scr-score-flash: rgba(15, 122, 87, 0.22);
  --scr-glow-1: rgba(15, 122, 87, 0.12);
  --scr-glow-2: rgba(20, 108, 107, 0.08);
  --scr-msg-team: #146c6b;
  --radius: 2px;
}

/* ==========================================================================
   1. midnight · 深夜蓝调
   --------------------------------------------------------------------------
   藏青底 + 靛蓝强调。比默认皮肤更冷、更沉，适合夜间长时段比赛。
   圆角略放大（4px），顶栏加一条靛蓝细线。
   ========================================================================== */
:root[data-skin="midnight"] {
  --user-page-bg: #070c18;
  --user-surface: rgba(56, 96, 178, 0.14);
  --user-surface-solid: #0f1626;
  --user-surface-elevated: #141d31;
  --user-text-primary: #e6ecf7;
  --user-text-secondary: #93a3bf;
  --user-border: rgba(148, 176, 220, 0.50);
  --user-border-soft: rgba(148, 176, 220, 0.26);
  --user-accent: #4c8dff;
  --user-accent-hover: #6ba1ff;
  --user-accent-alt: #7cc0ff;
  --user-warn: #ffb020;
  --user-danger: #f2545b;
  --user-blue: #3b82f6;
  --user-header-bg: linear-gradient(180deg, rgba(7, 12, 24, 0.94) 0%, rgba(7, 12, 24, 0.88) 100%),
    linear-gradient(0deg, rgba(76, 141, 255, 0.05), rgba(76, 141, 255, 0.05));
  --user-panel-bg: linear-gradient(0deg, rgba(76, 141, 255, 0.05), rgba(76, 141, 255, 0.05)),
    linear-gradient(rgba(30, 58, 110, 0.22) 0%, rgba(23, 43, 84, 0.22) 100%);
  --user-panel-border: rgba(148, 176, 220, 0.50);
  --user-shadow: 0 12px 26px rgba(2, 6, 16, 0.46), inset 0 0 0 1px rgba(190, 215, 255, 0.07);
  --user-shadow-sm: 0 6px 16px rgba(2, 6, 16, 0.38);
  --user-text-strong: #d3dcec;
  --user-text-body: #c6d2e6;

  --tt-on-accent: #04101f;
  --tt-on-blue: #04101f;
  --tt-page-glow-1: rgba(76, 141, 255, 0.14);
  --tt-page-glow-2: rgba(124, 192, 255, 0.08);
  --tt-page-bg-end: #04070f;
  --tt-field-bg: rgba(11, 20, 38, 0.55);
  --tt-field-bg-focus: rgba(11, 20, 38, 0.72);
  --tt-field-bg-soft: rgba(11, 20, 38, 0.32);
  --tt-field-bg-strong: rgba(11, 20, 38, 0.66);
  --tt-neutral-weak: rgba(148, 176, 220, 0.08);
  --tt-neutral: rgba(148, 176, 220, 0.12);
  --tt-neutral-strong: rgba(148, 176, 220, 0.18);
  --tt-accent-weak: rgba(76, 141, 255, 0.12);
  --tt-accent-soft: rgba(76, 141, 255, 0.16);
  --tt-accent-line: rgba(76, 141, 255, 0.50);
  --tt-accent-text: #8fbcff;
  --tt-accent-text-strong: #a8cbff;
  --tt-blue-text: #93c5fd;
  --tt-warn-text: #ffd48a;
  --tt-danger-text: #ffb4b6;
  --tt-danger-text-strong: #ff9ea1;
  --tt-thead-bg: #101a2e;
  --tt-thead-bg-solid: #101a2e;
  --tt-thead-text: #c3d3ea;
  --tt-heading: #e6ecf7;
  --tt-float-bg: #131d33;
  --tt-mask: rgba(2, 5, 12, 0.74);

  --skin-corner: #4c8dfff2;
  --skin-corner-fade: #4c8dff33;
  --skin-corner-glow: rgba(76, 141, 255, 0.45);

  --tt-warn-rgb: 255, 176, 32;
  --tt-warn-hover: #ffc247;
  --tt-on-warn: #241701;
  --tt-danger-rgb: 242, 84, 91;
  --tt-blue-rgb: 59, 130, 246;

  --radius: 4px;
  --radius-sm: 3px;

  --scr-bg: #050a14;
  --scr-bg-end: #03060c;
  --scr-panel: rgba(13, 22, 38, 0.75);
  --scr-head-bg: #0d1728;
  --scr-head-text: #b9c8d8;
  --scr-text: #e8eef5;
  --scr-dim: #93a4b8;
  --scr-line: rgba(148, 176, 220, 0.24);
  --scr-accent: #4c8dff;
  --scr-score: #8fbcff;
  --scr-score-flash: rgba(76, 141, 255, 0.42);
  --scr-glow-1: rgba(76, 141, 255, 0.16);
  --scr-glow-2: rgba(124, 192, 255, 0.10);
  --scr-msg-team: #7cc0ff;
}

:root[data-skin="midnight"][data-theme="light"] {
  --user-page-bg: #eef3fb;
  --user-surface: rgba(29, 78, 216, 0.06);
  --user-surface-solid: #ffffff;
  --user-surface-elevated: #ffffff;
  --user-text-primary: #0d1a2e;
  --user-text-secondary: #55647e;
  --user-border: rgba(51, 72, 110, 0.34);
  --user-border-soft: rgba(51, 72, 110, 0.18);
  --user-accent: #1d4ed8;
  --user-accent-hover: #2563eb;
  --user-accent-alt: #0e6ea8;
  --user-warn: #b26a00;
  --user-danger: #c2323a;
  --user-blue: #1d4ed8;
  --user-header-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.90) 100%),
    linear-gradient(0deg, rgba(29, 78, 216, 0.03), rgba(29, 78, 216, 0.03));
  --user-panel-bg: #ffffff;
  --user-panel-border: rgba(51, 72, 110, 0.30);
  --user-shadow: 0 10px 24px rgba(13, 26, 46, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  --user-shadow-sm: 0 4px 12px rgba(13, 26, 46, 0.08);
  --user-text-strong: #1d2b45;
  --user-text-body: #37476a;

  --tt-on-accent: #ffffff;
  --tt-on-blue: #ffffff;
  --tt-page-glow-1: rgba(29, 78, 216, 0.10);
  --tt-page-glow-2: rgba(14, 110, 168, 0.08);
  --tt-page-bg-end: #e3eaf6;
  --tt-field-bg: #ffffff;
  --tt-field-bg-focus: #ffffff;
  --tt-field-bg-soft: rgba(13, 26, 46, 0.035);
  --tt-field-bg-strong: rgba(13, 26, 46, 0.06);
  --tt-neutral-weak: rgba(51, 72, 110, 0.06);
  --tt-neutral: rgba(51, 72, 110, 0.10);
  --tt-neutral-strong: rgba(51, 72, 110, 0.16);
  --tt-accent-weak: rgba(29, 78, 216, 0.10);
  --tt-accent-soft: rgba(29, 78, 216, 0.14);
  --tt-accent-line: rgba(29, 78, 216, 0.48);
  --tt-accent-text: #1d4ed8;
  --tt-accent-text-strong: #1740b6;
  --tt-blue-text: #1d4ed8;
  --tt-warn-text: #92530a;
  --tt-danger-text: #b0202a;
  --tt-danger-text-strong: #a31b24;
  --tt-thead-bg: #e8eef9;
  --tt-thead-bg-solid: #e8eef9;
  --tt-thead-text: #35486a;
  --tt-heading: #0d1a2e;
  --tt-float-bg: #ffffff;
  --tt-mask: rgba(13, 26, 46, 0.42);

  --skin-corner: rgba(29, 78, 216, 0.95);
  --skin-corner-fade: rgba(29, 78, 216, 0.2);
  --skin-corner-glow: rgba(29, 78, 216, 0.28);

  --tt-warn-rgb: 178, 106, 0;
  --tt-warn-hover: #9c5c00;
  --tt-on-warn: #ffffff;
  --tt-danger-rgb: 194, 50, 58;
  --tt-blue-rgb: 29, 78, 216;

  --radius: 4px;
  --radius-sm: 3px;

  --scr-bg: #eef3fb;
  --scr-bg-end: #e2e9f5;
  --scr-panel: rgba(255, 255, 255, 0.92);
  --scr-head-bg: #e4ebf7;
  --scr-head-text: #35486a;
  --scr-text: #0d1a2e;
  --scr-dim: #55647e;
  --scr-line: rgba(51, 72, 110, 0.24);
  --scr-accent: #1d4ed8;
  --scr-score: #1740b6;
  --scr-score-flash: rgba(29, 78, 216, 0.22);
  --scr-glow-1: rgba(29, 78, 216, 0.12);
  --scr-glow-2: rgba(14, 110, 168, 0.08);
  --scr-msg-team: #0e6ea8;
}

/* ==========================================================================
   2. ember · 熔金琥珀
   --------------------------------------------------------------------------
   炭黑底 + 琥珀金强调，指挥中心气质。警示色换成橙红，
   与琥珀金强调色拉开距离（避免「标记态」和「主按钮」看起来是同一个颜色）。
   ========================================================================== */
:root[data-skin="ember"] {
  --user-page-bg: #12100b;
  --user-surface: rgba(232, 163, 61, 0.12);
  --user-surface-solid: #1a1710;
  --user-surface-elevated: #221d14;
  --user-text-primary: #f2ebdd;
  --user-text-secondary: #a99a80;
  --user-border: rgba(216, 186, 138, 0.48);
  --user-border-soft: rgba(216, 186, 138, 0.24);
  --user-accent: #e8a33d;
  --user-accent-hover: #f7b955;
  --user-accent-alt: #ffd08a;
  --user-warn: #ff7a45;
  --user-danger: #e5484d;
  --user-blue: #4c9bff;
  --user-header-bg: linear-gradient(180deg, rgba(18, 16, 11, 0.94) 0%, rgba(18, 16, 11, 0.88) 100%),
    linear-gradient(0deg, rgba(232, 163, 61, 0.06), rgba(232, 163, 61, 0.06));
  --user-panel-bg: linear-gradient(0deg, rgba(232, 163, 61, 0.05), rgba(232, 163, 61, 0.05)),
    linear-gradient(rgba(92, 68, 26, 0.18) 0%, rgba(72, 53, 20, 0.18) 100%);
  --user-panel-border: rgba(216, 186, 138, 0.48);
  --user-shadow: 0 12px 26px rgba(10, 7, 3, 0.50), inset 0 0 0 1px rgba(255, 226, 176, 0.08);
  --user-shadow-sm: 0 6px 16px rgba(10, 7, 3, 0.40);
  --user-text-strong: #e4d9c4;
  --user-text-body: #dccfb8;

  --tt-on-accent: #241701;
  --tt-on-blue: #0b1a2b;
  --tt-page-glow-1: rgba(232, 163, 61, 0.14);
  --tt-page-glow-2: rgba(255, 208, 138, 0.08);
  --tt-page-bg-end: #0a0805;
  --tt-field-bg: rgba(30, 25, 16, 0.55);
  --tt-field-bg-focus: rgba(30, 25, 16, 0.72);
  --tt-field-bg-soft: rgba(30, 25, 16, 0.32);
  --tt-field-bg-strong: rgba(30, 25, 16, 0.66);
  --tt-neutral-weak: rgba(216, 186, 138, 0.08);
  --tt-neutral: rgba(216, 186, 138, 0.12);
  --tt-neutral-strong: rgba(216, 186, 138, 0.18);
  --tt-accent-weak: rgba(232, 163, 61, 0.12);
  --tt-accent-soft: rgba(232, 163, 61, 0.16);
  --tt-accent-line: rgba(232, 163, 61, 0.50);
  --tt-accent-text: #f5c477;
  --tt-accent-text-strong: #ffd79a;
  --tt-blue-text: #93c5fd;
  --tt-warn-text: #ffb08a;
  --tt-danger-text: #ffb4b6;
  --tt-danger-text-strong: #ff9ea1;
  --tt-thead-bg: #1d1810;
  --tt-thead-bg-solid: #1d1810;
  --tt-thead-text: #ddceb4;
  --tt-heading: #f2ebdd;
  --tt-float-bg: #201b12;
  --tt-mask: rgba(8, 6, 3, 0.74);

  --skin-corner: #e8a33df2;
  --skin-corner-fade: #e8a33d33;
  --skin-corner-glow: rgba(232, 163, 61, 0.45);

  --tt-warn-rgb: 255, 122, 69;
  --tt-warn-hover: #ff8f5e;
  --tt-on-warn: #2b0f04;
  --tt-danger-rgb: 229, 72, 77;
  --tt-blue-rgb: 76, 155, 255;

  --radius: 3px;
  --radius-sm: 2px;

  --scr-bg: #0d0b07;
  --scr-bg-end: #070503;
  --scr-panel: rgba(26, 22, 15, 0.75);
  --scr-head-bg: #1b1710;
  --scr-head-text: #d8c9ae;
  --scr-text: #f4ecdd;
  --scr-dim: #a99a80;
  --scr-line: rgba(216, 186, 138, 0.22);
  --scr-accent: #e8a33d;
  --scr-score: #f5c477;
  --scr-score-flash: rgba(232, 163, 61, 0.42);
  --scr-glow-1: rgba(232, 163, 61, 0.16);
  --scr-glow-2: rgba(255, 208, 138, 0.10);
  --scr-msg-team: #ffd08a;
}

:root[data-skin="ember"][data-theme="light"] {
  --user-page-bg: #fbf6ec;
  --user-surface: rgba(163, 92, 0, 0.06);
  --user-surface-solid: #ffffff;
  --user-surface-elevated: #ffffff;
  --user-text-primary: #241c10;
  --user-text-secondary: #6b5a42;
  --user-border: rgba(120, 96, 60, 0.34);
  --user-border-soft: rgba(120, 96, 60, 0.18);
  --user-accent: #a35c00;
  --user-accent-hover: #bd6b00;
  --user-accent-alt: #8a5a12;
  --user-warn: #b3401a;
  --user-danger: #c2323a;
  --user-blue: #1d4ed8;
  --user-header-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.90) 100%),
    linear-gradient(0deg, rgba(163, 92, 0, 0.03), rgba(163, 92, 0, 0.03));
  --user-panel-bg: #ffffff;
  --user-panel-border: rgba(120, 96, 60, 0.30);
  --user-shadow: 0 10px 24px rgba(36, 28, 16, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  --user-shadow-sm: 0 4px 12px rgba(36, 28, 16, 0.08);
  --user-text-strong: #2e2415;
  --user-text-body: #453721;

  --tt-on-accent: #ffffff;
  --tt-on-blue: #ffffff;
  --tt-page-glow-1: rgba(163, 92, 0, 0.10);
  --tt-page-glow-2: rgba(138, 90, 18, 0.08);
  --tt-page-bg-end: #f4ecdc;
  --tt-field-bg: #ffffff;
  --tt-field-bg-focus: #ffffff;
  --tt-field-bg-soft: rgba(36, 28, 16, 0.035);
  --tt-field-bg-strong: rgba(36, 28, 16, 0.06);
  --tt-neutral-weak: rgba(120, 96, 60, 0.06);
  --tt-neutral: rgba(120, 96, 60, 0.10);
  --tt-neutral-strong: rgba(120, 96, 60, 0.16);
  --tt-accent-weak: rgba(163, 92, 0, 0.10);
  --tt-accent-soft: rgba(163, 92, 0, 0.14);
  --tt-accent-line: rgba(163, 92, 0, 0.48);
  --tt-accent-text: #8f5200;
  --tt-accent-text-strong: #7d4700;
  --tt-blue-text: #1d4ed8;
  --tt-warn-text: #9c3a12;
  --tt-danger-text: #b0202a;
  --tt-danger-text-strong: #a31b24;
  --tt-thead-bg: #f4ecdc;
  --tt-thead-bg-solid: #f4ecdc;
  --tt-thead-text: #5a4a30;
  --tt-heading: #241c10;
  --tt-float-bg: #ffffff;
  --tt-mask: rgba(36, 28, 16, 0.42);

  --skin-corner: rgba(163, 92, 0, 0.95);
  --skin-corner-fade: rgba(163, 92, 0, 0.2);
  --skin-corner-glow: rgba(163, 92, 0, 0.28);

  --tt-warn-rgb: 179, 64, 26;
  --tt-warn-hover: #99330f;
  --tt-on-warn: #ffffff;
  --tt-danger-rgb: 194, 50, 58;
  --tt-blue-rgb: 29, 78, 216;

  --radius: 3px;
  --radius-sm: 2px;

  --scr-bg: #fbf6ec;
  --scr-bg-end: #f3ead9;
  --scr-panel: rgba(255, 255, 255, 0.92);
  --scr-head-bg: #f2e8d5;
  --scr-head-text: #5a4a30;
  --scr-text: #241c10;
  --scr-dim: #6b5a42;
  --scr-line: rgba(120, 96, 60, 0.24);
  --scr-accent: #a35c00;
  --scr-score: #7d4700;
  --scr-score-flash: rgba(163, 92, 0, 0.22);
  --scr-glow-1: rgba(163, 92, 0, 0.12);
  --scr-glow-2: rgba(138, 90, 18, 0.08);
  --scr-msg-team: #8a5a12;
}

/* ==========================================================================
   3. crimson · 血痕绯红
   --------------------------------------------------------------------------
   深红 + 炭黑，取证现场的压迫感。圆角收到 0（硬边），
   与「柔和」的皮肤在形状上也能一眼区分。
   ========================================================================== */
:root[data-skin="crimson"] {
  --user-page-bg: #120a0c;
  --user-surface: rgba(200, 40, 60, 0.12);
  --user-surface-solid: #1a1013;
  --user-surface-elevated: #221418;
  --user-text-primary: #f3e7e9;
  --user-text-secondary: #b09499;
  --user-border: rgba(216, 152, 160, 0.46);
  --user-border-soft: rgba(216, 152, 160, 0.24);
  --user-accent: #ff5566;
  --user-accent-hover: #ff7482;
  --user-accent-alt: #ffa0ab;
  --user-warn: #ffb020;
  --user-danger: #d92d3a;
  --user-blue: #3b82f6;
  --user-header-bg: linear-gradient(180deg, rgba(18, 10, 12, 0.94) 0%, rgba(18, 10, 12, 0.88) 100%),
    linear-gradient(0deg, rgba(255, 85, 102, 0.06), rgba(255, 85, 102, 0.06));
  --user-panel-bg: linear-gradient(0deg, rgba(255, 85, 102, 0.05), rgba(255, 85, 102, 0.05)),
    linear-gradient(rgba(110, 26, 38, 0.20) 0%, rgba(84, 20, 30, 0.20) 100%);
  --user-panel-border: rgba(216, 152, 160, 0.46);
  --user-shadow: 0 12px 26px rgba(12, 3, 5, 0.50), inset 0 0 0 1px rgba(255, 200, 208, 0.07);
  --user-shadow-sm: 0 6px 16px rgba(12, 3, 5, 0.40);
  --user-text-strong: #e8d3d7;
  --user-text-body: #e0c8cc;

  --tt-on-accent: #2a0409;
  --tt-on-blue: #1a0410;
  --tt-page-glow-1: rgba(255, 85, 102, 0.14);
  --tt-page-glow-2: rgba(255, 154, 164, 0.08);
  --tt-page-bg-end: #0a0507;
  --tt-field-bg: rgba(32, 16, 20, 0.55);
  --tt-field-bg-focus: rgba(32, 16, 20, 0.72);
  --tt-field-bg-soft: rgba(32, 16, 20, 0.32);
  --tt-field-bg-strong: rgba(32, 16, 20, 0.66);
  --tt-neutral-weak: rgba(216, 152, 160, 0.08);
  --tt-neutral: rgba(216, 152, 160, 0.12);
  --tt-neutral-strong: rgba(216, 152, 160, 0.18);
  --tt-accent-weak: rgba(255, 85, 102, 0.12);
  --tt-accent-soft: rgba(255, 85, 102, 0.16);
  --tt-accent-line: rgba(255, 85, 102, 0.50);
  --tt-accent-text: #ff9aa4;
  --tt-accent-text-strong: #ffb3bb;
  --tt-blue-text: #93c5fd;
  --tt-warn-text: #ffd48a;
  --tt-danger-text: #ffb4b6;
  --tt-danger-text-strong: #ff9ea1;
  --tt-thead-bg: #1e1116;
  --tt-thead-bg-solid: #1e1116;
  --tt-thead-text: #e2c9cd;
  --tt-heading: #f3e7e9;
  --tt-float-bg: #23151a;
  --tt-mask: rgba(10, 3, 5, 0.74);

  --skin-corner: #ff5566f2;
  --skin-corner-fade: #ff556633;
  --skin-corner-glow: rgba(255, 85, 102, 0.45);

  --tt-warn-rgb: 255, 176, 32;
  --tt-warn-hover: #ffc247;
  --tt-on-warn: #241701;
  --tt-danger-rgb: 217, 45, 58;
  --tt-blue-rgb: 59, 130, 246;

  --radius: 0px;
  --radius-sm: 0px;

  --scr-bg: #0d0508;
  --scr-bg-end: #070304;
  --scr-panel: rgba(26, 14, 18, 0.75);
  --scr-head-bg: #1c0f14;
  --scr-head-text: #ddc4c8;
  --scr-text: #f5e9eb;
  --scr-dim: #b09499;
  --scr-line: rgba(216, 152, 160, 0.22);
  --scr-accent: #ff5566;
  --scr-score: #ff9aa4;
  --scr-score-flash: rgba(255, 85, 102, 0.42);
  --scr-glow-1: rgba(255, 85, 102, 0.16);
  --scr-glow-2: rgba(255, 154, 164, 0.10);
  --scr-msg-team: #ffa0ab;
}

:root[data-skin="crimson"][data-theme="light"] {
  --user-page-bg: #fbf1f2;
  --user-surface: rgba(192, 36, 47, 0.06);
  --user-surface-solid: #ffffff;
  --user-surface-elevated: #ffffff;
  --user-text-primary: #2a1013;
  --user-text-secondary: #77565c;
  --user-border: rgba(140, 80, 90, 0.34);
  --user-border-soft: rgba(140, 80, 90, 0.18);
  --user-accent: #c0242f;
  --user-accent-hover: #d92d3a;
  --user-accent-alt: #a8232e;
  --user-warn: #b26a00;
  --user-danger: #a81f28;
  --user-blue: #1d4ed8;
  --user-header-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.90) 100%),
    linear-gradient(0deg, rgba(192, 36, 47, 0.03), rgba(192, 36, 47, 0.03));
  --user-panel-bg: #ffffff;
  --user-panel-border: rgba(140, 80, 90, 0.30);
  --user-shadow: 0 10px 24px rgba(42, 16, 19, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  --user-shadow-sm: 0 4px 12px rgba(42, 16, 19, 0.08);
  --user-text-strong: #3a1c20;
  --user-text-body: #523338;

  --tt-on-accent: #ffffff;
  --tt-on-blue: #ffffff;
  --tt-page-glow-1: rgba(192, 36, 47, 0.10);
  --tt-page-glow-2: rgba(168, 35, 46, 0.08);
  --tt-page-bg-end: #f4e6e8;
  --tt-field-bg: #ffffff;
  --tt-field-bg-focus: #ffffff;
  --tt-field-bg-soft: rgba(42, 16, 19, 0.035);
  --tt-field-bg-strong: rgba(42, 16, 19, 0.06);
  --tt-neutral-weak: rgba(140, 80, 90, 0.06);
  --tt-neutral: rgba(140, 80, 90, 0.10);
  --tt-neutral-strong: rgba(140, 80, 90, 0.16);
  --tt-accent-weak: rgba(192, 36, 47, 0.10);
  --tt-accent-soft: rgba(192, 36, 47, 0.14);
  --tt-accent-line: rgba(192, 36, 47, 0.48);
  --tt-accent-text: #a81f28;
  --tt-accent-text-strong: #92171f;
  --tt-blue-text: #1d4ed8;
  --tt-warn-text: #92530a;
  --tt-danger-text: #b0202a;
  --tt-danger-text-strong: #a31b24;
  --tt-thead-bg: #f6e9eb;
  --tt-thead-bg-solid: #f6e9eb;
  --tt-thead-text: #63464b;
  --tt-heading: #2a1013;
  --tt-float-bg: #ffffff;
  --tt-mask: rgba(42, 16, 19, 0.42);

  --skin-corner: rgba(192, 36, 47, 0.95);
  --skin-corner-fade: rgba(192, 36, 47, 0.2);
  --skin-corner-glow: rgba(192, 36, 47, 0.28);

  --tt-warn-rgb: 178, 106, 0;
  --tt-warn-hover: #9c5c00;
  --tt-on-warn: #ffffff;
  --tt-danger-rgb: 168, 31, 40;
  --tt-blue-rgb: 29, 78, 216;

  --radius: 0px;
  --radius-sm: 0px;

  --scr-bg: #fbf1f2;
  --scr-bg-end: #f3e5e7;
  --scr-panel: rgba(255, 255, 255, 0.92);
  --scr-head-bg: #f5e7e9;
  --scr-head-text: #63464b;
  --scr-text: #2a1013;
  --scr-dim: #77565c;
  --scr-line: rgba(140, 80, 90, 0.24);
  --scr-accent: #c0242f;
  --scr-score: #a81f28;
  --scr-score-flash: rgba(192, 36, 47, 0.22);
  --scr-glow-1: rgba(192, 36, 47, 0.12);
  --scr-glow-2: rgba(168, 35, 46, 0.08);
  --scr-msg-team: #a8232e;
}

/* ==========================================================================
   4. matrix · 终端矩阵
   --------------------------------------------------------------------------
   纯黑 + 荧光绿 + **全等宽字体**，终端既视感；页面叠一层极淡的扫描线。
   圆角 0，边框硬，强调色亮度高（黑底上像自发光）。
   ========================================================================== */
:root[data-skin="matrix"] {
  --user-page-bg: #030604;
  --user-surface: rgba(53, 224, 122, 0.10);
  --user-surface-solid: #08120c;
  --user-surface-elevated: #0b1a11;
  --user-text-primary: #d8ffe6;
  --user-text-secondary: #7fae91;
  --user-border: rgba(110, 231, 160, 0.42);
  --user-border-soft: rgba(110, 231, 160, 0.22);
  --user-accent: #35e07a;
  --user-accent-hover: #55f094;
  --user-accent-alt: #7bf3ad;
  --user-warn: #ffd166;
  --user-danger: #ff5c5c;
  --user-blue: #4cd7ff;
  --user-header-bg: linear-gradient(180deg, rgba(3, 6, 4, 0.94) 0%, rgba(3, 6, 4, 0.88) 100%),
    linear-gradient(0deg, rgba(53, 224, 122, 0.06), rgba(53, 224, 122, 0.06));
  --user-panel-bg: linear-gradient(0deg, rgba(53, 224, 122, 0.05), rgba(53, 224, 122, 0.05)),
    linear-gradient(rgba(16, 60, 36, 0.22) 0%, rgba(12, 45, 27, 0.22) 100%);
  --user-panel-border: rgba(110, 231, 160, 0.42);
  --user-shadow: 0 12px 26px rgba(0, 4, 1, 0.50), inset 0 0 0 1px rgba(180, 255, 210, 0.07);
  --user-shadow-sm: 0 6px 16px rgba(0, 4, 1, 0.40);
  --user-text-strong: #bff5d4;
  --user-text-body: #aeeec7;

  --tt-on-accent: #03210f;
  --tt-on-blue: #03210f;
  --tt-page-glow-1: rgba(53, 224, 122, 0.14);
  --tt-page-glow-2: rgba(123, 243, 173, 0.08);
  --tt-page-bg-end: #010302;
  --tt-field-bg: rgba(6, 20, 12, 0.60);
  --tt-field-bg-focus: rgba(6, 20, 12, 0.78);
  --tt-field-bg-soft: rgba(6, 20, 12, 0.34);
  --tt-field-bg-strong: rgba(6, 20, 12, 0.70);
  --tt-neutral-weak: rgba(110, 231, 160, 0.08);
  --tt-neutral: rgba(110, 231, 160, 0.12);
  --tt-neutral-strong: rgba(110, 231, 160, 0.18);
  --tt-accent-weak: rgba(53, 224, 122, 0.12);
  --tt-accent-soft: rgba(53, 224, 122, 0.16);
  --tt-accent-line: rgba(53, 224, 122, 0.50);
  --tt-accent-text: #6ef3a4;
  --tt-accent-text-strong: #8ff7b8;
  --tt-blue-text: #7fe4ff;
  --tt-warn-text: #ffe08a;
  --tt-danger-text: #ffb0b0;
  --tt-danger-text-strong: #ff9494;
  --tt-thead-bg: #08150e;
  --tt-thead-bg-solid: #08150e;
  --tt-thead-text: #a9e8c2;
  --tt-heading: #d8ffe6;
  --tt-float-bg: #0a1a11;
  --tt-mask: rgba(0, 3, 1, 0.78);

  --skin-corner: #35e07af2;
  --skin-corner-fade: #35e07a33;
  --skin-corner-glow: rgba(53, 224, 122, 0.45);

  --tt-warn-rgb: 255, 209, 102;
  --tt-warn-hover: #ffdd8a;
  --tt-on-warn: #2a1d00;
  --tt-danger-rgb: 255, 92, 92;
  --tt-blue-rgb: 76, 215, 255;

  --radius: 0px;
  --radius-sm: 0px;
  --app-font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;
  --app-mono-font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;

  --scr-bg: #020503;
  --scr-bg-end: #010302;
  --scr-panel: rgba(6, 18, 11, 0.78);
  --scr-head-bg: #06150d;
  --scr-head-text: #a9e8c2;
  --scr-text: #d8ffe6;
  --scr-dim: #7fae91;
  --scr-line: rgba(110, 231, 160, 0.22);
  --scr-accent: #35e07a;
  --scr-score: #6ef3a4;
  --scr-score-flash: rgba(53, 224, 122, 0.42);
  --scr-glow-1: rgba(53, 224, 122, 0.16);
  --scr-glow-2: rgba(123, 243, 173, 0.10);
  --scr-msg-team: #7bf3ad;
}

:root[data-skin="matrix"][data-theme="light"] {
  --user-page-bg: #eef4ef;
  --user-surface: rgba(13, 122, 69, 0.06);
  --user-surface-solid: #ffffff;
  --user-surface-elevated: #ffffff;
  --user-text-primary: #0b1a12;
  --user-text-secondary: #4c6156;
  --user-border: rgba(40, 80, 60, 0.32);
  --user-border-soft: rgba(40, 80, 60, 0.18);
  --user-accent: #0d7a45;
  --user-accent-hover: #10894f;
  --user-accent-alt: #0f6b4a;
  --user-warn: #8a6400;
  --user-danger: #b02020;
  --user-blue: #0e6b8a;
  --user-header-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.90) 100%),
    linear-gradient(0deg, rgba(13, 122, 69, 0.03), rgba(13, 122, 69, 0.03));
  --user-panel-bg: #ffffff;
  --user-panel-border: rgba(40, 80, 60, 0.30);
  --user-shadow: 0 10px 24px rgba(11, 26, 18, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  --user-shadow-sm: 0 4px 12px rgba(11, 26, 18, 0.08);
  --user-text-strong: #14261c;
  --user-text-body: #24382c;

  --tt-on-accent: #ffffff;
  --tt-on-blue: #ffffff;
  --tt-page-glow-1: rgba(13, 122, 69, 0.10);
  --tt-page-glow-2: rgba(15, 107, 74, 0.08);
  --tt-page-bg-end: #e2ebe5;
  --tt-field-bg: #ffffff;
  --tt-field-bg-focus: #ffffff;
  --tt-field-bg-soft: rgba(11, 26, 18, 0.035);
  --tt-field-bg-strong: rgba(11, 26, 18, 0.06);
  --tt-neutral-weak: rgba(40, 80, 60, 0.06);
  --tt-neutral: rgba(40, 80, 60, 0.10);
  --tt-neutral-strong: rgba(40, 80, 60, 0.16);
  --tt-accent-weak: rgba(13, 122, 69, 0.10);
  --tt-accent-soft: rgba(13, 122, 69, 0.14);
  --tt-accent-line: rgba(13, 122, 69, 0.48);
  --tt-accent-text: #0a6a3c;
  --tt-accent-text-strong: #085c33;
  --tt-blue-text: #0e6b8a;
  --tt-warn-text: #7a5800;
  --tt-danger-text: #a02020;
  --tt-danger-text-strong: #921c1c;
  --tt-thead-bg: #e8f0ea;
  --tt-thead-bg-solid: #e8f0ea;
  --tt-thead-text: #3c5246;
  --tt-heading: #0b1a12;
  --tt-float-bg: #ffffff;
  --tt-mask: rgba(11, 26, 18, 0.42);

  --skin-corner: rgba(13, 122, 69, 0.95);
  --skin-corner-fade: rgba(13, 122, 69, 0.2);
  --skin-corner-glow: rgba(13, 122, 69, 0.28);

  --tt-warn-rgb: 138, 100, 0;
  --tt-warn-hover: #6f5000;
  --tt-on-warn: #ffffff;
  --tt-danger-rgb: 176, 32, 32;
  --tt-blue-rgb: 14, 107, 138;

  --radius: 0px;
  --radius-sm: 0px;
  --app-font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;
  --app-mono-font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;

  --scr-bg: #eef4ef;
  --scr-bg-end: #e1eae4;
  --scr-panel: rgba(255, 255, 255, 0.92);
  --scr-head-bg: #e5efe8;
  --scr-head-text: #3c5246;
  --scr-text: #0b1a12;
  --scr-dim: #4c6156;
  --scr-line: rgba(40, 80, 60, 0.24);
  --scr-accent: #0d7a45;
  --scr-score: #085c33;
  --scr-score-flash: rgba(13, 122, 69, 0.22);
  --scr-glow-1: rgba(13, 122, 69, 0.12);
  --scr-glow-2: rgba(15, 107, 74, 0.08);
  --scr-msg-team: #0f6b4a;
}

/* ==========================================================================
   5. neon · 霓虹赛博
   --------------------------------------------------------------------------
   深紫底 + 青/品红霓虹，圆角明显放大（12px），面板带外发光。
   强调色（青）与次要强调色（品红）双色，是全部皮肤里最「张扬」的一套。
   ========================================================================== */
:root[data-skin="neon"] {
  --user-page-bg: #0a0616;
  --user-surface: rgba(34, 211, 238, 0.12);
  --user-surface-solid: #140f28;
  --user-surface-elevated: #1a1434;
  --user-text-primary: #eae4ff;
  --user-text-secondary: #9d92c4;
  --user-border: rgba(168, 150, 220, 0.48);
  --user-border-soft: rgba(168, 150, 220, 0.24);
  --user-accent: #22d3ee;
  --user-accent-hover: #4be0f5;
  --user-accent-alt: #f472b6;
  --user-warn: #ffc857;
  --user-danger: #ff4d8d;
  --user-blue: #7c5cff;
  --user-header-bg: linear-gradient(180deg, rgba(10, 6, 22, 0.94) 0%, rgba(10, 6, 22, 0.88) 100%),
    linear-gradient(0deg, rgba(34, 211, 238, 0.06), rgba(34, 211, 238, 0.06));
  --user-panel-bg: linear-gradient(0deg, rgba(124, 92, 255, 0.07), rgba(124, 92, 255, 0.07)),
    linear-gradient(rgba(52, 32, 96, 0.22) 0%, rgba(40, 24, 74, 0.22) 100%);
  --user-panel-border: rgba(168, 150, 220, 0.48);
  --user-shadow: 0 12px 26px rgba(4, 2, 12, 0.55), inset 0 0 0 1px rgba(210, 200, 255, 0.08);
  --user-shadow-sm: 0 6px 16px rgba(4, 2, 12, 0.45);
  --user-text-strong: #d9d0f5;
  --user-text-body: #cfc4ee;

  --tt-on-accent: #04181d;
  --tt-on-blue: #0a0616;
  --tt-page-glow-1: rgba(34, 211, 238, 0.16);
  --tt-page-glow-2: rgba(244, 114, 182, 0.10);
  --tt-page-bg-end: #050310;
  --tt-field-bg: rgba(16, 10, 36, 0.60);
  --tt-field-bg-focus: rgba(16, 10, 36, 0.78);
  --tt-field-bg-soft: rgba(16, 10, 36, 0.34);
  --tt-field-bg-strong: rgba(16, 10, 36, 0.70);
  --tt-neutral-weak: rgba(168, 150, 220, 0.08);
  --tt-neutral: rgba(168, 150, 220, 0.12);
  --tt-neutral-strong: rgba(168, 150, 220, 0.18);
  --tt-accent-weak: rgba(34, 211, 238, 0.12);
  --tt-accent-soft: rgba(34, 211, 238, 0.16);
  --tt-accent-line: rgba(34, 211, 238, 0.50);
  --tt-accent-text: #6ee7f5;
  --tt-accent-text-strong: #9df1fb;
  --tt-blue-text: #a78bfa;
  --tt-warn-text: #ffdc8a;
  --tt-danger-text: #ffb0cd;
  --tt-danger-text-strong: #ff94bd;
  --tt-thead-bg: #150f2c;
  --tt-thead-bg-solid: #150f2c;
  --tt-thead-text: #cbc0ea;
  --tt-heading: #eae4ff;
  --tt-float-bg: #180f30;
  --tt-mask: rgba(4, 2, 12, 0.78);

  --skin-corner: #22d3eef2;
  --skin-corner-fade: #22d3ee33;
  --skin-corner-glow: rgba(34, 211, 238, 0.50);

  --tt-warn-rgb: 255, 200, 87;
  --tt-warn-hover: #ffd77a;
  --tt-on-warn: #2a1c00;
  --tt-danger-rgb: 255, 77, 141;
  --tt-blue-rgb: 124, 92, 255;

  --radius: 12px;
  --radius-sm: 6px;

  --scr-bg: #07041a;
  --scr-bg-end: #040210;
  --scr-panel: rgba(20, 13, 46, 0.78);
  --scr-head-bg: #170f33;
  --scr-head-text: #cbc0ea;
  --scr-text: #eae4ff;
  --scr-dim: #9d92c4;
  --scr-line: rgba(168, 150, 220, 0.24);
  --scr-accent: #22d3ee;
  --scr-score: #6ee7f5;
  --scr-score-flash: rgba(34, 211, 238, 0.42);
  --scr-glow-1: rgba(34, 211, 238, 0.18);
  --scr-glow-2: rgba(244, 114, 182, 0.12);
  --scr-msg-team: #f472b6;
}

:root[data-skin="neon"][data-theme="light"] {
  --user-page-bg: #f4f2fc;
  --user-surface: rgba(14, 116, 144, 0.06);
  --user-surface-solid: #ffffff;
  --user-surface-elevated: #ffffff;
  --user-text-primary: #17123a;
  --user-text-secondary: #5d5680;
  --user-border: rgba(80, 70, 130, 0.32);
  --user-border-soft: rgba(80, 70, 130, 0.18);
  --user-accent: #0e7490;
  --user-accent-hover: #0d8aa8;
  --user-accent-alt: #a21caf;
  --user-warn: #8a6200;
  --user-danger: #be185d;
  --user-blue: #5b21b6;
  --user-header-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.90) 100%),
    linear-gradient(0deg, rgba(14, 116, 144, 0.03), rgba(14, 116, 144, 0.03));
  --user-panel-bg: #ffffff;
  --user-panel-border: rgba(80, 70, 130, 0.30);
  --user-shadow: 0 10px 24px rgba(23, 18, 58, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  --user-shadow-sm: 0 4px 12px rgba(23, 18, 58, 0.08);
  --user-text-strong: #221a52;
  --user-text-body: #3b3470;

  --tt-on-accent: #ffffff;
  --tt-on-blue: #ffffff;
  --tt-page-glow-1: rgba(14, 116, 144, 0.10);
  --tt-page-glow-2: rgba(162, 28, 175, 0.08);
  --tt-page-bg-end: #e9e5f7;
  --tt-field-bg: #ffffff;
  --tt-field-bg-focus: #ffffff;
  --tt-field-bg-soft: rgba(23, 18, 58, 0.035);
  --tt-field-bg-strong: rgba(23, 18, 58, 0.06);
  --tt-neutral-weak: rgba(80, 70, 130, 0.06);
  --tt-neutral: rgba(80, 70, 130, 0.10);
  --tt-neutral-strong: rgba(80, 70, 130, 0.16);
  --tt-accent-weak: rgba(14, 116, 144, 0.10);
  --tt-accent-soft: rgba(14, 116, 144, 0.14);
  --tt-accent-line: rgba(14, 116, 144, 0.48);
  --tt-accent-text: #0b5f76;
  --tt-accent-text-strong: #095064;
  --tt-blue-text: #5b21b6;
  --tt-warn-text: #7a5600;
  --tt-danger-text: #9d174d;
  --tt-danger-text-strong: #8a1143;
  --tt-thead-bg: #eeecf9;
  --tt-thead-bg-solid: #eeecf9;
  --tt-thead-text: #4a4372;
  --tt-heading: #17123a;
  --tt-float-bg: #ffffff;
  --tt-mask: rgba(23, 18, 58, 0.42);

  --skin-corner: rgba(14, 116, 144, 0.95);
  --skin-corner-fade: rgba(14, 116, 144, 0.2);
  --skin-corner-glow: rgba(14, 116, 144, 0.28);

  --tt-warn-rgb: 138, 98, 0;
  --tt-warn-hover: #6e4e00;
  --tt-on-warn: #ffffff;
  --tt-danger-rgb: 190, 24, 93;
  --tt-blue-rgb: 91, 33, 182;

  --radius: 12px;
  --radius-sm: 6px;

  --scr-bg: #f4f2fc;
  --scr-bg-end: #e8e4f6;
  --scr-panel: rgba(255, 255, 255, 0.92);
  --scr-head-bg: #eceaf8;
  --scr-head-text: #4a4372;
  --scr-text: #17123a;
  --scr-dim: #5d5680;
  --scr-line: rgba(80, 70, 130, 0.24);
  --scr-accent: #0e7490;
  --scr-score: #0b5f76;
  --scr-score-flash: rgba(14, 116, 144, 0.22);
  --scr-glow-1: rgba(14, 116, 144, 0.12);
  --scr-glow-2: rgba(162, 28, 175, 0.08);
  --scr-msg-team: #a21caf;
}

/* ==========================================================================
   6. paper · 卷宗纸
   --------------------------------------------------------------------------
   暖白纸张 + 墨色正文 + 赭石强调，标题改用衬线字。这是唯一一套「浅色优先」
   气质的皮肤（深色变体是「档案室」：深棕黑底 + 米色文字）。
   ========================================================================== */
:root[data-skin="paper"] {
  --user-page-bg: #16130f;
  --user-surface: rgba(214, 190, 150, 0.10);
  --user-surface-solid: #1e1a15;
  --user-surface-elevated: #26211a;
  --user-text-primary: #f0e7d8;
  --user-text-secondary: #b0a48e;
  --user-border: rgba(214, 190, 150, 0.40);
  --user-border-soft: rgba(214, 190, 150, 0.20);
  --user-accent: #c8873f;
  --user-accent-hover: #d99a52;
  --user-accent-alt: #e0b878;
  --user-warn: #ffb020;
  --user-danger: #e5484d;
  --user-blue: #5b8dd6;
  --user-header-bg: linear-gradient(180deg, rgba(22, 19, 15, 0.94) 0%, rgba(22, 19, 15, 0.88) 100%),
    linear-gradient(0deg, rgba(200, 135, 63, 0.05), rgba(200, 135, 63, 0.05));
  --user-panel-bg: linear-gradient(0deg, rgba(200, 135, 63, 0.04), rgba(200, 135, 63, 0.04)),
    linear-gradient(rgba(84, 68, 44, 0.18) 0%, rgba(66, 53, 34, 0.18) 100%);
  --user-panel-border: rgba(214, 190, 150, 0.40);
  --user-shadow: 0 12px 26px rgba(8, 6, 4, 0.48), inset 0 0 0 1px rgba(240, 226, 200, 0.07);
  --user-shadow-sm: 0 6px 16px rgba(8, 6, 4, 0.38);
  --user-text-strong: #ded2bc;
  --user-text-body: #d4c7b0;

  --tt-on-accent: #22160a;
  --tt-on-blue: #241f18;
  --tt-page-glow-1: rgba(200, 135, 63, 0.12);
  --tt-page-glow-2: rgba(224, 184, 120, 0.07);
  --tt-page-bg-end: #0d0b08;
  --tt-field-bg: rgba(28, 24, 18, 0.55);
  --tt-field-bg-focus: rgba(28, 24, 18, 0.72);
  --tt-field-bg-soft: rgba(28, 24, 18, 0.32);
  --tt-field-bg-strong: rgba(28, 24, 18, 0.66);
  --tt-neutral-weak: rgba(214, 190, 150, 0.08);
  --tt-neutral: rgba(214, 190, 150, 0.12);
  --tt-neutral-strong: rgba(214, 190, 150, 0.18);
  --tt-accent-weak: rgba(200, 135, 63, 0.12);
  --tt-accent-soft: rgba(200, 135, 63, 0.16);
  --tt-accent-line: rgba(200, 135, 63, 0.50);
  --tt-accent-text: #e8bd85;
  --tt-accent-text-strong: #f0cd9c;
  --tt-blue-text: #9dbbec;
  --tt-warn-text: #ffd48a;
  --tt-danger-text: #ffb4b6;
  --tt-danger-text-strong: #ff9ea1;
  --tt-thead-bg: #221d16;
  --tt-thead-bg-solid: #221d16;
  --tt-thead-text: #d8ccb6;
  --tt-heading: #f0e7d8;
  --tt-float-bg: #241f18;
  --tt-mask: rgba(8, 6, 4, 0.74);

  --skin-corner: #c8873ff2;
  --skin-corner-fade: #c8873f33;
  --skin-corner-glow: rgba(200, 135, 63, 0.40);

  --tt-warn-rgb: 255, 176, 32;
  --tt-warn-hover: #ffc247;
  --tt-on-warn: #241701;
  --tt-danger-rgb: 229, 72, 77;
  --tt-blue-rgb: 91, 141, 214;

  --radius: 3px;
  --radius-sm: 2px;

  --scr-bg: #100e0a;
  --scr-bg-end: #080705;
  --scr-panel: rgba(30, 26, 21, 0.78);
  --scr-head-bg: #221d16;
  --scr-head-text: #d8ccb6;
  --scr-text: #f2ead9;
  --scr-dim: #b0a48e;
  --scr-line: rgba(214, 190, 150, 0.22);
  --scr-accent: #c8873f;
  --scr-score: #e8bd85;
  --scr-score-flash: rgba(200, 135, 63, 0.42);
  --scr-glow-1: rgba(200, 135, 63, 0.14);
  --scr-glow-2: rgba(224, 184, 120, 0.09);
  --scr-msg-team: #e0b878;
}

:root[data-skin="paper"][data-theme="light"] {
  --user-page-bg: #f7f2e7;
  --user-surface: rgba(140, 106, 60, 0.06);
  --user-surface-solid: #fffdf8;
  --user-surface-elevated: #fffdf8;
  --user-text-primary: #241f18;
  --user-text-secondary: #6b6152;
  --user-border: rgba(120, 100, 70, 0.34);
  --user-border-soft: rgba(120, 100, 70, 0.18);
  --user-accent: #8a5a1e;
  --user-accent-hover: #a06a24;
  --user-accent-alt: #6f4a18;
  --user-warn: #b26a00;
  --user-danger: #b3261e;
  --user-blue: #1d4ed8;
  --user-header-bg: linear-gradient(180deg, rgba(255, 253, 248, 0.95) 0%, rgba(255, 253, 248, 0.90) 100%),
    linear-gradient(0deg, rgba(138, 90, 30, 0.03), rgba(138, 90, 30, 0.03));
  --user-panel-bg: #fffdf8;
  --user-panel-border: rgba(120, 100, 70, 0.30);
  --user-shadow: 0 10px 24px rgba(36, 31, 24, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  --user-shadow-sm: 0 4px 12px rgba(36, 31, 24, 0.08);
  --user-text-strong: #322a1f;
  --user-text-body: #4a4032;

  --tt-on-accent: #ffffff;
  --tt-on-blue: #ffffff;
  --tt-page-glow-1: rgba(138, 90, 30, 0.10);
  --tt-page-glow-2: rgba(111, 74, 24, 0.08);
  --tt-page-bg-end: #efe7d6;
  --tt-field-bg: #ffffff;
  --tt-field-bg-focus: #ffffff;
  --tt-field-bg-soft: rgba(36, 31, 24, 0.035);
  --tt-field-bg-strong: rgba(36, 31, 24, 0.06);
  --tt-neutral-weak: rgba(120, 100, 70, 0.06);
  --tt-neutral: rgba(120, 100, 70, 0.10);
  --tt-neutral-strong: rgba(120, 100, 70, 0.16);
  --tt-accent-weak: rgba(138, 90, 30, 0.10);
  --tt-accent-soft: rgba(138, 90, 30, 0.14);
  --tt-accent-line: rgba(138, 90, 30, 0.48);
  --tt-accent-text: #7a4e17;
  --tt-accent-text-strong: #684112;
  --tt-blue-text: #1d4ed8;
  --tt-warn-text: #92530a;
  --tt-danger-text: #9c1f18;
  --tt-danger-text-strong: #8a1a14;
  --tt-thead-bg: #f0e8d7;
  --tt-thead-bg-solid: #f0e8d7;
  --tt-thead-text: #57492f;
  --tt-heading: #241f18;
  --tt-float-bg: #fffdf8;
  --tt-mask: rgba(36, 31, 24, 0.42);

  --skin-corner: rgba(138, 90, 30, 0.95);
  --skin-corner-fade: rgba(138, 90, 30, 0.2);
  --skin-corner-glow: rgba(138, 90, 30, 0.26);

  --tt-warn-rgb: 178, 106, 0;
  --tt-warn-hover: #9c5c00;
  --tt-on-warn: #ffffff;
  --tt-danger-rgb: 179, 38, 30;
  --tt-blue-rgb: 29, 78, 216;

  --radius: 3px;
  --radius-sm: 2px;

  --scr-bg: #f7f2e7;
  --scr-bg-end: #efe7d6;
  --scr-panel: rgba(255, 253, 248, 0.94);
  --scr-head-bg: #f0e8d7;
  --scr-head-text: #57492f;
  --scr-text: #241f18;
  --scr-dim: #6b6152;
  --scr-line: rgba(120, 100, 70, 0.24);
  --scr-accent: #8a5a1e;
  --scr-score: #684112;
  --scr-score-flash: rgba(138, 90, 30, 0.22);
  --scr-glow-1: rgba(138, 90, 30, 0.12);
  --scr-glow-2: rgba(111, 74, 24, 0.08);
  --scr-msg-team: #6f4a18;
}

/* ==========================================================================
   签名样式（Signature）
   --------------------------------------------------------------------------
   上面是「换色」，这里是「换气质」：每套皮肤 1–3 条规则，只做**加法**
   （加描边 / 加纹理 / 换字体），不改布局尺寸，因此不会影响任何布局断言。
   tactical（默认皮肤）不在这里出现 —— 它就是 theme.css 的原样。
   ========================================================================== */

/* 顶栏底部加一条本色细线：让「皮肤」在页面最显眼的位置被认出来 */
:root[data-skin="midnight"] .app-user-header { box-shadow: 0 1px 0 rgba(76, 141, 255, 0.38); }
:root[data-skin="ember"] .app-user-header { box-shadow: 0 1px 0 rgba(232, 163, 61, 0.38); }
:root[data-skin="crimson"] .app-user-header { box-shadow: 0 1px 0 rgba(255, 85, 102, 0.40); }
:root[data-skin="matrix"] .app-user-header { box-shadow: 0 1px 0 rgba(53, 224, 122, 0.40); }
:root[data-skin="paper"] .app-user-header { box-shadow: 0 1px 0 rgba(200, 135, 63, 0.32); }

/* 霓虹：顶栏底线 + 一层外发光，面板也带一点紫边光 */
:root[data-skin="neon"] .app-user-header {
  box-shadow: 0 1px 0 rgba(34, 211, 238, 0.45), 0 0 22px rgba(124, 92, 255, 0.26);
}
:root[data-skin="neon"] .panel { box-shadow: var(--user-shadow), 0 0 0 1px rgba(124, 92, 255, 0.10); }

/* 终端矩阵：极淡扫描线 + 标题字距拉开（等宽字体已由 --app-font-family 给出） */
:root[data-skin="matrix"] body.is-user {
  background-image:
    repeating-linear-gradient(180deg, rgba(53, 224, 122, 0.045) 0 1px, transparent 1px 3px),
    radial-gradient(1200px 600px at 20% -10%, var(--tt-page-glow-1), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, var(--tt-page-glow-2), transparent 55%),
    linear-gradient(180deg, var(--user-page-bg) 0%, var(--tt-page-bg-end) 100%);
}
:root[data-skin="matrix"] .panel-title,
:root[data-skin="matrix"] .app-site-title { letter-spacing: 1.5px; }

/* 卷宗纸：标题换衬线字，正文行距略放宽，读起来像卷宗 */
:root[data-skin="paper"] h1,
:root[data-skin="paper"] h2,
:root[data-skin="paper"] h3,
:root[data-skin="paper"] h4,
:root[data-skin="paper"] .panel-title,
:root[data-skin="paper"] .app-site-title {
  font-family: Georgia, "Songti SC", "SimSun", "Noto Serif SC", serif;
  letter-spacing: 0;
}

/* 绯红：边框加硬，配合 0 圆角，整体更「档案封条」 */
:root[data-skin="crimson"] .panel { border-color: var(--user-panel-border); }