:root { color-scheme: light; font-family: "Manrope", system-ui, sans-serif; color: #102d22; background: #f5f2e9; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
main { width: min(100% - 2rem, 62rem); margin: 2.5rem auto; }
header, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
h1 { margin: 0; font-size: 1.8rem; }
h2 { margin-top: 0; font-size: 1.2rem; }
p { line-height: 1.6; }
.eyebrow { color: #245b49; font-weight: 700; margin: 0 0 .3rem; }
.intro { color: #4c5f63; }
section { padding: 1.5rem; margin-top: 1rem; border: 1px solid #cedbd5; border-radius: 1rem; background: #fffdfa; }
fieldset { display: grid; gap: .65rem; min-width: 0; padding: 0; margin: 0; border: 0; }
label { font-weight: 600; }
input, select, button { font: inherit; border: 1px solid #8b9e96; border-radius: .4rem; padding: .7rem .9rem; }
input, select { width: 100%; background: white; color: inherit; margin-bottom: .5rem; }
button { cursor: pointer; color: #102d22; background: #b8d94a; border-color: #79962b; min-height: 44px; }
button:disabled { cursor: wait; opacity: .6; }
input:focus-visible, select:focus-visible, button:focus-visible, [tabindex="-1"]:focus { outline: 3px solid #3a5e47; outline-offset: 3px; }
#status { min-height: 1.6rem; }
#error { padding: .8rem 1rem; color: #7e231e; background: #fff0ec; border: 1px solid #dfa79f; border-radius: .4rem; }
#totp-secret { display: block; overflow-wrap: anywhere; font: 1.1rem ui-monospace, monospace; background: #f3f6f5; padding: 1rem; margin: .6rem 0 1rem; }
#recovery-codes { font: 1.1rem ui-monospace, monospace; line-height: 1.8; overflow-wrap: anywhere; }
dl { display: grid; grid-template-columns: 1fr auto; gap: .8rem; }
dt { color: #4c5f63; }
dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
noscript { display: block; padding: 1rem; }
.unavailable-features { margin-top: 1.5rem; padding: 1rem; border: 1px dashed #8b9e96; border-radius: .5rem; background: #f5f2e9; }
.unavailable-features h3 { margin-top: 0; }
.unavailable-features p { margin-bottom: 0; }
#settings-navigation { display: flex; flex-wrap: wrap; gap: .6rem; padding-bottom: 1.2rem; border-bottom: 1px solid #cedbd5; }
#settings-navigation button { background: transparent; border-color: #8b9e96; }
#settings-navigation button[aria-current="page"] { background: #102d22; color: #fffdfa; border-color: #102d22; }
.settings-view { padding-top: 1.25rem; }
.settings-view h3 { margin: 0; font-size: 1.1rem; }
.settings-view > p, .secondary-text { color: #4c5f63; }
.record { padding: 1.1rem 0; border-top: 1px solid #cedbd5; overflow-wrap: anywhere; }
.record:first-child { border-top: 0; }
.record h4 { margin: 0 0 .4rem; }
.record p { margin: .4rem 0; }
.record form { margin-top: .8rem; }
.record-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.record-actions button { flex: 0 1 auto; }
.permission-options { display: grid; gap: .6rem; margin: 1rem 0; }
.permission-option { display: flex; align-items: flex-start; gap: .65rem; font-weight: 400; }
.permission-option input { width: 1.2rem; height: 1.2rem; flex: 0 0 1.2rem; margin: .2rem 0 0; accent-color: #245b49; }
.permission-option small { display: block; margin-top: .25rem; color: #4c5f63; }
.danger { background: #fff0ec; border-color: #b64a40; color: #7e231e; }
.empty-state { padding: 1rem 0; color: #4c5f63; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
@media (max-width: 32rem) { main { margin-top: 1rem; } section { padding: 1rem; } header > button { width: 100%; } }