:root { --fg:#1c1c1c; --muted:#666; --line:#e2e2e2; --accent:#0d5c63; }
* { box-sizing:border-box; }
body { font:15px/1.5 system-ui,sans-serif; color:var(--fg); margin:0; background:#fafafa; }
header { display:flex; justify-content:space-between; align-items:center;
  padding:.8rem 1.2rem; background:#fff; border-bottom:1px solid var(--line); }
header nav a { margin-left:1rem; color:var(--accent); text-decoration:none; }
main { max-width:1000px; margin:1.5rem auto; padding:0 1rem; }
h1 { font-size:1.4rem; } h2 { font-size:1.1rem; margin-top:2rem; }
table { width:100%; border-collapse:collapse; background:#fff; }
th,td { text-align:left; padding:.45rem .6rem; border-bottom:1px solid var(--line); }
th { font-size:.8rem; text-transform:uppercase; color:var(--muted); }
.card { background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:1rem; margin:.8rem 0; }
.card.narrow { max-width:360px; }
label { display:block; margin:.5rem 0; }
input,textarea { width:100%; padding:.4rem; border:1px solid var(--line);
  border-radius:4px; font:inherit; }
button { background:var(--accent); color:#fff; border:0; border-radius:4px;
  padding:.45rem .9rem; cursor:pointer; margin-top:.4rem; }
button.secondary { background:#888; } button.danger { background:#a33; }
form.inline { display:inline; } form.inline button { margin:0 .2rem 0 0; padding:.25rem .6rem; }
.badge { font-size:.72rem; padding:.1rem .45rem; border-radius:10px;
  background:#ddd; margin-left:.3rem; }
.badge.active { background:#cde8d0; } .badge.suspended { background:#ffe3b3; }
.badge.revoked { background:#eee; color:#888; }
.badge.warn { background:#ffe3b3; } .badge.danger { background:#f6c6c6; }
.error { color:#a33; } .ok { color:#2a7; } .hint { color:var(--muted); font-size:.85rem; }
.keybox { background:#111; color:#9fe8a0; padding:.8rem; border-radius:6px;
  overflow-wrap:anywhere; font-size:1.05rem; }