:root{
  --bg:#F4F4F2; --card:#FFFFFF; --soft:#F7F7F5; --hover:#F0F0EE;
  --ink:#0D0D0D; --ink2:#6A6A66; --ink3:#9C9C97;
  --line:#E6E6E2; --line2:#D8D8D3;
  --in:#12924F; --in-bg:#E4F4EA;
  --oos:#C9302C; --oos-bg:#FBE9E8;
  --hot:#B26A00;
  --r:20px; --r2:12px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0E0E0D; --card:#161615; --soft:#1B1B19; --hover:#222220;
    --ink:#F5F5F0; --ink2:#A3A39D; --ink3:#6F6F6A;
    --line:#262624; --line2:#33332F;
    --in:#4ED184; --in-bg:#14301F;
    --oos:#FF7A72; --oos-bg:#33191A;
    --hot:#E0A54B;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;
  font-family:Inter,"Helvetica Neue",Helvetica,"Segoe UI",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif}
a{color:inherit}
.n,.pr,.gs,.gt,.stt,.upd{font-variant-numeric:tabular-nums}
.lab{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}

.marq{background:var(--ink);color:var(--bg);overflow:hidden;white-space:nowrap;padding:7px 0;font-size:12px}
.marq div{display:inline-block;animation:sc 60s linear infinite}
.marq span{margin:0 26px}
.marq b{font-weight:700}
@keyframes sc{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.wrap{max-width:1160px;margin:0 auto;padding:0 20px 40px}
header{display:flex;align-items:center;gap:16px;padding:12px 0 8px;flex-wrap:wrap}
.logo{font-size:17px;font-weight:800;letter-spacing:-.02em;text-decoration:none}
.logo i{font-style:normal;color:var(--in)}
nav{display:flex;gap:16px;font-size:13px;color:var(--ink2)}
nav a{text-decoration:none}
nav a.on{color:var(--ink);font-weight:600}
.sbox{margin-left:auto;display:flex;align-items:center;background:var(--card);border-radius:999px;padding:7px 16px;min-width:230px}
.sbox input{border:0;background:transparent;outline:none;font:inherit;font-size:13px;width:100%;color:var(--ink)}
.sbox input::placeholder{color:var(--ink3)}
.tgb{border:0;background:var(--ink);color:var(--card);font:inherit;font-size:12.5px;font-weight:600;
  padding:8px 16px;border-radius:999px;cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-block}
.tgb.ghost{background:transparent;color:var(--ink2);border:1px solid var(--line2);font-weight:500}
.tgb.wide{width:100%;padding:11px;font-size:13.5px;margin-top:14px}

.strip0{display:flex;align-items:center;gap:24px;flex-wrap:wrap;background:var(--card);border-radius:var(--r2);padding:11px 18px;margin-top:4px}
.s0{display:flex;align-items:baseline;gap:7px}
.s0 .n{font-size:16px;font-weight:700;letter-spacing:-.01em}
.s0 .t{font-size:12px;color:var(--ink2)}
.s0.sep{margin-left:auto;color:var(--ink3);font-size:12px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.dot.in{background:var(--in)}
.dot.oos{background:var(--oos)}

.layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:18px;align-items:start;padding-top:14px}
.layout2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;padding-top:14px}
aside{position:sticky;top:14px}
.vsearch{background:var(--card);border-radius:999px;padding:7px 14px;margin-bottom:8px}
.vsearch input{border:0;background:transparent;outline:none;font:inherit;font-size:12.5px;width:100%;color:var(--ink)}
.vl{max-height:60vh;overflow:auto}
.vl::-webkit-scrollbar{width:6px}
.vl::-webkit-scrollbar-thumb{background:var(--line2);border-radius:6px}
.vr{display:flex;align-items:baseline;gap:8px;padding:6px 12px;border-radius:999px;cursor:pointer;font-size:13.5px;color:var(--ink2)}
.vr:hover{background:var(--hover)}
.vr.on{background:var(--ink);color:var(--card);font-weight:600}
.vr .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vr .c{font-size:11.5px;color:var(--ink3)}
.vr.on .c{color:var(--card);opacity:.6}

.panel{background:var(--card);border-radius:var(--r);overflow:hidden}
.panel.pad{padding:18px 20px}
.ctrl{display:flex;align-items:center;gap:8px;padding:10px 16px;flex-wrap:wrap}
.seg{display:flex;gap:4px}
.seg button{border:0;background:transparent;color:var(--ink2);font:inherit;font-size:13px;padding:6px 14px;border-radius:999px;cursor:pointer}
.seg button.on{background:var(--ink);color:var(--card);font-weight:600}
.sel{border:1px solid var(--line2);background:transparent;color:var(--ink2);font:inherit;font-size:12.5px;
  padding:6px 12px;border-radius:999px;cursor:pointer}
.sel.on{background:var(--ink);color:var(--card);border-color:var(--ink)}
.upd{margin-left:auto;font-size:12px;color:var(--ink3)}













.pr{font-size:13px;font-weight:600;width:96px;text-align:right;color:var(--ink2)}
.stt{display:flex;align-items:center;gap:6px;font-size:12px;width:104px}
.stt.in{color:var(--in)}
.stt.oos{color:var(--oos)}
.go{border:0;background:var(--ink);color:var(--card);font:inherit;font-size:12px;font-weight:600;
  padding:5px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-block}
.rm{border:1px solid var(--line2);background:transparent;color:var(--ink2);font:inherit;font-size:12px;
  padding:5px 12px;border-radius:999px;cursor:pointer;white-space:nowrap}
.fav{border:0;background:transparent;color:var(--ink3);cursor:pointer;font-size:13px;padding:0;width:14px;flex-shrink:0}
.fav.on{color:var(--ink)}
.exp{padding:8px 16px 14px 36px;border-top:1px solid var(--line);background:var(--soft)}
.strip{display:flex;gap:2px;height:10px;margin:8px 0 7px;border-radius:3px;overflow:hidden}
.strip i{display:block}
.stats{display:flex;gap:24px;flex-wrap:wrap;font-size:12.5px;color:var(--ink2)}
.stats b{color:var(--ink);font-weight:700}
.more{width:100%;border:0;border-top:1px solid var(--line);background:transparent;color:var(--ink2);
  font:inherit;font-size:12.5px;padding:10px;cursor:pointer}
.more:hover{background:var(--soft);color:var(--ink)}


.foot{display:flex;justify-content:space-between;padding:16px 2px 0;font-size:11.5px;color:var(--ink3);flex-wrap:wrap;gap:10px}
.foot a{color:var(--ink2)}

.authbox{max-width:380px;margin:40px auto;background:var(--card);border-radius:var(--r);padding:26px 26px 22px}
.authbox h1{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:0 0 6px}
.authbox .sub{font-size:12.5px;color:var(--ink2);margin:0 0 16px}
.authbox label{display:block;font-size:12px;color:var(--ink2);margin:12px 0 5px}
.authbox label small{color:var(--ink3);margin-left:6px}
.authbox input{width:100%;border:1px solid var(--line2);background:var(--soft);border-radius:10px;
  padding:9px 12px;font:inherit;font-size:13.5px;color:var(--ink);outline:none}
.authbox input:focus{border-color:var(--ink)}
.authbox .alt{font-size:12.5px;color:var(--ink2);text-align:center;margin:14px 0 0}
.err{background:var(--oos-bg);color:var(--oos);font-size:12.5px;padding:8px 12px;border-radius:9px;margin-bottom:4px}

.hint{font-size:12px;color:var(--ink3);margin:10px 0 0}
.sub{font-size:13px;color:var(--ink2)}
.mini{width:100%;border-collapse:collapse;font-size:12px;margin-top:8px}
.mini td,.mini th{padding:5px 6px;border-bottom:1px solid var(--line);text-align:left;color:var(--ink2)}
.mini th{font-size:11px;color:var(--ink3);font-weight:500}
.mini .ok{color:var(--in)}
.mini .bad{color:var(--oos)}
.flist{margin-top:8px}
.frow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.fname{flex:1;min-width:0;font-size:13px;font-weight:500}
.fname small{display:block;font-weight:400;color:var(--ink3);font-size:11.5px}
.prose h1{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0 0 10px}
.prose h2{font-size:15px;font-weight:700;margin:22px 0 6px}
.prose p,.prose li{font-size:13.5px;color:var(--ink2)}
.prose ul{padding-left:18px}
.mini.wide td,.mini.wide th{font-size:11.5px}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--card);
  font-size:13px;padding:10px 18px;border-radius:999px;z-index:99;opacity:0;transition:opacity .2s}
.toast.on{opacity:1}

.cta{display:flex;align-items:center;gap:16px;background:var(--card);border-radius:var(--r2);padding:14px 18px;margin-top:14px;flex-wrap:wrap}
.cta b{font-size:14px}
.cta span{font-size:12.5px;color:var(--ink2);margin-left:8px}
.cta .tgb{margin-left:auto}

.oauth{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.oauth .wide{width:100%;text-align:center;padding:10px}
.or{display:flex;align-items:center;gap:10px;margin:14px 0 2px;color:var(--ink3);font-size:11.5px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------------------------------------------------------- 后台 */
body.adm .wrap.wide{max-width:1400px}
body.adm .who{font-size:12px;color:var(--ink3)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:14px}
.kpi{background:var(--card);border-radius:var(--r2);padding:12px 14px}
.kpi .k{font-size:11px;color:var(--ink3);letter-spacing:.06em}
.kpi .v{font-size:21px;font-weight:700;letter-spacing:-.02em;margin-top:2px}
.kpi .v small{font-size:11px;font-weight:400;color:var(--ink3);margin-left:5px}
.okmsg{background:var(--in-bg);color:var(--in);font-size:12.5px;padding:9px 14px;border-radius:10px;margin-top:12px}
.err.big{font-size:12.5px;padding:9px 14px;border-radius:10px;margin-top:12px}
.mini.src td{vertical-align:middle}
.mini .url{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink3);font-size:11px}
.mini .err-cell{max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.muted{color:var(--ink3);font-size:10.5px}
.tag{font-size:11px;padding:2px 8px;border-radius:999px;background:var(--soft);color:var(--ink2)}
.tag.ok{background:var(--in-bg);color:var(--in)}
.tag.bad{background:var(--oos-bg);color:var(--oos)}
.tag.off{background:var(--soft);color:var(--ink3)}
.sel.danger{color:var(--oos);border-color:var(--oos-bg)}
.modal{position:fixed;inset:0;background:rgba(10,10,10,.45);display:flex;align-items:flex-start;
  justify-content:center;padding:40px 16px;overflow:auto;z-index:80}
.mform{width:min(760px,100%);max-height:none}
.frm{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px 14px;margin-top:10px}
.frm label,.frm2 label{display:block;font-size:12px;color:var(--ink2)}
.frm label small,.frm2 label small{display:block;color:var(--ink3);font-size:10.5px;margin:1px 0 3px}
.frm input,.frm select,.frm2 input,.frm2 select,.mini input,.mini select,form select,form input[type=text],form input[type=number]{
  width:100%;border:1px solid var(--line2);background:var(--soft);border-radius:8px;padding:6px 9px;
  font:inherit;font-size:12.5px;color:var(--ink);outline:none;margin-top:2px}
.frm input:focus,.frm2 input:focus{border-color:var(--ink)}
.frm .chk,.chk{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink2)}
.chk input{width:auto;margin:0}
.frm2{max-width:520px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-top:10px}
.vcard{background:var(--soft);border-radius:var(--r2);padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.vc-name{font-size:13px;font-weight:700}
.vcard input{width:100%;border:1px solid var(--line2);background:var(--card);border-radius:7px;padding:5px 8px;
  font:inherit;font-size:12px;color:var(--ink);outline:none}
.vc-row{display:flex;align-items:center;gap:8px}
.mini.cat input{font-size:11.5px;padding:4px 7px}
.mini.cat .wide-in{min-width:210px}
.kbox{display:block;background:var(--soft);border-radius:8px;padding:9px 12px;font-size:11px;word-break:break-all;
  font-family:ui-monospace,Consolas,monospace;color:var(--ink2);margin-top:6px}
code{background:var(--soft);padding:1px 5px;border-radius:5px;font-size:11.5px}

@media (max-width:860px){
  .layout{grid-template-columns:1fr}
  aside{position:static}
  .pr,
  .sbox{order:5;width:100%;margin-left:0}
}

/* ---------------------------------------------------------- 套餐卡片 */
.vgroup{border-top:1px solid var(--line)}
.vgroup:first-child{border-top:0}
.gh{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer}
.gh:hover{background:var(--soft)}
.gh .cv{color:var(--ink3);font-size:11px;width:10px}
.gh .gn{font-size:14px;font-weight:700;letter-spacing:-.01em}
.gh .vfav{border:0;background:transparent;color:var(--ink3);cursor:pointer;font-size:12px;padding:0 2px}
.gh .vfav.on{color:var(--ink)}
.gh .gbar{flex:0 0 96px;height:5px;border-radius:3px;background:var(--oos-bg);overflow:hidden}
.gh .gbar i{display:block;height:100%;background:var(--in);border-radius:3px}
.gh .gs{font-size:12px;color:var(--ink2)}
.gh .gt{margin-left:auto;font-size:11px;color:var(--ink3)}
.ghint{padding:6px 16px 12px 34px;font-size:11.5px;color:var(--ink3)}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:10px;padding:2px 16px 16px}
.card{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:12px 13px 11px;
  display:flex;flex-direction:column;gap:9px;transition:border-color .12s}
.card:hover{border-color:var(--line2)}
.card.oos{opacity:.82}
.card.feat{border-color:var(--in);background:var(--in-bg)}
.c-head{display:flex;align-items:flex-start;gap:8px}
.c-title{flex:1;min-width:0}
.c-name{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.01em;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.c-tag{display:inline-block;font-size:10.5px;color:var(--ink2);background:var(--card);border-radius:5px;
  padding:1px 6px;margin:4px 4px 0 0}
.c-tag.ghost{color:var(--ink3)}
.card .fav{border:0;background:transparent;color:var(--ink3);cursor:pointer;font-size:14px;padding:0;line-height:1}
.card .fav.on{color:var(--ink)}
.c-status{display:flex;align-items:center;gap:8px}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:999px}
.pill.in{background:var(--in-bg);color:var(--in)}
.pill.out{background:var(--oos-bg);color:var(--oos)}
.c-held{font-size:11px;color:var(--ink3)}
.c-specs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:3px 10px}
.c-specs li{font-size:11.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-specs li.wide{grid-column:1/-1}
.c-specs b{display:inline-block;min-width:30px;color:var(--ink3);font-weight:500;margin-right:5px;font-size:10.5px}
.c-nospec{font-size:11.5px;color:var(--ink3)}
.c-extra{font-size:11px;color:var(--ink3);border-top:1px dashed var(--line);padding-top:7px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-foot{display:flex;align-items:flex-end;gap:8px;margin-top:auto;padding-top:3px;flex-wrap:wrap}
.c-price{flex:1;min-width:0}
.c-price b{font-size:15px;font-weight:700;letter-spacing:-.02em}
.c-price span{font-size:11px;color:var(--ink3);margin-left:2px}
.c-price .muted{font-size:11.5px;color:var(--ink3)}
.c-buy{display:flex;gap:6px;flex-wrap:wrap}
.card .go{border:0;background:var(--ink);color:var(--card);font-size:11.5px;font-weight:600;
  padding:5px 11px;border-radius:999px;text-decoration:none;white-space:nowrap;display:inline-block}
.card .go.dim{background:var(--ink3)}
.card .go.aff{background:var(--card);color:var(--ink);border:1px solid var(--line2)}
.card .rm{border:1px solid var(--line2);background:transparent;color:var(--ink2);font:inherit;
  font-size:11.5px;padding:4px 10px;border-radius:999px;cursor:pointer;white-space:nowrap}
.empty{padding:40px 16px;text-align:center;color:var(--ink2);font-size:14px}
.empty span{display:block;font-size:12px;color:var(--ink3);margin-top:6px}

@media (max-width:520px){
  .cards{grid-template-columns:1fr;padding:2px 12px 12px}
  .gh .gbar{display:none}
}