/* Entry screens share the violet palette, surfaces and motion of JayLex Studio. */
:root {
  --bg-primary:#0b0d1b; --bg-secondary:#151a30; --bg-card:#1b2038;
  --text-primary:#f2f4fc; --text-secondary:#b0b9d0; --text-muted:#8c97b3;
  --border-color:#2b334e; --accent:#9c7af3; --accent-hover:#ab8bf7;
  --accent-glow:rgba(125,88,221,.18); --glass-bg-auth:#151a30;
  --auth-action:linear-gradient(125deg,#7451dc,#815bde);
  --auth-ease:cubic-bezier(.22,1,.36,1);
  color-scheme:dark;
}
html[data-theme="light"] {
  --bg-primary:#f7f8fd; --bg-secondary:#fff; --bg-card:#f0edf9;
  --text-primary:#20273d; --text-secondary:#626c85; --text-muted:#707a91;
  --border-color:#e1e3ee; --accent:#7046c6; --accent-hover:#5d37ab;
  --accent-glow:rgba(138,106,211,.10); --glass-bg-auth:#fff;
  --auth-action:linear-gradient(125deg,#7046c6,#7951cc);
  color-scheme:light;
}
html { height:auto; min-height:100%; overflow-x:clip; overflow-y:auto; }
body { min-height:100dvh; height:auto; overflow:visible; background:var(--bg-primary); color:var(--text-primary); }
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,select:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.soft-glow-background,.onboarding-bg { position:fixed; inset:0; z-index:-1; pointer-events:none; }
.soft-glow-background::before,.onboarding-bg::before {
  background:radial-gradient(ellipse 60% 60% at 85% 10%,rgba(139,97,221,.18),transparent 80%),radial-gradient(ellipse 50% 60% at 0% 100%,rgba(124,79,189,.11),transparent 80%);
  animation:studio-auth-ambient 16s ease-in-out infinite alternate;
}
.onboarding-blob { display:none; }
.auth-container {
  max-width:1180px; margin:0 auto; min-height:100dvh; padding:48px 36px;
  display:grid; grid-template-columns:minmax(0,440px) minmax(0,1fr); align-items:center; gap:72px;
}
.auth-form-section { max-width:none; min-width:0; margin:0; }
.auth-top-actions { gap:16px; margin-bottom:20px; }
.back-link { color:var(--text-secondary); min-height:44px; font-size:13px; min-width:0; line-height:1.4; }
.custom-lang-dropdown .lang-dropdown-toggle { color:var(--text-primary); background:var(--bg-card); border-color:var(--border-color); border-radius:13px; padding:10px 13px; }
.custom-lang-dropdown .lang-dropdown-menu { display:none; background:var(--bg-secondary); border-color:var(--border-color); min-width:184px; box-shadow:0 18px 60px rgba(9,5,26,.24); }
.custom-lang-dropdown.open .lang-dropdown-menu { display:flex; }
.custom-lang-dropdown:hover:not(.open) .lang-dropdown-menu { opacity:0; visibility:hidden; pointer-events:none; }
.custom-lang-dropdown .lang-dropdown-menu button { text-align:start; min-height:42px; color:var(--text-secondary); }
.custom-lang-dropdown .lang-dropdown-menu button.active { background:var(--auth-action); color:#fff; }
.auth-form-wrapper {
  max-width:none; padding:32px; border-radius:28px; border:1px solid var(--border-color);
  background:var(--bg-secondary); backdrop-filter:none; box-shadow:0 24px 80px rgba(6,8,21,.12),inset 0 1px 0 rgba(255,255,255,.06);
  animation:studio-auth-enter .7s var(--auth-ease) both;
}
.auth-logo,.studio-auth-brand { display:inline-flex; align-items:center; gap:2px; text-decoration:none; width:max-content; margin-bottom:27px; direction:ltr; }
.auth-logo .logo-icon,.studio-auth-brand img { width:44px; height:44px; flex:none; }
.auth-logo .logo-img { width:100%; height:100%; object-fit:contain; }
.auth-logo-text,.studio-auth-brand span { font-size:27px; color:var(--text-primary); font-weight:800; letter-spacing:-.7px; background:none; -webkit-text-fill-color:currentColor; }
.auth-header { margin-bottom:0; }
.auth-header h1 { font-size:clamp(26px,2.5vw,34px); letter-spacing:-1.15px; line-height:1.16; margin-bottom:10px; overflow-wrap:anywhere; text-wrap:balance; }
.auth-subtitle { margin:0 0 25px; color:var(--text-secondary); font-size:14px; line-height:1.6; }
.social-auth { display:flex; flex-direction:row; gap:10px; margin-bottom:0; }
.social-auth>* { flex:1; min-width:0; }
.social-btn,.google-btn-container .social-btn { min-height:48px; width:100%; border-radius:13px; gap:10px; color:var(--text-primary); background:var(--bg-card); border:1px solid var(--border-color); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:650; transition:transform .2s,border-color .2s,background .2s; }
.social-btn:hover { border-color:var(--accent); transform:translateY(-2px); background:color-mix(in srgb,var(--accent) 8%,var(--bg-card)); }
.divider { margin:21px 0; gap:14px; color:var(--text-muted); font-size:12px; }
.divider::before,.divider::after { background:var(--border-color); }
.auth-form { display:flex; flex-direction:column; gap:17px; }
.auth-form .form-group { margin:0; min-width:0; }
.auth-form label { margin-top:0; }
.form-group label { display:flex; gap:12px; justify-content:space-between; align-items:center; color:var(--text-secondary); margin-bottom:8px; font-size:12px; font-weight:550; }
.form-group input,.code-input { min-width:0; color:var(--text-primary); border-color:var(--border-color); border-width:1px; background:var(--bg-primary); border-radius:13px; height:52px; padding:0 15px; font-size:14px; transition:box-shadow .2s,border-color .2s; }
.form-group input::placeholder { color:var(--text-muted); opacity:1; }
.form-group input:focus,.code-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.form-group .password-input { padding-inline-end:52px; }
.password-wrapper { min-width:0; }
.password-wrapper input { padding-inline:15px 54px; }
.password-toggle { inset:auto; top:50%; inset-inline-end:4px; width:44px; height:44px; color:var(--accent); transform:translateY(-50%); }
.forgot-link { color:var(--accent); font-size:12px; }
.form-checkbox { align-items:flex-start; gap:10px; margin:2px 0 0; }
.form-checkbox input { appearance:auto; width:17px; height:17px; flex:none; margin-top:2px; accent-color:var(--accent); }
.form-checkbox .terms-label { color:var(--text-secondary); font-size:12px; line-height:1.65; text-align:start; }
.terms-label a,.auth-switch a,.resend-link { color:var(--accent); }
.btn-submit { min-height:52px; margin:0; border-radius:14px; padding:13px 16px; background:var(--auth-action); font-size:15px; line-height:1.4; box-shadow:0 7px 24px rgba(115,74,205,.22); transition:transform .2s,box-shadow .2s; }
.btn-submit:hover { background:var(--auth-action); transform:translateY(-2px); box-shadow:0 12px 30px rgba(115,74,205,.32); }
.btn-submit:active,.social-btn:active { transform:translateY(0) scale(.98); }
.auth-status:empty { display:none; }
.auth-status { color:var(--text-secondary); font-size:12px; line-height:1.6; padding:12px; border-radius:12px; background:var(--accent-glow); margin:0; }
.auth-switch { color:var(--text-secondary); font-size:12px; line-height:1.6; margin:19px 0 0; }
.studio-auth-stepper { display:flex; gap:6px; margin-bottom:25px; color:var(--text-muted); font-size:10px; line-height:1.4; }
.studio-auth-stepper span { flex:1; display:flex; align-items:center; gap:7px; padding:0 0 10px; border-bottom:2px solid var(--border-color); min-width:0; }
.studio-auth-stepper b { font-size:10px; display:grid; place-items:center; width:20px; height:20px; flex:none; border:1px solid var(--border-color); border-radius:50%; }
.studio-auth-stepper .active { color:var(--accent); border-color:var(--accent); }
.studio-auth-stepper .active b { color:#fff; background:var(--auth-action); border-color:transparent; }
.verification-step.active { animation:studio-auth-enter .45s var(--auth-ease) both; }
.verification-center { text-align:center; }
.verification-center p { color:var(--text-secondary); font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
.code-inputs { direction:ltr; }
.code-input { height:54px; padding:0; }
.resend-center,.timer-center { text-align:center; margin-top:18px; }
.auth-visual { display:block; position:relative; width:auto; min-width:0; padding:30px 0; background:none; overflow:visible; }
.auth-visual .visual-content { max-width:none; width:100%; position:relative; inset:auto; transform:none; text-align:start; animation:studio-auth-enter .8s .12s var(--auth-ease) both; }
.studio-auth-eyebrow { display:flex; align-items:center; gap:9px; color:var(--accent); font-size:10px; letter-spacing:1.8px; text-transform:uppercase; font-weight:750; margin-bottom:20px; }
.studio-auth-eyebrow::before { content:''; width:6px; height:6px; background:var(--accent); border-radius:50%; box-shadow:0 0 0 5px var(--accent-glow); }
.auth-visual h2 { max-width:520px; font-size:clamp(34px,3.9vw,52px); letter-spacing:-2px; font-weight:760; line-height:1.08; text-wrap:balance; margin:0 0 18px; overflow-wrap:anywhere; }
.auth-visual .studio-auth-lede { font-size:15px; line-height:1.7; color:var(--text-secondary); max-width:410px; margin-bottom:34px; }
.studio-auth-dashboard { position:relative; background:var(--bg-secondary); padding:23px; border:1px solid var(--border-color); border-radius:24px; box-shadow:0 25px 80px rgba(7,5,26,.17); transform:rotate(-2deg); max-width:430px; animation:studio-auth-float 8s ease-in-out infinite; }
.studio-auth-dashboard::before { content:''; position:absolute; inset:-40px; z-index:-1; border-radius:50%; background:radial-gradient(var(--accent-glow),transparent 68%); }
.studio-auth-dashboard-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:22px; }
.studio-auth-dashboard-head small { color:var(--text-muted); font-size:10px; display:block; margin-bottom:7px; }
.studio-auth-dashboard-head strong { font-size:28px; letter-spacing:-1px; }
.studio-auth-dashboard-head i { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; font-size:19px; background:var(--accent-glow); color:var(--accent); }
.studio-auth-services { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.studio-auth-service { display:flex; gap:9px; align-items:center; padding:12px 10px; border:1px solid var(--border-color); background:var(--bg-card); border-radius:13px; min-width:0; }
.studio-auth-service b { display:grid; place-items:center; width:30px; height:30px; font-size:15px; flex:none; border-radius:9px; color:white; background:var(--service-color); }
.studio-auth-service span { min-width:0; line-height:1.2; }
.studio-auth-service strong { display:block; font-size:11px; overflow-wrap:anywhere; }
.studio-auth-service small { display:block; font-size:10px; color:var(--text-muted); margin-top:5px; }
.studio-auth-chart { display:flex; align-items:flex-end; gap:8px; height:70px; margin-top:19px; border-bottom:1px solid var(--border-color); padding-bottom:6px; }
.studio-auth-chart i { flex:1; height:var(--bar-height); background:var(--auth-action); opacity:.55; border-radius:5px 5px 1px 1px; transform-origin:bottom; animation:studio-auth-bar .85s .35s var(--auth-ease) both; }
.studio-auth-chart i:nth-child(3n) { opacity:1; }
.studio-auth-float-tag { position:absolute; inset-inline-end:-20px; bottom:-22px; padding:13px 18px; display:flex; align-items:center; gap:10px; border-radius:14px; border:1px solid var(--border-color); color:var(--text-primary); background:var(--bg-secondary); box-shadow:0 12px 40px rgba(7,5,26,.2); font-size:11px; transform:rotate(2deg); }
.studio-auth-float-tag i { color:#29b88a; font-size:19px; }
.studio-auth-settings { display:flex; gap:8px; align-items:center; margin-top:19px; color:var(--text-muted); }
.studio-auth-settings button { border:1px solid var(--border-color); border-radius:10px; background:transparent; padding:8px 10px; color:var(--text-secondary); font-size:10px; min-height:36px; cursor:pointer; }
.studio-auth-settings button:hover { color:var(--text-primary); border-color:var(--accent); }
.studio-auth-preview-link { margin-inline-start:auto; text-decoration:none; font-size:11px; color:var(--accent); }
/* Onboarding: the illustration changes with the story, while controls stay reachable. */
body.studio-onboarding { display:flex; min-height:100dvh; flex-direction:column; }
.studio-onboarding-header { position:relative; z-index:20; width:min(1180px,100%); margin:0 auto; padding:24px 36px; display:flex; align-items:center; gap:12px; }
.studio-onboarding-header .studio-auth-brand { margin:0; margin-inline-end:auto; }
.studio-onboarding-header .onboarding-lang,.studio-onboarding-header .onboarding-skip { position:static; inset:auto; margin:0; box-shadow:none; }
.onboarding-lang { display:flex; align-items:center; gap:5px; background:var(--bg-card); color:var(--text-primary); border:1px solid var(--border-color); border-radius:12px; padding:0 9px; min-height:44px; }
.onboarding-lang select { background:transparent; border:0; color:var(--text-primary); font-size:12px; height:42px; width:50px; cursor:pointer; }
.onboarding-lang select option { color:var(--text-primary); background:var(--bg-secondary); }
.onboarding-skip { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; border-radius:12px; background:transparent; color:var(--text-secondary); border:1px solid var(--border-color); padding:0 14px; font-size:12px; }
.onboarding-skip.hidden { visibility:hidden; }
.onboarding-carousel { direction:ltr; overflow:hidden; width:100%; height:auto; flex:1; min-height:520px; align-items:flex-start; justify-content:center; }
.onboarding-track { direction:ltr; height:auto; align-items:stretch; transition:transform .65s var(--auth-ease); }
.onboarding-slide { height:auto; min-height:520px; padding:36px max(36px,calc((100vw - 1108px) / 2)); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:72px; align-items:center; direction:ltr; }
.onboarding-slide[aria-hidden="true"] .slide-content { animation:none; }
.slide-content { max-width:none; width:100%; text-align:start; display:flex; flex-direction:column; align-items:flex-start; animation:studio-auth-enter .7s var(--auth-ease) both; }
.slide-icon-wrapper { width:64px!important; height:64px!important; border-radius:19px; margin-bottom:25px; background:var(--accent-glow); border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border-color)); box-shadow:none; }
.slide-icon-wrapper i { font-size:29px!important; color:var(--accent); background:none; -webkit-text-fill-color:currentColor; }
.slide-title { max-width:520px; text-align:start; font-size:clamp(34px,4.1vw,54px); font-weight:760; letter-spacing:-1.9px; line-height:1.1; text-wrap:balance; margin:0 0 19px; overflow-wrap:anywhere; }
.accent-text { background:linear-gradient(120deg,var(--accent),#cc78ba); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.slide-description { max-width:430px; text-align:start; font-size:15px; line-height:1.75; color:var(--text-secondary); text-wrap:pretty; }
.slide-features { margin-top:27px; gap:11px; max-width:430px; }
.feature-pill { min-height:50px; padding:13px 15px; color:var(--text-secondary); border:1px solid var(--border-color); background:var(--bg-secondary); border-radius:13px; font-size:13px; line-height:1.45; text-align:start; backdrop-filter:none; }
.feature-pill i { color:var(--accent); font-size:19px; }
.studio-onboarding-art { width:100%; max-width:430px; min-width:0; padding-bottom:30px; position:relative; }
.studio-onboarding-art .studio-auth-dashboard { max-width:none; }
.studio-onboarding-art .studio-auth-dashboard-head { min-height:57px; }
.studio-onboarding-calendar { display:grid; grid-template-columns:repeat(7,1fr); gap:7px; margin-top:15px; }
.studio-onboarding-calendar span { min-height:36px; display:grid; place-items:center; border-radius:9px; background:var(--bg-card); color:var(--text-muted); font-size:11px; }
.studio-onboarding-calendar .marked { background:var(--auth-action); color:white; box-shadow:0 5px 18px var(--accent-glow); }
.studio-onboarding-cancel { display:flex; flex-direction:column; gap:11px; margin-top:12px; }
.studio-onboarding-cancel > span { display:flex; align-items:center; gap:12px; min-height:48px; padding:10px 12px; background:var(--bg-card); border:1px solid var(--border-color); border-radius:12px; color:var(--text-secondary); font-size:12px; }
.studio-onboarding-cancel b { display:grid; place-items:center; width:25px; height:25px; flex:none; background:var(--accent-glow); color:var(--accent); border-radius:50%; }
.onboarding-controls { position:relative; inset:auto; padding:12px 24px 28px; background:none; gap:8px; }
.onboarding-dots { height:32px; gap:0; }
.onboarding-dot,.onboarding-dot.active { width:38px; min-width:38px; height:32px; min-height:32px; border:none; background:none; display:grid; place-items:center; padding:0; box-shadow:none; }
.onboarding-dot::before { content:''; width:6px; height:6px; border-radius:20px; background:var(--text-muted); opacity:.4; transition:width .3s,opacity .3s; }
.onboarding-dot.active::before { width:25px; background:var(--auth-action); opacity:1; box-shadow:none; }
.onboarding-btn { max-width:360px; min-height:52px; border-radius:14px; padding:12px 20px; background:var(--auth-action); font-size:15px; box-shadow:0 7px 24px rgba(115,74,205,.22); animation:none; }
.onboarding-btn::after { display:none; }
.onboarding-controls .studio-auth-settings { justify-content:center; margin-top:7px; }
html[dir="rtl"] .auth-container,html[dir="rtl"] .onboarding-slide { direction:rtl; }
html[dir="rtl"] .onboarding-track { direction:ltr; }
html[dir="rtl"] .custom-lang-dropdown .lang-dropdown-menu { right:auto; left:0; }
html[dir="rtl"] .ri-arrow-left-line,html[dir="rtl"] .ri-arrow-right-line { transform:scaleX(-1); }
@keyframes studio-auth-enter { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes studio-auth-float { 0%,100% { transform:rotate(-2deg) translateY(0); } 50% { transform:rotate(-1deg) translateY(-7px); } }
@keyframes studio-auth-ambient { from { transform:translate3d(-1%,0,0); opacity:.65; } to { transform:translate3d(1%,1%,0); opacity:1; } }
@keyframes studio-auth-bar { from { transform:scaleY(.15); } to { transform:scaleY(1); } }
@media (max-width:1000px) {
  .auth-container { gap:40px; padding:36px 28px; grid-template-columns:minmax(0,400px) minmax(0,1fr); }
  .auth-visual h2 { font-size:39px; }
  .studio-auth-services { grid-template-columns:1fr; }
  .studio-auth-service { padding:9px 10px; }
  .onboarding-slide { gap:40px; padding-inline:36px; }
  .slide-title { font-size:42px; }
}
@media (max-width:780px) {
  .auth-container { display:flex; flex-direction:column-reverse; justify-content:center; gap:24px; padding:24px; }
  .auth-form-section { width:100%; max-width:440px; }
  .auth-visual { width:100%; max-width:440px; padding:0; }
  .auth-visual .studio-auth-eyebrow { margin-bottom:10px; font-size:9px; }
  .auth-visual h2 { font-size:30px; letter-spacing:-1.1px; margin-bottom:0; }
  .auth-visual .studio-auth-lede,.auth-visual .studio-auth-dashboard { display:none; }
  .auth-form-wrapper { padding:27px; }
  .studio-onboarding-header { padding:18px 24px; }
  .onboarding-slide { display:flex; flex-direction:column; gap:24px; padding:24px; min-height:0; align-items:center; }
  .onboarding-carousel { min-height:0; }
  .slide-content { max-width:430px; text-align:center; align-items:center; }
  .slide-icon-wrapper { display:none; }
  .slide-title { text-align:center; font-size:36px; letter-spacing:-1.3px; margin-bottom:14px; }
  .slide-description { text-align:center; font-size:14px; line-height:1.6; }
  .slide-features { margin-top:20px; width:100%; }
  .studio-onboarding-art { width:min(100%,350px); padding-bottom:14px; order:-1; }
  .studio-onboarding-art .studio-auth-dashboard { padding:17px; border-radius:20px; }
  .studio-onboarding-art .studio-auth-services { grid-template-columns:1fr 1fr; }
  .studio-onboarding-art .studio-auth-dashboard-head { margin-bottom:13px; min-height:0; }
  .studio-onboarding-art .studio-auth-dashboard-head strong { font-size:24px; }
  .studio-onboarding-art .studio-auth-chart { display:none; }
  .studio-onboarding-art .studio-auth-float-tag { inset-inline-end:0; bottom:-10px; padding:10px 13px; }
  .onboarding-controls { padding:0 24px 20px; }
  .studio-onboarding-calendar { gap:5px; }
  .studio-onboarding-calendar span { min-height:28px; }
  .studio-onboarding-cancel { gap:7px; }
  .studio-onboarding-cancel > span { min-height:38px; }
}
@media (max-width:420px) {
  .auth-container { padding:20px 16px; gap:21px; }
  .auth-top-actions { margin-bottom:12px; }
  .auth-form-wrapper { padding:24px 20px; border-radius:24px; }
  .auth-logo { margin-bottom:23px; }
  .auth-header h1 { font-size:28px; }
  .auth-form { gap:15px; }
  .studio-onboarding-header { padding:14px 16px; gap:8px; }
  .studio-onboarding-header .studio-auth-brand span { display:none; }
  .studio-onboarding-header .studio-auth-brand img { width:36px; height:36px; }
  .onboarding-slide { padding:20px 20px 22px; gap:22px; }
  .slide-title { font-size:30px; letter-spacing:-1px; }
  .slide-description { font-size:13px; }
  .slide-features { gap:8px; margin-top:18px; }
  .feature-pill { font-size:12px; min-height:46px; padding:11px 12px; }
  .studio-onboarding-art { width:min(100%,310px); }
  .studio-auth-float-tag { font-size:10px; }
  .onboarding-controls { padding-inline:20px; }
}
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* The official Google button needs its full form row at every size. */
.social-auth { flex-wrap:wrap; }
.social-auth>.google-btn-container { flex-basis:100%; width:100%; }