:root { color-scheme: light; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #192229; background: #f5f7f8; }
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.55; }
a { color: #0a5d67; }
.site-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; max-width: 72rem; margin: 0 auto; padding: 1.5rem 1.25rem; }
.brand { color: #192229; font-weight: 750; text-decoration: none; letter-spacing: -.02em; }
.eyebrow { color: #557079; font-size: .76rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.page-shell { max-width: 72rem; margin: 0 auto; padding: 3rem 1.25rem 6rem; }
.hero { max-width: 48rem; padding: 2rem 0 4rem; }
.hero.compact { padding-bottom: 2rem; }
h1 { max-width: 13ch; margin: .4rem 0 1rem; font-size: clamp(2.5rem, 6vw, 5rem); line-height: .98; letter-spacing: -.055em; }
h2 { margin: 0; font-size: 1.65rem; letter-spacing: -.025em; }
h3 { margin: .8rem 0 .4rem; font-size: 1.25rem; }
.lede { max-width: 42rem; color: #557079; font-size: 1.15rem; }
.section-heading, .card-topline, .state-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.section-heading { margin-bottom: 1rem; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.card, .notice { border: 1px solid #d9e1e3; border-radius: .9rem; background: #fff; padding: 1.25rem; box-shadow: 0 .4rem 1.8rem rgba(25,34,41,.04); }
.card p { color: #557079; }
.card-topline, .muted { color: #6b7c82; font-size: .9rem; }
.tag, .status { display: inline-flex; border-radius: 999px; padding: .2rem .55rem; font-size: .72rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.tag { color: #36535a; background: #eaf0f1; }
.status-disabled { color: #6b3f3f; background: #f7e5e5; }
.status-enabled { color: #1d5a42; background: #e2f2e9; }
.status-maintenance { color: #795c18; background: #fff2cb; }
.notice { max-width: 48rem; color: #36535a; background: #eef7f8; }
.form-card { max-width: 34rem; border: 1px solid #d9e1e3; border-radius: .9rem; background: #fff; padding: 1.5rem; box-shadow: 0 .4rem 1.8rem rgba(25,34,41,.04); }
label { display: grid; gap: .35rem; margin: 1rem 0; font-weight: 650; }
input { width: 100%; border: 1px solid #aebdc1; border-radius: .45rem; padding: .7rem .75rem; font: inherit; }
textarea { width: 100%; min-height: 18rem; border: 1px solid #aebdc1; border-radius: .45rem; padding: .7rem .75rem; font: ui-monospace, SFMono-Regular, Consolas, monospace; line-height: 1.45; }
.stacked-form { max-width: 58rem; }
button, .button-link { display: inline-block; border: 0; border-radius: .45rem; background: #0a5d67; color: white; padding: .7rem 1rem; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.error-list { border-left: .25rem solid #b33434; background: #fff0f0; padding: .65rem 1rem; color: #7b2020; }
.secret-value { overflow-wrap: anywhere; padding: .8rem; background: #f1f5f5; }
.recovery-codes { columns: 2; line-height: 2; }
.inline-form { margin-top: 2rem; }
.state-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.state-actions button { padding: .5rem .7rem; font-size: .88rem; }
.state-actions button:disabled { cursor: not-allowed; opacity: .55; }
@media (max-width: 600px) { .site-header, .section-heading, .state-row { align-items: flex-start; flex-direction: column; } .page-shell { padding-top: 1.5rem; } }