:root { --ink:#16222e; --paper:#f6f7f5; --line:#d9ddd8; --accent:#0d6b5c; --warn:#a8610a; --bad:#a3262a; --muted:#5d6a73; }
body { background:var(--paper); color:var(--ink); font-family:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
.shell { display:grid; grid-template-columns:220px 1fr; min-height:100vh; }
.side { background:var(--ink); color:#cfd8dc; padding:1.25rem 1rem; position:sticky; top:0; height:100vh; }
.side .brand { color:#fff; font-weight:600; font-size:1.05rem; line-height:1.2; margin-bottom:1.5rem; }
.side .brand small { display:block; color:#8ea1ac; font-weight:400; font-size:.78rem; margin-top:.2rem; }
.side a { display:block; color:#cfd8dc; text-decoration:none; padding:.45rem .6rem; border-radius:4px; font-size:.93rem; }
.side a:hover, .side a.on { background:#223444; color:#fff; }
.side form { margin-top:1.5rem; }
.main { padding:1.75rem 2rem 3rem; max-width:1180px; }
h1.page { font-size:1.45rem; font-weight:600; margin-bottom:1.25rem; }
.mono, code, .key { font-family:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size:.88em; }
.key { letter-spacing:.02em; }
.panel { background:#fff; border:1px solid var(--line); border-radius:6px; padding:1.1rem 1.25rem; margin-bottom:1.25rem; }
.panel h2 { font-size:1rem; font-weight:600; margin-bottom:.8rem; }
.table { --bs-table-bg:transparent; font-size:.92rem; }
.table th { font-weight:600; color:var(--muted); font-size:.82rem; border-bottom-color:var(--line); }
.pill { display:inline-block; padding:.1rem .55rem; border-radius:99px; font-size:.78rem; border:1px solid currentColor; }
.pill.active { color:var(--accent); } .pill.pending, .pill.suspended, .pill.expired, .pill.not_yet_valid, .pill.staged { color:var(--warn); }
.pill.revoked, .pill.rejected { color:var(--bad); } .pill.deactivated, .pill.retired, .pill.approved { color:var(--muted); }
.stat { font-size:1.6rem; font-weight:600; } .stat small { display:block; font-size:.8rem; font-weight:400; color:var(--muted); }
.btn-primary { --bs-btn-bg:var(--accent); --bs-btn-border-color:var(--accent); --bs-btn-hover-bg:#0a574b; --bs-btn-hover-border-color:#0a574b; --bs-btn-active-bg:#0a574b; }
.login-wrap { max-width:380px; margin:12vh auto; }
@media (max-width:820px){ .shell{grid-template-columns:1fr;} .side{position:static;height:auto;} .main{padding:1rem;} }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }