:root { --bg:#f6f7f9; --card:#fff; --fg:#1d2430; --mut:#6b7380; --bd:#e2e5ea; --ac:#2f6feb; --dg:#c9372c; }
[hidden] { display:none !important; }  /* 带 hidden 属性的元素一律隐藏（否则 .tag 等的 display 会覆盖它） */
@media (prefers-color-scheme: dark) {
  :root { --bg:#12151b; --card:#1b2029; --fg:#e6e9ef; --mut:#98a1b0; --bd:#2b313c; --ac:#5b8cff; --dg:#ff6b5e; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.5 system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; }
main { max-width:720px; margin:0 auto; padding:24px 16px; }
h1 { margin:0 0 4px; font-size:22px; } h2 { font-size:16px; margin:0 0 8px; }
.sub,.hint,.foot { color:var(--mut); font-size:13px; }
.card { background:var(--card); border:1px solid var(--bd); border-radius:10px; padding:16px; margin:14px 0; }
.row { display:flex; justify-content:space-between; gap:12px; padding:4px 0; border-bottom:1px dashed var(--bd); }
.row:last-child { border:0; } .row span { color:var(--mut); }
code { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; word-break:break-all; }
label { display:block; margin-bottom:6px; color:var(--mut); }
textarea,input,select { width:100%; padding:8px 10px; border:1px solid var(--bd); border-radius:6px; background:var(--bg); color:var(--fg); font:inherit; }
.inline { display:flex; gap:8px; } .inline input { flex:1; } .inline select { width:auto; }
button { margin-top:10px; padding:8px 16px; border:0; border-radius:6px; background:var(--ac); color:#fff; font:inherit; cursor:pointer; }
.inline button { margin-top:0; }
button.danger { background:var(--dg); } button:disabled { opacity:.5; }
#log,#hist,#dks { max-height:320px; overflow:auto; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; }
.l { padding:3px 0; border-bottom:1px solid var(--bd); word-break:break-all; }
.l.out { color:var(--mut); } .l.in { color:var(--ac); } .l.err,.err { color:var(--dg); }
a { color:var(--ac); }
.btns { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px; } .btns button { margin-top:0; }
button.alt { background:#1f8a5b; } button.ghost { background:transparent; color:var(--ac); border:1px solid var(--bd); }
textarea[readonly] { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; }
.pc { display:flex; gap:8px; align-items:center; margin-bottom:8px; } .pc button { margin-top:0; }
.pcode { flex:1; font-size:22px; letter-spacing:3px; padding:8px 12px; background:var(--bg); border:1px solid var(--bd); border-radius:6px; text-align:center; }
.tag { display:inline-block; margin-left:8px; padding:1px 8px; border-radius:10px; font-size:12px; font-weight:normal; background:var(--bg); border:1px solid var(--bd); color:var(--mut); vertical-align:middle; }
.tag.warn { color:#b26b00; border-color:#e8c27a; }
.presets { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:10px; }
.preset { margin:0; text-align:left; display:flex; flex-direction:column; gap:4px; background:var(--bg); color:var(--fg); border:1px solid var(--bd); padding:12px; }
.preset b { font-size:15px; } .preset span { font-size:13px; color:var(--mut); } .preset small { font-size:11.5px; color:var(--mut); line-height:1.4; }
.preset.active { border-color:var(--ac); box-shadow:0 0 0 1px var(--ac) inset; } .preset.active b::after { content:" ✓"; color:var(--ac); }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:4px 16px; }
.grid label { margin-top:8px; }
.mid { align-self:center; color:var(--mut); white-space:nowrap; }
.warnline { padding:7px 10px; margin:6px 0; border-radius:6px; font-size:13.5px; border-left:3px solid; background:var(--bg); }
.warnline.ok { border-color:#1f8a5b; } .warnline.info { border-color:var(--mut); color:var(--mut); }
.warnline.warn { border-color:#d68a00; } .warnline.danger { border-color:var(--dg); color:var(--dg); }
.mt { margin-top:10px; }
.opts { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:480px){ .opts { grid-template-columns:1fr; } }
.enroll { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start; } .enroll > div { flex:1; min-width:220px; }
#qr { background:#fff; border-radius:8px; border:1px solid var(--bd); image-rendering:pixelated; }
.secret { display:block; padding:8px; background:var(--bg); border:1px solid var(--bd); border-radius:6px; letter-spacing:1px; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:16px; z-index:10; }
.modal[hidden] { display:none; }
.modal-box { background:var(--card); border:1px solid var(--bd); border-radius:10px; padding:20px; width:100%; max-width:380px; }
.tag.ok { color:#1f8a5b; border-color:#7cc4a2; } .tag.danger { color:var(--dg); border-color:var(--dg); }
#audit { max-height:360px; overflow:auto; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; }
.ev { padding:3px 0; border-bottom:1px solid var(--bd); word-break:break-all; } .ev.warn { color:#b26b00; } .ev.alert { color:var(--dg); font-weight:600; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { display:inline-flex; align-items:center; gap:6px; margin:0; padding:5px 10px; border:1px solid var(--bd); border-radius:16px; background:var(--bg); color:var(--fg); cursor:pointer; }
.chip input { width:auto; margin:0; }
.invite { margin-top:12px; padding:12px; border:1px dashed #d68a00; border-radius:8px; background:var(--bg); }
.tbl { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
th, td { text-align:left; padding:7px 6px; border-bottom:1px solid var(--bd); vertical-align:top; }
th { color:var(--mut); font-weight:normal; white-space:nowrap; }
button.mini { margin:2px 4px 2px 0; padding:3px 9px; font-size:12.5px; }
.small { font-size:12px; margin-top:2px; }
#qr { background:#fff; }
canvas#qr { border-radius:8px; border:1px solid var(--bd); max-width:100%; }
.i18n-pending body { visibility:hidden; }
.topbar { display:flex; justify-content:flex-end; margin-bottom:4px; }
.topbar select { width:auto; padding:4px 8px; font-size:13px; }
.chk { display:flex; align-items:center; gap:6px; margin-top:6px; } .chk input { width:auto; margin:0; }
.batchrow #batchCount { flex:0 0 90px; } .batchrow #batchPrefix { flex:1 1 120px; }
#batchList { width:100%; box-sizing:border-box; font-family:ui-monospace,Consolas,monospace; font-size:12px; white-space:pre; }