:root{
  --bg:#0f1115; --panel:#171a21; --panel2:#1e222b; --line:#2a2f3a;
  --txt:#e6e8ee; --muted:#9aa3b2; --dim:#6b7280;
  --accent:#c9a227; --accent2:#e0b84a; --danger:#b23b3b;
  --ok:#3a9d5a; --bad:#b23b3b;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);
  font:15px/1.5 "Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--accent2);text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:"Consolas",monospace;background:var(--panel2);padding:1px 5px;border-radius:4px}
code.small{font-size:12px}
.muted{color:var(--muted)}
.dim{color:var(--dim)}
.small{font-size:12px}
.center{text-align:center}

.topbar{display:flex;align-items:center;gap:22px;padding:12px 22px;
  background:var(--panel);border-bottom:1px solid var(--line)}
.topbar .brand{font-weight:700;color:var(--accent);font-size:16px}
.topbar nav{display:flex;gap:16px;flex:1}
.topbar .logout{display:flex;align-items:center;gap:10px}
.topbar .logout span{color:var(--muted);font-size:13px}

.wrap{max-width:1000px;margin:26px auto;padding:0 16px;display:flex;flex-direction:column;gap:20px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px}
.card.narrow{max-width:400px;margin:60px auto 0}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.card h1,.card h2{margin:0}
.card h1{font-size:20px}.card h2{font-size:16px}
h3{margin:18px 0 6px;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}

label{display:block;margin:12px 0;font-size:13px;color:var(--muted)}
input,textarea,select{width:100%;margin-top:5px;padding:9px 11px;background:var(--panel2);
  color:var(--txt);border:1px solid var(--line);border-radius:7px;font:inherit}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent)}
input[readonly]{color:var(--muted)}
textarea{resize:vertical;font-family:"Consolas",monospace}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.row{display:flex;gap:10px;align-items:center;margin-top:12px}

button,.btn{display:inline-block;padding:9px 16px;border-radius:7px;border:1px solid var(--line);
  background:var(--panel2);color:var(--txt);cursor:pointer;font:inherit}
button:hover,.btn:hover{border-color:var(--accent);text-decoration:none}
.primary{background:var(--accent);color:#1a1300;border-color:var(--accent);font-weight:600}
.primary:hover{background:var(--accent2)}
.danger{color:#ffd9d9;border-color:var(--danger)}
.danger:hover{background:var(--danger);border-color:var(--danger)}

table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);font-size:13px}
th{color:var(--muted);font-weight:600}
tbody tr[onclick]{cursor:pointer}
tbody tr[onclick]:hover{background:var(--panel2)}

.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600;text-transform:uppercase}
.badge.active{background:rgba(58,157,90,.18);color:#6fdc94}
.badge.suspended{background:rgba(201,162,39,.18);color:var(--accent2)}
.badge.revoked{background:rgba(178,59,59,.2);color:#ff8f8f}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;text-align:center}
.stat .num{display:block;font-size:26px;font-weight:700}
.stat .lbl{color:var(--muted);font-size:12px}
.stat.ok .num{color:var(--ok)}.stat.bad .num{color:var(--bad)}

.actions{display:flex;flex-wrap:wrap;gap:10px}
.actions form{margin:0}

.alert{padding:11px 14px;border-radius:8px;font-size:14px}
.alert.error{background:rgba(178,59,59,.15);border:1px solid var(--danger);color:#ffb3b3}
.alert.info{background:rgba(58,157,90,.12);border:1px solid var(--ok);color:#9ff0b8}

pre.copy{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:12px;
  overflow:auto;font-family:"Consolas",monospace;font-size:12px;white-space:pre-wrap;word-break:break-all}

@media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}
  .topbar{flex-wrap:wrap;gap:12px}}