:root {
  --accent: #6842d9;
  --accent-dark: #4e2bad;
  --accent-light: #f1edff;
  --bg: #f4f6fa;
  --surface: #ffffff;
  --border: #dbe0e9;
  --text: #111625;
  --text-muted: #465167;
  --text-dim: #6f7a8e;
}

body.auth-page, body.auth-page * { letter-spacing: inherit !important; }
body.auth-page { min-height: 100dvh; background: #0a1020; color: var(--text); }
body.auth-page :focus-visible { outline: 2px solid #4f7dff; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(79, 125, 255, .2); }

.auth-page-login .left-panel {
  position: relative;
  isolation: isolate;
  width: min(46vw, 620px);
  min-width: 430px;
  overflow: hidden;
  padding: 44px 48px;
  border-right: 1px solid rgba(164, 181, 220, .15);
  background: #0a1020;
}
.auth-page-login .left-panel::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(7,12,26,.24), rgba(7,12,26,.72) 68%, #081020 100%), radial-gradient(circle at 22% 20%, rgba(107,75,224,.3), transparent 23rem); }
.auth-page-login .left-panel::after { content: ''; position: absolute; z-index: -1; inset: 0; opacity: .24; background-image: linear-gradient(rgba(127,152,216,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(127,152,216,.08) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(#000, transparent 82%); }
.auth-environment { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .68; }
.auth-page .brand-logo-pill { padding: 0; background: transparent; box-shadow: none; }
.auth-page .brand-logo-pill img { max-width: 180px; height: auto; filter: brightness(0) invert(1); }
.auth-page .brand-tagline { max-width: 440px; margin-top: auto; padding-top: 18vh; }
.auth-page .brand-tagline h2 { max-width: 400px; color: #fff; font: 800 clamp(30px, 3.2vw, 44px)/1.08 var(--font-display); letter-spacing: -.035em !important; }
.auth-page .brand-tagline h2 .highlight { color: #9fe7f4; }
.auth-page .brand-tagline p { max-width: 430px; color: #b7c2d5; font-size: 13px; line-height: 1.65; }
.auth-page .brand-features { gap: 8px; margin-top: 28px; }
.auth-page .feature-pill { max-width: 360px; padding: 9px 11px; border-color: rgba(184,197,226,.14); border-radius: 8px; background: rgba(9,18,39,.54); color: #d6deeb; backdrop-filter: blur(10px); }
.auth-page .feature-pill:hover { transform: none; border-color: rgba(177,194,232,.3); background: rgba(15,27,55,.68); }
.auth-page .brand-footer { color: #748097; font-size: 10px; }

.auth-page .right-panel { position: relative; padding: 40px; background: radial-gradient(circle at 86% 8%, rgba(104,66,217,.08), transparent 24rem), #f5f7fa; }
.auth-page .form-card, .auth-page > .card { width: 100%; max-width: 420px; padding: 30px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); box-shadow: 0 18px 55px rgba(18, 27, 47, .14); }
.auth-page-login .form-card { padding: 0; border: 0; background: transparent; box-shadow: none; }
.auth-page .form-header { margin-bottom: 28px; text-align: left; }
.auth-page .form-header img { width: auto !important; max-width: 168px !important; height: 38px !important; margin: 0 0 30px !important; object-fit: contain; }
.auth-page .form-header h1, .auth-page h1, .auth-page .card-title { color: var(--text); font: 800 26px/1.18 var(--font-display); letter-spacing: -.025em !important; text-align: left; }
.auth-page .form-header p, .auth-page > .card > p, .auth-page .card-sub { color: var(--text-muted); text-align: left; }
.auth-page label { color: #566176; font-size: 9px; font-weight: 850; letter-spacing: .075em !important; }
.auth-page input[type=text], .auth-page input[type=password] { min-height: 44px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 9px; background: #fff; color: var(--text); font-size: 13px; }
.auth-page input:hover { border-color: #bdc5d2; }
.auth-page input:focus { border-color: #7250db; box-shadow: 0 0 0 3px rgba(104,66,217,.15); }
.auth-page button[type=submit], .auth-page .btn { min-height: 44px; border-radius: 9px; background: linear-gradient(180deg, #7049df, #5d38ca); box-shadow: 0 4px 13px rgba(73,45,165,.22); font-size: 13px; }
.auth-page button[type=submit]:hover, .auth-page .btn:hover { transform: none; background: linear-gradient(180deg, #6440ce, #512bab); box-shadow: 0 7px 18px rgba(73,45,165,.25); }
.auth-page button[aria-busy=true] { cursor: wait; opacity: .78; }
.auth-page .error-box, .auth-page .invalid-box { border-radius: 9px; font-size: 12px; line-height: 1.45; }
.auth-page .form-footer { margin-top: 22px; color: var(--text-dim); font-size: 10.5px; text-align: left; }
.auth-page .divider { margin: 22px 0; }
.auth-page .back-link, .auth-page .link { color: var(--accent-dark); font-weight: 700; }

.auth-page-centered { display: grid !important; place-items: center; padding: 28px 18px; background: radial-gradient(circle at 16% 12%, rgba(99,68,221,.34), transparent 25rem), radial-gradient(circle at 82% 90%, rgba(26,142,173,.18), transparent 24rem), linear-gradient(150deg, #091020, #111933 65%, #17143c) !important; }
.auth-page-centered::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .22; background-image: linear-gradient(rgba(136,158,214,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(136,158,214,.08) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(circle at 50% 45%, #000, transparent 75%); }
.auth-page-centered > .card, .auth-page-centered > .form-card { position: relative; z-index: 1; }
.auth-card-logo { display: block; width: 48px; height: 48px; margin: 0 auto 16px; object-fit: contain; }
.auth-page-centered h1, .auth-page-centered .card-title, .auth-page-centered .card-sub, .auth-page-centered > .card > p { text-align: center; }
.auth-page-centered .logo-wrap img { max-width: 160px; }
.auth-page-centered input#code { letter-spacing: .2em !important; font-size: 22px; }
.auth-page .role-badge { border-color: #cec1f5; background: var(--accent-light); color: var(--accent-dark); }
.auth-page #pwStrengthLabel, .auth-page .strength-label { min-height: 16px; }
.auth-page .req-list li { color: var(--text-muted); }
.auth-page .req-list li.ok { color: #18794e; }

@media (max-width: 860px) {
  .auth-page-login { display: grid; min-height: 100dvh; background: #f5f7fa; }
  .auth-page-login .left-panel { display: block; width: 100%; min-width: 0; min-height: 180px; padding: 24px; }
  .auth-page-login .brand-tagline { margin: 26px 0 0; padding: 0; }
  .auth-page-login .brand-tagline h2 { max-width: 500px; margin: 0; font-size: 25px; }
  .auth-page-login .brand-tagline p, .auth-page-login .brand-features, .auth-page-login .brand-footer { display: none; }
  .auth-page-login .right-panel { display: block; padding: 28px 20px 42px; }
  .auth-page-login .form-card { max-width: 480px; margin: 0 auto; padding: 26px; border: 1px solid var(--border); border-radius: 14px; background: #fff; box-shadow: 0 12px 36px rgba(18,27,47,.1); }
  .auth-page-login .form-header img { display: none !important; }
}

@media (max-width: 480px) {
  .auth-page-login .left-panel { min-height: 150px; padding: 20px; }
  .auth-page-login .brand-tagline { margin-top: 18px; }
  .auth-page-login .brand-tagline h2 { font-size: 22px; }
  .auth-page-login .right-panel { padding: 16px 12px 28px; }
  .auth-page-login .form-card, .auth-page-centered > .card, .auth-page-centered > .form-card { padding: 22px 18px; border-radius: 12px; }
  .auth-page .form-header h1, .auth-page h1, .auth-page .card-title { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-page *, .auth-page *::before, .auth-page *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}