:root { color-scheme: light; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #162019; background: #f2f5f1; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button, input { font: inherit; }
button, .button-link { border: 1px solid #c7d1c8; border-radius: 12px; padding: 11px 16px; background: #fff; color: #162019; cursor: pointer; text-decoration: none; }
button:disabled { opacity: .55; cursor: wait; }
.primary { border-color: #185f3d; background: #185f3d; color: #fff; font-weight: 650; }
.danger { color: #a12a2a; border-color: #e4baba; background: transparent; }
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card, .settings-card { background: #fff; border: 1px solid #dfe6df; border-radius: 22px; box-shadow: 0 18px 55px rgba(23, 54, 36, .08); }
.auth-card { width: min(100%, 430px); padding: 34px; display: grid; gap: 18px; text-align: center; }
.auth-card.wide { width: min(100%, 560px); text-align: left; }
.auth-mark { width: 56px; height: 56px; margin: 0 auto; display: grid; place-items: center; border-radius: 18px; background: #e0f1e7; color: #185f3d; font-size: 28px; font-weight: 750; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 4px; }
h2 { font-size: 20px; }
p { color: #647068; line-height: 1.5; }
.secondary-link { color: #185f3d; text-underline-offset: 3px; }
.feedback { border-radius: 12px; padding: 12px 14px; background: #fff4d8; color: #704f00; text-align: left; }
.feedback.error { background: #fde8e8; color: #8e2424; }
.settings-shell { width: min(100% - 32px, 820px); margin: 40px auto; display: grid; gap: 18px; }
.settings-header, .section-heading, .item { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.settings-header a { color: #185f3d; }
.settings-card { padding: 24px; box-shadow: none; }
.eyebrow { margin: 0 0 4px; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; }
.item-list { display: grid; gap: 10px; }
.item { padding: 14px 0; border-top: 1px solid #edf0ed; }
.item:first-child { border-top: 0; }
.item-meta { color: #69746d; font-size: 13px; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; }
.recovery-codes pre { padding: 18px; border-radius: 14px; background: #f3f6f3; white-space: pre-wrap; line-height: 1.7; user-select: all; }
form { display: grid; gap: 10px; }
label { font-weight: 650; }
input { width: 100%; border: 1px solid #bcc8be; border-radius: 12px; padding: 12px 14px; }
@media (max-width: 600px) { .auth-card { padding: 26px 20px; } .settings-header, .section-heading, .item { align-items: flex-start; flex-direction: column; } }