:root { --bg:#0f1720; --panel:#16212c; --line:#26384a; --text:#e8eef4; --muted:#9fb1c2; --accent:#f5a623; --green:#2fbf71; --red:#eb5757; --yellow:#f2c94c; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.4 "Segoe UI", Roboto, Arial, sans-serif; }
header { display:flex; gap:12px; align-items:center; padding:10px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.logo { font-weight:800; color:var(--accent); font-size:18px; }
main { padding:16px; max-width:1300px; margin:0 auto; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:16px; }
h2 { margin:0 0 10px; font-size:16px; }
label { display:inline-flex; gap:6px; align-items:center; margin:4px 10px 4px 0; }
input, select, button { font:inherit; color:var(--text); background:#0b1118; border:1px solid var(--line); border-radius:6px; padding:5px 8px; }
button { cursor:pointer; background:#1d2a37; } button:hover { border-color:var(--accent); }
button.danger { border-color:var(--red); color:var(--red); }
.row { display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.scroll { overflow:auto; }
table { border-collapse:collapse; width:100%; } th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); white-space:nowrap; vertical-align:top; }
th { color:var(--muted); font-weight:600; }
.muted { color:var(--muted); } .bad { color:var(--red); } .ok { color:var(--green); } .hidden { display:none !important; }
.st { border-radius:999px; padding:1px 8px; font-weight:700; }
.st-active { color:var(--green); background:rgba(47,191,113,.15); } .st-paused { color:var(--yellow); background:rgba(242,201,76,.15); }
.st-revoked, .st-ended { color:var(--red); background:rgba(235,87,87,.15); } .st-not-used-yet { color:var(--muted); background:#22303d; }
.newkey { font:700 20px/1.2 Consolas, monospace; letter-spacing:2px; color:var(--accent); margin:8px 0; }
.acts button { margin:2px; padding:3px 7px; }