:root{--bg:#0f0f0f;--fg:#fafafa;--card:#171717;--muted:#bdbdbd;--acc:#00d2ff;--bad:#ff5b5b;--good:#4be38a;}
*{box-sizing:border-box;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;}
body{margin:0;background:var(--bg);color:var(--fg);}
a{color:var(--acc);text-decoration:none}
.wrap{max-width:1100px;margin:18px auto;padding:0 12px;}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#111;border-bottom:1px solid #222;position:sticky;top:0}
.brand{font-weight:700}
.navlink{margin-left:12px;color:var(--fg);opacity:.9}
.card{background:var(--card);border:1px solid #222;border-radius:14px;padding:14px;margin:12px 0;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.h1{font-size:22px;margin:0 0 8px 0}
.p{color:var(--muted);margin:6px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #222;padding:10px;text-align:left;vertical-align:top}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid #333;color:var(--muted);font-size:12px}
.bad{color:var(--bad)}
.good{color:var(--good)}
.btn{display:inline-block;background:#222;border:1px solid #333;color:var(--fg);padding:8px 12px;border-radius:10px}
.btn:hover{border-color:#444}
.input{width:100%;padding:10px;border-radius:10px;border:1px solid #333;background:#101010;color:var(--fg)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:720px){.row{grid-template-columns:1fr}}