:root { --bg:#f6f7f9; --card:#fff; --text:#1b1f24; --muted:#59636e; --border:#d0d7de; --accent:#c8102e; --accent-ink:#fff; --focus:#0a5cd5;
  --ok:#1a7f37; --warn:#9a6700; --err:#b3261e; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root { --bg:#101317; --card:#181c21; --text:#e6e9ed; --muted:#9aa4ae; --border:#30363d; --accent:#ff5a6e; --accent-ink:#111; --focus:#6aa7ff; --ok:#57c26a; --warn:#d8a630; --err:#ff8077; color-scheme: dark; } }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); }
a { color:var(--focus); }
:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.skip { position:absolute; left:-999px; } .skip:focus { left:8px; top:8px; background:var(--card); padding:8px; z-index:10; }
.topbar { display:flex; flex-wrap:wrap; gap:16px; align-items:center; padding:12px 24px; background:var(--card); border-bottom:1px solid var(--border); }
.brand { font-weight:700; color:var(--text); text-decoration:none; }
nav ul { display:flex; flex-wrap:wrap; gap:4px; list-style:none; margin:0; padding:0; }
nav a { display:block; padding:6px 10px; border-radius:6px; text-decoration:none; color:var(--text); }
nav a[aria-current="page"] { background:var(--bg); font-weight:600; box-shadow: inset 0 -2px 0 var(--accent); }
.signout { margin-left:auto; display:flex; gap:8px; align-items:center; color:var(--muted); font-size:14px; }
main { max-width:960px; margin:0 auto; padding:24px 16px 64px; }
h1 { font-size:1.6rem; margin:0 0 8px; } h2 { font-size:1.2rem; margin:24px 0 8px; }
.muted { color:var(--muted); }
.card { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:16px 20px; margin:16px 0; }
dl.facts { display:grid; grid-template-columns:max-content 1fr; gap:4px 16px; margin:8px 0; } dl.facts dt { color:var(--muted); } dl.facts dd { margin:0; overflow-wrap:anywhere; }
button, .button { font:inherit; padding:8px 14px; border-radius:6px; border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); cursor:pointer; text-decoration:none; display:inline-block; }
button.secondary, .button.secondary { background:transparent; color:var(--text); border-color:var(--border); }
button.danger { background:var(--err); border-color:var(--err); color:#fff; }
button.link { background:none; border:none; padding:0; color:var(--focus); text-decoration:underline; }
button:disabled { opacity:.5; cursor:not-allowed; }
.actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
label { display:block; font-weight:600; margin:12px 0 4px; } .hint { font-weight:400; color:var(--muted); font-size:14px; }
input[type=text], select, textarea { font:inherit; width:100%; padding:8px; border:1px solid var(--border); border-radius:6px; background:var(--card); color:var(--text); }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:top; font-size:15px; }
th { color:var(--muted); font-weight:600; }
.table-wrap { overflow-x:auto; }
.notice { padding:10px 14px; border-radius:8px; border:1px solid var(--border); background:var(--card); }
.notice-error { border-color:var(--err); color:var(--err); } .notice-success { border-color:var(--ok); }
.badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:13px; border:1px solid var(--border); white-space:nowrap; }
.badge-accepted, .badge-active, .badge-approved { border-color:var(--ok); color:var(--ok); }
.badge-unknown, .badge-pending, .badge-reauth_required { border-color:var(--warn); color:var(--warn); }
.badge-failed, .badge-revoked { border-color:var(--err); color:var(--err); }