@import url("/assets/ui-glass.css?v=1");
/* 设计变量:全站唯一的一份视觉词汇表
 *
 * 用法:页面什么都不用加载判断,只要 <html> 上有 data-style / data-mode
 * (core.js 和 app.js 都会写),这里的变量就自动生效。换风格 = 改一个属性,
 * 不需要重新加载 CSS,也就没有闪烁。
 *
 * 两种"表面"(surface):
 *   默认        —— 面向用户的应用页(应用中心、注册、聊天、应用管理…)
 *   data-surface="console" —— 面向运维的工具页(mc / ops / aux),深色控制台观感
 * 表面写在 <body> 上,由页面自己声明;每套风格都要给出两种表面的取值。
 *
 * 加新变量前先问一句:它是"词汇"还是"某一页的布局"?布局留在页面自己的 <style> 里。
 */

:root {
  /* 排版:各风格可覆盖 */
  --font: "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, Menlo, "Noto Sans Mono CJK SC", monospace;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow: 0 2px 8px rgba(0, 0, 0, .06);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, .12);
}

/* ───────── stardust 星尘(默认)───────── */
/* 浅色应用页 = 站点原来的紫渐变体系,逐值照搬,换过来看不出差别 */
:root,
html[data-style="stardust"] {
  --bg: #f5f6fa;
  --bg-2: #f0f2f7;
  --surface: #ffffff;
  --surface-2: #f7f8fc;
  --border: #e2e5ee;
  --text: #333333;
  --muted: #666666;
  --dim: #9aa0b0;
  --accent: #667eea;
  --accent-2: #764ba2;
  --accent-fg: #ffffff;
  --ok: #26a65b;
  --warn: #c05621;
  --err: #d94b4b;
}
html[data-style="stardust"][data-mode="dark"] {
  --bg: #0b0f1c;
  --bg-2: #070a14;
  --surface: #141a2e;
  --surface-2: #1b2340;
  --border: #262f4d;
  --text: #e6e9f5;
  --muted: #99a1bd;
  --dim: #626a89;
  --accent: #8b9cf7;
  --accent-2: #a97fd6;
  --accent-fg: #0b0f1c;
  --ok: #3ddc84;
  --warn: #f0c674;
  --err: #ff6b6b;
  --shadow: 0 2px 8px rgba(0, 0, 0, .4);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, .55);
}
/* 工具页:原来 ops/mc/aux 的深蓝控制台,同样逐值照搬 */
html[data-style="stardust"] body[data-surface="console"] {
  --bg: #0f1420;
  --bg-2: #0b1420;
  --surface: #161c2e;
  --surface-2: #1d2440;
  --border: #2c3552;
  --text: #e8ecf8;
  --muted: #8b93ad;
  --dim: #59617f;
  --accent: #3ddc84;
  --accent-2: #26a65b;
  --accent-fg: #062b16;
  --ok: #3ddc84;
  --warn: #f0c674;
  --err: #ff6b6b;
  --shadow: 0 2px 8px rgba(0, 0, 0, .4);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, .55);
}

/* ───────── terminal 终端 ───────── */
/* 整站一个磷光色,工具页和应用页不分家——终端本来就没有"应用"和"工具"之别 */
html[data-style="terminal"],
html[data-style="terminal"] body[data-surface="console"] {
  --font: var(--mono);
  --radius: 3px;
  --radius-lg: 4px;
  --shadow: none;
  --shadow-lg: none;
  --bg: #050805;
  --bg-2: #0b140b;
  --surface: #0b140b;
  --surface-2: #101c10;
  --border: #1c8a3f;
  --text: #38f56b;
  --muted: #1c8a3f;
  --dim: #146030;
  --accent: #38f56b;
  --accent-2: #c6ffd9;
  --accent-fg: #050805;
  --ok: #38f56b;
  --warn: #ffcc4d;
  --err: #ff5f5f;
}
html[data-style="terminal"][data-mode="light"],
html[data-style="terminal"][data-mode="light"] body[data-surface="console"] {
  --bg: #100c02;
  --bg-2: #1b1405;
  --surface: #1b1405;
  --surface-2: #241b06;
  --border: #8a5f00;
  --text: #ffb000;
  --muted: #8a5f00;
  --dim: #614300;
  --accent: #ffb000;
  --accent-2: #ffe4a3;
  --accent-fg: #100c02;
  --ok: #ffb000;
  --warn: #ffd980;
  --err: #ff6b3d;
}

/* ───────── paper 纸刊 ───────── */
html[data-style="paper"] {
  --font: Georgia, "Songti SC", "Noto Serif CJK SC", serif;
  --radius: 0px;
  --radius-lg: 0px;
  --shadow: none;
  --shadow-lg: 0 1px 0 #ddd8cc;
  --bg: #f7f4ec;
  --bg-2: #efe9dc;
  --surface: #fdfbf5;
  --surface-2: #f3efe4;
  --border: #d8d2c2;
  --text: #1a1712;
  --muted: #5e574a;
  --dim: #8d8676;
  --accent: #1a1712;
  --accent-2: #8c2b1e;
  --accent-fg: #fdfbf5;
  --ok: #3f6b40;
  --warn: #8c6a1e;
  --err: #8c2b1e;
}
html[data-style="paper"][data-mode="dark"] {
  --bg: #16130e;
  --bg-2: #100e0a;
  --surface: #1e1a14;
  --surface-2: #262119;
  --border: #3a332a;
  --text: #ece4d4;
  --muted: #a89e8c;
  --dim: #7a7263;
  --accent: #ece4d4;
  --accent-2: #d98b6a;
  --accent-fg: #16130e;
  --ok: #7fae7f;
  --warn: #d9b56a;
  --err: #d98b6a;
}
/* 纸刊的工具页:油墨反转,像报纸的黑底栏 */
html[data-style="paper"] body[data-surface="console"] {
  --bg: #1a1712;
  --bg-2: #12100c;
  --surface: #232019;
  --surface-2: #2c2820;
  --border: #3d382d;
  --text: #f0ebdd;
  --muted: #a89e8c;
  --dim: #7a7263;
  --accent: #e0c58a;
  --accent-2: #d98b6a;
  --accent-fg: #1a1712;
}

/* ───────── neon 霓虹 ───────── */
/* 只有深色一种;工具页共用同一套,HUD 本来就是控制台 */
html[data-style="neon"],
html[data-style="neon"] body[data-surface="console"] {
  --radius: 2px;
  --radius-lg: 3px;
  --shadow: 0 0 0 1px rgba(34, 227, 255, .12);
  --shadow-lg: 0 0 30px rgba(34, 227, 255, .18);
  --bg: #06060e;
  --bg-2: #0a0a16;
  --surface: #0e0e1d;
  --surface-2: #15152a;
  --border: #23234a;
  --text: #dfe6ff;
  --muted: #8891bd;
  --dim: #565f8c;
  --accent: #22e3ff;
  --accent-2: #ff2fb9;
  --accent-fg: #06060e;
  --ok: #2fffb0;
  --warn: #ffd166;
  --err: #ff2f6b;
}

/* ───────── inkwash 水墨 ───────── */
/* 纸与墨两色而已:所谓浓淡都是同一味墨兑水,别各调各的。第二色只有印章的朱砂 */
html[data-style="inkwash"] {
  --font: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", Georgia, serif;
  --radius: 2px;
  --radius-lg: 3px;
  --shadow: 0 1px 6px rgba(27, 26, 23, .07);
  --shadow-lg: 0 14px 30px -18px rgba(27, 26, 23, .5);
  --bg: #efe8d6;
  --bg-2: #e7dfca;
  --surface: #f5f0e2;
  --surface-2: #e5dbc4;
  --border: #cfc5ac;
  --text: #1b1a17;
  --muted: #56503f;
  --dim: #8b8371;
  --accent: #1b1a17;
  --accent-2: #a5342a;
  --accent-fg: #f5f0e2;
  --ok: #4a6b46;
  --warn: #8a6a24;
  --err: #a5342a;
}
/* 夜拓:墨底纸字,像碑帖的拓片 */
html[data-style="inkwash"][data-mode="dark"] {
  --bg: #14140f;
  --bg-2: #0f0f0b;
  --surface: #1c1c16;
  --surface-2: #24241c;
  --border: #35342a;
  --text: #e9e2cf;
  --muted: #b0a893;
  --dim: #7d7666;
  --accent: #e9e2cf;
  --accent-2: #c9573f;
  --accent-fg: #14140f;
  --ok: #8fae86;
  --warn: #d3b271;
  --err: #c9573f;
  --shadow: 0 1px 6px rgba(0, 0, 0, .5);
  --shadow-lg: 0 14px 30px -16px rgba(0, 0, 0, .7);
}
/* 水墨的工具页:整块砚台,浓墨压底 */
html[data-style="inkwash"] body[data-surface="console"] {
  --bg: #191813;
  --bg-2: #121109;
  --surface: #211f18;
  --surface-2: #2a2820;
  --border: #3b3830;
  --text: #ece5d2;
  --muted: #b0a893;
  --dim: #7d7666;
  --accent: #d8cfb4;
  --accent-2: #c9573f;
  --accent-fg: #191813;
}

/* ───────── 音乐播放器语义变量 ─────────
 * 顶层播放器壳也加载本文件。默认从通用词汇派生,各风格只覆盖真正有辨识度的部分。
 */
:root {
  --player-bg: color-mix(in srgb, var(--surface) 94%, transparent);
  --player-panel-bg: var(--surface-2);
  --player-border: var(--border);
  --player-text: var(--text);
  --player-muted: var(--muted);
  --player-accent: var(--accent);
  --player-accent-2: var(--accent-2);
  --player-progress-track: var(--border);
  --player-progress-fill: var(--accent);
  --player-cover-shadow: var(--shadow-lg);
  --player-overlay: rgba(0, 0, 0, .42);
}
html[data-style="stardust"][data-mode="dark"] { --player-bg: rgba(14,19,35,.94); --player-cover-shadow: 0 10px 30px rgba(92,104,240,.24); }
html[data-style="terminal"] { --player-bg: rgba(5,8,5,.97); --player-cover-shadow: 0 0 16px color-mix(in srgb,var(--accent) 28%,transparent); }
html[data-style="paper"] { --player-bg: rgba(253,251,245,.97); --player-cover-shadow: 5px 5px 0 var(--border); }
html[data-style="paper"][data-mode="dark"] { --player-bg: rgba(30,26,20,.97); }
html[data-style="neon"] { --player-bg: rgba(6,6,14,.95); --player-cover-shadow: 0 0 22px rgba(34,227,255,.24); }
html[data-style="inkwash"] { --player-bg: rgba(245,240,226,.97); --player-cover-shadow: 0 8px 24px rgba(27,26,23,.18); }
html[data-style="inkwash"][data-mode="dark"] { --player-bg: rgba(20,20,15,.97); }