#authScreen.auth-screen { min-height:100vh;min-height:100dvh;height:auto;padding:40px 24px;display:grid;place-items:center;background:radial-gradient(ellipse at 15% 10%,#e2eaff,transparent 55%),#f4f7fb;overflow:auto; }
#authScreen.is-hidden { display:none !important; }
#authScreen * { box-sizing:border-box; }
#authScreen .auth-experience { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);direction:rtl;width:min(1020px,100%);background:#fff;border:1px solid #dce4f1;border-radius:24px;box-shadow:0 24px 70px #23416d13;overflow:hidden; }
#authScreen .auth-story { position:relative;display:flex;flex-direction:column;padding:38px 40px;background:linear-gradient(145deg,#183f78,#265db0 65%,#4a72c4);color:#fff;overflow:hidden; }
#authScreen .auth-story::after { content:'';position:absolute;inset-inline-end:-110px;bottom:-180px;width:400px;height:400px;border:60px solid #ffffff06;border-radius:50%;pointer-events:none; }
#authScreen .auth-story-brand { display:flex;align-items:center;gap:12px;width:fit-content;margin-bottom:45px;text-decoration:none;color:#fff;font-size:25px;font-weight:700; }
#authScreen .auth-story-brand > span { font-size:19px; }
#authScreen .auth-story-eyebrow { color:#b5cff2;font-size:12px; }
#authScreen .auth-story h1 { color:#fff;font-size:35px;font-weight:700;line-height:1.65;margin:13px 0; }
#authScreen .auth-story > p { color:#c3d6f1;font-size:13px;line-height:2.1;max-width:340px;margin:0 0 25px; }
#authScreen .auth-product-preview { background:#ffffff13;border:1px solid #ffffff26;border-radius:15px;padding:17px;box-shadow:0 8px 25px #0c2b5220; }
#authScreen .auth-product-preview > div { display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #ffffff14; }
#authScreen .auth-product-preview .auth-preview-title { justify-content:space-between;padding-top:0;color:#e2edff;font-size:12px; }
#authScreen .auth-preview-title i { font-style:normal;color:#b6d1f5;background:#ffffff12;border-radius:5px;padding:3px 8px;font-size:10px; }
#authScreen .auth-product-preview b { display:grid;place-items:center;width:21px;height:21px;flex-shrink:0;border-radius:7px;border:1px solid #b3d1ff6b;color:#99e5c6; }
#authScreen .auth-product-preview span { font-size:12px; }
#authScreen .auth-product-preview small { display:block;color:#b4ccef;font-size:10px;margin-top:5px; }
#authScreen .auth-product-preview .auth-preview-progress { display:block;height:5px;padding:0;border:0;margin-top:15px;background:#ffffff15;border-radius:5px; }
#authScreen .auth-preview-progress > span { display:block;width:63%;height:100%;border-radius:5px;background:#8db7ff; }
#authScreen .auth-story-features { display:flex;flex-wrap:wrap;gap:14px;margin:23px 0;color:#c8dcf8;font-size:11px; }
#authScreen .auth-story-footer { color:#9fbee8;font-size:11px;margin-top:auto;padding-top:15px; }
#authScreen .auth-card { width:100%;max-width:none;margin:0;padding:38px 40px;border:0;border-radius:0;background:#fff;box-shadow:none;align-self:center; }
#authScreen .auth-brand { display:flex;align-items:center;gap:12px;min-height:0;margin:0 0 30px;padding:0;background:none;border:0;color:#2b466b;text-align:start; }
#authScreen .auth-brand::before,#authScreen .auth-brand::after { display:none; }
#authScreen .auth-brand-logo { width:40px;height:40px;border-radius:12px;object-fit:contain;background:#eaf1ff;border:1px solid #d5e3fc;color:#4676c7;font-size:20px;box-shadow:none; }
#authScreen .auth-brand strong { color:#304f7d;font-size:21px; }
#authScreen #authBrandTagline { display:none; }
#authScreen .auth-form-intro h2 { margin:0 0 10px;color:#263e60;font-size:23px;font-weight:700; }
#authScreen .auth-form-intro p { color:#7e91ad;font-size:12px;line-height:1.9;margin:0 0 25px; }
#authScreen .auth-tabs { display:flex;gap:4px;margin:0 0 26px;padding:4px;border:1px solid #e2e9f3;border-radius:10px;background:#f5f8fc; }
#authScreen .auth-tab { flex:1;min-height:39px;padding:8px;border:0;border-radius:7px;background:transparent;color:#7a8eac;font:inherit;font-size:13px;box-shadow:none; }
#authScreen .auth-tab.active { background:#fff;color:#356cc5;box-shadow:0 2px 6px #2f528a0c;font-weight:600; }
#authScreen .auth-tab::after { display:none; }
#authScreen .auth-form { padding:0; }
#authScreen .auth-form .field { position:relative;margin:0 0 20px; }
#authScreen .auth-form label { display:block;color:#4c6485;font-size:13px;font-weight:500;margin-bottom:8px; }
#authScreen .auth-form input { width:100%;height:48px;padding:11px 13px;border:1px solid #d5e0f0;border-radius:9px;background:#fcfdff;color:#2c486d;font:inherit;font-size:14px;box-shadow:none; }
#authScreen .auth-form input[type=tel],#authScreen .auth-form input[autocomplete=one-time-code] { direction:ltr;text-align:left; }
#authScreen .auth-form input::placeholder { color:#9aabc2;font-size:13px; }
#authScreen .auth-form input:focus { outline:0;border-color:#6995df;box-shadow:0 0 0 3px #6995df15;background:#fff; }
#authScreen .auth-form .submit-btn { width:100%;min-height:47px;border:1px solid #356bc0;border-radius:9px;background:#3c75cf;color:#fff;font:inherit;font-size:14px;font-weight:600;box-shadow:0 5px 12px #3c75cf18; }
#authScreen .auth-form .submit-btn:hover { background:#2d64bd; }
#authScreen .auth-form .submit-btn.secondary { margin-top:10px;border-color:#d4e1f5;background:#eef4ff;color:#587fb8;box-shadow:none; }
#authScreen .auth-text-btn { color:#6586b6;font:inherit;font-size:12px;margin-top:17px;padding:5px 0;background:none;border:0; }
#authScreen .auth-message { font-size:12px;line-height:1.9; }
#authScreen .auth-message:empty { display:none; }
#authScreen .auth-password-toggle { position:absolute;inset-inline-end:10px;bottom:10px;border:0;border-radius:6px;background:#edf3fc;color:#6383b1;padding:6px 8px;font:inherit;font-size:10px;cursor:pointer; }
#authScreen .auth-form input[type=password],#authScreen .auth-form input[data-auth-password] { padding-inline-end:65px; }
#authScreen :is(button,a):focus-visible { outline:2px solid #82a8e7;outline-offset:3px; }
#authScreen button:disabled { opacity:.6;cursor:wait; }
@media(max-width:800px) { #authScreen .auth-card { padding:30px; } #authScreen .auth-story { padding:30px; } #authScreen .auth-story h1 { font-size:28px; } }
@media(max-width:650px) { #authScreen.auth-screen { padding:20px 14px;align-items:center; } #authScreen .auth-experience { grid-template-columns:1fr;width:min(440px,100%);border-radius:19px; } #authScreen .auth-story { display:none; } #authScreen .auth-card { padding:28px 24px; } #authScreen .auth-brand { margin-bottom:25px; } #authScreen .auth-form-intro h2 { font-size:22px; } }
@media(prefers-reduced-motion:reduce) { #authScreen * { transition:none !important;animation:none !important; } }

/* Clearer button colors with lighter type and flat surfaces. */
#authScreen .auth-tabs { background:#edf2fb;border-color:#cddbf1; }
#authScreen .auth-tab { color:#526f9c;font-weight:400; }
#authScreen .auth-tab.active { background:#3168ca;color:#fff;font-weight:500;box-shadow:none; }
#authScreen .auth-tab:hover:not(.active) { background:#dce7fa;color:#315eaa; }
#authScreen .auth-form .submit-btn { background:#235fc7;border-color:#235fc7;font-weight:500;box-shadow:none; }
#authScreen .auth-form .submit-btn:hover { background:#194eac;border-color:#194eac; }
#authScreen .auth-form .submit-btn.secondary { background:#e2ecfc;color:#305fa8;border-color:#b9cef0;font-weight:400; }
#authScreen .auth-text-btn { color:#2f64b7;font-weight:400; }
#authScreen .auth-text-btn:hover { color:#194993;text-decoration:underline; }
#authScreen .auth-password-toggle { background:#dce8fb;color:#2f5eaa;font-weight:400; }
#authScreen .auth-password-toggle:hover { background:#c9dbf8; }
