/* Shared Login / Register layout. Does not reuse legacy .auth-shell rules. */
body.juma-auth {
 --auth-max-width:1180px; --auth-gap:clamp(20px,3vw,44px); --auth-radius:22px; --auth-control-height:52px;
 min-height:100dvh; margin:0; padding:24px max(24px,env(safe-area-inset-right)) 24px max(24px,env(safe-area-inset-left));
 background:radial-gradient(ellipse at 70% 15%,#15334b 0,transparent 55%),#070d18; color:#eaf4ff;
 font-family:Inter,system-ui,sans-serif;
}
.juma-auth *, .juma-auth *::before, .juma-auth *::after { box-sizing:border-box; }
.juma-auth .auth-backdrop { display:none; }
.juma-auth .juma-auth-shell,.juma-auth .auth-topbar,.juma-auth .auth-footer { width:min(var(--auth-max-width),100%); max-width:var(--auth-max-width); margin-inline:auto; }
.juma-auth .juma-auth-main { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); grid-template-areas:"story form"; align-items:stretch; gap:var(--auth-gap); }
.juma-auth .auth-topbar { flex-direction:row; flex-wrap:wrap; justify-content:center; margin-bottom:20px; padding:8px; }
.juma-auth .auth-topbar a { width:auto; min-width:100px; min-height:40px; font-size:13px; }
.juma-auth .auth-card { grid-area:form; width:100%; min-width:0; align-self:center; padding:clamp(24px,2.5vw,36px); border-radius:var(--auth-radius); top:auto; background:#101928; border:1px solid #2a3b50; }
.juma-auth .brand-mark { display:flex; align-items:center; gap:12px; margin-bottom:24px; text-decoration:none; color:#eaf4ff; font-weight:800; font-size:20px; }
.juma-auth .brand-mark img { width:36px; height:36px; }
.juma-auth .auth-card h2 { font-size:clamp(26px,2.4vw,34px); line-height:1.2; margin:0 0 12px; }
.juma-auth .auth-card p { font-size:15px; line-height:1.6; margin:0 0 22px; color:#b8c9da; }
.juma-auth .juma-form { margin-top:0; gap:14px; }
.juma-auth .juma-form .field { margin:0; }
.juma-auth .juma-form label { font-size:13px; margin-bottom:8px; }
.juma-auth .auth-card input:not([type=checkbox]):not([type=hidden]) { width:100%; font-size:16px; min-height:var(--auth-control-height); border-radius:12px; scroll-margin:24px; color:#f2f8ff; background:#101f33; padding:12px 14px; }
.juma-auth .password-field-wrap input { padding-right:54px !important; }
.juma-auth .password-toggle { width:44px; height:44px; right:4px; }
.juma-auth .auth-submit { min-height:54px; width:100%; border-radius:12px; font-size:16px; }
.juma-auth .auth-links { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; margin-top:18px; font-size:14px; }
.juma-auth .language-selector-modern { margin-top:20px; gap:8px; }
.juma-auth .language-selector-modern button { min-width:40px; min-height:40px; }
.juma-auth .auth-footer { margin-top:24px; padding:24px; border-radius:var(--auth-radius); }
.juma-auth .auth-footer-grid { grid-template-columns:1.4fr 1fr 1fr; gap:24px; }
.juma-auth .auth-footer p,.juma-auth .auth-footer a { font-size:13px; line-height:1.6; }
.juma-auth .auth-footer-bottom { margin-top:16px; padding-top:16px; }
.juma-auth .auth-footer-bottom p { margin:0; }
.auth-story { grid-area:story; min-width:0; border:1px solid #294259; border-radius:var(--auth-radius); overflow:hidden; background:#0b1626; display:flex; flex-direction:column; }
.auth-story > header { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding:18px 24px; font-size:13px; color:#b8d1df; }
.auth-story > header a { color:#91e9ff; }
/* Horizontal native scrolling leaves the page's vertical scroll alone. */
.auth-story-scroll { display:flex; flex:1; width:100%; min-height:clamp(520px,60vh,610px); overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; }
.auth-story-scroll::-webkit-scrollbar { display:none; }
.auth-story-slide { position:relative; isolation:isolate; flex:0 0 100%; min-width:0; display:flex; flex-direction:column; justify-content:space-between; scroll-snap-align:center; padding:clamp(24px,3vw,40px); background:radial-gradient(ellipse at 70% 20%,#196476 0,transparent 65%),linear-gradient(145deg,#102542,#0a1021); }
.auth-story-slide--2,.auth-story-slide--5 { background:radial-gradient(ellipse at 65% 20%,#4e3683,transparent 65%),#11192c; }
.auth-story-slide--3,.auth-story-slide--6 { background:radial-gradient(ellipse at 75% 10%,#196951,transparent 65%),#0d1c28; }
.auth-story-slide--4 { background:radial-gradient(ellipse at 70% 10%,#805426,transparent 65%),#181625; }
.auth-story-copy { position:relative; z-index:1; transition:opacity 450ms,transform 450ms; }
.auth-story[data-enhanced] .auth-story-slide:not(.is-active) .auth-story-copy { opacity:.6; transform:translateY(12px) scale(.99); }
.auth-story-number { font-size:13px; letter-spacing:.2em; color:#a7e4f1; }
.auth-story h2 { font-size:clamp(34px,3.8vw,56px); line-height:1.06; margin:16px 0; letter-spacing:-.045em; font-weight:900; color:#fff; overflow-wrap:anywhere; }
.auth-story p { font-size:clamp(15px,1.25vw,20px); line-height:1.6; color:#d1e2ee; margin:0 0 12px; }
.auth-story-cta { display:inline-flex; align-items:center; min-height:48px; padding:12px 18px; margin-top:8px; background:#8be8ff; color:#071928; font-weight:800; text-decoration:none; border-radius:12px; }
.auth-story-art { position:relative; flex:1; min-height:170px; width:100%; margin-bottom:24px; pointer-events:none; display:grid; place-items:center; }
.auth-story-art > span { font-size:clamp(140px,16vw,220px); line-height:1; color:#95f2ff; opacity:.55; text-shadow:0 0 60px #6edbff44; }
.auth-story-art i { position:absolute; width:clamp(130px,14vw,200px); aspect-ratio:1; border:1px solid #b1f7ff40; border-radius:28px; transform:rotate(-20deg); }
.auth-story-art i:nth-of-type(2) { transform:rotate(10deg) translate(20px,8px); }
.auth-story-art i:nth-of-type(3) { transform:rotate(40deg) translate(-16px,12px); }
.auth-story-indicators { display:flex; justify-content:center; gap:6px; padding:4px 12px; }
.auth-story-indicators a { display:grid; place-items:center; width:44px; height:44px; text-decoration:none; }
.auth-story-indicators span { font-size:0; display:block; width:26px; height:5px; border-radius:8px; background:#506783; }
.auth-story-indicators [aria-current] span { background:#8be8ff; height:7px; }
.juma-auth :is(a,button,input):focus-visible { outline:2px solid #8be8ff; outline-offset:3px; }
.juma-auth .auth-field-error { display:block; margin-top:6px; font-size:13px; line-height:1.4; color:#ffb8bd; }
.juma-auth [aria-invalid=true] { border-color:#ff939f; }
@media (min-width:768px) and (max-width:1099px) {
 .juma-auth .juma-auth-main { grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr); gap:20px; }
 .juma-auth .auth-card { padding:24px; }
 .auth-story-slide { padding:24px; }
 .auth-story h2 { font-size:36px; }
}
@media (max-width:767px) {
 .juma-auth .juma-auth-main { grid-template-columns:minmax(0,1fr); grid-template-areas:"form" "story"; max-width:520px; gap:20px; }
 .juma-auth .auth-topbar,.juma-auth .auth-footer { max-width:520px; }
 .juma-auth .auth-topbar a { min-width:0; flex:1; padding:10px 8px; font-size:12px; }
 .juma-auth .auth-card { padding:24px 20px; }
 .juma-auth .auth-footer-grid { grid-template-columns:1fr; gap:16px; }
 .auth-story-scroll { min-height:460px; }
 .auth-story h2 { font-size:34px; }
 .auth-story-art { min-height:140px; }
}
@media (orientation:landscape) and (max-height:600px) and (min-width:700px) {
 .juma-auth .juma-auth-main { max-width:var(--auth-max-width); grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); grid-template-areas:"story form"; gap:20px; }
 .juma-auth .auth-topbar,.juma-auth .auth-footer { max-width:var(--auth-max-width); }
 .juma-auth .auth-card { padding:20px; }
 .auth-story h2 { font-size:32px; }
 .auth-story-scroll { min-height:420px; }
}
@media (prefers-reduced-motion:reduce) { .auth-story-scroll { scroll-behavior:auto; } .auth-story-copy { transition:none; transform:none !important; } }