/* Approved workbench neutrals. Artwork never blocks authentication. */
:root { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; color:var(--brand-ink); background:var(--brand-white); color-scheme:light; --login-muted:var(--brand-muted); --login-accent:var(--brand-focus); --login-line:var(--brand-stone); }
* { box-sizing:border-box; }
body { margin:0; }
button,input { font:inherit; }
button { cursor:pointer; }
[hidden] { display:none !important; }
.login-shell { display:grid; grid-template-columns:minmax(0,42fr) minmax(0,58fr); min-height:100svh; }
.login-side { display:grid; grid-template-rows:auto 1fr auto; min-width:0; padding:44px clamp(28px,4.5vw,80px) 32px; }
.login-brand { display:flex; align-items:center; gap:12px; font-size:20px; font-weight:600; letter-spacing:-.4px; }
.login-brand-mark { display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:50%; background:var(--brand-ink); color:var(--brand-surface); font-size:23px; font-weight:500; }
.login-brand small { display:block; margin-top:3px; color:var(--login-muted); font-size:11px; font-weight:400; letter-spacing:.05em; }
.login-panel { width:100%; max-width:370px; margin:auto; padding:50px 0 46px; }
.login-caption { color:var(--login-muted); font-size:12px; margin:0 0 18px; }
h1 { margin:0; font-size:32px; line-height:1.38; font-weight:550; letter-spacing:-.025em; }
h1 span { font-size:36px; font-weight:600; letter-spacing:-.035em; }
.login-description { margin:17px 0 32px; font-size:13px; line-height:1.8; color:var(--login-muted); text-wrap:pretty; }
.login-field { margin:0 0 20px; }
.login-field label { display:block; margin-bottom:9px; font-size:13px; font-weight:550; }
.login-field input { display:block; width:100%; min-width:0; height:52px; padding:0 15px; border:1px solid var(--login-line); border-radius:10px; background:var(--brand-white); color:var(--brand-ink); font-size:14px; transition:border-color .2s,background .2s; }
.login-field input::placeholder { color:var(--brand-muted); opacity:1; }
.login-field input:hover { border-color:var(--brand-linen); }
.login-field input:focus { border-color:var(--login-accent); background:var(--brand-surface); outline:2px solid #68548f26; outline-offset:2px; }
.login-password { position:relative; }
.login-password input { padding-right:54px; }
.password-toggle { display:grid; place-items:center; position:absolute; top:4px; right:4px; width:44px; height:44px; border:0; border-radius:8px; background:transparent; color:var(--brand-muted); }
.password-toggle:hover { background:var(--brand-accent-soft); color:var(--brand-ink); }
.password-toggle svg { width:21px; height:21px; }
.eye-slash { display:none; }
.password-toggle[aria-pressed=true] .eye-slash { display:block; }
#login-message { color:#a1382b; font-size:12px; line-height:1.65; min-height:20px; margin:-3px 0 14px; overflow-wrap:anywhere; }
#login-submit { display:block; width:100%; min-height:50px; padding:13px 22px; border:0; border-radius:999px; background:var(--brand-ink); color:var(--brand-surface); font-size:14px; font-weight:550; transition:background .2s,transform .15s; }
#login-submit:hover:not(:disabled) { background:var(--brand-ink); }
#login-submit:active:not(:disabled) { transform:translateY(1px); }
#login-submit:disabled { background:var(--brand-muted); cursor:wait; }
:focus-visible { outline:2px solid var(--login-accent); outline-offset:4px; }
.login-help { margin:20px 0 0; color:var(--login-muted); font-size:11px; line-height:1.85; text-align:center; }
.login-noscript { font-size:13px; line-height:1.7; color:#a1382b; }
.login-foot { display:flex; align-items:center; gap:8px; color:var(--login-muted); font-size:10px; line-height:1.8; }
.login-foot svg { width:15px; height:15px; flex:none; }
.login-foot-divider { padding:0 7px; }
.login-hero { position:relative; isolation:isolate; min-width:0; overflow:hidden; margin:12px 12px 12px 0; min-height:640px; border-radius:16px; background:var(--brand-ink); color:var(--brand-surface); }
.login-hero-motion { position:absolute; inset:0; transform-origin:54% 62%; animation:login-hero-drift 20s cubic-bezier(.45,0,.55,1) infinite alternate; animation-play-state:paused; }
.login-hero-motion[data-motion=running] { animation-play-state:running; }
@keyframes login-hero-drift {
  from { transform:translate3d(0,0,0) scale(1); }
  to { transform:translate3d(-.3%,-.2%,0) scale(1.025); }
}
.login-hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 53%; transform:translate(var(--hero-x,0px),var(--hero-y,0px)) scale(1.025); transition:transform .65s cubic-bezier(.22,1,.36,1); }
.login-hero-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(17,19,22,.48),rgba(17,19,22,.10) 40%,transparent 62%,rgba(17,19,22,.68)); pointer-events:none; }
.login-hero-copy { position:relative; padding:clamp(36px,3.05vw,58px) clamp(30px,4.3vw,68px) 100px; pointer-events:none; }
.login-hero-label { margin:0 0 18px; font-size:12px; letter-spacing:.12em; color:var(--brand-white); }
.login-hero h2 { margin:0; font-size:clamp(36px,3.4vw,58px); line-height:1.28; letter-spacing:-.035em; font-weight:550; text-wrap:balance; }
.login-hero-description { max-width:32em; margin:16px 0 0; font-size:13px; line-height:1.85; color:var(--brand-accent-soft); text-wrap:pretty; }
.login-hero-foot { display:flex; align-items:center; justify-content:space-between; gap:18px; position:absolute; bottom:34px; left:clamp(30px,4.3vw,68px); right:clamp(30px,4.3vw,68px); color:var(--brand-surface); font-size:10px; letter-spacing:.16em; line-height:1.7; }
.login-hero-signature { font-size:12px; letter-spacing:-.02em; font-weight:500; }
.login-hero-controls { display:flex; align-items:center; gap:14px; }
#hero-motion-toggle { flex:none; min-height:44px; padding:0 13px; border:1px solid #ffffff50; border-radius:999px; color:var(--brand-surface); background:var(--brand-ink); font-size:11px; letter-spacing:0; }
#hero-motion-toggle:hover:not(:disabled) { background:var(--brand-ink); border-color:#ffffff90; }
#hero-motion-toggle:focus-visible { outline-color:var(--brand-surface); }
#hero-motion-toggle:disabled { cursor:default; color:var(--brand-soft); }
@media(min-width:901px) and (max-height:780px) {
  .login-side { padding-top:30px; padding-bottom:24px; }
  .login-panel { padding-top:32px; padding-bottom:28px; }
  .login-hero { min-height:600px; }
  .login-description { margin-bottom:24px; }
  .login-hero-copy { padding-top:30px; }
  .login-hero-label { margin-bottom:14px; }
  .login-hero h2 { font-size:42px; line-height:1.18; }
  .login-hero-description { margin-top:12px; font-size:12px; }
}
@media(min-width:901px) and (max-width:1050px) {
  .login-shell { grid-template-columns:minmax(330px,46fr) minmax(0,54fr); }
  .login-side { padding-left:28px; padding-right:28px; }
  .login-hero-copy { padding:42px 28px; }
  .login-hero h2 { font-size:36px; }
  .login-hero-description { max-width:20em; }
  .login-hero-signature { display:none; }
}
@media(max-width:900px), (max-aspect-ratio:4/5) {
  .login-shell { display:flex; flex-direction:column; }
  .login-side { padding:30px 28px 24px; min-height:100svh; }
  .login-brand { font-size:18px; }
  .login-brand-mark { width:38px; height:38px; font-size:21px; }
  .login-panel { max-width:390px; padding:42px 0 34px; }
  h1 { font-size:28px; }
  h1 span { font-size:32px; }
  .login-description { font-size:12px; }
  .login-foot { justify-content:center; font-size:10px; flex-wrap:wrap; }
  .login-hero { min-height:510px; aspect-ratio:4/5; margin:0 12px 12px; }
  .login-hero-image { object-position:50% 58%; transform:none; }
  .login-hero-copy { padding:26px; }
  .login-hero h2 { font-size:30px; line-height:1.2; }
  .login-hero-label { margin-bottom:12px; font-size:11px; }
  .login-hero-description { max-width:22em; font-size:11px; margin-top:12px; }
  .login-hero-foot { bottom:24px; left:26px; right:26px; font-size:9px; }
  .login-hero-signature { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; }
  .login-hero-image,.login-hero-motion { transform:none; }
}