:root{ --bg:#FFFFFF; --bg-2:#F5F5F7; --tx:#1D1D1F; --tx-2:#6E6E73; --tx-3:#86868B; --sep:#D2D2D7; --sep-2:#E8E8ED; --ac:#0071E3; --ac-soft:rgba(0,113,227,.10); --alert:#D70015; --alert-soft:rgba(215,0,21,.08); --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","PingFang SC","Hiragino Sans GB",Helvetica,sans-serif; --num:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; } @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --bg:#000000; --bg-2:#1D1D1F; --tx:#F5F5F7; --tx-2:#A1A1A6; --tx-3:#6E6E73; --sep:#38383A; --sep-2:#2C2C2E; --ac:#2997FF; --ac-soft:rgba(41,151,255,.14); --alert:#FF453A; --alert-soft:rgba(255,69,58,.12); }} :root[data-theme="dark"]{ --bg:#000000; --bg-2:#1D1D1F; --tx:#F5F5F7; --tx-2:#A1A1A6; --tx-3:#6E6E73; --sep:#38383A; --sep-2:#2C2C2E; --ac:#2997FF; --ac-soft:rgba(41,151,255,.14); --alert:#FF453A; --alert-soft:rgba(255,69,58,.12); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--sans); font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;font-synthesis:none} .gate{min-height:100vh;display:grid;place-items:center;padding:32px 20px} .card{width:100%;max-width:352px} .brand{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:0} .sub{font-size:14px;color:var(--tx-2);margin:8px 0 32px;letter-spacing:-.003em} label{display:block;font-size:12px;font-weight:590;letter-spacing:.05em; text-transform:uppercase;color:var(--tx-3);margin:0 0 8px} input{width:100%;font:inherit;font-size:16px;padding:11px 13px;border-radius:10px; border:1px solid var(--sep);background:var(--bg);color:var(--tx); transition:border-color .15s,box-shadow .15s} input:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-soft)} .field+.field{margin-top:18px} .hint{font-size:12px;color:var(--tx-3);margin-top:7px;line-height:1.5} button{width:100%;font:inherit;font-size:16px;font-weight:590;letter-spacing:-.006em; padding:12px;margin-top:26px;border:0;border-radius:10px;background:var(--ac); color:#fff;cursor:pointer;transition:opacity .15s,transform .1s} button:hover:not(:disabled){opacity:.9} button:active:not(:disabled){transform:scale(.985)} button:disabled{opacity:.45;cursor:default} .err{margin-top:18px;padding:11px 13px;border-radius:10px;background:var(--alert-soft); color:var(--alert);font-size:13.5px;line-height:1.5;display:none} .err.on{display:block} .ok{margin-top:18px;padding:11px 13px;border-radius:10px;background:var(--ac-soft); color:var(--ac);font-size:13.5px;display:none} .ok.on{display:block} .foot{margin-top:34px;padding-top:18px;border-top:1px solid var(--sep-2); font-size:12px;color:var(--tx-3);line-height:1.65} :focus-visible{outline:2px solid var(--ac);outline-offset:2px} @media (prefers-reduced-motion:reduce){*{transition:none!important}} /* 水位接近上限时用告警色填充 —— 与「峰值刻度线」区分开 */ .dist .pkfill{position:absolute;top:0;height:100%;border-radius:inherit; background:var(--alert);opacity:.85} /* ── 台账页骨架与组件 ───────────────────────────────── 原先内联在 console.html 里，members.html 复制一份必然漂移， 所以移到共享样式表。两个页面用同一套骨架。 */ body{font-size:16px} .bar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.72); backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bar{background:rgba(0,0,0,.72)}} :root[data-theme="dark"] .bar{background:rgba(0,0,0,.72)} .bar .in{max-width:1120px;margin:0 auto;padding:13px 24px;display:flex;align-items:center;gap:14px} .bar h1{margin:0;font-size:18px;font-weight:600;letter-spacing:-.012em} .bar .who{margin-left:auto;font-size:12px;color:var(--tx-3);display:flex;align-items:center;gap:11px} .bar .who b{color:var(--tx-2);font-weight:590} .role{font-size:10.5px;font-weight:590;letter-spacing:.06em;text-transform:uppercase; padding:2px 7px;border-radius:5px;background:var(--ac-soft);color:var(--ac)} .out{font:inherit;font-size:12px;color:var(--tx-3);background:none;border:0;padding:4px 8px; border-radius:6px;cursor:pointer;width:auto;margin:0} .out:hover{background:var(--bg-2);color:var(--tx)} .wrap{max-width:1120px;margin:0 auto;padding:0 24px 110px} .sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1px; background:var(--sep-2);border-top:1px solid var(--sep-2);border-bottom:1px solid var(--sep-2); margin-top:40px} .sum>div{background:var(--bg);padding:19px 17px 21px} .sum dt{font-size:11px;font-weight:590;letter-spacing:.05em;text-transform:uppercase; color:var(--tx-3);margin:0 0 8px} .sum dd{margin:0;font-size:26px;font-weight:600;letter-spacing:-.022em;line-height:1; font-variant-numeric:tabular-nums} .sum dd em{font-style:normal;font-size:14px;font-weight:400;color:var(--tx-2)} .sum .h{font-size:11.5px;color:var(--tx-3);margin-top:7px;line-height:1.45} section{padding:54px 0 0} .eyebrow{font-size:11.5px;font-weight:590;letter-spacing:.062em;text-transform:uppercase; color:var(--tx-3);margin:0 0 18px} h2{font-size:28px;font-weight:600;letter-spacing:-.021em;line-height:1.14;margin:0 0 8px} .lede{font-size:16px;color:var(--tx-2);margin:0 0 26px;max-width:64ch;letter-spacing:-.003em} .grp{border-top:1px solid var(--sep)} .grp:last-of-type{border-bottom:1px solid var(--sep)} .ghead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:20px 0 4px} .ghead b{font-size:19px;font-weight:600;letter-spacing:-.014em} .ghead .act{font-size:12.5px;color:var(--tx-3);display:flex;gap:14px;flex-wrap:wrap} .ghead .act b{font-size:12.5px;font-weight:590;color:var(--tx-2)} .ghead .tot{margin-left:auto;font-size:17px;font-weight:590;letter-spacing:-.012em; font-variant-numeric:tabular-nums} .chead,.row{display:grid;gap:6px 20px;align-items:center; grid-template-columns:minmax(120px,.85fr) minmax(180px,1.5fr) minmax(100px,.7fr) minmax(150px,1.05fr)} .chead{padding:12px 0 8px;border-bottom:1px solid var(--sep-2)} .chead span{font-size:10.5px;font-weight:590;letter-spacing:.05em;text-transform:uppercase; color:var(--tx-3)} .chead span:nth-child(3),.chead span:nth-child(4){text-align:right} .row{padding:16px 0;border-bottom:1px solid var(--sep-2)} .row:last-child{border-bottom:0;padding-bottom:22px} .amt{text-align:right;font-size:17px;font-weight:590;letter-spacing:-.012em; font-variant-numeric:tabular-nums} .meta{text-align:right;font-size:12px;color:var(--tx-3);line-height:1.5} .plat{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .plat b{font-size:16px;font-weight:590;letter-spacing:-.01em} .tier{font-size:10.5px;font-weight:590;letter-spacing:.04em;padding:2px 7px;border-radius:5px; background:var(--bg-2);color:var(--tx-2)} .tier.na{background:transparent;box-shadow:inset 0 0 0 1px var(--sep);color:var(--tx-3)} .dist{position:relative;height:24px;margin-top:3px} .dist .tk{position:absolute;left:0;right:0;top:8px;height:8px;border-radius:4px;background:var(--sep-2)} .dist .p90{position:absolute;top:8px;height:8px;border-radius:4px;background:var(--ac);opacity:.3} .dist .med{position:absolute;top:8px;height:8px;border-radius:4px 0 0 4px;background:var(--ac)} .dist .pk{position:absolute;top:3px;width:2px;height:18px;border-radius:1px;background:var(--tx)} .distlbl{display:flex;gap:13px;font-size:11.5px;color:var(--tx-3);margin-top:7px;flex-wrap:wrap; font-variant-numeric:tabular-nums} .distlbl b{color:var(--tx-2);font-weight:590} .none{font-size:12.5px;color:var(--tx-3);padding:7px 0;line-height:1.5} .warn{font-size:12px;color:var(--alert);margin-top:6px;line-height:1.5} .gaps{display:grid;grid-template-columns:repeat(auto-fit,minmax(264px,1fr));gap:1px; background:var(--sep-2);border-top:1px solid var(--sep-2);border-bottom:1px solid var(--sep-2)} .gaps>div{background:var(--bg);padding:21px 19px 23px} .gaps h3{font-size:14.5px;font-weight:600;margin:0 0 8px;letter-spacing:-.008em} .gaps p{margin:0;font-size:13px;color:var(--tx-2);line-height:1.62} code{font-family:var(--num);font-size:.86em;color:var(--ac);background:var(--ac-soft); padding:1.5px 5px;border-radius:4px} .rep{border-top:1px solid var(--sep-2);padding-top:22px;margin-top:8px} .repsel{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px} .repsel button{width:auto;margin:0;padding:6px 13px;font-size:13px;font-weight:500; border-radius:8px;background:var(--bg-2);color:var(--tx-2)} .repsel button.on{background:var(--ac);color:#fff;font-weight:590} .md{font-size:14.5px;line-height:1.75;color:var(--tx-2);max-width:70ch} .md h1{font-size:22px;color:var(--tx);letter-spacing:-.018em;margin:0 0 14px} .md h2{font-size:17px;color:var(--tx);margin:26px 0 10px;letter-spacing:-.01em} .md h3{font-size:15px;color:var(--tx);margin:20px 0 8px} .md table{width:100%;border-collapse:collapse;margin:14px 0;font-variant-numeric:tabular-nums} .md th,.md td{padding:8px 12px 8px 0;text-align:left;border-bottom:1px solid var(--sep-2);font-size:13.5px} .md th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--tx-3);font-weight:590} .md blockquote{margin:14px 0;padding-left:14px;border-left:2px solid var(--sep);color:var(--tx-3);font-size:13.5px} .md strong{color:var(--tx);font-weight:590} .md ul{padding-left:20px;margin:10px 0} .md hr{border:0;border-top:1px solid var(--sep-2);margin:24px 0} .md p{margin:10px 0} footer{margin-top:74px;padding-top:20px;border-top:1px solid var(--sep-2); font-size:12px;color:var(--tx-3);line-height:1.7} .load{padding:80px 0;text-align:center;color:var(--tx-3);font-size:14px} /* 应报未报 —— 台账上必须看得见，否则「不装」等于「隐身」 */ .miss{border:1px solid var(--alert);border-radius:12px;padding:16px 18px;margin-top:26px; background:var(--alert-soft)} .miss h3{margin:0 0 4px;font-size:14.5px;font-weight:600;color:var(--alert);letter-spacing:-.008em} .miss p{margin:0 0 12px;font-size:12.5px;color:var(--tx-2);line-height:1.55} .miss ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px} .miss li{font-size:13px;padding:5px 11px;border-radius:8px;background:var(--bg); border:1px solid var(--sep)} .miss li b{font-weight:590} .miss li span{color:var(--alert);font-size:12px;margin-left:6px} @media (max-width:820px){ .chead{display:none} .row{grid-template-columns:1fr 1fr;gap:10px 20px} .row .dwrap{grid-column:1/-1;order:9} .amt,.meta{text-align:left} } @media (max-width:560px){.wrap,.bar .in{padding-left:18px;padding-right:18px} .row{grid-template-columns:1fr}h2{font-size:24px}.bar .who b{display:none} .ghead .tot{margin-left:0;width:100%}} /* 窗口区间标注 —— 弱化，不与数值抢注意力 */ .dr{color:var(--tx-3);font-variant-numeric:tabular-nums;margin:0 .15em;opacity:.75} /* 额度三行：本周当前 / 上周峰值 / 上上周峰值 —— 数值右对齐成一列便于纵向比较 */ .qlist{display:flex;flex-direction:column;gap:.25rem;margin-top:.5rem} .qrow{display:flex;align-items:baseline;gap:.5rem;font-size:.8125rem;line-height:1.4} .ql{color:var(--tx-3);flex:1;min-width:0} .qs{margin-left:.35em} .qv{font-weight:600;font-variant-numeric:tabular-nums;min-width:3.2em;text-align:right} .qw{color:var(--alert);font-size:.75rem;white-space:nowrap} /* 性价比标签：影子成本折合月度 ÷ 实际月费 */ .ratio{display:inline-block;margin-left:.4em;padding:.05rem .35rem;border-radius:4px; font-size:.7rem;font-variant-numeric:tabular-nums;background:var(--bg-2);color:var(--tx-3)} .ratio.good{background:rgba(48,209,88,.14);color:#248a3d} .ratio.bad{background:rgba(255,159,10,.16);color:#a35b00} /* ── 标题旁的口径说明 ──────────────────────────────── 口径这类东西：不写会被误读成打卡工时，写在正文里每次都在吵。 收进问号，想看的人才看。悬停与键盘聚焦都能展开。 */ .hastip{position:relative;display:flex;align-items:center;gap:.4em} .hint{ width:1.05em;height:1.05em;padding:0;flex:none; font:inherit;font-size:.62em;font-weight:600;line-height:1; color:var(--tx-3);background:none; border:1px solid currentColor;border-radius:50%; cursor:help;opacity:.5;transition:opacity .18s ease,color .18s ease; } .hint:hover,.hint:focus-visible{opacity:1;color:var(--tx)} .hint:focus-visible{outline:2px solid var(--ac);outline-offset:2px} .tip{ position:absolute;top:calc(100% + .5rem);left:0;z-index:40; width:min(30rem,calc(100vw - 3rem)); padding:.95rem 1.05rem; font-size:.78rem;font-weight:400;line-height:1.65;letter-spacing:0; color:var(--tx);text-align:left;white-space:normal; background:var(--bg); border:1px solid var(--sep);border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.13),0 1px 3px rgba(0,0,0,.06); /* 默认不可见但保留在无障碍树外，避免读屏重复播报 */ opacity:0;visibility:hidden;transform:translateY(-3px); transition:opacity .18s ease,transform .18s ease,visibility .18s; } .hint:hover + .tip,.hint:focus-visible + .tip,.tip:hover{ opacity:1;visibility:visible;transform:translateY(0); } .tip b{display:block;margin:.85rem 0 .2rem;font-size:.74rem;font-weight:600; letter-spacing:.02em;color:var(--tx-3)} .tip b:first-child{margin-top:0} .tip p{margin:0} .tip>p b{display:inline;margin:0;font-size:inherit;color:inherit;font-weight:600} /* ── 平台 Tab ──────────────────────────────────────── 一个订阅账号 = 一个人 × 一个平台。按平台分开， 同一档位下谁用得多、谁该降档才能横着比。 */ .tabs{display:flex;gap:2px;margin:22px 0 0;padding:2px; background:var(--bg-2);border-radius:9px;width:fit-content;max-width:100%} .vtab{ appearance:none;border:0;cursor:pointer;white-space:nowrap; padding:7px 14px;border-radius:7px; font:inherit;font-size:13.5px;font-weight:510;letter-spacing:-.006em; color:var(--tx-2);background:transparent; display:flex;align-items:center;gap:7px; transition:background .18s ease,color .18s ease,box-shadow .18s ease; } .vtab:hover{color:var(--tx)} .vtab.on{color:var(--tx);background:var(--bg); box-shadow:0 1px 3px rgba(0,0,0,.10),0 0 0 .5px rgba(0,0,0,.04)} .vtab:focus-visible{outline:2px solid var(--ac);outline-offset:2px} .vtab .cnt{font-size:11px;font-weight:590;font-variant-numeric:tabular-nums; min-width:1.35em;padding:1px 5px;border-radius:20px; color:var(--tx-3);background:var(--sep-2)} .vtab.on .cnt{color:var(--bg);background:var(--tx-2)} /* 账号行里的「采集于」—— 弱化，只在需要判断新鲜度时才看 */ .plat .seen{font-size:11.5px;color:var(--tx-3);font-variant-numeric:tabular-nums} /* Tab 底部小结：本平台账号数与合计 */ .tabfoot{display:flex;align-items:baseline;justify-content:space-between; padding:14px 0 4px;font-size:12.5px;color:var(--tx-3)} .tabfoot b{font-size:15px;font-weight:590;color:var(--tx-2); font-variant-numeric:tabular-nums;letter-spacing:-.01em} @media (max-width:640px){ .tabs{width:100%} .vtab{flex:1;justify-content:center} } /* ── 成员管理 ──────────────────────────────────────── 签发 token、登记档位、复制安装指令。仅管理员可见。 token 打码显示，复制按钮拿真值 —— 打码防的是屏幕，不是剪贴板。 */ .sechead{display:flex;align-items:center;gap:12px} .sechead .eyebrow{margin:0} .ghost{ width:auto;margin:0; /* 同上：复位全局 button 规则 */ appearance:none;cursor:pointer; padding:5px 12px;border-radius:7px; font:inherit;font-size:12.5px;font-weight:510;letter-spacing:-.004em; color:var(--tx-2);background:transparent;border:1px solid var(--sep); transition:background .18s ease,color .18s ease,border-color .18s ease; } .ghost:hover{color:var(--tx);border-color:var(--tx-3);background:var(--bg-2)} .ghost:focus-visible{outline:2px solid var(--ac);outline-offset:2px} .mgr{margin:16px 0 4px;padding:20px;border:1px solid var(--sep);border-radius:14px; background:var(--bg-2)} .mgrform{display:grid;gap:16px} .fld{display:grid;gap:6px} .fld label{font-size:11.5px;font-weight:590;letter-spacing:.04em; text-transform:uppercase;color:var(--tx-3)} .mgrform input:not([type=checkbox]){ appearance:none;font:inherit;font-size:14px; padding:8px 11px;border-radius:8px; border:1px solid var(--sep);background:var(--bg);color:var(--tx); transition:border-color .16s ease,box-shadow .16s ease; } .mgrform input:focus{outline:none;border-color:var(--ac); box-shadow:0 0 0 3px var(--ac-soft)} .mgrform input:disabled{opacity:.45;cursor:not-allowed} .mgrform input::placeholder{color:var(--tx-3)} .vens{border:0;margin:0;padding:0;display:grid;gap:10px} .vens legend{padding:0;margin:0 0 2px;font-size:11.5px;font-weight:590; letter-spacing:.04em;text-transform:uppercase;color:var(--tx-3)} .ven{display:grid;grid-template-columns:minmax(9rem,auto) 9rem 1fr;gap:12px;align-items:center} /* 档位提示：填不填由数据决定，不该让人猜，所以只读地告诉他会存成什么 */ .feepick{display:flex;align-items:center;gap:8px} .feepick input{width:6.5rem} .tierhint{font-size:12.5px;color:var(--tx-3);line-height:1.4} .mgrform select{ width:auto;margin:0;appearance:none;font:inherit;font-size:14px; padding:8px 30px 8px 11px;border-radius:8px; border:1px solid var(--sep);background:var(--bg);color:var(--tx);cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--tx-3) 50%), linear-gradient(135deg,var(--tx-3) 50%,transparent 50%); background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%; background-size:5px 5px,5px 5px;background-repeat:no-repeat; transition:border-color .16s ease,box-shadow .16s ease; } .mgrform select:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-soft)} .mgrform select:disabled{opacity:.45;cursor:not-allowed} /* .ck 是