html, body { background: #efeee8; color: #282b27; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif; }
.auth-screen { padding: 48px 22px; background: radial-gradient(ellipse at 12% 12%, #e7d9b980, transparent 52%), radial-gradient(ellipse at 90% 85%, #c7d6cf70, transparent 50%), #efeee8; }
.auth-panel { width: min(100%, 460px); padding: 36px 40px 24px; border: 1px solid #fff; border-radius: 26px; background: #ffffffd9; box-shadow: 0 24px 80px #343c2810, 0 2px 8px #343c2805; }
.auth-panel-top { justify-content: space-between; gap: 16px; }
.auth-logo { text-decoration: none; font-size: 27px; font-weight: 800; letter-spacing: -.03em; color: #2f332d; }
.auth-logo span { color: #a9893c; }
.auth-edition { font-size: 10px; letter-spacing: .04em; color: #777c71; }
.auth-modes { display: flex; gap: 4px; margin-top: 30px; padding: 4px; border-radius: 12px; background: #eeefe9; }
.auth-modes button { flex: 1; padding: 11px; border: 0; border-radius: 9px; background: transparent; color: #74796d; font: inherit; font-size: 13px; cursor: pointer; transition: color .2s, background .2s, box-shadow .2s; }
.auth-modes button[aria-pressed=true] { background: #fff; color: #2d342b; box-shadow: 0 2px 6px #2632200c; }
.auth-eyebrow { margin: 30px 0 10px; color: #947736; font-size: 9px; letter-spacing: .18em; }
.auth-panel h1 { font-size: 30px; font-weight: 600; letter-spacing: -.035em; }
.auth-lead { color: #777c72; font-size: 13px; line-height: 1.8; margin: 12px 0 28px; }
#auth-form { gap: 19px; }
#auth-form label { gap: 9px; color: #4c5448; font-size: 12px; font-weight: 500; }
#auth-form input { padding: 15px 14px; border: 1px solid #dadfd5; border-radius: 11px; background: #fafbf8; color: #283023; font-size: 16px; }
#auth-form input::placeholder { color: #9a9f95; font-size: 13px; }
#auth-form input:focus-visible { border-color: #a5915f; box-shadow: 0 0 0 3px #b8a27118; background: #fff; }
.auth-password-field { position: relative; display: block; }
#auth-form .auth-password-field input { padding-right: 65px; }
#auth-reveal { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); padding: 9px; border: 0; background: transparent; color: #6f7767; font: inherit; font-size: 11px; cursor: pointer; }
.auth-submit { margin-top: 5px; padding: 16px; background: #303c30; color: #fff; border-radius: 11px; font-size: 13px; letter-spacing: .05em; box-shadow: 0 5px 12px #303c3014; }
.auth-submit:hover { background: #43513e; }
.auth-submit:disabled { cursor: wait; }
.auth-hint { margin: -5px 0 0; font-size: 11px; color: #7b806f; line-height: 1.7; }
.auth-message { color: #9b4c36; font-size: 12px; line-height: 1.6; min-height: 19px; margin: 14px 0 0; }
.auth-toggle { color: #68715f; font-size: 12px; }
.auth-footnote { margin: 20px 0 0; padding-top: 20px; border-top: 1px solid #e9ece5; text-align: center; font-size: 10px; letter-spacing: .2em; color: #909687; }
button:focus-visible, a:focus-visible { outline: 2px solid #967d43; outline-offset: 4px; }
.auth-ready .auth-panel > :not(form), .auth-ready #auth-form > * { animation-duration: .5s; }
@media (max-width: 480px) { .auth-screen { padding: 24px 16px; } .auth-panel { padding: 28px 24px 22px; border-radius: 22px; } .auth-edition { font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }