:root { color-scheme: light; font-family: Inter, "Segoe UI", Arial, sans-serif; background: #f3f5f7; color: #17202a; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top left, #fff8dc 0, transparent 34%), #f3f5f7; }
main { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.card { width: min(440px, 100%); padding: 38px; border: 1px solid #dfe3e8; border-radius: 18px; background: #fff; box-shadow: 0 22px 55px rgba(24, 32, 40, .12); }
.eyebrow { color: #a66a00; font-size: 12px; font-weight: 800; letter-spacing: .16em; }
h1 { margin: 12px 0 8px; font-size: 28px; }
.intro { margin: 0 0 26px; color: #65717d; line-height: 1.65; }
.error { padding: 11px 13px; border-radius: 8px; background: #fff1f0; color: #b42318; font-size: 14px; }
label { display: grid; gap: 8px; margin-top: 18px; color: #46515c; font-size: 14px; font-weight: 600; }
input { width: 100%; padding: 13px 14px; border: 1px solid #cbd2d9; border-radius: 9px; background: #fff; color: #17202a; font: inherit; outline: none; }
input:focus { border-color: #d99a11; box-shadow: 0 0 0 3px rgba(217, 154, 17, .16); }
button { width: 100%; margin-top: 26px; padding: 13px 18px; border: 0; border-radius: 9px; background: #f5bd32; color: #16191d; font: inherit; font-weight: 800; cursor: pointer; }
button:hover { background: #e8aa17; }

.login-footer { margin: 22px 0 0; text-align: center; color: #65717d; font-size: 13px; }
.login-footer a, .privacy a { color: #8a5a00; text-underline-offset: 3px; }
.auth-qr { display: block; width: 260px; max-width: 100%; height: auto; margin: 18px auto; background: white; }
.auth-secret { overflow-wrap: anywhere; font-family: monospace; user-select: all; }
.recovery-codes { padding-left: 24px; line-height: 1.8; font-size: 17px; }
.recovery-codes code { user-select: all; }
.auth-enter { display: block; text-align: center; padding: 14px; border-radius: 9px; background: #f5bd32; color: #16191d; font-weight: 800; text-decoration: none; margin: 20px 0; }
.privacy-page main { display: block; padding: 48px 20px 72px; }
.privacy { width: min(980px, 100%); margin: 0 auto; padding: 54px 62px; border: 1px solid #dfe3e8; border-radius: 18px; background: #fff; box-shadow: 0 22px 55px rgba(24, 32, 40, .10); }
.privacy-header { padding-bottom: 24px; border-bottom: 1px solid #e6e9ed; }
.privacy h1 { margin: 12px 0 14px; font-size: 38px; line-height: 1.2; }
.privacy h2 { margin: 38px 0 12px; color: #20262e; font-size: 21px; line-height: 1.35; }
.privacy p, .privacy li { color: #46515c; font-size: 15px; line-height: 1.82; }
.privacy p { margin: 0 0 14px; }
.privacy ul { margin: 0 0 18px; padding-left: 24px; }
.privacy li { margin: 8px 0; }
.privacy code { display: inline-block; padding: 2px 7px; border-radius: 5px; background: #f1f3f5; color: #20262e; font-size: 13px; }
.privacy .back-link { display: inline-block; margin-top: 4px; font-weight: 700; }
.privacy-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 48px; padding-top: 22px; border-top: 1px solid #e6e9ed; color: #65717d; font-size: 13px; }
@media (max-width: 720px) {
  .privacy-page main { padding: 20px 12px 40px; }
  .privacy { padding: 30px 22px; border-radius: 12px; }
  .privacy h1 { font-size: 30px; }
  .privacy h2 { margin-top: 30px; font-size: 19px; }
  .privacy-footer { display: block; }
  .privacy-footer a { display: block; margin-top: 10px; }
}