:root { color-scheme: light; --ink:#17343a; --teal:#005f73; --cream:#fff9eb; --line:#c8ddd9; --error:#9b2c2c; font-family: "Chiron GoRound TC", system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: radial-gradient(circle at top, #e1f4ef 0, var(--cream) 48%, #f8ead1 100%); color: var(--ink); }
button, input, select { font: inherit; }
.auth-root { width: min(100%, 52rem); min-height: 100vh; margin: 0 auto; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); display: grid; align-content: center; }
.auth-shell { background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 1.5rem; box-shadow: 0 1.5rem 4rem rgba(23,52,58,.15); overflow: hidden; }
.auth-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.25rem; background:#eff9f6; border-bottom:1px solid var(--line); }
.auth-brand { color:var(--teal); font-weight:800; text-decoration:none; }
.auth-language { display:flex; align-items:center; gap:.5rem; font-size:.9rem; }
.auth-language select { min-height:2.75rem; border:1px solid #85aaa4; border-radius:.75rem; background:white; padding:0 .75rem; }
.auth-panel { width:min(100%, 34rem); margin:0 auto; padding:clamp(1.5rem, 5vw, 3.5rem); }
.auth-panel h1 { margin:0 0 .5rem; font-size:clamp(1.8rem, 6vw, 2.7rem); line-height:1.1; }
.auth-intro { margin:0 0 1.5rem; color:#49666b; line-height:1.65; }
.auth-form { display:grid; gap:1rem; }
.auth-field { display:grid; gap:.45rem; font-weight:750; }
.auth-field input { width:100%; min-height:3rem; border:2px solid #b7cfca; border-radius:.8rem; padding:.7rem .85rem; background:#fff; color:var(--ink); }
.auth-password-wrap { position:relative; }
.auth-password-wrap input { padding-right:4.5rem; }
.auth-password-toggle { position:absolute; right:.35rem; top:50%; transform:translateY(-50%); min-height:2.25rem; border:0; border-radius:.6rem; padding:0 .65rem; background:#e5f2ef; color:var(--teal); font-weight:800; cursor:pointer; }
.auth-primary, .auth-secondary { min-height:3rem; border-radius:.8rem; padding:.75rem 1rem; font-weight:850; cursor:pointer; }
.auth-primary { border:0; background:var(--teal); color:white; }
.auth-secondary { border:2px solid var(--teal); background:white; color:var(--teal); }
.auth-primary[disabled], .auth-secondary[disabled] { opacity:.55; cursor:wait; }
.auth-links { display:flex; flex-wrap:wrap; gap:.75rem 1rem; margin-top:1.25rem; }
.auth-links a { color:var(--teal); font-weight:750; }
.auth-status { margin:1rem 0 0; padding:.9rem 1rem; border-radius:.75rem; background:#e7f5eb; line-height:1.5; }
.auth-status[data-kind="error"] { background:#fdecec; color:var(--error); }
.auth-account-email { overflow-wrap:anywhere; font-size:1.08rem; font-weight:800; }
.auth-loading { justify-self:center; padding:2rem; font-weight:800; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline:4px solid #ffb703; outline-offset:3px; }
@media (max-width: 520px) { .auth-root { padding-inline:.65rem; } .auth-header { align-items:flex-start; flex-direction:column; } .auth-language { width:100%; justify-content:space-between; } .auth-panel { padding:1.4rem 1rem 1.75rem; } .auth-links { flex-direction:column; } }
@media (min-width: 900px) { .auth-shell { border-radius:2rem; } }