/* public/assets/prefs.css —— 用户偏好（深浅色）相关样式
*
* 两部分，互不依赖：
* ① 浅色主题：`html[data-theme="light"]` 覆盖 styles.css 的 :root 变量
* ② 切换控件：`.prefs-theme` / `.prefs-theme-btn`（由 prefs.js 的 mountThemeSwitch 生成）
*
* ============================ 这份文件怎么工作 ============================
* · 属性由 `prefs.js` 打在 `` 上：`data-theme="dark|light"`（实际主题）、
* `data-theme-pref="auto|dark|light"`（用户档位）。
* · 选择器写成 `html[data-theme="light"]` 而不是 `[data-theme="light"]`：
* 特异性 (0,1,1) 比 `:root` 的 (0,1,0) 高一档 —— 这样**不管这个文件排在哪**，
* 都稳定压过 styles.css 的 :root 和 `/theme.css`（管理员皮肤）里的 :root。
* 如果只用 `[data-theme=...]`（同特异性），就会被后加载的 /theme.css 反压过去。
* · 必须用静态 `` 引入（放 ）。
* JS 动态插 = 第一帧没有浅色样式 = 白闪，见 prefs.js 顶部的 FOUC 说明。
*
* ============================ 设计取舍 ============================
* 本站是**深色玻璃拟态**（半透明面板 + backdrop-filter + 极光层 + 渐变文字）。
* 浅色主题**不重做那套玻璃拟态**，只做两件事：
* ① 把颜色变量翻过来（下面这一大块）—— 绝大多数界面靠变量自动跟着变；
* ② 只处理少数**写死成深色的地方**（面板渐变、渐变文字、底图遮罩），
* 这些是变量的盲区，不修就是"深色大块浮在浅色页面上"。
* 目标是"能看清、不刺眼、不违和"，不追求平面设计级别的完成度。
*
* ⚠️ 全局只用变量覆盖 + 极少数字面量覆盖，**一条 `!important` 都不用**：
* 用 !important 压出来的浅色主题，下次站长改样式时会变成谁也改不动的死规则。
* =====================================================================
*/
/* ==================================================================
* ① 浅色主题
* ================================================================== */
html[data-theme="light"] {
/* 让浏览器自己画的那些部件（滚动条、下拉、autofill 底色、日期选择器）
跟着变浅。不加这条，系统浅色下输入框会闪出深色块。
（styles.css 的 :root 里写的是 dark，这里必须显式翻过来。） */
color-scheme: light;
/* ---- 底色与面板 ----
不取纯白 #fff：满屏纯白在夜里刺眼，而且玻璃拟态的半透明白面板会完全看不出来。
用带一点蓝的浅灰打底，面板才有"浮起来"的层次。 */
--bg: #eef1f8;
--bg2: #e6ebf5;
--bg-deep: #ffffff; /* 卡片/播放器那种"更实的底"——浅色下最实的底就是白 */
/* ---- 文字层级（深底浅字 → 浅底深字，层级关系保持四档不变） ---- */
--fg: #1c2333;
--fg-strong: #0d1322;
--text-sub: #39425a;
--dim: #5a6480;
--text-mute: #6b7590;
/* ⚠️ --ink / --ink-warm 故意不改：它们是**亮色按钮上的深色字**，
浅色主题下按钮底依旧是彩色渐变，深色字依然正确。 */
/* ⚠️ --shade / --shade-a550 故意不改：--shade 是**纯黑**，
它还被用在 `mask-image: linear-gradient(…, var(--shade) …)` 里当遮罩色 ——
遮罩跟主题无关，把它改成白会让筛选栏的渐隐方向整个反过来。阴影同理，黑阴影在浅色下也对。 */
/* ---- 品牌与状态色 ----
不照搬深色那套（#5b8cff 之类）：亮底上它们对比不够。
但也不压太深 —— 这些颜色大量用作**按钮底**，上面压的是 --ink 深色字（如 .cat-chip.on），
底太深就变成"深底深字"。所以取"中亮"，两边都够用。 */
--acc: #4b7bf2;
--acc2: #9a6af0;
--cyan: #2f8ee0;
--violet: #3f4fbf; /* 主要当**文字色**用（.foot a / .jp-more），所以压得比 --cyan 深 */
--ok: #12a377;
--ok-soft: #1fbd8c;
--gold: #a97d12;
--orange: #c2661a;
--danger: #c93b3b;
/* 品牌色的 alpha 层（通道是写死在变量里的，必须逐个换） */
--acc-a550: rgba(75, 123, 242, .55);
--cyan-a120: rgba(47, 142, 224, .12);
--cyan-a220: rgba(47, 142, 224, .22);
--cyan-a350: rgba(47, 142, 224, .35);
--cyan-a400: rgba(47, 142, 224, .4);
--cyan-a450: rgba(47, 142, 224, .45);
--cyan-a500: rgba(47, 142, 224, .5);
--cyan-a600: rgba(47, 142, 224, .6);
--cyan-a700: rgba(47, 142, 224, .7);
--ok-a350: rgba(18, 163, 119, .35);
/* ---- 白色透明度梯度 → 黑色透明度梯度 ----
这是浅色主题里**最关键的一组**：面板/边框/分区全靠它（--panel/--panel2/--line 都是它的别名）。
深色下"白色 alpha"= 比底色亮一点的块；浅色下必须换成"黑色 alpha"= 比底色暗一点的块，
否则白底 + 白面板 = 面板整个消失，所有卡片和分区的边界都没了。
数值沿用原来那套（只换颜色通道），这样"块与块之间分不分得开"的相对关系不变。 */
--wa-35: rgba(16, 24, 44, .035);
--wa-40: rgba(16, 24, 44, .04);
--wa-45: rgba(16, 24, 44, .045);
--wa-50: rgba(16, 24, 44, .05);
--wa-60: rgba(16, 24, 44, .06);
--wa-70: rgba(16, 24, 44, .07);
--wa-80: rgba(16, 24, 44, .08);
--wa-85: rgba(16, 24, 44, .085);
--wa-90: rgba(16, 24, 44, .09);
--wa-100: rgba(16, 24, 44, .1);
--wa-120: rgba(16, 24, 44, .12);
--wa-130: rgba(16, 24, 44, .13);
--wa-140: rgba(16, 24, 44, .14);
--wa-160: rgba(16, 24, 44, .16);
--wa-180: rgba(16, 24, 44, .18);
/* 旧名别名：值本身就是上面那几个 var，会自动跟着变。
这里重新声明一遍纯粹是为了"grep 变量名时能一眼看到浅色主题管到了它"。 */
--panel: var(--wa-50);
--panel2: var(--wa-85);
--line: var(--wa-100);
/* ---- 不动的：--radius / --topbar-h / --safe-* / --bg-art ----
几何、测量值、安全区、底图都跟主题无关。 */
}
/* ------------------------------------------------------------------
* 写死成深色的地方（变量的盲区）—— 逐个修
*
* 判断标准：**不上这条会不会出现"深色块/看不见的字"**。会，就加；
* 只是"有那么点不够精致"，就不加（别把玻璃拟态重做一遍）。
* ------------------------------------------------------------------ */
/* 全站底图上的那层深色遮罩（rgba(7,8,15,…) 一路写死的）。
不换掉的话，浅色主题整页会被压成灰黑 —— 这一条是浅色能不能用的前提。 */
html[data-theme="light"] body::before {
background:
linear-gradient(180deg, rgba(238, 241, 248, 0.74) 0%, rgba(238, 241, 248, 0.52) 40%,
rgba(238, 241, 248, 0.70) 72%, rgba(238, 241, 248, 0.94) 100%),
var(--bg-art) center center / cover no-repeat;
}
/* 背景里的 'dfy' 大水印：青/绿在浅底上比在深底上显眼，压淡一半免得糊在内容上 */
html[data-theme="light"] body::after {
color: rgba(47, 142, 224, 0.05);
-webkit-text-stroke: 1px rgba(18, 163, 119, 0.05);
}
/* 极光光晕层：它是给深色星空底做氛围的，浅色下会变成一团脏兮兮的灰紫。
不做重设计，整体压淡即可（保留一点"玻璃感"，但从"主角"降成"气氛"）。 */
html[data-theme="light"] .aurora { opacity: .3; }
/* 顶栏 / 筛选栏：两条 rgba(7,8,15,…) 的深色渐变。
它们 sticky 在最上面，浅色主题下会变成两横条黑胶带。 */
html[data-theme="light"] .top-wrap {
background: linear-gradient(180deg, rgba(238, 241, 248, 0.94) 60%, rgba(238, 241, 248, 0.62) 100%);
}
html[data-theme="light"] .filters-wrap {
background: linear-gradient(180deg, rgba(238, 241, 248, 0.72) 0%,
rgba(238, 241, 248, 0.44) 78%,
rgba(238, 241, 248, 0) 100%);
}
/* 卡片：`.card` 的卡面是 `linear-gradient(180deg, #141828, var(--bg-deep))`，
上半截写死成深蓝 —— 浅色下会变成"黑卡 + 深色标题"，字全看不见。
换成白→白色（--bg-deep 在浅色下就是白），跟变量一起走。 */
html[data-theme="light"] .card {
background: linear-gradient(180deg, #ffffff, var(--bg-deep));
}
/* 下拉面板 / 用户名片 / 弹窗：这几个是"深色实心玻璃"（rgba(20,25,45,.98) 那一档），
里面文字用的是 var(--fg)（浅色下已经是深色）→ 深底深字，内容完全读不出来。
统一换成浅色实心玻璃。 */
html[data-theme="light"] .search-pop {
background: linear-gradient(165deg, rgba(255, 255, 255, 0.98), rgba(240, 244, 252, 0.99));
}
html[data-theme="light"] .nu-card {
background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(240, 244, 252, 0.99));
}
html[data-theme="light"] .upgrade-box {
background: linear-gradient(160deg, rgba(255, 255, 255, 0.97), rgba(238, 242, 250, 0.98));
}
/* 轮播卡（首页顶部那三张 3D 翻转卡）：卡面是深色玻璃，字是 var(--fg-strong)。
浅色下改浅玻璃；那张模糊的封面底衬（.hc-backdrop）原来是 brightness(.5) 压暗，
浅色下要往亮里拉，否则卡里还是闷着一层黑。 */
html[data-theme="light"] .hc-slide {
background: linear-gradient(150deg, rgba(255, 255, 255, 0.86), rgba(236, 241, 250, 0.8));
}
html[data-theme="light"] .hc-backdrop {
filter: blur(30px) grayscale(.55) brightness(1.12);
opacity: .38;
}
/* 页脚的渐变大字（`background-clip: text` + `color: transparent`）：
渐变是 var(--cyan)→#2fd6a0，在浅底上对比不够、还发飘。浅色下直接换成实色。
⚠️ 必须用 `-webkit-text-fill-color: currentColor` 兜住 ——
原规则把 `color` 设成了 transparent，只改 background 的话字会整个消失。
（login.html / site.css 里还有几处同类渐变文字，见文件末尾的说明。） */
html[data-theme="light"] .foot .footbrand,
html[data-theme="light"] .side-lead em {
background: none;
-webkit-text-fill-color: currentColor;
color: var(--violet);
}
/* 滚动条：轨道/描边是写死的 #0a0c15（深色），浅色下那一条黑边特别明显。
注意这些是 ::-webkit-* 伪元素，改不了变量，只能单独覆盖。 */
html[data-theme="light"] ::-webkit-scrollbar-track { background: #e2e7f2; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { border-color: #e2e7f2; }
/* 搜索命中的 ：深色下是半透明蓝底 + 浅字（globals 里写死的 #eaf1ff）。
浅色下浅字会糊在白底上，换成深字。 */
html[data-theme="light"] mark {
background: rgba(47, 142, 224, .2);
color: #10203a;
}
/* ---------- 登录页 ----------
* 登录页是自己一套「深海场景」的内联样式（`.sea` 全屏深色 + 极光 + 气泡 + 游鱼），
* 而页里的文字用的是 var(--fg)/var(--dim) —— 浅色主题下会变成「深底深字」，整页读不出来。
* 所以只翻最必要的几层：背景、玻璃壳、输入框、小卡片；
* 气泡/游鱼/极光**不动**（那在浅底上就是淡纹路，不影响阅读）。
* 这些类名只在这个页面里用，写在这里比写进 styles.css 更不容易误伤别的页面。 */
html[data-theme="light"] .sea {
background:
radial-gradient(120% 80% at 50% -10%, #dfeafe 0%, #edf1fa 45%, #f4f6fc 100%),
linear-gradient(180deg, #eef2fa, #f6f8fd);
}
html[data-theme="light"] .gridlines { opacity: .28; }
html[data-theme="light"] .login-shell {
background: linear-gradient(155deg, rgba(255, 255, 255, .94), rgba(240, 244, 252, .97));
border-color: rgba(16, 24, 44, .1);
box-shadow: 0 30px 80px rgba(23, 34, 64, .18), 0 0 0 1px rgba(47, 142, 224, .08) inset;
}
html[data-theme="light"] .login-side {
background:
radial-gradient(120% 90% at 0% 0%, rgba(75, 123, 242, .14), transparent 62%),
linear-gradient(160deg, rgba(154, 106, 240, .08), rgba(18, 163, 119, .05));
border-right-color: rgba(16, 24, 44, .08);
}
html[data-theme="light"] .feature {
background: rgba(16, 24, 44, .04);
border-color: rgba(16, 24, 44, .08);
}
html[data-theme="light"] .field input {
background: rgba(16, 24, 44, .04);
border-color: rgba(16, 24, 44, .14);
}
html[data-theme="light"] .field input:focus {
background: rgba(16, 24, 44, .06);
border-color: rgba(47, 142, 224, .7);
}
html[data-theme="light"] .login-foot { border-top-color: rgba(16, 24, 44, .08); }
/* 这几处是「浅字压在浅底上」的散装灰（#9aa5cc / #8fa4ff / #ff9a9a），统一收回到变量。
⚠️ 报错文案那条要排除 `.ok`（成功态用的是 var(--ok) 的绿），
不然这条特异性更高，会把「登录成功」也染成红色。 */
html[data-theme="light"] .side-sub,
html[data-theme="light"] .field label { color: var(--dim); }
html[data-theme="light"] .login-foot b { color: var(--violet); }
html[data-theme="light"] .login-msg:not(.ok) { color: var(--danger); }
/* ==================================================================
* ② 主题切换控件（DOM 由 prefs.js 的 mountThemeSwitch() 生成）
*
* 结构：
*
* ×3
*
*
* 颜色全部走变量（--panel / --line / --acc / --fg-strong …），
* 所以深浅色主题下都自动适配，这里一个颜色字面量都不写。
* ================================================================== */
.prefs-theme {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px;
border-radius: 999px;
background: var(--panel);
border: 1px solid var(--line);
}
/* ⚠️ 硬性要求：自己设了 `display: inline-flex`，所以**必须**补这条。
`hidden` 属性靠 `display: none` 生效，被自己的 display 盖掉之后
元素哪怕 hidden 也照样显示（本站踩过真事故，见 styles.css 里 .upgrade-mask 那段）。 */
.prefs-theme[hidden] { display: none; }
.prefs-theme-btn {
display: inline-flex; align-items: center; gap: 6px;
min-height: 32px; /* 触摸目标 ≥32px（手机上点得准） */
padding: 6px 12px;
border: 0; border-radius: 999px;
background: none;
color: var(--dim);
font: inherit; font-size: 13px; line-height: 1;
cursor: pointer;
transition: background .16s, color .16s, box-shadow .16s, transform .12s;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.prefs-theme-btn:hover { color: var(--fg); background: var(--cyan-a120); }
.prefs-theme-btn:active { transform: scale(.96); }
/* 选中态：彩色渐变底 + --fg-strong 字（深色主题下是白字，浅色下是近黑字，两边都成立） */
.prefs-theme-btn[aria-pressed="true"] {
color: var(--fg-strong);
background: linear-gradient(135deg, var(--acc), var(--acc2));
box-shadow: 0 4px 14px var(--acc-a550);
}
/* 图标：prefs.js 用 currentColor 描边，这里只给尺寸 */
.prefs-theme-btn svg { width: 16px; height: 16px; display: block; flex: 0 0 auto; }
/* 手机上顶栏本来就挤，收成"只留图标"（aria-label 仍在，读屏照样念得出来） */
@media (max-width: 620px) {
.prefs-theme { padding: 3px; }
.prefs-theme-btn { padding: 8px 10px; }
.prefs-theme-btn .prefs-txt { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.prefs-theme-btn { transition: none; }
}
/* ==================================================================
* 已知未覆盖（有意为之，别当漏了）
*
* · login.html 的 `.sea` / `.login-shell` / 输入框 / 报错色已经单独覆盖（见上面"登录页"一节）。
* 但那个页面的品牌小标签（`.brand-row h1 .en`：浅字压半透明彩底）和气泡/游鱼没动 ——
* 前者是纯装饰标签、后者是氛围层，浅色下都不影响阅读。
* · site.css 里 `background: #080a13`（详情页头图渐隐）之类的散装深色：
* 它们都压在封面图上，深色渐隐在浅色主题下也是对的（保证图上白字可读），不动。
* · 强制色模式（forced-colors）的回退规则在 styles.css 末尾，那是系统级的，
* 和用户主题无关，这里不管。
* ================================================================== */