:root {
  --vps-action-blue: #009ceb;
  --vps-action-blue-hover: #0088ce;
  --vps-action-blue-pressed: #0078b8;
  --vps-navy: #0f2b46;
  --vps-deep-navy: #071437;
  --vps-midnight: #09083f;
  --vps-canvas: #f8fafc;
  --vps-surface: #fff;
  --vps-text: #111827;
  --vps-muted: #536176;
  --vps-border: #d9e1ea;
  --vps-error: #c62828;
  --vps-success: #18794e;
  --vps-heading: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, sans-serif;
  --vps-body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--vps-canvas); color: var(--vps-text); font-family: var(--vps-body); }
a { color: var(--vps-action-blue-pressed); }

.auth-shell {
  display: grid;
  grid-template-columns: minmax(420px, 43%) 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

.brand-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(48px, 5vw, 80px);
  background:
    radial-gradient(circle at 93% 92%, rgba(0,156,235,.24), transparent 34%),
    radial-gradient(circle at 14% 8%, rgba(0,72,160,.18), transparent 38%),
    linear-gradient(145deg, #050c31, var(--vps-deep-navy) 55%, #082549);
  color: #fff;
}

.brand-panel::after {
  content: "";
  position: absolute;
  width: 640px;
  height: 640px;
  right: -330px;
  bottom: -340px;
  border: 1px solid rgba(0, 156, 235, 0.24);
  border-radius: 50%;
  box-shadow: 0 0 0 64px rgba(0, 156, 235, 0.05), 0 0 0 132px rgba(8, 167, 161, 0.035);
  pointer-events: none;
}

.brand-logo { position: relative; z-index: 2; display: block; width: min(100%, 500px); height: auto; overflow: visible; }
.brand-flow { position: absolute; z-index: 0; right: -4%; bottom: -5%; width: 93%; height: 88%; opacity: .78; pointer-events: none; }
.brand-flow path { fill: none; stroke: url(#flow-a); stroke-width: 2.2; }
.brand-flow .flow-bright { stroke-width: 3; filter: drop-shadow(0 0 7px rgba(38,225,209,.58)); }
.brand-message { position: relative; z-index: 1; max-width: 520px; margin: auto 0; }
.brand-message h1 { margin: 24px 0 14px; font: 800 clamp(32px, 4vw, 46px)/1.12 var(--vps-heading); }
.brand-message p { margin: 0; max-width: 48ch; color: rgba(255,255,255,.82); font-size: 17px; line-height: 1.65; }
.lock-mark { display: inline-grid; place-items: center; width: 66px; height: 66px; color: #24ded0; }
.lock-mark svg { width: 62px; height: 62px; stroke: currentColor; }
.security-line { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; margin: 30px 0 0; color: rgba(255,255,255,.72); font-size: 14px; }
.security-line svg { width: 17px; height: 17px; stroke: #69caff; }

.form-panel { display: grid; place-items: center; padding: 48px clamp(24px, 7vw, 112px); background: radial-gradient(circle at 50% 42%, #fff 0, #fff 20%, #f8fafc 72%); }
.auth-card { width: min(100%, 660px); padding: clamp(30px, 5vw, 52px); border: 1px solid var(--vps-border); border-radius: 14px; background: rgba(255,255,255,.98); box-shadow: 0 24px 70px rgba(15,43,70,.11); }
.auth-card.login-screen { width: min(100%, 700px); padding: clamp(38px, 5vw, 58px); }
.login-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; padding: 7px 11px; border-radius: 999px; background: #e9f6fd; color: var(--vps-navy); font: 700 13px/1 var(--vps-body); letter-spacing: .07em; }
.login-badge svg { width: 16px; height: 16px; stroke: var(--vps-action-blue-pressed); }
.auth-card h2 { margin: 0 0 14px; color: var(--vps-navy); font: 800 clamp(28px, 3vw, 38px)/1.2 var(--vps-heading); }
.lead { margin: 0 0 28px; color: var(--vps-muted); font-size: 16px; line-height: 1.65; }
.button { display: inline-flex; width: 100%; min-height: 58px; align-items: center; justify-content: center; gap: 10px; padding: 0 22px; border: 0; border-radius: 9px; background: var(--vps-action-blue); color: #fff; font: 700 16px/1 var(--vps-body); text-decoration: none; cursor: pointer; }
.button:hover { background: var(--vps-action-blue-hover); }
.button:active { background: var(--vps-action-blue-pressed); }
.button:focus-visible, .text-link:focus-visible { outline: 3px solid rgba(0,156,235,.35); outline-offset: 3px; }
.button svg { width: 20px; height: 20px; stroke: currentColor; }
form { display: grid; gap: 12px; }
label { margin-top: 5px; color: var(--vps-navy); font-weight: 700; font-size: 14px; }
input, select { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid #b8c5d3; border-radius: 8px; color: var(--vps-text); background: #fff; font: 500 16px/1 var(--vps-body); }
input:focus, select:focus { border-color: var(--vps-action-blue); outline: 3px solid rgba(0,156,235,.18); }
form .button { margin-top: 10px; }
.login-screen .login-badge { display: flex; width: max-content; margin: 0 auto 30px; padding: 10px 16px; color: #006be6; font-size: 15px; letter-spacing: 0; }
.login-screen form { gap: 14px; }
.login-screen label { margin-top: 0; font-size: 16px; }
.show-password { position: absolute; z-index: 2; right: 20px; top: 50%; transform: translateY(-50%); border: 0; padding: 8px 0 8px 12px; background: #fff; color: #006be6; font: 600 15px/1 var(--vps-body); cursor: pointer; }
.show-password:hover { text-decoration: underline; text-underline-offset: 3px; }
.show-password:focus-visible { outline: 3px solid rgba(0,156,235,.26); outline-offset: 3px; border-radius: 3px; }
.input-wrap { position: relative; }
.input-wrap > svg { position: absolute; z-index: 1; left: 20px; top: 50%; width: 25px; height: 25px; transform: translateY(-50%); stroke: #667792; pointer-events: none; }
.input-wrap input { min-height: 64px; padding: 0 20px 0 64px; border-color: #c8d2df; border-radius: 8px; font-size: 17px; }
.password-wrap input { padding-right: 72px; }
.login-screen .button { min-height: 64px; margin-top: 14px; border-radius: 8px; background: linear-gradient(90deg, #0878f8, #056af0); font-size: 18px; }
.login-screen .button:hover { background: linear-gradient(90deg, #006eea, #005fdc); }
.support-line { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 30px 0 0; color: var(--vps-muted); font-size: 15px; line-height: 1.5; text-align: center; }
.support-line svg { flex: 0 0 auto; width: 23px; height: 23px; stroke: #667792; }
.password-help { margin: 14px 0 0; text-align: center; font-size: 14px; }
.field-help { margin: 0 0 4px; color: var(--vps-muted); font-size: 13px; line-height: 1.5; }
.success { margin: 0 0 22px; padding: 14px 16px; border-left: 4px solid var(--vps-success); border-radius: 7px; background: #effaf5; color: #125d3d; font-size: 15px; line-height: 1.5; }
.mfa-qr-panel { display: grid; justify-items: center; gap: 10px; margin: 0 0 22px; }
.mfa-qr-panel canvas { display: block; width: 240px; height: 240px; max-width: 100%; padding: 10px; border: 1px solid var(--vps-border); border-radius: 12px; background: #fff; box-shadow: 0 10px 28px rgba(15,43,70,.08); }
.mfa-qr-panel .field-help { margin: 0; text-align: center; }
.manual-mfa-setup { margin: 0 0 24px; padding: 14px 16px; border: 1px solid var(--vps-border); border-radius: 10px; background: var(--vps-canvas); }
.manual-mfa-setup > summary { color: var(--vps-navy); font-weight: 700; cursor: pointer; }
.manual-mfa-setup[open] > summary { margin-bottom: 14px; }
.manual-mfa-setup .setup-key { margin-bottom: 14px; background: #fff; }
.manual-mfa-setup details { margin-bottom: 0; }
.setup-key { display: grid; gap: 8px; margin: 0 0 18px; padding: 16px; border: 1px solid var(--vps-border); border-radius: 10px; background: var(--vps-canvas); }
.setup-key span { color: var(--vps-muted); font-size: 13px; }
.setup-key code, .uri { overflow-wrap: anywhere; color: var(--vps-navy); font: 700 15px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
details { margin: 0 0 20px; color: var(--vps-muted); }
details .uri { display: block; margin-top: 10px; font-size: 12px; }
.recovery-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 0 0 22px; }
.recovery-grid code { padding: 10px; border: 1px solid var(--vps-border); border-radius: 7px; background: var(--vps-canvas); text-align: center; }
.helper { margin: 22px 0 0; color: var(--vps-muted); font-size: 14px; line-height: 1.55; text-align: center; }
.return-link { margin: 28px 0 0; padding-top: 26px; border-top: 1px solid var(--vps-border); text-align: left; }
.return-link a { display: inline-flex; align-items: center; gap: 9px; color: #006be6; text-decoration: none; }
.return-link svg { width: 24px; height: 24px; stroke: currentColor; }
.text-link { color: var(--vps-navy); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.notice { margin: 0 0 22px; padding: 14px 16px; border-left: 4px solid var(--vps-error); border-radius: 7px; background: #fff4f4; color: #7c1d1d; font-size: 15px; line-height: 1.5; }
.notice.info { border-left-color: var(--vps-teal); background: #eef9fc; color: var(--vps-navy); }
.profile { display: grid; gap: 6px; margin: 0 0 26px; padding: 18px; border: 1px solid var(--vps-border); border-radius: 12px; background: var(--vps-canvas); }
.profile strong { color: var(--vps-navy); }
.profile span { color: var(--vps-muted); }
.app-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin: 0 0 24px; }
.app-card { padding: 18px; border: 1px solid var(--vps-border); border-radius: 12px; color: var(--vps-navy); text-decoration: none; }
.app-card:hover { border-color: var(--vps-action-blue); box-shadow: 0 8px 24px rgba(15,43,70,.08); }
.app-card strong { display: block; margin-bottom: 6px; }
.app-card span { color: var(--vps-muted); font-size: 14px; }
.impersonation-banner { margin: 0 0 22px; padding: 15px 17px; border: 1px solid #82d2f5; border-radius: 10px; background: #eefaff; color: var(--vps-navy); }
.impersonation-banner strong, .impersonation-banner span { display: block; }
.impersonation-banner span { margin-top: 5px; color: var(--vps-muted); font-size: 13px; line-height: 1.45; }
.impersonation-banner form { display: block; margin-top: 12px; }
.impersonation-banner button { min-height: 38px; width: auto; padding: 0 14px; }

@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .brand-panel { min-height: auto; gap: 34px; padding: 28px 24px 32px; }
  .brand-logo { width: min(72vw, 320px); }
  .brand-flow { right: -28%; bottom: -25%; width: 75%; height: 140%; }
  .brand-message { margin: 10px 0; }
  .brand-message h1 { font-size: 30px; }
  .form-panel { padding: 30px 20px 42px; }
}

@media (max-width: 520px) {
  .app-grid { grid-template-columns: 1fr; }
  .auth-card { padding: 28px 22px; }
  .auth-card.login-screen { padding: 30px 22px; }
  .input-wrap input { min-height: 58px; }
  .support-line { align-items: flex-start; text-align: left; }
}

@media (prefers-reduced-motion: no-preference) {
  .brand-flow .flow-bright { stroke-dasharray: 12 10; animation: vps-flow 8s linear infinite; }
}
@keyframes vps-flow { to { stroke-dashoffset: -88; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
@media (forced-colors: active) { .button, .auth-card, .app-card { border: 2px solid ButtonText; } }