:root {
  color-scheme: light;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 100%;
  --ink: #132a2a;
  --muted: #405c5b;
  --brand: #075e54;
  --brand-dark: #043c36;
  --accent: #b45309;
  --danger: #9f1239;
  --surface: #ffffff;
  --canvas: #f3f7f6;
  --line: #b8cbc7;
  --focus: #005fcc;
}
* { box-sizing: border-box; }
html { background: var(--canvas); color: var(--ink); line-height: 1.65; }
body { margin: 0; min-width: 18rem; }
a { color: #064f94; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: .16em; }
.skip-link { position: fixed; inset-inline-start: 1rem; top: -8rem; z-index: 10; background: #fff; color: #000; padding: .75rem 1rem; }
.skip-link:focus { top: 1rem; }
:focus-visible { outline: .2rem solid var(--focus); outline-offset: .18rem; }
header { background: var(--brand-dark); color: #fff; }
.header-inner, main, footer { width: min(72rem, calc(100% - 2rem)); margin-inline: auto; }
.header-inner { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-block: 1rem; }
.brand { color: #fff; font-weight: 700; font-size: 1.2rem; text-decoration: none; }
nav ul { display: flex; flex-wrap: wrap; gap: .35rem 1rem; list-style: none; padding: 0; margin: 0; }
nav a { color: #fff; }
main { padding-block: 1.5rem 3rem; }
footer { color: var(--muted); padding-block: 1rem 2rem; }
h1 { font-size: clamp(1.55rem, 4vw, 2.2rem); line-height: 1.25; }
h2 { font-size: 1.35rem; }
.card { background: var(--surface); border: .08rem solid var(--line); border-radius: .75rem; padding: clamp(1rem, 3vw, 1.5rem); margin-block: 1rem; box-shadow: 0 .15rem .5rem #193a3420; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.metric { font-size: 1.5rem; font-weight: 700; display: block; }
.muted { color: var(--muted); }
label { display: block; font-weight: 700; margin-block: .8rem .25rem; }
input, select, button, .button { font: inherit; min-height: 2.75rem; border-radius: .35rem; }
input, select { width: 100%; max-width: 36rem; border: .12rem solid #68847e; padding: .55rem .7rem; background: #fff; color: #111; }
input[type="checkbox"] { width: 1.5rem; min-height: 1.5rem; vertical-align: middle; margin-inline-end: .45rem; }
button, .button { display: inline-flex; align-items: center; justify-content: center; border: .12rem solid var(--brand); padding: .5rem 1rem; background: var(--brand); color: #fff; font-weight: 700; text-decoration: none; cursor: pointer; }
button:hover, .button:hover { background: var(--brand-dark); }
.button.secondary { color: var(--brand-dark); background: #fff; }
.button.danger, button.danger { background: var(--danger); border-color: var(--danger); }
.actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-block: 1rem; }
.actions form { margin: 0; }
.alert { border: .12rem solid #805400; border-inline-start-width: .45rem; background: #fff4d6; padding: .85rem 1rem; margin-block: 1rem; }
.alert.error { border-color: var(--danger); background: #fff1f2; }
.alert.success { border-color: #087443; background: #e8fff4; }
.code { direction: ltr; unicode-bidi: isolate; display: block; overflow-wrap: anywhere; font: 700 1rem Consolas, monospace; background: #eef5f3; border: .1rem dashed #56736d; padding: 1rem; }
.table-wrap { overflow-x: auto; border: .08rem solid var(--line); border-radius: .5rem; background: #fff; }
table { width: 100%; border-collapse: collapse; min-width: 42rem; }
th, td { text-align: start; vertical-align: top; padding: .75rem; border-bottom: .08rem solid var(--line); }
th { background: #e4efed; }
.status { display: inline-block; border-radius: 99rem; padding: .15rem .65rem; font-weight: 700; background: #dcebe8; color: #163e37; }
.status.revoked { background: #ffe4e6; color: #881337; }
dl { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; gap: .45rem 1rem; }
dt { font-weight: 700; }
dd { margin: 0; overflow-wrap: anywhere; }
.danger-zone { border-color: #e2a3af; }
@media (max-width: 38rem) { dl { grid-template-columns: 1fr; } dd { margin-bottom: .6rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }
@media (forced-colors: active) { button, .button, .card, .alert { border: .12rem solid CanvasText; } }