:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  --blue: #0568d8;
  --blue-dark: #064c93;
  --cyan: #00c9f3;
  --ink: #121820;
  --muted: #657185;
  --line: #d8e1ed;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--ink); background: #f5f8fc; }
button, input { font: inherit; }

.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(480px, 3fr) minmax(390px, 2fr); }
.login-visual { position: relative; min-height: 100vh; overflow: hidden; color: #fff; background: linear-gradient(142deg, #0875bd 0%, #045da7 46%, #073e78 100%); }
.login-visual::before { content: ""; position: absolute; inset: 0; opacity: .55; background: radial-gradient(circle at 15% 12%, rgba(0,220,255,.28), transparent 30%), radial-gradient(circle at 82% 42%, rgba(0,159,236,.3), transparent 33%), linear-gradient(115deg, transparent 52%, rgba(255,255,255,.06)); }
.visual-glow { position: absolute; width: 55vw; height: 55vw; min-width: 620px; min-height: 620px; left: 24%; top: 18%; border-radius: 50%; background: radial-gradient(circle, rgba(0,205,244,.18), transparent 68%); filter: blur(5px); }
.flow-lines { position: absolute; inset: -8% -15% 5% 10%; transform: rotate(-9deg); opacity: .5; }
.flow-lines span { position: absolute; width: 105%; height: 43%; left: 0; border-top: 2px solid rgba(0,207,255,.48); border-radius: 50%; filter: drop-shadow(0 0 7px rgba(0,209,255,.38)); }
.flow-lines span:nth-child(1) { top: 16%; transform: rotate(8deg); }
.flow-lines span:nth-child(2) { top: 26%; transform: rotate(3deg); border-color: rgba(116,224,255,.42); }
.flow-lines span:nth-child(3) { top: 37%; transform: rotate(-4deg); }
.flow-lines span:nth-child(4) { top: 50%; transform: rotate(-11deg); border-color: rgba(153,213,60,.28); }
.flow-lines span:nth-child(5) { top: 64%; transform: rotate(-17deg); }
.flow-lines::after { content: ""; position: absolute; inset: 11% 4% 4% 9%; background-image: radial-gradient(circle, rgba(145,237,255,.8) 0 1px, transparent 2px); background-size: 46px 31px; mask-image: linear-gradient(120deg, transparent 8%, #000 38%, transparent 85%); }

.visual-content { position: relative; z-index: 1; width: min(720px, calc(100% - 110px)); min-height: 100vh; margin: 0 auto; padding: clamp(46px, 7vh, 76px) 0 38px; display: flex; flex-direction: column; }
.login-brand img { display: block; width: 215px; filter: brightness(0) invert(1); }
.login-brand p { margin: 13px 0 0; font-size: 14px; letter-spacing: .02em; }
.visual-copy { margin: auto 0 50px; max-width: 680px; }
.visual-eyebrow { margin: 0 0 16px; color: #8cecff; font-size: 11px; font-weight: 800; letter-spacing: .2em; }
.visual-copy h1 { margin: 0; font-size: clamp(43px, 4.2vw, 65px); line-height: 1.08; letter-spacing: -.045em; }
.visual-intro { max-width: 600px; margin: 24px 0 0; color: rgba(255,255,255,.84); font-size: 16px; line-height: 1.65; }
.login-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-bottom: 34px; }
.login-features > div { min-height: 88px; display: flex; flex-direction: column; justify-content: center; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; padding: 17px 20px; background: rgba(255,255,255,.09); backdrop-filter: blur(9px); }
.login-features strong { font-size: 19px; }
.login-features span { margin-top: 6px; color: rgba(255,255,255,.76); font-size: 12px; }
.vpn-label { display: flex; align-items: center; gap: 9px; margin: 0; color: rgba(255,255,255,.74); font-size: 11px; }
.vpn-label span { width: 7px; height: 7px; border-radius: 50%; background: #56e6a4; box-shadow: 0 0 0 4px rgba(86,230,164,.14); }

.login-access { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 40px; background: radial-gradient(circle at 50% 44%, #fff 0, #f7f9fc 54%, #eff4f9 100%); }
.login-card { width: min(420px, 100%); border: 1px solid var(--line); border-radius: 14px; padding: 44px 42px 36px; background: rgba(255,255,255,.95); box-shadow: 0 24px 70px rgba(32,64,105,.13); }
.card-eyebrow { margin: 0 0 9px; color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .17em; }
.login-card h2 { margin: 0; font-size: 34px; letter-spacing: -.035em; }
.card-intro { margin: 10px 0 30px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.login-field { margin-bottom: 17px; }
.login-field label { display: block; margin: 0 0 7px; color: #344054; font-size: 12px; font-weight: 750; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > svg { position: absolute; left: 13px; width: 18px; height: 18px; fill: none; stroke: #7b8797; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.input-wrap input { width: 100%; height: 48px; border: 1px solid #cdd8e6; border-radius: 8px; padding: 0 43px; color: var(--ink); background: #fbfcfe; outline: none; font-size: 13px; transition: border-color .18s, box-shadow .18s, background .18s; }
.input-wrap input::placeholder { color: #98a2b1; }
.input-wrap input:focus { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(5,104,216,.1); }
.show-password { position: absolute; right: 7px; width: 35px; height: 35px; display: grid; place-items: center; border: 0; border-radius: 6px; padding: 0; color: #748094; background: transparent; cursor: pointer; }
.show-password:hover { color: var(--blue); background: #edf4fd; }
.show-password svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.password-wrap input { padding-right: 48px; }
.login-status { margin: 3px 0 15px; border: 1px solid #f0c1bc; border-radius: 7px; padding: 10px 11px; color: #a4362d; background: #fff4f2; font-size: 11px; line-height: 1.4; }
.login-submit { width: 100%; height: 49px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 8px; margin-top: 6px; color: #fff; background: linear-gradient(118deg, #075fc4, #0983cf); box-shadow: 0 9px 22px rgba(5,104,216,.22); font-size: 13px; font-weight: 800; cursor: pointer; }
.login-submit:hover { background: linear-gradient(118deg, #054eaa, #0874ba); transform: translateY(-1px); }
.login-submit:disabled { opacity: .65; cursor: wait; transform: none; }
.login-submit svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.access-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 24px 0 0; color: #7a8493; font-size: 10px; text-align: center; }
.access-note svg { flex: none; width: 15px; height: 15px; fill: none; stroke: #348268; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.login-footer { position: absolute; bottom: 22px; margin: 0; color: #8a94a3; font-size: 10px; }
.mobile-brand { display: none; }

@media (max-width: 980px) {
  .login-shell { grid-template-columns: minmax(390px, 1fr) minmax(370px, .9fr); }
  .visual-content { width: calc(100% - 64px); }
  .visual-copy h1 { font-size: 42px; }
  .login-features { grid-template-columns: 1fr; gap: 8px; }
  .login-features > div { min-height: 58px; padding: 11px 15px; }
  .login-features strong { font-size: 15px; }
  .login-features span { margin-top: 2px; }
}

@media (max-width: 760px) {
  .login-shell { display: block; }
  .login-visual { display: none; }
  .login-access { min-height: 100vh; padding: 86px 22px 60px; }
  .mobile-brand { position: absolute; top: 28px; display: block; }
  .mobile-brand img { width: 150px; }
  .login-card { width: min(430px, 100%); padding: 35px 27px 29px; }
  .login-footer { bottom: 18px; }
}

@media (max-height: 700px) and (min-width: 761px) {
  .visual-content { padding-top: 32px; padding-bottom: 24px; }
  .login-brand img { width: 180px; }
  .visual-copy { margin-bottom: 30px; }
  .visual-copy h1 { font-size: 39px; }
  .visual-intro { margin-top: 15px; font-size: 13px; }
  .login-features { margin-bottom: 22px; }
  .login-card { padding-top: 34px; padding-bottom: 29px; }
}