/* ═══════════ 主题：紫 + 青 + 荧光绿，浅色 / 深色两套（与 demo 第 8 版一致） ═══════════ */
:root,[data-theme=soft]{color-scheme:light;
  --page:#dfdfe4;--card:#f7f7f9;--soft:#ededf1;--soft2:#e3e3e9;--line:#d6d6de;--input:#fbfbfc;--text:#17161c;--dim:#6c6b76;--hover:#efeef4;
  --pri:#7b5cf5;--pri2:#ece7fe;--acc:#c6f432;--acc-ink:#17161c;--ink:#17161c;--tip:#17161c;
  --red:#e5484d;--teal:#1e9e6a;--yellow:#d4920f;--orange:#ea7a2b;--blue:#1a9fd0;--purple:#7b5cf5;
  --c1:#7b5cf5;--c2:#1a9fd0;--c3:#8db600;--c4:#dc5b9c;
  --q1:#f3f0fe;--q2:#ded5fd;--q3:#bdabfa;--q4:#9b82f7;--q5:#7b5cf5;--q6:#5434cf;
  --sidetext:#46454f;--shadow:0 1px 2px rgba(20,20,35,.04),0 8px 28px rgba(20,20,35,.05);--cardline:transparent;}
[data-theme=dark]{color-scheme:dark;
  --page:#0e0e11;--card:#19191e;--soft:#222228;--soft2:#2b2b32;--line:#303038;--input:#131317;--text:#f2f1f6;--dim:#9a99a6;--hover:#202027;
  --pri:#8a6ff8;--pri2:#2a2447;--acc:#c6f432;--acc-ink:#17161c;--ink:#f2f1f6;--tip:#2e2e36;
  --red:#f0646a;--teal:#35c08a;--yellow:#e6a935;--orange:#f08a45;--blue:#2cb0e2;--purple:#8a6ff8;
  --c1:#8a6ff8;--c2:#1c9bd0;--c3:#77a000;--c4:#dc5b9c;
  --q1:#24213a;--q2:#332b5a;--q3:#4a3a8c;--q4:#6851c6;--q5:#8a6ff8;--q6:#bcabff;
  --sidetext:#b4b3bf;--shadow:none;--cardline:#25252c;}
:root{--sans:'DM Sans','Noto Sans SC',system-ui,sans-serif;--mono:var(--sans);--code:'IBM Plex Mono',ui-monospace,monospace;}

*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--page);color:var(--text);font-family:var(--sans);min-height:100vh;font-size:14px;line-height:1.6;font-variant-numeric:tabular-nums;}
a{color:var(--pri);}
code{font-family:var(--code);background:var(--soft2);padding:0 4px;border-radius:4px;font-size:.92em;}
.boot{padding:80px;text-align:center;color:var(--dim);}
.hidden{display:none!important;}

/* ─── 左侧导航 ─── */
.shell{display:flex;min-height:100vh;}
.side{width:236px;flex-shrink:0;background:var(--page);border-right:1px solid var(--line);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;z-index:300;}
.brand{display:flex;gap:10px;align-items:center;padding:22px 20px 16px;}
.brand .logo,.nav-icon{width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,var(--pri),#5a8cff);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
.brand b{display:block;font-size:14px;} .brand span{font-size:11px;color:var(--dim);}
.snav{flex:1;overflow-y:auto;padding:0 10px 10px;}
.ngroup{font-size:11.5px;color:var(--dim);margin:18px 12px 6px;}
.nitem{display:flex;align-items:center;gap:10px;padding:9px 12px;white-space:nowrap;border-radius:12px;color:var(--sidetext);text-decoration:none;font-size:13.5px;margin-bottom:2px;}
.nitem i{font-style:normal;width:18px;text-align:center;opacity:.8;}
.nitem em{font-style:normal;font-size:10px;margin-left:auto;background:var(--soft2);color:var(--dim);border-radius:999px;padding:0 7px;white-space:nowrap;}
.nitem em.lock{background:var(--pri2);color:var(--pri);}
.nitem:hover{background:var(--soft2);color:var(--text);}
.nitem.active{background:var(--card);color:var(--pri);font-weight:600;box-shadow:0 0 0 1px var(--line),0 2px 6px rgba(20,20,35,.05);}
[data-theme=dark] .nitem.active{background:var(--soft2);box-shadow:none;}
.side-foot{padding:12px 14px 16px;border-top:1px solid var(--line);}
.themes{display:flex;background:var(--soft2);border-radius:999px;padding:2px;margin-bottom:12px;}
.themes button{flex:1;border:none;background:transparent;color:var(--dim);font-size:12px;padding:4px 8px;border-radius:999px;cursor:pointer;font-family:var(--sans);}
.themes button.on{background:var(--card);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.12);}
.me{display:flex;gap:10px;align-items:center;}
.me .av{width:30px;height:30px;border-radius:50%;background:var(--pri);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0;}
.me b{display:block;font-size:13px;} .me span{font-size:11px;color:var(--dim);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px;}
.me .btn{margin-left:auto;}
.mainwrap{flex:1;min-width:0;}
.page{max-width:1360px;margin:0 auto;padding:26px 32px 90px;}
.phead{display:flex;align-items:flex-end;gap:12px;margin:2px 0 18px;}
.phead h2{font-size:28px;font-weight:600;letter-spacing:-.5px;} .phead p{color:var(--dim);font-size:13px;}

/* ─── 卡片 ─── */
.card{background:var(--card);border:1px solid var(--cardline);border-radius:22px;padding:24px 26px;margin-bottom:20px;box-shadow:var(--shadow);}
.chd{font-size:17px;font-weight:600;letter-spacing:-.1px;margin-bottom:14px;display:flex;align-items:center;gap:10px;color:var(--text);}
.chd .grow{flex:1;}
.sub{color:var(--dim);font-size:13px;margin:-6px 0 14px;line-height:1.6;}

/* ─── 表单：能填的地方一眼看得出 ─── */
label.lb{font-size:12px;color:var(--dim);font-weight:500;display:block;margin-bottom:5px;}
input,select,textarea{background:var(--input);border:1px solid var(--line);border-radius:12px;color:var(--text);font-family:var(--sans);font-size:13.5px;padding:9px 13px;outline:none;transition:border-color .15s,box-shadow .15s;width:100%;}
textarea{resize:vertical;line-height:1.6;font-family:var(--code);font-size:13px;}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--pri) 40%,var(--line));}
input:focus,select:focus,textarea:focus{border-color:var(--pri);box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 18%,transparent);}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--dim) 70%,transparent);}
input[type=checkbox],input[type=radio]{accent-color:var(--pri);width:15px;height:15px;}
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.fg3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.mt{margin-top:12px;}

/* ─── 按钮 ─── */
.btn{display:inline-block;background:var(--pri);border:none;border-radius:999px;color:#fff;cursor:pointer;font-family:var(--sans);font-size:13px;font-weight:600;padding:9px 18px;transition:filter .15s;white-space:nowrap;text-decoration:none;}
.btn:hover:not(:disabled){filter:brightness(1.08);}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.btn.blue,.btn.teal{background:var(--pri);}
.btn.ghost{background:var(--soft2);color:var(--text);font-weight:500;}
.btn.ghost:hover:not(:disabled){filter:brightness(.97);}
.btn.danger{background:transparent;color:var(--red);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--red) 50%,transparent);font-weight:500;}
.btn.sm{padding:4px 12px;font-size:12px;}
.linkbtn{background:none;border:none;color:var(--pri);cursor:pointer;font-family:var(--sans);font-size:12.5px;padding:0;}

/* ─── 表格 ─── */
.twrap{overflow-x:auto;border-radius:14px;}
table{width:100%;border-collapse:collapse;font-size:13.5px;}
th{background:var(--card);font-size:12px;font-weight:500;color:var(--dim);padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap;}
td{padding:10px 12px;border-bottom:1px solid var(--soft);vertical-align:top;}
tr:last-child td{border-bottom:none;}
tbody tr:hover td{background:var(--hover);}
td.num,th.num{text-align:right;white-space:nowrap;}

/* ─── 标签 ─── */
.chip{display:inline-flex;align-items:center;gap:4px;background:var(--soft2);border-radius:999px;padding:1px 10px;font-size:12.5px;margin:2px 4px 2px 0;}
.chip button{background:none;border:none;color:var(--dim);cursor:pointer;font-size:12px;padding:0 0 0 2px;}
.chip button:hover{color:var(--red);}
.badge{display:inline-block;font-size:11px;padding:1px 9px;border-radius:999px;white-space:nowrap;font-weight:600;background:var(--soft2);color:var(--text);}
.st{display:inline-block;padding:1px 9px;border-radius:999px;font-size:11.5px;font-weight:600;}
.st.ok{color:var(--teal);background:color-mix(in srgb,var(--teal) 14%,transparent);}
.st.warn{color:var(--yellow);background:color-mix(in srgb,var(--yellow) 16%,transparent);}
.st.bad{color:var(--red);background:color-mix(in srgb,var(--red) 13%,transparent);}
.st.new{color:var(--pri);background:var(--pri2);}
.acct{display:flex;align-items:center;gap:6px;margin:2px 0;font-size:13px;}
.acct .uid{font-family:var(--code);font-size:10.5px;color:var(--dim);}
.muted{color:var(--dim);font-size:12.5px;}

/* ─── 提示框 ─── */
.infobox,.warnbox,.errbox{border-radius:12px;font-size:13px;padding:10px 14px;margin-top:10px;}
.infobox{background:var(--pri2);color:var(--pri);}
.warnbox{background:color-mix(in srgb,var(--yellow) 13%,transparent);color:var(--yellow);}
.errbox{background:color-mix(in srgb,var(--red) 11%,transparent);color:var(--red);}
.empty{text-align:center;padding:50px 20px;color:var(--dim);font-size:14px;}

/* ─── 统计块 ─── */
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;}
.sbox{background:var(--soft);border-radius:16px;padding:14px 16px;}
.sl{font-size:12px;color:var(--dim);margin-bottom:4px;font-weight:500;}
.sv{font-size:24px;font-weight:600;letter-spacing:-.4px;}

/* ─── 登录 ─── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.login{background:var(--card);border:1px solid var(--cardline);border-radius:24px;padding:36px 34px;width:100%;max-width:400px;box-shadow:var(--shadow);}
.login .nav-brand{display:flex;align-items:center;gap:10px;justify-content:center;margin:0 0 6px;}
.login .nav-brand h1{font-size:18px;font-weight:600;}
.login p.tip{text-align:center;color:var(--dim);font-size:13px;margin-bottom:22px;}
.login .fgv{margin-bottom:14px;}
.login .btn{width:100%;padding:11px;}

/* ─── 弹窗 ─── */
.mask{position:fixed;inset:0;background:rgba(10,10,15,.45);z-index:500;display:flex;align-items:flex-start;justify-content:center;padding:50px 20px;overflow-y:auto;}
.modal{background:var(--card);border-radius:24px;padding:24px 26px;max-width:720px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.25);}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;align-items:center;}
.modal-foot .grow{flex:1;}
.section-t{font-size:12px;color:var(--dim);margin:18px 0 8px;font-weight:600;}

/* ─── 提示条 ─── */
#toasts{position:fixed;right:20px;bottom:20px;z-index:900;display:flex;flex-direction:column;gap:8px;}
.toast{background:var(--ink);color:var(--card);border-radius:999px;padding:9px 18px;font-size:13px;box-shadow:0 6px 20px rgba(0,0,0,.18);max-width:420px;animation:tin .2s ease;}
.toast.err{background:var(--red);color:#fff;} .toast.ok{background:var(--teal);color:#fff;}
@keyframes tin{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ─── 开发进度 ─── */
.roadmap{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}
.rm{background:var(--soft);border-radius:16px;padding:14px 16px;}
.rm b{display:block;margin:2px 0 4px;}
.rm.done{box-shadow:inset 0 0 0 1.5px var(--teal);}
.rm.now{box-shadow:inset 0 0 0 1.5px var(--pri);}
.rm .n{font-size:11.5px;color:var(--dim);}

select.must{border-color:color-mix(in srgb,var(--yellow) 60%,transparent);background:color-mix(in srgb,var(--yellow) 6%,var(--input));}
select.unpicked{border-color:var(--red);box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 15%,transparent);}
@media (max-width:900px){ .shell{flex-direction:column;} .side{width:100%;height:auto;position:static;border-right:none;border-bottom:1px solid var(--line);} .snav{display:flex;overflow-x:auto;gap:4px;padding-bottom:8px;} .ngroup{display:none;} .nitem{white-space:nowrap;} .side-foot{display:flex;gap:12px;align-items:center;} .themes{margin:0;} .fg2,.fg3{grid-template-columns:1fr;} .sgrid{grid-template-columns:repeat(2,1fr);} .page{padding:20px 16px 60px;} }

/* ─── API Key 页 ─── */
.kstate{background:var(--soft);border-radius:12px;padding:10px 14px;font-size:13.5px;}
.howto{margin:10px 0 8px 20px;font-size:13px;line-height:1.9;}
.howto li{padding-left:4px;}
details>summary{cursor:pointer;list-style:none;} details>summary::-webkit-details-marker{display:none;}
details>summary.linkbtn::before{content:'▸ ';} details[open]>summary.linkbtn::before{content:'▾ ';}