:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f5f5f2;background:#101210;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0}
button,input{font:inherit}
a{color:inherit;text-decoration:none}
button,a,input{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #c6f588;outline-offset:5px}
.login-layout{min-height:100svh;display:grid;grid-template-columns:1.05fr 1fr}
.login-brand{position:relative;min-height:760px;overflow:hidden;padding:50px 60px;background:radial-gradient(ellipse at 52% 43%,#e6eddf 0,#dbe4d2 62%,#d4dfcb 100%);color:#1f2b1d}
.wordmark{position:relative;z-index:1;display:inline-flex;flex-direction:column;gap:8px;font-size:28px;letter-spacing:-1.2px;font-weight:750}
.wordmark span{font-size:9px;letter-spacing:3.2px;font-weight:550}
.brand-caption{position:absolute;bottom:50px;left:60px}
.brand-caption>span{font-size:11px;letter-spacing:2.8px;font-weight:650}
.brand-caption p{font-size:25px;line-height:1.4;letter-spacing:-.6px;margin:16px 0 0}
.light-object{position:absolute;inset:99px 8px 158px;pointer-events:none}
.glass-product{position:absolute;inset:0;margin:auto;display:block;width:100%;height:100%;min-width:0;min-height:0;max-height:650px;overflow:visible}
/* One inherited color drives the case guide and star together. Eight-second
   transitions keep the glass quietly illuminated, with no chase or flashing. */
.glass-product{color:#79c8b4;animation:login-ambient-light 32s ease-in-out infinite}
@keyframes login-ambient-light{
  0%,100%{color:#79c8b4}
  25%{color:#86b9e7}
  50%{color:#b19bd6}
  75%{color:#e6b676}
}
.login-panel{min-height:760px;padding:60px;display:flex;flex-direction:column;justify-content:center;position:relative}
.login-card{width:min(100%,360px);margin:auto}
.eyebrow{font-size:10px;font-weight:650;letter-spacing:2.5px;color:#c4eaa3}
h1{font-size:38px;font-weight:520;line-height:1.1;letter-spacing:-1.6px;margin:18px 0 14px}
.intro{font-size:14px;color:#929a90;line-height:1.6;margin-bottom:42px}
form{display:flex;flex-direction:column}
label{font-size:12px;color:#c5ccc2;margin:0 0 9px}
input{width:100%;height:50px;border:1px solid #353a33;border-radius:9px;background:#191c18;padding:0 14px;font-size:16px;color:#f7faf4}
.username-wrap{margin-bottom:23px}
.field-wrap{position:relative}
.password-wrap input{padding-right:88px}
.password-wrap button{position:absolute;right:8px;top:5px;width:72px;height:40px;padding:0 6px;border:0;background:none;color:#aeb9a6;font-size:12px;border-radius:5px}
.status{min-height:35px;font-size:12px;color:#edb59e;line-height:1.5;margin:12px 0 9px}
.primary{height:50px;border:0;border-radius:9px;background:#d2efb8;color:#1d2b15;display:flex;justify-content:space-between;align-items:center;padding:0 17px;font-size:14px;font-weight:650;transition:background .15s ease,transform .15s ease}
.primary:hover{background:#e2facd}
.primary:active{transform:scale(.99)}
button:disabled{opacity:.55;cursor:wait}
.access-note{font-size:11px;line-height:1.5;color:#737c6f;text-align:center;margin:23px 0 0}
footer{display:flex;justify-content:space-between;gap:20px;position:absolute;left:60px;right:60px;bottom:36px;font-size:11px;color:#939f8b;letter-spacing:1px}
footer span{font-size:8px;letter-spacing:1.5px;align-self:center}
@media(min-width:1100px) and (min-height:900px){.light-object{inset:105px 15px 175px}.brand-caption{bottom:60px}}
@media(max-width:850px){.login-brand{padding:36px;min-height:700px}.brand-caption{left:36px;bottom:42px}.brand-caption p{font-size:21px}.light-object{inset:84px -10px 148px}.login-panel{padding:36px;min-height:700px}footer{left:36px;right:36px;font-size:9px}footer span{display:none}}
@media(max-width:640px){.login-layout{display:flex;flex-direction:column}.login-brand{min-height:232px;height:232px;padding:28px 26px}.wordmark{font-size:24px}.wordmark span{font-size:8px;letter-spacing:2.5px}.brand-caption{left:26px;bottom:29px}.brand-caption>span{font-size:8px;letter-spacing:2px}.brand-caption p{display:none}.light-object{inset:auto;right:0;top:-7px;width:49%;height:245px}.glass-product{max-height:none}.login-panel{min-height:calc(100svh - 232px);padding:36px 26px 80px}.login-card{margin:0 auto}h1{font-size:32px;margin-top:14px}.intro{margin-bottom:28px}.eyebrow{font-size:9px}footer{left:26px;right:26px;bottom:25px}.access-note{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(prefers-reduced-motion:reduce){.glass-product{animation:none}}

/* Simultaneous, text-only crossfades. All four languages share one grid cell
   and contribute their size, so the input frames never shift between locales. */
.login-copy{display:grid}
.login-copy-plane{grid-area:1/1;min-width:0;opacity:0;pointer-events:none;transition:opacity 1.2s cubic-bezier(.45,0,.2,1)}
.login-copy-plane[data-visible="true"]{opacity:1}
.brand-caption p{white-space:pre-line;min-height:2.8em}
.login-card h1{min-height:1.1em}
.login-card .intro{min-height:3.2em}
.login-card h1 .login-copy-plane:not([lang="en"]){font-size:clamp(26px,2.5vw,34px);letter-spacing:-.7px;line-height:1.3}
.brand-caption>span .login-copy-plane:not([lang="en"]){letter-spacing:.6px}
.placeholder-copy{position:absolute;left:14px;right:14px;top:0;height:50px;align-items:center;font-size:16px;color:#757c71;pointer-events:none;user-select:none;white-space:nowrap;overflow:hidden}
.password-wrap .placeholder-copy{right:88px}
input::placeholder{color:transparent}
/* Never paint a translated hint over focus, typing or autofilled content.
   Separate selectors keep the WebKit fallback valid in older Safari. */
.placeholder-copy[hidden]{display:none!important}
.field-wrap:focus-within>.placeholder-copy{display:none!important}
input:not(:placeholder-shown)+.placeholder-copy{display:none!important}
input:autofill+.placeholder-copy{display:none!important}
input:-webkit-autofill+.placeholder-copy{display:none!important}
.password-wrap button .login-copy{text-align:center}
@media(max-width:640px){.login-card h1 .login-copy-plane:not([lang="en"]){font-size:27px}.login-card .intro{min-height:3.2em}}
@media(prefers-reduced-motion:reduce){.login-copy-plane{transition:none!important}}