:root { --bg:#0b1220; --card:#111a2e; --text:#e6edf3; --muted:#9fb0c2; --accent:#4ea1ff; --danger:#ff5c7a; --ok:#34d399; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif; background: linear-gradient(180deg,#070b14,#0b1220); color: var(--text); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { width: min(980px, calc(100% - 32px)); margin: 0 auto; }
.topbar { position: sticky; top: 0; backdrop-filter: blur(8px); background: rgba(7,11,20,.7); border-bottom: 1px solid rgba(255,255,255,.06); }
.topbar .container { display:flex; align-items:center; justify-content:space-between; padding: 14px 0; }
.brand { font-weight: 700; }
.nav a { margin-left: 14px; color: var(--text); opacity:.9; }
.nav a:hover { opacity:1; }
main.container { padding: 22px 0 50px; }
.card { background: rgba(17,26,46,.85); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
label { display:block; font-size: .92rem; color: var(--muted); margin-bottom: 6px; }
input, textarea, select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(7,11,20,.6); color: var(--text); outline: none; }
textarea { min-height: 88px; resize: vertical; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(78,161,255,.18); color: var(--text); cursor:pointer; }
.btn.primary { background: rgba(78,161,255,.28); border-color: rgba(78,161,255,.35); }
.btn.danger { background: rgba(255,92,122,.15); border-color: rgba(255,92,122,.35); }
.btn.ok { background: rgba(52,211,153,.15); border-color: rgba(52,211,153,.35); }
.flash { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.28); }
.footer { border-top: 1px solid rgba(255,255,255,.06); padding: 18px 0; color: var(--muted); }
.actions { display:flex; flex-wrap:wrap; gap: 10px; margin-top: 12px; }
.table { width:100%; border-collapse: collapse; overflow:hidden; border-radius: 12px; border:1px solid rgba(255,255,255,.06); }
.table th, .table td { padding: 10px 10px; border-bottom: 1px solid rgba(255,255,255,.06); text-align:left; vertical-align: top; }
.table th { color: var(--muted); font-size: .9rem; }
.pill { display:inline-block; padding: 4px 10px; border-radius: 999px; border:1px solid rgba(255,255,255,.12); }
.pill.active { border-color: rgba(52,211,153,.45); color: rgba(52,211,153,.95); }
.pill.revoked { border-color: rgba(255,92,122,.45); color: rgba(255,92,122,.95); }
.small { font-size: .88rem; color: var(--muted); }
.grid { display:grid; gap: 16px; }
.grid.two { grid-template-columns: 1fr; }
@media (min-width: 880px){ .grid.two { grid-template-columns: 1fr 1fr; } }
.row { display:grid; gap: 10px; }
@media (min-width: 640px){ .row.cols2 { grid-template-columns: 1fr 1fr; } }