:root{
  --auth-blue:#176ff2;
  --auth-cyan:#18c6d7;
  --auth-teal:#16c3a5;
  --auth-gold:#ffc84a;
  --auth-night:#020817;
}

/* Login is a full product entrance. Account-security dialogs keep their existing compact surface. */
#authModal:not(:has(#securityPanel:not(.hidden))){
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,460px);
  align-items:center;
  gap:clamp(28px,4vw,84px);
  padding:clamp(92px,10vh,132px) clamp(30px,5vw,92px) clamp(42px,6vh,72px)!important;
  overflow:hidden;
  background:var(--auth-night)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.auth-cinematic-bg{position:absolute;z-index:-3;inset:0;overflow:hidden;background:#020817;pointer-events:none}
.auth-cinematic-scene{position:absolute;inset:-3%;background-position:center;background-size:cover;opacity:0;transform:scale(1.065) translate3d(0,0,0);transition:opacity .9s ease-in-out,transform 4s linear;will-change:opacity,transform}
.auth-cinematic-scene.is-active{z-index:1;opacity:1;transform:scale(1.01) translate3d(-.45%,.15%,0)}
.auth-cinematic-bg::before{content:"";position:absolute;z-index:4;inset:0;background:linear-gradient(90deg,rgba(1,7,18,.96) 0%,rgba(2,10,23,.82) 27%,rgba(2,9,20,.2) 60%,rgba(1,7,17,.38) 100%),linear-gradient(180deg,rgba(1,6,15,.42),transparent 26%,transparent 68%,rgba(1,6,15,.72));pointer-events:none}
.auth-cinematic-bg::after{content:"";position:absolute;z-index:5;inset:0;opacity:.15;background-image:linear-gradient(rgba(145,209,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(145,209,255,.08) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(90deg,#000,transparent 68%);pointer-events:none}

.auth-brandbar{position:absolute;z-index:3;left:clamp(26px,4vw,70px);right:clamp(26px,4vw,70px);top:clamp(22px,3vh,36px);display:flex;align-items:center;gap:13px;color:#fff}
.auth-brandbar img{display:block;width:50px;height:50px;filter:drop-shadow(0 12px 22px rgba(0,80,170,.34))}
.auth-brandbar-copy{display:grid;gap:2px}
.auth-brandbar-copy b{font-size:19px;font-weight:900;letter-spacing:.08em}
.auth-brandbar-copy small{color:rgba(220,239,255,.62);font:700 8px/1.2 Arial,sans-serif;letter-spacing:.22em}
.auth-brandbar::after{content:"AI CREATIVE OPERATING SYSTEM";margin-left:auto;color:rgba(216,236,255,.5);font:700 9px/1 Arial,sans-serif;letter-spacing:.24em}

.auth-story{z-index:2;align-self:center;max-width:760px;color:#fff;text-align:left;text-shadow:0 4px 28px rgba(0,0,0,.45)}
/* Fade the complete copy block before replacement. Replacing independently
   animated glyph lines could expose half-painted Chinese characters. */
.auth-story-kicker,#authStoryTitle,#authStoryAccent,.auth-story>p,.auth-story-detail{
  transition:none;
}
#authStoryTitle,#authStoryAccent{display:inline-block;overflow:visible;padding-inline-end:.14em;margin-inline-end:-.14em}
.auth-story.scene-updating{opacity:0!important;transform:translateY(10px)!important;transition-duration:.18s!important}
.auth-story-kicker{display:flex;align-items:center;gap:12px;margin-bottom:22px;color:#78e9f4;font:800 10px/1 Arial,sans-serif;letter-spacing:.28em}
.auth-story-kicker::before{content:"";width:42px;height:2px;border-radius:99px;background:linear-gradient(90deg,var(--auth-cyan),var(--auth-gold));box-shadow:0 0 18px rgba(24,198,215,.65)}
.auth-story h1{max-width:760px;margin:0;color:#fff;font-family:"Microsoft YaHei UI","PingFang SC",sans-serif;font-size:clamp(46px,5.3vw,86px);font-weight:900;line-height:1.04;letter-spacing:-.065em}
.auth-story h1 em{display:inline-block;color:transparent;font-style:normal;background:linear-gradient(100deg,#fff 0%,#74e6ff 38%,#64d9cf 68%,#ffd96a 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 8px 25px rgba(20,169,220,.25))}
.auth-story>p{max-width:590px;margin:25px 0 0;color:rgba(229,241,255,.76);font-size:14px;font-weight:600;line-height:1.9;letter-spacing:.04em}
.auth-story-features{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;overflow:visible}
.auth-story-features span{
  --feature-rgb:72,123,255;
  position:relative;isolation:isolate;display:flex;align-items:center;gap:9px;min-height:43px;padding:0 17px;
  overflow:visible;border:1px solid rgba(var(--feature-rgb),.36);border-radius:999px;
  background:linear-gradient(155deg,rgba(16,21,31,.88),rgba(5,9,17,.74));color:#fff;
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 10px 28px rgba(0,0,0,.34),0 0 24px rgba(var(--feature-rgb),.18);
  -webkit-backdrop-filter:blur(18px) saturate(125%);backdrop-filter:blur(18px) saturate(125%);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.auth-story-features span::before{
  content:"";position:absolute;z-index:-2;left:16%;right:16%;bottom:-11px;height:22px;border-radius:50%;
  background:rgba(var(--feature-rgb),.34);filter:blur(17px);opacity:.72;pointer-events:none;
}
.auth-story-features span::after{
  content:"";position:absolute;z-index:-1;inset:1px;border-radius:inherit;
  background:linear-gradient(110deg,rgba(var(--feature-rgb),.08),transparent 38%,rgba(255,255,255,.035));pointer-events:none;
}
.auth-story-features span:hover{transform:translateY(-2px);border-color:rgba(var(--feature-rgb),.62);box-shadow:inset 0 1px rgba(255,255,255,.16),0 13px 32px rgba(0,0,0,.38),0 0 32px rgba(var(--feature-rgb),.27)}
.auth-story-features i{display:grid;place-items:center;width:19px;height:19px;color:rgb(var(--feature-rgb));filter:drop-shadow(0 0 8px rgba(var(--feature-rgb),.72))}
.auth-story-features svg{width:19px;height:19px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.auth-story-features b{position:relative;color:#f8fbff;font-size:13px;font-weight:850;line-height:1;letter-spacing:.03em;text-shadow:0 1px 12px rgba(255,255,255,.12),0 2px 14px rgba(0,0,0,.8);white-space:nowrap}
.auth-story-features .feature-template{--feature-rgb:145,91,255}
.auth-story-features .feature-breakdown{--feature-rgb:22,196,205}
.auth-story-features .feature-svg{--feature-rgb:57,190,255}
.auth-story-features .feature-psd{--feature-rgb:255,159,45}

#authModal:not(:has(#securityPanel:not(.hidden))) #authForm{
  z-index:2;
  grid-column:2;
  justify-self:end;
  width:min(438px,100%);
  max-height:calc(100vh - 150px);
  margin:0;
  padding:25px 27px 26px;
  border:1px solid rgba(190,231,255,.24)!important;
  border-radius:28px!important;
  background:linear-gradient(145deg,rgba(249,253,255,.97),rgba(234,246,255,.94) 55%,rgba(234,252,248,.92))!important;
  box-shadow:0 38px 100px rgba(0,7,24,.54),0 0 0 1px rgba(255,255,255,.65) inset!important;
  -webkit-backdrop-filter:blur(30px) saturate(130%)!important;
  backdrop-filter:blur(30px) saturate(130%)!important;
  scrollbar-width:thin;
  scrollbar-color:rgba(7,104,181,.28) transparent;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-x:none;
}
#authModal:not(:has(#securityPanel:not(.hidden))) #authForm::-webkit-scrollbar{width:8px;height:0}
#authModal:not(:has(#securityPanel:not(.hidden))) #authForm::before{left:auto;right:-70px;top:-84px;border-color:rgba(38,185,225,.12);box-shadow:0 0 0 34px rgba(38,185,225,.035),0 0 0 72px rgba(80,126,239,.025)}
#authModal:not(:has(#securityPanel:not(.hidden))) #authForm::after{left:10%;right:10%;background:linear-gradient(90deg,transparent,#6ce7ef,#fff5a8,transparent)}
#authModal:not(:has(#securityPanel:not(.hidden))) #authBrandMark{width:68px!important;height:68px!important;margin:-2px auto 2px!important;border:0!important;border-radius:22px!important;background:transparent!important;overflow:visible!important;box-shadow:0 14px 30px rgba(7,75,151,.18)!important}
#authModal:not(:has(#securityPanel:not(.hidden))) #authBrandMark img{position:static!important;width:100%!important;height:100%!important;max-width:100%!important;object-fit:contain!important;transform:none!important}
#authModal:not(:has(#securityPanel:not(.hidden))) .auth-welcome-kicker{margin-top:8px!important;color:#0878c4!important;letter-spacing:.2em}
#authModal:not(:has(#securityPanel:not(.hidden))) #authTitle{margin:5px 0 12px!important;color:#0d1d35!important;font-size:24px!important}
#authModal:not(:has(#securityPanel:not(.hidden))) #authMessage{margin:10px auto!important;color:#58708a!important;line-height:1.55!important}
#authModal:not(:has(#securityPanel:not(.hidden))) .auth-methods{border-color:rgba(50,112,173,.15)!important;background:rgba(224,237,247,.8)!important}
#authModal:not(:has(#securityPanel:not(.hidden))) .auth-methods::before{background:linear-gradient(112deg,#176ff2,#0798ba 58%,#16c3a5)!important;box-shadow:0 8px 20px rgba(14,112,190,.22)!important}
#authModal:not(:has(#securityPanel:not(.hidden))) .auth-methods button.active{color:#fff!important}
#authModal:not(:has(#securityPanel:not(.hidden))) .welcome-credit-tip{margin:9px 0 12px!important;padding:10px 12px!important;border-color:rgba(20,178,184,.22)!important;background:linear-gradient(135deg,rgba(242,249,255,.9),rgba(230,251,247,.86))!important;box-shadow:0 8px 20px rgba(7,104,181,.06)!important}
#authModal:not(:has(#securityPanel:not(.hidden))) .welcome-credit-tip>span{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#176ff2,#0a9fbd 58%,#16c3a5)!important;box-shadow:0 8px 18px rgba(7,104,181,.16)!important}
#authModal:not(:has(#securityPanel:not(.hidden))) label{margin:8px 0!important;color:#506b84!important}
#authModal:not(:has(#securityPanel:not(.hidden))) input{min-height:47px!important;border-color:rgba(66,110,151,.22)!important;background:rgba(255,255,255,.84)!important;color:#10213a!important;box-shadow:0 5px 14px rgba(7,63,140,.035)!important}
#authModal:not(:has(#securityPanel:not(.hidden))) input:focus{border-color:rgba(19,153,193,.64)!important;box-shadow:0 0 0 4px rgba(21,180,198,.11),0 10px 22px rgba(7,63,140,.08)!important}
#authModal:not(:has(#securityPanel:not(.hidden))) .sms-code-row button,
#authModal:not(:has(#securityPanel:not(.hidden))) #authSubmit{border:0!important;background:linear-gradient(112deg,#176ff2,#0798ba 58%,#16c3a5)!important;color:#fff!important;box-shadow:0 13px 28px rgba(7,104,181,.22)!important}
#authModal:not(:has(#securityPanel:not(.hidden))) #authSubmit{min-height:51px!important;margin-top:12px!important}
#authModal:not(:has(#securityPanel:not(.hidden))) .remember-login{margin:8px 0 2px!important;padding:8px 10px!important;border-color:rgba(43,102,154,.14)!important;background:rgba(247,251,255,.72)!important}
#authModal:not(:has(#securityPanel:not(.hidden))) .remember-login input:checked{border-color:#0a9fbd!important;background:linear-gradient(135deg,#176ff2,#16c3a5)!important}
#authModal:not(:has(#securityPanel:not(.hidden))) .remember-login input:checked::after{color:#fff!important}
#authModal:not(:has(#securityPanel:not(.hidden))) .auth-link{color:#0878c4!important}
#authModal:not(:has(#securityPanel:not(.hidden))) .modal-close{color:#49677f!important}
#authModal:not(:has(#securityPanel:not(.hidden))) .modal-close:hover{background:rgba(13,122,181,.1)!important;color:#096ca9!important}

/* Logged-in account management stays compact and does not show the cinematic entrance. */
#authModal:has(#securityPanel:not(.hidden)) .auth-cinematic-bg,
#authModal:has(#securityPanel:not(.hidden)) .auth-brandbar,
#authModal:has(#securityPanel:not(.hidden)) .auth-story{display:none}
body:has(#authModal:not(.hidden)) .mobile-dock,
body:has(#authModal:not(.hidden)) .install-app-btn,
body:has(#authModal:not(.hidden)) .customer-service-btn{display:none!important}

/* A little more depth in the working product without changing its workflow. */
html body.workspace-readable .studio-stage{position:relative;isolation:isolate}
html body.workspace-readable .studio-stage::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(620px circle at 88% 8%,rgba(23,111,242,.07),transparent 58%),radial-gradient(540px circle at 58% 80%,rgba(22,195,165,.055),transparent 62%)}
html body.workspace-readable .topbar::after{content:"";position:absolute;left:24%;right:6%;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(23,111,242,.26),rgba(22,195,165,.3),transparent);pointer-events:none}

@media(max-width:1120px){
  #authModal:not(:has(#securityPanel:not(.hidden))){grid-template-columns:minmax(0,.85fr) minmax(360px,430px);gap:28px;padding-left:36px!important;padding-right:36px!important}
  .auth-story h1{font-size:clamp(42px,5.6vw,66px)}
  .auth-story-features{gap:8px}.auth-story-features span{min-height:39px;padding:0 13px}.auth-story-features b{font-size:11px}
}
@media(max-width:820px){
  #authModal:not(:has(#securityPanel:not(.hidden))){display:grid;grid-template-columns:1fr;place-items:center;padding:84px 16px 18px!important}
  .auth-brandbar{left:18px;right:18px;top:16px}.auth-brandbar img{width:43px;height:43px}.auth-brandbar-copy b{font-size:16px}.auth-brandbar::after{display:none}
  .auth-story{display:none}
  #authModal:not(:has(#securityPanel:not(.hidden))) #authForm{position:fixed!important;left:16px!important;right:16px!important;top:84px!important;grid-column:1;justify-self:stretch;min-width:0;width:auto!important;max-width:none!important;max-height:calc(100vh - 102px);margin:0!important;padding:22px 20px 23px;overflow-x:hidden}
  .auth-cinematic-bg::before{background:linear-gradient(180deg,rgba(1,7,18,.62),rgba(2,9,20,.35) 36%,rgba(1,7,18,.67)),linear-gradient(90deg,rgba(1,7,18,.5),rgba(1,7,18,.25))}
}
@media(max-width:430px){
  #authModal:not(:has(#securityPanel:not(.hidden))){padding:72px 10px 10px!important}
  .auth-brandbar{top:11px;left:13px}.auth-brandbar img{width:38px;height:38px}.auth-brandbar-copy small{font-size:7px}
  #authModal:not(:has(#securityPanel:not(.hidden))) #authForm{left:10px!important;right:10px!important;top:70px!important;width:auto!important;max-height:calc(100vh - 80px);padding:18px 16px 19px;border-radius:23px!important}
  #authModal:not(:has(#securityPanel:not(.hidden))) #authBrandMark{width:56px!important;height:56px!important}
  #authModal:not(:has(#securityPanel:not(.hidden))) #authTitle{font-size:21px!important}
  #authModal:not(:has(#securityPanel:not(.hidden))) #authMessage{font-size:10px!important}
  #authModal:not(:has(#securityPanel:not(.hidden))) .welcome-credit-tip{display:none!important}
  #authModal:not(:has(#securityPanel:not(.hidden))) .sms-code-row{grid-template-columns:minmax(0,1fr) 102px}
}
@media(prefers-reduced-motion:reduce){
  .auth-cinematic-scene,.auth-story-kicker,.auth-story h1,.auth-story>p,.auth-story-features span{transition:none}
}

/* Entrance mode: keep the login form hidden until the user asks for it. */
#authModal:not(.auth-form-open):not(:has(#securityPanel:not(.hidden))){grid-template-columns:minmax(0,1fr);place-items:center}
#authModal:not(.auth-form-open):not(:has(#securityPanel:not(.hidden))) .auth-story{width:min(860px,78vw);max-width:860px;justify-self:start}
#authModal:not(:has(#securityPanel:not(.hidden))) #authForm{position:fixed!important;z-index:8!important;left:50%!important;right:auto!important;top:50%!important;grid-column:auto!important;justify-self:auto!important;width:min(438px,calc(100vw - 32px))!important;max-height:calc(100dvh - 44px)!important;margin:0!important;animation:none!important;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-46%) scale(.965);transition:opacity .28s ease,transform .34s cubic-bezier(.2,.8,.2,1),visibility 0s linear .34s!important}
#authModal.auth-form-open:not(:has(#securityPanel:not(.hidden))) #authForm{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%) scale(1);transition-delay:0s!important}
#authModal .auth-cinematic-bg{transition:filter .42s ease,transform .55s ease}
#authModal.auth-form-open:not(:has(#securityPanel:not(.hidden))) .auth-cinematic-bg{filter:blur(12px) brightness(.7);transform:scale(1.035)}
#authModal.auth-form-open:not(:has(#securityPanel:not(.hidden))) .auth-story{opacity:.14;filter:blur(7px);transform:scale(.985);pointer-events:none}
#authModal.auth-form-open:not(:has(#securityPanel:not(.hidden))) .auth-brandbar{opacity:.42;filter:blur(2px)}
.auth-story{transition:opacity .46s ease,filter .38s ease,transform .46s cubic-bezier(.16,1,.3,1)}
.auth-brandbar{transition:opacity .38s ease,filter .38s ease}
.auth-story-detail{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.auth-story-detail span{display:grid;gap:4px;min-width:150px;padding:11px 14px;border-left:2px solid rgba(97,225,232,.72);background:linear-gradient(90deg,rgba(6,34,55,.62),rgba(6,28,46,.18));box-shadow:inset 0 1px rgba(255,255,255,.04);backdrop-filter:blur(10px)}
.auth-story-detail small{color:rgba(174,206,224,.64);font-size:9px;font-weight:750;letter-spacing:.12em}
.auth-story-detail b{color:#eaf8ff;font-size:12px;letter-spacing:.02em}

.auth-landing-login{display:flex;align-items:center;justify-content:center;gap:18px;min-width:190px;min-height:52px;margin-top:30px;padding:0 25px;border:1px solid rgba(103,235,234,.36);border-radius:14px;background:linear-gradient(112deg,#126edb,#0b9fbd 58%,#16baa7);color:#fff;font-size:15px;font-weight:900;letter-spacing:.05em;cursor:pointer;box-shadow:0 15px 38px rgba(0,94,179,.30),0 0 28px rgba(18,183,173,.13);transition:transform .2s ease,box-shadow .2s ease}
.auth-landing-login i{font-size:20px;font-style:normal;transition:transform .2s ease}
.auth-landing-login:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(0,94,179,.38),0 0 35px rgba(18,183,173,.2)}
.auth-landing-login:hover i{transform:translateX(4px)}
@media(max-width:820px){
  #authModal:not(.auth-form-open):not(:has(#securityPanel:not(.hidden))){place-items:end start;padding:86px 24px 40px!important}
  #authModal:not(.auth-form-open):not(:has(#securityPanel:not(.hidden))) .auth-story{display:block;width:100%;max-width:560px}
  #authModal:not(.auth-form-open):not(:has(#securityPanel:not(.hidden))) .auth-story h1{font-size:clamp(38px,11vw,62px)}
  #authModal:not(.auth-form-open):not(:has(#securityPanel:not(.hidden))) .auth-story-features{display:none}
  #authModal:not(.auth-form-open):not(:has(#securityPanel:not(.hidden))) .auth-story-detail span{min-width:calc(50% - 6px)}
  #authModal:not(:has(#securityPanel:not(.hidden))) #authForm{left:50%!important;right:auto!important;top:50%!important;width:min(438px,calc(100vw - 24px))!important;max-width:438px!important;max-height:calc(100dvh - 28px)!important}
}
@media(max-width:430px){
  #authModal:not(.auth-form-open):not(:has(#securityPanel:not(.hidden))){padding:74px 17px 25px!important}
  .auth-story>p{font-size:12px;line-height:1.75}.auth-story-detail{gap:7px;margin-top:16px}.auth-story-detail span{padding:8px 10px}.auth-landing-login{width:100%;margin-top:20px}
}
@media(prefers-reduced-motion:reduce){.auth-story,.auth-brandbar,.auth-story-detail,.auth-story-detail span,.auth-landing-login,#authModal .auth-cinematic-bg,#authModal:not(:has(#securityPanel:not(.hidden))) #authForm{transition:none!important}}

/* Include the independent title lines in reduced-motion support. */
@media(prefers-reduced-motion:reduce){
  #authModal *,#authModal *::before,#authModal *::after{animation:none!important;transition:none!important}
  #authModal .auth-cinematic-scene{transform:none}
}