/*
 * 枕潮听穹 · 全站外壳与设计系统 (shell.css)
 * ---------------------------------------------------------------------------
 * 视觉语言(全站统一,所有页面只引这一份基础样式):
 *   · 颜色向画面借:--a 主色 / --a2 副色 / --deep 暗部 / --lt 亮部 取自当前的壁纸或角色立绘,
 *     换画面时整页颜色平滑过渡;"选中""确定"一律用纸白(--paper)实心 + 墨色字,和游戏里一致;
 *   · 浮层是带细边的深色磨砂玻璃;对话框四角有一点刻线,提示条是两头渐隐的横幅,像游戏里的通知;
 *   · 圆角分层:画框 4、控件 8、菜单 12、面板 16;只有图标按钮和开关是圆的;
 *   · 竖排衬线题签与四角星光 ✦ 是仅有的装饰母题。
 * 不引用外部字体 / CDN:国内外都要能直接打开。
 */
@property --a { syntax: '<color>'; inherits: true; initial-value: #9fdbe6; }
@property --a2 { syntax: '<color>'; inherits: true; initial-value: #c9b6f2; }
@property --deep { syntax: '<color>'; inherits: true; initial-value: #0e1726; }
@property --lt { syntax: '<color>'; inherits: true; initial-value: #eaf4f8; }

:root {
  color-scheme: dark;
  --a: #9fdbe6;
  --a2: #c9b6f2;
  --deep: #0e1726;
  --lt: #eaf4f8;

  --paper: #f4f2ec;                 /* 纸白:正文、选中、主按钮 */
  --ink: #0d121b;                   /* 纸白底上的字 */
  --text: color-mix(in oklab, var(--paper) 92%, var(--lt));
  --text-2: color-mix(in oklab, var(--text) 70%, transparent);
  --text-3: color-mix(in oklab, var(--text) 46%, transparent);
  --line: rgba(244, 242, 236, .13);
  --line-2: rgba(244, 242, 236, .24);
  --line-3: rgba(244, 242, 236, .42);
  --hover: rgba(244, 242, 236, .08);
  --glow: color-mix(in oklab, var(--a) 70%, #fff);

  --glass: color-mix(in oklab, var(--deep) 62%, rgba(8, 12, 20, .36));
  --glass-2: color-mix(in oklab, var(--deep) 78%, rgba(7, 10, 17, .62));
  --glass-3: color-mix(in oklab, var(--deep) 86%, rgba(6, 9, 15, .8));
  --blur: blur(26px) saturate(1.45);
  --base: color-mix(in oklab, var(--deep) 72%, #04060b);
  --shadow: 0 22px 60px -22px rgba(0, 0, 0, .72);

  --r-frame: 4px;
  --r-ctl: 8px;
  --r-menu: 12px;
  --r-panel: 16px;
  --ease: cubic-bezier(.22, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --tint: .9s;

  --f-display: "LuckDisplay", "Noto Serif SC", "Source Han Serif SC", "Source Han Serif", "Songti SC", "STSong", serif;
  --f-ui: "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei",
          "Noto Sans SC", system-ui, -apple-system, sans-serif;
  --f-latin: "Segoe UI Variable Text", "SF Pro Text", "Inter", "Helvetica Neue", Arial, var(--f-ui);
  --f-italic: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;

  --top-h: 64px;
  --spark-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 1.8c.75 6.1 3.6 8.95 10.2 10.2-6.6 1.25-9.45 4.1-10.2 10.2-.75-6.1-3.6-8.95-10.2-10.2C8.4 10.75 11.25 7.9 12 1.8z%22/%3E%3C/svg%3E");
  transition: --a var(--tint) var(--ease), --a2 var(--tint) var(--ease),
              --deep var(--tint) var(--ease), --lt var(--tint) var(--ease);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--base);
  color: var(--text);
  font: 14px/1.6 var(--f-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: color-mix(in oklab, var(--a) 45%, transparent); color: #fff; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid color-mix(in oklab, var(--paper) 80%, var(--a)); outline-offset: 2px; }
img, canvas, video { display: block; }

svg.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6;
        stroke-linecap: round; stroke-linejoin: round; }
svg.i.fill { fill: currentColor; stroke: none; }
.v { writing-mode: vertical-rl; text-orientation: mixed; }
.num { font-family: var(--f-latin); font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .05), var(--shadow);
}
.glass-2 {
  background: var(--glass-2);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .05), var(--shadow);
}

/* ================================================================ 按钮 */
.ib {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  color: var(--text-2);
  transition: color .18s, background-color .18s, transform .12s;
}
.ib:hover { color: var(--text); background: var(--hover); }
.ib:active { transform: scale(.92); }
.ib[aria-pressed="true"], .ib[aria-expanded="true"] { color: var(--paper); background: rgba(244, 242, 236, .1); }
.ib.sm { width: 32px; height: 32px; }
.ib.sm svg.i { width: 17px; height: 17px; }
.ib:focus-visible { outline-offset: -2px; }
.ib:disabled { opacity: .35; cursor: default; }

.tbtn {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 10px; border-radius: var(--r-ctl); font-size: 13px; color: var(--text-2); white-space: nowrap;
  transition: color .18s, background-color .18s;
}
.tbtn:hover { color: var(--text); background: var(--hover); }
.tbtn svg.i { width: 16px; height: 16px; }
.tbtn[aria-pressed="true"] { color: var(--paper); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 16px; border-radius: var(--r-ctl); font-size: 13px; white-space: nowrap;
  color: var(--text); background: rgba(244, 242, 236, .06); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background-color .18s, box-shadow .18s, color .18s;
}
.btn:hover { background: rgba(244, 242, 236, .12); box-shadow: inset 0 0 0 1px var(--line-3); }
.btn.primary { color: var(--ink); font-weight: 600; background: var(--paper); box-shadow: none; }
.btn.primary:hover { background: #fff; }
.btn.danger { color: #ffd5d0; box-shadow: inset 0 0 0 1px rgba(255, 140, 120, .4); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn svg.i { width: 16px; height: 16px; }

/* ================================================================ 分段选项
   等宽格子 + 一块滑动的纸白底(由 shell.js 设 --i / --n);内衬 3px,内圆角 = 外圆角 - 内衬,
   两端和中间留白一致,选中前后尺寸不变。 */
.seg {
  --i: -1; --n: 1;
  position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 3px; border-radius: var(--r-ctl); background: rgba(4, 7, 12, .28); box-shadow: inset 0 0 0 1px var(--line);
  isolation: isolate;
}
.seg::before {
  content: ''; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px;
  width: calc((100% - 6px) / var(--n)); border-radius: calc(var(--r-ctl) - 3px);
  background: var(--paper); box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
  transform: translateX(calc(var(--i) * 100%)); opacity: 0;
  transition: transform .32s var(--ease-out), opacity .2s;
}
.seg.ready::before { opacity: 1; }
.seg.ready.none::before { opacity: 0; }
.seg.still::before { transition: none; }
.seg > button {
  position: relative; min-width: 0; height: 30px; padding: 0 12px; border-radius: calc(var(--r-ctl) - 3px);
  font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .22s;
}
.seg > button:hover { color: var(--text); }
.seg > button[aria-checked="true"] { color: var(--ink); }
.seg:not(.ready) > button[aria-checked="true"] { background: var(--paper); }
.seg > button:disabled { opacity: .35; cursor: not-allowed; }
.seg > button:focus-visible { outline-offset: -2px; }
.seg.block { display: grid; width: 100%; }

/* 选项多、要换行的一组:网格排列的小格子(不是胶囊套胶囊) */
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--chip-min, 88px), 1fr)); gap: 6px; }
.chip {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0;
  height: 32px; padding: 0 10px; border-radius: var(--r-ctl); font-size: 12.5px; color: var(--text-2);
  background: rgba(244, 242, 236, .04); box-shadow: inset 0 0 0 1px var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .18s, background-color .18s, box-shadow .18s;
}
.chip:hover { color: var(--text); background: rgba(244, 242, 236, .09); }
.chip[aria-pressed="true"], .chip[aria-checked="true"] { color: var(--ink); background: var(--paper); box-shadow: none; }
.chip svg.i { width: 14px; height: 14px; flex: none; }
.chip.dashed { box-shadow: inset 0 0 0 1px var(--line-2); background: transparent; border: 0; outline: 1px dashed var(--line-2); outline-offset: -1px; box-shadow: none; }

/* ================================================================ 开关 */
.switch {
  position: relative; width: 38px; height: 22px; flex: none; border-radius: 999px;
  background: rgba(244, 242, 236, .1); box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .2s;
}
.switch::after {
  content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-2); transition: transform .25s var(--ease-out), background-color .2s;
}
.switch[aria-checked="true"] { background: color-mix(in oklab, var(--a) 55%, rgba(244, 242, 236, .2)); box-shadow: none; }
.switch[aria-checked="true"]::after { transform: translateX(16px); background: var(--paper); }

/* ================================================================ 滑杆 */
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer;
  --p: 0%;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 3px; border-radius: 3px;
  background: linear-gradient(to right, var(--glow) var(--p), rgba(244, 242, 236, .16) var(--p));
}
input[type="range"]::-moz-range-track { height: 3px; border-radius: 3px; background: rgba(244, 242, 236, .16); }
input[type="range"]::-moz-range-progress { height: 3px; border-radius: 3px; background: var(--glow); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 13px; height: 13px; margin-top: -5px; border: 0; border-radius: 50%;
  background: var(--paper); box-shadow: 0 0 0 3px color-mix(in oklab, var(--a) 28%, transparent), 0 1px 4px rgba(0, 0, 0, .4);
  transition: transform .15s;
}
input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: var(--paper); }
input[type="range"]:hover::-webkit-slider-thumb, input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.18); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in oklab, var(--a) 55%, transparent); }

/* ================================================================ 输入框 */
.field { position: relative; display: flex; align-items: center; min-width: 0; }
.field > svg.i { position: absolute; left: 11px; width: 17px; height: 17px; color: var(--text-3); pointer-events: none; }
.field input, .field textarea {
  width: 100%; height: 38px; padding: 0 12px 0 35px; outline: 0; border: 0; border-radius: var(--r-ctl);
  background: rgba(4, 7, 12, .28); box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .18s, background-color .18s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field input:focus, .field textarea:focus { background: rgba(4, 7, 12, .4); box-shadow: inset 0 0 0 1px var(--line-3); }
.field input::-webkit-search-cancel-button { filter: invert(.7); }
.field.plain input { padding-left: 12px; }
.field textarea { height: auto; padding: 10px 12px; resize: vertical; }

kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
  margin-right: 3px; border-radius: 6px; font: 500 11.5px/1 var(--f-latin); color: var(--text);
  background: rgba(244, 242, 236, .07); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 -1px 0 var(--line-2);
}

/* ================================================================ 弹出菜单 */
.menu {
  position: fixed; z-index: 120; min-width: 196px; max-width: min(320px, calc(100vw - 16px)); padding: 6px; border-radius: var(--r-menu);
  background: var(--glass-3); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 50px -14px rgba(0, 0, 0, .75);
  animation: pop-in .18s var(--ease-out);
}
.menu button, .menu a, .menu label {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px; border-radius: var(--r-ctl);
  font-size: 13px; text-align: left; color: var(--text-2); cursor: pointer;
}
.menu button:hover, .menu a:hover, .menu label:hover, .menu button:focus-visible, .menu a:focus-visible { color: var(--text); background: var(--hover); outline: none; }
.menu [aria-checked="true"] { color: var(--text); }
.menu [aria-checked="true"]::after { content: ''; margin-left: auto; width: 6px; height: 6px; transform: rotate(45deg); background: var(--paper); }
.menu hr { margin: 6px 8px; border: 0; border-top: 1px solid var(--line); }
.menu svg.i { width: 17px; height: 17px; color: var(--text-3); }
.menu kbd { margin: 0 0 0 auto; }
.menu .menu-note { padding: 6px 10px 4px; font-size: 11.5px; line-height: 1.6; color: var(--text-3); }
@keyframes pop-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes fade-in { from { opacity: 0; } }

/* ================================================================ 提示:两头渐隐的横幅 */
.toasts {
  position: fixed; z-index: 140; left: 50%; top: calc(var(--top-h) + 14px + env(safe-area-inset-top)); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(640px, 100vw); pointer-events: none;
}
body[data-shell="immersive"] .toasts { top: calc(18px + env(safe-area-inset-top)); }
.toast {
  --l: rgba(244, 242, 236, .38);
  position: relative; max-width: 100%; padding: 9px 64px; text-align: center;
  font-size: 13.5px; letter-spacing: .04em; color: var(--text);
  background: linear-gradient(90deg, transparent, rgba(7, 10, 17, .84) 22%, rgba(7, 10, 17, .84) 78%, transparent);
  animation: toast-in .42s var(--ease-out) both;
}
.toast::before, .toast::after {
  content: ''; position: absolute; left: 6%; right: 6%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--l) 30%, var(--l) 70%, transparent);
  animation: toast-line .6s var(--ease-out) both;
}
.toast::before { top: 0; }
.toast::after { bottom: 0; }
.toast b { font-weight: 600; color: var(--paper); }

/* ================================================================ 自定义界面 */
[data-ui] { transition-property: translate, scale, opacity, visibility; transition-duration: .3s; transition-timing-function: var(--ease-out); }
body.ui-editing [data-ui] { transition-duration: 0s; }
/* 桌面端:「更多 → 桌面」 */
.desk { display: grid; gap: 16px; min-width: min(380px, 78vw); }
.desk-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; font-size: 14px; color: var(--text); }
.desk-acts { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
/* 桌面端屏保:不要鼠标指针 */
body.app-saver, body.app-saver * { cursor: none !important; }
.ui-hide { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
.pl.ui-hide.open { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }
body.ui-pure .top, body.ui-pure #page, body.ui-pure .pl:not(.open) { visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .35s, visibility 0s .35s; }
body.ui-pure .backdrop-veil { opacity: 0; transition: opacity .5s; }
/* 只剩背景时不该还能滚动(也不出滚动条):纯净模式、桌面端的壁纸和屏保 */
html:has(> body.ui-pure), html:has(> body.app-wallpaper), html:has(> body.app-saver) { overflow: hidden; scrollbar-width: none; }
body.ui-pure, body.app-wallpaper, body.app-saver { overflow: hidden; }
/* 「不响应点击」:看得见,点不到(桌面端壁纸上防误触;点击落到背景上) */
.ui-pass, .ui-pass * { pointer-events: none !important; }
/* 底板(名字牌、控制条)「藏起来」= 只去掉底色,里面的东西照常 */
.ui-nobg { background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-color: transparent !important; }
.ui-nobg::before, .ui-nobg::after { display: none !important; }

/* ---- 自定义界面(编辑时):层级在对话框(130)之下,确认框点得到 */
body.ui-editing .ui-hide { visibility: visible !important; opacity: .3 !important; }
body.ui-editing .ui-restore, body.ui-editing .desk-bar { display: none !important; }
body.ui-dragging, body.ui-dragging * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
.ui-layer { position: fixed; inset: 0; z-index: 125; touch-action: none; user-select: none; -webkit-user-select: none; }
.ui-box {
  position: absolute; border-radius: 8px; outline: 1px dashed rgba(244, 242, 236, .45); outline-offset: 2px;
  background: rgba(159, 219, 230, .04); cursor: grab; touch-action: none;
}
.ui-box.bg { outline-style: dotted; background: transparent; }
.ui-box:hover, .ui-box:focus-visible { outline: 1.5px solid rgba(244, 242, 236, .85); background: rgba(159, 219, 230, .1); }
.ui-box.sel { outline: 2px solid var(--paper); background: rgba(159, 219, 230, .14); }
.ui-box.off { outline-color: rgba(244, 242, 236, .35); background: repeating-linear-gradient(135deg, rgba(5, 8, 14, .45) 0 6px, rgba(5, 8, 14, .2) 6px 12px); }
.ui-box.pass::before { content: '不响应点击'; position: absolute; right: 2px; bottom: 2px; padding: 1px 6px; border-radius: 5px; font-size: 11px; color: var(--text-2); background: rgba(10, 14, 22, .8); pointer-events: none; }
.ui-box.grp { outline-color: rgba(159, 219, 230, .7); }
.ui-label {
  position: absolute; left: -2px; top: -27px; padding: 2px 8px; border-radius: 6px; font-size: 12px; white-space: nowrap; pointer-events: none;
  color: #0b0f17; background: var(--paper); box-shadow: 0 2px 10px rgba(0, 0, 0, .35); opacity: 0; transition: opacity .12s;
}
.ui-box:hover .ui-label, .ui-box.sel .ui-label, .ui-box:focus-visible .ui-label { opacity: 1; }
.ui-box.low .ui-label { top: auto; bottom: -27px; }
.ui-eye {
  position: absolute; right: -10px; top: -12px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  color: #0b0f17; background: var(--paper); box-shadow: 0 2px 10px rgba(0, 0, 0, .45); opacity: 0; transition: opacity .12s;
}
.ui-eye svg.i { width: 14px; height: 14px; }
.ui-box:hover .ui-eye, .ui-box.sel .ui-eye, .ui-box.off .ui-eye { opacity: 1; }
.ui-sel { position: absolute; pointer-events: none; border-radius: 10px; box-shadow: 0 0 0 1px rgba(159, 219, 230, .9); }
.ui-resize {
  position: absolute; right: -8px; bottom: -8px; width: 16px; height: 16px; border-radius: 50%; pointer-events: auto; cursor: nwse-resize; touch-action: none;
  background: var(--paper); box-shadow: 0 0 0 3px rgba(10, 14, 22, .7), 0 2px 8px rgba(0, 0, 0, .5);
}
.ui-marquee { position: absolute; border-radius: 4px; border: 1px solid rgba(159, 219, 230, .9); background: rgba(159, 219, 230, .12); pointer-events: none; }
.ui-bar {
  position: fixed; z-index: 126; left: 50%; top: calc(74px + env(safe-area-inset-top)); transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; width: max-content; max-width: calc(100vw - 24px);
  padding: 10px 12px; border-radius: 16px; background: rgba(10, 14, 22, .9);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 0 0 1px var(--line), 0 20px 50px -20px rgba(0, 0, 0, .9); animation: pop-in .25s var(--ease-out);
}
.ui-bar.moved { transform: none; animation: none; }
.ui-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ui-bar-row.sel { padding-top: 8px; border-top: 1px solid var(--line); }
.ui-bar-row .btn { height: 32px; padding: 0 12px; font-size: 13px; }
.ui-bar-grip { display: grid; place-items: center; width: 22px; height: 32px; color: var(--text-3); cursor: move; touch-action: none; }
.ui-bar-title { margin-right: 6px; font-size: 14px; color: var(--paper); }
.ui-sel-name { min-width: 72px; max-width: 220px; margin-right: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: var(--text); }
.ui-size-ctl { display: inline-flex; align-items: center; gap: 2px; }
.ui-size { min-width: 46px; text-align: center; font-size: 13px; color: var(--text); }

/* ---- 桌面端「编辑壁纸」 */
.desk-bar {
  position: fixed; z-index: 124; left: 50%; top: calc(18px + env(safe-area-inset-top)); transform: translateX(-50%);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px 8px 16px; border-radius: 14px;
  background: rgba(10, 14, 22, .9); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 0 0 1px var(--line), 0 20px 50px -20px rgba(0, 0, 0, .9);
}
.desk-bar b { margin-right: 6px; font-size: 14px; color: var(--paper); }
.desk-bar .btn { height: 32px; padding: 0 12px; font-size: 13px; }
.ui-restore { position: fixed; z-index: 140; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity .3s; }
.ui-restore.on { opacity: 1; pointer-events: auto; }

/* ================================================================ 公告 */
.notice { font-size: 14px; line-height: 1.85; color: var(--text); }
.notice p { margin: 0 0 .8em; }
.notice a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }
.notice-date { margin-bottom: 10px !important; font-size: 12px; letter-spacing: .1em; color: var(--text-3); }
.notice-list { display: flex; flex-direction: column; gap: 6px; max-height: min(62vh, 560px); overflow: auto; margin: 0 -6px; padding: 0 6px; }
.notice-item { border-radius: 10px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--line); }
.notice-item summary { display: flex; align-items: baseline; gap: 12px; padding: 11px 14px; cursor: pointer; list-style: none; }
.notice-item summary::-webkit-details-marker { display: none; }
.notice-item summary b { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; color: var(--paper); }
.notice-item summary .num { font-size: 12px; color: var(--text-3); }
.notice-item.new summary b::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--glow); vertical-align: 2px; }
.notice-item .notice { padding: 0 14px 6px; }
.notice-item .notice-date { display: none; }
#btnMore.has-new::after { content: ''; position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 0 2px rgba(8, 12, 20, .8); }
.toast .t-mark { display: inline-block; width: 5px; height: 5px; margin: 0 10px 2px 0; transform: rotate(45deg); background: var(--glow); vertical-align: middle; }
.toast.warn .t-mark { background: #ffb59e; }
.toast.out { animation: toast-out .3s var(--ease) both; }
.toast .t-act {
  pointer-events: auto; margin-left: 14px; padding: 2px 0; border-bottom: 1px solid var(--line-3);
  font-size: 13px; color: var(--paper);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes toast-line { from { transform: scaleX(.2); opacity: 0; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-4px); } }

/* ================================================================ 对话框:细边面板 + 四角刻线 */
.modal {
  position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(3, 5, 9, .55); animation: fade-in .18s;
}
.dialog {
  --c: rgba(244, 242, 236, .5);
  position: relative; width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 24px 26px 20px;
  border-radius: 6px; background: var(--glass-3); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: inset 0 0 0 1px var(--line), 0 30px 80px -24px rgba(0, 0, 0, .85);
  animation: pop-in .22s var(--ease-out);
}
.dialog::before {
  content: ''; position: absolute; inset: 5px; pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) top left / 12px 1px, linear-gradient(var(--c), var(--c)) top left / 1px 12px,
    linear-gradient(var(--c), var(--c)) top right / 12px 1px, linear-gradient(var(--c), var(--c)) top right / 1px 12px,
    linear-gradient(var(--c), var(--c)) bottom left / 12px 1px, linear-gradient(var(--c), var(--c)) bottom left / 1px 12px,
    linear-gradient(var(--c), var(--c)) bottom right / 12px 1px, linear-gradient(var(--c), var(--c)) bottom right / 1px 12px;
  background-repeat: no-repeat;
}
.dialog.wide { width: min(680px, 100%); }
.dialog h2 { font: 600 17px/1.4 var(--f-ui); letter-spacing: .04em; color: var(--paper); }
.dialog .d-body { margin-top: 12px; font-size: 13.5px; line-height: 1.8; color: var(--text-2); }
.dialog .d-body p + p { margin-top: 8px; }
.dialog .d-body code { font-family: Consolas, "Cascadia Mono", monospace; font-size: 12.5px; color: var(--text); }
.dialog .field { margin-top: 14px; }
.dialog textarea.code {
  width: 100%; height: 240px; margin-top: 14px; padding: 12px 14px; border: 0; outline: 0; resize: vertical; border-radius: var(--r-ctl);
  font: 12.5px/1.6 Consolas, "Cascadia Mono", monospace; color: var(--text); background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px var(--line);
}
.dialog .d-acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.dialog .d-acts .btn { min-width: 84px; }

/* ================================================================ 滚动条 */
* { scrollbar-width: thin; scrollbar-color: rgba(244, 242, 236, .18) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 10px; background: rgba(244, 242, 236, .16) padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(244, 242, 236, .28); }
::-webkit-scrollbar-track { background: transparent; }

/* ================================================================ 全站背景层 */
#backdrop { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; }
.backdrop-veil {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(5, 8, 14, calc(.5 * var(--veil, 1))) 0, transparent 150px),
    linear-gradient(to top, rgba(5, 8, 14, calc(.45 * var(--veil, 1))) 0, transparent 200px),
    radial-gradient(130% 90% at 50% 45%, transparent 40%, rgba(4, 7, 12, calc(.42 * var(--veil, 1))) 100%);
}
#backdrop.loading + .backdrop-veil { animation: veil-wait 1.6s ease-in-out infinite; }
@keyframes veil-wait { 50% { opacity: .82; } }

/* ================================================================ 标题栏 */
.top {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 22px;
  height: var(--top-h); padding: env(safe-area-inset-top) max(26px, env(safe-area-inset-right)) 0 max(26px, env(safe-area-inset-left));
  transition: background-color .35s, box-shadow .35s;
}
.top.stuck {
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: inset 0 -1px 0 var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand-ic { position: relative; width: 30px; height: 30px; flex: none; }
.brand-ic img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 1.2s var(--ease); }
.brand-ic img + img { opacity: 0; }
.brand-ic.alt img:first-child { opacity: 0; }
.brand-ic.alt img + img { opacity: 1; }
.brand-name { font: 800 18px/1 var(--f-display); letter-spacing: .16em; color: var(--text); text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.nav { display: flex; align-items: center; gap: 4px; flex: none; }
.nav a {
  position: relative; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px;
  font-size: 13.5px; letter-spacing: .06em; color: var(--text-2); border-radius: var(--r-ctl); transition: color .18s;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--paper); }
.nav a[aria-current="page"]::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; background: var(--paper);
  -webkit-mask: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
}
.nav .glyph { width: 16px; height: 16px; }
.glyph { display: inline-block; flex: none; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.page-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; min-width: 0; }
.page-tools:empty { display: none; }
.global-tools { display: flex; align-items: center; gap: 2px; flex: none; }
.page-tools:empty + .global-tools { margin-left: auto; }
.top .ib { color: var(--text); filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .35)); }
.top .ib:hover { filter: none; }
.top .sep { width: 1px; height: 20px; margin: 0 6px; background: var(--line-2); flex: none; }

/* 当前在放的歌:标题栏音乐按钮下面一条细光,跟着节奏轻轻跳 */
#btnPlayer .eqline { position: absolute; left: 11px; right: 11px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--glow); transform: scaleX(0); transition: transform .3s; }
body.music-on #btnPlayer .eqline { transform: scaleX(var(--lvl, .35)); transition: transform .08s linear; }

.foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px;
  padding: 26px max(26px, env(safe-area-inset-left)) calc(110px + env(safe-area-inset-bottom));
  font-size: 12px; color: var(--text-3); text-align: center;
}
.foot .logo { width: 64px; height: 42px; --m: var(--logo); color: var(--text-3); }
.foot-beian { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; width: 100%; }
.foot-beian a { color: var(--text-3); text-decoration: none; }
.foot-beian a:hover { color: var(--text-2); text-decoration: underline; }

/* ================================================================ 侧边面板(背景、音乐、我的数据) */
.sheet {
  position: fixed; z-index: 90; top: 12px; right: 12px; bottom: 12px; width: min(408px, calc(100vw - 24px));
  display: flex; flex-direction: column; border-radius: var(--r-panel); overflow: hidden;
  background: var(--glass-2); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: inset 0 0 0 1px var(--line), 0 24px 60px -20px rgba(0, 0, 0, .75);
  animation: sheet-in .32s var(--ease-out);
}
@keyframes sheet-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } }
.sh-head { display: flex; align-items: center; gap: 8px; padding: 16px 12px 6px 22px; flex: none; }
.sh-head h2 { flex: 1; font: 800 19px/1.2 var(--f-display); letter-spacing: .14em; }
.sh-tabs { display: flex; gap: 2px; padding: 0 14px; border-bottom: 1px solid var(--line); flex: none; overflow-x: auto; scrollbar-width: none; }
.sh-tabs::-webkit-scrollbar { display: none; }
.sh-tabs button {
  position: relative; flex: none; height: 40px; padding: 0 10px; font-size: 13px; color: var(--text-3); transition: color .18s;
}
.sh-tabs button:hover { color: var(--text); }
.sh-tabs button[aria-selected="true"] { color: var(--text); }
.sh-tabs button[aria-selected="true"]::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--paper);
}
.sh-body { flex: 1; min-height: 0; overflow: auto; padding: 16px 20px 22px; overscroll-behavior: contain; }
.sh-foot { display: flex; align-items: center; gap: 2px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); flex: none; }
.sh-info { margin-left: auto; padding-right: 8px; font: 11px/1 var(--f-latin); color: var(--text-3); white-space: nowrap; }

/* 面板里的一行设置 */
.pane > * + * { margin-top: 16px; }
.ctl { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; }
.ctl input[type="range"] { grid-column: 1 / -1; }
.ctl-label { font-size: 13px; color: var(--text); }
.ctl-label small { display: block; margin-top: 1px; font-size: 11.5px; color: var(--text-3); }
.ctl .val { font: 12px/1 var(--f-latin); font-variant-numeric: tabular-nums; color: var(--text-3); }
.ctl.changed .val { color: var(--paper); }
.ctl.stack { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ctl.stack .seg { width: 100%; display: grid; }
.ctl.row .switch { justify-self: end; }
.sub-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.sub-h::before { content: ''; width: 5px; height: 5px; transform: rotate(45deg); background: var(--line-3); }
.note { font-size: 12px; line-height: 1.7; color: var(--text-3); }

/* ================================================================ 跨页过渡 */
::view-transition-group(*) { animation-duration: .58s; animation-timing-function: var(--ease-out); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .36s; }
::view-transition-old(luck-art), ::view-transition-new(luck-art) { height: 100%; object-fit: cover; }

/* ================================================================ 小屏 */
@media (max-width: 860px) {
  .top { gap: 12px; }
  .nav a { padding: 0 9px; }
}
@media (max-width: 700px) {
  :root { --top-h: 56px; }
  .top { flex-wrap: wrap; height: auto; min-height: var(--top-h); row-gap: 0;
         padding: env(safe-area-inset-top) max(10px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); }
  .brand { height: var(--top-h); }
  .brand-name { font-size: 16px; letter-spacing: .12em; }
  .brand-ic { width: 26px; height: 26px; }
  .nav { display: none; }
  .global-tools { margin-left: auto; }
  .page-tools { order: 3; width: 100%; margin: 0 0 8px; }
  .sheet { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: min(80vh, 720px); border-radius: var(--r-panel) var(--r-panel) 0 0; animation-name: sheet-up; }
  .toasts { width: 100vw; }
  .toast { padding: 9px 40px; font-size: 13px; }
  .dialog { padding: 22px 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ================================================================ 全局面板:背景设置 */
.bg-sheet .sh-presets { --chip-min: 76px; padding: 8px 20px 14px; flex: none; }
.chip.user { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--a) 50%, transparent); }
.chip .chip-n { margin-left: 2px; font-size: 11px; opacity: .6; }
.src-sub > * + * { margin-top: 14px; }
.pane-builtin > * + * { margin-top: 14px; }
.wall-groups { --chip-min: 72px; }
.wall-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.wall-nav .btn { min-width: 0; padding: 0 6px; gap: 4px; white-space: nowrap; }
.wall-cycle.on { color: var(--paper); box-shadow: inset 0 0 0 1px var(--line-3); }
.wall-cycle span { overflow: hidden; text-overflow: ellipsis; }

/* 来源页:上面的按钮固定,只有缩略图 / 列表滚动(翻到很下面也不用回去找按钮) */
.sh-body.split { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
.sh-body.split > .pane-src:not([hidden]) { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.pane-src > * + * { margin-top: 0; }
.src-head { flex: none; padding-bottom: 14px; }
.src-head > * + * { margin-top: 14px; }
.src-head > .src-sub[hidden] { display: none; }
.src-scroll {
  flex: 1; min-height: 0; overflow: auto; margin: 0 -20px; padding: 2px 20px 22px; overscroll-behavior: contain;
  border-top: 1px solid transparent; transition: border-color .2s;
}
.pane-src.scrolled .src-scroll { border-top-color: var(--line); }
.pane-src.no-scroll .src-scroll { display: none; }
/* 手机上:预设和分组各收成一行,左右滑着选,把地方让给缩略图 */
@media (max-width: 700px) {
  .bg-sheet .sh-presets, .wall-groups {
    display: flex; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent);
  }
  .bg-sheet .sh-presets { margin: 0; }
  .bg-sheet .sh-presets::-webkit-scrollbar, .wall-groups::-webkit-scrollbar { display: none; }
  .bg-sheet .sh-presets > .chip, .wall-groups > .chip { flex: none; min-width: 72px; overflow: visible; }
}
/* 屏幕太矮(横着拿的手机)时固定区会占满,改回整页一起滚 */
@media (max-height: 560px) {
  .sh-body.split { display: block; overflow: auto; padding-bottom: 22px; }
  .sh-body.split > .pane-src:not([hidden]) { display: block; }
  .src-scroll { overflow: visible; margin: 0; padding: 0; border: 0; }
}
/* 正在下载的那张缩略图:底部一条进度 */
.pick.loading::before {
  content: ''; position: absolute; z-index: 2; left: 0; bottom: 0; height: 3px; width: calc(var(--load, 0) * 100%);
  background: var(--paper); box-shadow: 0 0 8px rgba(255, 255, 255, .5); transition: width .2s linear;
}
.pick.loading img { filter: brightness(.7); }
.pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pick {
  position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden;
  background: rgba(244, 242, 236, .05); box-shadow: inset 0 0 0 1px var(--line);
}
.pick img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.pick:hover img { transform: scale(1.05); }
.pick .pick-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 7px 4px; font-size: 11.5px; text-align: left; color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .62));
}
.pick::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; transition: box-shadow .2s; }
.pick[aria-pressed="true"]::after { box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 4px rgba(6, 9, 15, .5); }
.pick-fav {
  position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  color: rgba(244, 242, 236, .8); background: rgba(6, 9, 15, .5); opacity: 0; transition: opacity .15s;
}
.pick-fav svg.i { width: 12px; height: 12px; }
.pick:hover .pick-fav, .pick-fav[aria-pressed="true"] { opacity: 1; }
.pick-fav[aria-pressed="true"] { color: var(--paper); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--a) 70%, #fff); }
.pick.follow { display: grid; place-items: center; background: rgba(244, 242, 236, .06); }
/* 立绘当背景:角色用卡片组件(3:4,和列表页同样的取景) */
.pick-grid.chars { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pick.char { aspect-ratio: 3 / 4; }
.pick.char .card-art { border-radius: inherit; }
.pick.char .pick-name { z-index: 2; padding: 14px 5px 4px; font-size: 11px; text-align: center; }
.pick.char.follow { grid-column: span 2; aspect-ratio: auto; }
.pick-follow { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 10px; font-size: 12px; text-align: center; color: var(--text-2); }
.pick-follow svg.i { color: var(--paper); }
.pick-follow b { font-weight: 500; }
.dropzone {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px;
  border-radius: var(--r-panel); border: 1px dashed var(--line-2); color: var(--text-2); text-align: center; transition: border-color .2s, background-color .2s;
}
.dropzone:hover { border-color: var(--line-3); color: var(--text); background: rgba(244, 242, 236, .04); }
.dropzone svg.i { width: 26px; height: 26px; color: var(--paper); }
.dropzone b { font-size: 14px; font-weight: 500; color: var(--text); }
.dropzone small { font-size: 11.5px; line-height: 1.6; color: var(--text-3); }
.pane-files > * + * { margin-top: 14px; }
.url-row { display: flex; gap: 8px; }
.url-row .field { flex: 1; }
.file-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.file-list li { display: flex; align-items: center; gap: 2px; }
.file-use {
  flex: 1; min-width: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center;
  padding: 6px; border-radius: var(--r-ctl); text-align: left; transition: background-color .15s;
}
.file-use:hover { background: var(--hover); }
.file-use[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--line-3); }
.file-use img, .file-use video { width: 64px; height: 40px; object-fit: cover; border-radius: 4px; background: #000; }
.file-use b { display: block; overflow: hidden; font-size: 12.5px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.file-use small { font-size: 11px; color: var(--text-3); }
.file-list .none { font-size: 12px; line-height: 1.7; color: var(--text-3); }
.swatches { display: flex; gap: 18px; }
.swatch { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.swatch input { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.swatch input::-webkit-color-swatch-wrapper { padding: 0; }
.swatch input::-webkit-color-swatch { border: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); }
.swatch input::-moz-color-swatch { border: 0; border-radius: 50%; }
.water-try { display: flex; }

/* ================================================================ 全局面板:我的数据 */
.data-sheet .sh-body > * + * { margin-top: 16px; }
.ds-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ds-stat { padding: 10px 12px; border-radius: var(--r-ctl); background: rgba(244, 242, 236, .04); box-shadow: inset 0 0 0 1px var(--line); }
.ds-stat small { display: block; font-size: 11.5px; color: var(--text-3); }
.ds-stat b { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; }
.ds-persist { grid-column: 1 / -1; }
.ds-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ds-list { display: flex; flex-direction: column; gap: 4px; }
.ds-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ds-row:last-child { border-bottom: 0; }
.ds-row b { display: block; font-size: 13px; font-weight: 500; }
.ds-row small { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.6; color: var(--text-3); }

/* 键盘操作 */
dl.keys { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; font-size: 13px; }
dl.keys dt { white-space: nowrap; }
dl.keys dd { color: var(--text-2); align-self: center; }
.keys-foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }

/* 拖文件进来 */
.drop-hint {
  position: fixed; inset: 12px; z-index: 150; display: flex; align-items: center; justify-content: center; border-radius: 22px;
  background: color-mix(in oklab, var(--deep) 40%, rgba(5, 8, 14, .5));
  box-shadow: inset 0 0 0 2px var(--line-3), inset 0 0 80px -20px var(--a);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; animation: fade-in .15s;
}
.drop-hint p { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--text); }
.drop-hint svg.i { width: 26px; height: 26px; color: var(--paper); }

/* 站内跳转时顶部的一根细进度线 */
.nav-bar {
  position: fixed; z-index: 200; left: 0; top: 0; height: 2px; width: 100%; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--paper) 40%, var(--glow));
  transform: scaleX(0); transform-origin: left; opacity: 0; transition: transform 2.5s cubic-bezier(.1, .7, .2, 1), opacity .3s;
}
.nav-bar.on { transform: scaleX(.85); opacity: 1; }
.soft-nav::view-transition-old(root) { animation: .22s var(--ease) both vt-fade-out; }
.soft-nav::view-transition-new(root) { animation: .32s var(--ease-out) both vt-rise; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-rise { from { opacity: 0; transform: translateY(10px); } }

/* ================================================================ 音乐播放器
   面板:正在放的歌 · 频谱 · 进度 ·〔歌词〕· 控制 · 音量和开关 ·〔播放列表与曲库〕
   方括号里的两块是可收起的抽屉:高度从 0 过渡到目标高度,收起时不占位置、读屏也读不到;
   底下那排开关是大小固定的方块,数值做成角标,怎么设都不会把别的东西挤走 */
.pl { position: fixed; z-index: 70; left: max(18px, env(safe-area-inset-left)); bottom: calc(18px + env(safe-area-inset-bottom)); }
.pl .when-playing { display: none; }
.pl.playing .when-playing { display: block; }
.pl.playing .when-paused { display: none; }
.pl-mini {
  position: relative; display: flex; align-items: center; gap: 2px; width: 320px; height: 62px; padding: 8px 6px 8px 8px;
  border-radius: 14px; overflow: hidden;
}
.pl.open .pl-mini { display: none; }
.pl-mini-open { position: relative; display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; height: 46px; text-align: left; }
.pl-cover, .pl-art {
  position: relative; z-index: 1; flex: none; width: 46px; height: 46px; border-radius: 8px; overflow: hidden;
  background: radial-gradient(circle at 30% 25%, color-mix(in oklab, var(--a) 55%, transparent), transparent 70%), rgba(244, 242, 236, .07);
}
.pl-cover::before, .pl-art::before {
  content: ''; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px;
  background: var(--paper); opacity: .85;
  -webkit-mask: var(--spark-mask) center / contain no-repeat; mask: var(--spark-mask) center / contain no-repeat;
}
.pl-cover img, .pl-art img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.pl.playing .pl-cover { box-shadow: 0 0 0 1px color-mix(in oklab, var(--a) 50%, transparent), 0 0 18px -4px var(--a); }
.pl.buffering .pl-cover::after { content: ''; position: absolute; inset: 0; z-index: 3; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .25), transparent 70%) -100% 0 / 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: 100% 0; } }
.pl-meta { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-title { overflow: hidden; font-size: 13.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.pl-artist { overflow: hidden; font-size: 11.5px; color: var(--text-3); white-space: nowrap; text-overflow: ellipsis; transition: color .3s; }
.pl-artist.lyric { color: color-mix(in oklab, var(--paper) 78%, var(--a)); animation: lyric-in .45s var(--ease-out); }
@keyframes lyric-in { from { opacity: 0; transform: translateY(4px); } }
.pl-mini-viz { position: absolute; left: -8px; bottom: -8px; height: 70%; width: calc(100% + 108px); pointer-events: none; }
.pl-play { color: var(--text); }
/* 浏览器要等访客点一下才出声:播放按钮轻轻呼吸,小播放条上写着「点页面任意处接着放」 */
.pl.need-tap .pl-play, .pl.need-tap .pl-bigplay { animation: tap-breathe 1.9s ease-in-out infinite; }
@keyframes tap-breathe { 50% { box-shadow: 0 0 0 7px color-mix(in oklab, var(--glow) 30%, transparent); } }
.pl-mini .ib.sm { color: var(--text-2); }
.pl-mini-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; transform: scaleX(0); transform-origin: left;
  background: var(--glow); transition: transform .25s linear;
}

.pl-panel {
  display: flex; flex-direction: column; width: 400px;
  max-height: min(820px, calc(100vh - 36px - env(safe-area-inset-bottom) - env(safe-area-inset-top)));
  padding: 16px 16px 8px; border-radius: var(--r-panel); animation: pop-in .25s var(--ease-out);
  overflow: hidden;
}
/* 面板里每一块都不许比面板宽:长歌名、长歌单名一律省略号;除了两个抽屉,别的都不被挤压 */
.pl-panel > * { flex: none; min-width: 0; }
.pl-head { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.pl-art { width: 64px; height: 64px; border-radius: 10px; box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .7); cursor: pointer; }
.pl-art::before { width: 24px; height: 24px; }
.pl-head-meta { min-width: 0; }
.pl-big-title { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 16px; font-weight: 600; line-height: 1.35; }
.pl-big-sub { display: block; overflow: hidden; margin-top: 3px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; text-overflow: ellipsis; }
.pl-head-acts { display: flex; align-self: start; margin: -6px -6px 0 0; }
.pl-viz { width: 100%; height: 44px; margin: 8px 0 0; transition: height .34s var(--ease-out); }
.pl.lyrics-on .pl-viz { height: 26px; }
.pl-seek { display: grid; grid-template-columns: 40px 1fr 40px; gap: 8px; align-items: center; }
.pl-t { font-size: 11.5px; color: var(--text-3); }
.pl-t:last-child { text-align: right; }
.pl-ctrl { display: grid; grid-template-columns: repeat(5, auto); justify-content: center; align-items: center; gap: 14px; margin: 4px 0 8px; }
.pl-ctrl .ib { color: var(--text); }
.pl-ctrl .ib.sm { color: var(--text-3); }
.pl-ctrl .ib.sm[aria-pressed="true"] { color: var(--paper); }
.pl-bigplay {
  width: 52px; height: 52px; color: var(--ink) !important; background: var(--paper);
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .6);
}
.pl-bigplay:hover { background: #fff; }
.pl-bigplay svg.i { width: 22px; height: 22px; }
.pl-repeat .pl-one {
  position: absolute; right: 3px; top: 3px; display: none; min-width: 12px; height: 12px; border-radius: 6px;
  font: 700 8.5px/12px var(--f-latin); font-style: normal; color: var(--ink); background: var(--paper);
}
.pl-repeat[data-mode="one"] .pl-one { display: block; }

/* 音量(左)和四个开关(右):中间留出空当;音量条有最大宽度,开关之间有间距,歌词 / 播放列表这两个和设置类的用细线隔开 */
.pl-extra { display: flex; align-items: center; gap: 18px; padding: 2px 0 10px; }
.pl-volume { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; max-width: 196px; }
.pl-volume .pl-vol { flex: 1; width: auto; min-width: 48px; margin: 0; }
.pl-switches { display: flex; align-items: center; gap: 4px; flex: none; margin-left: auto; }
.pl-sep { width: 1px; height: 18px; margin: 0 5px; background: var(--line-2); }
.pl-tg {
  position: relative; display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px;
  color: var(--text-2); transition: background-color .15s, color .15s, box-shadow .15s;
}
.pl-tg:hover { color: var(--text); background: var(--hover); }
.pl-tg.on { color: var(--paper); }
.pl-tg[aria-expanded="true"] { color: var(--paper); background: rgba(244, 242, 236, .1); box-shadow: inset 0 0 0 1px var(--line-2); }
.pl-tg svg.i { width: 18px; height: 18px; }
.pl-badge {
  position: absolute; right: -3px; bottom: -1px; min-width: 15px; height: 14px; padding: 0 3px; border-radius: 7px;
  font: 700 9.5px/14px var(--f-ui); font-style: normal; text-align: center; white-space: nowrap; letter-spacing: 0;
  color: var(--ink); background: var(--paper); box-shadow: 0 0 0 2px rgba(14, 19, 28, .9); pointer-events: none;
}
.pl-badge:empty { display: none; }
.vol-off { display: none; }
.muted .vol-on { display: none; }
.muted .vol-off { display: block; }

.pl-panel > .pl-drawer {
  flex: 0 1 0px; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; visibility: hidden;
  transition: flex-basis .34s var(--ease-out), margin .34s var(--ease-out), opacity .2s, visibility 0s linear .34s;
}
.pl-panel > .pl-drawer.on { opacity: 1; visibility: visible; transition-delay: 0s; }
.pl-panel > .pl-lyr.on { flex-basis: 196px; margin: 8px 0 2px; }
.pl-panel > .pl-lib.on { flex-basis: 384px; margin-top: 2px; }

/* 歌词 */
.pl-lyrics {
  position: relative;   /* 每行的 offsetTop 从这里量,滚动居中才准 */
  flex: 1 1 auto; min-height: 0; overflow: auto; padding: 72px 6px; text-align: center; overscroll-behavior: contain; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(transparent, #000 24%, #000 76%, transparent); mask-image: linear-gradient(transparent, #000 24%, #000 76%, transparent);
}
.pl-lyrics::-webkit-scrollbar { display: none; }
.pl-lyrics p { padding: 5px 4px; font-size: 14.5px; line-height: 1.5; color: var(--text-3); cursor: pointer; transition: color .35s, transform .35s var(--ease-out); }
.pl-lyrics p:hover { color: var(--text-2); }
.pl-lyrics p.on { color: var(--paper); transform: scale(1.05); }
.pl-lyrics small { display: block; font-size: 12px; opacity: .85; }
.pl-lyrics .pl-lyrics-none { font-size: 13px; line-height: 1.8; cursor: default; }
.pl-lyrics-plain { font: 13.5px/1.9 var(--f-ui); color: var(--text-2); white-space: pre-wrap; text-align: left; }

/* 播放列表与曲库 */
.pl-tabs { flex: none; padding: 0; margin: 0 -2px; }
.pl-tab-n { margin-left: 5px; font-size: 11px; color: var(--text-3); }
.pl-tab-n:empty { display: none; }
.pl-tools { display: flex; flex-wrap: wrap; gap: 2px; flex: none; padding: 8px 0 4px; }
.pl-tools:empty { display: none; }
.pl-plat-seg { margin-bottom: 6px; }
.pl-plat-add { display: flex; gap: 8px; width: 100%; min-width: 0; }
.pl-plat-add .field { flex: 1; min-width: 0; }
.pl-plat-add .field input { min-width: 0; }
.pl-acct {
  display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 8px; padding: 7px 10px; border-radius: var(--r-ctl);
  font-size: 12.5px; text-align: left; color: var(--text-2); background: rgba(244, 242, 236, .04); box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color .15s, color .15s;
}
.pl-acct:hover { color: var(--text); background: var(--hover); }
.pl-acct.bound { color: var(--text); }
.pl-acct span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pl-acct svg.i { width: 16px; height: 16px; }
.pl-acct .pl-acct-go { width: 14px; height: 14px; opacity: .5; }
/* 在列表里找歌:紧挨着列表,在哪一页就找哪一页 */
.pl-find { flex: none; margin: 8px 0 0; }
.pl-tools:not(:empty) + .pl-find { margin-top: 6px; }
.pl-find input { height: 34px; padding-right: 36px; font-size: 13px; }
.pl-find input::-webkit-search-cancel-button { display: none; }
.pl-find-x { position: absolute; right: 2px; }
.pl-row mark { border-radius: 2px; color: var(--paper); background: color-mix(in oklab, var(--a) 40%, transparent); }
.pl-find-sec { padding-top: 8px; }
/* 平台页:那一个框边打字边在导入的歌单里找,最上面一行「在 xx 里搜」(Enter) */
.pl-go-row { list-style: none; padding: 2px 0 4px; }
.pl-go {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: var(--r-ctl);
  font-size: 13px; text-align: left; color: var(--text-2); background: rgba(244, 242, 236, .05); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background-color .15s, box-shadow .15s, color .15s;
}
.pl-go:hover, .pl-go:focus-visible { color: var(--text); background: var(--hover); box-shadow: inset 0 0 0 1px var(--line-3); outline: none; }
.pl-go svg.i { width: 16px; height: 16px; color: var(--paper); }
.pl-go span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pl-go b { font-weight: 600; color: var(--paper); }
.pl-go kbd { flex: none; margin: 0; }
@media (hover: none) { .pl-go kbd { display: none; } }
.pl-go-note { padding: 10px 8px; }
.pl-list { flex: 1 1 auto; min-height: 0; overflow: auto; list-style: none; margin: 0 -8px; padding: 6px 8px 8px; overscroll-behavior: contain; }
.pl-row { display: flex; align-items: center; border-radius: var(--r-ctl); transition: background-color .15s; }
.pl-row:hover { background: var(--hover); }
.pl-row-main { flex: 1; min-width: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px 8px; text-align: left; }
.pl-row-cover {
  position: relative; width: 40px; height: 40px; border-radius: 6px; overflow: hidden; display: grid; place-items: center;
  color: var(--text-3); background: rgba(244, 242, 236, .06);
}
.pl-row-cover img { width: 100%; height: 100%; object-fit: cover; }
.pl-row-cover svg.i { width: 18px; height: 18px; }
.pl-row-text { min-width: 0; }
.pl-row-text b { display: block; overflow: hidden; font-size: 13px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.pl-row-text small { display: flex; align-items: center; gap: 6px; overflow: hidden; font-size: 11.5px; color: var(--text-3); white-space: nowrap; text-overflow: ellipsis; }
.pl-tag { flex: none; padding: 0 4px; border-radius: 3px; font: 600 10px/15px var(--f-ui); font-style: normal; color: var(--text-2); background: rgba(244, 242, 236, .1); }
.pl-tag[data-p="ncm"] { color: #ffd2d4; background: rgba(216, 30, 43, .35); }
.pl-tag[data-p="qq"] { color: #c9f5dd; background: rgba(32, 180, 108, .32); }
.pl-tag[data-p="kg"] { color: #cfe6ff; background: rgba(26, 138, 230, .34); }
.pl-tag.vip { color: #ffe7b0; background: rgba(214, 160, 50, .3); }
.pl-tag.vip.ok { color: #2a1d00; background: #e8c272; }
.pl-row-text small > span { overflow: hidden; text-overflow: ellipsis; }
.pl-row.blocked .pl-row-main { opacity: .5; }
.pl-row.blocked .pl-row-main:hover { opacity: .7; }
.pl-row.on .pl-row-text b { color: var(--paper); }
.pl-row.on .pl-row-cover { box-shadow: inset 0 0 0 1px var(--line-3); }
.pl-row-dur { font-size: 11.5px; color: var(--text-3); }
.pl-row-chev { width: 16px; height: 16px; color: var(--text-3); }
.pl-row-act { flex: none; opacity: 0; transition: opacity .15s; }
.pl-row:hover .pl-row-act, .pl-row-act:focus-visible, .pl-row-act[aria-expanded="true"] { opacity: 1; }
.pl-row.plat .pl-row-act { opacity: .75; }
.pl-row-play svg.i { width: 14px; height: 14px; }
.pl-row-act:disabled { opacity: .35 !important; }
@media (hover: none) { .pl-row-act { opacity: .7; } }
.pl-row.open { background: rgba(244, 242, 236, .05); }
.pl-sub { list-style: none; margin: 0 0 6px 18px; padding-left: 8px; border-left: 1px solid var(--line); }
.pl-sub ol { list-style: none; }
.pl-sec { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px 4px 10px; font-size: 12px; color: var(--text-3); }
.pl-qhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 6px 8px 10px; }
.pl-qhead > span { display: grid; gap: 1px; min-width: 0; }
.pl-qhead b { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.pl-qhead small { overflow: hidden; font-size: 11.5px; color: var(--text-3); white-space: nowrap; text-overflow: ellipsis; }
.pl-grip {
  display: grid; place-items: center; flex: none; width: 22px; height: 40px; margin-right: -6px; border-radius: 6px;
  color: var(--text-3); cursor: grab; touch-action: none; opacity: .3; transition: opacity .15s;
}
.pl-row:hover .pl-grip, .pl-grip:focus-visible { opacity: 1; }
.pl-grip svg.i { width: 15px; height: 15px; }
@media (hover: none) { .pl-grip { opacity: .55; } }
.pl-list.sorting { cursor: grabbing; }
.pl-list.sorting .pl-row { transition: transform .18s var(--ease-out); }
.pl-list.sorting .pl-row.dragging {
  position: relative; z-index: 2; transition: none; background: rgba(30, 37, 50, .97); box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .75), inset 0 0 0 1px var(--line-2);
}
.eq { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 2px; padding-bottom: 11px; background: rgba(0, 0, 0, .45); }
.eq b { width: 3px; height: 14px; border-radius: 2px; background: var(--paper); transform-origin: bottom; animation: eq .9s ease-in-out infinite; }
.eq b:nth-child(2) { animation-delay: -.3s; }
.eq b:nth-child(3) { animation-delay: -.6s; }
@keyframes eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.pl:not(.playing) .eq b { animation-play-state: paused; }
.pl-empty { padding: 14px 8px; font-size: 12.5px; line-height: 1.8; color: var(--text-3); }
.pl-empty b { display: block; margin-bottom: 4px; font-weight: 500; color: var(--text-2); }
@keyframes spin { to { transform: rotate(360deg); } }

/* 绑定平台账号(对话框) */
.pl-acc { display: grid; gap: 12px; }
.pl-acc-wait, .pl-acc-lead { font-size: 13px; line-height: 1.75; color: var(--text-2); }
.pl-acc-warn {
  padding: 10px 12px; border-radius: var(--r-ctl); font-size: 12.5px; line-height: 1.7; color: #ffe3a3;
  background: rgba(240, 194, 92, .1); box-shadow: inset 0 0 0 1px rgba(240, 194, 92, .3);
}
.pl-acc-warn { display: grid; justify-items: start; gap: 8px; }
.pl-acc-warn small { font-size: 11.5px; line-height: 1.7; color: color-mix(in oklab, #ffe3a3 70%, var(--text-3)); }
.pl-acc-list { list-style: none; display: grid; gap: 8px; }
.pl-acc-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: var(--r-ctl); background: rgba(244, 242, 236, .04); box-shadow: inset 0 0 0 1px var(--line);
}
.pl-acc-row.focus { box-shadow: inset 0 0 0 1px var(--line-3); }
.pl-acc-row.expired small { color: #ffe3a3; }
.pl-acc-face { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; font-size: 15px; font-weight: 700; }
.pl-acc-face[data-p="ncm"] { color: #ffd2d4; background: rgba(216, 30, 43, .35); }
.pl-acc-face[data-p="qq"] { color: #c9f5dd; background: rgba(32, 180, 108, .32); }
.pl-acc-face[data-p="kg"] { color: #cfe6ff; background: rgba(26, 138, 230, .34); }
.pl-acc-face img { width: 100%; height: 100%; object-fit: cover; }
.pl-acc-text { display: grid; gap: 2px; min-width: 0; }
.pl-acc-text b { font-size: 14px; font-weight: 600; color: var(--text); }
.pl-acc-text small { font-size: 12px; line-height: 1.6; color: var(--text-3); }
.pl-acc-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.pl-acc-foot { font-size: 12px; line-height: 1.7; color: var(--text-3); }
.pl-qr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; }
.pl-qr-code { position: relative; display: grid; place-items: center; width: 200px; height: 200px; border-radius: 12px; overflow: hidden; background: #fff; }
.pl-qr-code img { width: 188px; height: 188px; image-rendering: pixelated; }
.pl-qr-wait { font-size: 12.5px; color: #4a5160; }
.pl-qr-over {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px;
  background: rgba(10, 14, 22, .8); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.pl-qr-over[hidden] { display: none; }
.pl-qr-over b { font-size: 15px; color: var(--paper); }
.pl-qr-text { display: grid; gap: 8px; align-content: center; min-width: 0; }
.pl-qr-text > b { font-size: 15px; font-weight: 600; color: var(--text); }
.pl-qr-state { min-height: 1.6em; font-size: 13px; color: var(--text); }
.pl-qr.bad .pl-qr-state { color: #ffc4c4; }
.pl-qr-hint { font-size: 12px; line-height: 1.7; color: var(--text-3); }
.pl-qr-acts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }

@media (max-height: 760px) {
  .pl-panel > .pl-lib.on { flex-basis: 300px; }
  .pl-panel > .pl-lyr.on { flex-basis: 150px; }
  .pl-viz { height: 32px; }
}
@media (max-width: 700px) {
  .pl { left: 0; right: 0; bottom: 0; }
  .pl-mini { width: auto; margin: 0 10px calc(10px + env(safe-area-inset-bottom)); }
  .pl-panel {
    width: 100%; max-height: 90vh; max-height: 90dvh; padding: 14px 14px calc(6px + env(safe-area-inset-bottom));
    border-radius: var(--r-panel) var(--r-panel) 0 0; animation-name: sheet-up;
  }
  .pl-panel > .pl-lib.on { flex-basis: 46vh; }
  .pl-extra { gap: 12px; }
  .ds-acts, .ds-stats { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .pl-acc-row { grid-template-columns: 40px minmax(0, 1fr); }
  .pl-acc-acts { grid-column: 1 / -1; justify-content: flex-start; }
  .pl-qr { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .pl-qr-acts { justify-content: center; }
}

/* ================================================================ 角色卡片的画面(cards.js,全站共用)
   封面 <img.poster> 在下,实时渲染的 <canvas.art> 在上;两样都还没有时,是这位角色配色的底,不会是一块黑 */
.card-art {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(80% 60% at 50% 28%, color-mix(in oklab, var(--a, #9fdbe6) 24%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in oklab, var(--deep, #0b0f18) 70%, var(--a, #9fdbe6) 8%), var(--deep, #0b0f18));
}
.card-art > img.poster, .card-art > canvas.art { position: absolute; inset: 0; width: 100%; height: 100%; }
.card-art > img.poster { object-fit: cover; }
.card-art > canvas.art { opacity: 0; transition: opacity .45s var(--ease); }
.is-live > .card-art > canvas.art, .is-live > * > .card-art > canvas.art, .card-art.is-live > canvas.art { opacity: 1; }
.is-loading .card-art::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .07), transparent 65%) -100% 0 / 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.is-live .card-art::after, .has-poster .card-art::after { display: none; }


/* 在背景上按住拖动搅水面时:整页暂时不能选文字,光标变成"抓着" */
.wa-stirring, .wa-stirring * { -webkit-user-select: none !important; user-select: none !important; cursor: grabbing !important; }