:root { --white:#f8f5ef; --muted:rgba(255,255,255,.72); --line:rgba(255,255,255,.42); --glass:rgba(116,101,88,.48); --ink:#625a52; }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { margin:0; color:var(--white); font-family:"DM Sans",sans-serif; background:#aaa092 url("../images/auth-background.png") center/cover fixed no-repeat; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(57,45,35,.18),transparent 42%,rgba(255,248,235,.05)); }
button,input { font:inherit; }
a { color:inherit; text-underline-offset:3px; }
.auth-page { position:relative; z-index:1; min-height:100vh; display:grid; place-items:center; padding:20px; overflow:hidden; }
.auth-card { width:min(100%,410px); display:flex; flex-direction:column; justify-content:center; padding:32px 36px 30px; border:1px solid rgba(255,255,255,.72); border-radius:28px; background:linear-gradient(145deg,rgba(172,158,145,.43),rgba(116,101,88,.42)); box-shadow:0 20px 55px rgba(45,32,23,.19),inset 0 1px rgba(255,255,255,.16); backdrop-filter:blur(13px) saturate(90%); -webkit-backdrop-filter:blur(13px) saturate(90%); }
.monogram { margin:0 auto 21px; font:400 2.15rem/1 "Playfair Display",Georgia,serif; letter-spacing:.13em; transform:translateX(.065em); }
.auth-heading { margin-bottom:22px; text-align:center; }
.auth-heading h1 { margin:0; font:400 clamp(1.9rem,5vw,2.2rem)/1.12 "Playfair Display",Georgia,serif; letter-spacing:-.015em; }
.auth-heading p { margin:8px 0 0; color:var(--muted); font-size:.86rem; line-height:1.45; }
.auth-heading strong { color:var(--white); font-weight:500; }
.auth-form { display:grid; gap:14px; }
.field-group { display:grid; gap:7px; }
.icon-field { position:relative; }
.icon-field>svg { position:absolute; z-index:1; top:50%; left:18px; width:22px; height:22px; fill:none; stroke:rgba(255,255,255,.88); stroke-width:1.55; transform:translateY(-50%); }
.field-group input[type="email"],.field-group input[type="password"],.field-group input[type="text"] { width:100%; height:52px; padding:0 50px; border:1px solid var(--line); border-radius:12px; outline:none; color:var(--white); background:rgba(137,123,110,.1); transition:border-color .2s,box-shadow .2s,background .2s; }
.field-group input::placeholder { color:rgba(255,255,255,.68); }
.field-group input:focus,.otp-box:focus { border-color:rgba(255,255,255,.92); box-shadow:0 0 0 3px rgba(255,255,255,.13); background:rgba(255,255,255,.06); }
.password-wrap input { padding-right:54px!important; }
.password-toggle { position:absolute; z-index:2; top:50%; right:14px; display:grid; place-items:center; padding:6px; border:0; color:white; background:transparent; cursor:pointer; transform:translateY(-50%); }
.password-toggle svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.5; }
.password-toggle.is-visible svg { opacity:.65; }
.form-options { display:flex; align-items:center; justify-content:space-between; padding:4px 1px 2px; color:var(--muted); font-size:.86rem; }
.remember { display:flex; align-items:center; gap:8px; }
.remember input { width:17px; height:17px; margin:0; accent-color:#ece5dc; }
.form-options a { text-decoration-color:rgba(255,255,255,.55); }
.primary-button { width:100%; height:50px; margin-top:2px; border:0; border-radius:12px; color:var(--ink); background:rgba(247,243,237,.88); box-shadow:0 8px 20px rgba(54,40,29,.08); cursor:pointer; font-family:Georgia,serif; font-size:1rem; transition:background .2s,transform .2s; }
.primary-button:hover { background:#fff; transform:translateY(-1px); }
.primary-button:active { transform:translateY(0); }
.footer-prompt,.resend,.back-link { margin:21px 0 0; color:var(--muted); text-align:center; font-size:.8rem; }
.footer-prompt a,.resend a { color:rgba(255,255,255,.9); }
.resend button { padding:0; border:0; color:rgba(255,255,255,.9); background:none; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.form-notice { position:relative; margin:0 0 14px; padding:10px 13px 10px 36px; border:1px solid rgba(255,255,255,.3); border-radius:11px; color:rgba(255,255,255,.88); background:rgba(92,78,66,.22); box-shadow:inset 0 1px rgba(255,255,255,.06); font-size:.78rem; line-height:1.4; backdrop-filter:blur(5px); }
.form-notice::before { content:"i"; position:absolute; top:10px; left:13px; display:grid; place-items:center; width:15px; height:15px; border:1px solid currentColor; border-radius:50%; font:600 .62rem/1 Georgia,serif; opacity:.78; }
.notice-error { border-color:rgba(255,224,215,.35); color:#fff0eb; background:rgba(102,62,50,.2); }
.notice-error::before { content:"!"; }
.notice-success { border-color:rgba(230,244,218,.4); color:#f4faee; background:rgba(67,88,59,.2); }
.notice-success::before { content:"✓"; font-family:inherit; }
.notice-info { color:rgba(255,255,255,.86); }
.field-error { position:relative; display:block; padding-left:12px; color:rgba(255,237,231,.9); font-size:.72rem; line-height:1.35; }
.field-error::before { content:""; position:absolute; top:.48em; left:2px; width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.75; }
.field-error.centered { width:max-content; max-width:100%; margin:9px auto 0; text-align:left; }
.shield-icon { width:38px; height:44px; margin:0 auto 17px; }
.shield-icon svg { width:100%; height:100%; fill:none; stroke:rgba(255,255,255,.94); stroke-linejoin:round; stroke-width:2; }
.logout-icon { width:48px; height:48px; margin:0 auto 20px; }
.logout-icon svg { width:100%; height:100%; fill:none; stroke:rgba(255,255,255,.94); stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }
.logout-heading { margin-bottom:25px; }
.logout-heading p { max-width:32ch; margin-left:auto; margin-right:auto; }
.logout-actions { display:grid; gap:11px; }
.secondary-button { display:grid; place-items:center; width:100%; height:48px; border:1px solid var(--line); border-radius:12px; color:rgba(255,255,255,.88); background:rgba(137,123,110,.1); text-decoration:none; font-size:.9rem; transition:background .2s,border-color .2s; }
.secondary-button:hover { border-color:rgba(255,255,255,.75); background:rgba(255,255,255,.08); }
.otp-fieldset { min-width:0; margin:0; padding:2px 0 0; border:0; }
.otp-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.otp-box { width:100%; aspect-ratio:.92; min-width:0; border:1px solid var(--line); border-radius:12px; outline:none; color:white; background:rgba(137,123,110,.08); text-align:center; font:400 clamp(1.8rem,7vw,2.25rem)/1 "Playfair Display",Georgia,serif; caret-color:white; transition:border-color .2s,box-shadow .2s,background .2s; }
.expiry { margin:5px 0 3px; color:var(--muted); text-align:center; font-size:.82rem; }
.resend { margin-top:20px; }
.back-link { display:block; margin-top:15px; text-decoration:none; }
.back-link:hover { color:white; }
.sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:520px) { body{background-position:43% center}.auth-page{padding:12px;overflow:auto}.auth-card{padding:27px 23px 25px;border-radius:24px}.monogram{margin-bottom:18px}.otp-grid{gap:9px} }
@media (max-height:650px) { .auth-page{padding:10px;overflow:auto}.auth-card{padding-top:24px;padding-bottom:22px}.monogram{margin-bottom:14px}.auth-heading{margin-bottom:16px}.footer-prompt,.resend{margin-top:14px}.back-link{margin-top:10px} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{transition:none!important} }