/* ==========================================================================
   八度音频 · 设置（字号）
   --------------------------------------------------------------------------
   ⚠️ 2026-09-27 定稿：**全站只有一套皮肤**（网站最开始那套紫色霓虹）。
      卖家先是要"参考大厂做两套皮肤"，来回改了七八轮之后说
      「把白色也去掉，只留下一开始的那个皮肤」—— 所以：
        · 皮肤的配色**全部在 index.html / assets/site.css 的 :root 里**
          （紫夜就是默认值本身，这里不再写覆盖规则 —— 避免"两份定义"的隐患）
        · 这个文件只负责：**字号 4 档** + **设置面板的样式** + **侧栏 logo 的颜色类**

   字体的排查过程值得记一笔：查了苹果/微信/知乎/36Kr/Ant Design 的字体栈，
   在 Windows 上**它们全都落到微软雅黑**（实测渲染宽度一模一样），
   所以直接用最朴素的系统字体栈 —— 抄哪家都一样。

   这份 CSS 首页和 11 个子页面**都引**。行为在 assets/skin.js。
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════
   侧栏 logo 的颜色（2026-09-27 修）
   --------------------------------------------------------------------------
   两件事一起修的，都很关键：

   ① **`var()` 在 SVG 表现属性里是无效的。**
      之前批量变量化时把 logo 写成了
          <rect fill="rgba(var(--ov-rgb),.05)"/>
      表现属性（写成 attribute 的 fill / stroke / stop-color）**不支持 var()**，
      浏览器直接当"没写这一条"，回落到默认的**黑色**。
      → 改成挂 class，颜色写在 CSS 里（CSS 属性支持 var()）。

   ② **logo 的渐变色原来写死是紫色**（#a78bfa / #8b5cf6 / #22d3ee）。
      当初变量化时我特意跳过了 SVG（原因①），结果换浅色皮肤之后
      **侧栏那个图标还是紫的** —— 卖家说的「白色不能配紫色和蓝色」指的就是它。
      → 现在也走变量，跟着皮肤走（云白是黑白的，紫夜是紫青霓虹的）。
   ══════════════════════════════════════════════════════════════════ */
.logo-bg{fill:rgba(var(--ov-rgb),.06)}
.logo-ring{fill:none;stroke:rgba(var(--ac-rgb),.3)}
.lg-a{stop-color:var(--lg-a)}
.lg-b{stop-color:var(--lg-b)}
.lg-c{stop-color:var(--lg-c)}



/* ---------- 字号：4 档 ----------
   ⚠️⚠️ 数值**必须写前导零**：`0.9` 不能写成 `.9`。
   CSS 里普通属性（`opacity:.5` / `transition:.2s`）接受省略前导零，
   但**自定义属性不接受** —— `--fs:.9` 会被当成非法值**整个丢掉**，
   于是 `var(--fs,1)` 走兜底、字号一点变化都没有，**而且控制台不报任何错**。
   2026-09-27 踩到：四档里只有「小」不生效，排查了半天。

   ⚠️ 光改 font-size 不够：卡片最小宽 180px 是写死的，
      字放大之后卡片会挤到换行，所以 grid 的最小宽也跟着 --fs 走。 */
html[data-fs="s"] { --fs:0.9; }
html[data-fs="m"] { --fs:1;   }
html[data-fs="l"] { --fs:1.12;}
html[data-fs="xl"]{ --fs:1.26;}

html[data-fs] #catHost .grid,
html[data-fs] .grid{
  grid-template-columns:repeat(auto-fill,minmax(calc(180px * var(--fs,1)),1fr));
}

/* ==========================================================================
   设置面板
   设计原则（卖家：「要高级不凌乱」）：只有两个区块、每个区块一排选项、
   大量留白、不用花哨的边框和阴影。跟着当前皮肤走，不自己定颜色。
   ========================================================================== */
.sk-mask{
  position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  padding:20px;background:var(--mask-bg);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  animation:skFade .16s ease-out;
}
.sk-mask[hidden]{display:none}
@keyframes skFade{from{opacity:0}to{opacity:1}}
@keyframes skUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.sk-panel{
  position:relative;width:100%;max-width:430px;border-radius:20px;
  padding:26px 26px 22px;
  background:var(--panel);
  border:1px solid var(--line-2);
  box-shadow:0 30px 70px -24px rgba(0,0,0,.45);
  animation:skUp .2s ease-out;
  color:var(--body);
}
.sk-panel h3{
  margin:0 0 20px;font-size:16px;font-weight:700;color:var(--ink);
  letter-spacing:-.01em;
}
.sk-panel h3 span{font-weight:400;font-size:12.5px;color:var(--muted);margin-left:8px}
.sk-close{
  position:absolute;top:14px;right:15px;width:30px;height:30px;border-radius:9px;
  background:rgba(var(--ov-rgb),.06);border:1px solid var(--line);
  color:var(--body);font-size:15px;line-height:1;cursor:pointer;
  display:grid;place-items:center;font-family:inherit;
}
.sk-close:hover{background:rgba(var(--ov-rgb),.13);color:var(--ink)}

.sk-group{margin-top:20px}
.sk-group:first-of-type{margin-top:0}
.sk-label{
  font-size:11.5px;letter-spacing:var(--track-label,.1em);text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:11px;
}
.sk-row{display:flex;gap:10px}

/* --- 皮肤选项：一块色卡 + 名字，选中的描一圈强调色 --- */
.sk-skin{
  flex:1;padding:0;border-radius:14px;cursor:pointer;overflow:hidden;
  background:transparent;border:1px solid var(--line-2);
  font-family:inherit;transition:.16s;
}
.sk-skin:hover{border-color:var(--violet);transform:translateY(-2px)}
.sk-skin.is-on{
  border-color:var(--violet);
  box-shadow:0 0 0 1px var(--violet),0 8px 22px -12px rgba(var(--ac-rgb),.8);
}
.sk-swatch{height:48px;position:relative;overflow:hidden;display:block}
.sk-swatch::after{
  content:"";position:absolute;left:10px;right:10px;bottom:9px;height:6px;border-radius:3px;
}
/* ⚠️ 两个色卡要**各自显示自己的配色**，不能用 var(--grad) ——
   那样两个色卡会全都变成"当前皮肤"的颜色，选皮肤时完全看不出区别。
   （这两行的颜色就是那两套皮肤的值，改了皮肤记得同步。） */
.sk-swatch[data-sw="cloud"]{background:#fbfbfd}
.sk-swatch[data-sw="cloud"]::after{background:linear-gradient(120deg,#0a84ff,#0071e3 58%,#0066cc)}
.sk-skin b{
  display:block;padding:9px 4px 10px;font-size:12.5px;font-weight:600;
  color:var(--body);background:rgba(var(--ov-rgb),.03);
}
.sk-skin.is-on b{color:var(--ink)}

/* --- 字号选项 --- */
.sk-fs{
  flex:1;padding:9px 0;border-radius:10px;cursor:pointer;font-family:inherit;
  background:rgba(var(--ov-rgb),.05);border:1px solid var(--line-2);
  color:var(--body);font-weight:600;transition:.16s;
}
.sk-fs:hover{border-color:var(--violet);color:var(--ink)}
.sk-fs.is-on{
  background:var(--grad);color:var(--on-accent);border-color:transparent;
  box-shadow:0 6px 18px -10px rgba(var(--ac-rgb),.9);
}

.sk-tip{
  margin-top:20px;padding-top:15px;border-top:1px solid var(--line);
  font-size:12px;color:var(--muted);line-height:1.7;
}
.sk-tip b{color:var(--body);font-weight:600}

/* 苹果皮肤的卡片阴影已经在 :root 的 --card-shadow 里给了，
   特斯拉那套是 none —— 不用在这里单独写。 */