/* Two distinct guest experiences, sharing ElBench's editorial palette. */
body[data-auth-ui] { margin:0; min-height:100dvh; background:var(--main-bg); color:var(--main-text); }
body[data-auth-ui] * { box-sizing:border-box; }
.auth-page-header { max-width:1180px; margin-inline:auto; padding:22px 28px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.auth-brand img { display:block; width:146px; height:34px; object-fit:cover; object-position:center; filter:invert(1); mix-blend-mode:multiply; }
:root.dark .auth-brand img { filter:none; mix-blend-mode:screen; }
.auth-header-actions { display:flex; align-items:center; gap:9px; }
.auth-language, body[data-auth-ui] .theme-toggle { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:39px; border:1px solid var(--border-color); border-radius:999px; padding:0 13px; background:var(--secondary-bg); color:var(--main-text); font-size:12px; text-decoration:none; cursor:pointer; transition:background .18s; }
body[data-auth-ui] .theme-toggle { width:39px; padding:0; }
.auth-language .ui-icon { width:16px; height:16px; }
.auth-language:hover, body[data-auth-ui] .theme-toggle:hover { background:var(--card-hover); }
.auth-layout { --auth-story-height:650px; max-width:1140px; padding:24px 28px 60px; margin-inline:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:64px; min-height:calc(100dvh - 84px); }
.auth-story { position:relative; display:flex; flex-direction:column; align-items:flex-start; width:100%; min-width:0; height:var(--auth-story-height); min-height:var(--auth-story-height); padding:38px; border:1.5px solid #18251a; border-radius:32px; box-shadow:0 7px 0 #18251a; overflow:hidden; color:#18251a; }
.auth-login-story { background:#d2e6c5; }
.auth-login-story::before { content:''; position:absolute; width:270px; height:270px; border:1px solid rgb(24 37 26 / 9%); border-radius:50%; top:-85px; inset-inline-end:-80px; pointer-events:none; }
.auth-signup-story { background:#faf9f6; }
.auth-signup-story::before { content:''; position:absolute; width:240px; height:240px; border-radius:50%; background:#d2e6c5; top:104px; left:50%; transform:translateX(-50%); }
.auth-eyebrow { position:relative; font-size:12px; font-weight:600; color:#5f7253; }
.auth-story h2 { position:relative; font-size:clamp(28px,3vw,40px); line-height:1.4; font-weight:700; letter-spacing:-.035em; max-width:400px; margin:16px 0 0; }
html[dir=rtl] .auth-story h2 { letter-spacing:0; }
.auth-art-wrap { display:flex; justify-content:center; align-items:center; width:100%; flex:1; min-height:205px; position:relative; }
.auth-character { width:240px; height:202px; max-width:100%; overflow:visible; }
.auth-signup .auth-character { width:250px; height:215px; }
.auth-login-note { width:100%; display:flex; align-items:center; gap:12px; padding:17px; border:1px solid #9cb98c; border-radius:17px; background:#faf9f6; transform:rotate(-2deg); box-shadow:0 4px 0 rgb(24 37 26 / 10%); }
.auth-note-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#d2e6c5; flex:none; }
.auth-note-icon .ui-icon { width:18px; height:18px; }
.auth-login-note strong { display:block; font-size:13px; font-weight:650; }
.auth-login-note span:not(.auth-note-icon,.auth-note-dot) { display:block; margin-top:3px; font-size:11px; color:#697361; }
.auth-note-dot { margin-inline-start:auto; width:6px; height:6px; border-radius:50%; background:#54a345; flex:none; }
.auth-story-footer { align-self:center; margin-top:25px; color:#728068; font-size:11px; text-align:center; }
.auth-journey { list-style:none; width:100%; padding:0; margin:0; display:grid; gap:8px; position:relative; }
.auth-journey li { display:flex; align-items:center; gap:12px; padding:11px 14px; border:1px solid #dbddd1; border-radius:12px; background:#fff; font-size:12px; }
.auth-journey li > span { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#eff4e9; color:#55734c; font-size:10px; font-weight:700; flex:none; }
body[data-auth-ui] .form-panel { width:100%; min-width:0; padding:0; border:0; background:transparent; box-shadow:none; }
body[data-auth-ui] .form-container { width:100%; margin-inline:auto; }
body[data-auth-ui] .form-header { margin-bottom:28px; }
body[data-auth-ui] .form-icon { display:grid; place-items:center; width:42px; height:42px; margin-bottom:20px; border-radius:13px; border:1px solid var(--border-color); background:var(--ui-accent-soft); color:var(--ui-accent); }
body[data-auth-ui] .form-icon .ui-icon { width:22px; height:22px; }
body[data-auth-ui] .form-title { margin:0; font-size:32px; font-weight:700; line-height:1.4; letter-spacing:-.025em; }
body[data-auth-ui] .form-subtitle { margin:8px 0 0; color:var(--muted-text); font-size:14px; line-height:1.8; }
body[data-auth-ui] .form-group { margin-bottom:20px; }
body[data-auth-ui] .form-label { display:block; margin-bottom:8px; font-size:13px; font-weight:600; color:var(--main-text); }
body[data-auth-ui] .form-input { display:block; width:100%; max-width:100%; min-width:0; min-height:50px; padding:13px 16px; border:1px solid var(--border-color); border-radius:13px; background:var(--secondary-bg); color:var(--main-text); font-size:16px; text-align:start; box-shadow:none; outline:none; }
body[data-auth-ui] .form-input:focus { border-color:var(--border-color); outline:none; box-shadow:none; }
body[data-auth-ui] .form-input::placeholder { color:var(--muted-text); opacity:.65; }
body[data-auth-ui] .helper-links { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
body[data-auth-ui] .forgot-link { color:var(--muted-text); font-size:11px; text-decoration:none; }
body[data-auth-ui] .forgot-link:hover { color:var(--ui-accent); }
body[data-auth-ui] .password-wrapper { position:relative; }
body[data-auth-ui] .password-wrapper .form-input { padding-inline-end:48px; }
body[data-auth-ui] .password-toggle { position:absolute; inset-inline-end:6px; top:50%; transform:translateY(-50%); width:38px; height:38px; border:0; border-radius:10px; background:transparent; color:var(--muted-text); display:grid; place-items:center; cursor:pointer; }
body[data-auth-ui] .password-toggle:hover { background:var(--card-hover); }
body[data-auth-ui] .btn-primary { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:49px; padding:13px 18px; margin-top:8px; border:1.5px solid #18251a; border-radius:13px; background:#428735; color:#fff; font-size:15px; font-weight:650; box-shadow:0 4px 0 #18251a; cursor:pointer; transition:background .18s,transform .18s,box-shadow .18s; }
body[data-auth-ui] .btn-primary:hover { background:#39782d; box-shadow:0 5px 0 #18251a; transform:translateY(-1px); }
body[data-auth-ui] .btn-primary:active { transform:translateY(2px); box-shadow:0 2px 0 #18251a; }
body[data-auth-ui] .btn-primary:disabled { opacity:.65; cursor:wait; transform:none; }
body[data-auth-ui] .btn-secondary { width:100%; padding:12px; margin-top:12px; border:0; background:transparent; color:var(--ui-accent); font-size:13px; cursor:pointer; }
body[data-auth-ui] .btn-secondary:disabled { opacity:.5; cursor:not-allowed; }
body[data-auth-ui] .form-footer { margin:28px 0 0; text-align:center; font-size:12px; line-height:1.8; color:var(--muted-text); }
body[data-auth-ui] .form-footer a { color:var(--ui-accent); font-weight:650; text-decoration:none; margin-inline-start:4px; }
body[data-auth-ui] .form-footer a:hover { text-decoration:underline; }
body[data-auth-ui] .error-box { display:flex; align-items:flex-start; gap:10px; padding:13px 15px; margin-bottom:20px; border:1px solid rgb(197 61 70 / 25%); border-radius:12px; background:rgb(197 61 70 / 8%); color:var(--ui-danger); font-size:13px; line-height:1.7; }
body[data-auth-ui] .error-box i { margin-top:4px; flex:none; }
body[data-auth-ui] .step-indicator { display:flex; gap:7px; margin-bottom:26px; }
body[data-auth-ui] .step-dot { height:4px; flex:1; border-radius:999px; background:var(--border-color); }
body[data-auth-ui] .step-dot.active { background:var(--ui-accent-fill); }
body[data-auth-ui] .user-badge { padding:16px; margin-bottom:22px; border:1px solid var(--border-color); border-radius:15px; background:var(--main-bg); }
body[data-auth-ui] .badge-label { display:block; color:var(--ui-accent); font-size:10px; font-weight:650; margin-bottom:8px; }
body[data-auth-ui] .terms-wrapper { display:flex; align-items:flex-start; gap:9px; margin-top:18px; }
body[data-auth-ui] .checkbox-custom { width:17px; height:17px; margin-top:4px; accent-color:#428735; flex:none; }
body[data-auth-ui] #forgotModal { display:none; position:fixed; inset:0; align-items:center; justify-content:center; padding:20px; z-index:100; background:rgb(0 0 0 / 45%); backdrop-filter:blur(5px); }
body[data-auth-ui] .modal-content { width:100%; max-width:420px; padding:28px; border:1px solid var(--border-color); border-radius:24px; background:var(--main-bg); box-shadow:0 16px 44px rgb(0 0 0 / 15%); text-align:center; }
body[data-auth-ui] .modal-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:16px; background:var(--ui-accent-soft); color:var(--ui-accent); margin:0 auto 16px; font-size:22px; }
body[data-auth-ui] .modal-title { margin:0 0 12px; font-size:21px; font-weight:700; }
body[data-auth-ui] .modal-text { color:var(--muted-text); font-size:14px; line-height:1.8; }
body[data-auth-ui] .modal-email { display:block; margin-top:12px; font-weight:650; color:var(--ui-accent); }
body[data-auth-ui] .btn-modal-close { width:100%; min-height:44px; padding:10px; margin-top:22px; border:1px solid var(--border-color); border-radius:12px; background:var(--secondary-bg); color:var(--main-text); font-size:14px; cursor:pointer; }
body[data-auth-ui] .btn-modal-close:hover { background:var(--card-hover); }
body[data-auth-ui] :is(a,button):focus-visible { outline:2px solid var(--ui-accent); outline-offset:4px; }
:root.dark .auth-story { color:#e1eadb; border-color:#39493a; box-shadow:0 7px 0 #0d1510; }
:root.dark .auth-login-story { background:#18251d; }
:root.dark .auth-login-story::before { border-color:rgb(198 218 185 / 9%); }
:root.dark .auth-signup-story { background:#171d18; }
:root.dark .auth-signup-story::before { background:#233727; }
:root.dark .auth-eyebrow { color:#abc297; }
:root.dark .auth-story-footer { color:#95a08f; }
:root.dark .auth-login-note { background:#202920; border-color:#43513d; box-shadow:0 4px 0 rgb(0 0 0 / 18%); }
:root.dark .auth-note-icon { background:#2c3d29; color:#c8dcba; }
:root.dark .auth-login-note span:not(.auth-note-icon,.auth-note-dot) { color:#9bab93; }
:root.dark .auth-note-dot { background:#7bb668; }
:root.dark .auth-journey li { background:#202721; border-color:#394539; }
:root.dark .auth-journey li > span { background:#2b3b28; color:#aec399; }
:root.dark .auth-character [stroke='#18181B'] { stroke:#b6cbaa; }
:root.dark .auth-character [fill='#18181B'] { fill:#b6cbaa; }
:root.dark .auth-character [fill='#FAF9F6'], :root.dark .auth-character [fill='#F2F1EC'] { fill:#25352a; }
:root.dark .auth-character [fill='#E4E4E0'] { fill:#25362a; }
@media (max-width:1023px) {
  .auth-layout { --auth-story-height:610px; gap:32px; padding-inline:22px; }
  .auth-story { padding:26px; }
  .auth-story h2 { font-size:30px; }
}
@media (max-width:767px) {
  .auth-page-header { padding:18px 18px; }
  .auth-brand img { width:120px; height:28px; }
  .auth-layout { display:block; padding:24px 20px 40px; min-height:0; }
  .auth-story { display:none; }
  body[data-auth-ui] .form-icon { display:none; }
  body[data-auth-ui] .form-title { font-size:28px; }
  body[data-auth-ui] .form-panel { padding:8px 4px; }
  .auth-header-actions { gap:6px; }
  .auth-language { padding-inline:10px; }
}
@media (prefers-reduced-motion:reduce) { body[data-auth-ui] :is(button,a) { transition:none; } }