:root {
  --agent-auth-navy: #102e5f;
  --agent-auth-blue: #1d63d8;
  --agent-auth-sky: #eef5ff;
  --agent-auth-line: #d8e5fb;
  --agent-auth-text: #17233a;
  --agent-auth-muted: #64748b;
}

body.agent-auth-page {
  min-width: 0;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--agent-auth-text);
  background: radial-gradient(circle at 0 0, #dcecff 0, transparent 35rem), linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
}

.agent-auth-shell {
  display: grid;
  grid-template-columns: minmax(18rem, 0.95fr) minmax(22rem, 0.75fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: center;
  width: min(70rem, calc(100% - 3rem));
  min-height: 100vh;
  margin: 0 auto;
  padding: 3rem 0;
  box-sizing: border-box;
}

.agent-auth-intro { max-width: 34rem; }
.agent-login-brand { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.25rem; color: var(--agent-auth-navy); font-size: 1.5rem; font-weight: 800; letter-spacing: .02em; line-height: 1; text-decoration: none; }
.agent-login-brand-icon { display: grid; width: 2.25rem; height: 2.25rem; flex: 0 0 2.25rem; place-items: center; }
.agent-login-brand-mark { width: 100%; height: 100%; max-width: none; object-fit: contain; }
.agent-login-brand-name { display: inline-flex; align-items: center; min-height: 2.25rem; padding-top: 1px; box-sizing: border-box; transform: translateY(1px); }
.agent-auth-intro > .agent-login-brand { margin-bottom: 2.15rem; }
.agent-auth-eyebrow { margin: 0 0 .5rem; color: var(--agent-auth-blue); font-size: .88rem; font-weight: 800; letter-spacing: .08em; }
.agent-auth-intro h1, .agent-auth-card h2 { margin: 0; color: var(--agent-auth-navy); line-height: 1.2; }
.agent-auth-intro h1 { font-size: clamp(2.25rem, 5vw, 4.5rem); }
.agent-auth-shell-register .agent-auth-intro h1 { font-size: clamp(2.25rem, 4vw, 3.5rem); }
.agent-auth-card h2 { font-size: clamp(1.55rem, 3vw, 2rem); }
.agent-auth-description { margin: 1.35rem 0; color: var(--agent-auth-muted); font-size: 1.03rem; line-height: 1.8; }
.agent-auth-benefits { display: grid; gap: .72rem; margin: 1.5rem 0 0; padding: 0; color: var(--agent-auth-text); list-style: none; }
.agent-auth-benefits li::before { content: '✓'; display: inline-grid; width: 1.25rem; height: 1.25rem; margin-right: .6rem; place-items: center; border-radius: 50%; color: #fff; background: var(--agent-auth-blue); font-size: .75rem; }

.agent-auth-card { width: 100%; padding: clamp(1.5rem, 4vw, 2.75rem); border: 1px solid rgba(216, 229, 251, .92); border-radius: 1.5rem; box-sizing: border-box; background: rgba(255, 255, 255, .95); box-shadow: 0 1.5rem 4rem rgba(25, 74, 147, .14); }
.agent-auth-shell-compact { display: block; width: min(34rem, calc(100% - 2rem)); }
.agent-security-section { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--agent-auth-line); }
.agent-security-section h2 { margin: 0; color: var(--agent-auth-navy); font-size: 1.12rem; }
.agent-security-section > p { margin: .55rem 0 1rem; color: var(--agent-auth-muted); font-size: .9rem; line-height: 1.55; }
.agent-auth-card .agent-auth-eyebrow { margin-top: 0; }
.agent-auth-help { margin: .65rem 0 1.45rem; color: var(--agent-auth-muted); font-size: .93rem; line-height: 1.55; }
.agent-auth-form { display: grid; gap: 1rem; }
.agent-auth-form label { display: grid; gap: .45rem; color: var(--agent-auth-text); font-size: .92rem; font-weight: 700; }
.agent-auth-form input { width: 100%; min-height: 2.9rem; padding: .7rem .85rem; border: 1px solid var(--agent-auth-line); border-radius: .75rem; box-sizing: border-box; color: var(--agent-auth-text); background: #fff; font: inherit; font-weight: 400; outline: none; }
.agent-auth-form input:focus { border-color: var(--agent-auth-blue); box-shadow: 0 0 0 3px rgba(29, 99, 216, .12); }
.agent-password-field { position: relative; display: block; }
.agent-password-field input { padding-right: 4.6rem; }
.agent-password-toggle { position: absolute; top: 50%; right: .55rem; min-width: 3.35rem; transform: translateY(-50%); border: 0; border-radius: .45rem; color: var(--agent-auth-blue); background: transparent; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.agent-auth-form-links { margin-top: -.35rem; text-align: right; }
.agent-auth-form-links a, .agent-auth-switch a, .agent-auth-support a { color: var(--agent-auth-blue); font-weight: 700; text-decoration: none; }
.agent-auth-submit { min-height: 3rem; border: 0; border-radius: .8rem; color: #fff; background: linear-gradient(135deg, #1556c0, #2678e8); box-shadow: 0 .6rem 1.2rem rgba(29, 99, 216, .22); font: inherit; font-weight: 800; cursor: pointer; }
.agent-auth-message { margin: 1rem 0; padding: .8rem .95rem; border-radius: .75rem; font-size: .9rem; line-height: 1.5; }
.agent-auth-message-error { color: #a92727; background: #fff0f0; }
.agent-auth-message-notice { color: #126143; background: #edfff6; }
.agent-auth-switch { margin: 1.35rem 0 0; color: var(--agent-auth-muted); text-align: center; font-size: .92rem; }
.agent-novice-entry { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: .8rem; align-items: center; margin-top: 1rem; padding: .78rem .9rem; border: 1px solid #bfd4f7; border-radius: .9rem; color: var(--agent-auth-navy); background: #f1f6ff; box-shadow: 0 .45rem 1.2rem rgba(29, 99, 216, .08); text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.agent-novice-entry:hover { border-color: #8bb5f2; box-shadow: 0 .65rem 1.4rem rgba(29, 99, 216, .13); transform: translateY(-1px); }
.agent-novice-entry:focus-visible { outline: 3px solid rgba(29, 99, 216, .2); outline-offset: 2px; }
.agent-novice-entry-icon { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: .7rem; overflow: hidden; }
.agent-novice-entry-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.agent-novice-entry-copy { display: grid; gap: .16rem; min-width: 0; }
.agent-novice-entry b { font-size: .92rem; line-height: 1.35; }
.agent-novice-entry small { color: var(--agent-auth-muted); font-size: .76rem; line-height: 1.4; }
.agent-novice-entry em { color: var(--agent-auth-blue); font-size: .8rem; font-style: normal; font-weight: 800; white-space: nowrap; }
.agent-auth-support { margin: .65rem 0 0; color: var(--agent-auth-muted); text-align: center; font-size: .88rem; }
.agent-auth-optional { color: var(--agent-auth-muted); font-size: .78rem; font-weight: 400; }
.agent-password-match { margin: -.25rem 0 0; color: #b42318; font-size: .82rem; font-weight: 700; line-height: 1.4; }

@media (max-width: 760px) {
  .agent-auth-shell { grid-template-columns: 1fr; gap: 1.5rem; width: min(31rem, calc(100% - 2rem)); min-height: auto; padding: 2rem 0; }
  .agent-auth-intro { max-width: none; }
  .agent-auth-intro h1 { font-size: 2.25rem; }
  .agent-auth-benefits { display: none; }
}

@media (max-width: 414px) {
  .agent-auth-shell { width: calc(100% - 1.5rem); padding: 1.25rem 0 1.75rem; }
  .agent-auth-card { padding: 1.35rem 1.1rem; border-radius: 1.1rem; }
  .agent-login-brand { gap: .45rem; min-height: 2.2rem; font-size: 1.3rem; }
  .agent-login-brand-icon { width: 2.2rem; height: 2.2rem; flex-basis: 2.2rem; }
  .agent-login-brand-name { min-height: 2.2rem; }
  .agent-auth-intro h1 { font-size: 2rem; }
}