:root { --steel: #D3D8DA; --paper: #FBFBF8; --ink: #1D2327; --muted: #4E585E; --safety: #F2C230; --stamp: #B3261E; --ok: #2F7D32; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--steel); color: var(--ink); font: 400 1.05rem/1.6 "Literata", Georgia, serif; }
main { max-width: 760px; margin: 0 auto; padding: 32px 16px 64px; }
h1, h2, h3, label, button, .btn { font-family: "Archivo", "Arial Narrow", sans-serif; }
h1 { font-stretch: 75%; font-weight: 900; font-size: clamp(2rem, 6vw, 3rem); line-height: 1; margin: 0 0 .4em; }
h2 { font-stretch: 85%; font-weight: 800; margin: 1.4em 0 .4em; }
.card { background: var(--paper); border: 2px solid var(--ink); padding: 20px; margin: 16px 0; }
label { display: block; font-weight: 700; margin: 14px 0 4px; }
.hint { display: block; font: italic .9rem/1.4 "Literata", Georgia, serif; color: var(--muted); font-weight: 400; }
input, textarea, select { width: 100%; font: inherit; padding: 10px 12px; border: 2px solid var(--ink); background: #fff; }
textarea { min-height: 84px; }
button, .btn { display: inline-block; font-weight: 800; font-size: 1.05rem; background: var(--safety); color: var(--ink); border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink); padding: 12px 18px; cursor: pointer; margin-top: 16px; text-decoration: none; }
button.secondary { background: var(--paper); }
button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.error { color: var(--stamp); font-weight: 700; font-size: .95rem; }
.ok { color: var(--ok); font-weight: 700; }
.plans { display: grid; gap: 10px; }
.plans label { font-weight: 400; display: flex; gap: 10px; align-items: flex-start; border: 2px solid var(--ink); background: #fff; padding: 12px; margin: 0; }
.plans input { width: auto; margin-top: 5px; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
td, th { text-align: left; padding: 8px 6px; border-bottom: 1px solid #c9cfd2; vertical-align: top; }
.pill { font: 700 .8rem "Archivo", sans-serif; padding: 2px 8px; border: 2px solid var(--ink); white-space: nowrap; }
.pill.active { background: #DDEFD9; } .pill.pending_registration { background: #FFF1C2; } .pill.paused { background: #eee; }
.hp { position: absolute; left: -9999px; }
@media (max-width: 560px) { .hide-sm { display: none; } }