/* APEX CAMPUS — split login surface with light and dark themes. */
:root{--login-navy:#10254f;--login-blue:#2563eb;--login-blue-deep:#1d4ed8;--login-line:#d9e5f4;--login-ink:#10254f;--login-muted:#64748b}

body{background:radial-gradient(circle at 96% 6%,rgba(196,220,255,.72),transparent 28rem),radial-gradient(circle at 2% 94%,rgba(218,238,255,.78),transparent 26rem),#f7faff}
.shell{min-height:calc(100vh - 32px);max-width:1540px;margin:16px auto;overflow:hidden;border:1px solid rgba(195,214,239,.95);border-radius:26px;box-shadow:0 26px 80px rgba(25,62,119,.15);background:rgba(255,255,255,.82)}
.brand-panel{padding:52px clamp(42px,6vw,104px);background:radial-gradient(circle at 98% 20%,rgba(66,225,225,.48),transparent 19rem),radial-gradient(circle at 7% 95%,rgba(47,180,234,.38),transparent 20rem),linear-gradient(150deg,#081b43 0%,#0c3474 54%,#0e5b92 100%)}
.brand-panel::before{content:'';position:absolute;top:16%;right:-12%;width:340px;height:340px;border:1px solid rgba(219,246,255,.28);border-radius:50%;box-shadow:0 0 0 42px rgba(255,255,255,.035),0 0 0 96px rgba(255,255,255,.024)}
.brand-panel::after{right:-270px;bottom:-250px}
.brand img{width:min(225px,70%);filter:drop-shadow(0 6px 18px rgba(0,0,0,.14))}
.eyebrow{color:#c6eaff;opacity:1}
.hero-copy h1{font-size:clamp(42px,4.5vw,68px);letter-spacing:-2.9px}
.hero-copy h1 span{color:#d5f4ff}
.hero-copy p{max-width:430px;color:#d6e8fc;font-size:17px;line-height:1.65}
.features{display:flex;gap:12px;max-width:565px}
.features div{flex:1;min-height:124px;padding:18px 15px;display:flex;align-items:flex-start;flex-direction:column;gap:16px;color:#e9f5ff;border:1px solid rgba(221,245,255,.17);border-radius:16px;background:rgba(235,250,255,.09);backdrop-filter:blur(12px);font-size:13px;line-height:1.25}
.features div.feature-active{color:#132a55;background:rgba(255,255,255,.96);box-shadow:0 12px 26px rgba(2,18,45,.22)}
.features b{height:28px;width:28px;background:rgba(255,255,255,.18);font-size:12px}
.features .feature-active b{background:#17243c;color:#fff}
.copyright{color:#cae6fb;opacity:.72}

.auth-panel{max-width:680px;padding:46px clamp(30px,6vw,92px);background:rgba(255,255,255,.92)}
.topbar{justify-content:space-between;margin-bottom:42px}
.auth-home{border:0;background:none;color:var(--login-muted);font:700 11px Inter;cursor:pointer;padding:8px 0}
.auth-home:hover{color:var(--login-blue)}
.theme-toggle{border-color:var(--login-line);background:#f8fbff;color:#465b7c;padding:9px 13px;box-shadow:0 4px 14px rgba(51,87,138,.07)}
.portal-badge{color:#1d4ed8;background:#eef5ff;border:1px solid #d9e9ff;border-radius:999px;padding:8px 12px;margin-bottom:15px}
.heading h2{color:var(--login-ink);font-size:34px;letter-spacing:-1.45px}
.heading p{color:var(--login-muted);font-size:13px;line-height:1.7}
.auth-panel input:not([type=checkbox]){height:50px;border-color:var(--login-line);border-radius:11px;background:#fbfdff}
.auth-panel input:not([type=checkbox]):focus{border-color:#5d91f4;background:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.11)}
.primary{height:51px;border-radius:11px;background:linear-gradient(135deg,var(--login-blue),#3678f2);box-shadow:0 12px 24px rgba(37,99,235,.23)}
.primary:hover{background:linear-gradient(135deg,#1d4ed8,#2563eb);box-shadow:0 15px 28px rgba(37,99,235,.3)}
.switch button,.form-row a{color:var(--login-blue)}
.portal-note{margin-top:16px;border-color:#dce8fb!important;background:#f4f8ff!important;border-radius:11px}

body.dark{background:radial-gradient(circle at 93% 10%,rgba(29,78,216,.23),transparent 28rem),#071222}
body.dark .shell{border-color:#233c60;box-shadow:0 26px 80px rgba(0,0,0,.38);background:#0b1525}
body.dark .brand-panel{background:radial-gradient(circle at 98% 20%,rgba(13,148,136,.32),transparent 18rem),radial-gradient(circle at 7% 95%,rgba(30,91,220,.3),transparent 21rem),linear-gradient(150deg,#050d1b 0%,#0b244d 56%,#0b526f 100%)}
body.dark .auth-panel{background:rgba(9,19,34,.94)}
body.dark .heading h2{color:#f0f6ff}
body.dark .heading p,body.dark .switch,body.dark .auth-home{color:#a8b7cc}
body.dark .auth-home:hover{color:#8eb8ff}
body.dark .auth-panel label{color:#c7d4e7}
body.dark .auth-panel input:not([type=checkbox]){background:#101f33;border-color:#2b496d;color:#f0f6ff}
body.dark .auth-panel input:not([type=checkbox])::placeholder{color:#7e91aa}
body.dark .theme-toggle{background:#101f33;border-color:#2b496d;color:#dceaff}
body.dark .portal-badge{background:#102b4d;border-color:#244a77;color:#9ec7ff}
body.dark .portal-note{background:#10233d!important;border-color:#294c75!important}
body.dark .features div{background:rgba(181,223,255,.08);border-color:rgba(189,230,255,.18)}
body.dark .features div.feature-active{background:#eef6ff;color:#132a55}

@media(max-width:850px){body{background:#f7faff}.shell{min-height:100vh;margin:0;border:0;border-radius:0;box-shadow:none}.auth-panel{max-width:630px}.topbar{margin-bottom:34px}.auth-home{display:none}}

/* v129: fit account screens at normal 100% browser zoom without reducing text. */
.register-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}.register-field-grid .two-col{grid-column:1/-1}.register-field-grid>div{min-width:0}.register-field-grid label{display:block}.register-field-grid input{width:100%}
@media (max-height:900px) and (min-width:851px){.shell{min-height:calc(100dvh - 20px);margin:10px auto}.brand-panel{padding-top:32px;padding-bottom:28px}.auth-panel{padding-top:25px;padding-bottom:25px}.topbar{margin-bottom:23px}.heading p{margin-bottom:18px}.auth-panel form{gap:6px}.auth-panel label{margin-top:5px}.form-row{margin:3px 0 9px}.switch{margin-top:12px}.portal-note{margin-top:10px}.register-field-grid{gap:6px 12px}.register-field-grid label{margin-top:0}.register-field-grid .two-col{gap:12px}}
@media (max-width:850px){.register-field-grid{grid-template-columns:1fr}.register-field-grid .two-col{grid-column:auto}}

/* Keep browser autofill consistent with the dark login screen. */
body.dark .auth-panel input:-webkit-autofill,
body.dark .auth-panel input:-webkit-autofill:hover,
body.dark .auth-panel input:-webkit-autofill:focus,
body.dark .auth-panel input:-webkit-autofill:active{
  -webkit-text-fill-color:#eef6ff;
  caret-color:#eef6ff;
  -webkit-box-shadow:0 0 0 1000px #102946 inset;
  box-shadow:0 0 0 1000px #102946 inset;
  transition:background-color 9999s ease-out 0s;
}