/* Minimal, clean UI — no frameworks */
:root{
  --fg:#111; --bg:#fff; --muted:#666; --border:#e6e6e6; --radius:14px; --accent:#0b5fff; --wrap:1100px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;color:var(--fg);background:var(--bg);}
.wrapper{max-width:var(--wrap);margin:auto;padding:20px}
header.wrapper{padding-top:36px}
h1{margin:0;font-size:1.9rem}
.sub{margin:.25rem 0 1rem;color:var(--muted)}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0 8px}
.input{padding:10px 12px;border:1px solid var(--border);border-radius:10px;min-width:180px;flex:1}
.input[type=search]{min-width:280px;flex:2}
.button{padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#fafafa;cursor:pointer}
.button:hover{background:#f2f6ff;border-color:#d0ddff}
.count{color:var(--muted);margin:8px 0 12px}
.table-wrap{border:1px solid var(--border);border-radius:var(--radius);overflow:auto}
table{border-collapse:separate;border-spacing:0;width:100%}
thead th{position:sticky;top:0;background:#f8f9fb;border-bottom:1px solid var(--border);padding:10px 12px;text-align:left;font-weight:600}
tbody td{border-bottom:1px solid #f3f3f3;padding:12px}
tbody tr:hover{background:#fafcff}
th.compact, td.compact{width:70px;white-space:nowrap}
td,th{vertical-align:top}
.footer{color:var(--muted);padding-bottom:54px}
code{background:#f6f6f6;border:1px solid #eee;border-radius:6px;padding:0 .3em}
@media (max-width:720px){
  .input[type=search]{min-width:100%;flex:1 1 100%}
  .toolbar{gap:6px}
}