:root{
  --bg:#f4f6f9; --panel:#fff; --line:#e2e6eb; --text:#171b20; --muted:#6b7480;
  --accent:#2f6fed; --accent-soft:#e9f0fe; --danger:#d33b3b; --warn:#c98a00;
  --radius:12px; --shadow:0 6px 24px rgba(20,25,35,.08);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#111418; --panel:#1a1e24; --line:#2a3038; --text:#e7eaee; --muted:#96a0ad;
    --accent:#5b8ef5; --accent-soft:#1d2a41; --danger:#e56060; --warn:#e0a92b;
    --shadow:0 6px 24px rgba(0,0,0,.45);
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);padding:0 0 50px;
  font:15px/1.6 system-ui,-apple-system,"Segoe UI","Noto Sans TC","PingFang TC",sans-serif}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent)}

header{background:var(--panel);border-bottom:1px solid var(--line);padding:12px 18px;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;position:sticky;top:0;z-index:10}
header .t{font-weight:600;margin-right:auto}
main{max-width:900px;margin:20px auto;padding:0 16px}

.btn{padding:8px 14px;border:1px solid var(--line);background:var(--panel);border-radius:8px}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{opacity:.92;color:#fff}
.btn.sm{padding:4px 10px;font-size:13px}
.btn.danger:hover{border-color:var(--danger);color:var(--danger)}
.field{width:100%;padding:11px 13px;background:var(--bg);border:1px solid var(--line);
  border-radius:9px;outline:none}
.field:focus{border-color:var(--accent)}

#login{display:none;place-items:center;min-height:100dvh;padding:20px}
#login form{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;width:100%;max-width:320px;box-shadow:var(--shadow)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.stat .k{color:var(--muted);font-size:12px}
.stat .v{font-size:20px;font-weight:600;margin-top:2px}

.tbl{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.d{display:flex;gap:14px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.d:last-child{border-bottom:none}
.d:hover{background:var(--accent-soft)}
.d .code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:20px;font-weight:700;
  color:var(--accent);flex:none;width:64px}
.d .info{flex:1;min-width:170px}
.d .info .l1{font-size:14px}
.d .info .l2{font-size:12px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.pill{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:1px 8px}
.pill.warn{color:var(--warn);border-color:var(--warn)}
.acts{display:flex;gap:6px;flex:none}
.empty{padding:44px;text-align:center;color:var(--muted)}

dialog{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);
  color:var(--text);padding:0;width:min(440px,calc(100vw - 32px));box-shadow:var(--shadow)}
dialog::backdrop{background:rgba(0,0,0,.45)}
label.lb{display:block;font-size:13px;color:var(--muted);margin:0 0 5px}
.sec{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.sec-t{font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px}
.sec-d{color:var(--muted);font-size:12.5px;margin:3px 0 10px}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(80px);
  background:var(--text);color:var(--bg);padding:9px 18px;border-radius:20px;font-size:14px;
  opacity:0;transition:.25s;pointer-events:none;z-index:60}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

#dlgLog{width:min(560px,calc(100vw - 32px))}
.lg{display:flex;gap:12px;align-items:baseline;padding:10px 20px;border-bottom:1px solid var(--line);font-size:13px}
.lg:last-child{border-bottom:none}
.lg .ip{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;flex:none;min-width:118px}
.lg .it{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.lg .tm{color:var(--muted);font-size:12px;flex:none}
.lg .cd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--accent);font-weight:600;flex:none}