/* Inset inputs inspired by coslac / Smit-Prajapati, Uiverse (MIT).
   https://uiverse.io/coslac/silly-grasshopper-20 */
body.inner-page :is(#auth-panel,#profile-form,#password-form) input{
 width:100%;box-sizing:border-box;min-height:52px;border:1px solid #ffffff09;border-radius:14px;
 background:#202225;color:#f5f5f5;padding:14px 18px;font:inherit;
 box-shadow:inset 5px 5px 10px #101113,inset -5px -5px 10px #34373b;
 transition:border-color .2s,box-shadow .2s;
}
body.inner-page :is(#auth-panel,#profile-form,#password-form) input:focus{
 border-color:#ffd32999;outline:2px solid #ffd329;outline-offset:3px;
 box-shadow:inset 3px 3px 7px #101113,inset -3px -3px 7px #34373b;
}
body.inner-page #auth-panel .google-login{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:48px;padding:12px 18px;background:#fff;color:#202124;border:1px solid #dadce0;border-radius:12px;font:500 15px/1.4 Inter,Arial,sans-serif;margin:20px 0}
body.inner-page #auth-panel .google-login:hover{background:#f1f3f4}
.google-login:disabled{opacity:.6;cursor:not-allowed}
.auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:#bcbdb6;font-size:12px}
.auth-divider::before,.auth-divider::after{content:"";height:1px;flex:1;background:#ffffff20}
@media(prefers-reduced-motion:reduce){body.inner-page :is(#auth-panel,#profile-form,#password-form) input{transition:none}}
body.inner-page #auth-panel .google-availability{font-size:12px;line-height:1.5;color:#c3c3ca;margin:-8px 0 20px}

/* Compact login composition adapted from micaelgomestavares / JohnnyCSilva.
   https://uiverse.io/micaelgomestavares/dull-walrus-66 */
body.account-page main>.eyebrow{margin-left:auto;margin-right:auto}
body.account-page main>h1{text-align:center;font-size:clamp(30px,5vw,42px)}
body.account-page main>.message{max-width:480px;margin:16px auto 20px;font-size:13px;padding:12px 14px}
body.account-page #auth-panel{width:100%;max-width:480px;margin:0 auto;padding:24px;background:#18191c;border:1px solid #ffffff1c;border-radius:20px;box-shadow:0 16px 40px #0003;backdrop-filter:none;-webkit-backdrop-filter:none}
body.account-page #auth-panel::before{content:none}
body.account-page #auth-title{font:600 26px/1.2 Inter,Arial,sans-serif;letter-spacing:-.04em;text-transform:none;margin:0 0 8px}
body.account-page #auth-help{font-size:12px;line-height:1.5;color:#bfc1c7;margin:0 0 12px}
body.account-page #auth-form label{font-size:13px;line-height:1.4;font-weight:600;margin:12px 0 6px;color:#f1f1f3}
body.account-page #auth-form .auth-input{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;background:#202226;border:1.5px solid #ffffff20;border-radius:10px;transition:border-color .2s,background .2s}
body.account-page #auth-form .auth-input:focus-within{border-color:#ffd329;outline:2px solid #ffd32940;outline-offset:2px;background:#23252a}
body.account-page #auth-panel .auth-input input{flex:1;min-width:0;width:100%;height:46px;min-height:46px;margin:0;padding:12px 0;border:0;border-radius:0;outline:none;box-shadow:none;background:transparent;color:#f5f5f5;font-size:16px}
body.account-page #auth-panel input::placeholder{color:#969ba5;font-size:14px;opacity:1}
.auth-field-icon{flex:0 0 20px;color:#b2b7c1;pointer-events:none}
body.account-page #auth-panel .password-toggle{flex:0 0 44px;width:44px;height:44px;min-height:44px;margin:0 -9px 0 0;padding:10px;border:0;border-radius:8px;background:transparent;color:#b2b7c1;box-shadow:none}
body.account-page #auth-panel .password-toggle:hover{color:#ffd329;background:#ffffff08}
.password-toggle .eye-slash{display:none}
.password-toggle[aria-pressed=true] .eye-slash{display:block}
body.account-page #auth-panel .auth-text-button{min-height:32px;padding:6px 0;border:0;background:none;color:#d6bb68;font-size:12px;font-weight:500;border-radius:4px;text-align:left}
body.account-page #auth-panel .auth-text-button:hover{color:#ffe08a;text-decoration:underline;text-underline-offset:4px}
.auth-recovery{display:flex;justify-content:flex-end;margin:4px 0}
body.account-page #auth-panel #auth-submit{width:100%;min-height:48px;margin:8px 0 0;font-size:14px;font-weight:650;border-radius:10px}
body.account-page #signup-info{font-size:12px;line-height:1.5;margin:8px 0;color:#bec1c8}
body.account-page #auth-panel .auth-modes{display:flex;gap:8px;justify-content:center;margin:10px 0 0;padding:0;border:0}
body.account-page #auth-panel .auth-modes button{flex:1;min-height:36px;padding:8px;border:1px solid transparent;border-radius:8px;background:none;color:#b6bac3;font-size:12px}
body.account-page #auth-panel .auth-modes button[aria-pressed=true]{color:#f4d574;background:#ffd3290b;border-color:#ffd32940}
body.account-page #auth-panel .auth-modes button:hover{background:#ffffff07;color:#fff}
body.account-page #auth-panel .auth-divider{margin:12px 0;font-size:11px;color:#9fa4ae}
body.account-page #auth-panel .google-login{min-height:44px;margin:0;padding:12px;background:#f8f9fa;border:1px solid #dadce0;border-radius:10px;font-size:13px}
body.account-page #auth-panel .google-availability{margin:8px 0 0;color:#a6abb6;font-size:11px;line-height:1.5;text-align:center}
body.account-page #auth-panel .auth-footer{display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;margin-top:10px}
body.account-page #auth-panel .auth-footer a{font-size:11px;color:#a6abb6}
@media(prefers-reduced-motion:reduce){body.account-page #auth-form .auth-input{transition:none}}

/* The form title replaces the guest preamble. Messages stay in normal flow.
   Match the shared header breakpoint, leaving 18–20 px below its fixed edge. */
body.account-page:has(#auth-panel:not([hidden])) main>.breadcrumbs,
body.account-page:has(#auth-panel:not([hidden])) main>.eyebrow,
body.account-page:has(#auth-panel:not([hidden])) main>h1{display:none}
body.account-page:has(#auth-panel:not([hidden])) main{padding-top:112px}
@media(max-width:760px){
 body.account-page:has(#auth-panel:not([hidden])) main{padding-top:96px}
 body.account-page #auth-panel{padding:20px 18px}
 body.account-page #auth-panel .auth-text-button,body.account-page #auth-panel .auth-modes button{min-height:44px}
 body.account-page #auth-panel .auth-footer a{display:inline-flex;align-items:center;min-height:44px}
}