:root { color-scheme: light; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #17343b; background: #f5f5ef; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; min-height: 100dvh; background: radial-gradient(ellipse at 50% 5%, #e3f5ee 0, transparent 65%), #f5f5ef; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.login-shell { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 36px 20px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #17343b; font-size: 20px; font-weight: 650; letter-spacing: -.6px; margin: 0 0 28px; }
.brand strong { font-weight: 450; color: #688076; }
.brand-mark { width: 32px; height: 32px; background: #17343b; display: flex; justify-content: center; align-items: center; gap: 3px; border-radius: 9px; }
.brand-mark i { width: 4px; height: 13px; border-radius: 4px; background: #8ddabf; transform: rotate(24deg); }
.brand-mark i:nth-child(2) { height: 20px; }
.login-card { width: min(100%, 416px); border: 1px solid #dce4dc; border-radius: 18px; padding: 30px; background: #fffefa; box-shadow: 0 16px 50px #183d3010; }
.eyebrow { color: #658174; font-weight: 700; font-size: 10px; letter-spacing: 1.4px; }
h1 { margin: 10px 0 10px; font-size: 25px; line-height: 1.2; font-weight: 650; letter-spacing: -.8px; }
.intro { font-size: 13px; line-height: 1.6; color: #687970; margin: 0 0 24px; }
label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.password-field { display: flex; border: 1px solid #cbd8ce; border-radius: 9px; background: #fff; overflow: hidden; }
.password-field:focus-within { outline: 3px solid #9ddac75c; border-color: #559d85; }
input { width: 100%; min-width: 0; height: 46px; padding: 0 12px; border: 0; outline: 0; font-size: 16px; color: #17343b; background: transparent; }
input[aria-invalid="true"] { background: #fff5f1; }
.toggle-password { align-self: stretch; min-width: 72px; border: 0; background: transparent; color: #61796d; font-size: 11px; padding: 0 11px; }
.toggle-password:hover { background: #f1f6f0; }
.submit { display: flex; justify-content: space-between; align-items: center; width: 100%; border: 0; min-height: 46px; padding: 12px 15px; margin-top: 17px; border-radius: 9px; font-size: 13px; font-weight: 600; color: #fff; background: #173e38; }
.submit:hover { background: #24534a; }
.submit:disabled { cursor: wait; opacity: .65; }
button:focus-visible, a:focus-visible { outline: 3px solid #5bb797; outline-offset: 3px; }
.error { margin: 10px 0 0; padding: 10px 12px; background: #fff0e9; border: 1px solid #f2d5c6; color: #8d4136; border-radius: 7px; font-size: 12px; line-height: 1.5; }
.session-note { font-size: 11px; line-height: 1.6; color: #819087; margin: 18px 0 0; }
.footer-note { margin: 22px 0 0; font-size: 11px; color: #83958a; letter-spacing: .2px; }
[hidden] { display: none !important; }
.auth-tabs { display:flex; gap:5px; padding:4px; margin:0 0 22px; background:#edf2eb; border-radius:9px; }
.auth-tabs button { flex:1; min-height:38px; padding:7px 12px; border:0; background:transparent; border-radius:6px; color:#6b7c70; font-size:12px; }
.auth-tabs button[aria-selected=true] { background:#fffefa; color:#244b3e; box-shadow:0 1px 4px #1230220c; }
.auth-tabs button:disabled,.auth-links button:disabled { opacity:.5; cursor:not-allowed; }
.auth-field { display:block; margin:0 0 15px; }
.auth-field>input { margin-top:8px; border:1px solid #cbd8ce; border-radius:9px; background:#fff; }
.auth-field>input:focus { outline:3px solid #9ddac75c; border-color:#559d85; }
.auth-field small { display:block; font-size:11px; color:#7a8e81; margin-top:6px; font-weight:400; }
.auth-field .password-field { margin-top:8px; }
.auth-links { display:flex; justify-content:space-between; gap:10px; margin-top:14px; }
.auth-links button { padding:4px 0; min-height:32px; border:0; background:none; font-size:11px; color:#507664; }
.notice,.success { padding:10px 12px; border-radius:7px; font-size:12px; line-height:1.6; margin:12px 0 16px; }
.notice { background:#f6f2df; color:#786b37; border:1px solid #e9dfb9; }
.success { background:#edf7ed; color:#3f6f4b; border:1px solid #cfe5d2; }
.continue-link { display:inline-flex; align-items:center; min-height:42px; color:#326a51; font-size:13px; font-weight:600; }
.footer-note { display:flex; flex-direction:column; align-items:center; gap:12px; }
.footer-note a { color:#748b7e; font-size:11px; }
@media(max-width:430px) { .auth-links button { min-height:40px; } .login-card { padding:22px; } .auth-tabs { margin-bottom:18px; } }
@media (max-width: 430px) { .login-shell { padding: 24px 16px; } .login-card { padding: 24px; border-radius: 15px; } h1 { font-size: 24px; } .brand { font-size: 19px; margin-bottom: 24px; } }
@media (max-height: 560px) { .login-shell { justify-content: flex-start; } }