/* ============================================================================
   9flash · Aero 主题层  (Windows Vista / Windows 7 Aero + 2007-2012 互联网)
   ============================================================================
   用法：本文件在 assets/style.css 之后加载，只覆盖视觉，不改类名、不改结构。
   同一套类名体系在 public/assets/ 下可原样复用（迁移时整体复制即可）。

   ── 美术方向（Art Direction）────────────────────────────────────────────
   光源：来自左上方约 11 点钟方向的冷白光，右侧有极光带来的紫/品红环境色。
   阴影：一律是偏冷的深蓝（rgba(8,30,60,.x)），不用纯黑。
   景深：四层 —— 壁纸(最远) → 环境光晕(远) → 玻璃窗口/卡片(中) → 悬浮元素(近)。

   ── 玻璃分级（不同组件不同透明度与模糊，绝不统一）──────────────────────
   L0 壁纸         无玻璃
   L1 窗口 .container      白 .36 · 无 blur（背景本身即柔和渐变，省性能）
   L2 工具板 .toolbar      白 .82 · 无 blur（滚动流里用 backdrop-filter 代价太高）
   L3 卡片 .card           白 .74 · 无 blur（保证可读性与性能）
   L4 按钮/输入            白 .82 / 蓝色渐变 · 高光最强
   DK 任务栏 .header       深蓝 .90 · 无 blur（sticky 的 backdrop-filter 是滚动卡顿主因）

   Aero 玻璃的四个必备元素（缺一就变普通玻璃拟态）：
     1. 上半身高光片（specular sheet）：0→50% 渐隐，50% 处几乎切断
     2. 左上斜向高光（directional sheen）：非规则高光，暗示光源方向
     3. 白色内描边 + 底部深色折射唇边（inset 0 1px 白 / inset 0 -1px 深）
     4. 外部冷色光晕（bloom），而非只有投影
   ========================================================================== */

/* ==========================================================================
   1. 设计令牌
   ========================================================================== */
.aero-js,
:root{
  /* ---- Aero 调色板（统一：蓝天 → 青 → 青绿，少量紫/粉作环境光）---- */
  --a-sky:#8fcbf2;
  --a-blue:#2f83cc;
  --a-blue-lt:#5aa9e8;
  --a-blue-dk:#15497c;
  --a-deep:#0a2747;
  --a-cyan:#57d5ec;
  --a-teal:#2fb2a6;
  --a-green:#8ad06f;
  --a-violet:#8272d9;
  --a-pink:#dc8cc0;
  --a-silver:#eef5fc;

  /* ---- 文字（在玻璃上保持足够对比度）---- */
  --ink:#0d1c2a;
  --ink-soft:#2f465a;
  --ink-mute:#3f5c73;

  /* ---- 玻璃底色分级 ----
     这是一条刻意的「不透明度阶梯」（叠加后的大致亮度）：
       桌面 L.30 → 窗口玻璃 L.53 → 标签条 L.66 → 工具板 L.78 → 卡片 L.80 → 按钮 L.93
     阶梯拉开，页面才有层次；全部用同一个透明度就会拍平成模板站。*/
  --g-window:rgba(236,248,255,.28);
  --g-panel:rgba(255,255,255,.82);
  --g-card:rgba(255,255,255,.72);
  --g-ctl:rgba(255,255,255,.84);
  --g-dark:rgba(7,26,52,.9);

  /* ---- 玻璃边缘：白内描边 + 深色折射唇 ---- */
  --edge:inset 0 0 0 1px rgba(255,255,255,.55),
         inset 0 1px 0 rgba(255,255,255,.96),
         inset 0 -1px 0 rgba(14,50,92,.13);
  --edge-dark:inset 0 0 0 1px rgba(255,255,255,.16),
              inset 0 1px 0 rgba(255,255,255,.42),
              inset 0 -1px 0 rgba(0,0,0,.34);

  /* ---- 外部冷色光晕 ---- */
  --bloom:0 0 0 1px rgba(18,54,96,.20),
          0 2px 5px rgba(8,30,60,.26),
          0 20px 46px -20px rgba(4,20,44,.62);

  --r-sm:4px; --r-md:7px; --r-win:12px;

  /* 入场/交互缓动（Aero 时代没有弹性回弹，用平滑 ease-out）*/
  --ease:cubic-bezier(.22,.68,.32,1);
}

/* ==========================================================================
   2. 基底
   ========================================================================== */
html{background:var(--a-deep)}
body{
  background:transparent;
  color:var(--ink);
  font-family:"Segoe UI","Microsoft YaHei","PingFang SC","Hiragino Sans GB",
              -apple-system,BlinkMacSystemFont,sans-serif;
}
a{color:#0f5fa8}
a:hover{color:#0b4d8c}
img{display:block}
::selection{background:rgba(88,176,255,.42);color:#062033}

/* ==========================================================================
   3. 桌面背景层（壁纸 + 极光 + 光晕 + 光柱 + 噪点）
   ========================================================================== */
.aero-desktop{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  overflow:hidden; isolation:isolate;
  animation:aero-fade 1.4s ease both;
}
.aero-desktop>*{position:absolute}
/* will-change 只留给真的在动的那三层（far/near/beam），
   wall / vignette / grain 是静态的，挂了只会白占合成层内存。*/

/* 3.1 壁纸：Win7 极光。
   构图要点 —— 玻璃窗口背后的底色必须是「中间调 + 高饱和」，不能是亮部：
   亮部透过滤白玻璃只会得到一片发灰的雾，内容区就被冲淡了。
   所以中央保持中调饱和蓝（透过去是清爽的浅蓝玻璃），四周压深，极光只做偏上的点缀。*/
.aero-wall{
  inset:-6%;
  background:
    /* 极光点缀：集中在画面上部与左下，不在窗口正中堆亮度 */
    radial-gradient(46% 34% at 34% 8%, rgba(86,206,246,.34) 0%, rgba(86,206,246,0) 72%),
    radial-gradient(52% 38% at 20% 84%, rgba(46,204,180,.26) 0%, rgba(46,204,180,0) 74%),
    radial-gradient(42% 30% at 88% 22%, rgba(120,150,240,.22) 0%, rgba(120,150,240,0) 74%),
    /* 左上科技蓝、右上青：给画面一个明确的光源方向 */
    radial-gradient(70% 56% at 2% -4%, rgba(26,104,190,.86) 0%, rgba(26,104,190,0) 62%),
    radial-gradient(46% 38% at 99% 0%, rgba(52,178,224,.62) 0%, rgba(52,178,224,0) 64%),
    linear-gradient(162deg,#082544 0%,#0c3b6c 16%,#114f86 32%,#16669b 48%,
                    #156a92 62%,#0e4a76 80%,#062a50 100%);
}

/* 3.2 远景层：极光缎带
   ------------------------------------------------------------------
   性能修订（2026-09-21）：这里原来带 `filter:blur(62px)` + `mix-blend-mode:screen`。
   全屏级 blur 与混合模式各 3~4 层叠在 1440×900 上，是所有滚动/合成开销里最贵的两件事，
   必须砍掉：
     · 去掉 blur —— 这几条缎带本来就是「两端透明、中间有色」的线性渐变，
       本身就是柔和的，模糊只是锦上添花；
     · 去掉 blend —— 改用普通 alpha 叠加。screen 只是让亮度更「发光」一点，
       在这么低的透明度下与 alpha 的观感差别很小。
   另外 `.aero-far` / `.aero-near` 上的 `--sy`（滚动视差）已删除：那段 JS 因为没有
   scroll 监听其实从来没跑过，留着是死代码。现在这两层只响应鼠标视差。 */
.aero-far{
  inset:0;
  transform:translate3d(calc(var(--px,0) * -9px), calc(var(--py,0) * -7px), 0);
  will-change:transform;
}
.aur{
  position:absolute; border-radius:50%;
  opacity:.42;
}
.aur.a1{
  width:72vw; height:20vw; left:18%; top:4%;
  background:linear-gradient(90deg,rgba(130,242,255,0) 0%,rgba(130,242,255,.58) 36%,
             rgba(160,255,224,.46) 62%,rgba(130,242,255,0) 100%);
  animation:aur-a 74s ease-in-out infinite;
}
.aur.a2{
  width:58vw; height:16vw; left:-8%; top:56%;
  background:linear-gradient(90deg,rgba(90,170,255,0) 0%,rgba(120,190,255,.44) 44%,
             rgba(90,170,255,0) 100%);
  animation:aur-b 92s ease-in-out infinite;
}
.aur.a3{
  width:44vw; height:13vw; left:56%; top:72%;
  background:linear-gradient(90deg,rgba(180,140,255,0) 0%,rgba(178,142,255,.36) 48%,
             rgba(230,140,205,.24) 72%,rgba(180,140,255,0) 100%);
  animation:aur-c 108s ease-in-out infinite;
}

/* 3.3 近景层：环境光斑（本来就是纯径向渐变，本来就零滤镜成本）*/
.aero-near{
  inset:0;
  transform:translate3d(calc(var(--px,0) * 17px), calc(var(--py,0) * 13px), 0);
  will-change:transform;
}
.bloom{position:absolute;border-radius:50%}
.bloom.b1{
  width:52vw; height:52vw; left:62%; top:-16%;
  background:radial-gradient(circle,rgba(96,220,255,.30) 0%,rgba(96,220,255,0) 66%);
  animation:blm-a 66s ease-in-out infinite;
}
.bloom.b2{
  width:46vw; height:46vw; left:34%; top:58%;
  background:radial-gradient(circle,rgba(70,214,186,.26) 0%,rgba(70,214,186,0) 68%);
  animation:blm-b 88s ease-in-out infinite;
}
.bloom.b3{
  width:34vw; height:34vw; left:84%; top:36%;
  background:radial-gradient(circle,rgba(160,120,255,.24) 0%,rgba(160,120,255,0) 70%);
  animation:blm-c 80s ease-in-out infinite;
}

/* 3.4 光柱：有方向感的光线（约 13°，与全局光源一致）。
   同样去掉 blur + blend —— 它的渐变两端本来就是透明的，不需要模糊。*/
.aero-beam{
  left:-24%; top:4%; width:150%; height:26%;
  transform:rotate(-13deg) translate3d(calc(var(--px,0) * 11px), calc(var(--py,0) * 8px), 0);
  opacity:.34; will-change:transform;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(226,246,255,.34) 48%,
             rgba(255,255,255,0) 100%);
}

/* 3.5 暗角：四周压深 → 桌面边缘更饱和，浅色玻璃窗口对比更强、浮得更明显 */
.aero-vignette{
  inset:0;
  background:
    linear-gradient(180deg,rgba(2,14,34,.55) 0%,rgba(2,14,34,0) 13%),
    radial-gradient(128% 108% at 50% 34%,rgba(0,0,0,0) 44%,rgba(2,12,30,.52) 100%);
}

/* 3.6 噪点：消除大面积渐变的色带（色带 = 廉价感）。
   去掉 mix-blend-mode:overlay（全屏混合模式），改用极低 alpha 的普通叠加，
   消色带的效果一样，但不再触发一次全屏混合。 */
.aero-grain{
  inset:0; opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   4. 任务栏式 Header（深色 Aero 玻璃 —— 全站最强的时代识别点）
   --------------------------------------------------------------------------
   性能修订（2026-09-21）：去掉了这里的 `backdrop-filter`。
   sticky 元素的 backdrop 每一帧都在变（内容从它下面滑过），浏览器必须
   每帧重新采样并模糊一次，是所有滚动卡顿里最典型的一条。代价是内容从
   页头下面滑过时不再被磨砂，所以把底色提到 .9 来保证文字始终可读；
   玻璃观感（上半身高光片 + 左上斜光 + 白内描边 + 冷色光晕）全部保留。
   ========================================================================== */
.header{
  position:sticky; top:0; z-index:60;
  background-color:var(--g-dark);
  border-bottom:1px solid rgba(255,255,255,.16);
  background-image:
    /* 上半身高光片：Aero 招牌的「半身光泽」*/
    linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.13) 44%,
                    rgba(255,255,255,.01) 50%,rgba(255,255,255,0) 100%),
    /* 左上斜向高光：非规则，暗示光源 */
    linear-gradient(98deg,rgba(170,230,255,.22) 0%,rgba(170,230,255,0) 44%),
    /* 深蓝玻璃底色：保证任务栏在浅色内容之上仍是「蓝黑玻璃」 */
    linear-gradient(180deg,rgba(20,66,118,.72) 0%,rgba(8,30,62,.86) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.46),
    inset 0 -1px 0 rgba(0,0,0,.32),
    0 2px 16px rgba(3,18,40,.50);
  transition:box-shadow .35s var(--ease),background-color .35s var(--ease);
}
/* 缓慢扫过的动态光泽（15s，极低透明度 → 「精致，所以一直在轻微地动」）。
   同样用 background-position 扫动，不用 transform：transform 版会永久
   把内容推出容器右侧，给整页撑出横向滚动条。
   渐变两侧必须留够长度（30%→70% 才到峰值）：停靠点太挤会让这条光泽
   变成一块边缘很硬的「矩形」扫过去，看起来像渲染 bug 而不是光泽。*/
/* 高度用 min-height，不要写死 height：
   窄屏时搜索框会换到第二行（style.css 的 600px 断点），写死高度的话
   第二行就溢出盒子、直接压到下面的卡片上。
   上下各留 10px：一行时内容靠 align-items:center 垂直居中、总高仍是 56px；
   换行之后最后一行也不会贴着页头底边。
   （原来写 padding:0 20px，把 style.css 窄屏断点里的上下 8px 内边距盖掉了，
     这就是「换行后贴底」的原因。） */
.header-in{position:relative;min-height:56px;max-width:1040px;padding:10px 20px}
.header-in::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.18) 50%,
                   rgba(255,255,255,0) 70%);
  background-repeat:no-repeat;
  background-size:60% 100%;
  background-position:-80% 0;
  animation:aero-sheen 15s ease-in-out 2.4s infinite;
}

/* 4.1 Logo：站标做成「镶在深色玻璃里的宝石」。
   真实的 layout.php 用的是 <img class="logo-icon" src="/assets/icon.svg">，
   Vista/Win7 时代的图标本来就是带高光的圆角方块，所以这里不加 CSS 玻璃球
   （加 ::before 会出现两个图标），而是把圆角方块本身玻璃化：
   白内描边 + 冷色外发光 + 落影，hover 提亮放大。
   动态高光由 header 那条缓慢扫过的光泽承担（见 .header-in::after）。*/
.logo{
  display:inline-flex; align-items:center; gap:9px;
  color:#f2f9ff; font-size:17px; font-weight:700;
  text-shadow:0 1px 3px rgba(2,16,36,.62);
}
.logo em{color:#a9e4ff;font-style:normal;text-shadow:0 0 12px rgba(120,215,255,.75)}
.logo-icon{
  width:24px; height:24px; border-radius:6px; flex:none; display:block;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -2px 5px rgba(2,16,38,.45),
    0 0 0 1px rgba(255,255,255,.34),
    0 0 14px rgba(120,200,255,.6),
    0 3px 9px rgba(2,16,38,.58);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),filter .3s var(--ease);
}
/* hover 不做 brightness：站标是「蓝底 + 浅蓝字形」，整体提亮会让字形和底色
   互相靠拢、9 就糊在底上了。改成提对比 + 提饱和，把两者的差距拉开。*/
.logo:hover .logo-icon{
  transform:scale(1.08);
  filter:contrast(1.10) saturate(1.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -2px 5px rgba(2,16,38,.45),
    0 0 0 1px rgba(255,255,255,.46),
    0 0 22px rgba(150,220,255,.85),
    0 3px 12px rgba(2,16,38,.6);
}
/* hover 保持浅色：全局 a:hover 是深蓝(#0b4d8c)，会渗透到「9」上，
   在深色顶栏里几乎隐形（只剩 flash 可见）。这里显式钉住颜色，
   hover 反馈交给 logo-icon 的放大 + 发光承担。 */
.logo:hover{color:#f2f9ff;text-decoration:none}

/* 4.2 深色玻璃上的导航 */
.header .nav a{color:#dceaf8;text-shadow:0 1px 2px rgba(2,14,32,.5)}
.header .nav a:hover{color:#fff;text-decoration:none}
.header .nav a[data-plain]{color:#e6f1fb}
.header .lang,.header .lang a{color:rgba(220,236,250,.6)}
.header .lang .cur{color:#fff}
.header .linklike{
  border:0;background:none;padding:0;font:inherit;font-size:13px;
  color:#dceaf8;cursor:pointer;text-shadow:0 1px 2px rgba(2,14,32,.5);
}
.header .linklike:hover{color:#fff}
.header .inline-form{margin:0;display:inline}

/* 4.3 搜索框：深色任务栏中的明亮玻璃输入框（视觉焦点之一）*/
.header .search{
  background:rgba(255,255,255,.90);
  border-radius:5px;
  box-shadow:
    inset 0 1px 3px rgba(8,32,62,.30),
    inset 0 0 0 1px rgba(255,255,255,.66),
    0 0 0 1px rgba(4,22,46,.30),
    0 1px 0 rgba(255,255,255,.20);
  transition:box-shadow .3s var(--ease),transform .3s var(--ease);
}
.header .search:focus-within{
  box-shadow:
    inset 0 1px 3px rgba(8,32,62,.24),
    inset 0 0 0 1px rgba(255,255,255,.8),
    0 0 0 1px rgba(120,200,255,.9),
    0 0 22px rgba(110,195,255,.62);
}
.header .search input{
  border:0; background:transparent; border-radius:5px 0 0 5px;
  padding:6px 11px; color:#0d1c2a; box-shadow:none;
}
.header .search input:focus{border:0;box-shadow:none;background:transparent}
.header .search input::placeholder{color:#6d8299}
.header .search button{
  border:0; border-left:1px solid rgba(12,42,76,.16);
  border-radius:0 5px 5px 0; padding:6px 15px;
  color:#fff; font-weight:600; letter-spacing:.02em;
  background-color:var(--a-blue);
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.52) 0%,rgba(255,255,255,.16) 46%,
                    rgba(255,255,255,.02) 50%,rgba(255,255,255,0) 100%),
    linear-gradient(98deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,0) 48%),
    linear-gradient(180deg,#4fa3e8 0%,#2f83cc 50%,#1f66aa 100%);
  text-shadow:0 1px 2px rgba(4,28,58,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -8px 13px -10px rgba(3,24,52,.8);
  transition:filter .25s var(--ease),box-shadow .25s var(--ease);
}
.header .search button:hover{
  filter:brightness(1.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -8px 13px -10px rgba(3,24,52,.8),
    0 0 18px rgba(96,190,255,.62);
}

/* ==========================================================================
   5. 玻璃按钮 / 标签 / 输入（全站通用）
   ========================================================================== */
.btn{
  position:relative;
  border:1px solid rgba(120,168,208,.62);
  border-radius:5px;
  color:var(--ink);
  /* 按钮文字一律单行：按钮被放进 flex 行里（如播放页 .player-tools）时会被压缩，
     没有 nowrap 就会在「网页内全屏」这种多字标签中间断行。 */
  white-space:nowrap;
  background-color:var(--g-ctl);
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.36) 47%,
                    rgba(255,255,255,.05) 51%,rgba(255,255,255,0) 100%),
    linear-gradient(98deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,0) 46%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 0 0 1px rgba(255,255,255,.42),
    0 1px 2px rgba(10,36,66,.18),
    0 4px 10px -5px rgba(10,36,66,.36);
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),
             background-color .25s var(--ease),filter .25s var(--ease);
}
.btn:hover{
  background-color:rgba(255,255,255,.94);
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(255,255,255,.55),
    0 2px 4px rgba(10,36,66,.16),
    0 8px 18px -8px rgba(10,36,66,.45),
    0 0 18px rgba(120,195,255,.48);
  text-decoration:none;
}
.btn:active{
  transform:translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(10,36,66,.28),
    inset 0 0 0 1px rgba(255,255,255,.30);
}
.btn:focus-visible{outline:2px solid rgba(96,180,255,.85);outline-offset:2px}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

/* 深色任务栏内的玻璃按钮（同一类名，不同语境）*/
.header .btn{
  border-color:rgba(255,255,255,.34);
  color:#eef7ff;
  background-color:rgba(255,255,255,.14);
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.10) 47%,
                    rgba(255,255,255,.01) 51%,rgba(255,255,255,0) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 1px 3px rgba(2,16,38,.42);
  text-shadow:0 1px 2px rgba(2,14,32,.55);
}
.header .btn:hover{
  background-color:rgba(255,255,255,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 0 0 1px rgba(255,255,255,.22),
    0 1px 3px rgba(2,16,38,.42),
    0 0 16px rgba(130,205,255,.46);
}

/* 主按钮：Aero 高光蓝（浅底/深底通用）*/
.btn-primary,.header .btn-primary{
  border-color:rgba(255,255,255,.58);
  color:#fff;
  background-color:var(--a-blue);
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.54) 0%,rgba(255,255,255,.17) 46%,
                    rgba(255,255,255,.02) 51%,rgba(255,255,255,0) 100%),
    linear-gradient(98deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 47%),
    linear-gradient(180deg,#4fa3e8 0%,#2f83cc 50%,#1f66aa 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    inset 0 0 0 1px rgba(255,255,255,.30),
    inset 0 -9px 14px -10px rgba(3,24,52,.75),
    0 1px 2px rgba(6,30,58,.35),
    0 6px 14px -6px rgba(20,90,160,.62),
    0 0 16px rgba(96,190,255,.45);
  text-shadow:0 1px 2px rgba(4,28,58,.55);
}
/* hover 必须**显式写全** background-color / background-image / color / border：
   只改 filter+box-shadow 的话，`.btn:hover` 与 `.header .btn:hover` 里的
   `background-color` 会漏进来（实测 hover 时按钮中心从 #2c74b5 变成 #84b8e5，
   L 0.41 → 0.69），白字直接糊在浅蓝底上。
   同时不用 `filter:brightness()` —— 它是个不分对象的乘法，会把整块玻璃一起提亮；
   改成换一档「更亮的高光蓝渐变」，对比度可控。*/
.btn-primary:hover,.header .btn-primary:hover{
  border-color:rgba(255,255,255,.72);
  color:#fff;
  background-color:#3f93d8;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.60) 0%,rgba(255,255,255,.20) 46%,
                    rgba(255,255,255,.03) 51%,rgba(255,255,255,0) 100%),
    linear-gradient(98deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,0) 47%),
    linear-gradient(180deg,#5cb0f0 0%,#3f93d8 50%,#2b78bd 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.42),
    inset 0 -9px 14px -10px rgba(3,24,52,.72),
    0 2px 5px rgba(6,30,58,.38),
    0 10px 22px -8px rgba(20,90,160,.72),
    0 0 26px rgba(110,200,255,.72);
}
/* 论坛按钮：第二强调色（青紫玻璃）*/
.btn-forum,.header .btn-forum{
  border-color:rgba(255,255,255,.54);
  color:#fff;
  background-color:var(--a-violet);
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.52) 0%,rgba(255,255,255,.16) 46%,
                    rgba(255,255,255,.02) 51%,rgba(255,255,255,0) 100%),
    linear-gradient(98deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,0) 47%),
    linear-gradient(180deg,#9b8ce6 0%,#7a68cf 50%,#5b49ab 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    inset 0 0 0 1px rgba(255,255,255,.28),
    inset 0 -9px 14px -10px rgba(18,8,54,.72),
    0 1px 2px rgba(16,10,52,.32),
    0 6px 14px -6px rgba(90,70,180,.62),
    0 0 16px rgba(170,150,255,.44);
  text-shadow:0 1px 2px rgba(16,10,52,.55);
}
/* 同 .btn-primary：hover 写全整套外观，不用 filter:brightness() */
.btn-forum:hover,.header .btn-forum:hover{
  border-color:rgba(255,255,255,.7);
  color:#fff;
  background-color:#8b79dd;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.58) 0%,rgba(255,255,255,.19) 46%,
                    rgba(255,255,255,.03) 51%,rgba(255,255,255,0) 100%),
    linear-gradient(98deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,0) 47%),
    linear-gradient(180deg,#a99bef 0%,#8b79dd 50%,#6c58bd 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.4),
    inset 0 -9px 14px -10px rgba(18,8,54,.7),
    0 2px 5px rgba(16,10,52,.34),
    0 10px 22px -8px rgba(90,70,180,.7),
    0 0 26px rgba(180,160,255,.7);
}

/* 删除按钮：暖红玻璃，保持「危险」语义但仍是 Aero 材质 */
.btn-del{
  border:1px solid rgba(214,96,86,.5);
  border-radius:4px;
  background-color:rgba(255,246,245,.9);
  background-image:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.28) 49%,
                   rgba(255,255,255,0) 51%);
  color:#b8302a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 1px 2px rgba(80,16,12,.16),
    0 3px 8px -4px rgba(80,16,12,.3);
  transition:transform .18s var(--ease),background-color .2s var(--ease),
             color .2s var(--ease),box-shadow .25s var(--ease);
}
.btn-del:hover{
  background-color:#cf2f28; background-image:none; color:#fff;
  border-color:rgba(255,255,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 16px rgba(230,110,100,.6);
}

/* 输入控件 */
input[type=text],input[type=email],input[type=password],input[type=search],textarea,select{
  background-color:rgba(255,255,255,.92);
  border:1px solid rgba(120,168,208,.62);
  border-radius:var(--r-sm);
  color:var(--ink);
  box-shadow:
    inset 0 1px 3px rgba(8,32,62,.16),
    inset 0 0 0 1px rgba(255,255,255,.55);
  transition:border-color .25s var(--ease),box-shadow .3s var(--ease);
}
input:focus,textarea:focus,select:focus{
  border-color:rgba(110,185,245,.95);
  box-shadow:
    inset 0 1px 3px rgba(8,32,62,.12),
    inset 0 0 0 1px rgba(255,255,255,.6),
    0 0 0 1px rgba(120,200,255,.75),
    0 0 18px rgba(110,195,255,.55);
}
input::placeholder,textarea::placeholder{color:#6d8299}

/* ==========================================================================
   6. 窗口容器（浅色 Aero 玻璃 —— 内容主体）
   ========================================================================== */
.container{
  position:relative; z-index:1;
  /* 1040px：2007-2012 年的网站普遍就是这个宽度（960~1100 定宽）。
     主栏 714px + 侧栏 270px，桌面两侧留出大片极光，
     窗口像真的「开在桌面上」，而不是铺满屏幕。*/
  max-width:1040px;
  margin:30px auto 0;
  /* 20px 的「窗框」是刻意留的：窗口的蓝色玻璃只有在这条边框和板块间隙里才看得见，
     没有它就只剩一层白，通透感无从体现。*/
  padding:20px 20px 6px;
  border-radius:var(--r-win);
  background-color:var(--g-window);
  /* 高光片 + 左上斜向高光：玻璃之所以像玻璃。
     ⚠ 关键：窗口高度可达数千像素，高光片必须用「像素」停靠点。
     用百分比会让 28% 变成 800+px，整个视口被刷成近白 → 一团平板白。*/
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.62) 0px,rgba(255,255,255,.24) 96px,
                    rgba(255,255,255,.04) 260px,rgba(255,255,255,0) 460px),
    linear-gradient(100deg,rgba(255,255,255,.24) 0px,rgba(255,255,255,0) 540px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.72),
    inset 0 1px 0 rgba(255,255,255,1),
    /* 内圈蓝晕 = 玻璃的「厚度」，让窗口边缘不只是白线 */
    inset 0 0 26px rgba(36,104,176,.18),
    inset 0 -1px 0 rgba(16,54,96,.18),
    0 0 0 1px rgba(8,38,74,.42),
    0 2px 6px rgba(2,14,34,.42),
    0 34px 74px -26px rgba(2,12,30,.82),
    /* 玻璃向桌面溢出的冷色光晕：Aero 窗体的标志性「漏光」。半径要克制，
       太大就会把窗口周边 100px 的桌面全部提亮，桌面反而变糊。*/
    0 0 22px rgba(120,205,255,.26),
    0 0 56px rgba(80,180,255,.10);
  /* 页面进场：fill-mode 必须是 backwards，不能是 both / forwards。
     ⚠ 只要动画效果还在挂着（both/forwards 会永久挂着），Chrome 对 transform
     的计算值就是 matrix(1,0,0,1,0,0) 而不是 none —— 哪怕关键帧写的就是
     transform:none（实测确认，别指望用 none 绕过）。非 none 的 transform
     会让 .container 变成包含块，里面的 position:fixed 元素
     （.player.page-fs「网页内全屏」）就会按 .container 的盒子定位而不是视口，
     症状是「点了全屏只在页面中间一坨」。
     用 backwards：延迟期内仍是 opacity:0（与 both 完全一致），动画结束后
     样式回落到基态（opacity:1、transform:none），与关键帧 to 的值相同 ——
     画面一模一样，但包含块消失。*/
  animation:aero-rise .78s .05s var(--ease) backwards;
}

/* 网页内全屏（.player.page-fs，规则在 style.css，由 play.js 切换）：
   全屏的播放器必须盖住页头与页脚。
   ⚠ 光把 .player 的 z-index 提更高是没用的 —— .container 自己是
   position:relative + z-index:1，本身就是一个层叠上下文，里面元素的 z-index
   只能和 .container 的兄弟比较。于是 z-index:1000 的播放器被 sticky 页头
   （z-index:60，画在 .container 之上）和页脚（同为 z-index:1、但 DOM 在后，
   也画在 .container 之上）盖住 —— 表现就是「点了全屏只占中间那一条，
   上下仍是页面」。必须把 .container 这一层整体提到页头/页脚之上。
   （Aero 之前 .container 没有任何 position/z-index，不是层叠上下文，
   播放器的 z-index:1000 直接落在根层叠上下文里，本来就盖得住 ——
   这是主题层引入的回归。）
   950 的取值依据：> 页头 60、页脚 1；< 退出按钮 1001 与屏幕键盘 1100
   （后两者挂在 body 上，必须仍在全屏播放器之上，否则全屏后无法退出/打字）。*/
body.page-fs .container{z-index:950}

/* 窗口顶部的玻璃泛光（74px 内快速渐隐 → 暗示「窗体标题栏」而不糊成白板）*/
.container::before{
  content:''; position:absolute; left:0; right:0; top:0; height:74px;
  border-radius:var(--r-win) var(--r-win) 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.40) 0px,rgba(255,255,255,.10) 34px,
             rgba(255,255,255,0) 74px);
  pointer-events:none;
}
/* 进场时一次性的「玻璃反光扫过」（Aero 窗体出现时的那道光）。
   两个要点：
   1) **不移动元素**，改用 background-position 扫动。早期版本用
      transform:translateX(115%)，会永久给文档撑出 800+px 的横向溢出
      （scrollWidth 从 1440 变 2258）。
   2) **高度必须覆盖整块窗体**。曾经限制成顶部 440px（怕重绘面积大），
      结果用户看到的是「光只闪了上半张卡片」。整块窗体都要扫到。
   z-index 必须显式给：`.container>*{z-index:1}` 的子元素会盖在同 z-index:auto
   的定位伪元素之上，不写 z-index 这道光会被内容挡住、只照亮窗体底色。
   播放频率：**默认不播**（用户 2026-09-22 要求「每天第一次打开闪一下就够」）。
   aero.js 按 localStorage 里的日期判断，每天首次访问给 <html> 打
   .aero-shine-day，只有命中这个类才挂动画；其余访问 opacity:0 纯静止。 */
.container::after{
  content:''; position:absolute; inset:0; z-index:5;
  border-radius:var(--r-win); pointer-events:none;
  background-image:linear-gradient(101deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.40) 50%,
                   rgba(255,255,255,0) 70%);
  background-repeat:no-repeat;
  background-size:60% 100%;
  background-position:-80% 0;
  opacity:0;
}
.aero-js.aero-shine-day .container::after{
  animation:aero-window-shine 1.7s .5s var(--ease) 1 both;
}
.container>*{position:relative;z-index:1}

/* 页脚：Aero 状态栏 + 门户式多列链接（那个年代的页脚都是密集链接群）*/
.footer{
  position:relative; z-index:1;
  margin-top:22px; padding:0;
  border-top:1px solid rgba(255,255,255,.18);
  color:rgba(226,240,252,.88);
  font-size:12px;
  background-color:rgba(7,26,52,.9);
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.24) 0px,rgba(255,255,255,.07) 26px,
                    rgba(255,255,255,0) 52px),
    linear-gradient(98deg,rgba(170,225,255,.14) 0px,rgba(170,225,255,0) 380px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(0,0,0,.30),
    0 -2px 18px rgba(2,14,34,.4);
  text-shadow:0 1px 2px rgba(2,14,32,.5);
  /* fill-mode 用 backwards，不用 both —— 原因见第 6 节 .container 的长注释
     （both 会让 transform 永久停在单位矩阵 → 元素永久是包含块，
     里面的 position:fixed 会按它定位而不是视口）。
     这里基态 opacity 是 1、transform 是 none，与关键帧 to 完全相同，画面不变。*/
  animation:aero-rise .8s .26s var(--ease) backwards;
}
.footer-in{
  max-width:1040px; margin:0 auto; padding:16px 20px 15px;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px 22px;
  text-align:left;
}
.fcol{display:flex;flex-direction:column;gap:5px;min-width:0;font-size:12px}
.fcol h4{margin:0 0 3px;font-size:12px;font-weight:600;color:#cfe6fa;letter-spacing:.04em}
.fcol a{color:rgba(206,228,248,.82);align-self:flex-start}
.fcol a:hover{color:#fff;text-decoration:none}
.fcol p{margin:0;font-size:11.5px;line-height:1.7;color:rgba(196,220,240,.72)}
.footer-bar{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.13);
  padding:9px 20px; font-size:12px; color:rgba(208,230,250,.82);
  background:rgba(3,18,38,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
/* slogan 居中，右侧挂生成耗时 */
.footer-slogan{flex:1 1 auto;text-align:center;min-width:0}
.footer-gen{flex:none;white-space:nowrap}
/* 生成耗时：运维排障用，压在最右、不抢视线 */
.footer-gen{color:rgba(196,220,240,.5);font-size:11px}
.footer a{color:#a9e0ff}
.footer a:hover{color:#fff;text-decoration:none}

/* ==========================================================================
   7. 工具板 / 排序 / 热门标签
   ========================================================================== */
.toolbar{
  padding:9px 12px;
  border:0;
  border-radius:9px;
  background-color:var(--g-panel);
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.34) 45%,
                    rgba(255,255,255,.08) 52%,rgba(255,255,255,0) 100%),
    linear-gradient(99deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,0) 46%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.6),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -1px 0 rgba(16,54,96,.12),
    0 1px 3px rgba(8,30,60,.2),
    0 10px 24px -12px rgba(6,26,54,.5);
  margin-bottom:14px;
}
.sorts{gap:3px}
.sorts a{
  padding:5px 12px; border-radius:5px;
  color:var(--ink-mute); font-size:13px; font-weight:600;
  border:1px solid transparent;
  transition:background-color .25s var(--ease),color .25s var(--ease),
             box-shadow .28s var(--ease),transform .2s var(--ease);
}
.sorts a:hover{
  background-color:rgba(255,255,255,.72);
  border-color:rgba(140,190,230,.5);
  color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 6px -3px rgba(8,30,60,.4);
  text-decoration:none;
}
/* 当前排序：发光蓝玻璃「按下」态 */
.sorts a.active{
  color:#fff;
  border-color:rgba(255,255,255,.5);
  background-color:var(--a-blue);
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.15) 46%,
                    rgba(255,255,255,.02) 51%,rgba(255,255,255,0) 100%),
    linear-gradient(180deg,#4ea2e8 0%,#2f83cc 50%,#1f66aa 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    inset 0 -9px 14px -11px rgba(3,24,52,.8),
    0 2px 6px rgba(20,80,140,.42),
    0 0 16px rgba(96,190,255,.55);
  text-shadow:0 1px 2px rgba(4,28,58,.5);
}
.sorts a.active:hover{text-decoration:none;filter:brightness(1.06)}
.tool-right{
  font-size:12px; color:var(--ink-soft);
  padding:3px 10px; border-radius:4px;
  background:rgba(255,255,255,.5);
  box-shadow:inset 0 1px 2px rgba(8,32,62,.10),inset 0 0 0 1px rgba(255,255,255,.6);
}

.chipbar{
  font-size:12px; color:var(--ink-soft);
  padding:7px 10px; border-radius:8px;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.16));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(255,255,255,.4);
  margin-bottom:14px;
}

/* 标签 chip：小玻璃片 */
.tag{
  border:1px solid rgba(146,186,220,.6);
  border-radius:999px;
  background-color:rgba(255,255,255,.74);
  background-image:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.3) 49%,
                   rgba(255,255,255,0) 51%);
  color:var(--ink-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(8,30,60,.10);
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),
             border-color .25s var(--ease),color .25s var(--ease),
             background-color .25s var(--ease);
}
a.tag:hover{
  border-color:rgba(110,185,245,.9);
  color:#0b4d8c;
  background-color:rgba(255,255,255,.95);
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 4px 10px -4px rgba(20,80,140,.45),
             0 0 14px rgba(110,195,255,.5);
  text-decoration:none;
}
.tag.on,a.tag.on{
  color:#fff; border-color:rgba(255,255,255,.5);
  background-color:var(--a-blue); background-image:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 6px rgba(20,80,140,.4),
             0 0 14px rgba(96,190,255,.5);
  text-shadow:0 1px 2px rgba(4,28,58,.45);
}
a.tag.on:hover{background-color:var(--a-blue);color:#fff;border-color:rgba(255,255,255,.5)}

/* ==========================================================================
   8. 封面缩略图（后台 44px 小图 / 投稿封面预览 / 瓷砖内封面）
   --------------------------------------------------------------------------
   加载动画是 .cov-bubs 气泡组（style.css + layout.php coverInit 注入），
   不占用伪元素；大尺寸封面一律走 .tile，玻璃高光做在 .tile::after 上；
   无封面占位（.fb）没有气泡，它的 ::after 铺高光。
   ========================================================================== */
.cover{
  border:0; border-radius:6px; overflow:hidden;
  /* 与 .tile 同款深蓝玻璃加载底色（2026-09-22，原浅蓝 #dbe9f6→#aec9e2 已废） */
  background:linear-gradient(160deg,#0d3a66 0%,#114f86 55%,#0a2b4e 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.65),
    0 0 0 1px rgba(16,50,92,.34),
    0 1px 3px rgba(4,20,44,.34);
}
.cover img{
  /* 轻微提饱和：2007-2012 的封面普遍比现在更「艳」。
     这里不要写 transition —— style.css 用 `transition:opacity .25s` 配合
     `.cover.loaded` 做淡入，写成 transition 简写会把它整个覆盖掉。*/
  filter:saturate(1.06) contrast(1.03);
}
/* 无封面占位（色块 + 首字）：高光只能走 ::after，因为底色是模板内联 style，
   样式表里的 background-image 会被内联 shorthand 覆盖掉。*/
.cover.fb{box-shadow:
  inset 0 0 0 1px rgba(255,255,255,.6),
  0 0 0 1px rgba(16,50,92,.28),
  0 1px 3px rgba(4,20,44,.3)}
.cover.fb::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(170deg,rgba(255,255,255,.52) 0px,rgba(255,255,255,.16) 42px,
             rgba(255,255,255,0) 78px);
}
/* 占位首字：封面底色是浅粉/浅蓝等淡色，白字在上面几乎看不见，
   所以用「深色字 + 白色上高光」做浮雕效果，任何淡底都能读。*/
.cover.fb span{
  color:rgba(12,40,74,.42); font-weight:700;
  text-shadow:0 1px 0 rgba(255,255,255,.9),0 2px 4px rgba(8,30,60,.14);
}
/* 8.1 瓷砖内的封面：铺满瓷砖，自身圆角/描边/高光全部让位给 .tile */
.tile>.cover{
  position:absolute; inset:0; aspect-ratio:auto;
  border-radius:0; box-shadow:none; background:none;
}
.tile>.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile>.cover.fb{background-image:none}
.tile>.cover.fb::after{background:none}   /* 高光统一由 .tile::after 出 */
.tile>.cover.fb span{font-size:46px;padding-bottom:12px}

/* ==========================================================================
   9. 分页
   ========================================================================== */
.pager{gap:5px;margin:22px 0 6px}
.pager a,.pager span{
  min-width:29px; padding:5px 8px;
  border:1px solid rgba(140,184,220,.62);
  border-radius:5px;
  font-size:12px; color:var(--ink-soft);
  background-color:rgba(255,255,255,.78);
  background-image:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.3) 48%,
                   rgba(255,255,255,0) 52%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 1px 2px rgba(8,30,60,.14),
    0 3px 8px -5px rgba(8,30,60,.4);
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),
             color .25s var(--ease),border-color .25s var(--ease);
}
.pager a:hover{
  color:#0b4d8c; border-color:rgba(110,185,245,.9);
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 4px 12px -5px rgba(20,80,140,.5),
    0 0 16px rgba(110,195,255,.5);
  text-decoration:none;
}
.pager .cur{
  color:#fff; border-color:rgba(255,255,255,.5);
  background-color:var(--a-blue);
  background-image:linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.14) 46%,
                   rgba(255,255,255,.02) 51%,rgba(255,255,255,0) 100%),
                   linear-gradient(180deg,#4ea2e8 0%,#2f83cc 50%,#1f66aa 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    inset 0 -8px 13px -11px rgba(3,24,52,.8),
    0 2px 6px rgba(20,80,140,.42),
    0 0 16px rgba(96,190,255,.55);
  text-shadow:0 1px 2px rgba(4,28,58,.5);
}
.pager .gap{border:0;background:none;box-shadow:none;color:var(--ink-mute)}
.pager a[aria-disabled],.pager span:not(.cur):not(.gap){opacity:.62}

/* ==========================================================================
   10. 两栏门户骨架（主栏照片墙 + 右栏排行榜）
   ========================================================================== */
.cols{
  display:grid;
  grid-template-columns:minmax(0,1fr) 270px;
  gap:16px;
  align-items:start;
}
.col-main{min-width:0}
/* 侧栏随页面自然滚动，不粘附在视口位置。 */
.col-side{
  display:flex; flex-direction:column; gap:14px; min-width:0;
  align-self:start;
}

/* 10.1 头部第二行：分类导航玻璃条 */
.header-sub{
  border-top:1px solid rgba(255,255,255,.13);
  background-color:rgba(3,18,38,.36);
  background-image:linear-gradient(180deg,rgba(255,255,255,.13) 0px,rgba(255,255,255,.03) 18px,
                   rgba(255,255,255,0) 34px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.header-sub-in{
  max-width:1040px;margin:0 auto;padding:5px 20px;
  display:flex;align-items:center;gap:5px;flex-wrap:wrap;
}
.hs-label{font-size:12px;color:rgba(204,226,248,.7);margin-right:2px}
/* 标签放在独立容器里：搜索页的 list-filter.js 会把这个容器的内容整体重绘
   （id=lf-chipbar），所以「全部标签 ›」和 hs-label 必须留在容器外面，否则会被一起抹掉。
   条数完全由 config cache.public_tags_sidebar_limit 决定（不在这里截断），
   一行放不下就让标签换到下一行。
   注意：.header-sub 已移出 sticky header（layout.php），作为普通流元素跟页面滚动 ——
   标签条不再常驻顶栏；侧栏不再吸附页面。 */
.hs-tags{
  display:flex; flex-wrap:wrap;
  gap:5px; align-items:center; min-width:0; flex:1 1 auto;
}
.header-sub .tag{
  /* flex:none 让每颗标签保持自然宽度（不收缩、不断行），
     配合上面的 flex-wrap:wrap，放不下时整颗换到下一行。 */
  flex:none;
  font-size:11px;padding:1px 8px;
  color:#dceaf9;border-color:rgba(255,255,255,.22);
  background-color:rgba(255,255,255,.12);background-image:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.header-sub .tag:hover{
  color:#fff;border-color:rgba(255,255,255,.42);
  background-color:rgba(255,255,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 14px rgba(130,205,255,.5);
}
.hs-more{margin-left:auto;font-size:12px;color:#a9e0ff;white-space:nowrap}
.hs-more:hover{color:#fff}

/* 10.2 照片墙：封面全出血，标题压在图片下缘 */
.wall{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.tile{
  position:relative; display:block; aspect-ratio:1/1;
  border-radius:8px; overflow:hidden; isolation:isolate;
  /* 加载底色改深蓝玻璃（2026-09-22）：浅蓝是旧浅色主题残留，与 Aero
     深色桌面初衷不符；封面加载期间露出的就是这层底。 */
  background:linear-gradient(160deg,#0d3a66 0%,#114f86 55%,#0a2b4e 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.6),
    inset 0 1px 0 rgba(255,255,255,.92),
    0 0 0 1px rgba(14,48,90,.36),
    0 2px 5px rgba(4,20,44,.34),
    0 12px 24px -13px rgba(3,16,36,.66);
  transition:transform .3s var(--ease),box-shadow .32s var(--ease);
}
/* 封面在瓷砖内铺满，hover 时轻微放大（照片墙的「呼吸」）*/
.tile>.cover img{transition:transform .55s var(--ease);transform:translateZ(0)}
.tile:hover>.cover img{transform:scale(1.07)}
/* 玻璃高光片（压在照片上 → 照片像「镶在玻璃后面」）*/
.tile::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.30) 0px,rgba(255,255,255,.08) 26px,
                    rgba(255,255,255,0) 62px),
    linear-gradient(102deg,rgba(255,255,255,.18) 0px,rgba(255,255,255,0) 50px);
}
/* 斜切光扫过 */
.tile::before{
  content:''; position:absolute; inset:-20% -40%; z-index:5; pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.5) 50%,
             rgba(255,255,255,0) 62%);
  transform:translateX(-130%) skewX(-14deg); opacity:0;
}
.tile:hover::before{animation:aero-sweep .72s var(--ease) 1}
.tile:hover{
  transform:translateY(-5px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.8),
    inset 0 1px 0 rgba(255,255,255,1),
    0 0 0 1px rgba(140,210,255,.85),
    0 4px 9px rgba(4,20,44,.36),
    0 22px 34px -14px rgba(3,16,36,.74),
    0 0 34px rgba(120,205,255,.8);
}

/* 标题字幕：底部渐变遮罩 + 文字阴影。两者都要 ——
   只有阴影在浅色封面上会糊，只有遮罩在深色封面上会看不到边界。*/
.tile-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  padding:22px 8px 7px;
  background:linear-gradient(180deg,rgba(5,20,40,0) 0%,rgba(5,20,40,.44) 44%,
             rgba(5,20,40,.82) 100%);
}
.tile-cap h3{
  margin:0; font-size:12.5px; font-weight:700; color:#fff; line-height:1.32;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 9px rgba(0,0,0,.78);
}
.tile-cap .meta{
  margin-top:1px; font-size:10.5px; color:rgba(226,240,252,.92);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.72);
}
/* 顶部标签条：不给整条加遮罩（整条遮罩会在墙上糊出一条横带、并吃掉照片），
   改成每颗标签自带底与阴影，视觉更干净、露出更多照片。*/
/* 标签带：不放 3 个标签、也不换行，只把右侧的「硬裁」改成「渐隐」。
   原因：136px 的瓷砖里，3 个 4 字中文标签在可读字号下物理上放不下
   （实测需要 150~168px，可用只有 124px）。硬裁看起来像 bug，
   渐隐看起来像刻意为之，且能暗示「后面还有」。
   mask 而不是叠一层渐变遮罩：标签底下的照片千变万化，任何纯色遮罩都会对不上；
   mask 是淡出到透明、直接露出照片。 */
.tile-tags{
  position:absolute; left:0; right:0; top:0; z-index:4;
  display:flex; gap:3px; padding:6px 6px 0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
}
.tile-tags .tag{
  flex:none; font-size:9.5px; padding:0 5px; line-height:1.68;
  /* 单个超长标签（标签最长可建到 20 字）自己就能顶爆整行，这里兜住：
     限宽 + 省略号，且限宽比渐隐区略窄，保证被省略的那个仍完整可读、
     不会正好落在渐隐带里。 */
  max-width:calc(100% - 20px);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:#eaf4ff; border-color:rgba(255,255,255,.28);
  background-color:rgba(8,28,54,.62); background-image:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 1px 3px rgba(0,0,0,.55);
  text-shadow:0 1px 2px rgba(0,0,0,.85);
}

/* 焦点不由墙内放大承担：墙保持 5×N 的均匀节奏，
   「主角/配角」的层次改由侧栏排行榜的 1/2/3 名（金/银/铜徽章）承担。*/

/* 10.3 侧栏排行榜 */
.box{padding:0 13px 12px}
.box>*:last-child{margin-bottom:0}
/* 模块标题栏（那个年代门户站每个盒子都有的一条渐变标题栏）
   右侧带「更多 ›」——门户站模块标题栏的标配 */
.box h3{
  display:flex; align-items:center; gap:8px;
  margin:0 -13px 9px; padding:7px 12px;
  font-size:12px; font-weight:600; color:var(--ink); letter-spacing:.02em;
  border-radius:9px 9px 0 0;
  background-image:linear-gradient(180deg,rgba(255,255,255,.74) 0px,rgba(255,255,255,.26) 16px,
                   rgba(255,255,255,.06) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(16,54,96,.13);
}
.box h3 .box-more{
  margin-left:auto; flex:none;
  font-size:11px; font-weight:400; color:#2f6ea8;
}
.box h3 .box-more:hover{color:#0b4d8c}
.rank{
  display:flex; align-items:center; gap:7px;
  padding:4px 5px; border-radius:5px; min-width:0;
  transition:background-color .22s var(--ease),box-shadow .22s var(--ease);
}
.rank+.rank{border-top:1px solid rgba(255,255,255,.5)}
.rank:hover{
  background-color:rgba(255,255,255,.66); text-decoration:none;
  box-shadow:0 0 14px rgba(110,195,255,.45);
}
.rank b{
  flex:none; width:17px; height:17px; border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; color:#fff;
  background-color:#7ea7c9;
  background-image:linear-gradient(180deg,rgba(255,255,255,.52) 0%,rgba(255,255,255,.1) 50%,
                   rgba(255,255,255,0) 52%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 1px 2px rgba(6,26,54,.4);
  text-shadow:0 1px 2px rgba(4,24,48,.6);
}
.rank-box .rank:nth-of-type(1) b{background-color:#d8a318}
.rank-box .rank:nth-of-type(2) b{background-color:#93a2b2}
.rank-box .rank:nth-of-type(3) b{background-color:#b5773f}
.rank img{
  flex:none; width:34px; height:34px; border-radius:5px; object-fit:cover;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 1px 3px rgba(6,26,54,.42);
}
/* 无封面占位（与服务端 side_rank.php 的 .rank-ph 对应） */
.rank-ph{
  flex:none; width:34px; height:34px; border-radius:5px;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700; color:rgba(12,40,74,.42);
  text-shadow:0 1px 0 rgba(255,255,255,.9);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 1px 3px rgba(6,26,54,.42);
}
.rank>span{min-width:0;display:block}
.rank i{display:block;font-style:normal;font-size:12px;color:var(--ink);line-height:1.42;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank em{display:block;font-style:normal;font-size:10.5px;color:var(--ink-mute)}

.site-note{font-size:11.5px;color:var(--ink-soft);margin:10px 0 11px;line-height:1.65}
.box .btn-block{padding:7px;font-size:12.5px}

/* ==========================================================================
   11. 其它页面组件（沿用同一套玻璃语言）
   ========================================================================== */
/* 表单卡片 = 小号玻璃窗口 */
.form-card{
  border:0; border-radius:var(--r-win);
  padding:24px;
  background-color:var(--g-window);
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.4) 34%,
                    rgba(255,255,255,.12) 54%,rgba(255,255,255,.02) 100%),
    linear-gradient(100deg,rgba(255,255,255,.44) 0%,rgba(255,255,255,0) 46%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.68),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(16,54,96,.16),
    0 0 0 1px rgba(20,58,102,.26),
    0 2px 6px rgba(6,26,54,.3),
    0 28px 62px -24px rgba(4,20,44,.7),
    0 0 62px rgba(110,190,255,.22);
}
.form-card h1{color:var(--ink)}
.form-sub,.hint,.form-foot{color:var(--ink-mute)}
.verify-card{
  border:0;border-radius:var(--r-win);
  background-color:var(--g-window);
  background-image:linear-gradient(180deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.4) 34%,
                   rgba(255,255,255,.12) 56%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.68),
    inset 0 1px 0 rgba(255,255,255,1),
    0 0 0 1px rgba(20,58,102,.26),
    0 28px 62px -24px rgba(4,20,44,.7),
    0 0 62px rgba(110,190,255,.22);
}
.verify-icon{
  background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.95) 0%,rgba(190,246,208,.9) 26%,
             #6fc98a 58%,#2f9e54 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -4px 9px rgba(10,60,28,.4),
             0 0 0 1px rgba(255,255,255,.5),0 0 22px rgba(120,230,160,.6),
             0 4px 12px rgba(6,40,20,.4);
  color:#0d3d1e; font-weight:700;
}
/* 失败态：红色玻璃。
   原来 templates/verify.php 与 error.php 用内联 background/color 覆盖，
   内联样式会盖掉 Aero 的绿色玻璃渐变，变成一块扁平色 —— 改成真正的玻璃变体类。*/
.verify-icon.err{
  background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.95) 0%,rgba(255,214,210,.9) 26%,
             #e2706a 58%,#b8302a 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -4px 9px rgba(74,12,10,.45),
             0 0 0 1px rgba(255,255,255,.5),0 0 22px rgba(240,130,120,.6),
             0 4px 12px rgba(62,10,8,.4);
  color:#4a0f0c;
}
/* 后台「多文件」标记：中性玻璃徽章（模板原先用内联 --bg-soft/--muted，同样改类）*/
.badge-multi{
  background:rgba(255,255,255,.6); color:var(--ink-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.5);
}
/* 提示条 */
.notice{
  border:0; border-radius:8px;
  border-left:3px solid var(--a-blue);
  background-color:rgba(255,255,255,.62);
  background-image:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.3));
  color:var(--ink-soft);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.62),0 2px 8px -4px rgba(8,30,60,.4);
}
/* 文件拖放区：玻璃托盘 */
.file-drop{
  border:1.5px dashed rgba(120,168,208,.75);
  border-radius:8px;
  background-color:rgba(255,255,255,.42);
  background-image:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.12));
  color:var(--ink-mute);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  transition:border-color .28s var(--ease),box-shadow .28s var(--ease),
             background-color .28s var(--ease);
}
.file-drop:hover{
  border-color:rgba(110,185,245,.95);
  background-color:rgba(255,255,255,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 24px rgba(110,195,255,.5);
}
.file-drop b{color:var(--ink)}
.file-ok{color:#0f6b2c}
.req{color:#c22a26}
/* 自动补全下拉：浮起的小玻璃窗 */
.suggest{
  border:0; border-radius:7px;
  background-color:rgba(252,254,255,.96);
  background-image:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.5));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.9),
    0 0 0 1px rgba(20,58,102,.3),
    0 14px 34px -10px rgba(4,20,44,.6),
    0 0 30px rgba(110,190,255,.3);
}
.suggest div:hover,.suggest .hl{background:rgba(190,225,255,.6)}

/* 表格（设置页 / 论坛）*/
.table th{
  color:var(--ink-soft); font-size:12px;
  border-bottom:1px solid rgba(120,168,208,.55);
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.2));
}
.table td{border-bottom:1px solid rgba(255,255,255,.5)}
.table tbody tr{transition:background-color .22s var(--ease),box-shadow .22s var(--ease)}
.table tbody tr:hover{background-color:rgba(255,255,255,.5)}
.forum-table tr.pinned td{background:rgba(232,244,255,.62)}
.forum-head{border-bottom:1px solid rgba(120,168,208,.55)}
.badge{border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.badge-ok{background:#d9f6e2;color:#0f6b2c}
.badge-wait{background:#fff4c9;color:#8a5a00}
.badge-rej{background:#ffe6e3;color:#b8302a}
.badge-pin{background:#d9edff;color:#0b4d8c}
.sec-title{border-bottom:1px solid rgba(120,168,208,.55);color:var(--ink)}

/* 游玩页 */
.crumb{color:var(--ink-mute)}
.play-title h1{color:var(--ink);text-shadow:0 1px 0 rgba(255,255,255,.7)}
.play-title .sub{color:var(--ink-mute)}
.play-meta{color:var(--ink-mute)}
.play-meta b{color:var(--ink)}
.like{
  border:1px solid rgba(214,96,86,.45); border-radius:5px;
  background-color:rgba(255,247,246,.9);
  background-image:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.28) 49%,
                   rgba(255,255,255,0) 51%);
  color:#b8302a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(80,16,12,.16);
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),background-color .25s;
}
.like:hover{
  background-color:#ffe0dd;transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 16px rgba(230,110,100,.55);
}
/* 播放器：深色玻璃媒体窗。
   必须自己给底色 —— style.css 里是 `background:#0b0d1000`（全透明），
   不加的话播放器就是一大块空玻璃，载入文案也没有对比度。 */
.player{
  border:1px solid rgba(255,255,255,.22);
  border-radius:9px;
  background-color:#0b1220;
  background-image:radial-gradient(circle at 50% 32%,#24384f 0%,#121a24 48%,#080b10 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.5),
    0 0 0 1px rgba(20,58,102,.3),
    0 16px 40px -16px rgba(4,20,44,.75),
    0 0 40px rgba(90,170,255,.22);
}
/* 深底上的载入器 */
.pl-loading{color:#c2d3e4}
.pl-loading .pl-sub{color:#93a7bb}
.player .progress{background:rgba(0,0,0,.42);box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}
.player .progress i{background-color:#5fc0ff;
  background-image:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 60%);
  box-shadow:0 0 12px rgba(120,215,255,.85)}
/* 音量滑条：玻璃凹槽 + 玻璃圆钮 */
input[type=range]{
  -webkit-appearance:none; appearance:none;
  height:16px; background:transparent; cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:7px; border-radius:99px;
  background:linear-gradient(180deg,rgba(8,30,60,.34),rgba(8,30,60,.16));
  box-shadow:inset 0 1px 3px rgba(6,26,54,.5),inset 0 0 0 1px rgba(255,255,255,.4);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:15px; height:15px; margin-top:-4px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#fff 0%,#d6e9fb 38%,#5aa2dd 72%,#2c6aa8 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.75),0 1px 3px rgba(6,26,54,.5),
             0 0 9px rgba(110,195,255,.62);
}
input[type=range]::-moz-range-track{
  height:7px; border-radius:99px; background:rgba(8,30,60,.28);
}
input[type=range]::-moz-range-thumb{
  width:15px; height:15px; border:0; border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#fff 0%,#d6e9fb 38%,#5aa2dd 72%,#2c6aa8 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.75),0 1px 3px rgba(6,26,54,.5);
}
/* 播放器工具条（颜色统一在下面的 .player-tools 规则里，这里不重复定义）*/
.desc{
  border:0; border-radius:9px;
  background-color:rgba(255,255,255,.6);
  background-image:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.34));
  color:var(--ink-soft);
  padding:12px 14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.68),0 2px 8px -4px rgba(8,30,60,.35);
}
.comments h2{border-bottom:1px solid rgba(120,168,208,.55);color:var(--ink)}
.comment{border-top:1px solid rgba(255,255,255,.55)}
.comment-head{color:var(--ink-mute)}
.comment-head b{color:var(--ink)}
.avatar{
  background-image:linear-gradient(180deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,0) 50%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -3px 7px rgba(2,20,44,.4),
             0 0 0 1px rgba(255,255,255,.7),0 2px 6px rgba(4,22,46,.4);
}
/* 侧栏玻璃盒 */
.box{
  border:0; border-radius:9px;
  background-color:rgba(255,255,255,.6);
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.34) 42%,
                    rgba(255,255,255,.1) 60%,rgba(255,255,255,.02) 100%),
    linear-gradient(100deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,0) 46%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.66),
    inset 0 1px 0 rgba(255,255,255,.98),
    0 0 0 1px rgba(20,58,102,.18),
    0 8px 22px -12px rgba(6,26,54,.55);
}
.box h3{color:var(--ink-soft)}
.rel+.rel{border-top:1px solid rgba(255,255,255,.6)}
.rel img{
  border:0; object-fit:cover;
  /* 加载底色与 .tile/.cover 统一为深蓝玻璃（2026-09-22） */
  background:linear-gradient(160deg,#0d3a66 0%,#114f86 55%,#0a2b4e 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 1px 3px rgba(6,26,54,.4);
}
.rel{transition:background-color .22s var(--ease),box-shadow .22s var(--ease);border-radius:5px}
.rel:hover{
  background-color:rgba(255,255,255,.6);text-decoration:none;
  box-shadow:0 0 16px rgba(110,195,255,.42);
}
.rel .m{color:var(--ink-mute)}
.post-body{color:var(--ink-soft)}
.post-body code{background:rgba(255,255,255,.7);border-color:rgba(120,168,208,.45)}
.post-body pre{background:rgba(255,255,255,.66);border-color:rgba(120,168,208,.45)}
.post-body blockquote{border-left-color:rgba(120,168,208,.7);color:var(--ink-mute)}
.keyboard-trigger{
  border-color:rgba(120,168,208,.6); border-radius:5px;
  white-space:nowrap;   /* 与 .btn 同理：工具条里被压缩时不要断行 */
  background-color:rgba(255,255,255,.82);
  background-image:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.3) 50%,
                   rgba(255,255,255,0) 52%);
  color:#0b4d8c;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98),0 1px 2px rgba(8,30,60,.16);
  transition:transform .2s var(--ease),box-shadow .25s var(--ease);
}
.keyboard-trigger:hover{background-color:#e7f3ff;transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 0 16px rgba(110,195,255,.55)}
.keyboard-trigger[aria-expanded="true"]{
  background-color:var(--a-blue);background-image:linear-gradient(180deg,
    rgba(255,255,255,.5) 0%,rgba(255,255,255,.14) 46%,rgba(255,255,255,0) 100%);
  border-color:rgba(255,255,255,.5);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 0 16px rgba(96,190,255,.6);
}
/* 播放器工具条。
   `.btn` 只加了 white-space:nowrap 还不够：这一行是个 flex 容器，
   按钮默认 flex-shrink:1 会被压窄，nowrap 之后文字就会溢出/被裁。
   给 flex:none 让按钮保持自然宽度，放不下时整颗换行，而不是把字挤断。 */
.player-tools{color:var(--ink-mute);flex-wrap:wrap;row-gap:8px}
.player-tools .btn,
.player-tools .keyboard-trigger{flex:none}

/* 屏幕键盘面板 = Aero 弹出窗口 */
.keyboard-panel{
  border:1px solid rgba(255,255,255,.5);
  border-radius:11px;
  background-color:rgba(240,248,255,.95);
  background-image:linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.3) 40%,
                   rgba(255,255,255,.08) 58%,rgba(255,255,255,.02) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.7),
    inset 0 1px 0 rgba(255,255,255,1),
    0 0 0 1px rgba(16,54,96,.3),
    0 18px 48px -14px rgba(3,16,38,.72),
    0 0 46px rgba(110,190,255,.3);
  color:var(--ink);
}
.keyboard-header{
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.42));
  border-bottom:1px solid rgba(120,168,208,.5);
}
.keyboard-key{
  border:1px solid rgba(130,170,205,.85);
  border-radius:5px;
  background-color:rgba(255,255,255,.9);
  background-image:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.5) 48%,
                   rgba(255,255,255,.14) 52%,rgba(255,255,255,.02) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 2px 0 rgba(120,160,196,.75),
    0 3px 6px -3px rgba(6,26,54,.5);
  color:var(--ink);
  transition:transform .1s var(--ease),box-shadow .12s var(--ease),background-color .15s;
}
.keyboard-key:hover{border-color:rgba(110,185,245,.95);color:#0b4d8c}
.keyboard-key.is-pressed{
  transform:translateY(2px);
  background-color:#cfe6ff;
  border-color:rgba(110,185,245,.95);
  color:#08457e;
  box-shadow:
    inset 0 2px 5px rgba(8,32,62,.3),
    0 0 0 rgba(120,160,196,.75),
    0 0 14px rgba(110,195,255,.55);
}
.keyboard-control,.keyboard-preset{
  border-color:rgba(120,168,208,.6);border-radius:4px;
  background-color:rgba(255,255,255,.82);
  background-image:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.34) 50%,
                   rgba(255,255,255,0) 52%);
  color:var(--ink-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98),0 1px 2px rgba(8,30,60,.14);
}
.keyboard-control:hover,.keyboard-preset:hover{
  border-color:rgba(110,185,245,.95);background-color:#e7f3ff;color:#0b4d8c;
}
.keyboard-close{color:#b8302a}
.keyboard-binding-row select{background-color:rgba(255,255,255,.92)}
.keyboard-settings-intro span,.keyboard-hint,.keyboard-status{color:var(--ink-mute)}

/* 纯前端检索面板 */
.lf-scope{color:var(--ink)}
.lf-panel{
  border:0;border-radius:10px;
  background-color:rgba(255,255,255,.6);
  background-image:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.3));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.66),0 10px 26px -14px rgba(6,26,54,.55);
}
.lf-panel-title{color:var(--ink)}
.lf-panel-sub{color:var(--ink-mute)}
.lf-panel .progress{background:rgba(255,255,255,.85)}

/* Cloudflare 人机验证占位件保持原有「第三方控件」观感 */
.cf-mock{background:#fff}

/* 11.9 服务端补充组件（demo 原型里没有对应元素） */
/* 一次性提示：登录成功 / 邮箱验证结果 / 各类失败。
   三个状态各自给「整条渐变 + 左侧色条 + 同色光晕」——
   只覆盖 background-color 的话它只会在玻璃上变成一条扁平色带，
   看不出是 Aero 材质，所以玻璃高光 / 内描边 / 外光晕都要各自给全。*/
.flash{
  position:relative;
  border:1px solid rgba(255,255,255,.6);
  border-radius:8px;
  padding:10px 13px 10px 15px;
  font-size:13px; margin-bottom:14px; white-space:pre-wrap;
  color:var(--ink);
  background-color:rgba(255,255,255,.66);
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.66) 0px,rgba(255,255,255,.22) 30px,
                    rgba(255,255,255,.03) 100%),
    linear-gradient(100deg,rgba(255,255,255,.30) 0px,rgba(255,255,255,0) 180px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.5),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(16,54,96,.12),
    0 1px 3px rgba(8,30,60,.2),
    0 8px 18px -10px rgba(6,26,54,.5);
}
/* 左侧色条：玻璃本身不带语义色，靠这道竖条一眼区分成功/失败 */
.flash::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  border-radius:8px 0 0 8px;
}
.flash-ok{
  border-color:rgba(126,205,155,.6); color:#0d5f28;
  background-color:rgba(224,249,231,.7);
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.72) 0px,rgba(255,255,255,.26) 30px,
                    rgba(255,255,255,.04) 100%),
    linear-gradient(180deg,rgba(214,246,224,.85) 0%,rgba(198,240,212,.7) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.6),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(20,80,44,.14),
    0 1px 3px rgba(10,50,26,.18),
    0 0 18px rgba(120,220,160,.45);
}
.flash-ok::before{background:linear-gradient(180deg,#7ed49b,#31a85f)}
.flash-err{
  border-color:rgba(224,150,140,.62); color:#8f2118;
  background-color:rgba(255,236,233,.74);
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.72) 0px,rgba(255,255,255,.26) 30px,
                    rgba(255,255,255,.04) 100%),
    linear-gradient(180deg,rgba(255,228,224,.9) 0%,rgba(255,214,209,.72) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.6),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(96,26,20,.14),
    0 1px 3px rgba(80,20,16,.2),
    0 0 18px rgba(235,140,130,.45);
}
.flash-err::before{background:linear-gradient(180deg,#ef8175,#c33a2e)}
/* 空状态 */
.empty{padding:40px 0;text-align:center;color:var(--ink-soft);font-size:13px}
/* 侧栏内的模块：纵向间距交给 .col-side 的 gap，避免与 margin-bottom 叠加 */
.col-side .box{margin-bottom:0}
/* 侧栏里的标签云：沿用 .chipbar 的标签样式，但去掉它自带的玻璃条
   （标签已经装进 .box 模块里，再加一条玻璃底会双层堆叠）*/
.box .chipbar{
  display:flex; flex-wrap:wrap; gap:5px; margin:0; padding:0;
  background:none; box-shadow:none; font-size:12px; color:var(--ink-mute);
}
.box .chipbar .tag{font-size:11px;padding:1px 7px}
/* 投稿页进度条 */
.progress{border:0;border-radius:99px;background:rgba(255,255,255,.55);
  box-shadow:inset 0 1px 3px rgba(8,32,62,.22)}
.progress i{background-color:#4aa3e0;
  background-image:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 60%);
  box-shadow:0 0 10px rgba(96,190,255,.6)}
/* 前端校验内联错误 */
.field-err{color:#c22a26}

/* ==========================================================================
   12. 入场与揭示动画（克制：transform + opacity，绝不连动画）
   ========================================================================== */
/* ⚠ 全站规则：入场动画一律用 fill-mode: backwards，禁止 both / forwards。
   只要动画效果还挂着，Chrome 对 transform 的计算值就是单位矩阵
   matrix(1,0,0,1,0,0) 而不是 none（关键帧写 transform:none 也无效），
   该元素就永久成为包含块 —— 里面的 position:fixed 会按它定位而不是视口。
   实测事故：`.container` 用了 both，导致播放页「网页内全屏」只占窗内一块。*/
.aero-js .header{animation:aero-drop .72s var(--ease) backwards}
/* 滚动揭示（.rv/.rv.in 逐行浮现）已于 2026-09-22 移除：内容直接完整展示。 */

/* ==========================================================================
   13. 关键帧
   ========================================================================== */
@keyframes aero-fade{from{opacity:0}to{opacity:1}}
@keyframes aero-rise{
  from{opacity:0;transform:translate3d(0,18px,0)}
  to{opacity:1;transform:none}
}
@keyframes aero-drop{
  from{opacity:0;transform:translate3d(0,-16px,0)}
  to{opacity:1;transform:none}
}
@keyframes aero-sheen{
  0%{background-position:-80% 0}
  45%,100%{background-position:180% 0}
}
@keyframes aero-window-shine{
  0%{background-position:-80% 0;opacity:0}
  10%{opacity:1}
  68%{opacity:1}
  100%{background-position:180% 0;opacity:0}
}
@keyframes aero-sweep{
  0%{transform:translateX(-130%) skewX(-14deg);opacity:0}
  22%{opacity:1}
  100%{transform:translateX(130%) skewX(-14deg);opacity:0}
}
@keyframes aur-a{
  0%,100%{transform:translate3d(0,0,0) rotate(-15deg) scale(1)}
  50%{transform:translate3d(3%,-3.4%,0) rotate(-11deg) scale(1.06)}
}
@keyframes aur-b{
  0%,100%{transform:translate3d(0,0,0) rotate(9deg) scale(1.02)}
  50%{transform:translate3d(-3.6%,2.6%,0) rotate(13deg) scale(1)}
}
@keyframes aur-c{
  0%,100%{transform:translate3d(0,0,0) rotate(-7deg) scale(1)}
  50%{transform:translate3d(-2.6%,-2.2%,0) rotate(-3deg) scale(1.07)}
}
@keyframes blm-a{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-3%,3%,0) scale(1.09)}
}
@keyframes blm-b{
  0%,100%{transform:translate3d(0,0,0) scale(1.04)}
  50%{transform:translate3d(2.6%,-2.6%,0) scale(1)}
}
@keyframes blm-c{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-3.4%,-2%,0) scale(1.1)}
}

/* ==========================================================================
   14. 降级与适配
   ========================================================================== */
/* 页头/页脚已不再使用 backdrop-filter（见各处性能修订注释），上面的降级分支随之删除 */

@media (prefers-reduced-motion: reduce){
  .aero-desktop,.aur,.bloom,.header-in::after,
  .aero-js .header,.aero-js .container,.aero-js .footer,
  .tile:hover::before,.cov-bub{animation:none !important}
  *{transition-duration:.01ms !important}
}

/* 触屏 / 窄屏：减弱背景层的模糊成本，两栏并一栏 */
/* 手机端页头不固定（用户明确要求）：窄屏可视高度本来就紧，sticky 页头
   占掉一大块；而且没有 backdrop-filter 之后，sticky 带来的好处只剩「内容
   从玻璃下穿过」，窄屏上不值这个价。900px 与 style.css 既有的窄屏断点一致。 */
@media (max-width:900px){
  .header{position:static}
  /* 窄屏隐藏动态背景层（用户 2026-09-22 明确要求）：极光/光斑/光柱这三层
     是全屏动画 + 鼠标视差层，窄屏上背景基本被内容挡住看不见，只剩
     合成层内存和动画开销 —— 直接不渲染。静态壁纸(.aero-wall)和暗角保留，
     底色观感不变。 */
  .aero-far,.aero-near,.aero-beam{display:none}
  /* 手机端标签条只显示前 12 个：100 个标签在 375px 宽度下会换成 ~20 行，
     把整个首屏占满。桌面端不受影响，仍显示配置的全部数量。
     12 只写在这一处，纯展示层裁剪，不需要和任何 PHP/JS 常量对齐。 */
  .hs-tags .tag:nth-child(n+13){display:none}
}
@media (max-width:1024px){
  .cols{grid-template-columns:1fr}
  .col-side{flex-direction:row;flex-wrap:wrap;gap:14px}
  .col-side>.box{flex:1 1 300px;margin-bottom:0}
}
@media (max-width:860px){
  .wall{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:700px){
  .bloom.b1,.bloom.b2{opacity:.85}
  .container{margin:10px 8px 0;padding:12px 12px 4px;border-radius:10px}
  .header-in,.header-sub-in{padding-left:10px;padding-right:10px}
  .wall{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .footer{margin-top:14px}
}
@media (max-width:480px){
  .wall{grid-template-columns:repeat(2,minmax(0,1fr))}
}