:root{
  --bg:#0c121a; --surface:#121a24; --panel:#161f2b; --panel-2:#1c2735; --panel-3:#243142;
  --ink-1:#eef2f7; --ink-2:#b3bfcc; --ink-3:#7e8b9b; --ink-4:#5a6777;
  --line:rgba(255,255,255,.085); --line-2:rgba(255,255,255,.05); --line-3:rgba(255,255,255,.16);
  --s1:#4f8fea; --s2:#16a87d; --s3:#d09a2e; --s4:#9b7be6; --bad:#e5675f;
  --s1-ink:#9cc2f5; --s2-ink:#4fd0a5; --s3-ink:#e8bd66; --s4-ink:#c3abf3; --bad-ink:#f39a94;
  --blue-soft:rgba(79,143,234,.12); --green-soft:rgba(22,168,125,.12);
  --violet-soft:rgba(155,123,230,.13); --amber-soft:rgba(208,154,46,.13);
  --bad-soft:rgba(229,103,95,.12);
  --r-sm:8px; --r:12px; --r-lg:16px;
  --hi:inset 0 1px 0 rgba(255,255,255,.04);
  --shadow-1:var(--hi), 0 1px 2px rgba(0,0,0,.3);
  --shadow-2:var(--hi), 0 18px 40px -14px rgba(0,0,0,.6);
  --ring:0 0 0 3px rgba(79,143,234,.32);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:radial-gradient(1400px 520px at 70% -260px, rgba(79,143,234,.10), transparent 70%), var(--bg);
  background-attachment:fixed;
  color:var(--ink-1);font-size:14px;line-height:1.65;
  font-family:-apple-system,"Segoe UI Variable Text","Segoe UI","PingFang SC","HarmonyOS Sans SC",
    "Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,textarea,select{font:inherit;color:inherit}
/* 下拉框不写底色时浏览器给白底，配上浅色字就看不见 */
select{background:var(--panel-2);color:var(--ink-1);border:1px solid var(--line-3);border-radius:8px;padding:5px 9px}
select option{background:var(--panel-2);color:var(--ink-1)}
button{-webkit-tap-highlight-color:transparent}
a{color:var(--s1-ink)}
:focus{outline:none}
:focus-visible{outline:none;box-shadow:var(--ring)}
::selection{background:rgba(79,143,234,.35)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:rgba(255,255,255,.18)}
::-webkit-scrollbar-track{background:transparent}

/* ---------- 图标 ---------- */
.ic{width:16px;height:16px;flex:none;display:inline-block;vertical-align:-3px;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic.sm{width:14px;height:14px;vertical-align:-2px}
.ic.lg{width:20px;height:20px}
.spin{width:16px;height:16px;border-radius:50%;display:inline-block;vertical-align:-3px;margin-right:8px;
  border:2px solid rgba(255,255,255,.12);border-top-color:var(--s1);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- 顶栏 ---------- */
.top{display:flex;align-items:center;gap:20px;height:60px;padding:0 clamp(16px,2.2vw,44px);
  border-bottom:1px solid var(--line);background:rgba(12,18,26,.82);
  backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  position:sticky;top:0;z-index:40}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.logo{width:32px;height:32px;display:block;flex:none;filter:drop-shadow(0 6px 14px rgba(79,143,234,.35))}
.brand b{font-size:15.5px;font-weight:650;letter-spacing:.6px;display:block;line-height:1.2}
.brand span{font-size:10px;color:var(--ink-3);letter-spacing:2.6px;font-weight:600}
.tabs{display:flex;gap:2px;margin-left:10px;height:100%}
.tabs button{position:relative;display:flex;align-items:center;gap:7px;background:none;border:0;
  padding:0 14px;color:var(--ink-3);cursor:pointer;font-size:13.5px;font-weight:500;
  transition:color .15s var(--ease)}
.tabs button:hover{color:var(--ink-1)}
.tabs button::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px 2px 0 0;
  background:var(--s1);transform:scaleX(0);transition:transform .2s var(--ease)}
.tabs button[aria-current=true]{color:var(--ink-1);font-weight:600}
.tabs button[aria-current=true] .ic{color:var(--s1-ink)}
.tabs button[aria-current=true]::after{transform:scaleX(1)}
.top .sp{flex:1}
.farmsw{display:flex;gap:2px;padding:3px;border-radius:10px;background:var(--surface);border:1px solid var(--line)}
.farmsw:empty{display:none}
.farmsw button{background:none;border:0;padding:4px 12px;border-radius:7px;color:var(--ink-3);
  cursor:pointer;font-size:12.5px;transition:all .15s var(--ease)}
.farmsw button:hover{color:var(--ink-1)}
.farmsw button[aria-pressed=true]{background:var(--panel-3);color:var(--ink-1);font-weight:600;box-shadow:var(--shadow-1)}
.topmeta{font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:14px;font-variant-numeric:tabular-nums}
.dot-live{width:7px;height:7px;border-radius:50%;background:var(--s2);display:inline-block;
  box-shadow:0 0 0 3px rgba(22,168,125,.18);margin-right:7px;vertical-align:1px;animation:pulse 2.4s ease-in-out infinite}
.user{position:relative;display:flex;align-items:center;font-size:12.5px;color:var(--ink-3);white-space:nowrap;
  padding-left:14px;border-left:1px solid var(--line)}
.user:empty{display:none}
.avatar{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:12.5px;font-weight:650;color:#fff;background:linear-gradient(145deg,var(--s1),var(--s4))}
.helpbtn{display:flex;align-items:center;gap:6px;background:none;border:1px solid var(--line);border-radius:10px;
  color:var(--ink-2,#c8d1dc);padding:6px 10px;font-size:12.5px;cursor:pointer;margin-right:6px;white-space:nowrap}
.helpbtn:hover{background:var(--panel-2)}
.helpbtn[aria-pressed=true]{background:var(--panel-2);border-color:var(--s1-ink);color:var(--ink-1)}
.userbtn{display:flex;align-items:center;gap:10px;background:none;border:1px solid transparent;border-radius:10px;
  padding:3px 8px 3px 3px;color:var(--ink-3);cursor:pointer;text-align:left;transition:all .15s var(--ease)}
.userbtn:hover,.userbtn[aria-expanded=true]{background:var(--panel-2);border-color:var(--line)}
.userbtn .chev{transition:transform .15s var(--ease)}
.userbtn[aria-expanded=true] .chev{transform:rotate(180deg)}
.user .who-t{display:flex;flex-direction:column;line-height:1.3}
.user b{font-weight:600;color:var(--ink-1);font-size:13px}
.umenu{position:absolute;top:calc(100% + 10px);right:0;width:290px;max-width:calc(100vw - 24px);padding:6px;z-index:60;
  background:var(--panel-2);border:1px solid var(--line-3);border-radius:14px;white-space:normal;
  box-shadow:var(--hi),0 24px 50px -12px rgba(0,0,0,.75);animation:rise .15s var(--ease)}
.umenu[hidden]{display:none}
.umenu .uhd{display:flex;align-items:center;gap:11px;padding:10px 10px 12px;margin-bottom:4px;border-bottom:1px solid var(--line-2)}
.umenu .uhd .avatar{width:38px;height:38px;font-size:15px}
.umenu .uhd b{display:block;font-size:14px}
.umenu .uhd div span{font-size:12px;color:var(--ink-3);word-break:break-all}
.mitem{display:flex;align-items:center;gap:11px;width:100%;background:none;border:0;border-radius:9px;
  padding:10px;color:var(--ink-2);cursor:pointer;font-size:13.5px;text-align:left}
.mitem:hover:not(:disabled){background:var(--panel-3);color:var(--ink-1)}
.mitem:disabled{opacity:1;cursor:default}
.mitem small{margin-left:auto;font-size:11.5px;color:var(--s2-ink);display:flex;align-items:center;gap:4px}
.mhint{margin:0 10px 8px;padding:9px 11px;border-radius:9px;background:var(--surface);border:1px solid var(--line-2);
  font-size:12.5px;color:var(--ink-2);line-height:1.7}
.mhint[hidden]{display:none}
.msep{height:1px;background:var(--line-2);margin:4px 6px}
.installbar{display:flex;align-items:center;gap:12px;margin:0 54px 16px;padding:12px 12px 12px 14px;border-radius:var(--r);
  background:linear-gradient(90deg,rgba(79,143,234,.15),rgba(155,123,230,.1));border:1px solid rgba(79,143,234,.3);
  animation:rise .25s var(--ease)}
.installbar[hidden]{display:none}
.installbar .logo{width:38px;height:38px;filter:none}
.installbar .t{flex:1;min-width:0;line-height:1.5}
.installbar .t b{display:block;font-size:14px;font-weight:600}
.installbar .t span{color:var(--ink-2);font-size:12.5px}
.installbar .x{flex:none;background:none;border:0;color:var(--ink-3);width:30px;height:30px;border-radius:8px;cursor:pointer;
  display:grid;place-items:center}
.installbar .x:hover{background:var(--panel-3);color:var(--ink-1)}

.view{display:none}
.view.on{display:block;animation:rise .25s var(--ease)}

/* ---------- 公用 ---------- */
.chip{display:inline-flex;align-items:center;gap:5px;padding:1px 8px;border-radius:6px;
  font-size:11.5px;font-weight:500;background:rgba(255,255,255,.05);border:1px solid var(--line);
  color:var(--ink-2);white-space:nowrap;line-height:1.75}
.chip.blue{border-color:rgba(79,143,234,.28);background:var(--blue-soft);color:var(--s1-ink)}
.chip.green{border-color:rgba(22,168,125,.3);background:var(--green-soft);color:var(--s2-ink)}
.chip.violet{border-color:rgba(155,123,230,.3);background:var(--violet-soft);color:var(--s4-ink)}
.chip.amber{border-color:rgba(208,154,46,.3);background:var(--amber-soft);color:var(--s3-ink)}
.chip.bad{border-color:rgba(229,103,95,.3);background:var(--bad-soft);color:var(--bad-ink)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow-1)}
.panel.flat{background:var(--surface);box-shadow:none}
.panel.note{font-size:12.5px;color:var(--ink-3);display:flex;gap:9px;align-items:flex-start;line-height:1.7}
.panel.note .ic{margin-top:3px;color:var(--ink-4)}
.panel.tight{padding:4px 12px}
.ptitle{font-size:12px;color:var(--ink-3);margin-bottom:10px;font-weight:600;letter-spacing:.4px;
  display:flex;align-items:center;gap:7px}
.btn,.morebtn,.trendbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--ink-2);
  height:32px;padding:0 13px;border-radius:var(--r-sm);cursor:pointer;font-size:12.5px;font-weight:500;
  white-space:nowrap;transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease)}
.btn:hover,.morebtn:hover,.trendbtn:hover{background:var(--panel-3);color:var(--ink-1);border-color:var(--line-3)}
.btn:disabled,button:disabled{opacity:.55;cursor:default}
.btn.pri{background:var(--s1);border-color:transparent;color:#fff;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 16px -6px rgba(79,143,234,.7)}
.btn.pri:hover{background:#5d9af0}
.btn.gh{background:none}
.btn.gh:hover{background:var(--panel-2)}
.chain{margin:14px 0 0;padding:12px 14px;border-radius:10px;background:var(--surface);border:1px solid var(--line-2)}
.chain ol{list-style:none;counter-reset:s}
.chain li{counter-increment:s;position:relative;padding-left:28px;font-size:13px;color:var(--ink-2);
  line-height:1.75;margin:3px 0}
.chain li::before{content:counter(s);position:absolute;left:0;top:4px;width:18px;height:18px;
  border-radius:6px;background:var(--blue-soft);color:var(--s1-ink);font-size:10.5px;
  display:grid;place-items:center;font-weight:700;font-variant-numeric:tabular-nums}
.chain li b{color:var(--ink-1);font-weight:600;font-variant-numeric:tabular-nums}
.chain li b.bad{color:var(--bad-ink)}
.srcline{margin-top:12px;font-size:12px;color:var(--ink-3);display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.srcline a{color:var(--s1-ink);text-decoration:none;border-bottom:1px dashed rgba(156,194,245,.4);cursor:pointer}
.srcline a:hover{border-bottom-style:solid}
.conf{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-3);min-width:150px;font-variant-numeric:tabular-nums}
.conf .bar{width:80px;height:4px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.conf .bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--s1),var(--s2))}
.conf.lo .bar i{background:linear-gradient(90deg,var(--s3),var(--bad))}
.loading{padding:56px 0;text-align:center;color:var(--ink-3);font-size:13.5px;line-height:1.9}
.trend{margin-top:16px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);padding:14px 16px}
.trend-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.trend-hd b{font-size:13px;font-weight:600}
.trend-hd .note{font-size:11.5px;color:var(--ink-3)}
.trend-pick{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto;padding:2px;border-radius:8px;
  background:var(--bg);border:1px solid var(--line-2)}
.trend-pick button{background:none;border:0;color:var(--ink-3);padding:2px 10px;border-radius:6px;font-size:11.5px;cursor:pointer}
.trend-pick button:hover{color:var(--ink-1)}
.trend-pick button[aria-pressed=true]{background:var(--panel-3);color:var(--ink-1);font-weight:600}
.trend svg{width:100%;display:block}
.trend .legend{display:flex;gap:16px;font-size:11px;color:var(--ink-3);margin-top:8px;flex-wrap:wrap}
.trend .legend i{display:inline-block;width:12px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
.fline{font-size:12px;color:var(--ink-3);margin-bottom:12px;letter-spacing:.3px;display:flex;flex-wrap:wrap;
  align-items:center;gap:6px 10px}
.fline .sep{width:3px;height:3px;border-radius:50%;background:var(--ink-4)}
.morebtn{background:none;border-radius:999px}
.morebtn[aria-pressed=true]{background:var(--blue-soft);border-color:rgba(79,143,234,.4);color:var(--s1-ink)}
.whybox{margin-top:12px;animation:rise .2s var(--ease)}
.trendbtn{height:28px;font-size:12px}