:root{--bg:#1f1f25;--fg:#eee;--muted:#aaa;--card:#2a2f3a;--acc:#5aa9e6;--ok:#2ecc71;--err:#e74c3c;}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,Segoe UI,Roboto,Helvetica,Arial}
.topbar{display:flex;gap:16px;align-items:center;padding:10px 16px;background:#151821;position:sticky;top:0}
.topbar .brand{font-weight:700;color:#fff}
.topbar nav a{color:#cfd8dc;text-decoration:none;margin-right:12px}
.topbar nav a.logout{color:#ff7675}
.topbar nav .spacer{display:inline-block;width:16px}
.topbar nav .me{color:#fff;margin-right:8px}
.wrap{max-width:1100px;margin:24px auto;padding:0 16px}
h1{margin:0 0 16px}
.tbl{width:100%;border-collapse:collapse;background:var(--card);border-radius:10px;overflow:hidden}
.tbl th,.tbl td{padding:10px;border-bottom:1px solid #3b4252}
.tbl th{background:#232733;text-align:left}
.form label{display:block;margin:8px 0}
.form.inline label{display:inline-block;margin-right:12px}
.form input,.form select,.form button{padding:8px;border:1px solid #444;background:#111;color:#fff;border-radius:6px}
.form button{cursor:pointer;background:var(--acc);border-color:transparent}
.alert{padding:10px;border-radius:6px;margin:12px 0}
.alert.ok{background:#123a22;color:#8ef0a0}
.alert.error{background:#3a1212;color:#ff9f9f}
.footer{padding:24px;text-align:center;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.card{display:block;background:var(--card);padding:16px;color:var(--fg);text-decoration:none;border-radius:12px;border:1px solid #3b4252}
.badge{display:inline-block;padding:4px 8px;border-radius:6px}