:root{
  --bg:#eef3f9; --paper:#fff; --ink:#15243a; --ink-2:#526176; --line:#cfdbea;
  --blue:#1a56b8; --blue-dark:#123f8a; --blue-light:#e3ecf9;
  --accent:var(--blue); --accent-ink:#fff; --ok:#2f7d4f; --err:#b3261e; --err-bg:#fbeae8;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 Roboto,"Segoe UI",system-ui,-apple-system,sans-serif}
a{color:var(--accent)}
h1{font-size:1.25rem;font-weight:600;margin:0 0 .75rem}
.top{display:flex;align-items:center;gap:1.5rem;padding:.7rem 1.25rem;background:var(--blue);color:#fff}
.brand{font-weight:700;letter-spacing:.02em;color:#fff}
.top nav{display:flex;gap:1rem;flex:1}
.top nav a{text-decoration:none;color:rgba(255,255,255,.75);padding:.25rem 0;border-bottom:2px solid transparent}
.top nav a.on{color:#fff;border-color:#fff}
.top .out{font-size:.9rem;color:rgba(255,255,255,.8)}
main{max-width:1000px;margin:1.5rem auto;padding:0 1rem}
section{margin-bottom:1.75rem}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:1.25rem 1.5rem}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.5rem}
.bar-right{display:flex;align-items:center;gap:1rem}
.count{color:var(--ink-2);font-weight:400;font-size:1rem;margin-left:.25rem}
.muted{color:var(--ink-2);font-size:.9rem}
.btn,button{background:var(--accent);color:var(--accent-ink);border:0;border-radius:5px;padding:.5rem 1rem;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover,button:hover{background:var(--blue-dark)}
button.link{background:none;color:var(--accent);padding:0;font-weight:400}
.btn-link{margin-left:1rem;color:var(--ink-2)}
.form .row{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:.9rem}
.form label{flex:1;display:flex;flex-direction:column;gap:.25rem;font-size:.9rem;color:var(--ink-2);min-width:160px}
.form label.w-s{flex:0 0 140px}
.form label small{font-weight:400}
.form input{font:inherit;color:var(--ink);padding:.5rem .6rem;border:1px solid var(--line);border-radius:5px;background:var(--paper)}
.form input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.form input:invalid:not(:placeholder-shown){border-color:var(--err)}
.actions{margin-top:.5rem}
table{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);border-radius:6px;overflow:hidden}
th,td{text-align:left;padding:.65rem .9rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.85rem;color:var(--blue-dark);font-weight:600;background:var(--blue-light)}
tr:last-child td{border-bottom:0}
tr.off td{color:var(--ink-2)}
.tag{font-size:.75rem;background:var(--blue-light);border:1px solid var(--line);border-radius:3px;padding:0 .4rem;margin-left:.4rem}
.mono{font-family:Consolas,Menlo,monospace;font-size:.9rem}
.ops{white-space:nowrap;text-align:right}
.ops a,.ops button{margin-left:.75rem}
.inline{display:inline}
.flash{background:#e8f3ec;color:var(--ok);border:1px solid #c5e0cf;border-radius:5px;padding:.5rem .9rem;margin:0 0 1rem}
.err{background:var(--err-bg);color:var(--err);border-radius:5px;padding:.4rem .8rem;margin:0 0 .6rem;font-size:.9rem}
.empty{color:var(--ink-2);padding:2rem;text-align:center;background:var(--paper);border:1px dashed var(--line);border-radius:6px}
body.login{display:grid;place-items:center;min-height:100vh}
.login-box{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:2rem;width:320px;display:flex;flex-direction:column;gap:.75rem}
.login-box h1{text-align:center;color:var(--blue)}
.login-box input{font:inherit;padding:.6rem;border:1px solid var(--line);border-radius:5px}
@media (max-width:640px){
  .form label.w-s{flex:1}
  .ops{white-space:normal;text-align:left}
  th:nth-child(3),td:nth-child(3){display:none}
}