:root { --bg:#f6f7f9; --fg:#1b1f24; --muted:#5f6b7a; --card:#fff; --line:#e1e5ea; --ok:#1a7f37; --warn:#9a6700; --bad:#cf222e; --accent:#0969da; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f1318; --fg:#e6edf3; --muted:#9aa7b4; --card:#161b22; --line:#30363d; --ok:#3fb950; --warn:#d29922; --bad:#f85149; --accent:#58a6ff; } }
* { box-sizing:border-box }
body { margin:0; font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--fg) }
header { display:flex; align-items:center; gap:20px; padding:10px 20px; background:var(--card); border-bottom:1px solid var(--line) }
header .brand { font-weight:700 }
header nav a { margin-right:14px; color:var(--accent); text-decoration:none }
header nav a.active { font-weight:700; text-decoration:underline }
header form { margin-left:auto }
main { padding:20px; max-width:1300px; margin:0 auto }
h1 { font-size:20px; margin:0 0 16px }
h2 { font-size:15px; margin:20px 0 8px; color:var(--muted) }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px }
.card .label { color:var(--muted); font-size:12px }
.card .value { font-size:24px; font-weight:600 }
.card .sub { font-size:12px; color:var(--muted) }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden }
th, td { text-align:left; padding:7px 10px; border-bottom:1px solid var(--line); vertical-align:top; font-size:13px }
th { background:var(--bg); color:var(--muted); font-weight:600 }
td.mono, .mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px }
.badge { display:inline-block; padding:1px 8px; border-radius:10px; font-size:12px; border:1px solid var(--line) }
.badge.ok { color:var(--ok); border-color:var(--ok) } .badge.bad { color:var(--bad); border-color:var(--bad) } .badge.warn { color:var(--warn); border-color:var(--warn) }
.filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; align-items:end }
.filters label { display:flex; flex-direction:column; font-size:12px; color:var(--muted) }
input, select, button { font:inherit; padding:5px 8px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--fg) }
button { cursor:pointer } button.primary { background:var(--accent); color:#fff; border-color:var(--accent) }
button.small { padding:2px 8px; font-size:12px }
.pager { display:flex; gap:10px; align-items:center; margin-top:12px; color:var(--muted) }
.flash { padding:8px 12px; border-radius:6px; margin-bottom:12px } .flash.ok { background:rgba(26,127,55,.12); color:var(--ok) } .flash.bad { background:rgba(207,34,46,.12); color:var(--bad) }
.login { max-width:340px; margin:80px auto; }
.login input { width:100%; margin:6px 0 12px }
.muted { color:var(--muted) }
dl { display:grid; grid-template-columns:220px 1fr; gap:4px 12px } dt { color:var(--muted) } dd { margin:0 }