/* Colours from MultiTool ui/design_system.py (dark / light). */
:root {
  --bg:#f3f5f8; --panel:#ffffff; --panel2:#eef2f6; --border:#d4dbe3; --text:#1c2733;
  --muted:#5f6e7c; --accent:#1f6fd1; --accent-h:#2b7de0; --sel:#cfe2fb;
  --good:#1a7f37; --warn:#9a6700; --bad:#cf222e; --row-alt:#f7f9fb;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0d131a; --panel:#131c25; --panel2:#1a2530; --border:#293847; --text:#dce6ef;
    --muted:#8495a4; --accent:#3a8ee6; --accent-h:#4c9cf0; --sel:#315d7a;
    --good:#3fb950; --warn:#d29922; --bad:#f85149; --row-alt:#111a23;
  }
}
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--text);
  font: 14px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif; }
.hidden { display:none !important; }
.muted { color:var(--muted); }
.err { color:var(--bad); min-height:1.2em; }
button { font:inherit; cursor:pointer; border:1px solid var(--border); background:var(--panel2);
  color:var(--text); border-radius:6px; padding:6px 12px; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.primary:hover { background:var(--accent-h); }
button.link { background:none; border:none; color:var(--accent); padding:0; }
input, select { font:inherit; color:var(--text); background:var(--panel2); border:1px solid var(--border);
  border-radius:6px; padding:7px 9px; width:100%; }

.login { display:flex; align-items:center; justify-content:center; height:100%; padding:16px; }
.login-card { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:28px;
  width:100%; max-width:340px; display:flex; flex-direction:column; gap:14px; }
.login-card h1 { font-size:18px; margin:0 0 4px; }
.login-card label { display:flex; flex-direction:column; gap:4px; color:var(--muted); }

.shell { display:flex; height:100%; }
.nav { width:190px; flex:none; background:var(--panel); border-right:1px solid var(--border);
  display:flex; flex-direction:column; }
.brand { font-weight:600; padding:16px 16px 10px; }
.nav ul { list-style:none; margin:0; padding:4px 8px; flex:1; overflow-y:auto; }
.nav li { padding:8px 10px; border-radius:6px; cursor:pointer; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.nav li:hover { background:var(--panel2); }
.nav li.active { background:var(--sel); }
.nav li.sep { margin-top:8px; border-top:1px solid var(--border); border-radius:0; }
.nav-foot { padding:12px 16px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:4px; }
main { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 20px; border-bottom:1px solid var(--border); background:var(--panel); }
.topbar h2 { margin:0; font-size:17px; font-weight:600; }
.badge { font-size:12px; padding:3px 10px; border-radius:999px; border:1px solid var(--border); white-space:nowrap; }
.badge.ok { color:var(--good); border-color:var(--good); }
.badge.bad { color:var(--bad); border-color:var(--bad); }
.page { flex:1; overflow:auto; padding:20px; }

.card { background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:16px;
  margin-bottom:16px; max-width:1100px; }
.card h3 { margin:0 0 12px; font-size:15px; }
.placeholder { color:var(--muted); }
.kv { display:grid; grid-template-columns:max-content 1fr; gap:6px 18px; }
.kv .k { color:var(--muted); }
.ok-t { color:var(--good); } .bad-t { color:var(--bad); } .warn-t { color:var(--warn); }
table { border-collapse:collapse; width:100%; }
th, td { text-align:left; padding:6px 10px; border-bottom:1px solid var(--border); }
th { color:var(--muted); font-weight:600; background:var(--panel2); }
tr:nth-child(even) td { background:var(--row-alt); }
pre.log { background:var(--panel2); border:1px solid var(--border); border-radius:6px; padding:10px;
  max-height:420px; overflow:auto; font:12px/1.4 Consolas, monospace; white-space:pre-wrap; margin:0; }

.settings { display:flex; gap:16px; align-items:flex-start; }
.settings-list { width:180px; flex:none; background:var(--panel); border:1px solid var(--border);
  border-radius:8px; padding:6px; }
.settings-list div { padding:8px 10px; border-radius:6px; cursor:pointer; }
.settings-list div:hover { background:var(--panel2); }
.settings-list div.active { background:var(--sel); }
.settings-list .grp { color:var(--muted); font-size:12px; padding:10px 10px 4px; cursor:default; }
.settings-list .grp:hover { background:none; }
.settings-body { flex:1; min-width:0; }

@media (max-width: 760px) {
  .shell { flex-direction:column; }
  .nav { width:100%; border-right:none; border-bottom:1px solid var(--border); }
  .nav ul { display:flex; overflow-x:auto; padding:4px 8px; }
  .nav li.sep { margin-top:0; border-top:none; }
  .nav-foot { flex-direction:row; justify-content:space-between; }
  .settings { flex-direction:column; }
  .settings-list { width:100%; }
  .page { padding:16px; }
}