:root{
    --bg:#0b0d10; --bg-2:#15181d; --line:#1f242b; --line-2:#2a3038;
    --ink:#e6e9ed; --ink-2:#b6bcc4; --ink-3:#7a828c;
    --accent:#5dffaa; --accent-2:#3ad28a; --danger:#ff4060; --warn:#ffae3a;
    --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:22px;margin:0 0 14px;font-weight:600}
h2{font-size:18px;margin:0 0 12px;font-weight:600}
.mono,code{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:12.5px}
.dim{color:var(--ink-3)}
.center{text-align:center}
.inline{display:inline}

.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.brand{font-weight:600;letter-spacing:0.5px}
.nav{display:flex;gap:18px;align-items:center}
.nav a{color:var(--ink-2);font-size:13px}
.nav a.active{color:var(--accent)}
.nav .link{background:none;border:0;color:var(--ink-3);font:inherit;cursor:pointer;padding:0}
.nav .link:hover{color:var(--ink)}

.container{max-width:920px;margin:32px auto;padding:0 22px}

.row{display:flex;align-items:center;gap:8px}
.row.between{justify-content:space-between;margin-bottom:18px}
.row.end{justify-content:flex-end}
.row.gap{gap:10px}

.card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.card.narrow{max-width:420px;margin:48px auto}

.form{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--ink-3);letter-spacing:0.04em;text-transform:uppercase}
.form input,.form select{background:var(--bg);border:1px solid var(--line-2);border-radius:8px;color:var(--ink);padding:11px 14px;font:14px 'JetBrains Mono',monospace;outline:none}
.form input:focus,.form select:focus{border-color:var(--accent-2)}

.btn{background:var(--bg);border:1px solid var(--line-2);color:var(--ink);padding:8px 14px;border-radius:8px;font:13px system-ui;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:var(--ink-3)}
.btn.primary{background:var(--accent);color:#0b0d10;border-color:var(--accent)}
.btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.danger{color:var(--danger);border-color:rgba(255,64,96,0.3)}
.btn.danger:hover{background:rgba(255,64,96,0.08)}
.btn.small{padding:5px 10px;font-size:12px}
.btn.full{width:100%;justify-content:center}

.table{width:100%;border-collapse:collapse;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.table th,.table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.table th{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:0.06em;background:var(--bg)}
.table tr:last-child td{border-bottom:0}

.badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;letter-spacing:0.04em}
.badge.green{background:rgba(93,255,170,0.1);color:var(--accent);border:1px solid rgba(93,255,170,0.25)}
.badge.dim{background:var(--bg);color:var(--ink-3);border:1px solid var(--line-2)}

.empty{padding:48px;text-align:center;color:var(--ink-3);border:1px dashed var(--line-2);border-radius:var(--radius)}

.flash{padding:11px 16px;border-radius:8px;margin-bottom:18px;font-size:13px}
.flash.error{background:rgba(255,64,96,0.08);border:1px solid rgba(255,64,96,0.3);color:var(--danger)}
.flash.success{background:rgba(93,255,170,0.06);border:1px solid rgba(93,255,170,0.25);color:var(--accent)}
.flash.warn{background:rgba(255,174,58,0.06);border:1px solid rgba(255,174,58,0.25);color:var(--warn)}

.modal{background:var(--bg-2);color:var(--ink);border:1px solid var(--line-2);border-radius:var(--radius);padding:24px;max-width:460px;width:90%}
.modal::backdrop{background:rgba(0,0,0,0.6)}