:root { --bg:#f4f5f7; --card:#fff; --ink:#1c2430; --muted:#6b7480; --line:#e3e6ea; --ok:#1f9d55; --warn:#d98c00; --bad:#c62828; --pri:#2457c5; }
* { box-sizing:border-box } [hidden] { display:none !important } body { margin:0; font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--ink); background:var(--bg) }
header { display:flex; gap:16px; align-items:center; flex-wrap:wrap; padding:10px 16px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5 }
.brand { font-size:16px } .muted { color:var(--muted) } .small { font-size:12px } .err { color:var(--bad); margin-top:8px }
nav button { background:none; border:0; padding:8px 10px; cursor:pointer; color:var(--muted); border-bottom:2px solid transparent; font-size:14px }
nav button.on { color:var(--ink); border-color:var(--pri) }
.pills { margin-left:auto; display:flex; gap:8px; align-items:center }
.pill { padding:3px 9px; border-radius:12px; background:#eef0f3; font-size:12px } .pill.ok { background:#e3f5e9; color:var(--ok) } .pill.bad { background:#fde8e8; color:var(--bad) } .pill.warn { background:#fff3d6; color:var(--warn) }
main { padding:14px 16px; display:grid; gap:14px } section[data-page] { display:grid; gap:14px }
.row { display:flex; gap:14px; flex-wrap:wrap; align-items:flex-start } .grow { flex:1 1 480px } .col { display:flex; flex-direction:column; gap:6px }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px; min-width:280px } .card.narrow { max-width:360px; margin:60px auto }
.card h3 { margin:0 0 10px; font-size:15px; display:flex; gap:10px; align-items:center; flex-wrap:wrap }
button { border:1px solid var(--line); background:#fff; color:var(--ink); padding:6px 12px; border-radius:7px; cursor:pointer; font-size:13px }
button.primary { background:var(--pri); border-color:var(--pri); color:#fff } button.ghost { background:transparent } button.danger { background:var(--bad); border-color:var(--bad); color:#fff }
button:disabled { opacity:.5; cursor:default } button.mini { padding:2px 7px; font-size:12px }
label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted); margin:4px 0 } label.inline { flex-direction:row; align-items:center; gap:6px }
input, select { padding:6px 8px; border:1px solid var(--line); border-radius:6px; font-size:13px; color:var(--ink); background:#fff }
.actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0 } .sep { width:1px; height:20px; background:var(--line); margin:0 6px }
.filters { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start }
table.t { width:100%; border-collapse:collapse; font-size:12.5px } .t th, .t td { text-align:left; padding:5px 6px; border-bottom:1px solid var(--line); vertical-align:top; white-space:nowrap }
.t th { color:var(--muted); font-weight:500; position:sticky; top:52px; background:#fff } .t td.wrap { white-space:normal } .t tr.sel { background:#eef3ff }
.kv { display:grid; grid-template-columns:auto auto; gap:4px 14px; font-size:13px } .kv b { font-weight:600 }
.st-ok { color:var(--ok) } .st-attention { color:var(--warn) } .st-fail { color:var(--bad); font-weight:600 }
.badge { display:inline-block; padding:1px 6px; border-radius:6px; font-size:11px; background:#eef0f3 }
.badge.ok { background:#e3f5e9; color:var(--ok) } .badge.bad { background:#fde8e8; color:var(--bad) } .badge.warn { background:#fff3d6; color:var(--warn) }
code { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px }
#log { position:fixed; right:12px; bottom:12px; width:420px; max-height:160px; overflow:auto; margin:0; padding:8px 10px; background:#111; color:#cfe; font-size:11.5px; border-radius:8px; opacity:.92; white-space:pre-wrap }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; z-index:20 } .modal .box { background:#fff; border-radius:10px; padding:16px; min-width:360px; max-width:720px; max-height:80vh; overflow:auto }