.login-page { min-height: 100svh; display: grid; place-items: center; overflow-x: hidden; padding: clamp(1rem,3vw,2rem); background: radial-gradient(circle at 35% 0, #12294a 0, #07111f 46%, #02040a 100%); }
.login-shell { width: min(100%,70rem); min-height: min(38rem,calc(100svh - 2rem)); display: grid; grid-template-columns: minmax(0,1.08fr) minmax(25rem,0.92fr); overflow: hidden; border: 1px solid #41516b; border-radius: 1.6rem; background: var(--surface); box-shadow: 0 2rem 8rem rgba(0,0,0,0.52); }
.login-visual { min-width: 0; position: relative; display: grid; align-content: space-between; gap: 3rem; overflow: hidden; padding: clamp(2rem,5vw,4rem); background: linear-gradient(145deg,#102b56 0%,#0b1d39 55%,#07111f 100%); isolation: isolate; }
.login-brand { display: flex; align-items: center; gap: 0.9rem; font-size: 0.88rem; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; }
.login-brand-logo { width: 4.5rem; height: 4.5rem; object-fit: contain; filter: brightness(0) invert(1); }
.login-product-copy { width: min(100%,31rem); position: relative; z-index: 1; }
.login-product-copy h1 { max-width: 9em; margin: 0; font-size: clamp(2.8rem,5.2vw,4.8rem); line-height: 0.95; letter-spacing: -0.045em; }
.login-product-copy > p:last-child { max-width: 30rem; margin: 1.3rem 0 0; color: var(--muted); font-size: clamp(1rem,1.6vw,1.15rem); line-height: 1.5; }
.login-watermark { width: min(32rem,80%); position: absolute; right: -14%; bottom: -19%; z-index: -1; opacity: 0.08; filter: brightness(0) invert(1); transform: rotate(-8deg); }
.login-card { min-width: 0; display: grid; align-content: center; gap: 1rem; padding: clamp(2rem,5vw,4rem); background: rgba(20,25,35,0.98); }
.login-mobile-brand { display: none; }
.login-card h2 { margin: 0; font-size: clamp(2.2rem,5vw,3.4rem); line-height: 1; letter-spacing: -0.035em; }
.login-intro { margin: 0 0 0.4rem; color: var(--muted); line-height: 1.5; }
.login-form { display: grid; gap: 0.65rem; }
.login-form > label { margin-top: 0.2rem; }
.login-form > input:not([type="hidden"]) { margin-bottom: 0.35rem; border-color: #5b6c88; background-color: #0a1019; }
.login-form .button { min-height: 3.25rem; margin-top: 0.65rem; }
@media (max-width: 760px) {
  .login-page { place-items: start center; }
  .login-shell { width: min(100%,34rem); min-height: 0; grid-template-columns: 1fr; }
  .login-visual { min-height: 10rem; align-content: end; padding: 1.5rem; }
  .login-brand { display: none; }
  .login-product-copy h1 { max-width: 12em; font-size: clamp(2rem,9vw,3rem); }
  .login-product-copy > p:last-child { display: none; }
  .login-watermark { width: 15rem; right: -2rem; bottom: -7rem; }
  .login-card { padding: 1.5rem; }
  .login-mobile-brand { display: flex; align-items: center; gap: 0.65rem; color: var(--muted); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
  .login-mobile-brand img { width: 2.5rem; height: 2.5rem; object-fit: contain; filter: brightness(0) invert(1); }
}
@media (max-height: 650px) and (min-width: 761px) {
  .login-shell { min-height: calc(100svh - 2rem); }
  .login-visual, .login-card { padding-block: 1.5rem; }
  .login-product-copy h1 { font-size: clamp(2.5rem,5vw,4rem); }
}