/* ==========================================================================
   base.css —— 设计令牌、主题、环境背景、基础控件
   所有表面颜色都从 --accent 派生：换主题色时整站色系一起变，
   文字仍保持中性，保证任何色相下都可读。
   ========================================================================== */

:root {
  --maxw: 1420px;
  /* 2026 refresh 的流体间距并进默认令牌（原补丁在 .grid 上后置覆盖，
     把 data-density 的 --gap 压死了——密度设置对间距失效，现回归令牌驱动） */
  --gap: clamp(11px, 1.15vw, 17px);
  --card-min: 186px;
  --radius: 9px;
  --radius-lg: 14px;
  --glass-edge: rgba(255, 255, 255, 0.58);
  --glass-tint: color-mix(in srgb, var(--accent) 15%, transparent);
  --glass-glow: color-mix(in srgb, var(--accent) 26%, transparent);
  --flow-a: #ffb36b;
  --flow-b: #63d7ff;
  --flow-c: #ff74a9;
  --flow-d: #9e7dff;
  --glass-92: color-mix(in srgb, var(--surface) 92%, transparent);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);

  --accent: #3a5fa8;
  --accent-ink: #ffffff;
  --accent-hover: color-mix(in srgb, var(--accent) 86%, #000);
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 34%, transparent);
}

:root,
:root[data-theme="light"] {
  --bg: color-mix(in srgb, var(--accent) 8%, #eff5f4);
  --bg-2: color-mix(in srgb, var(--accent) 12%, #e2ebe9);
  --surface: color-mix(in srgb, var(--accent) 3%, #ffffff);
  --surface-2: color-mix(in srgb, var(--accent) 7%, #fafcfb);
  --surface-3: color-mix(in srgb, var(--accent) 11%, #f0f2ef);
  --ink: color-mix(in srgb, var(--accent) 12%, #14201a);
  --ink-2: color-mix(in srgb, var(--accent) 13%, #47544d);
  --ink-3: color-mix(in srgb, var(--accent) 10%, #76837b);
  --line: color-mix(in srgb, var(--accent) 14%, #dee3dd);
  --line-2: color-mix(in srgb, var(--accent) 26%, #c7cec6);
  --ok: #1a7f4b;
  --warn: #96600f;
  --danger: #a52d2d;
  --shadow-1: 0 1px 2px rgba(18, 30, 24, 0.06), 0 4px 12px rgba(18, 30, 24, 0.06);
  --shadow-2: 0 12px 32px rgba(18, 30, 24, 0.14), 0 2px 6px rgba(18, 30, 24, 0.06);
  --shadow-lg: 0 30px 80px rgba(10, 18, 14, 0.28);
  --stage: #0c110f;
  --screen: #e8ebe6;
  --hairline: rgba(22, 32, 27, 0.055);
  --hairline: color-mix(in srgb, var(--accent) 13%, rgba(24, 40, 32, 0.08));
  color-scheme: light;
}

:root[data-theme="dark"] {
  /* 原补丁块（文件尾 :root[data-theme=dark]{--bg:#0d1312...}）实际生效值并入，
     观感不变；light 侧补丁的 --bg 因特异性不足从未生效，直接删 */
  --bg: #0d1312;
  --bg-2: #111b18;
  --surface: color-mix(in srgb, var(--accent) 8%, #151b18);
  --surface-2: color-mix(in srgb, var(--accent) 12%, #1c2320);
  --surface-3: color-mix(in srgb, var(--accent) 17%, #232b27);
  --ink: #e9efeb;
  --ink-2: color-mix(in srgb, var(--accent) 12%, #a6b3ab);
  --ink-3: color-mix(in srgb, var(--accent) 10%, #75827a);
  --line: color-mix(in srgb, var(--accent) 16%, #28312c);
  --line-2: color-mix(in srgb, var(--accent) 30%, #3a453f);
  --ok: #4ecb84;
  --warn: #d9a44f;
  --danger: #e57f7f;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 18px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 16px 40px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 34px 90px rgba(0, 0, 0, 0.66);
  --stage: #070a09;
  --screen: #222a26;
  --hairline: rgba(255, 255, 255, 0.05);
  --accent-ink: #06110d;
  --glass-edge: rgba(255, 255, 255, 0.19);
  --glass-tint: color-mix(in srgb, var(--accent) 25%, transparent);
  --glass-glow: color-mix(in srgb, var(--accent) 36%, transparent);
  color-scheme: dark;
}

/* 预设主题色。深浅两套分别给值，保证任何主题下对比度都够。 */
:root[data-accent="moss"]   { --accent: #0f6b52; --accent-ink: #fff; }
:root[data-accent="indigo"] { --accent: #3a5fa8; --accent-ink: #fff; }
:root[data-accent="rust"]   { --accent: #b04a2c; --accent-ink: #fff; }
:root[data-accent="amber"]  { --accent: #96690f; --accent-ink: #fff; }
:root[data-accent="plum"]   { --accent: #7f4377; --accent-ink: #fff; }
:root[data-accent="teal"]   { --accent: #10727c; --accent-ink: #fff; }
:root[data-accent="slate"]  { --accent: #4b5f6b; --accent-ink: #fff; }
:root[data-accent="rose"]   { --accent: #a83a5c; --accent-ink: #fff; }

:root[data-theme="dark"][data-accent="moss"]   { --accent: #4cc79a; --accent-ink: #04140e; }
:root[data-theme="dark"][data-accent="indigo"] { --accent: #7fa2ea; --accent-ink: #060c16; }
:root[data-theme="dark"][data-accent="rust"]   { --accent: #ef9677; --accent-ink: #170803; }
:root[data-theme="dark"][data-accent="amber"]  { --accent: #e0b45f; --accent-ink: #171003; }
:root[data-theme="dark"][data-accent="plum"]   { --accent: #cb9ac4; --accent-ink: #14060f; }
:root[data-theme="dark"][data-accent="teal"]   { --accent: #56c3ce; --accent-ink: #031416; }
:root[data-theme="dark"][data-accent="slate"]  { --accent: #9db2bd; --accent-ink: #0b1113; }
:root[data-theme="dark"][data-accent="rose"]   { --accent: #ea8bab; --accent-ink: #180610; }

:root[data-density="compact"] { --gap: 9px; --card-min: 132px; }
:root[data-density="cozy"]    { --gap: 14px; --card-min: 186px; }
:root[data-density="roomy"]   { --gap: 20px; --card-min: 232px; }

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

/* 原生 dialog 关闭态必须隐藏：只要 author CSS 碰过 display，UA 默认就失效。
   visibility/pointer-events 兜底覆盖个别 WebView 对 :not 的样式缓存。 */
dialog:not([open]) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   毛玻璃层
   backdrop-filter 直接挂在带文字的容器上，移动端 Chromium/WebKit 会把整个
   过滤图层连同里面的文字一起降分辨率光栅化，字就糊了。改成把滤镜和底色放到
   ::before 这一层，文字留在未过滤的图层里，边缘才干净。
   用法：元素加 class="glass"，并用 --glass-bg / --glass-filter 传值。
   ========================================================================== */
.glass { position: relative; isolation: isolate; }
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: var(--glass-bg, transparent);
  -webkit-backdrop-filter: var(--glass-filter, blur(12px));
  backdrop-filter: var(--glass-filter, blur(12px));
}

/* 站内所有带文字的毛玻璃面板统一走这一层，省得逐个去 HTML 加 class。
   注意：这里只补 isolation，不动 position —— .keypad 是 absolute、
   .totop 是 fixed， blanket 写 relative 会把它们定位搞坏。 */
.topbar,
.filterbar,
.play-bar,
.side,
.keypad,
footer.site,
.popover-panel,
dialog.modal,
.toast,
.totop {
  isolation: isolate;
}

.topbar::before,
.filterbar::before,
.play-bar::before,
.side::before,
.keypad::before,
footer.site::before,
.popover-panel::before,
dialog.modal::before,
.toast::before,
.totop::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: var(--glass-bg, transparent);
  -webkit-backdrop-filter: var(--glass-filter, blur(12px));
  backdrop-filter: var(--glass-filter, blur(12px));
}

/* 弹窗打开时锁背景滚动。挂在 html 上，body 单独锁不住 iOS。 */
html.modal-open,
html.modal-open body {
  overflow: hidden;
  overscroll-behavior: none;
}

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

::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
p { margin: 0; }

code, kbd, pre { font-family: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace; }

kbd {
  font-size: 11px;
  line-height: 1.7;
  padding: 0 5px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--ink);
  white-space: nowrap;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   环境背景：细网格 + 大号可辨识的复古母题 + 顶部一道斜向光带
   刻意不用圆点光斑/bokeh，那些东西和"老手机游戏"没关系。
   ========================================================================== */

.bgfx { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

/* 流动色层：几条大范围色带贯穿整页，避免变成一小颗一颗的光斑 */
.bgfx .flow {
  position: absolute;
  inset: -38%;
  background:
    radial-gradient(42% 38% at 18% 18%, color-mix(in srgb, var(--flow-a) 66%, transparent), transparent 68%),
    radial-gradient(46% 42% at 82% 16%, color-mix(in srgb, var(--flow-b) 62%, transparent), transparent 70%),
    radial-gradient(44% 44% at 24% 78%, color-mix(in srgb, var(--flow-c) 58%, transparent), transparent 68%),
    radial-gradient(50% 42% at 82% 80%, color-mix(in srgb, var(--flow-d) 52%, transparent), transparent 70%),
    radial-gradient(58% 46% at 50% 42%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 72%);
  background-size: 180% 180%, 175% 175%, 190% 190%, 200% 200%, 160% 160%;
  background-position: 12% 10%, 88% 12%, 18% 88%, 86% 86%, 50% 42%;
  /* 渐变本身就是平滑过渡，模糊只是收一下色带边缘。
     手机上去掉 blur：这是一整块 176% 视口的滤镜层，会挤占光栅内存，
     逼着浏览器把整页降分辨率渲染，全站文字跟着发糊。 */
  filter: blur(26px) saturate(1.6);
  opacity: .68;
  animation: bg-flow 36s ease-in-out infinite;
  /* 只让合成器做位移：动 background-position 会逐帧重绘整块模糊层，直接掉帧 */
  will-change: transform;
}

@media (max-width: 720px), (pointer: coarse) {
  .bgfx .flow { filter: saturate(1.55); }
}

/* 网格层：两层不同间距的头发丝线，近看有细节，远看有秩序 */
.bgfx .weave {
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(to right, var(--hairline) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hairline) 1px, transparent 1px),
    linear-gradient(to right, var(--hairline) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hairline) 1px, transparent 1px);
  background-size: 132px 132px, 132px 132px, 22px 22px, 22px 22px;
  opacity: 0.92;
  -webkit-mask-image: radial-gradient(140% 90% at 50% -10%, #000 25%, transparent 82%);
  mask-image: radial-gradient(140% 90% at 50% -10%, #000 25%, transparent 82%);
}

/* 光带：从左上压下来的一条宽渐变，不是"球"，是页面顶光 */
.bgfx .beam {
  position: absolute;
  left: -20%;
  right: -20%;
  top: -34%;
  height: 62%;
  background: linear-gradient(172deg,
    color-mix(in srgb, var(--accent) 27%, transparent) 0%,
    color-mix(in srgb, var(--accent) 11%, transparent) 38%,
    transparent 70%);
  opacity: .35;
}

.bgfx .floor {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -22%;
  height: 46%;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--accent) 26%, transparent), transparent 74%),
    linear-gradient(0deg, color-mix(in srgb, var(--ink) 12%, transparent), transparent 66%);
  opacity: .28;
}

@keyframes bg-flow {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  33% { transform: translate3d(-1.4%, 1%, 0) rotate(0.25deg); }
  66% { transform: translate3d(1.4%, -1%, 0) rotate(-0.25deg); }
}

@media (prefers-reduced-motion: reduce) {
  .bgfx .flow { animation: none !important; }
}

/* 手机性能：背景流动动画是常驻合成任务，和游戏画布抢 GPU 预算。
   播放页（body 带 .playing 标记）直接停掉动画、压暗色带，游戏优先。 */
body.playing .bgfx .flow { animation: none !important; }
body.playing .bgfx { opacity: .55; }

/* ==========================================================================
   控件
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 550;
  line-height: 1.45;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(20, 30, 25, 0.04);
  transition: background 0.13s, border-color 0.13s, color 0.13s, box-shadow 0.13s, transform 0.06s;
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn svg { flex: 0 0 auto; }

.btn-primary {
  background: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 70%, #000);
  color: var(--accent-ink);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 26%, transparent), 0 2px 8px var(--accent-soft);
}
.btn-primary:hover { background: var(--accent-hover); border-color: color-mix(in srgb, var(--accent) 60%, #000); }

.btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line-2)); }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border-color: var(--danger); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); box-shadow: none; }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--line); color: var(--ink); }

.btn-sm { padding: 4px 9px; font-size: 12.5px; }
.btn-lg { padding: 10px 18px; font-size: 15px; border-radius: 8px; }
.btn-block { width: 100%; }

/* 按下态：整颗反色，比只换个边框明显得多 */
.btn[aria-pressed="true"] {
  background: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 70%, #000);
  color: var(--accent-ink);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 24%, transparent);
}
.btn[aria-pressed="true"]:hover { background: var(--accent-hover); }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.13s, color 0.13s, border-color 0.13s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); border-color: var(--ink-3); }
.icon-btn[aria-pressed="true"],
.icon-btn[aria-expanded="true"] { background: var(--accent); border-color: transparent; color: var(--accent-ink); }

.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--radius) 0 0 var(--radius); margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.btn-group .btn:hover { position: relative; z-index: 1; }

.field {
  padding: 6px 26px 6px 9px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%237d8a82' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color 0.13s, box-shadow 0.13s;
}
.field:hover { border-color: var(--ink-3); }
.field:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

input[type="text"].field,
input[type="search"].field {
  padding: 6px 9px;
  background-image: none;
  cursor: text;
}

.seg {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.seg button {
  border: 0;
  background: none;
  padding: 5px 10px;
  border-radius: 6px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--ink-2);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  transition: background 0.13s, color 0.13s, box-shadow 0.13s;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}

/* 开关：滑块两侧直接写"开/关"，不靠用户猜 */
.switch {
  position: relative;
  width: 46px;
  height: 23px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface-3);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.switch::before {
  content: "关";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink-3);
}
.switch::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
  transition: transform 0.16s;
}
.switch[aria-checked="true"] { background: var(--accent); border-color: color-mix(in srgb, var(--accent) 70%, #000); }
.switch[aria-checked="true"]::before { content: "开"; left: 9px; right: auto; color: var(--accent-ink); opacity: 0.85; }
.switch[aria-checked="true"]::after { transform: translateX(23px); }
.switch:focus-visible { outline: none; box-shadow: var(--ring); }

.slider { width: 100%; margin: 8px 0 0; accent-color: var(--accent); }
.slider-note { margin-top: 5px; min-height: 1em; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.swatch-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.swatches { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
  transition: transform 0.12s, border-color 0.12s;
}
.swatch:hover { transform: scale(1.14); }
.swatch[aria-checked="true"] { border-color: var(--ink); transform: scale(1.08); }

.colorwell { position: relative; width: 24px; height: 24px; flex: 0 0 auto; }
.colorwell input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.colorwell .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 180deg, #e0563f, #d9a227, #3fa66a, #3a7fb0, #8a5bb8, #e0563f) border-box;
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
}
.colorwell .dot {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  pointer-events: none;
  background: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
}
.colorwell:focus-within .dot { outline: 2px solid var(--ink); outline-offset: 3px; }

.counter {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 650;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.btn[aria-pressed="true"] .counter,
.chip[aria-pressed="true"] .counter { background: color-mix(in srgb, var(--accent-ink) 22%, transparent); color: inherit; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-3);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.pill-ok { background: color-mix(in srgb, var(--ok) 13%, var(--surface)); border-color: color-mix(in srgb, var(--ok) 42%, transparent); color: var(--ok); }
.pill-warn { background: color-mix(in srgb, var(--warn) 13%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 42%, transparent); color: var(--warn); }
.pill-accent { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }

.section-label {
  margin: 0 0 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--ink-3);
}

.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.row + .row { margin-top: 9px; }
.row > span { font-size: 13px; color: var(--ink-2); }

.field-row { display: grid; gap: 5px; }
.field-row > label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-3); }

.notice {
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  background: var(--surface-2);
  padding: 10px 12px;
  border-radius: 5px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.65;
}
.notice svg { vertical-align: -2px; }
.notice a { color: var(--accent); }

pre.code {
  margin: 0;
  padding: 9px 11px;
  font: 11.5px/1.75 ui-monospace, "Cascadia Mono", Consolas, monospace;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow-x: auto;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
}

.kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: 13px; margin: 0; }
.kv dt { color: var(--ink-3); white-space: nowrap; }
.kv dd { margin: 0; word-break: break-word; }

/* ==========================================================================
   浮层：下拉面板 / 居中对话框 / 提示条
   ========================================================================== */

.popover { position: relative; }
.popover-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  width: 280px;
  padding: 14px;
  display: none;
  --glass-bg: color-mix(in srgb, var(--surface) 94%, transparent);
  --glass-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.popover.open .popover-panel { display: block; animation: pop 0.15s ease-out; }
.popover-panel .group + .group { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--line); }

dialog.modal {
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 0;
  width: min(620px, calc(100vw - 28px));
  max-height: min(86dvh, 880px);
  overflow: hidden;
  color: var(--ink);
  --glass-bg: color-mix(in srgb, var(--surface) 94%, transparent);
  --glass-filter: blur(22px) saturate(1.4);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
dialog.modal[open] { display: flex; flex-direction: column; animation: pop 0.18s ease-out; }
dialog.modal::backdrop { background: rgba(6, 12, 9, 0.58); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
dialog.modal[hidden] { display: none !important; }
.modal-body { touch-action: pan-y; }

@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(0.985); } }

.modal-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 15px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  flex: 0 0 auto;
}
.modal-head h2 { flex: 1; font-size: 16.5px; line-height: 1.35; }
.modal-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 15px; }
.modal-foot {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 11px 15px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}

.tabs { display: flex; gap: 2px; padding: 3px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  border: 0;
  background: none;
  padding: 7px 11px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabs button:hover { color: var(--ink); background: var(--surface-2); }
.tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 650; }

/* 提示条：水平居中贴在底部，不从侧面滑进来 */
.toasts {
  position: fixed;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: min(520px, calc(100vw - 24px));
}
.toast {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  --glass-bg: color-mix(in srgb, var(--surface) 92%, transparent);
  --glass-filter: blur(14px);
  box-shadow: var(--shadow-2);
  font-size: 13px;
  color: var(--ink);
  animation: toast-in 0.2s ease-out;
  max-width: 100%;
}
.toast[data-kind="ok"] { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.toast[data-kind="ok"] svg { color: var(--ok); }
.toast[data-kind="err"] { border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.toast[data-kind="err"] svg { color: var(--danger); }
.toast[data-kind="warn"] svg { color: var(--warn); }
.toast.out { animation: toast-out 0.18s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(0.97); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* 2026 visual refresh: restrained surfaces, clear theme controls, no per-card blur.
   （radius/bg 令牌已并入文件头令牌区；bgfx 参数留这里） */
.bgfx .flow { opacity: .34; filter: blur(18px) saturate(1.25); animation-duration: 52s; }
.bgfx .weave { opacity: .52; }
.bgfx .beam { opacity: .22; }
.theme-hint,.setting-desc { color: var(--ink-3); font-size: 11.5px; line-height: 1.45; min-height: 1em; }
.setting-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:9px; }
.setting-heading .section-label { margin:0 0 2px; }
.setting-badge { padding:3px 8px; border:1px solid var(--accent-line); border-radius:999px; color:var(--accent); background:var(--accent-soft); font-size:11px; white-space:nowrap; }
.accent-preview { width:34px; height:22px; border-radius:7px; background:var(--accent); box-shadow:inset 0 0 0 2px color-mix(in srgb,#fff 45%,transparent),0 2px 5px color-mix(in srgb,var(--accent) 22%,transparent); flex:0 0 auto; }
.theme-mode button { min-height:36px; }