.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 3vw, 44px);
  background:
    radial-gradient(circle at 18% 12%, var(--red-soft), transparent 22%),
    radial-gradient(ellipse at center, transparent 58%, rgba(var(--ink-rgb),.16) 100%),
    linear-gradient(180deg,var(--page-bg) 0%,var(--gray-150) 100%);
}
.login-shell {
  width: min(1180px, 100%);
  min-height: min(650px, calc(100vh - 56px));
  max-height: 760px;
  display: grid;
  grid-template-columns: minmax(390px, 42%) minmax(0, 58%);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 28px 70px rgba(var(--ink-rgb),.11);
}
.login-card {
  padding: clamp(38px, 4.4vw, 64px);
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--white);
}
.login-brandline { display:flex; align-items:center; gap:12px; min-height:34px; }
.login-brandline img { width:64px; height:auto; }
.login-brandline span { padding-left:12px; border-left:1px solid var(--border); color:var(--gray-700); font-size:11px; font-weight:700; }
.login-copy { margin:auto 0 26px; }
.login-kicker { margin:0 0 12px; color:var(--red); font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.login-card h1 { margin:0; max-width:420px; font-size:clamp(30px,2.8vw,40px); font-weight:650; line-height:1.14; letter-spacing:-.04em; }
.login-note { max-width:400px; margin:16px 0 0; color:var(--gray-600); font-size:11px; line-height:1.7; }
.login-card form { display:grid; gap:9px; }
.login-card label { margin-top:9px; color:var(--gray-700); font-size:9px; font-weight:700; }
.login-card input { min-height:48px; padding:0 14px; border:1px solid var(--gray-300); border-radius:9px; background:var(--gray-50); transition:border-color .15s,box-shadow .15s,background .15s; }
.login-card input:focus { border-color:var(--ink); background:var(--white); box-shadow:0 0 0 3px rgba(var(--ink-rgb),.05); }
.login-card button[type="submit"] { min-height:48px; margin-top:14px; border:0; border-radius:9px; background:var(--red); color:var(--white); font-size:10px; font-weight:800; transition:transform .15s,background .15s; }
.login-card button[type="submit"]:hover { background:var(--red-dark); transform:translateY(-1px); }
.login-error { margin:8px 0 0; color:var(--danger); font-size:9px; }
.login-legal { margin:26px 0 0; color:var(--gray-400); font-size:7.5px; }
.login-hero { position:relative; min-height:100%; overflow:hidden; background:var(--gray-200); }
.login-hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.login-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(var(--ink-rgb),.05) 45%,rgba(var(--ink-rgb),.55) 100%); pointer-events:none; }
.login-hero-overlay { position:absolute; inset:0; z-index:2; padding:28px; display:flex; align-items:flex-end; pointer-events:none; }
.hero-status { position:absolute; top:24px; left:24px; display:inline-flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid rgba(255,255,255,.6); border-radius:999px; background:rgba(255,255,255,.82); backdrop-filter:blur(10px); color:var(--ink); font-size:8px; font-weight:800; }
.hero-status i { width:6px; height:6px; border-radius:50%; background:var(--red); }
.hero-card { min-width:0; padding:14px 16px; border:1px solid rgba(255,255,255,.26); border-radius:12px; background:rgba(var(--ink-rgb),.76); backdrop-filter:blur(12px); color:var(--white); }
.hero-card small { display:block; margin-bottom:4px; color:var(--gray-300); font-size:7px; text-transform:uppercase; letter-spacing:.1em; }
.hero-card strong { font-size:11px; font-weight:700; white-space:nowrap; }
.hero-card-primary { flex:0 1 auto; }
.login-footer { margin-top:22px; text-align:center; color:var(--gray-500); font-size:8px; }