/* =====================================================================
   迷你主机天梯榜 · UI v4（Silicon Noir）
   - 所有新组件用 u- 前缀，避免和旧 style.css（后台仍在用）冲突
   - 颜色全部走 --u-* 变量：深色是默认，浅色在 [data-theme="light"] 覆盖
   - 浅色规则：荧光黄只做「黑底黄字」的填充，不做文字和细线
   ===================================================================== */

@font-face { font-family: "Geist"; src: url("vendor/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("vendor/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root, :root[data-theme="dark"] {
  --u-bg: #08080A;
  --u-surface: #0F0F12;
  --u-surface-2: #141418;
  --u-elev: #121216;
  --u-fg: #F4F4F1;
  --u-fg-2: #C9C9C4;
  --u-mut: #9A9AA1;
  --u-dim: #7C7C84;
  --u-line: rgba(255,255,255,0.08);
  --u-line-2: rgba(255,255,255,0.14);
  --u-track: rgba(255,255,255,0.06);
  --u-hover: rgba(255,255,255,0.04);
  --u-acc: #EDFF4A;          /* 强调填充 */
  --u-on-acc: #0A0A0A;       /* 填充上的字 */
  --u-acc-ink: #EDFF4A;      /* 强调文字 / 细线 */
  --u-acc-soft: rgba(237,255,74,0.08);
  --u-acc-line: rgba(237,255,74,0.28);
  --u-pill: #F4F4F1;         /* 选中态胶囊 */
  --u-on-pill: #0A0A0A;
  --u-amd-1: #FF7A3D; --u-amd-2: #FF2D55;
  --u-intel-1: #22D3EE; --u-intel-2: #3B6BFF;
  --u-good: #4ADE80; --u-good-soft: rgba(74,222,128,0.07); --u-good-line: rgba(74,222,128,0.22);
  --u-bad: #FF6B86; --u-bad-soft: rgba(255,45,85,0.07); --u-bad-line: rgba(255,45,85,0.22);
  --u-m1: #B6FF3A; --u-m2: #FFC24A; --u-m3: #FF8A5C;
  --u-photo: #F1F1EE;
  --u-glass: linear-gradient(160deg, rgba(40,40,48,0.55), rgba(18,18,22,0.38));
  --u-glass-line: rgba(255,255,255,0.14);
  --u-glass-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 30px 80px rgba(0,0,0,0.55);
  --u-shadow: 0 24px 60px rgba(0,0,0,0.5);
  --u-scrim: rgba(4,4,6,0.66);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --u-bg: #FFFFFF;
  --u-surface: #F6F6F4;
  --u-surface-2: #EEEEEB;
  --u-elev: #FFFFFF;
  --u-fg: #111113;
  --u-fg-2: #3C3C42;
  --u-mut: #6B6B72;
  --u-dim: #8A8A90;
  --u-line: rgba(10,10,12,0.08);
  --u-line-2: rgba(10,10,12,0.16);
  --u-track: rgba(10,10,12,0.06);
  --u-hover: rgba(10,10,12,0.03);
  --u-acc: #111113;
  --u-on-acc: #EDFF4A;
  --u-acc-ink: #111113;
  --u-acc-soft: rgba(10,10,12,0.04);
  --u-acc-line: rgba(10,10,12,0.2);
  --u-pill: #111113;
  --u-on-pill: #FFFFFF;
  --u-amd-1: #F2552C; --u-amd-2: #E0123F;
  --u-intel-1: #0EA5C6; --u-intel-2: #2449E0;
  --u-good: #15803D; --u-good-soft: rgba(21,128,61,0.07); --u-good-line: rgba(21,128,61,0.22);
  --u-bad: #D6163F; --u-bad-soft: rgba(214,22,63,0.06); --u-bad-line: rgba(214,22,63,0.2);
  --u-m1: #4D7C0F; --u-m2: #B45309; --u-m3: #C2410C;
  --u-photo: #ECECE7;
  --u-glass: linear-gradient(160deg, rgba(255,255,255,0.72), rgba(255,255,255,0.42));
  --u-glass-line: rgba(255,255,255,0.9);
  --u-glass-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 30px 70px rgba(60,60,40,0.16);
  --u-shadow: 0 24px 60px rgba(40,40,20,0.14);
  --u-scrim: rgba(20,20,16,0.35);
  color-scheme: light;
}

/* ---------- 基础 ---------- */
body.u {
  margin: 0; background: var(--u-bg); color: var(--u-fg);
  font-family: "Geist", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
:where(body.u) a { color: inherit; text-decoration: none }
:where(body.u) a:hover { text-decoration: none }
body.u::before, body.u::after { display: none }
html:has(body.u) { background: var(--u-bg) }
body.u :where(h1, h2, h3, h4) { line-height: 1.25 }
:where(body.u) button { font: inherit }
body.u :focus-visible { outline: 2px solid var(--u-acc-ink); outline-offset: 2px; border-radius: 6px }
.u-mono { font-family: "Geist Mono", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", ui-monospace, monospace; font-variant-numeric: tabular-nums }
.u-wrap { max-width: 1280px; margin: 0 auto; padding-left: 48px; padding-right: 48px; box-sizing: border-box }
.u-sr { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.u-mut { color: var(--u-mut) } .u-dim { color: var(--u-dim) }
.u-eyebrow { margin: 0 0 14px; font-family: "Geist Mono", monospace; font-size: 12px; letter-spacing: 2px; color: var(--u-mut) }
.u-h1 { margin: 0; font-size: 56px; line-height: 1.06; font-weight: 700; letter-spacing: -2px }
.u-h1 .hl { color: var(--u-acc-ink) }
.u-h2 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.6px }
.u-section-no { font-family: "Geist Mono", monospace; font-size: 12px; letter-spacing: 2px; color: var(--u-mut) }
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after { animation: none !important; transition: none !important }
@media (prefers-reduced-motion: reduce) { body.u *, body.u *::before, body.u *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition: none !important } }

/* ---------- 按钮 / 胶囊 / 卡片 ---------- */
.u-btn { height: 44px; padding: 0 22px; border-radius: 999px; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: filter .15s, background .15s }
.u-btn.sm { height: 36px; padding: 0 16px; font-size: 13px }
.u-btn.lg { height: 52px; padding: 0 30px; font-size: 16px }
.u-btn.pri { background: var(--u-acc); color: var(--u-on-acc); font-weight: 700 }
.u-btn.pri:hover { filter: brightness(1.06) }
.u-btn.sec { background: transparent; color: var(--u-fg); border: 1px solid var(--u-line-2) }
.u-btn.sec:hover { background: var(--u-hover) }
.u-btn.ghost { background: transparent; color: var(--u-mut) }
.u-btn.ghost:hover { color: var(--u-fg) }
.u-btn:disabled { opacity: .45; cursor: not-allowed }
.u-chip { flex: none; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--u-line-2); background: transparent; color: var(--u-fg-2); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap }
.u-chip:hover { border-color: var(--u-dim) }
.u-chip.on { background: var(--u-acc); border-color: var(--u-acc); color: var(--u-on-acc); font-weight: 600 }
.u-chip.dash { border-style: dashed }
.u-chip .n { font-family: "Geist Mono", monospace; font-size: 11px; opacity: .7 }
.u-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--u-surface-2) }
.u-seg button { height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--u-mut); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap }
.u-seg button[aria-pressed="true"] { background: var(--u-pill); color: var(--u-on-pill) }
.u-card { border-radius: 18px; background: var(--u-surface); border: 1px solid var(--u-line) }
.u-tag-best { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 5px; background: var(--u-acc); color: var(--u-on-acc); font-size: 11px; font-weight: 700; vertical-align: 2px; font-family: "Geist", "PingFang SC", sans-serif }
.u-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex: none }
.u-dot.amd { background: var(--u-amd-2) } .u-dot.intel { background: var(--u-intel-2) } .u-dot.nv { background: #76B900 } .u-dot.apple { background: var(--u-mut) }
.u-photo { background: var(--u-photo); overflow: hidden; border-radius: 12px; display: grid; place-items: center; color: #9A9A94; font-weight: 600 }
.u-photo img { width: 100%; height: 100%; object-fit: cover; display: block }
.u-photo.contain img { object-fit: contain }
.u-info { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--u-dim); display: inline-grid; place-items: center; cursor: pointer; vertical-align: middle }
.u-info:hover, .u-info[aria-expanded="true"] { background: var(--u-acc-soft); color: var(--u-acc-ink) }
.u-input { height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--u-line-2); background: var(--u-surface); color: var(--u-fg); font-size: 15px; box-sizing: border-box; outline: none; width: 100% }
.u-input:focus { border-color: var(--u-acc-ink) }

/* ---------- 顶栏 ---------- */
.u-nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--u-bg) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--u-line) }
.u-nav-in { max-width: 1280px; margin: 0 auto; padding: 0 48px; min-height: 64px; display: flex; align-items: center; gap: 12px 28px }
.u-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; white-space: nowrap }
.u-logo { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--u-acc); color: var(--u-on-acc); font: 700 11px "Geist Mono", monospace }
.u-links { display: flex; align-items: center; gap: 2px; flex: none } .u-links a, .u-vip, .u-login, .u-me { white-space: nowrap; flex: none }
.u-links a { height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 999px; font-size: 14px; color: var(--u-mut); font-weight: 500 }
.u-links a:hover { color: var(--u-fg) }
.u-links a.active { background: var(--u-hover); color: var(--u-fg); font-weight: 600; box-shadow: inset 0 0 0 1px var(--u-line) }
.u-links .badge, .u-badge { min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: var(--u-acc); color: var(--u-on-acc); font: 700 11px "Geist Mono", monospace; display: inline-grid; place-items: center }
.u-nav-r { margin-left: auto; display: flex; align-items: center; gap: 8px }
.u-search-btn { height: 36px; min-width: 210px; display: inline-flex; align-items: center; gap: 10px; padding: 0 8px 0 14px; border-radius: 999px; border: 1px solid var(--u-line-2); background: transparent; color: var(--u-mut); font-size: 13px; cursor: pointer }
.u-search-btn kbd { margin-left: auto; font: 11px "Geist Mono", monospace; padding: 2px 7px; border-radius: 6px; background: var(--u-track); color: var(--u-mut) }
.u-icon-btn { position: relative; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--u-line-2); background: transparent; color: var(--u-fg-2); display: grid; place-items: center; cursor: pointer }
.u-icon-btn .cnt { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: #FF2D55; color: #fff; font: 700 10px "Geist Mono", monospace; display: grid; place-items: center }
.u-vip { height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--u-acc-ink); color: var(--u-acc-ink); font-size: 13px; font-weight: 600 }
.u-me { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 4px; border-radius: 999px; background: var(--u-hover); font-size: 13px; max-width: 140px }
.u-me .av { flex: none; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--u-amd-1), var(--u-intel-2)); display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700 }
.u-me .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.u-login { height: 36px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; background: var(--u-pill); color: var(--u-on-pill); font-size: 13px; font-weight: 600 }

/* 中等宽度（平板 / 窄窗口）：顶栏逐级收紧，避免挤出屏幕 */
@media (max-width: 1440px) and (min-width: 861px) { .u-me .nm { display: none } .u-me { padding: 0 4px } .u-search-btn { min-width: 0 } .u-search-btn kbd { display: none } }
@media (max-width: 1280px) and (min-width: 861px) { .u-nav-in { padding: 0 32px; gap: 12px 16px } .u-search-btn { min-width: 0 } .u-search-btn kbd { display: none } .u-me .nm { display: none } .u-me { padding: 0 4px } }
@media (max-width: 1120px) and (min-width: 861px) { .u-search-btn .t { display: none } .u-search-btn { width: 36px; padding: 0; justify-content: center } .u-links a { padding: 0 10px } .u-brand span:not(.u-logo) { display: none } }
@media (max-width: 960px) and (min-width: 861px) { .u-vip { display: none } .u-links a { padding: 0 8px; font-size: 13px } }
/* ---------- 手机底部导航 ---------- */
.u-tabbar { display: none }
@media (max-width: 860px) {
  .u-wrap, .u-nav-in { padding-left: 16px; padding-right: 16px }
  .u-nav-in { min-height: 56px; gap: 8px }
  .u-links, .u-search-btn .t, .u-search-btn kbd, .u-vip, .u-me .nm, .u-nav .u-login { display: none }
  .u-search-btn { min-width: 0; width: 40px; height: 40px; padding: 0; justify-content: center; border: 0 }
  .u-icon-btn { border: 0; width: 40px; height: 40px }
  .u-h1 { font-size: 36px; letter-spacing: -1.2px }
  .u-tabbar { display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); grid-template-columns: repeat(5, 1fr); background: color-mix(in srgb, var(--u-bg) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--u-line) }
  .u-tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; color: var(--u-dim) }
  .u-tabbar a.active { color: var(--u-acc-ink); font-weight: 600 }
  .u-tabbar .badge { position: absolute; top: 5px; left: 50%; margin-left: 6px }
  body.u { padding-bottom: calc(60px + env(safe-area-inset-bottom)) }
}

/* ---------- 页脚 ---------- */
.u-footer { border-top: 1px solid var(--u-line); margin-top: 48px }
.u-footer-in { display: flex; flex-wrap: wrap; gap: 40px; padding-top: 48px; padding-bottom: 28px }
.u-footer .col { display: flex; flex-direction: column; gap: 10px; font-size: 13px; min-width: 120px }
.u-footer .col .t { font-size: 12px; color: var(--u-dim) }
.u-footer .col a:hover { color: var(--u-acc-ink) }
.u-footer-b { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 16px; padding-bottom: 28px; border-top: 1px solid var(--u-line); font-size: 12px; color: var(--u-dim) }

/* ---------- 浮层：弹出说明 / 底部面板 ---------- */
.u-pop { position: absolute; z-index: 80; width: 340px; padding: 16px 18px; border-radius: 16px; background: var(--u-elev); border: 1px solid var(--u-line-2); box-shadow: var(--u-shadow); color: var(--u-fg); font-size: 13px; line-height: 1.65 }
.u-pop h4 { margin: 0; display: flex; justify-content: space-between; gap: 12px; font-size: 15px }
.u-pop h4 small { font-size: 11px; color: var(--u-acc-ink); font-weight: 600 }
.u-pop p { margin: 8px 0 0; color: var(--u-fg-2) }
.u-pop .cond { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: var(--u-hover); font-size: 12px; color: var(--u-mut) }
.u-pop .more { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--u-acc-ink) }
.u-scrim { position: fixed; inset: 0; z-index: 90; background: var(--u-scrim) }
.u-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 91; max-height: 86vh; overflow-y: auto; border-radius: 24px 24px 0 0; background: var(--u-elev); border-top: 1px solid var(--u-line-2); box-shadow: 0 -24px 80px rgba(0,0,0,0.4); padding: 10px 20px calc(24px + env(safe-area-inset-bottom)) }
.u-sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--u-line-2); margin: 0 auto 16px }

/* ---------- 加载 / 404 ---------- */
@keyframes u-tile { 0% { opacity: 0 } 8% { opacity: 1 } 85% { opacity: 1 } 100% { opacity: 0 } }
@keyframes u-blink { 0%, 60% { opacity: 1 } 61%, 100% { opacity: .15 } }
.u-loading { min-height: 62vh; display: grid; place-content: center; padding: 48px 16px; text-align: center }
.u-render { width: 320px; max-width: 70vw; aspect-ratio: 16 / 9; margin: 0 auto; padding: 6px; border-radius: 14px; background: var(--u-surface); border: 1px solid var(--u-line); display: grid; grid-template-columns: repeat(16, 1fr); grid-template-rows: repeat(9, 1fr); gap: 2px; box-sizing: border-box }
.u-render i { opacity: 0; animation: u-tile 6s linear infinite }
.u-loading .score { margin: 26px 0 0; font: 700 44px/1 "Geist Mono", monospace; letter-spacing: -1px; color: var(--u-acc-ink) }
.u-loading .score small { margin-left: 6px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--u-dim) }
.u-loading .stage { margin: 12px 0 0; font-size: 14px; color: var(--u-mut) }
.u-loading .bar { display: block; width: 160px; height: 2px; margin: 16px auto 0; border-radius: 1px; background: var(--u-track); overflow: hidden }
.u-loading .bar i { display: block; height: 100%; width: 0; background: var(--u-acc-ink); transition: width .2s }
.u-404 { padding: 64px 16px 96px; text-align: center }
.u-monitor { position: relative; width: 100%; max-width: 520px; margin: 0 auto }
.u-monitor .scr { position: relative; aspect-ratio: 16 / 10; border-radius: 18px; background: #050506; border: 10px solid #1A1A1F; box-shadow: var(--u-shadow); overflow: hidden; display: grid; place-items: center }
.u-monitor .scr::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 4px) }
.u-monitor .code { font: 700 110px/1 "Geist Mono", monospace; letter-spacing: -2px; color: #EDFF4A }
.u-monitor .sig { display: block; margin-top: 10px; font: 13px "Geist Mono", monospace; letter-spacing: 4px; color: #9A9AA1 }
.u-monitor .neck { width: 30%; height: 14px; margin: 0 auto; background: #1A1A1F }
.u-monitor .foot { width: 46%; height: 8px; margin: 0 auto; border-radius: 4px; background: #1A1A1F }
.u-monitor .box { position: absolute; right: -6%; bottom: 0; width: 130px; height: 38px; border-radius: 10px; background: linear-gradient(180deg, #2A2A30, #1A1A1F); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: flex-end; padding: 0 12px; box-sizing: border-box }
.u-monitor .led { width: 6px; height: 6px; border-radius: 50%; background: #FF2D55; box-shadow: 0 0 8px #FF2D55; animation: u-blink 1.2s steps(1) infinite }
@media (max-width: 860px) { .u-monitor .code { font-size: 72px } .u-monitor .box { width: 90px; height: 28px; right: 0 } }

/* ---------- 吐司（复用旧的 toastHost） ---------- */
body.u .toast-host { z-index: 200 }
.u-icon-btn .ico-sun { display: none }
:root[data-theme="light"] .u-icon-btn .ico-sun { display: block }
:root[data-theme="light"] .u-icon-btn .ico-moon { display: none }
.u-skip:focus { position: fixed; left: 12px; top: 12px; width: auto; height: auto; clip: auto; z-index: 300; padding: 8px 14px; border-radius: 10px; background: var(--u-acc); color: var(--u-on-acc) }
.u-main { min-height: 70vh; outline: none }

/* =================== 天梯榜 =================== */
.u-rk-hero { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-end; padding-top: 72px; padding-bottom: 48px }
.u-rk-hero .l { flex: 999 1 560px; min-width: 0 }
.u-h1.big { font-size: 84px; line-height: 1; letter-spacing: -3px }
.u-rk-hero .lead { margin: 24px 0 0; max-width: 560px; font-size: 17px; line-height: 1.75; color: var(--u-mut) }
.u-rk-stats { flex: 1 1 340px; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--u-line-2) }
.u-rk-stats > div { padding: 18px 16px 0 } .u-rk-stats > div:first-child { padding-left: 0 } .u-rk-stats > div + div { border-left: 1px solid var(--u-line) }
.u-rk-stats dt { font-size: 12px; color: var(--u-mut) }
.u-rk-stats dd { margin: 8px 0 0; font-size: 30px; font-weight: 500; white-space: nowrap }
.u-rk-stats dd small { margin-left: 4px; font-size: 13px; color: var(--u-mut); font-family: "Geist", "PingFang SC", sans-serif }
.u-rk-bar { position: sticky; top: 64px; z-index: 20; background: var(--u-bg) }
.u-rk-bar .row1, .u-rk-bar .row2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px }
.u-rk-bar .row1 { padding: 14px 0; border-top: 1px solid var(--u-line) }
.u-rk-bar .row2 { gap: 8px; padding: 0 0 14px; border-bottom: 1px solid var(--u-line) }
.u-rk-bar .lbl { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: var(--u-mut); margin-right: 4px }
.u-rk-bar .tabs { display: flex; gap: 4px; flex-wrap: wrap }
.u-rk-bar .tabs .u-chip:not(.on):not(.dash) { border-color: transparent }
.u-rk-bar select { height: 36px; padding: 0 30px 0 14px; border-radius: 999px; border: 1px solid var(--u-line-2); background: var(--u-surface); color: var(--u-fg-2); font-size: 13px; cursor: pointer }
.u-rk-bar .legend { margin-left: auto; display: flex; gap: 16px; font-size: 12px; color: var(--u-mut) }
.u-rk-bar .legend span { display: inline-flex; align-items: center; gap: 8px }
.u-lgs { display: inline-block; width: 22px; height: 6px; border-radius: 3px }
.u-lgs.amd { background: linear-gradient(90deg, var(--u-amd-1), var(--u-amd-2)) } .u-lgs.intel { background: linear-gradient(90deg, var(--u-intel-1), var(--u-intel-2)) }
.u-chip.sm { height: 32px; padding: 0 13px; font-size: 12px }
.u-rk-bar .help { border-color: var(--u-acc-line); color: var(--u-acc-ink) }
.u-rk-bar .count { margin-left: auto; font-size: 12px; color: var(--u-mut) } .u-rk-bar .count b { color: var(--u-fg); font-weight: 600 }
.u-rk-list { padding-top: 6px; padding-bottom: 24px }
.u-rk-row { display: grid; align-items: center; column-gap: 16px; padding: 10px 12px }
.u-rk-row.duo { grid-template-columns: 20px 32px 48px minmax(200px, 1.1fr) 78px minmax(0, 1.3fr) minmax(0, 1.3fr) 60px 28px }
.u-rk-row.solo { grid-template-columns: 20px 32px 48px minmax(200px, 1.1fr) minmax(0, 2.6fr) 120px 28px }
.u-rk-row.head { height: 52px; padding-top: 0; padding-bottom: 0; font-size: 12px; color: var(--u-mut); border-bottom: 1px solid var(--u-line-2) }
.u-rk-row.head .hs { border: 0; background: transparent; padding: 0; text-align: right; font-size: 12px; color: var(--u-mut); cursor: pointer }
.u-rk-row.head .hs.on { color: var(--u-acc-ink); font-weight: 600 }
.u-rk-row.head .bar.r { text-align: right }
.u-rk-item { border-bottom: 1px solid var(--u-line) }
.u-rk-item > .u-rk-row { min-height: 68px }
.u-rk-item:hover > .u-rk-row { background: var(--u-hover) }
.u-rk-item:hover .nm b { text-decoration: underline; text-underline-offset: 4px }
.u-rk-item.sel > .u-rk-row { background: var(--u-acc-soft) }
.u-rk-row .rk { display: inline-grid; place-items: center; width: 30px; height: 24px; border-radius: 7px; font-size: 13px; color: var(--u-dim) }
.u-m-gold { background: linear-gradient(135deg, #FFF1A8, #E8B43A 55%, #B8801A); color: #0A0A0A !important; font-weight: 700; box-shadow: 0 0 14px rgba(232,180,58,0.4) }
.u-m-silver { background: linear-gradient(135deg, #F7FAFF, #B9C3D1 55%, #7E8896); color: #0A0A0A !important; font-weight: 700 }
.u-m-bronze { background: linear-gradient(135deg, #FFD3B0, #D08A55 55%, #95522A); color: #0A0A0A !important; font-weight: 700 }
:root[data-theme="light"] .u-m-gold { box-shadow: none }
.u-rk-row .th { width: 48px; height: 48px; border-radius: 10px; font-size: 14px }
.u-rk-row .nm { min-width: 0; display: flex; flex-direction: column; gap: 5px }
.u-rk-row .nm b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.u-rk-row .nm span { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--u-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.u-rk-row .mv { text-align: right; font-size: 16px; font-weight: 600 } .u-rk-row .sv { text-align: right; font-size: 14px; font-weight: 600 }
.u-rk-row .mv.dim, .u-rk-row .sv.dim { color: var(--u-mut); font-weight: 400 }
.u-rk-row .bar { display: flex; height: 10px; border-radius: 3px; background: var(--u-track); overflow: hidden }
.u-rk-row .bar.l { justify-content: flex-end }
.u-rk-row .bar i { display: block; height: 100%; border-radius: 3px }
.u-rk-row.head .bar { height: auto; background: none }
.u-rk-row .ex { width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--u-dim); display: grid; place-items: center; cursor: pointer; transition: transform .2s }
.u-rk-row .ex:hover { background: var(--u-hover); color: var(--u-fg) }
.u-rk-item.open .ex { transform: rotate(180deg) }
.u-chk { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; border-radius: 5px; border: 1.5px solid var(--u-line-2); display: grid; place-items: center; cursor: pointer; background: transparent }
.u-chk:checked { background: var(--u-acc); border-color: var(--u-acc) }
.u-chk:checked::after { content: ""; width: 9px; height: 5px; border: 2px solid var(--u-on-acc); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px,-1px) }
.u-rk-sum { margin: 0 12px 16px 128px; padding: 16px 18px; border-radius: 16px; background: var(--u-surface); border: 1px solid var(--u-line); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px }
.u-rk-sum dl { margin: 0; display: flex; flex-wrap: wrap; gap: 12px 28px }
.u-rk-sum dt { font-size: 11px; color: var(--u-mut) } .u-rk-sum dd { margin: 3px 0 0; font-size: 15px }
.u-rk-sum .tags { display: flex; flex-wrap: wrap; gap: 6px }
.u-rk-sum .tags span { height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; border: 1px solid var(--u-line-2); font-size: 11px; color: var(--u-fg-2) }
.u-rk-sum .acts { margin-left: auto; display: flex; gap: 8px }
.u-rk-skip { margin: 18px 12px 0; font-size: 12px; color: var(--u-mut) }
.u-empty { padding: 88px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px }
.u-empty .ic { width: 64px; height: 64px; border-radius: 50%; border: 1px dashed var(--u-line-2); display: grid; place-items: center; color: var(--u-mut) }
.u-empty .t { margin: 0; font-size: 18px; font-weight: 600 } .u-empty p { margin: 0 }
.u-wish-cta { margin: 20px 0 0; display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 18px; background: var(--u-surface); border: 1px solid var(--u-line) }
.u-wish-cta:hover { border-color: var(--u-line-2) }
.u-wish-cta .balls { position: relative; flex: none; width: 56px; height: 44px }
.u-wish-cta .balls i { position: absolute; border-radius: 50% }
.u-wish-cta .balls i:nth-child(1) { left: 0; top: 10px; width: 30px; height: 30px; background: #EDFF4A }
.u-wish-cta .balls i:nth-child(2) { left: 24px; top: 0; width: 24px; height: 24px; background: #3A3A42; border: 2px solid rgba(237,255,74,0.55) }
.u-wish-cta .balls i:nth-child(3) { left: 38px; top: 24px; width: 16px; height: 16px; background: var(--u-surface-2); border: 1px solid var(--u-line-2) }
.u-wish-cta .t { flex: 1; display: flex; flex-direction: column; gap: 2px } .u-wish-cta .t span { font-size: 13px; color: var(--u-mut) }
.u-wish-cta .go { color: var(--u-acc-ink) }
.u-tray { position: fixed; left: 0; right: 0; bottom: 24px; z-index: 40; pointer-events: none }
.u-tray .in { pointer-events: auto; max-width: 1184px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 10px 10px 10px 22px; border-radius: 999px; background: color-mix(in srgb, var(--u-elev) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--u-line-2); box-shadow: var(--u-shadow) }
.u-tray .c { font-size: 14px; white-space: nowrap } .u-tray .c b { color: var(--u-acc-ink) }
.u-tray .ls { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0 }
.u-tray .it { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 4px; border-radius: 999px; background: var(--u-hover); font-size: 13px; max-width: 220px }
.u-tray .it img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: var(--u-photo) }
.u-tray .it .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 4px }
.u-tray .it button { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--u-track); color: var(--u-fg-2); cursor: pointer; flex: none }
.u-tray .ac { margin-left: auto; display: flex; align-items: center; gap: 8px }
.u-tray .need { border: 1px dashed var(--u-acc-line); color: var(--u-acc-ink); background: transparent; cursor: default }
.u-rk-list { padding-bottom: 120px }
@media (max-width: 860px) {
  .u-rk-hero { padding-top: 28px; padding-bottom: 20px; gap: 20px }
  .u-h1.big { font-size: 40px; letter-spacing: -1.5px }
  .u-rk-hero .lead { margin-top: 12px; font-size: 14px }
  .u-rk-stats { display: none }
  .u-rk-bar { top: 56px }
  .u-rk-bar .row1, .u-rk-bar .row2 { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none }
  .u-rk-bar .row1::-webkit-scrollbar, .u-rk-bar .row2::-webkit-scrollbar { display: none }
  .u-rk-bar .legend, .u-rk-bar .count { display: none }
  .u-rk-row.head { display: none }
  .u-rk-row.duo, .u-rk-row.solo { row-gap: 8px; column-gap: 10px; padding: 12px 2px }
  .u-rk-row.duo { grid-template-columns: 20px 26px 44px 50px minmax(0,1fr) minmax(0,1fr) 40px 28px }
  .u-rk-row.solo { grid-template-columns: 20px 26px 44px minmax(0,1fr) 76px 28px }
  .u-rk-row > .u-chk, .u-rk-row > .rk, .u-rk-row > .th { grid-row: 1 / 3 }
  .u-rk-row .th { width: 44px; height: 44px }
  .u-rk-row.duo .nm { grid-column: 4 / 8; grid-row: 1 } .u-rk-row.duo .ex { grid-column: 8; grid-row: 1 }
  .u-rk-row.duo .mv { grid-column: 4; grid-row: 2; font-size: 13px; text-align: left }
  .u-rk-row.duo .bar.l { grid-column: 5; grid-row: 2 } .u-rk-row.duo .bar:not(.l) { grid-column: 6; grid-row: 2 }
  .u-rk-row.duo .sv { grid-column: 7 / 9; grid-row: 2; font-size: 12px; text-align: left }
  .u-rk-row.solo .nm { grid-column: 4 / 6; grid-row: 1 } .u-rk-row.solo .ex { grid-column: 6; grid-row: 1 }
  .u-rk-row.solo .bar { grid-column: 4; grid-row: 2 } .u-rk-row.solo .mv { grid-column: 5 / 7; grid-row: 2; font-size: 13px }
  .u-rk-row .bar { height: 6px }
  .u-rk-sum { margin: 0 4px 14px; flex-direction: column; align-items: stretch }
  .u-rk-sum .acts { margin: 0 } .u-rk-sum .acts > * { flex: 1 }
  .u-tray { bottom: calc(68px + env(safe-area-inset-bottom)); padding: 0 12px }
  .u-tray .in { border-radius: 22px; padding: 8px 8px 8px 16px }
  .u-tray .ls, .u-tray .hide-m { display: none }
  .u-tray .ac .u-btn { height: 40px; padding: 0 16px }
}
@media (max-width: 860px) {
  .u-rk-bar .tabs { flex-wrap: nowrap }
  .u-rk-bar .lbl { white-space: nowrap }
  .u-rk-bar .row1 { padding: 10px 0 }
}

/* =================== 详情 =================== */
:root { --rg1: #FF7A3D; --rg2: #FF2D55 }
.u-dt-sub { position: sticky; top: 64px; z-index: 20; background: color-mix(in srgb, var(--u-bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--u-line) }
.u-dt-sub .in { display: flex; align-items: center; gap: 10px; padding-top: 10px; padding-bottom: 10px; font-size: 13px; color: var(--u-mut) }
.u-dt-sub .back { display: inline-flex; gap: 6px; color: var(--u-fg-2) }
.u-dt-sub .cur { color: var(--u-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px }
.u-dt-sub nav { margin-left: auto; display: flex; align-items: center; gap: 4px }
.u-dt-sub nav a { height: 32px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; color: var(--u-mut); white-space: nowrap }
.u-dt-sub nav a.on, .u-dt-sub nav a:hover { background: var(--u-hover); color: var(--u-fg) }
.u-dt-sub nav .u-btn { margin-left: 8px; height: 32px }
.u-dt-hero { display: flex; flex-wrap: wrap; gap: 40px; padding-top: 24px; padding-bottom: 32px }
.u-dt-hero .gal { flex: 1 1 600px; min-width: 0; display: flex; gap: 12px }
.u-dt-hero .thumbs { display: flex; flex-direction: column; gap: 10px }
.u-dt-hero .thumbs button { width: 72px; height: 72px; padding: 0; border: 2px solid transparent; border-radius: 12px; cursor: pointer }
.u-dt-hero .thumbs button.on { border-color: var(--u-acc-ink) }
.u-dt-hero .thumbs .more { background: var(--u-surface); border: 1px solid var(--u-line-2); color: var(--u-mut); font-size: 12px }
.u-dt-hero .main { position: relative; flex: 1; min-width: 0; aspect-ratio: 4 / 3; border: 0; border-radius: 20px; padding: 0; cursor: zoom-in }
.u-dt-hero .main .ph { font-size: 64px; color: #9A9A94 }
.u-dt-hero .main .cnt { position: absolute; right: 14px; bottom: 14px; height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; background: rgba(17,17,19,0.62); color: #fff; font-size: 12px }
.u-dt-hero .info { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column }
.u-dt-hero .badges { display: flex; flex-wrap: wrap; gap: 8px }
.u-dt-hero .badges .rk { padding: 4px 12px; border-radius: 999px; background: var(--u-acc); color: var(--u-on-acc); font-size: 12px; font-weight: 600 }
.u-dt-hero .badges .ven { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--u-line-2); font-size: 12px; color: var(--u-fg-2) }
.u-dt-hero h1 { margin: 16px 0 0; font-size: 46px; line-height: 1.08; font-weight: 700; letter-spacing: -1.5px }
.u-dt-hero .sub { margin: 8px 0 0; font-size: 14px; color: var(--u-mut) }
.u-dt-hero .dates { margin: 6px 0 0; font-size: 12px; color: var(--u-dim) }
.u-dt-hero .sum { margin: 14px 0 0; max-width: 560px; font-size: 15px; line-height: 1.7; color: var(--u-fg-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.u-dt-hero .stats { margin: 18px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--u-line-2); border-bottom: 1px solid var(--u-line-2) }
.u-dt-hero .stats > div { padding: 14px 12px } .u-dt-hero .stats > div:first-child { padding-left: 0 } .u-dt-hero .stats > div + div { border-left: 1px solid var(--u-line) }
.u-dt-hero .stats dt { font-size: 12px; color: var(--u-mut); display: flex; align-items: center; gap: 2px }
.u-dt-hero .stats dd { margin: 6px 0 0; font-size: 24px; font-weight: 500 } .u-dt-hero .stats dd small { font-size: 12px; color: var(--u-mut); margin-left: 3px }
.top { color: var(--u-acc-ink) !important; font-weight: 700 !important }
:root[data-theme="light"] .top, :root[data-theme="light"] .u-cmp-row .c.best .v { color: #111113 !important; background: linear-gradient(180deg, transparent 52%, #EDFF4A 52%, #EDFF4A 92%, transparent 92%); width: fit-content; padding: 0 4px; margin-left: -4px; border-radius: 2px }
:root[data-theme="light"] .u-dt-brow .v.top { justify-self: end; margin-left: 0; margin-right: -4px }
.u-dt-hero .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px }
.u-dt-hero .chips span { padding: 5px 10px; border-radius: 8px; background: var(--u-surface-2); font-size: 12px }
.u-dt-hero .buy { margin-top: auto; padding-top: 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.u-dt-hero .price { margin: 0; font-size: 30px; font-weight: 500 }
.u-dt-hero .acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap }
.u-cond { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; margin-bottom: 40px; border-radius: 999px; background: var(--u-surface); border: 1px solid var(--u-line); font-size: 13px; color: var(--u-mut) }
.u-cond i { width: 6px; height: 6px; border-radius: 50%; background: var(--u-good) } .u-cond b { color: var(--u-acc-ink); font-weight: 600 }
.u-dt-verdict { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; padding-bottom: 72px }
.u-dt-verdict > div { padding: 24px 28px; border-radius: 20px }
.u-dt-verdict .pro { background: var(--u-good-soft); border: 1px solid var(--u-good-line) } .u-dt-verdict .con { background: var(--u-bad-soft); border: 1px solid var(--u-bad-line) }
.u-dt-verdict .h { margin: 0 0 14px; display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700 }
.u-dt-verdict .pro .h { color: var(--u-good) } .u-dt-verdict .con .h { color: var(--u-bad) }
.u-dt-verdict .h span { width: 26px; height: 26px; border-radius: 50%; background: currentColor; display: grid; place-items: center; font-size: 15px } 
.u-dt-verdict .h span { color: var(--u-bg) } .u-dt-verdict .pro .h span { background: var(--u-good) } .u-dt-verdict .con .h span { background: var(--u-bad) }
.u-dt-verdict ul { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.6 }
.u-dt-sec { padding-bottom: 80px }
.u-dt-sec .hd { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 22px; border-bottom: 1px solid var(--u-line-2) }
.u-dt-sec .hd h2 { margin: 8px 0 0; font-size: 32px; font-weight: 700; letter-spacing: -1px }
.u-dt-sec .hd p { margin: 0 } .u-dt-sec h3.sub { margin: 36px 0 10px; font-size: 18px; font-weight: 600 }
.radar-row { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding: 36px 0; border-bottom: 1px solid var(--u-line) }
.radar { flex: 0 1 400px; min-width: 280px; max-width: 400px; height: auto; margin: 0 auto } .radar .rw { position: relative }
.radar svg { width: 100%; height: auto; display: block; overflow: visible }
.radar .ring { stroke: var(--u-line-2) } .radar .spoke { stroke: var(--u-line) }
.radar .shape { stroke: var(--rg2); stroke-width: 2 } .radar .dot { fill: var(--rg2); stroke: var(--u-bg); stroke-width: 2 }
.radar .lb { position: absolute; display: flex; flex-direction: column; gap: 1px; white-space: nowrap; pointer-events: none; transform: translate(-50%, -50%); align-items: center }
.radar .lb.l { transform: translate(0, -50%); align-items: flex-start } .radar .lb.r { transform: translate(-100%, -50%); align-items: flex-end }
.radar .lb span { font-size: 13px; color: var(--u-fg-2) } .radar .lb b { font-size: 15px }
.radar .cap { margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--u-mut) }
.dims { flex: 1 1 520px; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.dims .u-card { padding: 18px; display: flex; flex-direction: column; gap: 10px }
.dims .k { font-size: 13px; color: var(--u-mut) } .dims .n { font-size: 32px; line-height: 1; font-weight: 500 } .dims .n small { font-size: 13px; color: var(--u-mut); margin-left: 2px }
.dims .t { display: block; height: 3px; border-radius: 2px; background: var(--u-track) } .dims .t i { display: block; height: 100% } .dims .nt { font-size: 12px }
.u-dt-brow { display: grid; grid-template-columns: minmax(150px, 1.1fr) 90px minmax(0, 1fr) minmax(0, 1fr) 76px 90px; align-items: center; column-gap: 16px; min-height: 54px; border-bottom: 1px solid var(--u-line) }
.u-dt-brow.one .bar.w { grid-column: 3 / 6 } .u-dt-brow.one .rk { grid-column: 6 }
.u-dt-brow.head { min-height: 40px; font-size: 12px; color: var(--u-mut); border-bottom-color: var(--u-line-2) }
.u-dt-brow .k { font-size: 14px; color: var(--u-fg-2); display: flex; align-items: center; gap: 2px }
.u-dt-brow .v { text-align: right; font-size: 16px; font-weight: 500 } .u-dt-brow .v.s { font-size: 14px } .u-dt-brow .v small { font-size: 11px; color: var(--u-mut) }
.u-dt-brow .rk { text-align: right; font-size: 12px; color: var(--u-mut) }
.u-dt-brow .bar { display: flex; height: 10px; border-radius: 3px; background: var(--u-track); overflow: hidden } .u-dt-brow .bar.l { justify-content: flex-end }
.u-dt-brow .bar i { display: block; height: 100%; border-radius: 3px } .u-dt-brow.head .bar { height: auto; background: none }
.u-dt-brow.head .bar.l { justify-content: flex-end }
.u-dt-body { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border-bottom: 1px solid var(--u-line) }
.u-dt-body > div { padding: 22px 16px 22px 0 } .u-dt-body dt { font-size: 12px; color: var(--u-mut) } .u-dt-body dd { margin: 8px 0 0; font-size: 26px; font-weight: 500 } .u-dt-body dd small { font-size: 12px; color: var(--u-mut); margin-left: 4px; font-family: "Geist", "PingFang SC", sans-serif }
.u-dt-spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); column-gap: 64px; align-items: start }
.u-dt-spec .grp { padding-top: 28px } .u-dt-spec h3 { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--u-acc-ink) }
.u-dt-spec dl { margin: 0 } .u-dt-spec dl > div { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--u-line); font-size: 14px; line-height: 1.5 }
.u-dt-spec dt { color: var(--u-mut); padding-top: 1px } .u-dt-spec dd { margin: 0; display: flex; flex-direction: column; gap: 10px }
.u-dt-spec .it { display: flex; flex-direction: column; gap: 2px } .u-dt-spec .it b { font-weight: 500; font-size: 15px; color: var(--u-fg) } .u-dt-spec .it small { font-size: 12px; line-height: 1.5; color: var(--u-dim) }
.u-dt-body dd.txt small { display: block; margin: 4px 0 0 !important; font-size: 12px }
.u-dt-video { margin-top: 28px; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #000 } .u-dt-video iframe { width: 100%; height: 100% }
.u-dt-chap { display: flex; gap: 8px; overflow-x: auto; margin-top: 14px; padding-bottom: 4px }
.u-dt-chap button { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--u-line-2); background: var(--u-surface); color: var(--u-fg-2); font-size: 13px; cursor: pointer }
.u-dt-chap button span { color: var(--u-acc-ink) }
.u-dt-art { display: flex; flex-wrap: wrap; gap: 56px; padding-top: 36px }
.u-dt-art .toc { flex: 0 0 200px; position: sticky; top: 140px; align-self: flex-start }
.u-dt-art .toc p { margin: 0 0 10px; font-size: 12px; color: var(--u-dim) }
.u-dt-art .toc a { display: block; padding: 7px 0 7px 14px; border-left: 2px solid var(--u-line); font-size: 14px; color: var(--u-mut) } .u-dt-art .toc a:hover { color: var(--u-fg); border-left-color: var(--u-acc-ink) }
.u-dt-art .art { flex: 1 1 560px; min-width: 0; max-width: 760px; font-size: 16px; line-height: 1.9; color: var(--u-fg-2) }
.u-dt-art .art h2, .u-dt-art .art h3 { margin: 36px 0 12px; color: var(--u-fg); font-size: 22px } .u-dt-art .art p { margin: 0 0 16px }
.u-dt-art .art img { max-width: 100%; border-radius: 14px } .u-dt-art .art a { color: var(--u-acc-ink); text-decoration: underline }
.u-sim { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-top: 28px }
.u-sim .c { overflow: hidden; display: flex; flex-direction: column }
.u-sim .im { position: relative; display: block; height: 200px; margin: 8px 8px 0; border-radius: 12px; font-size: 32px }
.u-sim .im img { position: absolute; inset: 0 }
.u-sim .b { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1 }
.u-sim .nm { font-size: 16px; font-weight: 600 } .u-sim .why { align-self: flex-start; padding: 2px 8px; border-radius: 6px; background: var(--u-acc-soft); color: var(--u-acc-ink); font-size: 12px }
.u-sim .ft { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; align-items: flex-end } .u-sim .ft b { font-size: 18px }
.u-sim .u-btn { margin-top: 10px }
.u-dt-mbar { display: none }
@media (max-width: 860px) {
  .u-dt-sub { top: 56px } .u-dt-sub .back, .u-dt-sub .sep, .u-dt-sub .cur, .u-dt-sub nav .u-btn { display: none }
  .u-dt-sub nav { margin: 0; overflow-x: auto; scrollbar-width: none } .u-dt-sub nav::-webkit-scrollbar { display: none }
  .u-dt-hero { padding-top: 0; gap: 20px } .u-dt-hero .gal { flex-basis: 100%; margin: 0 -16px } .u-dt-hero .main { border-radius: 0 }
  .u-dt-hero .thumbs { display: none } .u-dt-hero h1 { font-size: 28px; letter-spacing: -0.8px }
  .u-dt-hero .stats dd { font-size: 20px } .u-dt-hero .acts { display: none }
  .radar-row { gap: 24px } .radar { min-width: 0; flex-basis: 100%; max-width: 340px } .dims { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .u-dt-brow, .u-dt-brow.one { grid-template-columns: minmax(0, 1fr) 70px 60px; column-gap: 10px } .u-dt-brow.one .rk { grid-column: auto }
  .u-dt-brow .bar, .u-dt-brow.head .bar { display: none } .u-dt-brow.one .rk { display: block } .u-dt-brow:not(.one) .rk { display: none }
  .u-dt-spec { grid-template-columns: 1fr } .u-dt-spec dl > div { grid-template-columns: 84px 1fr }
  .u-dt-art .toc { display: none } .u-sim { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px } .u-sim .im { height: 116px; margin: 6px 6px 0 }
  .u-dt-sec .hd h2 { font-size: 24px } .u-dt-sec { padding-bottom: 56px }
  .u-dt-mbar { display: flex; position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom)); z-index: 45; gap: 8px; padding: 10px 16px; background: color-mix(in srgb, var(--u-bg) 94%, transparent); border-top: 1px solid var(--u-line) }
  .u-dt-mbar .u-btn { height: 46px }
  .u-dt-verdict { grid-template-columns: 1fr; padding-bottom: 48px }
}

/* 大图查看 */
.u-gal { position: fixed; inset: 0; z-index: 150; background: rgba(8,8,10,.82); backdrop-filter: blur(24px) saturate(120%); -webkit-backdrop-filter: blur(24px) saturate(120%); animation: u-fade .2s ease-out; color: #fff; display: flex; flex-direction: column }
.u-gal .gtop { display: flex; align-items: center; height: 56px; padding: 0 8px }
.u-gal .gtop span { margin: 0 auto; font-size: 14px } .u-gal .x, .u-gal .dl { width: 44px; height: 44px; border: 0; background: none; color: #fff; font-size: 26px; display: grid; place-items: center; cursor: pointer }
.u-gal .stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center }
.u-gal .stage img { max-width: 92vw; max-height: 100%; object-fit: contain; border-radius: 8px; background: #F1F1EE }
.u-gal .nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.12); color: #fff; font-size: 28px; cursor: pointer }
.u-gal .nav.p { left: 20px } .u-gal .nav.n { right: 20px }
.u-gal .cap { margin: 10px 16px 0; text-align: center; font-size: 13px; color: #C9C9C4 }
.u-gal .thumbs { display: flex; justify-content: center; gap: 8px; padding: 14px 16px 24px; overflow-x: auto }
.u-gal .thumbs button { flex: none; width: 56px; height: 56px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: #F1F1EE; opacity: .55; cursor: pointer }
.u-gal .thumbs button.on { border-color: #EDFF4A; opacity: 1 } .u-gal .thumbs img { width: 100%; height: 100%; object-fit: cover }
@media (max-width: 860px) { .u-gal .nav { display: none } }
:root[data-theme="light"] { --rg1: #F2552C; --rg2: #E0123F }
.u-dt-hero .acts > * { flex: none }
.u-dt-hero .buy { flex-wrap: wrap } .u-dt-hero .buy .acts { margin-left: auto }
.u-dt-body dd.txt { font-size: 15px; line-height: 1.5; font-family: "Geist", "PingFang SC", sans-serif }

/* =================== 对比 =================== */
.u-cmp-empty { padding-top: 72px; padding-bottom: 120px; max-width: 1080px }
.u-cmp-empty .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 44px }
.u-cmp-empty .c { text-align: left; padding: 28px; border-radius: 20px; background: var(--u-surface); border: 1px solid var(--u-line-2); color: var(--u-fg); display: flex; flex-direction: column; gap: 10px; min-height: 200px; cursor: pointer; font: inherit }
.u-cmp-empty .c.pri { background: var(--u-acc); color: var(--u-on-acc); border-color: var(--u-acc) }
.u-cmp-empty .c b { font-size: 22px } .u-cmp-empty .c .k { font-size: 12px; opacity: .7 } .u-cmp-empty .c span { font-size: 14px; line-height: 1.7 }
.u-cmp-empty .c .go { margin-top: auto; font-weight: 700 }
.u-cmp-hd { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; justify-content: space-between; padding-top: 56px; padding-bottom: 28px }
.u-cmp-hd .t { margin: 0; font-size: 44px; line-height: 1.15; font-weight: 700; letter-spacing: -1.5px; max-width: 900px } .u-cmp-hd .t.lg { font-size: 54px }
.u-cmp-hd .vs { color: var(--u-dim) }
.u-cmp-hd .acts { display: flex; gap: 8px } .u-cmp-hd .acts .on { border-color: var(--u-acc-ink); color: var(--u-acc-ink); background: var(--u-acc-soft) }
.u-cmp-ins { border-radius: 20px; padding: 24px 30px; background: var(--u-acc-soft); border: 1px solid var(--u-acc-line); margin-bottom: 40px }
.u-cmp-ins .h { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--u-acc-ink) }
.u-cmp-ins ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.6 }
.u-cmp-ins li::marker { color: var(--u-acc-ink); font-family: "Geist Mono", monospace }
.u-cmp-hint { margin: 0 auto 12px; font-size: 13px; color: var(--u-mut); display: flex; gap: 10px }
.u-cmp-scroll { --k: 200px; overflow-x: auto; padding-bottom: 120px; scrollbar-color: var(--u-line-2) transparent }
.u-cmp-row { display: grid; grid-template-columns: var(--k) repeat(var(--n), minmax(0, 1fr)); column-gap: 24px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--u-line) }
.u-cmp-scroll.many .u-cmp-row { grid-template-columns: var(--k) repeat(var(--n), 250px); width: max-content; min-width: 100% }
.u-cmp-scroll.many .u-cmp-row > .k { position: sticky; left: 0; z-index: 2; background: var(--u-bg); align-self: stretch }
.u-cmp-scroll.many .u-cmp-row > .k::after { content: ""; position: absolute; top: 0; bottom: 0; right: -24px; width: 24px; background: linear-gradient(90deg, var(--u-bg), transparent); pointer-events: none }
.u-cmp-row > .k { font-size: 14px; color: var(--u-mut); display: flex; align-items: center; gap: 2px; padding-top: 2px }
.u-cmp-row.machines { padding-bottom: 26px; border-bottom-color: var(--u-line-2) }
.u-cmp-row .ctl { flex-direction: column; align-items: stretch; gap: 12px }
.u-cmp-row .ctl .u-seg button { flex: 1 } .u-cmp-row .ctl .lnk { border: 0; background: none; color: var(--u-mut); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; align-self: center }
.u-cmp-row .ctl .add { height: 40px; border-radius: 999px; border: 1px dashed var(--u-line-2); background: transparent; color: var(--u-fg-2); font-size: 13px; cursor: pointer }
.u-cmp-row .ctl .lg { margin: 4px 0 0; font-size: 12px; line-height: 1.8; color: var(--u-dim) }
.u-cmp-row .m { display: flex; flex-direction: column; gap: 10px; min-width: 0 }
.u-cmp-row .m .ph { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; font-size: 32px }
.u-cmp-row .m .ph a { position: absolute; inset: 0; display: grid; place-items: center } .u-cmp-row .m .ph img { position: absolute; inset: 0 }
.u-cmp-row .m .x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: rgba(17,17,19,0.62); backdrop-filter: blur(6px); color: #fff; font-size: 16px; cursor: pointer }
.u-cmp-row .m .nm { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; line-height: 1.35 } .u-cmp-row .m .pr { font-size: 15px; color: var(--u-mut) }
.u-cmp-row .c { display: flex; flex-direction: column; gap: 8px; min-width: 0 }
.u-cmp-row .c .v { font-size: 17px; font-weight: 500 } .u-cmp-row .c .v small { font-size: 11px; color: var(--u-mut) }
.u-cmp-row .c.best .v { color: var(--u-acc-ink); font-weight: 700 }
.u-cmp-row .c .t { display: block; height: 4px; border-radius: 2px; background: var(--u-track) }
.u-cmp-row .c .t i { display: block; height: 100%; border-radius: 2px; background: var(--u-fg-2); opacity: .45 }
.u-cmp-row .c.best .t i { background: var(--u-acc-ink); opacity: 1 }
:root[data-theme="light"] .u-cmp-row .c .t i.amd { background: linear-gradient(90deg, var(--u-amd-1), var(--u-amd-2)); opacity: .28 }
:root[data-theme="light"] .u-cmp-row .c .t i.intel { background: linear-gradient(90deg, var(--u-intel-1), var(--u-intel-2)); opacity: .28 }
:root[data-theme="light"] .u-cmp-row .c.best .t i { opacity: 1 }
.u-cmp-row .c.txt { font-size: 14px; line-height: 1.6; color: var(--u-fg-2) }
.u-cmp-row.gh { padding: 26px 0 10px; border-bottom: 0 } .u-cmp-row.gh .k button { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; color: var(--u-acc-ink); font-size: 13px; font-weight: 600; cursor: pointer }
.u-cmp-row.gh .ar { width: 20px; height: 20px; border-radius: 6px; background: var(--u-acc-soft); display: grid; place-items: center; font-size: 11px }
.u-cmp-row.gh .peek { grid-column: 2 / -1; font-size: 12px; color: var(--u-dim); align-self: center }
.u-cmp-g:has(.peek) .u-cmp-row.gh { border-bottom: 1px solid var(--u-line); padding-bottom: 16px }
.u-cmp-pool, .u-cmp-mbar { display: none }
@media (max-width: 860px) {
  .u-cmp-hd { padding-top: 20px; padding-bottom: 14px } .u-cmp-hd .t, .u-cmp-hd .t.lg { font-size: 24px; letter-spacing: -0.5px } .u-cmp-hd .acts { display: none }
  .u-cmp-ins { padding: 16px 18px; margin-bottom: 14px } .u-cmp-ins ol { font-size: 14px }
  .u-cmp-pool { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 14px; scrollbar-width: none }
  .u-cmp-pool button { flex: none; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px 0 4px; border-radius: 999px; border: 1px solid var(--u-line-2); background: transparent; color: var(--u-fg); font-size: 13px }
  .u-cmp-pool button.on { border-color: var(--u-acc-ink); background: var(--u-acc-soft) }
  .u-cmp-pool .u-photo { width: 36px; height: 36px; border-radius: 50% } .u-cmp-pool b { width: 18px; height: 18px; border-radius: 50%; background: var(--u-acc); color: var(--u-on-acc); font-size: 10px; display: grid; place-items: center }
  .u-cmp-pool .add { border-style: dashed; padding: 0 14px; color: var(--u-mut) }
  .u-cmp-scroll { --k: 0px } .u-cmp-row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 6px }
  .u-cmp-row > .k { grid-column: 1 / -1; font-size: 12px } .u-cmp-row .ctl { display: grid; grid-template-columns: 1fr auto; align-items: center } .u-cmp-row .ctl .add, .u-cmp-row .ctl .lg { display: none }
  .u-cmp-row.machines { position: sticky; top: 56px; z-index: 5; background: var(--u-bg) } .u-cmp-row .m .ph { display: none } .u-cmp-row .m .nm { font-size: 13px } .u-cmp-row .m .pr { display: none }
  .u-cmp-row .c .v { font-size: 15px } .u-cmp-row.gh .peek { grid-column: 1 / -1 }
  .u-cmp-mbar { display: flex; position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom)); z-index: 45; gap: 8px; padding: 10px 16px; background: color-mix(in srgb, var(--u-bg) 94%, transparent); border-top: 1px solid var(--u-line) }
}

/* =================== 弹窗（导出等） =================== */
.u-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 95; width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; box-sizing: border-box; padding: 26px 28px; border-radius: 24px; background: var(--u-elev); border: 1px solid var(--u-line-2); box-shadow: var(--u-shadow); color: var(--u-fg) }
.u-modal .hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px } .u-modal h2 { margin: 0; font-size: 22px }
.u-modal .x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--u-hover); color: var(--u-fg-2); font-size: 18px; cursor: pointer }
.u-modal .fmts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px }
.u-modal .fmts button, .u-modal .thm button { text-align: left; padding: 16px; border-radius: 16px; border: 1px solid var(--u-line-2); background: var(--u-surface); color: var(--u-fg); cursor: pointer; display: flex; flex-direction: column; gap: 6px; font: inherit }
.u-modal .fmts button.on, .u-modal .thm button.on { border-color: var(--u-acc-ink); background: var(--u-acc-soft) }
.u-modal .fmts b { font-size: 15px } .u-modal .fmts span:not(.tg) { font-size: 12px; line-height: 1.5; color: var(--u-mut) }
.u-modal .tg { align-self: flex-start; padding: 3px 8px; border-radius: 6px; font-size: 10px; font-weight: 700 }
.tg.png, .tg.PNG { background: rgba(34,211,238,0.14); color: #22B8D0 } .tg.pdf, .tg.PDF { background: rgba(255,45,85,0.14); color: #F0506E } .tg.ppt, .tg.PPT { background: rgba(255,122,61,0.14); color: #F08040 }
.u-modal .thm { display: flex; align-items: center; gap: 10px; margin-top: 18px } .u-modal .thm > span { width: 44px; font-size: 13px }
.u-modal .thm button { flex: 1; flex-direction: row; align-items: center; gap: 10px; padding: 10px 14px }
.u-modal .thm b { font-size: 14px } .u-modal .thm span { font-size: 12px; color: var(--u-mut) }
.u-modal .sw { flex: none; width: 40px; height: 28px; border-radius: 6px; border: 1px solid var(--u-line-2) } .u-modal .sw.dark { background: #0A0A0C } .u-modal .sw.light { background: #fff }
.u-modal .note { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--u-hover); border: 1px solid var(--u-line); font-size: 13px; line-height: 1.7; color: var(--u-fg-2) }
.u-modal .note.vip { background: var(--u-acc-soft); border-color: var(--u-acc-line) }
.u-modal .ft { display: flex; align-items: center; gap: 12px; margin-top: 22px } .u-modal .ft .u-btn { margin-left: auto } .u-modal .ft .up { font-size: 13px; color: var(--u-acc-ink) }
.u-prog { display: block; height: 6px; border-radius: 3px; background: var(--u-track); overflow: hidden } .u-prog i { display: block; width: 40%; height: 100%; border-radius: 3px; background: var(--u-acc-ink); animation: u-prog 1.2s ease-in-out infinite }
@keyframes u-prog { 0% { transform: translateX(-100%) } 100% { transform: translateX(260%) } }
.u-okc { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--u-acc); color: var(--u-on-acc); font-size: 24px; font-weight: 700 }
@media (max-width: 860px) {
  .u-modal { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100%; max-height: 88vh; border-radius: 24px 24px 0 0; padding: 18px 20px calc(24px + env(safe-area-inset-bottom)) }
  .u-modal .fmts { grid-template-columns: 1fr } .u-modal .fmts button { flex-direction: row; align-items: center; flex-wrap: wrap } .u-modal .fmts span:not(.tg) { flex-basis: 100% }
  .u-modal .thm { flex-wrap: wrap } .u-modal .thm > span { width: 100% } .u-modal .thm span { display: none }
  .u-modal .ft { flex-direction: column-reverse; align-items: stretch } .u-modal .ft .u-btn { margin: 0 }
}
.u-cmp-row > .k.ctl { display: flex; flex-direction: column; align-items: stretch }
.u-cmp-row .ctl .lg { width: 100%; writing-mode: horizontal-tb }
.u-cmp-row .ctl .lg .u-tag-best { display: inline-block }

/* =================== 机型库 =================== */
.u-lib-hd { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; justify-content: space-between; padding-top: 64px; padding-bottom: 32px }
.u-lib-q { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--u-line-2); min-width: 320px; color: var(--u-mut) }
.u-lib-q input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--u-fg); font-size: 14px }
.u-lib-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 0; border-top: 1px solid var(--u-line); border-bottom: 1px solid var(--u-line) }
.u-lib-bar .cats { display: flex; flex-wrap: wrap; gap: 8px }
.u-lib-bar .srt { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px }
.u-lib-bar select { height: 36px; padding: 0 28px 0 12px; border-radius: 999px; border: 1px solid var(--u-line-2); background: var(--u-surface); color: var(--u-fg-2); font-size: 13px }
.u-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; padding-top: 28px; padding-bottom: 96px }
.u-lib-card { display: flex; flex-direction: column; border-radius: 18px; background: var(--u-surface); border: 1px solid var(--u-line); overflow: hidden }
.u-lib-card:hover { border-color: var(--u-line-2) }
.u-lib-card .im { display: block; aspect-ratio: 4 / 3; margin: 8px 8px 0; border-radius: 12px; font-size: 32px }
.u-lib-card .b { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px }
.u-lib-card .cat { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--u-mut) } .u-lib-card .cat .u-mono { margin-left: auto }
.u-lib-card .nm { font-size: 16px; font-weight: 600; line-height: 1.4 } .u-lib-card .nm:hover { text-decoration: underline; text-underline-offset: 3px }
.u-lib-card .sm { margin: 0; font-size: 13px; line-height: 1.6; color: var(--u-mut); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.u-lib-card .ft { margin-top: auto; padding-top: 12px; display: flex; align-items: flex-end; gap: 10px; border-top: 1px solid var(--u-line) }
.u-lib-card .ft > span:first-child { display: flex; flex-direction: column; font-size: 11px } .u-lib-card .ft b { font-size: 22px; font-weight: 600; color: var(--u-acc-ink) }
.u-lib-card .pr { margin-left: auto; font-size: 14px; color: var(--u-fg-2) }
.u-lib-card .cmp { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--u-line-2); background: transparent; color: var(--u-fg); font-size: 16px; cursor: pointer; flex: none }
.u-lib-card .cmp.on { background: var(--u-acc); border-color: var(--u-acc); color: var(--u-on-acc) }
@media (max-width: 860px) {
  .u-lib-hd { padding-top: 24px; padding-bottom: 16px } .u-lib-q { min-width: 0; width: 100% }
  .u-lib-bar .cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none } .u-lib-bar .srt { margin-left: 0 }
  .u-lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 14px }
  .u-lib-card .im { margin: 6px 6px 0 } .u-lib-card .b { padding: 10px 12px 12px } .u-lib-card .nm { font-size: 14px } .u-lib-card .sm, .u-lib-card .pr, .u-lib-card .cat .u-mono { display: none }
  .u-lib-card .ft b { font-size: 17px } .u-lib-card .cmp { margin-left: auto; width: 32px; height: 32px }
}

/* =================== 搜索浮层 =================== */
.u-srch .u-scrim { z-index: 120 }
.u-srch .pane { position: fixed; z-index: 121; left: 50%; top: 72px; transform: translateX(-50%); width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 120px); display: flex; flex-direction: column; border-radius: 24px; background: var(--u-elev); border: 1px solid var(--u-line-2); box-shadow: var(--u-shadow); overflow: hidden }
.u-srch .bar { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--u-line); color: var(--u-acc-ink) }
.u-srch .bar input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--u-fg); font-size: 18px; font-weight: 500 }
.u-srch .esc { height: 28px; padding: 0 10px; border-radius: 8px; border: 0; background: var(--u-track); color: var(--u-mut); font: 12px "Geist Mono", monospace; cursor: pointer }
.u-srch .body { overflow-y: auto; padding: 6px 12px 12px }
.u-srch .lbl { display: flex; justify-content: space-between; margin: 14px 8px 8px; font-size: 12px; color: var(--u-mut) } .u-srch .lbl button { border: 0; background: none; color: var(--u-dim); font-size: 12px; cursor: pointer }
.u-srch .chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 8px }
.u-srch .brands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 0 8px }
.u-srch .brands button { height: 56px; border-radius: 12px; border: 0; background: var(--u-surface-2); color: var(--u-fg); font-size: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer }
.u-srch .brands span { font-size: 10px; color: var(--u-dim) }
.u-srch .hot { width: 100%; display: flex; align-items: center; gap: 14px; height: 42px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--u-fg); font-size: 14px; text-align: left; cursor: pointer }
.u-srch .hot:hover { background: var(--u-hover) } .u-srch .hot .u-mono { width: 18px; color: var(--u-dim); font-weight: 700 } .u-srch .hot .h { color: var(--u-acc-ink) } .u-srch .hot .u-dim { margin-left: auto; font-size: 12px }
.u-srch .res { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px }
.u-srch .res.on, .u-srch .res:hover { background: var(--u-hover); box-shadow: inset 0 0 0 1px var(--u-line-2) }
.u-srch .res .u-photo { flex: none; width: 40px; height: 40px; border-radius: 10px; font-size: 13px } .u-srch .res .cpu { background: var(--u-surface-2); color: var(--u-mut); font-size: 11px }
.u-srch .res .tx { flex: 1; min-width: 0; display: flex; flex-direction: column } .u-srch .res .tx b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.u-srch .res .tx span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--u-mut) } .u-srch .res .sc { font-size: 13px; color: var(--u-fg-2) }
.u-srch .res.all { justify-content: space-between; color: var(--u-acc-ink); font-size: 14px; margin-top: 6px }
.u-srch .none { padding: 40px 16px; text-align: center } .u-srch .none .t { margin: 0 0 6px; font-size: 16px; font-weight: 600 } .u-srch .none p { margin: 0 }
.u-srch .wish { display: inline-flex; align-items: center; gap: 16px; margin-top: 22px; padding: 14px 14px 14px 20px; border-radius: 16px; border: 1px dashed var(--u-acc-line); text-align: left }
.u-srch .wish > span { display: flex; flex-direction: column; font-size: 13px }
.u-srch .foot { display: flex; gap: 18px; padding: 12px 20px; border-top: 1px solid var(--u-line); font-size: 12px; color: var(--u-dim) }
@media (max-width: 860px) {
  .u-srch .pane { inset: 0; transform: none; width: 100%; max-height: none; border-radius: 0; border: 0 }
  .u-srch .bar { padding: 10px 12px } .u-srch .bar input { font-size: 16px } .u-srch .esc { background: none; font: 15px "Geist", "PingFang SC", sans-serif; color: var(--u-fg-2) }
  .u-srch .foot { display: none } .u-srch .wish { flex-direction: column; align-items: stretch }
}
.u-lib-card .im, .u-sim .im, .u-rk-row .th, .u-cmp-row .m .ph a { display: grid; place-items: center }
.u-srch input::-webkit-search-cancel-button, .u-lib-q input::-webkit-search-cancel-button { -webkit-appearance: none }

/* ---------------- 选机向导 ---------------- */
.u-wz { padding-top: 28px; padding-bottom: 64px }
.u-wz-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 18px }
.u-wz-crumb .esc { margin-left: auto; color: var(--u-mut); font-size: 13px } .u-wz-crumb .esc:hover { color: var(--u-fg) }
.u-wz-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--u-line); margin-bottom: 28px }
.u-wz-bar p { margin: 0; font-size: 13px } .u-wz-bar b { color: var(--u-fg) }
.u-wz-steps { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: 0 }
.u-wz-steps li { display: flex; align-items: center }
.u-wz-steps i { width: 32px; height: 1px; background: var(--u-line-2); margin: 0 8px }
.u-wz-steps button { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 4px 0; color: var(--u-dim); font-size: 14px; cursor: pointer }
.u-wz-steps button:disabled { cursor: default }
.u-wz-steps button span { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--u-line-2); display: grid; place-items: center; font-size: 12px }
.u-wz-steps .done { color: var(--u-mut) } .u-wz-steps .done span { border-color: var(--u-fg-2); color: var(--u-fg) }
.u-wz-steps .cur { color: var(--u-fg); font-weight: 600 } .u-wz-steps .cur span { background: var(--u-acc); border-color: var(--u-acc); color: var(--u-on-acc) }
.u-wz-q { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px }
.u-wz-q h1 { font-size: clamp(24px, 3vw, 34px); margin: 0 0 6px; letter-spacing: -.02em } .u-wz-q p { margin: 0; color: var(--u-mut); font-size: 14px }
.u-wz-q .hl { color: var(--u-acc) } [data-theme="light"] .u-wz-q .hl { background: #111; color: #EDFF4A; padding: 0 8px; border-radius: 6px }
.u-wz-q .tip { font-size: 12px; color: var(--u-dim); white-space: nowrap }
.u-wz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px }
.u-wz-opt { display: flex; align-items: flex-start; gap: 12px; text-align: left; padding: 16px; border-radius: 14px; border: 1px solid var(--u-line); background: var(--u-surface); color: var(--u-fg); cursor: pointer; transition: border-color .15s, background .15s }
.u-wz-opt:hover { border-color: var(--u-line-2) }
.u-wz-opt.on { border-color: var(--u-acc); box-shadow: inset 0 0 0 1px var(--u-acc) }
[data-theme="light"] .u-wz-opt.on { border-color: #111; box-shadow: inset 0 0 0 1px #111 }
.u-wz-opt .ck { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--u-line-2); display: grid; place-items: center; font-size: 11px; margin-top: 1px }
.u-wz-opt.on .ck { background: var(--u-acc); border-color: var(--u-acc); color: var(--u-on-acc) }
[data-theme="light"] .u-wz-opt.on .ck { background: #111; border-color: #111; color: #EDFF4A }
.u-wz-opt .tx { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.u-wz-opt .tx b { font-size: 15px } .u-wz-opt .tx span { font-size: 13px; color: var(--u-mut); line-height: 1.5 } .u-wz-opt .tx em { font-style: normal; font-size: 12px; color: var(--u-dim) }
.u-wz-opt .n { flex: none; font-size: 12px; color: var(--u-mut) } .u-wz-opt .n.z, .u-wz-custom .n.z { color: var(--u-dim); opacity: .6 }
.u-wz-blk { margin-bottom: 24px } .u-wz-blk .bh { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 14px; flex-wrap: wrap }
.u-wz-blk .tg { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: var(--u-surface-2); color: var(--u-mut) } .u-wz-blk .tg.r { color: #FF7A5C } .u-wz-blk .tg.h { color: var(--u-acc) }
[data-theme="light"] .u-wz-blk .tg.h { background: #111; color: #EDFF4A }
.u-wz-blk .u-dim { font-size: 12px }
.u-wz-custom { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; border: 1px dashed var(--u-line-2); border-radius: 14px; font-size: 14px }
.u-wz-custom.on { border-style: solid; border-color: var(--u-acc) } [data-theme="light"] .u-wz-custom.on { border-color: #111 }
.u-wz-custom label { display: flex; align-items: center; gap: 4px; color: var(--u-mut) }
.u-wz-custom input { width: 110px; height: 36px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--u-line); background: var(--u-bg); color: var(--u-fg); font: 14px var(--u-mono) }
.u-wz-custom .n { margin-left: auto; font-size: 12px; color: var(--u-mut) }
.u-wz-foot { display: flex; align-items: center; gap: 10px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--u-line) }
.u-wz-foot .r { margin-left: auto; display: flex; gap: 10px }
.u-wz-sum { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 22px }
.u-wz-sum button { font-size: 13px; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--u-line); background: var(--u-surface); color: var(--u-fg); cursor: pointer }
.u-wz-sum button span { color: var(--u-dim); margin-left: 6px } .u-wz-sum button:hover span { color: var(--u-fg) }
.u-wz-sum .k { margin-left: auto; font-size: 12px; color: var(--u-dim) }
.u-wz-tops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 32px }
.u-wz-top { border: 1px solid var(--u-line); border-radius: 18px; background: var(--u-surface); padding: 10px; display: flex; flex-direction: column }
.u-wz-top.first { border-color: var(--u-acc) } [data-theme="light"] .u-wz-top.first { border-color: #111 }
.u-wz-top .im { position: relative; aspect-ratio: 4/3; font-size: 28px }
.u-wz-top .im img { width: 100%; height: 100%; object-fit: cover }
.u-wz-top .bd { position: absolute; left: 10px; top: 10px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: rgba(0,0,0,.6); color: #fff }
.u-wz-top.first .bd { background: var(--u-acc); color: var(--u-on-acc) } [data-theme="light"] .u-wz-top.first .bd { background: #111; color: #EDFF4A }
.u-wz-top .ck { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; align-items: center; font-size: 12px; padding: 4px 10px 4px 6px; border-radius: 99px; background: rgba(0,0,0,.6); color: #fff; cursor: pointer }
.u-wz-top .ck .u-chk { width: 16px; height: 16px; border-color: rgba(255,255,255,.6) }
.u-wz-top .b { padding: 14px 6px 6px; display: flex; flex-direction: column; gap: 6px; flex: 1 }
.u-wz-top .nm { font-size: 17px; font-weight: 600 } .u-wz-top .cpu { font-size: 13px; color: var(--u-mut); display: flex; gap: 6px; align-items: center }
.u-wz-top .why { margin: 0; font-size: 13px; color: var(--u-fg-2); min-height: 2.8em; line-height: 1.4 }
.u-wz-top .mt { display: flex; justify-content: space-between; align-items: baseline; margin-top: auto; font-size: 12px }
.u-wz-top .mt b { font-size: 26px; letter-spacing: -.02em } .u-wz-top .mt small { font-size: 13px; color: var(--u-mut) }
.u-wz-top .mb { height: 6px; border-radius: 3px; background: var(--u-surface-2); overflow: hidden } .u-wz-top .mb i { display: block; height: 100%; background: var(--u-acc) }
[data-theme="light"] .u-wz-top .mb i { background: #111 }
.u-wz-top .ft { display: grid; grid-template-columns: 1fr 1fr; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--u-line); font-size: 12px }
.u-wz-top .ft > span { display: flex; flex-direction: column; gap: 2px } .u-wz-top .ft b { font-size: 15px }
.u-wz-more .mh { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; font-size: 14px }
.u-wz-more .mh p { margin: 0 } .u-wz-more .mh .u-mut { font-size: 13px }
.u-wz-more .lgd { display: flex; gap: 14px; font-size: 12px; color: var(--u-mut) } .u-wz-more .lgd span { display: flex; align-items: center; gap: 6px } .u-wz-more .lgd i { width: 10px; height: 10px; border-radius: 3px }
.u-wz-more .m1 i, .u-wz-more i.m1 { background: var(--u-acc) } .u-wz-more .m2 i, .u-wz-more i.m2 { background: var(--u-fg-2) } .u-wz-more .m3 i, .u-wz-more i.m3 { background: var(--u-line-2) }
[data-theme="light"] .u-wz-more .m1 i, [data-theme="light"] .u-wz-more i.m1 { background: #111 }
.u-wz-more .tb { border: 1px solid var(--u-line); border-radius: 14px; overflow: hidden }
.u-wz-more .tr { display: grid; grid-template-columns: 28px 40px 44px 1fr 170px 110px 100px; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--u-line); font-size: 14px }
.u-wz-more .tr:first-child { border-top: 0 } .u-wz-more .tr.on { background: var(--u-surface) }
.u-wz-more .th { font-size: 12px; color: var(--u-dim); padding-top: 8px; padding-bottom: 8px; background: var(--u-surface) } .u-wz-more .th span:nth-child(n+6) { text-align: right }
.u-wz-more .th2 { width: 44px; height: 44px; border-radius: 9px; font-size: 13px } .u-wz-more .th2 img { width: 100%; height: 100%; object-fit: cover }
.u-wz-more .nm { display: flex; flex-direction: column; gap: 2px; min-width: 0 } .u-wz-more .nm span { font-size: 12px; color: var(--u-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .u-wz-more .nm .bad { color: #FF7A5C }
.u-wz-more .mm { display: flex; align-items: center; gap: 10px } .u-wz-more .mm .t { flex: 1; height: 5px; border-radius: 3px; background: var(--u-surface-2); overflow: hidden } .u-wz-more .mm .t i { display: block; height: 100% }
.u-wz-more .mm b { width: 40px; text-align: right; font-size: 13px } .u-wz-more .rt { text-align: right }
@media (max-width: 860px) {
  .u-wz { padding-top: 16px; padding-bottom: 120px }
  .u-wz-crumb > a:first-child, .u-wz-crumb > .u-dim { display: none }
  .u-wz-steps i { width: 14px; margin: 0 4px } .u-wz-steps button { font-size: 13px; gap: 5px } .u-wz-steps button span { width: 20px; height: 20px; font-size: 11px }
  .u-wz-q .tip { display: none } .u-wz-grid { grid-template-columns: 1fr }
  .u-wz-foot { position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom)); margin: 0; padding: 12px 16px; background: var(--u-bg); z-index: 20 }
  .u-wz-foot .ghost { display: none } .u-wz-foot .r { flex: 1 } .u-wz-foot .r .pri { flex: 1 }
  .u-wz-tops { grid-template-columns: 1fr } .u-wz-sum .k { margin-left: 0; width: 100% }
  .u-wz-more .tr { grid-template-columns: 24px 44px 1fr 90px } .u-wz-more .tr > :nth-child(2), .u-wz-more .tr > :nth-child(6), .u-wz-more .tr > :nth-child(7) { display: none }
  .u-wz-more .mm b { width: 34px }
}

/* ---------------- 许愿池 ---------------- */
.u-wish-pool { position: relative; height: clamp(620px, calc(100vh - 64px), 820px); overflow: hidden; border-bottom: 1px solid var(--u-line);
  background: radial-gradient(70% 60% at 50% 38%, rgba(237,255,74,.07), rgba(237,255,74,0) 60%), radial-gradient(120% 100% at 50% 0%, #15151A 0%, #0A0A0D 65%, #070709 100%) }
.u-wish-pool::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none }
[data-theme="light"] .u-wish-pool { background: #E6E6E0 } [data-theme="light"] .u-wish-pool::before { background-image: radial-gradient(rgba(17,17,19,.05) 1px, transparent 1px) }
.u-wish-pool .field { position: absolute; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none }
.u-wish-pool .ball { position: absolute; left: 0; top: 0; border-radius: 50%; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; cursor: grab; touch-action: none; will-change: transform;
  background: #1C1C22; color: #F4F4F1; border: 1px solid rgba(255,255,255,.10); box-shadow: 0 12px 32px rgba(0,0,0,.35); transition: box-shadow .2s, opacity .25s, background .2s }
.u-wish-pool .ball:active { cursor: grabbing }
.u-wish-pool .ball .nm { max-width: 80%; font-weight: 700; line-height: 1.15 } .u-wish-pool .ball .v { color: #9A9AA1 }
.u-wish-pool .ball .tg { font-size: 10px; font-weight: 700; letter-spacing: 1px; opacity: .8 }
.u-wish-pool .ball i { position: absolute; right: 19%; top: 15%; width: 6px; height: 6px; border-radius: 50% }
.u-wish-pool .ball.testing { background: #3A3A42; border: 2px solid rgba(237,255,74,.55) } .u-wish-pool .ball.testing .v { color: #C9C9C4 }
.u-wish-pool .ball.live { background: #EDFF4A; color: #0A0A0A; border: 0; box-shadow: 0 0 40px rgba(237,255,74,.22), 0 12px 32px rgba(0,0,0,.35) } .u-wish-pool .ball.live .v { color: rgba(10,10,10,.6) }
.u-wish-pool .ball.on { border: 2px solid #EDFF4A; box-shadow: 0 0 0 6px rgba(237,255,74,.18), 0 14px 40px rgba(0,0,0,.55) }
.u-wish-pool .ball.off { opacity: .12 }
.u-wish-pool .ball:focus-visible { outline: 2px solid #EDFF4A; outline-offset: 3px }
.u-wish-pool .dot { position: absolute; left: 0; top: 0; border-radius: 50%; background: rgba(244,244,241,.18); pointer-events: none; will-change: transform }
[data-theme="light"] .u-wish-pool .ball { background: #FAFAF6; color: #111113; border: 0; box-shadow: 0 14px 34px rgba(70,70,40,.10) } [data-theme="light"] .u-wish-pool .ball .v { color: #7A7A72 }
[data-theme="light"] .u-wish-pool .ball.testing { background: #2A2A2D; color: #FAFAF6; box-shadow: 0 14px 34px rgba(30,30,20,.18) } [data-theme="light"] .u-wish-pool .ball.testing .v { color: #B9B9B0 }
[data-theme="light"] .u-wish-pool .ball.live { background: #EDFF4A; color: #111113; box-shadow: 0 14px 34px rgba(120,130,0,.22) }
[data-theme="light"] .u-wish-pool .ball.on { border: 2px solid #111113; box-shadow: 0 0 0 6px rgba(17,17,19,.08), 0 18px 40px rgba(70,70,40,.18) }
[data-theme="light"] .u-wish-pool .dot { background: rgba(17,17,19,.12) }
.u-glass { background: linear-gradient(160deg, rgba(40,40,48,.55), rgba(18,18,22,.38)); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 30px 80px rgba(0,0,0,.55); backdrop-filter: blur(28px) saturate(170%); -webkit-backdrop-filter: blur(28px) saturate(170%) }
[data-theme="light"] .u-glass { background: linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.42)); border-color: rgba(255,255,255,.9); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 30px 70px rgba(60,60,40,.16); backdrop-filter: blur(26px) saturate(150%) }
.u-wish-pool .ov { position: absolute; z-index: 2 }
.u-wish-pool .hd { left: max(48px, calc((100% - 1280px) / 2 + 48px)); top: 40px; width: 520px; max-width: calc(100% - 96px) }
.u-wish-pool .hd h1 { margin: 0; font-size: 52px; line-height: 1.05; font-weight: 700; letter-spacing: -2px } .u-wish-pool .hd .hl { color: #EDFF4A } [data-theme="light"] .u-wish-pool .hd .hl { color: #111113 }
.u-wish-pool .demo { color: var(--u-dim) }
.u-wish-pool .in { position: relative; margin-top: 22px; display: flex; gap: 8px; padding: 6px; border-radius: 18px }
.u-wish-pool .in input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border: 0; border-radius: 12px; background: rgba(255,255,255,.07); color: var(--u-fg); font-size: 15px; outline: none }
[data-theme="light"] .u-wish-pool .in input { background: rgba(255,255,255,.75) }
.u-wish-pool .in .u-btn { height: 46px; border-radius: 12px }
.u-wish-pool .sugg { position: absolute; z-index: 5; left: 0; right: 0; top: 64px; padding: 6px; border-radius: 16px; background: var(--u-surface); border: 1px solid var(--u-line-2); box-shadow: 0 20px 60px rgba(0,0,0,.25) }
.u-wish-pool .sugg p { margin: 6px 10px; font-size: 12px; color: var(--u-mut) }
.u-wish-pool .sugg button { width: 100%; display: flex; justify-content: space-between; align-items: center; height: 40px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--u-fg); font-size: 14px; cursor: pointer } .u-wish-pool .sugg button:hover { background: var(--u-surface-2) }
.u-wish-pool .hint { margin: 8px 4px 0; font-size: 12px; color: var(--u-mut); min-height: 1em }
.u-wish-pool .fl { right: max(48px, calc((100% - 1280px) / 2 + 48px)); top: 40px; display: flex; gap: 6px; padding: 5px; border-radius: 999px }
.u-wchip { height: 34px; padding: 0 14px; border-radius: 999px; border: 0; background: transparent; color: #C9C9C4; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer }
.u-wchip .u-mono { font-size: 11px; opacity: .65 } .u-wchip.on { background: #EDFF4A; color: #0A0A0A; font-weight: 600 }
[data-theme="light"] .u-wchip { color: #3C3C42 } [data-theme="light"] .u-wchip.on { background: #111113; color: #EDFF4A }
.u-wish-pool .lg { left: max(48px, calc((100% - 1280px) / 2 + 48px)); bottom: 28px; display: flex; flex-wrap: wrap; gap: 18px; padding: 10px 16px; border-radius: 999px; font-size: 12px; color: var(--u-mut) }
.u-wish-pool .lg span { display: inline-flex; align-items: center; gap: 6px } .u-wish-pool .lg i { width: 12px; height: 12px; border-radius: 50% }
.u-wish-pool .lg .s1 { background: #1C1C22; border: 1px solid rgba(255,255,255,.3) } .u-wish-pool .lg .s2 { background: #3A3A42; border: 2px solid rgba(237,255,74,.55) } .u-wish-pool .lg .s3 { background: #EDFF4A }
[data-theme="light"] .u-wish-pool .lg .s1 { background: #FAFAF6; border-color: rgba(17,17,19,.15) } [data-theme="light"] .u-wish-pool .lg .s2 { background: #2A2A2D; border: 0 } [data-theme="light"] .u-wish-pool .lg .s3 { border: 1px solid rgba(17,17,19,.15) }
.u-wish-pool .cur { right: max(48px, calc((100% - 1280px) / 2 + 48px)); bottom: 28px; width: 360px; padding: 20px; border-radius: 24px }
.u-wish-pool .cur .mt { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--u-mut) } .u-wish-pool .cur .mt i { width: 6px; height: 6px; border-radius: 50% }
.u-wish-pool .cur .mt .st { margin-left: auto; padding: 2px 10px; border-radius: 999px; border: 1px solid currentColor; font-weight: 600 }
.st.open { color: #9A9AA1 } .st.testing { color: #C9C9C4 } .st.live { color: #EDFF4A }
[data-theme="light"] .st.open { color: #6B6B72 } [data-theme="light"] .st.testing { color: #2A2A2D } [data-theme="light"] .st.live { color: #5A6B00 }
.u-wish-pool .cur h2 { margin: 10px 0 2px; font-size: 22px; font-weight: 700 }
.u-wish-pool .cur .vt { margin: 0; display: flex; align-items: baseline; gap: 8px } .u-wish-pool .cur .vt b { font-size: 34px; color: #EDFF4A } [data-theme="light"] .u-wish-pool .cur .vt b { color: #111113 } .u-wish-pool .cur .vt span { font-size: 13px }
.u-wish-pool .tl { display: flex; gap: 6px; margin: 14px 0; padding: 0; list-style: none }
.u-wish-pool .tl li { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--u-dim) }
.u-wish-pool .tl li i { width: 10px; height: 10px; border-radius: 50%; background: var(--u-line-2) }
.u-wish-pool .tl li + li::before { content: ""; width: 18px; height: 2px; border-radius: 1px; background: var(--u-line-2); margin-right: 2px }
.u-wish-pool .tl li.on { color: var(--u-fg) } .u-wish-pool .tl li.on i, .u-wish-pool .tl li.on::before { background: #EDFF4A } [data-theme="light"] .u-wish-pool .tl li.on i, [data-theme="light"] .u-wish-pool .tl li.on::before { background: #111113 }
.u-wish-pool .nt { margin: 0 0 16px; font-size: 13px; line-height: 1.6; color: var(--u-mut) } .u-wish-pool .nt b { color: var(--u-fg) }
.u-wish-pool .ac { display: grid; grid-template-columns: 1fr 1fr; gap: 8px } .u-wish-pool .ac .u-btn { height: 44px; padding: 0 10px }
.u-wish-pool .ac .u-btn.on { color: #EDFF4A; border-color: #EDFF4A } [data-theme="light"] .u-wish-pool .ac .u-btn.on { color: #111113; border-color: #111113 }
.u-wish-rank { padding-top: 56px; padding-bottom: 96px }
.u-wish-rank .h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px } .u-wish-rank h2 { margin: 0; font-size: 26px; letter-spacing: -.5px } .u-wish-rank .h .u-mut { font-size: 13px }
.u-wish-rank .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; column-gap: 48px }
.u-wish-rank .row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 80px 64px; align-items: center; gap: 12px; padding: 14px 8px; border: 0; border-bottom: 1px solid var(--u-line); background: transparent; color: var(--u-fg); text-align: left; cursor: pointer }
.u-wish-rank .row.on, .u-wish-rank .row:hover { background: var(--u-surface) }
.u-wish-rank .nm b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.u-wish-rank .bar { display: block; margin-top: 6px; height: 4px; border-radius: 2px; background: var(--u-surface-2) } .u-wish-rank .bar i { display: block; height: 100%; border-radius: 2px; background: var(--u-fg-2); opacity: .5 }
.u-wish-rank .v { font-size: 15px; font-weight: 600; text-align: right } .u-wish-rank .st { font-size: 12px; font-weight: 600; text-align: right }
@media (max-width: 860px) {
  .u-wish-pool { height: auto; display: flex; flex-direction: column; overflow: visible; padding-bottom: 16px }
  .u-wish-pool .field { position: relative; inset: auto; order: 3; height: 440px; overflow: hidden }
  .u-wish-pool .ov { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; max-width: none; margin: 0 16px }
  .u-wish-pool .hd { order: 1; padding-top: 20px } .u-wish-pool .hd h1 { font-size: 34px; letter-spacing: -1px }
  .u-wish-pool .fl { order: 2; align-self: flex-start; margin-top: 4px; overflow-x: auto; max-width: calc(100% - 32px) }
  .u-wish-pool .lg { display: none }
  .u-wish-pool .cur { order: 4 }
  .u-wish-rank { padding-top: 32px; padding-bottom: 32px } .u-wish-rank .grid { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none !important }
  .u-wish-rank .row { grid-template-columns: 28px minmax(0, 1fr) 64px 52px; gap: 8px }
}

/* ---------------- 资讯 / 文章 ---------------- */
.u-news-hd { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; padding-top: 48px; padding-bottom: 28px }
.u-news { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; padding-bottom: 80px }
.u-news-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; padding: 12px; border-radius: 22px; background: var(--u-surface); border: 1px solid var(--u-line) }
.u-news-head .im { aspect-ratio: 4/3; font-size: 40px } .u-news-head img, .u-news-list img, .u-art-pc img { width: 100%; height: 100%; object-fit: cover }
.u-news-head .b, .u-news-list .b { display: flex; flex-direction: column; gap: 8px; min-width: 0 }
.u-news-head .tg, .u-news-list .tg { font-size: 12px; font-weight: 600; color: var(--u-mut) }
.u-news-head b { font-size: 28px; line-height: 1.25; letter-spacing: -.5px } .u-news-head .sm { font-size: 15px; line-height: 1.7; color: var(--u-fg-2) } .u-news-head .mt { font-size: 12px; margin-top: 6px }
.u-news-list { margin-top: 12px }
.u-news-list .it { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--u-line) }
.u-news-list .im { aspect-ratio: 4/3; font-size: 20px } .u-news-list b { font-size: 18px; line-height: 1.35 } .u-news-list .sm { font-size: 13px; line-height: 1.6; color: var(--u-mut); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden } .u-news-list .u-mono { font-size: 12px }
.u-news-list .it:hover b, .u-news-head:hover b { text-decoration: underline; text-underline-offset: 4px }
.u-news-more { margin: 24px auto 0; display: flex }
.u-news .side { display: flex; flex-direction: column; gap: 14px } .u-card.pad { padding: 18px; display: flex; flex-direction: column }
.u-news .ttl { margin: 0 0 8px; font-size: 14px; font-weight: 700 }
.u-news .rk { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--u-line) } .u-news .rk .n { width: 18px; color: var(--u-dim) } .u-news .rk .n.h { color: var(--u-acc-ink) }
.u-news .rk .nm { display: flex; flex-direction: column; gap: 2px; min-width: 0 } .u-news .rk b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .u-news .rk .u-dim { font-size: 12px; display: flex; gap: 6px; align-items: center }
.u-news .lk { margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--u-acc-ink) }
.u-news-vip { background: #EDFF4A; color: #0A0A0A; border: 0; gap: 4px } .u-news-vip span { font-size: 13px; opacity: .75 } .u-news-vip .lk { color: #0A0A0A; opacity: 1 }
.u-art { max-width: 760px; padding-top: 40px; padding-bottom: 96px }
.u-art-crumb { margin: 0 0 16px; display: flex; gap: 10px; font-size: 13px; color: var(--u-mut) } .u-art-crumb .hl { color: var(--u-acc-ink); font-weight: 600 }
.u-art h1 { margin: 0; font-size: clamp(28px, 4vw, 42px); line-height: 1.2; letter-spacing: -1px }
.u-art-meta { display: flex; flex-wrap: wrap; gap: 14px; margin: 16px 0 28px; font-size: 13px; color: var(--u-mut) }
.u-art-key { padding: 18px 20px; border-radius: 16px; background: var(--u-surface); border: 1px solid var(--u-line); margin-bottom: 28px } .u-art-key ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.8; color: var(--u-fg-2) }
.u-art .art { font-size: 16px; line-height: 1.9; color: var(--u-fg-2) } .u-art .art h2, .u-art .art h3 { margin: 36px 0 12px; color: var(--u-fg); font-size: 22px } .u-art .art p { margin: 0 0 16px } .u-art .art img { max-width: 100%; border-radius: 14px } .u-art .art a { color: var(--u-acc-ink); text-decoration: underline }
.u-art-pc { margin: 32px 0; display: flex; align-items: center; gap: 16px; padding: 12px; border-radius: 18px; background: var(--u-surface); border: 1px solid var(--u-line) }
.u-art-pc .im { flex: none; width: 96px; aspect-ratio: 4/3; border-radius: 10px } .u-art-pc .b { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px } .u-art-pc .b b { font-size: 16px }
.u-art-pc .sc { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px } .u-art-pc .sc b { font-size: 18px }
.u-art-wish { display: block; padding: 18px; border-radius: 18px; border: 1px dashed rgba(237,255,74,.35) } .u-art-wish b { display: block; font-size: 15px } .u-art-wish span { font-size: 13px }
[data-theme="light"] .u-art-wish { border-color: rgba(17,17,19,.25) }
.u-art-mbar { display: none }
@media (max-width: 860px) {
  .u-news-hd { padding-top: 24px; padding-bottom: 16px } .u-news { grid-template-columns: 1fr; gap: 24px }
  .u-news-head { grid-template-columns: 1fr; gap: 14px } .u-news-head b { font-size: 20px } .u-news-head .sm { font-size: 13px }
  .u-news-list .it { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 14px 0 } .u-news-list b { font-size: 15px } .u-news-list .sm { display: none }
  .u-art { padding-top: 20px; padding-bottom: 140px } .u-art-pc .sc { display: none }
  .u-art-mbar { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom)); padding: 10px 16px; background: var(--u-bg); border-top: 1px solid var(--u-line); z-index: 20 } .u-art-mbar .u-btn { flex: 1 }
}

/* ---------------- 测试方法 / 静态页 ---------------- */
.u-method { padding-top: 48px; padding-bottom: 96px }
.u-method .lead { max-width: 620px; margin: 18px 0 0; font-size: 16px; line-height: 1.8; color: var(--u-fg-2) }
.u-method .env { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 32px 0 20px }
.u-method .env .u-card { padding: 16px; display: flex; flex-direction: column; gap: 6px; font-size: 12px } .u-method .env b { font-size: 15px }
.u-method .toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; position: sticky; top: 64px; z-index: 5; padding: 10px 0; background: var(--u-bg) }
.u-method .toc a { font-size: 13px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--u-line); color: var(--u-mut) } .u-method .toc a:hover { color: var(--u-fg); border-color: var(--u-line-2) }
.u-method .list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px }
.u-method .it { padding: 22px; scroll-margin-top: 130px; transition: border-color .3s } .u-method .it.hit { border-color: var(--u-acc-ink) }
.u-method .cat { font-size: 12px; font-weight: 600; color: var(--u-mut) } .u-method h2 { margin: 6px 0 10px; font-size: 20px }
.u-method .it p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--u-fg-2) }
.u-method .cd { margin-top: 14px !important; padding-top: 12px; border-top: 1px solid var(--u-line); display: flex; gap: 12px; font-size: 13px !important } .u-method .cd .u-dim { flex: none }
.u-method .rf { margin-top: 6px !important; font-size: 12px !important }
.u-method .note { margin-top: 24px; padding: 18px 20px; font-size: 14px; line-height: 1.7; color: var(--u-mut) }
.u-static { max-width: 760px; padding-top: 48px; padding-bottom: 96px } .u-static .upd { font-size: 13px; margin: 10px 0 28px }
.u-static h2 { margin: 32px 0 10px; font-size: 18px } .u-static p { margin: 0; font-size: 15px; line-height: 1.85; color: var(--u-fg-2) }
.u-static .oth { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--u-line); display: flex; gap: 20px; font-size: 14px; color: var(--u-mut) }
@media (max-width: 860px) { .u-method { padding-top: 24px } .u-method .env { grid-template-columns: 1fr 1fr } .u-method .list { grid-template-columns: 1fr } .u-method .toc { top: 56px; flex-wrap: nowrap; overflow-x: auto } .u-method .toc a { white-space: nowrap } .u-static { padding-top: 24px } }

/* ---------------- 个人中心 ---------------- */
.u-acc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; padding-top: 40px; padding-bottom: 96px; align-items: start }
.u-acc-side { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px }
.u-acc-side .me, .u-acc-mhead { display: flex; align-items: center; gap: 12px }
.u-acc .av { flex: none; width: 48px; height: 48px; border-radius: 50%; background: #EDFF4A; color: #0A0A0A; display: grid; place-items: center; font-weight: 700; font-size: 18px }
.u-acc .me .t, .u-acc-mhead .t { display: flex; flex-direction: column; gap: 4px; min-width: 0 } .u-acc .me b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.u-acc .pl { align-self: flex-start; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--u-surface-2); color: var(--u-fg-2) }
.u-acc .pl.vip { background: #EDFF4A; color: #0A0A0A } [data-theme="light"] .u-acc .pl.vip { background: #111; color: #EDFF4A }
.u-acc-side nav { display: flex; flex-direction: column; gap: 2px }
.u-acc-side nav a { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 10px; font-size: 14px; color: var(--u-mut) }
.u-acc-side nav a:hover { color: var(--u-fg); background: var(--u-surface) } .u-acc-side nav a.on { color: var(--u-fg); font-weight: 600; background: var(--u-surface-2) }
.u-acc .cnt { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: #FF2D55; color: #fff; font: 700 11px "Geist Mono", monospace; display: grid; place-items: center }
.u-acc-side .out { align-self: flex-start; border: 0; background: none; color: var(--u-dim); font-size: 13px; padding: 4px 12px; cursor: pointer } .u-acc-side .out:hover { color: var(--u-fg) }
.u-acc-main { min-width: 0; display: flex; flex-direction: column; gap: 16px }
.u-acc-th { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.u-acc-h { margin: 0; font-size: 28px; letter-spacing: -.5px }
.u-acc-sub { margin: 0; font-size: 14px; line-height: 1.7; color: var(--u-mut) }
.u-acc-ov { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px } .u-acc-ov.two { grid-template-columns: 1fr 1fr }
.u-acc-ov .u-card { padding: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 12px }
.u-acc-ov .u-card b { font-size: 28px; letter-spacing: -.5px } .u-acc-ov .s { font-size: 13px; color: var(--u-mut); line-height: 1.5 }
.u-acc-ov .u-btn { align-self: flex-start; margin-top: 8px } .u-acc-ov .lk, .u-acc-blk .lk { margin-top: auto; padding-top: 8px; font-size: 13px; font-weight: 600; color: var(--u-acc-ink) }
.u-acc-ov .plan.vip { background: #EDFF4A; color: #0A0A0A; border: 0 } .u-acc-ov .plan.vip .s, .u-acc-ov .plan.vip .u-dim { color: rgba(10,10,10,.65) } .u-acc-ov .plan.vip .lk { color: #0A0A0A }
.u-acc-ov .plan.vip .u-btn.sec { background: #0A0A0A; color: #EDFF4A; border-color: #0A0A0A }
.u-acc-blk { margin-top: 12px; display: flex; flex-direction: column; gap: 10px }
.u-acc-blk .bh { display: flex; justify-content: space-between; align-items: baseline } .u-acc-blk h2 { margin: 0; font-size: 17px } .u-acc-blk .bh a { font-size: 13px }
.u-acc-blk.danger h2 { color: #FF6B6B }
.u-acc-list { display: flex; flex-direction: column; border: 1px solid var(--u-line); border-radius: 16px; overflow: hidden } .u-acc-list:empty { display: none }
.u-acc-list > p { margin: 0; padding: 16px } .u-acc-list .u-empty, .u-acc-blk > .u-empty { padding: 40px 20px; border: 1px dashed var(--u-line-2); border-radius: 16px } .u-acc-list .u-empty { border: 0 }
.u-empty.sm .t { font-size: 15px; font-weight: 600; margin: 0 } .u-empty.sm .u-mut { margin: 0; font-size: 13px }
.u-acc-dl, .u-acc-wish, .u-acc-led { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-top: 1px solid var(--u-line) } .u-acc-list > :first-child { border-top: 0 }
.u-acc-dl .fm { flex: none; width: 48px; height: 40px; border-radius: 10px; display: grid; place-items: center; font: 700 12px "Geist Mono", "PingFang SC", monospace }
.fm.png { background: rgba(34,211,238,.14); color: #5BE0F2 } .fm.pdf { background: rgba(255,45,85,.14); color: #FF6B86 } .fm.ppt { background: rgba(255,122,61,.14); color: #FF9A66 } .fm.fav { background: var(--u-surface-2); color: var(--u-fg-2) }
[data-theme="light"] .fm.png { color: #0E7C8C } [data-theme="light"] .fm.pdf { color: #C21E43 } [data-theme="light"] .fm.ppt { color: #B9501A }
.u-acc-dl .b, .u-acc-wish .b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px } .u-acc-dl .b b, .u-acc-wish .b b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .u-acc-dl .b .u-mut, .u-acc-wish .b .u-mut { font-size: 12px }
.u-acc-dl .t { font-size: 12px; white-space: nowrap }
.u-acc-wish .bl { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #1C1C22; border: 1px solid rgba(255,255,255,.14) } .u-acc-wish .bl.testing { background: #3A3A42; border: 2px solid rgba(237,255,74,.55) } .u-acc-wish .bl.live { background: #EDFF4A; border: 0 }
[data-theme="light"] .u-acc-wish .bl { background: #FAFAF6; border-color: rgba(17,17,19,.15) } [data-theme="light"] .u-acc-wish .bl.testing { background: #2A2A2D; border: 0 }
.u-acc-wish .st { font-size: 12px; font-weight: 600; width: 48px } .u-icon-btn.on { color: var(--u-acc-ink); border-color: var(--u-acc-ink) }
.u-acc-nt { display: flex; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--u-line) } .u-acc-nt.un { background: var(--u-surface) }
.u-acc-nt .ic { position: relative; flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--u-surface-2); color: var(--u-fg-2) }
.u-acc-nt .ic.wish { background: rgba(237,255,74,.12); color: #EDFF4A } [data-theme="light"] .u-acc-nt .ic.wish { background: #111; color: #EDFF4A }
.u-acc-nt .ic i { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: #FF2D55 }
.u-acc-nt .b { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0 } .u-acc-nt .b b { font-size: 14px; line-height: 1.4 } .u-acc-nt .b > span { font-size: 12px; line-height: 1.55; color: var(--u-mut) }
.u-acc-nt .f { display: flex; justify-content: space-between; margin-top: 4px } .u-acc-nt .cta { font-weight: 600; color: var(--u-acc-ink) !important }
.u-acc-tip { margin: 0; font-size: 12px; color: var(--u-dim) }
.u-acc-led { font-size: 14px } .u-acc-led > span:first-child { flex: 1 } .u-acc-led b.up { color: #4ADE80 } [data-theme="light"] .u-acc-led b.up { color: #15803D } .u-acc-led .u-dim { font-size: 12px }
.u-acc-code { display: flex; gap: 8px; max-width: 520px } .u-acc-code .u-input { text-transform: uppercase; letter-spacing: 1px }
.u-acc-form { display: flex; flex-direction: column; border: 1px solid var(--u-line); border-radius: 16px; overflow: hidden }
.u-acc-form .row { display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 10px 18px; border-top: 1px solid var(--u-line) } .u-acc-form .row:first-child { border-top: 0 }
.u-acc-form .k { flex: 0 0 180px; font-size: 14px; display: flex; flex-direction: column; gap: 2px } .u-acc-form .k small { font-size: 12px; color: var(--u-dim) }
.u-acc-form .row .u-input { max-width: 340px; height: 40px } .u-acc-form .v { font-size: 14px; color: var(--u-fg-2) } .u-acc-form .row .u-seg, .u-acc-form .row > .u-btn { margin-left: auto }
.u-acc-form .ft { padding: 14px 18px; border-top: 1px solid var(--u-line) }
.u-acc-mout { display: none }
.u-acc-back { display: none }
@media (max-width: 860px) {
  .u-acc { grid-template-columns: 1fr; gap: 0; padding-top: 12px; padding-bottom: 32px }
  .u-acc-back { display: flex; align-items: center; gap: 4px; height: 52px; padding: 0 8px; position: sticky; top: 56px; z-index: 10; background: var(--u-bg); border-bottom: 1px solid var(--u-line) }
  .u-acc-back a { width: 40px; height: 40px; display: grid; place-items: center; font-size: 26px } .u-acc-back b { font-size: 16px }
  .u-acc-h { display: none } .u-acc-th { justify-content: flex-end } .u-acc-th:has(> .u-acc-h:only-child) { display: none }
  .u-acc-mhead { padding: 8px 0 16px } .u-acc-mhead .av { width: 56px; height: 56px; font-size: 20px } .u-acc-mhead .t b { font-size: 18px } .u-acc-mhead > a { margin-left: auto; font-size: 13px }
  .u-acc-mvip { display: flex; align-items: center; gap: 10px; padding: 16px; border-radius: 18px; background: #EDFF4A; color: #0A0A0A } .u-acc-mvip span:nth-child(2) { font-size: 13px; opacity: .7 } .u-acc-mvip span:last-child { margin-left: auto }
  .u-acc-mstat { display: grid; grid-template-columns: repeat(4, 1fr); margin: 14px 0; padding: 14px 0; border-radius: 16px; background: var(--u-surface); border: 1px solid var(--u-line) }
  .u-acc-mstat a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: var(--u-mut) } .u-acc-mstat b { font-size: 20px; color: var(--u-fg) }
  .u-acc-menu { display: flex; flex-direction: column; border-radius: 16px; border: 1px solid var(--u-line); overflow: hidden }
  .u-acc-menu a { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 16px; border-top: 1px solid var(--u-line); font-size: 15px } .u-acc-menu a:first-child { border-top: 0 }
  .u-acc-menu a > span:nth-of-type(1) { flex: 1 } .u-acc-menu .cnt { margin-left: 0 }
  .u-acc-mout { display: flex; margin-top: 16px; width: 100% }
  .u-acc-ov, .u-acc-ov.two { grid-template-columns: 1fr }
  .u-acc-dl { flex-wrap: wrap } .u-acc-dl .t { display: none }
  .u-acc-form .row { flex-wrap: wrap; gap: 10px } .u-acc-form .k { flex-basis: 100% } .u-acc-form .row .u-seg, .u-acc-form .row > .u-btn { margin-left: 0 } .u-acc-form .row .u-input { max-width: none }
  .u-acc-code { flex-direction: column }
}

/* ---------------- 会员 ---------------- */
.u-vip-pg { padding-top: 40px; padding-bottom: 96px }
.u-vip-me { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 40px }
.u-vip-me .av { width: 40px; height: 40px; border-radius: 50%; background: #EDFF4A; color: #0A0A0A; display: grid; place-items: center; font-weight: 700 }
.u-vip-me .b { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13px } .u-vip-me .b b { font-size: 15px }
.u-vip-me .k { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; margin-right: 8px } .u-vip-me .k b { font-size: 20px }
.u-vip-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 360px)); gap: 14px; margin-top: 36px }
.u-vip-plans .pl { position: relative; padding: 26px; display: flex; flex-direction: column }
.u-vip-plans .n { margin: 0; font-size: 15px; font-weight: 600 } .u-vip-plans .p { margin: 10px 0 6px } .u-vip-plans .p b { font-size: 34px; letter-spacing: -1px }
.u-vip-plans .d { margin: 0; font-size: 14px; color: var(--u-mut); line-height: 1.6 }
.u-vip-plans ul { margin: 18px 0 24px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px } .u-vip-plans li::before { content: "✓"; margin-right: 10px; font-weight: 700 }
.u-vip-plans .u-btn { margin-top: auto; width: 100% }
.u-vip-plans .hot { background: #EDFF4A; color: #0A0A0A; border: 0 } .u-vip-plans .hot .d { color: rgba(10,10,10,.65) }
.u-vip-plans .hot .u-btn { background: #0A0A0A; color: #EDFF4A; border: 0 } .u-vip-plans .hot .u-btn:disabled { opacity: .55 }
.u-vip-plans .tag { position: absolute; top: 20px; right: 20px; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: #0A0A0A; color: #EDFF4A }
.u-vip-th { margin: 56px 0 14px; font-size: 22px }
.u-vip-tb { border: 1px solid var(--u-line); border-radius: 16px; overflow: hidden }
.u-vip-tb .tr { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--u-line); font-size: 14px } .u-vip-tb .tr:first-child { border-top: 0 }
.u-vip-tb .th { font-size: 12px; color: var(--u-dim); background: var(--u-surface) } .u-vip-tb .tr span:not(:first-child) { text-align: center; color: var(--u-mut) } .u-vip-tb .tr span.hi { color: var(--u-fg); font-weight: 600 }
.u-vip-pay h2 { margin: 0 0 6px; display: flex; gap: 10px; align-items: baseline } .u-vip-pay .x { position: absolute; top: 18px; right: 18px }
.u-vip-pay .qrs { display: flex; gap: 16px; justify-content: center; margin: 20px 0 } .u-vip-pay figure { margin: 0; text-align: center; font-size: 13px; color: var(--u-mut) }
.u-vip-pay img { width: 180px; height: 180px; object-fit: contain; border-radius: 12px; background: #fff; cursor: zoom-in } .u-vip-pay .sm { font-size: 13px }
@media (max-width: 860px) { .u-vip-pg { padding-top: 16px } .u-vip-me { margin-bottom: 24px } .u-vip-me .u-btn { display: none } .u-vip-plans { grid-template-columns: 1fr } .u-vip-tb .tr { grid-template-columns: 1.2fr .7fr 1fr 1fr; padding: 12px; font-size: 12px; gap: 6px } }

/* ---------------- 登录（包住原登录表单，只改样式） ---------------- */
.u-login-pg { width: min(1040px, calc(100% - 48px)); box-sizing: border-box; margin: 48px auto 96px; padding: 0; display: grid; grid-template-columns: 1fr 440px; gap: 0; border-radius: 28px; overflow: hidden; border: 1px solid var(--u-line); background: var(--u-surface) }
.u-login-pg .brand { padding: 48px; background: radial-gradient(80% 70% at 30% 20%, rgba(237,255,74,.10), transparent 70%), #0C0C0F; color: #F4F4F1; display: flex; flex-direction: column }
.u-login-pg .brand .big { margin: 24px 0 4px; font-size: 64px; font-weight: 700; letter-spacing: -2px; color: #EDFF4A }
.u-login-pg .brand ul { margin: auto 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: #C9C9C4 } .u-login-pg .brand li::before { content: "·"; margin-right: 10px; color: #EDFF4A }
.u-login-pg .form { padding: 44px 40px; background: var(--u-bg) }
.u-login-pg h1 { margin: 0; font-size: 26px } .u-login-pg .sub { margin: 6px 0 22px; font-size: 14px }
.u-login-pg .agree { margin: 18px 0 0; font-size: 12px; color: var(--u-dim); text-align: center } .u-login-pg .agree a { color: var(--u-fg-2); text-decoration: underline }
.u-login-pg .login-wrap { max-width: none; margin: 0; padding: 0 }
.u-login-pg .login-wrap > .card { background: none; border: 0; box-shadow: none; padding: 0 } .u-login-pg .card-head { display: none } .u-login-pg .card-body { padding: 0 }
.u-login-pg .login-wrap > p.text-muted { display: none }
.u-login-pg .btn { height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--u-line-2); background: transparent; color: var(--u-fg); font: 600 14px inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap }
.u-login-pg .btn-block { width: 100% } .u-login-pg .btn-lg { height: 50px; font-size: 15px }
.u-login-pg .btn-primary, .u-login-pg .btn-wechat { background-image: none !important; box-shadow: none !important }
.u-login-pg .btn-primary { background-color: #EDFF4A !important; color: #0A0A0A !important; border: 0 } [data-theme="light"] .u-login-pg .btn-primary { background-color: #111 !important; color: #EDFF4A !important }
.u-login-pg .btn-wechat { background-color: #07C160 !important; color: #fff; border: 0 }
.u-login-pg .btn:disabled { opacity: .5; cursor: default }
.u-login-pg .login-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; font-size: 12px; color: var(--u-dim) } .u-login-pg .login-divider::before, .u-login-pg .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--u-line) }
.u-login-pg .login-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 999px; background: var(--u-surface-2); margin-bottom: 18px }
.u-login-pg .login-tabs button { flex: 1; height: 32px; padding: 0 8px; border: 0; border-radius: 999px; background: none; color: var(--u-mut); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap }
.u-login-pg .login-tabs button.active { background: var(--u-pill); color: var(--u-on-pill) }
.u-login-pg .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px } .u-login-pg .field label { font-size: 13px; color: var(--u-mut) }
.u-login-pg .input { height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--u-line-2); background: var(--u-surface); color: var(--u-fg); font-size: 15px; outline: none; width: 100%; box-sizing: border-box } .u-login-pg .input:focus { border-color: var(--u-acc-ink) }
.u-login-pg .code-row { display: flex; gap: 8px } .u-login-pg .code-row .btn { height: 46px; border-radius: 12px }
.u-login-pg .login-msg { padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.6; background: var(--u-surface-2); color: var(--u-fg-2); margin-bottom: 12px }
.u-login-pg .login-msg.err { background: rgba(255,77,90,.12); color: #FF8A93 } .u-login-pg .login-msg.ok { background: rgba(74,222,128,.12); color: #6EE7A0 }
[data-theme="light"] .u-login-pg .login-msg.err { color: #B4232F } [data-theme="light"] .u-login-pg .login-msg.ok { color: #15803D }
.u-login-pg .text-muted { color: var(--u-dim) }
@media (max-width: 860px) { .u-login-pg { width: 100%; grid-template-columns: 1fr; margin: 0; padding: 0; border: 0; border-radius: 0; background: none } .u-login-pg .brand { display: none } .u-login-pg .form { padding: 28px 16px 40px } }
.u-acc-main > .u-seg { align-self: flex-start; max-width: 100%; overflow-x: auto }

/* ---------------- 动效（CSS 部分；JS 部分见 ui/motion.js） ---------------- */
@keyframes u-fade { from { opacity: 0 } }
@keyframes u-pop { from { opacity: 0; translate: 0 6px; scale: .97 } }
@keyframes u-drop { from { opacity: 0; translate: 0 -10px; scale: .985 } }
@keyframes u-rise { from { opacity: 0; translate: 0 8px } }
@keyframes u-modal-in { from { opacity: 0; transform: translate(-50%, -48%) scale(.97) } }
@keyframes u-sheet-in { from { transform: translateY(100%) } }
@keyframes u-best { 0%, 55% { opacity: 0; transform: scale(.8) } 100% { opacity: 1; transform: none } }
.u-scrim { animation: u-fade .2s ease-out }
.u-pop { animation: u-pop .18s cubic-bezier(.2,.7,.2,1); transform-origin: top left }
.u-modal { animation: u-modal-in .24s cubic-bezier(.2,.7,.2,1) }
.u-sheet { animation: u-sheet-in .3s cubic-bezier(.2,.8,.2,1) }
.u-srch .pane { animation: u-drop .22s cubic-bezier(.2,.8,.2,1); transform-origin: top center }
.u-srch.fresh .body > * { animation: u-rise .26s cubic-bezier(.2,.8,.2,1) backwards } .u-srch.fresh .body > *:nth-child(2) { animation-delay: .03s } .u-srch.fresh .body > *:nth-child(3) { animation-delay: .06s } .u-srch.fresh .body > *:nth-child(4) { animation-delay: .09s } .u-srch.fresh .body > *:nth-child(n+5) { animation-delay: .12s }
@media (max-width: 860px) { .u-srch .pane { animation: u-fade .18s ease-out } .u-srch .bar { animation: u-rise .24s cubic-bezier(.2,.8,.2,1) } }
.u-cmp-row .c.best .u-tag-best { animation: u-best .9s cubic-bezier(.2,.7,.2,1) }
.u-rk-sum { animation: u-pop .22s cubic-bezier(.2,.7,.2,1) }
.u-btn, .u-chip, .u-wz-opt, .u-lib-card, .u-news-list .it { transition-property: background-color, border-color, color, box-shadow, transform; transition-duration: .15s }
.u-btn:active:not(:disabled) { transform: scale(.97) }
.u-lib-card { transition: transform .2s cubic-bezier(.2,.7,.2,1), border-color .2s } .u-lib-card:hover { transform: translateY(-2px) }
html.u-theming, html.u-theming * { transition: background-color .22s ease, color .22s ease, border-color .22s ease, fill .22s ease !important }
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important } }
@keyframes u-snow { 0% { background-position: 0 0, 0 0, 0 0 } 25% { background-position: 37px 13px, -21px 7px, 0 0 } 50% { background-position: -11px 41px, 17px -29px, 0 0 } 75% { background-position: 23px -17px, -9px 31px, 0 0 } 100% { background-position: 0 0, 0 0, 0 0 } }
@keyframes u-flick { 0%, 92%, 100% { opacity: 1 } 93% { opacity: .55 } 95% { opacity: .9 } 97% { opacity: .4 } }
@keyframes u-scan { from { transform: translateY(-100%) } to { transform: translateY(400%) } }
.u-monitor .scr { position: relative; overflow: hidden; animation: u-flick 4s infinite }
.u-monitor .scr::before { content: ""; position: absolute; inset: 0; opacity: .14; pointer-events: none; mix-blend-mode: screen;
  background-image: radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 1.2px), radial-gradient(circle, rgba(255,255,255,.6) 0 .8px, transparent 1px), repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0 2px, transparent 2px 4px);
  background-size: 7px 9px, 5px 6px, auto; animation: u-snow .5s steps(4) infinite }
.u-monitor .scr::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 25%; pointer-events: none; background: linear-gradient(transparent, rgba(255,255,255,.05), transparent); animation: u-scan 3.2s linear infinite }
.u-monitor .scr > * { position: relative; z-index: 1 }

body.u { overflow-x: clip }
/* 天梯榜手机工具栏：排名依据横滑（右侧渐隐提示可滑），筛选收进底部弹窗 */
.u-rk-bar .mf { display: none }
@media (max-width: 860px) {
  .u-rk-bar .row1 .lbl, .u-rk-bar .row1 .more, .u-rk-bar .row2 .lbl, .u-rk-bar .row2 [data-filter]:not(.on) { display: none }
  .u-rk-bar .row1 { padding: 10px 0; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent) }
  .u-rk-bar .row1 .tabs { padding-right: 32px }
  .u-rk-bar .mf { display: inline-flex; gap: 6px; flex: none }
  .u-rk-bar .row2 { padding-bottom: 10px }
}
.u-rk-sheet .h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px } .u-rk-sheet .h b { font-size: 17px }
.u-rk-sheet .g { margin: 16px 0 8px; font-size: 12px; color: var(--u-mut) } .u-rk-sheet .cs { display: flex; flex-wrap: wrap; gap: 8px }
/* 对比上限提示条 */
.u-limit { position: fixed; left: 50%; bottom: 104px; translate: -50% 0; z-index: 130; display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 24px); box-sizing: border-box; padding: 10px 10px 10px 18px; border-radius: 18px; background: var(--u-elev); border: 1px solid var(--u-line-2); box-shadow: var(--u-shadow); animation: u-rise .25s cubic-bezier(.2,.8,.2,1) }
.u-limit > span { display: flex; flex-direction: column; gap: 2px; font-size: 13px } .u-limit > span > span { font-size: 12px; color: var(--u-mut) }
.u-limit .u-btn { flex: none } .u-limit > button { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--u-mut); font-size: 18px; cursor: pointer }
@media (max-width: 860px) { .u-limit { bottom: calc(136px + env(safe-area-inset-bottom)); width: calc(100vw - 24px) } }
.u-lock { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 12px; border: 1px dashed var(--u-line-2); font-size: 12px; color: var(--u-mut) } .u-lock a { color: var(--u-acc-ink); font-weight: 600 }
.u-tray .c .up { margin-left: 10px; font-size: 12px; font-weight: 600; color: var(--u-acc-ink); text-decoration: underline; text-underline-offset: 3px }
.u-wz-top.near { border-style: dashed } .u-wz-top.near .bd { background: rgba(0,0,0,.55) } .u-wz-top .why.bad { color: #FF7A5C } [data-theme="light"] .u-wz-top .why.bad { color: #C2410C }
.u-wz-top.near .mb i { opacity: .45 }
@media (max-width: 860px) {
  /* 手机：候选卡改成左图右文的紧凑横卡，3 张约一屏 */
  .u-wz-tops { gap: 10px }
  .u-wz-top { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 12px; padding: 10px; border-radius: 16px }
  .u-wz-top .im { aspect-ratio: 4 / 3; align-self: start; border-radius: 10px; font-size: 18px }
  .u-wz-top .bd { left: 6px; top: 6px; font-size: 10px; padding: 2px 7px }
  .u-wz-top .ck { right: 6px; top: auto; bottom: 6px; font-size: 0; gap: 0; padding: 5px }
  .u-wz-top .b { padding: 0; gap: 3px }
  .u-wz-top .nm { font-size: 15px; line-height: 1.3 } .u-wz-top .cpu { font-size: 12px }
  .u-wz-top .why { min-height: 0; font-size: 12px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden }
  .u-wz-top .mt { margin-top: 4px } .u-wz-top .mt b { font-size: 20px } .u-wz-top .mb { height: 4px }
  .u-wz-top .ft { margin-top: 6px; padding-top: 6px; font-size: 11px } .u-wz-top .ft b { font-size: 13px }
}
/* ---------------- 登录 v2：活的天梯榜 + 两种登录方式 ---------------- */
.u-login-pg { grid-template-columns: 1.1fr 440px }
.u-login-pg .brand { text-align: left; align-items: stretch; position: relative; overflow: hidden; padding: 44px; gap: 20px; justify-content: center; background: #0C0C0F; color: #F4F4F1;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 22px 22px }
.u-login-pg .brand .glow { position: absolute; width: 420px; height: 420px; left: -120px; top: -140px; border-radius: 50%; background: radial-gradient(circle, rgba(237,255,74,.16), transparent 65%); pointer-events: none; animation: u-drift 14s ease-in-out infinite alternate }
@keyframes u-drift { to { transform: translate(260px, 220px) scale(1.15) } }
.u-login-pg .brand .lr-hd { position: relative; margin: 0; display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: #9A9AA1 }
.u-login-pg .brand .lr-hd .u-mono { font-size: 22px; font-weight: 600; color: #EDFF4A }
.u-login-pg .lr-race { width: 100%; max-width: 520px; position: relative; display: flex; flex-direction: column; gap: 10px }
.u-login-pg .lr-race .lr-rw { display: grid; grid-template-columns: 18px minmax(0, 130px) minmax(0, 1fr) 64px; align-items: center; gap: 12px; height: 38px; padding: 0 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06) }
.u-login-pg .lr-race .lr-rw:first-child { background: rgba(237,255,74,.08); border-color: rgba(237,255,74,.25) }
.u-login-pg .lr-race .lr-n { font-size: 12px; color: #7C7C84 } .u-login-pg .lr-race .lr-rw:first-child .lr-n { color: #EDFF4A }
.u-login-pg .lr-race .lr-nm { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.u-login-pg .lr-race .lr-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden } .u-login-pg .lr-race .lr-bar i { display: block; height: 100%; border-radius: 4px }
.u-login-pg .lr-race .lr-v { font-size: 13px; text-align: right }
.u-login-pg .brand .lr-tg { position: relative; margin: 6px 0 0; font-size: 13px; color: #9A9AA1 }
[data-theme="light"] .u-login-pg .brand { background-color: #F4F4F0; color: #111113; background-image: radial-gradient(rgba(17,17,19,.06) 1px, transparent 1px) }
[data-theme="light"] .u-login-pg .brand .glow { background: radial-gradient(circle, rgba(237,255,74,.55), transparent 65%) }
[data-theme="light"] .u-login-pg .brand .lr-hd .u-mono { color: #111113 } [data-theme="light"] .u-login-pg .brand .lr-hd, [data-theme="light"] .u-login-pg .brand .lr-tg { color: #6B6B72 }
[data-theme="light"] .u-login-pg .lr-race .lr-rw { background: rgba(255,255,255,.7); border-color: rgba(17,17,19,.06) }
[data-theme="light"] .u-login-pg .lr-race .lr-rw:first-child { background: #111113; color: #F4F4F1; border-color: #111113 } [data-theme="light"] .u-login-pg .lr-race .lr-rw:first-child .lr-n { color: #EDFF4A }
[data-theme="light"] .u-login-pg .lr-race .lr-bar { background: rgba(17,17,19,.07) } [data-theme="light"] .u-login-pg .lr-race .lr-rw:first-child .lr-bar { background: rgba(255,255,255,.12) }
.u-login-pg .form { display: flex; flex-direction: column; justify-content: center }
.u-login-pg .form h1 { margin: 0 0 24px }
.u-login-pg .wx { width: 100%; height: 52px; gap: 10px; background: #07C160; color: #fff; border: 0; font-size: 16px } .u-login-pg .wx:hover { background: #06AD56 }
.u-login-pg .or { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; font-size: 12px; color: var(--u-dim) } .u-login-pg .or::before, .u-login-pg .or::after { content: ""; flex: 1; height: 1px; background: var(--u-line) }
.u-login-pg .fld { display: flex; align-items: center; height: 48px; border-radius: 12px; border: 1px solid var(--u-line-2); background: var(--u-surface); padding: 0 14px; gap: 10px } .u-login-pg .fld:focus-within { border-color: var(--u-acc-ink) }
.u-login-pg .fld .pre { font-size: 14px; color: var(--u-mut); padding-right: 10px; border-right: 1px solid var(--u-line) }
.u-login-pg .fld input { flex: 1; min-width: 0; border: 0; background: none; color: var(--u-fg); font-size: 16px; outline: none }
.u-login-pg .code { display: flex; gap: 8px; margin-top: 10px } .u-login-pg .code .u-input { height: 48px; font-size: 16px; letter-spacing: 2px } .u-login-pg .code .u-btn { flex: none; height: 48px; min-width: 108px; border-radius: 12px }
.u-login-pg .msg { min-height: 18px; margin: 8px 2px; font-size: 12px; color: #FF7A5C } .u-login-pg .msg.ok { color: var(--u-good) }
.u-login-pg .go { width: 100% }
.u-login-pg .agree { margin-top: 16px }
.u-login-pg .other { margin-top: 18px; text-align: center; font-size: 12px; color: var(--u-dim) } .u-login-pg .other summary { cursor: pointer; list-style: none } .u-login-pg .other summary::-webkit-details-marker { display: none }
.u-login-pg .other[open] summary { margin-bottom: 14px } .u-login-pg .other > div { text-align: left }
@media (max-width: 860px) { .u-login-pg { grid-template-columns: 1fr } .u-login-pg .brand { display: flex; padding: 20px 16px; gap: 10px } .u-login-pg .lr-race .lr-rw:nth-child(n+4) { display: none } .u-login-pg .lr-race .lr-rw { height: 34px; grid-template-columns: 16px minmax(0, 110px) minmax(0, 1fr) 56px } .u-login-pg .brand .lr-tg { display: none } .u-login-pg .brand .glow { width: 260px; height: 260px } }
/* 详情图集：缩略图切换大图，箭头翻页，手机圆点 */
.u-dt-hero .main img { transition: opacity .2s }
.u-dt-hero .main .nv { position: absolute; top: 50%; translate: 0 -50%; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(17,17,19,.55); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s; display: grid; place-items: center }
.u-dt-hero .main .nv.p { left: 14px } .u-dt-hero .main .nv.n { right: 14px }
.u-dt-hero .main:hover .nv, .u-dt-hero .main:focus-visible .nv { opacity: 1 }
.u-dt-hero .main .dots { display: none; position: absolute; left: 50%; bottom: 14px; translate: -50% 0; gap: 6px } .u-dt-hero .main .dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(17,17,19,.25); transition: width .2s } .u-dt-hero .main .dots i.on { width: 18px; background: rgba(17,17,19,.7) }
.u-dt-hero .thumbs button { transition: border-color .15s, opacity .15s; opacity: .7 } .u-dt-hero .thumbs button.on, .u-dt-hero .thumbs button:hover { opacity: 1 }
@media (max-width: 860px) { .u-dt-hero .main .nv, .u-dt-hero .main .cnt { display: none } .u-dt-hero .main .dots { display: flex } }
/* 手机底部导航：选中项的图标放进一颗胶囊（深色黄底黑标 / 浅色黑底黄标），和站内「高亮 = 黄黑反色」的语言一致 */
@media (max-width: 860px) {
  .u-tabbar a { gap: 2px; color: var(--u-dim) }
  .u-tabbar .ic { position: relative; display: grid; place-items: center; width: 52px; height: 30px; border-radius: 999px; transition: background-color .2s, color .2s }
  .u-tabbar a.active { color: var(--u-fg); font-weight: 600 }
  .u-tabbar a.active .ic { background: #EDFF4A; color: #0A0A0A }
  [data-theme="light"] .u-tabbar a.active .ic { background: #111113; color: #EDFF4A }
  .u-tabbar .ic .badge { position: absolute; top: -4px; right: 4px; left: auto; margin: 0 }
  [data-theme="light"] .u-tabbar .ic .badge { background: #111113; color: #EDFF4A; box-shadow: 0 0 0 2px var(--u-bg) }
  .u-tabbar a.active .ic .badge { background: #FF2D55; color: #fff }
}
/* 发现页顶部：资讯 / 许愿池 分段切换（仅手机） */
.u-disc { display: none }
@media (max-width: 860px) {
  .u-disc { display: grid; grid-template-columns: 1fr 1fr; margin: 12px 16px 0; padding: 4px; border-radius: 999px; background: var(--u-surface-2) }
  .u-disc a { height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 14px; color: var(--u-mut); font-weight: 600 }
  .u-disc a.on { background: var(--u-pill); color: var(--u-on-pill) } .u-disc a .u-mono { margin-left: 4px; font-size: 11px; color: var(--u-acc-ink) } .u-disc a.on .u-mono { color: inherit; opacity: .6 }
}
.u-photo.prog { background: repeating-linear-gradient(135deg, var(--u-surface-2) 0 10px, var(--u-surface) 10px 20px) } .u-photo .pg { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: #3A3A42; color: #F4F4F1; border: 2px solid rgba(237,255,74,.55) }
[data-theme="light"] .u-photo .pg { background: #2A2A2D; border: 0 }
.u-news-wish { gap: 6px; border-style: dashed } .u-news-wish b { font-size: 15px }
.u-art-cover { aspect-ratio: 16 / 9; border-radius: 18px; margin: 0 0 28px } .u-art-cover img { width: 100%; height: 100%; object-fit: cover }
.u-art-more { margin-top: 40px; display: flex; flex-direction: column } .u-art-more .ttl { margin: 0 0 6px; font-size: 14px; font-weight: 700 }
.u-art-more a { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--u-line); font-size: 15px } .u-art-more a span { font-size: 12px }

/* 底部导航的对比数字：圆形小徽标，外圈描一圈背景色，和胶囊分开 */
@media (max-width: 860px) {
  .u-tabbar .ic .badge { top: -3px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: #FF2D55 !important; color: #fff !important; font: 700 10px/16px "Geist Mono", monospace; display: block; text-align: center; box-shadow: 0 0 0 2px var(--u-bg) !important }
}
.dims .k { display: flex; justify-content: space-between; gap: 8px } .dims .k .u-dim { font-size: 12px; white-space: nowrap }
/* 资讯：桌面侧栏吸顶；手机侧栏改成插在信息流里的模块 */
.u-news .side { position: sticky; top: 88px; align-self: start }
.u-news-inl { display: none }
@media (max-width: 860px) {
  .u-news .side { display: none }
  .u-news-inl { display: block; margin: 6px 0; padding: 14px 0; border-bottom: 1px solid var(--u-line) }
  .u-news-inl .ttl { margin: 0 0 10px; display: flex; justify-content: space-between; align-items: baseline; font-size: 14px } .u-news-inl .ttl a { font-size: 12px; color: var(--u-mut) }
  .u-news-inl .sc { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px } .u-news-inl .sc::-webkit-scrollbar { display: none }
  .u-news-inl .sc a { flex: none; width: 132px; display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 14px; background: var(--u-surface); border: 1px solid var(--u-line) }
  .u-news-inl .sc .n { font-size: 11px; color: var(--u-dim) } .u-news-inl .sc a:first-child .n { color: var(--u-acc-ink) } .u-news-inl .sc b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .u-news-inl .sc .u-dim { font-size: 12px }
  .u-news-inl.wi { display: flex; justify-content: space-between; align-items: center; padding: 16px; border: 1px dashed var(--u-line-2); border-radius: 14px; font-size: 14px } .u-news-inl.wi span { font-size: 13px; color: var(--u-acc-ink); font-weight: 600 }
  /* 资讯 / 许愿池 两页在手机上共用一套页眉：小眉题 + 26px 标题，间距一致 */
  .u-news-hd { padding-top: 16px; padding-bottom: 12px; gap: 12px } .u-news-hd .u-h1 { font-size: 26px; letter-spacing: -.5px } .u-news-hd .u-eyebrow { margin-bottom: 6px }
  .u-news-hd .u-seg { max-width: 100%; overflow-x: auto }
  .u-news-head { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 0 0 14px; border: 0; border-bottom: 1px solid var(--u-line); border-radius: 0; background: none }
  .u-news-head .im { aspect-ratio: 4 / 3; border-radius: 10px; font-size: 20px } .u-news-head b { font-size: 17px; line-height: 1.35 } .u-news-head .sm { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
  .u-news-head .b { gap: 4px }
}
@media (max-width: 860px) {
  .u-news-list .it { padding: 14px 0 } .u-news-list .tg, .u-news-head .tg { font-size: 11px }
}
@media (max-width: 860px) {
  /* 许愿池（手机）：页眉与资讯同规格；只有放球的区域是「池子」，其余回到页面底色 */
  .u-wish-pool, [data-theme="light"] .u-wish-pool { background: var(--u-bg); border-bottom: 0 }
  .u-wish-pool::before { display: none }
  .u-wish-pool .hd { padding-top: 16px } .u-wish-pool .hd h1 { font-size: 26px; letter-spacing: -.5px; line-height: 1.2 } .u-wish-pool .hd h1 br { display: none } .u-wish-pool .hd .u-eyebrow { margin-bottom: 6px }
  .u-wish-pool .in { margin-top: 14px } .u-wish-pool .in input { height: 42px; font-size: 14px } .u-wish-pool .in .u-btn { height: 42px }
  .u-wish-pool .fl { margin-top: 0 }
  .u-wish-pool .field { margin: 10px 16px 0; height: 380px; border-radius: 22px; overflow: hidden;
    background: radial-gradient(70% 60% at 50% 38%, rgba(237,255,74,.07), rgba(237,255,74,0) 60%), radial-gradient(120% 100% at 50% 0%, #15151A 0%, #0A0A0D 65%, #070709 100%) }
  [data-theme="light"] .u-wish-pool .field { background: #E6E6E0 }
  .u-wish-pool .cur { margin-top: 10px; padding: 14px 16px; border-radius: 18px; background: var(--u-surface); border: 1px solid var(--u-line); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none }
  .u-wish-pool .cur h2 { margin: 6px 0 0; font-size: 18px } .u-wish-pool .cur .vt b { font-size: 24px }
  .u-wish-pool .tl { margin: 8px 0 } .u-wish-pool .nt { margin-bottom: 12px; font-size: 12px }
  .u-wish-pool .ac .u-btn, .u-wish-pool .cur > .u-btn { height: 40px }
}
/* 手机：不显示网页页脚（像 App 一样），关注 / 关于收进「我的」 */
@media (max-width: 860px) {
  #uFooter, .u-footer { display: none }
  .u-acc-guest { display: flex; align-items: center; gap: 14px; padding: 18px 16px; margin-top: 8px; border-radius: 18px; background: var(--u-surface); border: 1px solid var(--u-line) }
  .u-acc-guest .av { width: 52px; height: 52px; border-radius: 50%; background: var(--u-surface-2); color: var(--u-mut); display: grid; place-items: center; font-weight: 700; font-size: 18px }
  .u-acc-guest .t { flex: 1; display: flex; flex-direction: column; gap: 3px } .u-acc-guest .t b { font-size: 17px } .u-acc-guest .t span { font-size: 12px; color: var(--u-mut) }
  .u-acc-gh { margin: 24px 0 8px; font-size: 12px; color: var(--u-dim) }
  .u-acc-follow { display: flex; flex-direction: column; border-radius: 16px; border: 1px solid var(--u-line); overflow: hidden }
  .u-acc-follow > * { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--u-line) } .u-acc-follow > :first-child { border-top: 0 }
  .u-acc-follow .lg { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; color: #fff } .u-acc-follow .bili { background: #FB7299 } .u-acc-follow .wx { background: #07C160 }
  .u-acc-follow > * > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--u-mut) } .u-acc-follow b { font-size: 15px; color: var(--u-fg) }
  .u-acc-follow .go { font-size: 13px; font-weight: 600; color: var(--u-acc-ink) }
  .u-acc-follow .qr { width: 56px; height: 56px; border-radius: 8px; background: #F4F4F1; color: #7C7C84; font-size: 10px; display: grid; place-items: center }
  .u-acc-menu.sm { margin-top: 12px } .u-acc-menu.sm a { min-height: 48px; font-size: 14px }
  .u-acc-copy { margin: 16px 0 0; text-align: center; font-size: 11px; color: var(--u-dim) }
}
.u-acc-gh, .u-acc-follow, .u-acc-menu.sm, .u-acc-copy, .u-acc-guest { }
@media (min-width: 861px) { .u-acc-gh, .u-acc-follow, .u-acc-menu.sm, .u-acc-copy { display: none } }
.u-login-pg .lgm, .u-login-pg .msub { display: none }
@media (max-width: 860px) {
  /* 手机登录：去掉动效区，登录方式成为页面唯一焦点，居中偏上 */
  .u-login-pg .brand { display: none !important }
  .u-login-pg .form { min-height: calc(100vh - 56px - 60px - env(safe-area-inset-bottom)); box-sizing: border-box; justify-content: flex-start; padding: 12vh 20px 32px; align-items: stretch; text-align: center }
  .u-login-pg .lgm { display: grid; width: 56px; height: 56px; border-radius: 16px; font-size: 18px; margin: 0 auto 18px }
  .u-login-pg .form h1 { margin: 0; font-size: 24px } .u-login-pg .msub { display: block; margin: 8px 0 28px; font-size: 13px; color: var(--u-mut) }
  .u-login-pg .fld, .u-login-pg .code { text-align: left }
}
.u-news .main { min-width: 0 }
.u-login-pg .lfollow { margin: 22px 0 0; text-align: center; font-size: 12px } .u-login-pg .lfollow a { color: var(--u-dim) }
@media (min-width: 861px) { .u-login-pg .lfollow { display: none } }
/* 机型库卡片 v2：主名 / 副名（处理器）分两行，关键规格标签，三项核心数据等宽对齐 */
.u-lib-card .nm { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.u-lib-card .nm b { font-size: 16px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.u-lib-card .nm span { font-size: 13px; font-weight: 400; color: var(--u-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.u-lib-card .ks { display: flex; flex-wrap: wrap; gap: 4px; min-height: 22px } .u-lib-card .ks span { font-size: 11px; padding: 2px 8px; border-radius: 6px; background: var(--u-surface-2); color: var(--u-fg-2) }
.u-lib-card .mx { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--u-line); display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 8px }
.u-lib-card .mx div { display: flex; flex-direction: column; gap: 2px; min-width: 0 } .u-lib-card .mx dt { font-size: 11px; color: var(--u-dim) }
.u-lib-card .mx dd { margin: 0; font-size: 15px; font-weight: 600; white-space: nowrap } .u-lib-card .mx div:first-child dd { font-size: 18px; color: var(--u-acc-ink) } .u-lib-card .mx small { font-size: 10px; color: var(--u-mut); margin-left: 2px }
.u-lib-card .cmp { width: 100%; height: 34px; border-radius: 10px; margin-top: 10px; font-size: 13px; font-weight: 600 }
@media (max-width: 860px) { .u-lib-card .mx { grid-template-columns: 1fr 1fr } .u-lib-card .mx div:nth-child(2) { display: none } .u-lib-card .mx dd { font-size: 13px } .u-lib-card .mx div:first-child dd { font-size: 15px } .u-lib-card .nm b { font-size: 14px } .u-lib-card .nm span { font-size: 11px } .u-lib-card .ks span:nth-child(n+3) { display: none } .u-lib-card .cmp { height: 30px; font-size: 12px } }
.u-cmp-row .m .nm { display: flex; flex-direction: column; gap: 3px; min-width: 0 } .u-cmp-row .m .nm b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.u-cmp-row .m .nm .cp { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 400; color: var(--u-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .u-cmp-row .m .nm .cp .u-dot { flex: none }
.u-cmp-ins li .lb { font-weight: 700; color: var(--u-fg) }
.u-cmp-ins li mark { background: none; color: var(--u-acc-ink); font-weight: 650 }
[data-theme="light"] .u-cmp-ins li mark { color: #111113; background: linear-gradient(180deg, transparent 55%, #EDFF4A 55%, #EDFF4A 92%, transparent 92%); padding: 0 2px }
.u-lib-card .ks { flex-wrap: nowrap; overflow: hidden; height: 22px } .u-lib-card .ks span { flex: none; white-space: nowrap } .u-lib-card .nm span:empty::after { content: "\00a0" }
.u-cmp-row .m .nm { align-items: flex-start; text-align: left }
/* 机型库卡片 v3：芯片单独成行并强调（记不住机型名的人靠芯片认机器）；底部只留多核 + 价格 */
.u-lib-card .b { gap: 8px }
.u-lib-card .chip { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; max-width: 100%; box-sizing: border-box; padding: 5px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--u-surface-2); color: var(--u-fg) }
.u-lib-card .chip.amd { background: color-mix(in srgb, var(--u-amd-1) 13%, transparent) } .u-lib-card .chip.intel { background: color-mix(in srgb, var(--u-intel-2) 13%, transparent) }
.u-lib-card .chip.gpu { background: color-mix(in srgb, #76B900 16%, transparent); margin-top: -2px }
.u-lib-card .chip .u-dot { flex: none }
.u-lib-card .mx { grid-template-columns: 1fr 1fr } .u-lib-card .mx div:last-child { text-align: right } .u-lib-card .mx div:last-child dd { font-size: 16px }
@media (max-width: 860px) {
  /* 手机：一列横卡，左图右文，一屏约 4 台 */
  .u-lib-grid { grid-template-columns: 1fr !important; gap: 10px }
  .u-lib-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: start }
  .u-lib-card .im { margin: 10px 0 10px 10px; aspect-ratio: 4 / 3; border-radius: 10px; font-size: 22px }
  .u-lib-card .b { padding: 10px 12px; gap: 5px; position: relative }
  .u-lib-card .cat .u-mono { display: none }
  .u-lib-card .nm b { font-size: 15px } .u-lib-card .chip { font-size: 12px; padding: 3px 8px }
  .u-lib-card .ks { display: none }
  .u-lib-card .mx { padding-top: 6px; border-top: 0; margin-top: 2px; padding-right: 40px } .u-lib-card .mx div:last-child { text-align: left } .u-lib-card .mx dd, .u-lib-card .mx div:last-child dd { font-size: 14px } .u-lib-card .mx div:first-child dd { font-size: 15px }
  .u-lib-card .mx div:nth-child(2) { display: flex }
  .u-lib-card .cmp { position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; margin: 0; padding: 0; border-radius: 50%; font-size: 0 }
  .u-lib-card .cmp::before { content: "+"; font-size: 18px; font-weight: 500 } .u-lib-card .cmp.on::before { content: "✓"; font-size: 14px }
}
/* 芯片行 v4：不用色块，一行文字 —— 厂商圆点 + 处理器（加粗）+ 独显；放不下时省略号截断 */
.u-lib-card .chip, .u-lib-card .chip.amd, .u-lib-card .chip.intel { display: flex; align-items: center; gap: 6px; align-self: stretch; padding: 0; background: none; border-radius: 0; font-size: 14px; font-weight: 400; color: var(--u-fg); min-width: 0 }
.u-lib-card .chip b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0 } .u-lib-card .chip b.g { flex: none; max-width: 45% }
.u-lib-card .chip .sep { flex: none; color: var(--u-dim); font-size: 12px }

@media (max-width: 860px) { .u-lib-card .chip { font-size: 13px } }
/* 视频章节：手机上改成竖排列表，点按区域大，不出现横向滚动条 */
@media (max-width: 860px) {
  .u-dt-chap { display: flex; flex-direction: column; flex-wrap: nowrap; overflow: visible; gap: 0; border: 1px solid var(--u-line); border-radius: 14px }
  .u-dt-chap button { width: 100%; justify-content: flex-start; border: 0; border-top: 1px solid var(--u-line); border-radius: 0; background: none; min-height: 46px; padding: 0 14px; gap: 12px }
  .u-dt-chap button:first-child { border-top: 0 }
}
.u-dt-chap { flex-wrap: wrap; overflow: visible }

/* 换页加载：页面顶部一条细进度条，0.25 秒内加载完就不出现，避免闪一下 */
.u-loading.lite { min-height: 60vh; display: block; padding: 0 }
.u-loading.lite .bar { position: fixed; left: 0; right: 0; top: 0; z-index: 60; width: auto; height: 2px; margin: 0; border-radius: 0; background: transparent; opacity: 0; animation: u-fade .2s ease-out .25s forwards }
.u-loading.lite .bar i { background: var(--u-acc-ink); box-shadow: 0 0 8px var(--u-acc-ink) }
@keyframes u-fade-in-keep { to { opacity: 1 } }
.u-loading.lite .bar { animation-name: u-fade-in-keep }

/* 绑定手机号提示（11-06） */
.u-acc-bind{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:12px 14px;margin:0 0 16px;border-radius:10px;border:1px solid var(--u-line);background:var(--u-surface);font-size:13px;line-height:1.5;color:var(--u-mut)}
.u-acc-bind b{display:block;font-size:14px;margin-bottom:2px;color:var(--u-fg)}