:root { --fg:#111; --bg:#fff; --muted:#666; --card:#f7f7f8; --line:#e5e7eb; --brand:#111; }
*{box-sizing:border-box} body{margin:0;font:14px/1.4 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--fg);background:var(--bg)}
a{color:#0b65c2;text-decoration:none} a:hover{text-decoration:underline}
.topbar{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0}
.brand{font-weight:700}
nav a{margin-right:10px} nav a.active{font-weight:700}
.content{padding:16px}
.cards{display:flex;gap:12px;flex-wrap:wrap}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px;min-width:160px}
.big{font-size:28px;font-weight:700}
.muted{color:var(--muted)}
.table{width:100%;border-collapse:collapse;margin-top:12px}
.table th,.table td{border:1px solid var(--line);padding:6px;text-align:left}
.search{display:flex;gap:8px;margin:8px 0}
.login{display:flex;min-height:100vh;align-items:center;justify-content:center;background:#fafafa}
.login .card{width:360px;max-width:92%;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}
.err{color:#a00;margin:.5em 0}
button{background:#111;color:#fff;border:0;border-radius:8px;padding:8px 12px;cursor:pointer}
button:hover{background:#333}
input{width:100%;padding:8px;border:1px solid var(--line);border-radius:8px}