/* 极简样式表 —— 纯色、1px 边框、无图片、无网络字体、无重动画,低配机器友好 */

:root{
  --bg:#ffffff;
  --bg-soft:#f6f7f9;
  --line:#e3e6ea;
  --line-strong:#cfd4da;
  --text:#1b1f24;
  --text-2:#5b6470;
  --text-3:#8b949e;
  --accent:#1f6feb;
  --accent-soft:#eaf1fe;
  --warn:#b45309;
  --warn-bg:#fdf4e6;
  --warn-line:#eed9b4;
  --danger:#c81e1e;
  --danger-bg:#fdeceb;
  --danger-line:#f2c3c1;
  --radius:8px;
}

html[data-theme="dark"]{
  --bg:#15181c;
  --bg-soft:#1c2026;
  --line:#2c3239;
  --line-strong:#3a424b;
  --text:#e8eaed;
  --text-2:#a8b0ba;
  --text-3:#79828d;
  --accent:#4c8dff;
  --accent-soft:#1d2735;
  --warn:#f0b45c;
  --warn-bg:#33291a;
  --warn-line:#54452a;
  --danger:#ff7a7a;
  --danger-bg:#3a1f1f;
  --danger-line:#5c2f2f;
}

@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    --bg:#15181c;
    --bg-soft:#1c2026;
    --line:#2c3239;
    --line-strong:#3a424b;
    --text:#e8eaed;
    --text-2:#a8b0ba;
    --text-3:#79828d;
    --accent:#4c8dff;
    --accent-soft:#1d2735;
    --warn:#f0b45c;
    --warn-bg:#33291a;
    --warn-line:#54452a;
    --danger:#ff7a7a;
    --danger-bg:#3a1f1f;
    --danger-line:#5c2f2f;
  }
}

*,*::before,*::after{box-sizing:border-box}

/* 全局兜底:凡是用 hidden 属性隐藏的元素都必须真的消失
   (否则 .card/.modal 这类自带 display:flex 的规则会盖掉 [hidden]) */
[hidden]{display:none!important}

html{-webkit-text-size-adjust:100%}
/* 滚动条位置固定占用,翻页 / 开弹层时页面不会因为滚动条消失而左右抖一下 */
html{scrollbar-gutter:stable}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.6 system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3{margin:0;font-weight:600;line-height:1.3}
h1{font-size:17px}
h2{font-size:13px}

p{margin:0 0 8px}
ul,ol{margin:0;padding:0;list-style:none}
code{font-family:Consolas,"Courier New",monospace;font-size:12px;background:var(--bg-soft);padding:1px 4px;border-radius:3px}

.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.muted{color:var(--text-2)}
.small{font-size:12px}
.sr,.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 顶部 ---------- */
.top{
  background:var(--bg);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:10;
}

.bar{
  position:relative;              /* 「设置」那块小菜单要贴着顶栏右下角定位 */
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  height:54px;
}

.btn{
  display:inline-block;
  height:32px;line-height:30px;
  padding:0 14px;
  font:inherit;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  background:var(--bg);
  color:var(--text);
  cursor:pointer;
  white-space:nowrap;
}
.btn:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent);color:#fff;opacity:.9}
.btn.ghost{border-color:var(--line)}
.btn.sm{height:28px;line-height:26px;padding:0 10px;font-size:13px}
.theme{flex:none}

/* ---------- 分类 ---------- */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:10px 16px;
}
.chip{
  height:28px;line-height:26px;
  padding:0 12px;
  font:inherit;font-size:13px;
  color:var(--text-2);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:999px;
  cursor:pointer;
}
.chip:hover{color:var(--text);border-color:var(--line-strong)}
.chip[aria-pressed="true"]{
  color:#fff;background:var(--accent);border-color:var(--accent);
}

/* ---------- 布局 ---------- */
.layout{
  padding-top:16px;
  padding-bottom:24px;
}

.listbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
  margin-bottom:14px;
}
.listbar h1{flex:none}
.listbar h2{font-size:16px;flex:none;padding:0;border:0;margin:0;color:var(--text);letter-spacing:0}
.listbar .muted{flex:1;font-size:12px}

/* ---------- 卡片网格 ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:10px;
}

.card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg);
}
.card:hover{border-color:var(--line-strong)}

.card-head{display:flex;gap:10px;align-items:flex-start}
.ico{
  flex:none;
  width:36px;height:36px;
  border-radius:7px;
  color:#fff;
  font-size:13px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
  letter-spacing:.5px;
  background:#5b6470;
}
/* 品牌图标:内联 SVG / 图片,填满圆角方块 */
.ico.ico-brand{
  background:transparent;
  padding:0;
  overflow:hidden;
  border:1px solid var(--line);
}
.ico svg,.ico img{display:block;width:100%;height:100%;border-radius:inherit}
.card-title{min-width:0}
.card-title h3{
  font-size:14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card-title .sub{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.card-foot{display:flex;gap:8px;margin-top:auto}

/* ---------- 快捷入口(点击直接跳转) ---------- */
.block{margin-top:24px}

.tiles{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:8px;
}

.tile{
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg);
  color:var(--text);
}
.tile:hover{border-color:var(--accent);text-decoration:none}
.tile .ico{width:28px;height:28px;border-radius:6px;font-size:11px}
.t-txt{min-width:0;display:flex;flex-direction:column;line-height:1.35}
.t-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* Poki 放大卡:占 2×2 格 */
.tile.big{
  grid-column:span 2;
  grid-row:span 2;
  padding:16px;
  gap:14px;
  border-color:var(--line-strong);
  background:var(--bg-soft);
}
.tile.big .ico{width:52px;height:52px;border-radius:10px;font-size:17px}
.tile.big .t-name{font-size:19px}

/* ---------- 侧栏 ---------- */
.box{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px;
  margin-bottom:12px;
}
.box h2{
  padding-bottom:8px;
  margin-bottom:8px;
  border-bottom:1px solid var(--line);
  color:var(--text-3);
  letter-spacing:.5px;
}
.box.soft{background:var(--bg-soft)}
.box p:last-child{margin-bottom:0}

.tips li{
  position:relative;
  padding:3px 0 3px 12px;
  font-size:12px;
  color:var(--text-2);
}
.tips li::before{
  content:"";position:absolute;left:2px;top:11px;
  width:4px;height:4px;border-radius:50%;background:var(--line-strong);
}

/* ---------- 详情弹层 ---------- */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-mask{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.modal-box{
  position:relative;
  width:100%;max-width:560px;
  max-height:86vh;
  overflow:auto;
  background:var(--bg);
  border-radius:10px;
  padding:20px 22px 22px;
}
.modal-x{
  position:absolute;right:8px;top:8px;
  width:28px;height:28px;line-height:1;
  font-size:18px;color:var(--text-2);
  background:none;border:0;border-radius:6px;cursor:pointer;
}
.modal-x:hover{background:var(--bg-soft);color:var(--text)}

/* 弹层里那个「即将打开的地址」区块:明确写出按钮会指到哪里(跳转提示也在用) */
.jump{
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:var(--radius);
  background:var(--bg-soft);
  padding:10px 12px;
  margin:0 0 14px;
}
.jump-title{font-size:12px;color:var(--text-3);margin-bottom:6px}
.jump-row{display:flex;gap:8px;align-items:baseline;padding:2px 0;flex-wrap:wrap}
.jump-label{
  flex:none;
  font-size:12px;color:var(--text-2);
  line-height:18px;padding:0 6px;
  border:1px solid var(--line);border-radius:4px;
  background:var(--bg);
}
.jump-url{
  min-width:0;
  font-family:Consolas,"Courier New",monospace;
  font-size:12px;line-height:1.6;
  word-break:break-all;
}

.m-note{font-size:12px;color:var(--text-3);margin:10px 0 0}

/* ---------- 跳转前提示(需要梯子 / 建议加速) ---------- */
.tip{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px}
.tip-mask{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.tip-box{
  position:relative;
  width:100%;max-width:430px;
  max-height:86vh;overflow:auto;
  background:var(--bg);
  border:1px solid var(--line);
  border-top:3px solid var(--warn);
  border-radius:10px;
  padding:18px 20px 20px;
}
.tip-box h3{
  font-size:15px;
  color:var(--warn);
  margin-bottom:8px;
}
.tip-text{margin:0 0 14px;color:var(--text-2)}
/* 按域名自动追加的提示(如 4399 登录/实名) */
.tip-extra{
  margin:0 0 14px;
  padding:10px 12px;
  font-size:13px;
  line-height:1.7;
  color:var(--warn);
  background:var(--warn-bg);
  border:1px solid var(--warn-line);
  border-left:5px solid var(--warn);
  border-radius:var(--radius);
}
.tip-extra b{display:block;margin-bottom:4px;font-size:14px}
.tip-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

/* 页脚角落的小链接,平时不起眼 */
.guide-link{
  flex:none;
  margin-left:auto;
  padding:0;
  font:inherit;
  font-size:12px;
  color:var(--text-3);
  background:none;
  border:0;
  text-decoration:underline;
  cursor:pointer;
}
.guide-link:hover{color:var(--accent)}

/* ---------- DSH 安装教程弹层 ---------- */
.g-warn{
  padding:14px 16px 16px;
  margin:0 0 16px;
  background:var(--danger-bg);
  border:2px solid var(--danger);
  border-left:8px solid var(--danger);
  border-radius:var(--radius);
}
.g-warn-badge{
  display:inline-block;
  padding:1px 8px;
  margin-bottom:8px;
  font-size:12px;
  letter-spacing:2px;
  color:#fff;
  background:var(--danger);
  border-radius:4px;
}
.g-warn h2{
  margin:0 0 8px;
  font-size:22px;
  line-height:1.3;
  color:var(--danger);
  border:0;padding:0;
}
.g-warn p{margin:0;color:var(--text);font-size:13px;line-height:1.7}

.g-intro{margin:0 0 10px;color:var(--text-2)}

.g-steps{counter-reset:g;margin:0 0 16px}
.g-steps li{
  position:relative;
  padding:0 0 12px 30px;
  counter-increment:g;
}
.g-steps li::before{
  content:counter(g);
  position:absolute;left:0;top:1px;
  width:20px;height:20px;
  font-size:12px;line-height:20px;text-align:center;
  color:#fff;background:var(--accent);
  border-radius:50%;
}
.g-text{font-size:14px;margin-bottom:6px}
.g-cmd{
  display:block;
  padding:8px 10px;
  font-family:Consolas,"Courier New",monospace;
  font-size:12px;
  line-height:1.5;
  color:var(--text);
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:6px;
  white-space:pre-wrap;
  word-break:break-all;
  user-select:all;
}
.g-dl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.g-file-note{font-size:12px;color:var(--text-3);line-height:1.7;margin:0 0 4px}

/* ============================================================
   翻页(第 1 页:下载与入口 / 第 2 页:评论 / 第 3 页:看视频 / 第 4 页:短片)
   动画只用 transform 和 opacity —— 这两个属性不会触发重排重绘,
   交给显卡合成就行。低配机器上还有两条捷径(见文件末尾):
   ① prefers-reduced-motion ② html[data-lowpower="1"]
   ============================================================ */

/* 顶栏里的翻页控件:四个等宽按钮 + 一块跟着滑的白药丸。
   用 grid 的 1fr 四等分 —— 药丸宽度就是「(总宽 - 4px)/4」,translateX 每次走一格,刚好对齐 */
.pager{
  position:relative;
  display:inline-grid;
  grid-template-columns:repeat(4,1fr);
  flex:none;
  margin-right:auto;
  padding:2px;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:999px;
  /* 按住能横向拖着换页(见 app.js):
     touch-action 只放行竖向,手指上下滑还是正常滚页面,横向才交给我们;
     user-select 免得拖动时把标签文字选中变蓝 */
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
}
.pg-btn{
  position:relative;
  z-index:1;
  min-width:72px;
  height:28px;
  padding:0 12px;
  font:inherit;font-size:13px;
  color:var(--text-2);
  background:none;
  border:0;
  border-radius:999px;
  cursor:pointer;
}
.pg-btn:hover{color:var(--text)}
.pg-btn[aria-current="page"]{color:var(--text);font-weight:600}
/* 拖动时预告会落到哪一格:只是把那一格的标签点亮,不加任何形变 / 阴影 / 模糊特效 */
.pager.dragging .pg-btn.near{color:var(--text)}
.pager.dragging{cursor:grabbing}
/* 跟手的关键:拖动期间关掉药丸那条过渡(不然它会慢半拍地追在手指后面)。
   松手后 dragging 摘掉,过渡立刻恢复,于是「吸附到目标格」还是原来那一下滑 */
.pager.dragging .pg-pill{transition:none}
.pg-pill{
  position:absolute;
  z-index:0;
  left:2px;top:2px;bottom:2px;
  width:calc((100% - 4px)/4);
  background:var(--bg);
  border:1px solid var(--line-strong);
  border-radius:999px;
  transition:transform .32s cubic-bezier(.3,.9,.3,1);
}
.pg-pill.p2{transform:translateX(100%)}
.pg-pill.p3{transform:translateX(200%)}
.pg-pill.p4{transform:translateX(300%)}

/* 几页共用的容器。翻出去 / 翻进来都靠这四组状态,函数列表保持一致才能补间 */
/* 关键:两页叠在同一个网格格子里(不是上下排)——
   翻页那一瞬间两页都可见,必须是「同一个位置互相换」,否则新页会出现在旧页下面(屏幕外) */
#stage{display:grid}
.page{
  grid-area:1/1;
  min-width:0;
  position:relative;
  transition:transform .42s cubic-bezier(.2,.8,.25,1),opacity .34s ease;
}
.page.anim{will-change:transform,opacity}
.page.out-left{opacity:0;pointer-events:none;transform:perspective(1400px) translate3d(-34px,0,0) rotateY(4deg) scale(.986)}
.page.out-right{opacity:0;pointer-events:none;transform:perspective(1400px) translate3d(34px,0,0) rotateY(-4deg) scale(.986)}
.page.pre-right{opacity:0;pointer-events:none;transform:perspective(1400px) translate3d(34px,0,0) rotateY(-4deg) scale(.986)}
.page.pre-left{opacity:0;pointer-events:none;transform:perspective(1400px) translate3d(-34px,0,0) rotateY(4deg) scale(.986)}

/* 落地后卡片依次浮上来(第 10 个之后一起出,免得动太多元素) */
.page.stagger .grid>*,
.page.stagger .tiles>*,
.page.stagger .vgrid>*{animation:cardIn .3s cubic-bezier(.2,.8,.25,1) both}
.page.stagger .cgrid>*{animation:cardIn .3s cubic-bezier(.2,.8,.25,1) both}
.page.stagger .grid>*:nth-child(1),
.page.stagger .tiles>*:nth-child(1),
.page.stagger .vgrid>*:nth-child(1){animation-delay:0ms}
.page.stagger .cgrid>*:nth-child(1){animation-delay:0ms}
.page.stagger .grid>*:nth-child(2),
.page.stagger .tiles>*:nth-child(2),
.page.stagger .vgrid>*:nth-child(2){animation-delay:32ms}
.page.stagger .cgrid>*:nth-child(2){animation-delay:32ms}
.page.stagger .grid>*:nth-child(3),
.page.stagger .tiles>*:nth-child(3),
.page.stagger .vgrid>*:nth-child(3){animation-delay:64ms}
.page.stagger .cgrid>*:nth-child(3){animation-delay:64ms}
.page.stagger .grid>*:nth-child(4),
.page.stagger .tiles>*:nth-child(4),
.page.stagger .vgrid>*:nth-child(4){animation-delay:96ms}
.page.stagger .cgrid>*:nth-child(4){animation-delay:96ms}
.page.stagger .grid>*:nth-child(5),
.page.stagger .tiles>*:nth-child(5),
.page.stagger .vgrid>*:nth-child(5){animation-delay:128ms}
.page.stagger .cgrid>*:nth-child(5){animation-delay:128ms}
.page.stagger .grid>*:nth-child(6),
.page.stagger .tiles>*:nth-child(6),
.page.stagger .vgrid>*:nth-child(6){animation-delay:160ms}
.page.stagger .cgrid>*:nth-child(6){animation-delay:160ms}
.page.stagger .grid>*:nth-child(7),
.page.stagger .tiles>*:nth-child(7),
.page.stagger .vgrid>*:nth-child(7){animation-delay:192ms}
.page.stagger .cgrid>*:nth-child(7){animation-delay:192ms}
.page.stagger .grid>*:nth-child(8),
.page.stagger .tiles>*:nth-child(8),
.page.stagger .vgrid>*:nth-child(8){animation-delay:224ms}
.page.stagger .cgrid>*:nth-child(8){animation-delay:224ms}
.page.stagger .grid>*:nth-child(n+9),
.page.stagger .tiles>*:nth-child(n+9),
.page.stagger .vgrid>*:nth-child(n+9){animation-delay:256ms}
.page.stagger .cgrid>*:nth-child(n+9){animation-delay:256ms}

@keyframes cardIn{
  from{opacity:0;transform:translate3d(0,10px,0)}
  to{opacity:1;transform:none}
}

/* 翻页时扫过整屏的一道浅光(只有一个铺满视口的图层,很便宜) */
.pg-sheen{
  position:fixed;
  inset:0;
  z-index:9;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(105deg,rgba(31,111,235,0) 38%,rgba(31,111,235,.10) 50%,rgba(31,111,235,0) 62%);
}
.pg-sheen.on{animation:sheen .58s ease-out both}
@keyframes sheen{
  0%{opacity:0;transform:translate3d(-22%,0,0)}
  38%{opacity:1}
  100%{opacity:0;transform:translate3d(22%,0,0)}
}

/* 页底那块「翻页」按钮 */
.flip-row{margin-top:22px}
/* 一页里既有「上一页」又有「下一页」时并排摆(窄屏自动叠起来) */
.flip-row.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.flip-bar{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  padding:13px 16px;
  font:inherit;
  color:var(--text);
  text-align:left;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius);
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease;
}
.flip-bar:hover{border-color:var(--accent);background:var(--accent-soft)}
.flip-txt{display:flex;flex-direction:column;min-width:0}
.flip-k{font-size:12px;color:var(--text-3)}
.flip-v{font-size:15px;font-weight:600}
.flip-a{
  flex:none;
  margin-left:auto;
  font-size:20px;
  line-height:1;
  color:var(--accent);
  transition:transform .18s ease;
}
.flip-bar:hover .flip-a{transform:translateX(4px)}
.flip-bar.back .flip-a{margin-left:0;margin-right:2px}
.flip-bar.back:hover .flip-a{transform:translateX(-4px)}

/* ---------- 看视频(第 3 页) ---------- */
.vchan{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:14px;
  margin-bottom:14px;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.vchan .ico{width:48px;height:48px;border-radius:10px;font-size:15px}
.vchan-txt{flex:1;min-width:0}
.vchan h3{font-size:16px}
/* 账号卡片就三样:名字、一行小字、两个入口 —— 不放介绍段落 */
.vchan .sub{font-size:12px;color:var(--text-3);margin-bottom:10px}
.vchan-links{display:flex;gap:8px;flex-wrap:wrap}
.vlink{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 11px;
  font-size:13px;
  color:var(--text);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.vlink:hover{border-color:var(--accent);text-decoration:none}
.vlink span{font-size:11px;color:var(--text-3)}

.vgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:12px;
}

.vcard{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.vcard:hover{border-color:var(--line-strong)}
.vcard.playing{border-color:var(--accent)}

/* 16:9 的封面位:有真实封面就铺满(裁切居中),没有就退回 --vc 那道纯色渐变 */
.vstage{position:relative;width:100%;padding-top:56.25%;background:#0b1220}
.vcoverimg{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.vcover{
  position:absolute;
  inset:0;
  display:block;
  padding:12px;
  font:inherit;
  color:#fff;
  text-align:left;
  background:linear-gradient(135deg,var(--vc,#1d4ed8) 0%,#0b1220 92%);
  border:0;
  cursor:pointer;
}
.vser{
  position:absolute;
  left:10px;top:10px;
  padding:1px 7px;
  font-size:11px;
  color:#fff;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.35);
  border-radius:4px;
}
.vplay{
  position:absolute;
  left:50%;top:50%;
  width:52px;height:52px;
  margin:-26px 0 0 -26px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.4);
  border:2px solid rgba(255,255,255,.9);
  border-radius:50%;
  transition:transform .18s ease,background .18s ease;
}
.vplay::before{
  content:"";
  width:0;height:0;
  margin-left:4px;
  border-left:16px solid #fff;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
}
.vcover:hover .vplay{transform:scale(1.08);background:rgba(0,0,0,.62)}
/* 底部那行小字压在封面图上,加一道深色渐变压住,不然浅色封面会看不清 */
.vbadge{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:22px 12px 11px;
  font-size:11px;
  color:rgba(255,255,255,.9);
  background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.28) 55%,rgba(0,0,0,0) 100%);
}
/* 播放中的那个:播放器铺满封面位,下面给一个「收起」把资源放掉 */
.vframe{position:absolute;inset:0;width:100%;height:100%;display:block;border:0;background:#000}

/* 全屏播放(点卡片上的「全屏播放」,或播放器自己的全屏键):
   把 16:9 的占位高度让出来,让播放器真的铺满屏幕。
   注意这三条必须分开写 —— 合成一条选择器列表的话,浏览器不认其中一个前缀就会整条丢掉 */
.vstage:fullscreen{width:100%;height:100%;padding-top:0;background:#000}
.vstage:-webkit-full-screen{width:100%;height:100%;padding-top:0;background:#000}
.vstage:-ms-fullscreen{width:100%;height:100%;padding-top:0;background:#000}

.vbody{display:flex;flex-direction:column;gap:7px;padding:11px 12px 12px;flex:1}
.vtitle{font-size:14px;font-weight:600;line-height:1.45}
.vacts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:4px}

/* 视频列表下面那行小字:只放版权声明,一两句就够 */
.v-foot{
  margin:16px 0 0;
  font-size:12px;
  line-height:1.75;
  color:var(--text-3);
}

/* ---------- 短片(第 4 页):本站自己放的 mp4 ---------- */
.cgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(440px,1fr));
  gap:12px;
}

.ccard{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.ccard:hover{border-color:var(--line-strong)}
.ccard.playing{border-color:var(--accent)}

/* 播放区:没播的时候是封面图(视频里的真实一帧),播了就是 <video>。
   刻意不给固定比例 —— 短片可能是 4:3 也可能是 16:9,让素材自己的尺寸撑开,布局不会跳 */
.cstage{position:relative;background:#0b1220;line-height:0}
.ccover{display:block;width:100%;padding:0;background:none;border:0;cursor:pointer;line-height:0}
.cposterimg{display:block;width:100%;height:auto}
.cplay{
  position:absolute;
  left:50%;top:50%;
  width:56px;height:56px;
  margin:-28px 0 0 -28px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.42);
  border:2px solid rgba(255,255,255,.9);
  border-radius:50%;
  transition:transform .18s ease,background .18s ease;
}
.cplay::before{
  content:"";
  width:0;height:0;
  margin-left:4px;
  border-left:17px solid #fff;
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
}
.ccover:hover .cplay{transform:scale(1.08);background:rgba(0,0,0,.62)}
.cvid{display:block;width:100%;height:auto;background:#000}

/* 全屏(和「看视频」那页同一个机制):铺满屏幕,画面按比例居中 */
.cstage:fullscreen{width:100%;height:100%;background:#000}
.cstage:-webkit-full-screen{width:100%;height:100%;background:#000}
.cstage:-ms-fullscreen{width:100%;height:100%;background:#000}
.cstage:fullscreen .cvid{width:100%;height:100%;object-fit:contain}
.cstage:-webkit-full-screen .cvid{width:100%;height:100%;object-fit:contain}
.cstage:-ms-fullscreen .cvid{width:100%;height:100%;object-fit:contain}

.cbody{display:flex;flex-direction:column;gap:8px;padding:11px 12px 12px;flex:1}
.ctitle{font-size:14px;font-weight:600;line-height:1.45}
.cmeta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--text-3)}

/* 分段切换:一部片子切成几段,一段一段看 */
.cparts{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cpart{
  height:26px;
  padding:0 10px;
  font:inherit;font-size:12px;
  color:var(--text-2);
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:999px;
  cursor:pointer;
}
.cpart:hover{color:var(--text);border-color:var(--line-strong)}
.cpart[aria-current="true"]{color:#fff;background:var(--accent);border-color:var(--accent)}

.cacts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:4px}

/* ---------- 响应式 ---------- */
@media (max-width:620px){
  .grid{grid-template-columns:1fr}
  .cgrid{grid-template-columns:1fr}
  .flip-row.pair{grid-template-columns:1fr}
  /* 四个标签 + 「深色」按钮在窄屏放不进一行:让它换行。
     不能靠挤 —— flex 一行装不下时,溢出会跑到左边,第一格会被顶出屏幕外,滚都滚不回来 */
  .bar{height:auto;padding:10px 16px;flex-wrap:wrap}
  .pg-btn{min-width:0;padding:0 9px;font-size:12px}
}/* 窄到一格时,放大卡不再跨格,免得撑破布局 */
@media (max-width:420px){
  .tile.big{grid-column:auto;grid-row:auto;padding:12px;gap:10px}
  .tile.big .ico{width:40px;height:40px;font-size:14px}
  .tile.big .t-name{font-size:16px}
}
/* 再窄一点(小屏手机):五个字的「星球研究所」最占地方,标签再收一收,
   保证一整排标签都留在屏幕里 */
@media (max-width:380px){
  .pg-btn{padding:0 6px;font-size:11px}
}

/* 老浏览器/无网格支持时的兜底 */
@supports not (display:grid){
  .grid{display:block}
  .card{margin-bottom:10px}
  .tiles{display:block}
  .tile{margin-bottom:8px}
}

/* ---------- 评论区 ---------- */
.cm-wrap{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  background:var(--bg);
}

/* ---------- 管理页面板的显隐(2026-09-28 加固) ----------
   背景:管理页出现过「#ad-panel 明明没有 hidden 属性,算出来的 display 却是 none,
   整页一片空白」的情况 —— 全站兜底那条 [hidden]{display:none!important} 是唯一能
   造成这个现象的规则,而当时页面里两个会话在同时改同一个元素,属性一会儿加一会儿摘。

   所以这里给 #ad-panel 一条**只由 hidden 属性说了算**的显隐规则:
     · 带上 hidden 属性 → 隐藏
     · 摘掉 hidden 属性 → 一定显示(#id + !important 的特异性比 [hidden] 高,
       所以不会再出现「属性摘了却还是 none」的自相矛盾)
   管理页的 JS 只负责增删 hidden 属性这一件事,两边不会打架。 */
#ad-panel{display:block!important}
#ad-panel[hidden]{display:none!important}

.cm-form{display:flex;flex-direction:column;gap:8px}
.cm-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.cm-form input[type="text"],
.cm-form textarea{
  padding:7px 10px;
  font:inherit;
  color:var(--text);
  background:var(--bg);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
}
.cm-form input[type="text"]:focus,
.cm-form textarea:focus{border-color:var(--accent)}

.cm-nick{width:220px;max-width:100%}
.cm-text{
  width:100%;
  min-height:68px;
  line-height:1.7;
  resize:vertical;
  display:block;
}

/* 蜜罐:移出视口,人看不见,机器人照样会填 */
.cm-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.cm-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cm-msg{font-size:12px;color:var(--text-3)}
.cm-msg.ok{color:var(--accent)}
.cm-msg.err{color:var(--danger)}

.cm-hint{
  margin:10px 0 0;
  padding:10px 12px;
  font-size:12px;
  line-height:1.7;
  color:var(--warn);
  background:var(--warn-bg);
  border:1px solid var(--warn-line);
  border-radius:var(--radius);
  white-space:pre-wrap;      /* 诊断信息是多行的,要保留换行 */
  word-break:break-word;
}

.cm-list{margin-top:14px}

.cm-item{
  padding:12px 0;
  border-top:1px solid var(--line);
}
.cm-item:first-child{border-top:0}

.cm-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;min-width:0}
.cm-av{
  flex:none;
  width:28px;height:28px;
  border-radius:6px;
  color:#fff;
  font-size:13px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
  background:#5b6470;
}
.cm-meta{display:flex;align-items:baseline;gap:8px;min-width:0;flex-wrap:wrap}
/* 注意:列表里显示昵称的类名是 cm-who,不要和上面输入框的 .cm-nick 混用 */
.cm-who{font-size:13px;color:var(--text);word-break:break-all}

.cm-time{font-size:12px;color:var(--text-3);white-space:nowrap}

.cm-body{
  margin-left:36px;
  font-size:13px;
  line-height:1.75;
  color:var(--text-2);
  white-space:pre-wrap;      /* 保留换行,但不解析 HTML */
  word-break:break-word;
}

.cm-empty{
  margin:14px 0 0;
  padding:16px 0;
  text-align:center;
  font-size:13px;
  color:var(--text-3);
}

.cm-more-row{margin-top:12px;text-align:center}

@media (max-width:620px){
  .cm-nick{width:100%}
  .cm-body{margin-left:0}
}

/* ---------- 评论管理页(/admin.html) ---------- */
/* 顶栏默认右对齐,给标题加 margin-right:auto 把它顶到左边 */
.ad-titlebar{font-size:15px;margin-right:auto}

.ad-intro{margin:0 0 10px}

.ad-key{width:280px;max-width:100%}
.ad-remember{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;cursor:pointer}
.ad-toolbar{margin-bottom:4px}

.ad-item{padding:14px 0;border-top:1px solid var(--line)}
.ad-item:first-child{border-top:0}

.ad-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px;
  margin-bottom:6px;
  font-size:12px;
  color:var(--text-3);
}
.ad-id{
  font-family:Consolas,"Courier New",monospace;
  color:var(--accent);
}
.ad-nick{font-size:13px;color:var(--text);word-break:break-all}
.ad-time{white-space:nowrap}
.ad-page{
  font-family:Consolas,"Courier New",monospace;
  padding:0 5px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--bg-soft);
  word-break:break-all;
}
.ad-badge{
  padding:0 6px;
  line-height:18px;
  border:1px solid var(--warn-line);
  border-radius:4px;
  background:var(--warn-bg);
  color:var(--warn);
}
/* 是回复的话,在管理页上标出它挂在谁下面 */
.ad-parent{
  padding:0 5px;
  line-height:18px;
  border:1px solid var(--accent-soft);
  border-radius:4px;
  background:var(--accent-soft);
  color:var(--accent);
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ---------- 回复分组(管理页) ---------- */
/* 主评论 + 它下面的回复是一整块。回复用左边一条竖线缩进挂进去,
   一眼能看出「谁回复了谁」—— 平铺的列表看不出这个。
   竖线用主题色、底色用 --bg-soft:靠颜色和缩进一起说「这一块是挂在上面那条下面的」,
   只靠一点缩进的话,评论一多就看不出来了。 */
.ad-replies{
  margin:10px 0 0 16px;
  padding:4px 0 4px 12px;
  border-left:3px solid var(--accent-soft);
  background:var(--bg-soft);
  border-radius:0 var(--radius) var(--radius) 0;
}
.ad-item-reply{padding:10px 12px;border-top:1px dashed var(--line)}
.ad-item-reply:first-child{border-top:0;padding-top:8px}
.ad-item-reply .ad-body{font-size:13px;margin-bottom:6px}
/* 回复面积小,按钮别跟着缩 —— 缩了就跟主评论那排不一样大,看着像坏掉了 */
.ad-item-reply .ad-actions .btn.sm{height:26px;line-height:24px;padding:0 9px;font-size:12px}
/* 回复头上的「N 条回复」计数:贴在父评论的勾选框/编号那一行 */
.ad-repcount{
  padding:0 6px;
  line-height:18px;
  border-radius:4px;
  background:var(--accent-soft);
  border:1px solid var(--accent-soft);
  color:var(--accent);
  font-weight:600;
}

/* ---------- 批量管理 ---------- */
.ad-batch{
  margin:10px 0 4px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg-soft);
}
.ad-pick-all{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:13px;
  cursor:pointer;
  white-space:nowrap;
}
/* 每行前面的勾选框 */
.ad-pick{
  flex:none;
  width:15px;
  height:15px;
  margin:0 2px 0 0;
  cursor:pointer;
}

/* ---------- 顶栏右侧的「设置」大面板(性能模式 + 两个入口) ---------- */
/* 位置:顶栏那块胶囊右边,「深色」再往左一格;点开就在顶栏右下角展开。
   不起眼,但找得到。注意:评论管理那条网址里不带密钥 —— 密钥在管理页里粘贴。 */
.set-menu{
  position:absolute;
  right:16px;
  top:calc(100% - 6px);
  z-index:40;                     /* 低于 .modal(50)/.tip(60)/.mwarn(70):任何弹层都能盖住它 */
  display:flex;
  flex-direction:column;
  gap:4px;
  width:min(560px, calc(100vw - 32px));
  /* 面板变高之后要自己管住高度:屏幕矮(手机横屏 / 小窗口)时在面板里滚,
     不能让它长到视口外面 —— 顶栏是 sticky 的,长出去的部分够都够不着 */
  max-height:calc(100vh - 96px);
  overflow:auto;
  padding:14px;
  background:var(--bg);
  border:1px solid var(--line-strong);
  border-radius:12px;
}
.set-h{
  margin:2px 0 4px;
  font-size:12px;
  font-weight:600;
  color:var(--text-3);
}
/* 三档模式并排,窄屏自动竖过来 */
.set-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px}
.set-mode{
  display:block;
  width:100%;
  padding:10px;
  font:inherit;
  font-size:13px;
  color:var(--text);
  text-align:left;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius);
  cursor:pointer;
}
.set-mode:hover{border-color:var(--line-strong)}
.set-mode.on{border-color:var(--accent);background:var(--accent-soft)}
.set-tag{
  margin-left:6px;
  padding:0 5px;
  font-size:10px;
  font-weight:400;
  color:var(--accent);
  border:1px solid var(--accent);
  border-radius:999px;
}
.set-note{
  margin:0 0 10px;
  padding:8px 10px;
  font-size:12px;
  line-height:1.7;
  color:var(--text-2);
  background:var(--bg-soft);
  border-radius:var(--radius);
}
.set-item{
  display:block;
  width:100%;
  padding:8px 10px;
  font:inherit;
  font-size:13px;
  color:var(--text);
  text-align:left;
  background:none;
  border:0;
  border-radius:var(--radius);
  cursor:pointer;
}
.set-item:hover{background:var(--accent-soft)}
.set-k{display:block;font-weight:600}
.set-v{display:block;margin-top:2px;font-size:11px;color:var(--text-3)}

/* ---------- 切到「流畅」前的提示(和 .tip 同一套做法,只是文案是固定的) ---------- */
.mwarn{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:20px}
.mwarn-mask{position:absolute;inset:0;background:rgba(15,23,42,.5)}
.mwarn-box{
  position:relative;
  width:100%;
  max-width:460px;
  max-height:calc(100vh - 40px);
  overflow:auto;
  padding:18px;
  background:var(--bg);
  border:1px solid var(--line-strong);
  border-radius:12px;
}
.mwarn-box h3{margin:0 0 10px;font-size:17px}
.mwarn-text{margin:0 0 10px;font-size:13px;line-height:1.8;color:var(--text-2)}
.mwarn-key{
  margin:0 0 14px;
  padding:10px 12px;
  font-size:13px;
  line-height:1.8;
  color:var(--text);
  background:var(--accent-soft);
  border-radius:var(--radius);
}
.mwarn-key kbd{
  padding:1px 5px;
  font-family:inherit;
  font-size:12px;
  background:var(--bg);
  border:1px solid var(--line-strong);
  border-radius:4px;
}
.mwarn-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

/* ---------- 管理页的诊断区 ---------- */
/* 刻意放在登录框外面:万一进不去管理面板,诊断按钮照样点得到 */
.ad-diagbar{margin:12px 0 0}
.ad-diagout{
  width:100%;
  margin-top:8px;
  font-family:Consolas,"Courier New",monospace;
  font-size:12px;
  line-height:1.6;
  white-space:pre;
}

/* 评论列表容器:现在只用来挂行,不需要额外样式,但留个钩子方便以后改 */
.ad-list{display:block}

.ad-body{
  margin:0 0 10px;
  font-size:13px;
  line-height:1.75;
  color:var(--text-2);
  white-space:pre-wrap;      /* 保留换行,但不解析 HTML */
  word-break:break-word;
}

.ad-actions{display:flex;gap:8px;flex-wrap:wrap}

.btn.danger{border-color:var(--danger-line);color:var(--danger)}
.btn.danger:hover{border-color:var(--danger);color:var(--danger);text-decoration:none}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:disabled:hover{border-color:var(--line-strong);color:var(--text)}

@media (max-width:620px){
  .ad-key{width:100%}
}

/* ---------- 回复 ---------- */
/* 「回复」按钮:平时很不起眼,鼠标移上去才变成链接的样子 */
.cm-foot{display:flex;gap:10px;margin:6px 0 0 36px}
.cm-reply-btn{
  padding:0;
  font:inherit;
  font-size:12px;
  color:var(--text-3);
  background:none;
  border:0;
  cursor:pointer;
}
.cm-reply-btn:hover{color:var(--accent);text-decoration:underline}

/* 「删除」按钮:只出现在自己发的那几条下面(别人的评论上根本没有这个按钮)。
   平时和「回复」一样不起眼,鼠标移上去变红 —— 它不可逆,该有点警告色 */
.cm-del-btn{
  padding:0;
  font:inherit;
  font-size:12px;
  color:var(--text-3);
  background:none;
  border:0;
  cursor:pointer;
}
.cm-del-btn:hover{color:var(--danger);text-decoration:underline}
.cm-del-btn:disabled{opacity:.45;cursor:not-allowed;text-decoration:none}

/* ---------- 回复折叠区(抖音那种:默认收着,点一下展开) ---------- */
/* 折叠按钮做成「链接」的样子而不是小按钮:一屏评论里全是按钮太吵,
   一句话「展开 3 条回复」正好能说清里面有多少东西 */
.cm-fold{
  padding:0;
  font:inherit;
  font-size:12px;
  color:var(--accent);
  background:none;
  border:0;
  cursor:pointer;
}
.cm-fold:hover{text-decoration:underline}

/* 回复列表:靠一条竖线缩进,一眼能看出是从属关系 */
.cm-replies{margin:8px 0 0 36px}
.cm-replies:empty{display:none}
/* 折叠区:没展开时整块不占地方(按钮本身在 .cm-thread 里) */
.cm-thread{margin-top:6px}
.cm-thread .cm-fold{margin-left:36px}

/* 「回复 @某人:」那半句。用主题色点出来,正文还是正文色 */
.cm-at{color:var(--accent);font-weight:600}

.cm-reply{
  padding:10px 0 10px 12px;
  margin-bottom:2px;
  border-left:2px solid var(--line);
}
.cm-reply .cm-head{margin-bottom:4px}
.cm-reply .cm-av{width:22px;height:22px;border-radius:5px;font-size:11px}
.cm-reply .cm-body{margin-left:30px;font-size:13px}
/* 回复里的「回复」按钮跟着缩进,别缩到竖线左边去 */
.cm-reply .cm-foot{margin-left:30px}

/* 回复表单:点「回复」才出现 */
.cm-reply-form{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:10px 0 0;
  padding:10px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg-soft);
}
.cm-reply-form .cm-nick{width:160px}
.cm-reply-form textarea{min-height:52px}

@media (max-width:620px){
  .cm-foot{margin-left:0}
  .cm-replies{margin-left:14px}
  .cm-thread .cm-fold{margin-left:0}
  .cm-reply .cm-foot{margin-left:0}
  .cm-reply-form .cm-nick{width:100%}
}

/* ---------- 翻页动画的两条「省电」捷径 ---------- */
/* ① 系统里开了「减少动态效果」:一律不做动画,翻页直接换 */
@media (prefers-reduced-motion: reduce){
  .page,.pg-pill,.flip-bar,.flip-a,.vplay,.vcover{transition:none!important}
  .page.stagger .grid>*,
  .page.stagger .tiles>*,
  .page.stagger .vgrid>*{animation:none!important}
  .pg-sheen{display:none}
}

/* ② 机器太弱(逻辑核心 ≤ 2 或内存 ≤ 4G):动画做短一点、卡片不再错峰出场。
     这个标记由 app.js 打开页面时写上去,只在真翻页时用得到 */
html[data-lowpower="1"] .page{transition:transform .24s ease-out,opacity .18s ease}
html[data-lowpower="1"] .page.anim{will-change:auto}
html[data-lowpower="1"] .page.stagger .grid>*,
html[data-lowpower="1"] .page.stagger .tiles>*,
html[data-lowpower="1"] .page.stagger .vgrid>*{animation:none!important}
html[data-lowpower="1"] .pg-sheen{display:none}

/* ============================================================
   性能模式(顶栏「设置」里选):标准 / 高性能 / 流畅
   三档都只切 <html> 上的一个属性 data-perf,JS(见 app.js 的 applyMode)只负责切属性:
     · 标准  —— 不写属性,就是上面那整套:纯色 + 1px 边框,动画只动 transform / opacity
     · 高性能 —— 全局液态玻璃(backdrop-filter 模糊 + 半透明 + 高光边 + 背景色块)+ 更长的翻页动效,
                 明确更吃显卡,所以只在用户主动选它时才生效
     · 流畅  —— 只留第 1 页:顶栏标签 / 页底翻页条 / 扫光 / 错峰 / 翻页过渡全部关掉
   注意:上面「减少动态效果」那条 !important 的捷径依然优先 —— 系统说了不算动效,这里也不会动
   ============================================================ */

/* ---------- 高性能:全局液态玻璃 ---------- */
html[data-perf="high"]{
  --glass:blur(18px) saturate(180%);
  --glass-dark:brightness(.86) blur(18px) saturate(160%);
  --glass-shadow:0 12px 34px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.75);
  --page:#eef2f8;                       /* 玻璃后面那层底色(玻璃要有点东西可模糊才好看) */
  --bg:rgba(255,255,255,.62);
  --bg-soft:rgba(255,255,255,.46);
  --line:rgba(255,255,255,.60);
  --line-strong:rgba(255,255,255,.85);
  --accent-soft:rgba(31,111,235,.14);
}
html[data-perf="high"][data-theme="dark"]{
  --glass-shadow:0 12px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14);
  --page:#0c0f13;
  --bg:rgba(30,34,40,.60);
  --bg-soft:rgba(38,43,50,.46);
  --line:rgba(255,255,255,.16);
  --line-strong:rgba(255,255,255,.28);
  --accent-soft:rgba(76,141,255,.18);
}
@media (prefers-color-scheme: dark){
  html[data-perf="high"]:not([data-theme="light"]){
    --glass-shadow:0 12px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14);
    --page:#0c0f13;
    --bg:rgba(30,34,40,.60);
    --bg-soft:rgba(38,43,50,.46);
    --line:rgba(255,255,255,.16);
    --line-strong:rgba(255,255,255,.28);
    --accent-soft:rgba(76,141,255,.18);
  }
}
/* 底色画在 <html> 上,body 透明;两块色斑用 html 的伪元素挂在所有内容后面(z-index:-1),
   玻璃卡片就能把它们糊成一片 —— 这就是「液态玻璃」看得见的部分 */
html[data-perf="high"]{background:var(--page)}
html[data-perf="high"] body{background:transparent}
html[data-perf="high"]::before,
html[data-perf="high"]::after{
  content:"";
  position:fixed;
  inset:-25vmax;
  z-index:-1;
  pointer-events:none;
}
html[data-perf="high"]::before{
  background:
    radial-gradient(26vmax 20vmax at 18% 20%, rgba(96,156,255,.40), transparent 62%),
    radial-gradient(24vmax 18vmax at 80% 14%, rgba(168,120,255,.34), transparent 64%),
    radial-gradient(28vmax 22vmax at 62% 84%, rgba(64,200,168,.28), transparent 66%);
  animation:drift1 26s ease-in-out infinite alternate;
}
html[data-perf="high"]::after{
  background:
    radial-gradient(22vmax 18vmax at 28% 72%, rgba(255,182,120,.24), transparent 64%),
    radial-gradient(20vmax 16vmax at 88% 62%, rgba(120,200,255,.28), transparent 64%);
  animation:drift2 34s ease-in-out infinite alternate;
}
html[data-perf="high"][data-theme="dark"]::before,
html[data-perf="high"][data-theme="dark"]::after{opacity:.6}
@media (prefers-color-scheme: dark){
  html[data-perf="high"]:not([data-theme="light"])::before,
  html[data-perf="high"]:not([data-theme="light"])::after{opacity:.6}
}

/* 玻璃本体:一条规则把所有「面」都盖上模糊 + 高光边 + 柔和投影 */
html[data-perf="high"] .top,
html[data-perf="high"] .card,
html[data-perf="high"] .cat-card,
html[data-perf="high"] .tile,
html[data-perf="high"] .vcard,
html[data-perf="high"] .ccard,
html[data-perf="high"] .cm-wrap,
html[data-perf="high"] .cm-item,
html[data-perf="high"] .cm-reply,
html[data-perf="high"] .flip-bar,
html[data-perf="high"] .pager,
html[data-perf="high"] .set-menu,
html[data-perf="high"] .modal-box,
html[data-perf="high"] .tip-box,
html[data-perf="high"] .mwarn-box,
html[data-perf="high"] .chip,
html[data-perf="high"] .btn,
html[data-perf="high"] .guide-link{
  -webkit-backdrop-filter:var(--glass);
  backdrop-filter:var(--glass);
  box-shadow:var(--glass-shadow);
}
/* 药丸:玻璃高光 + 回弹更明显的那一下滑 */
html[data-perf="high"] .pg-pill{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.74));
  box-shadow:0 2px 10px rgba(15,23,42,.18), inset 0 1px 0 #fff;
  transition:transform .44s cubic-bezier(.34,1.4,.4,1);
}
html[data-perf="high"][data-theme="dark"] .pg-pill{
  background:linear-gradient(180deg,rgba(88,96,108,.95),rgba(60,66,76,.9));
  box-shadow:0 2px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.22);
}
@media (prefers-color-scheme: dark){
  html[data-perf="high"]:not([data-theme="light"]) .pg-pill{
    background:linear-gradient(180deg,rgba(88,96,108,.95),rgba(60,66,76,.9));
    box-shadow:0 2px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.22);
  }
}
/* 卡片悬停浮起来一点(只有 transform / box-shadow,不触发重排) */
html[data-perf="high"] .card,
html[data-perf="high"] .cat-card,
html[data-perf="high"] .tile,
html[data-perf="high"] .vcard,
html[data-perf="high"] .ccard{
  transition:transform .26s cubic-bezier(.2,.8,.25,1),box-shadow .26s ease,border-color .18s ease,background .18s ease;
}
html[data-perf="high"] .card:hover,
html[data-perf="high"] .cat-card:hover,
html[data-perf="high"] .tile:hover,
html[data-perf="high"] .vcard:hover,
html[data-perf="high"] .ccard:hover{transform:translate3d(0,-4px,0)}
/* 翻页:转得更深、更长、带一点回弹;扫光更亮 */
html[data-perf="high"] .page{transition:transform .62s cubic-bezier(.2,.85,.25,1),opacity .48s ease}
html[data-perf="high"] .page.out-left{transform:perspective(1600px) translate3d(-56px,0,0) rotateY(7deg) scale(.972)}
html[data-perf="high"] .page.out-right{transform:perspective(1600px) translate3d(56px,0,0) rotateY(-7deg) scale(.972)}
html[data-perf="high"] .page.pre-right{transform:perspective(1600px) translate3d(56px,0,0) rotateY(-7deg) scale(.972)}
html[data-perf="high"] .page.pre-left{transform:perspective(1600px) translate3d(-56px,0,0) rotateY(7deg) scale(.972)}
html[data-perf="high"] .pg-sheen{
  background:linear-gradient(105deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.5) 48%,rgba(140,180,255,.3) 56%,rgba(255,255,255,0) 68%);
}
html[data-perf="high"] .pg-sheen.on{animation:sheenHi .82s cubic-bezier(.2,.8,.25,1) both}
/* 卡片出场:浮得更远、还带一点放大 */
html[data-perf="high"] .page.stagger .grid>*,
html[data-perf="high"] .page.stagger .tiles>*,
html[data-perf="high"] .page.stagger .vgrid>*,
html[data-perf="high"] .page.stagger .cgrid>*{animation:cardInHi .52s cubic-bezier(.2,.85,.25,1) both}

@keyframes drift1{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(4%,-5%,0) scale(1.08)}
}
@keyframes drift2{
  from{transform:translate3d(0,0,0) scale(1.04)}
  to{transform:translate3d(-5%,4%,0) scale(1)}
}
@keyframes sheenHi{
  0%{opacity:0;transform:translate3d(-26%,0,0) scale(1.02)}
  35%{opacity:1}
  100%{opacity:0;transform:translate3d(26%,0,0) scale(1.02)}
}
@keyframes cardInHi{
  from{opacity:0;transform:translate3d(0,18px,0) scale(.965)}
  to{opacity:1;transform:none}
}

/* ---------- 流畅:只留第 1 页,其余入口与动效全关 ---------- */
html[data-perf="lite"] .pager,
html[data-perf="lite"] .flip-row{display:none}
html[data-perf="lite"] .page{transition:none}
html[data-perf="lite"] .page.stagger .grid>*,
html[data-perf="lite"] .page.stagger .tiles>*,
html[data-perf="lite"] .page.stagger .vgrid>*,
html[data-perf="lite"] .page.stagger .cgrid>*{animation:none!important}
html[data-perf="lite"] .pg-sheen{display:none}
/* 窄屏:三档模式卡竖过来摆,免得挤成一团 */
@media (max-width:620px){
  .set-modes{grid-template-columns:1fr}
  .set-menu{padding:12px}
}

/* ============================================================
   第 1 页:分类长方形(2×1)+ 点开后的毛玻璃聚焦
   —— 同一类的软件收进一个长方形:上面写分类名,旁边把这一类软件的
      真实图标一层一层叠起来(最多 5 个,再多写 +N)。
   —— 点它:除它以外的一切(顶栏 / 别的分类 / 快捷入口 / 页脚)被
      #cat-veil 那层玻璃糊住,长方形自己长成 #cat-panel 把这一类铺开。
   —— 长方形和面板头部共用同一套结构(.cat-stack + .cat-txt + .cat-acts),
      面板的起始位置就是被点那块的位置、头部高度也对得齐齐的,
      所以看上去就是「那一块自己变大了」,不是另开一个弹窗。
   —— 补间时长只写一个地方:面板上的 --cat-t。JS 只改这一个数,
      面板和头部就一起换时长;--cat-t 相关的那几条都靠它。
   —— 整块放在样式表最后:第 1 页的网格 .catgrid 和 .grid 同特异度,
      靠「后面那条赢」压过 .grid 的 auto-fill 列数(见 index.html 的注释)。
   ============================================================ */
:root{--cat-h:118px}   /* 分类长方形的高度(面板头部与它对齐,差的 2px 是边框) */

.catgrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));   /* 一个分类占 2 格宽 × 1 行高 = 2×1 */
  gap:12px;
}
.cat-card{
  grid-column:span 2;
  position:relative;
  display:flex;align-items:center;gap:12px;
  height:var(--cat-h);
  padding:0 16px;
  font:inherit;text-align:left;
  color:var(--text);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:12px;
  cursor:pointer;
  overflow:hidden;
  transition:border-color .18s ease,background .18s ease;
}
.cat-card:hover{border-color:var(--accent);background:var(--bg-soft)}
.cat-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* 被点开的那一块先藏起来:面板从它那儿长出来、严丝合缝地盖住它,收回去时再露出来 */
body.cat-focus .cat-card.cat-src{visibility:hidden}

/* 图标叠层:一层压一层(左边那张在最上面),悬停 / 展开时轻轻散开 */
.cat-stack{display:flex;align-items:center;flex:none}
.cs-ico{
  width:40px;height:40px;flex:none;
  display:flex;align-items:center;justify-content:center;
  margin-left:-15px;
  border-radius:10px;
  border:2px solid var(--bg);
  background:var(--bg);
  color:#fff;font-size:12px;font-weight:600;letter-spacing:.5px;
  overflow:hidden;
  box-shadow:0 2px 7px rgba(15,23,42,.18);
  transform:rotate(var(--r,0deg));
  transition:margin-left .26s cubic-bezier(.2,.8,.25,1);
}
.cat-stack .cs-ico:first-child{margin-left:0}
.cs-ico img{display:block;width:100%;height:100%;border-radius:inherit}
.cat-card:hover .cs-ico,.cat-panel.open .cs-ico{margin-left:-7px}
.cs-more{
  flex:none;
  height:40px;line-height:36px;
  margin-left:-13px;
  padding:0 8px;
  border-radius:10px;
  border:2px solid var(--bg);
  background:var(--bg-soft);
  color:var(--text-2);
  font-size:12px;font-weight:600;
}

.cat-txt{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:3px}
.cat-name{
  font-size:16px;font-weight:600;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:font-size var(--cat-t,400ms) cubic-bezier(.2,.8,.25,1);
}
.cat-panel.open .cat-name{font-size:19px}
/* 分类卡片上那行文案(文案在 data.js 的 CAT_BLURB 里):窄的时候最多两行,再长就省略,
   不去挤右边的箭头和左边的图标 */
.cat-note{
  font-size:12px;line-height:1.4;color:var(--text-3);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
}
.cat-note-k{color:var(--text-2)}
.cat-note-v{color:var(--text-3)}   /* 破折号后面那句解释:比前面那半句再淡一点 */

/* 右边那个动作位:长方形里是「→」,展开后面板里换成「×」,两个叠在同一格上 */
.cat-acts{position:relative;flex:none;width:30px;height:30px}
.cat-go,.cat-x{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  border:0;border-radius:8px;
  background:none;
  color:var(--text-3);
  font:inherit;font-size:17px;line-height:1;
  transition:opacity .22s ease,transform .22s ease,background .18s ease,color .18s ease;
}
.cat-card:hover .cat-go{transform:translateX(4px);color:var(--accent)}
.cat-x{cursor:pointer;opacity:0;pointer-events:none;font-size:20px}
.cat-x:hover{background:var(--bg-soft);color:var(--text)}
.cat-panel.open .cat-go{opacity:0}
.cat-panel.open .cat-x{opacity:1;pointer-events:auto}

/* ---------- 糊住整页的那层玻璃 ---------- */
/* 它盖在顶栏(10)和扫光(40)上面,又在所有弹层(50/60/70/80)下面:
   面板里点「详情」时,详情弹层照旧盖在玻璃上面,不会被糊掉 */
.cat-veil{
  position:fixed;inset:0;z-index:45;
  background:rgba(246,247,249,.20);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  opacity:0;
  transition:opacity .34s ease;
}
.cat-veil.on{opacity:1}
html[data-theme="dark"] .cat-veil{background:rgba(8,10,13,.34)}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .cat-veil{background:rgba(8,10,13,.34)}
}
/* 高性能那档本来就是玻璃:糊得更狠一点。
   流畅那档不是「糊轻一点」而是**整层不做模糊**,见下面流畅那一段 */
html[data-perf="high"] .cat-veil{
  -webkit-backdrop-filter:blur(26px) saturate(185%);
  backdrop-filter:blur(26px) saturate(185%);
}
/* 机器太弱(逻辑核心 ≤ 2 或内存 ≤ 4G,app.js 打开页面时会标上 data-lowpower):
   整屏模糊挺吃显卡,糊轻一点,补间也短一点(见下面 .cat-panel 的 --cat-t) */
html[data-lowpower="1"] .cat-veil{
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
/* 浏览器不认 backdrop-filter(Iceweasel / 老 Safari 之类):改成把内容自己糊掉 */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .cat-veil{background:rgba(246,247,249,.55)}
  html[data-theme="dark"] .cat-veil{background:rgba(8,10,13,.6)}
  @media (prefers-color-scheme:dark){
    html:not([data-theme="light"]) .cat-veil{background:rgba(8,10,13,.6)}
  }
  body.cat-focus .top,
  body.cat-focus #stage{filter:blur(9px);transition:filter .3s ease}
}
/* 开着的时候页面不许滚:面板是 fixed 的,底下的页一滚就对不上了 */
body.cat-focus{overflow:hidden}

/* 摆起始位置 / 量尺寸的那一小段:面板和它里面的一切都一个补间都不许有。
   不加这条的话,catTarget() 为了量高度会临时挂一下 .open,头部和软件区会各自动起来,
   等真的开始长的时候它们还停在半路 —— 起点就对不上被点的那块长方形了 */
.cat-panel.no-anim,
.cat-panel.no-anim *{transition:none!important;animation:none!important}

/* ---------- 从长方形里长出来的面板 ---------- */
.cat-panel{
  --cat-t:400ms;
  position:fixed;z-index:46;
  display:flex;flex-direction:column;
  overflow:hidden;
  background:var(--bg);
  border:1px solid var(--line-strong);
  border-radius:12px;
  box-shadow:0 24px 60px rgba(15,23,42,.22),0 4px 14px rgba(15,23,42,.10);
  transition:left var(--cat-t) cubic-bezier(.2,.8,.25,1),
             top var(--cat-t) cubic-bezier(.2,.8,.25,1),
             width var(--cat-t) cubic-bezier(.2,.8,.25,1),
             height var(--cat-t) cubic-bezier(.2,.8,.25,1),
             box-shadow .3s ease;
}
/* 头部:未展开时高度 = 长方形高度,铺满整个面板 —— 所以起始那一帧和长方形一模一样 */
.cat-head{
  flex:none;
  display:flex;align-items:center;gap:12px;
  height:calc(var(--cat-h) - 2px);
  padding:0 16px;
  border-bottom:1px solid transparent;
  transition:height var(--cat-t) cubic-bezier(.2,.8,.25,1),
             border-color .3s ease;
}
.cat-panel.open .cat-head{height:78px;border-bottom-color:var(--line)}
.cat-body{
  flex:1 1 auto;min-height:0;
  overflow:auto;
  overscroll-behavior:contain;   /* 软件多的时候滚到底,别把滚动传给底下的页面 */
  padding:0 16px 16px;
  opacity:0;transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease;
  -webkit-overflow-scrolling:touch;
}
/* 软件等面板快长到位了再淡进来,免得补间那会儿看着一堆卡片在抖 */
.cat-panel.open .cat-body{
  opacity:1;transform:none;
  transition-delay:calc(var(--cat-t) * .84);
}
.cat-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:10px;
  padding-top:14px;
}
/* 面板里那些详情按钮 / 下载按钮的位置和以前一样,样式直接用 .card 那一套 */

/* ---------- 三档性能模式下的微调 ---------- */
/* 高性能:分类面板也归「要读字的面」那一类,由样式表末尾那条统一规则改成实心
   (--bg / --bg-soft 就地换实心 + 关掉面板里的 backdrop-filter),这里不用再写 */
/* 低配机器:补间短一点(时长还是 JS 写进 --cat-t 的那一个,这里只管低配的默认值) */
html[data-lowpower="1"] .cat-panel{--cat-t:220ms}

/* ---------- 窄屏 ---------- */
@media (max-width:999px){
  .catgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat-card{grid-column:span 1;gap:10px;padding:0 13px}
  .cs-ico{width:36px;height:36px;margin-left:-13px}
  .cs-more{height:36px;line-height:32px;margin-left:-11px}
  .cat-card:hover .cs-ico,.cat-panel.open .cs-ico{margin-left:-6px}
}
@media (max-width:620px){
  :root{--cat-h:104px}
  .catgrid{grid-template-columns:1fr}
  .cat-card{grid-column:auto}
  .cat-panel.open .cat-head{height:70px}
  .cat-body{padding:0 12px 12px}
  .cat-cards{grid-template-columns:1fr;padding-top:12px}
}
/* 老浏览器(没有网格):一列铺开,别挤成一条 */
@supports not (display:grid){
  .catgrid{display:block}
  .cat-card{display:flex;margin-bottom:10px}
}
/* 系统开了「减少动态效果」:不补间,直接到位(JS 那边也会把时长算成 0) */
@media (prefers-reduced-motion: reduce){
  .cat-panel,.cat-head,.cat-body,.cat-name,.cat-veil,.cs-ico,.cat-go,.cat-x{transition:none!important}
}

/* ---------- 收回的那一段:面板和玻璃都不吃点击 ----------
   收回的补间虽然只有 260ms,但用户很可能刚关掉就想开另一个。
   这两条一挂,底下的分类长方形**立刻**就能点(不用等补间走完),
   点下去走的是 openCat 的「打断续开」那条路 —— 面板从当前位置接着长,不重建。 */
.cat-veil.cat-closing,
.cat-panel.cat-closing{pointer-events:none}

/* ============================================================
   ★ 流畅档:分类这套「消耗性能的效果」一样都不要
   —— 功能留着(点长方形 → 面板出现,点外面 → 收回),但**效果全关**:
     · 挡板不做毛玻璃(backdrop-filter 是这堆效果里最贵的一条:整屏模糊,
       而且面板一动就得重算一遍)→ 换成一块实打实的半透明挡板,只是「挡住 + 压暗」
     · 面板 / 头部 / 内容区 / 图标 …… 一个补间都不做(JS 那边 catDur() 也返回 0,
       所以点下去当场就是展开态,连一帧都不等)
     · 大投影、图标的投影、悬停时图标散开 —— 全部去掉
   —— **标准 / 高性能两档一点都不受影响**,那段规则只管 data-perf="lite"。 */
html[data-perf="lite"] .cat-veil{
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  transition:none;
  background:rgba(238,241,246,.86);     /* 不模糊,就用一层厚一点的板挡住 */
}
html[data-perf="lite"][data-theme="dark"] .cat-veil{background:rgba(10,12,15,.80)}
@media (prefers-color-scheme: dark){
  html[data-perf="lite"]:not([data-theme="light"]) .cat-veil{background:rgba(10,12,15,.80)}
}
html[data-perf="lite"] .cat-panel,
html[data-perf="lite"] .cat-head,
html[data-perf="lite"] .cat-body,
html[data-perf="lite"] .cat-name,
html[data-perf="lite"] .cs-ico,
html[data-perf="lite"] .cat-go,
html[data-perf="lite"] .cat-x{transition:none!important}
html[data-perf="lite"] .cat-panel{box-shadow:0 2px 10px rgba(15,23,42,.16)}
html[data-perf="lite"] .cs-ico{box-shadow:none}
/* 悬停 / 展开时那一叠图标本来会轻轻散开 —— 这一档不动它 */
html[data-perf="lite"] .cat-card:hover .cs-ico,
html[data-perf="lite"] .cat-panel.open .cs-ico{margin-left:-15px}
@media (max-width:999px){
  html[data-perf="lite"] .cat-card:hover .cs-ico,
  html[data-perf="lite"] .cat-panel.open .cs-ico{margin-left:-13px}
}

/* ---------- 面板里的「快捷入口」格子 ----------
   和软件卡是同一套分类,只是面板里铺的东西不一样(.cat-tiles 里放 .tile) */
.cat-tiles{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:8px;
  padding-top:14px;
}
/* 面板里一律是同样大小的小格子:Poki 那个 big 只在平铺时才放大 */
.cat-tiles .tile.big{
  grid-column:auto;grid-row:auto;
  padding:9px 10px;gap:9px;
  background:var(--bg);border-color:var(--line);
}
.cat-tiles .tile.big .ico{width:28px;height:28px;border-radius:6px;font-size:11px}
.cat-tiles .tile.big .t-name{font-size:13px}
@media (max-width:620px){
  .cat-tiles{grid-template-columns:1fr;padding-top:12px}
}

/* ============================================================
   全站不让选中 / 复制 —— 只有评论区(和几处「本来就是给人抄走」的地方)例外
   · html 上一刀切掉选择(-webkit-touch-callout 顺手把 iOS 长按菜单也收掉)
   · 输入框 / 可编辑区自己放开:user-select:none 会连输入框里选字都拦掉
   · 评论区整块放开:那是用户自己发的内容,该能选、该能复制
   · DSH 教程里的命令行(.g-cmd)、详情里的完整网址(.jump)也放开 ——
     教程靠「整行复制」才能用,锁掉了等于把功能弄坏
   想改成「一律不给复制」:把下面第二个例外块删掉,再去 app.js 删掉那个 copy 拦截。
   ⚠️ 管理页共用这份样式:它的诊断报告是 textarea、评论列表在 .cm-wrap 里,
      两边都落在例外里,所以「复制诊断结果」照旧能用。 */
html{
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
  -webkit-touch-callout:none;
}
img,a{-webkit-user-drag:none}

input,textarea,[contenteditable],
.cm-wrap,.cm-wrap *{
  -webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;
}
.g-cmd,.jump,.jump *{
  -webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;
}

/* ============================================================
   高性能那档:设置面板和各种弹层是「要读字的面」,一律**实心,一点不透**
   —— 高性能下全局的 --bg / --bg-soft 是 62% / 46% 的半透明白,底下那两块漂移色斑
      会整个透上来。光把面板底色压到 88% 不够:面板里面那三档模式卡、说明条、
      表格用的还是 --bg-soft(46%),看着照样是「透」的。
   —— 所以做法不是逐个元素写死颜色,而是**把这些 token 就地换成实心的**:
      面板内部所有用 var(--bg) / var(--bg-soft) / var(--line) 的东西会一起变实,
      不用一个个去改。要调色就改下面这一组值。
   —— 同时把面板内部的 backdrop-filter 全部关掉(底都实心了,模糊只会白烧显卡)。
   ⚠️ 别改回半透明:字压在花花的色斑上很难看,这是明确定过的。
   ============================================================ */
html[data-perf="high"] .set-menu,
html[data-perf="high"] .cat-panel,
html[data-perf="high"] .modal-box,
html[data-perf="high"] .tip-box,
html[data-perf="high"] .mwarn-box{
  --bg:#ffffff;
  --bg-soft:#f1f3f7;
  --line:rgba(15,23,42,.12);
  --line-strong:rgba(15,23,42,.22);
  --accent-soft:rgba(31,111,235,.12);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:0 18px 44px rgba(15,23,42,.22),0 2px 8px rgba(15,23,42,.10);
}
html[data-perf="high"][data-theme="dark"] .set-menu,
html[data-perf="high"][data-theme="dark"] .cat-panel,
html[data-perf="high"][data-theme="dark"] .modal-box,
html[data-perf="high"][data-theme="dark"] .tip-box,
html[data-perf="high"][data-theme="dark"] .mwarn-box{
  --bg:#1c2026;
  --bg-soft:#252b33;
  --line:rgba(255,255,255,.14);
  --line-strong:rgba(255,255,255,.26);
  --accent-soft:rgba(76,141,255,.20);
  box-shadow:0 18px 44px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.28);
}
@media (prefers-color-scheme: dark){
  html[data-perf="high"]:not([data-theme="light"]) .set-menu,
  html[data-perf="high"]:not([data-theme="light"]) .cat-panel,
  html[data-perf="high"]:not([data-theme="light"]) .modal-box,
  html[data-perf="high"]:not([data-theme="light"]) .tip-box,
  html[data-perf="high"]:not([data-theme="light"]) .mwarn-box{
    --bg:#1c2026;
    --bg-soft:#252b33;
    --line:rgba(255,255,255,.14);
    --line-strong:rgba(255,255,255,.26);
    --accent-soft:rgba(76,141,255,.20);
    box-shadow:0 18px 44px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.28);
  }
}
/* 实心面板里的东西一律不要再磨砂(底都实了,模糊只是白烧显卡) */
html[data-perf="high"] .set-menu *,
html[data-perf="high"] .cat-panel *,
html[data-perf="high"] .modal-box *,
html[data-perf="high"] .tip-box *,
html[data-perf="high"] .mwarn-box *{
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}