:root {
  --navy-950: #071a25;
  --ink: #162b34;
  --muted: #6d7d80;
  --paper: #f4f1e9;
  --line: #d5d2c8;
  --accent: #ed6a3a;
  --white: #fffdf8;
  font-family: "DM Sans", Inter, system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
.login-shell { min-height: 100svh; display: grid; grid-template-columns: minmax(340px, .95fr) minmax(430px, 1.05fr); }
.login-brand { min-height: 100svh; padding: clamp(34px, 5vw, 72px); display: flex; flex-direction: column; color: #f8f3e8; background: var(--navy-950); overflow: hidden; position: relative; }
.login-brand::after { content: ""; position: absolute; right: -12vw; bottom: -20vw; width: 48vw; aspect-ratio: 1; border: 1px solid rgb(237 106 58 / .28); border-radius: 50%; box-shadow: 0 0 0 8vw rgb(255 255 255 / .018), 0 0 0 16vw rgb(255 255 255 / .012); animation: tide 8s ease-in-out infinite alternate; }
.brand { position: relative; z-index: 1; color: inherit; text-decoration: none; display: flex; gap: 13px; align-items: center; }
.brand strong { display: block; font-size: 20px; letter-spacing: -.03em; }
.brand small { color: #8fa5ac; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.brand-mark { width: 34px; display: flex; flex-direction: column; gap: 4px; }
.brand-mark i { height: 2px; border-radius: 9px; background: var(--accent); }
.brand-mark i:nth-child(2) { width: 25px; }
.brand-mark i:nth-child(3) { width: 16px; }
.brand-message { position: relative; z-index: 1; max-width: 650px; margin: auto 0; animation: reveal .6s ease both; }
.eyebrow { margin: 0 0 12px; color: #66a5b5; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.brand-message h1 { max-width: 12ch; margin: 0; font-size: clamp(42px, 5.3vw, 78px); line-height: .98; letter-spacing: -.06em; }
.brand-message > p:last-child { max-width: 48ch; margin: 25px 0 0; color: #9db0b5; font-size: 14px; line-height: 1.7; }
.login-brand footer { position: relative; z-index: 1; color: #6f8991; font-size: 10px; }
.login-panel { min-height: 100svh; padding: clamp(30px, 7vw, 110px); display: grid; place-items: center; background: var(--paper); }
.login-panel form { width: min(100%, 410px); display: grid; gap: 22px; animation: reveal .55s .08s ease both; }
.login-panel h2 { margin: 0; font-size: clamp(34px, 4vw, 52px); letter-spacing: -.055em; }
.login-panel .eyebrow { color: #34778a; }
.support { margin: 12px 0 4px; color: var(--muted); font-size: 12px; line-height: 1.6; }
label { display: grid; gap: 8px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
input { min-height: 48px; border: 0; border-bottom: 1px solid var(--line); padding: 8px 0; color: var(--ink); background: transparent; outline: none; }
input:focus { border-bottom-color: #34778a; box-shadow: 0 2px 0 #34778a; }
button { min-height: 48px; border: 0; padding: 0 18px; display: flex; justify-content: space-between; align-items: center; color: white; background: var(--accent); font-size: 12px; font-weight: 700; cursor: pointer; transition: background .15s ease, transform .15s ease; }
button:hover { background: #d9582a; transform: translateY(-1px); }
button:disabled { opacity: .65; cursor: wait; transform: none; }
.form-error { margin: -8px 0 0; padding: 10px 12px; border-left: 3px solid var(--accent); color: #8b341d; background: #fff0e8; font-size: 11px; }
.security-note { align-self: end; justify-self: center; display: flex; align-items: center; gap: 8px; margin: -42px 0 0; color: var(--muted); font-size: 9px; }
.security-note span { width: 6px; height: 6px; border-radius: 50%; background: #297159; box-shadow: 0 0 0 4px rgb(41 113 89 / .1); }
@keyframes reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes tide { to { transform: translate(-2vw, -1vw) scale(1.04); } }

@media (max-width: 760px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-brand { min-height: 34svh; padding: 28px 24px; }
  .brand-message { margin: auto 0 0; }
  .brand-message h1 { font-size: 38px; }
  .brand-message > p:last-child, .login-brand footer { display: none; }
  .login-panel { min-height: 66svh; padding: 38px 24px 70px; place-items: start stretch; }
  .login-panel form { margin: 0 auto; }
  .security-note { margin: 28px 0 0; align-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}