:root { color-scheme:dark; --bg:#09090b; --text:#eeeef3; --muted:#9d98a8; --accent:#bcb5d2; --line:rgba(213,211,225,.10); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; background:var(--bg); color:var(--text); font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased; position:relative; isolation:isolate; }
body::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(rgba(205,201,225,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(205,201,225,.022) 1px,transparent 1px); background-size:48px 48px; mask-image:radial-gradient(ellipse at 25% 22%,#000,transparent 72%); }
body::after { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 24% 38%,rgba(145,130,175,.055),transparent 52%); }
h1,h2,p { margin:0; }h1,h2 { font-family:'Instrument Sans','DM Sans',sans-serif; }
a { color:inherit; text-decoration:none; }button,input { font:inherit; }button { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible { outline:2px solid var(--accent); outline-offset:5px; border-radius:4px; }
svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.wrap { width:min(1100px,calc(100% - 64px)); margin-inline:auto; }
.site-header { display:flex; align-items:center; justify-content:space-between; min-height:94px; gap:24px; border-bottom:1px solid rgba(213,211,225,.065); }
.brand { display:flex; align-items:center; gap:13px; }.brand img { object-fit:contain; }.brand span { font-family:'Manrope','DM Sans',sans-serif; font-size:22px; font-weight:700; line-height:1.15; letter-spacing:.015em; }
.back-link { display:inline-flex; align-items:center; gap:9px; color:#b8b4c2; font-size:12px; }.back-link svg { width:15px; height:15px; }
.back-link:hover,.explore-link:hover span,.label-row a:hover,.register-link a:hover,.site-footer a:hover { color:#fff; }
.login-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(350px,430px); gap:90px; align-items:center; flex:1; padding:54px 24px 62px; }
.portal-intro { padding-bottom:10px; }
.eyebrow { font-size:12px; color:#a7a0b8; font-weight:500; margin-bottom:19px; }
h1 { font-size:clamp(44px,4.6vw,59px); font-weight:600; letter-spacing:-.055em; line-height:1.08; }
h1 span { color:#bcb5d2; background:linear-gradient(105deg,#e4e1ed,#aaa0c2); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.intro-copy { margin-top:22px; color:#a09aaa; font-size:16px; line-height:1.7; }
.portal-benefits { display:flex; flex-wrap:wrap; gap:18px 24px; margin-top:32px; padding-top:23px; border-top:1px solid var(--line); max-width:360px; }
.portal-benefits span { display:flex; align-items:center; gap:9px; color:#b5aec2; font-size:12px; }.portal-benefits svg { width:16px; height:16px; color:#ada2c3; }
.explore-link { display:inline-flex; flex-direction:column; align-items:flex-start; gap:4px; margin-top:42px; color:#8e859d; font-size:12px; }.explore-link span { display:flex; align-items:center; gap:9px; color:#c4bbd7; }.explore-link svg { width:14px; height:14px; }
.login-card { position:relative; padding:35px; border:1px solid rgba(212,205,229,.13); border-radius:16px; background:linear-gradient(145deg,rgba(207,200,227,.035),transparent 55%),rgba(16,16,21,.9); box-shadow:inset 0 1px 0 rgba(245,242,255,.025),0 18px 48px rgba(0,0,0,.12); }
.login-card::before { content:''; position:absolute; height:1px; top:-1px; left:36px; right:36px; background:linear-gradient(90deg,transparent,rgba(199,188,221,.3),transparent); pointer-events:none; }
.form-heading .eyebrow { font-size:11px; margin-bottom:8px; color:#a8a0b8; }.form-heading h2 { font-size:30px; font-weight:600; letter-spacing:-.045em; line-height:1.2; }.form-heading>p:last-child { margin-top:9px; font-size:13px; color:#9d95aa; }
form { margin-top:28px; }.field+.field { margin-top:19px; }label { display:block; color:#cbc6d5; font-size:12px; font-weight:500; margin-bottom:8px; }
input { display:block; width:100%; min-width:0; height:50px; padding:0 14px; border:1px solid rgba(210,202,228,.14); border-radius:8px; background:rgba(6,6,9,.47); color:#efedf5; font-size:13px; transition:border-color .18s,box-shadow .18s; outline:none; }
input::placeholder { color:#77707f; opacity:1; }input:hover { border-color:rgba(207,196,228,.25); }input:focus { border-color:#81778f; box-shadow:0 0 0 3px rgba(184,172,207,.09); }
input:-webkit-autofill { -webkit-text-fill-color:#efedf5; box-shadow:0 0 0 1000px #19171f inset; caret-color:#efedf5; }input:-webkit-autofill:focus { box-shadow:0 0 0 1000px #19171f inset,0 0 0 3px rgba(184,172,207,.09); }
.label-row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }.label-row a { color:#9f95b0; font-size:11px; }
.password-field { position:relative; }.password-field input { padding-right:48px; }.password-toggle { position:absolute; right:4px; top:3px; width:42px; height:44px; border:0; background:transparent; display:grid; place-items:center; color:#8d829e; cursor:pointer; padding:0; }.password-toggle:hover { color:#dfd8eb; }.password-toggle svg { width:17px; height:17px; }.password-toggle .eye-closed { display:none; }.password-toggle[aria-pressed="true"] .eye-open { display:none; }.password-toggle[aria-pressed="true"] .eye-closed { display:block; }
.sign-in-button { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:48px; width:100%; margin-top:24px; padding:12px 16px; border:1px solid #dedbe5; border-radius:8px; background:linear-gradient(160deg,#eeecf3,#d0ccd9); color:#211e28; font-size:13px; font-weight:600; cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,.4); transition:background .18s,box-shadow .18s; }.sign-in-button svg { width:17px; height:17px; }.sign-in-button:hover { background:linear-gradient(160deg,#fff,#e0dce8); box-shadow:0 3px 16px rgba(212,201,234,.07); }.sign-in-button:disabled { opacity:.65; cursor:wait; }
#result { --status-color:#96939f; --status-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3Cpath d='M10 6v4.5M10 13.5h.01'/%3E%3C/svg%3E"); display:none; width:100%; margin:14px 0 0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; color:#c1becb; font-size:12px; font-weight:400; line-height:1.65; text-align:left; overflow-wrap:anywhere; }
#result:not(:empty) { display:flex; align-items:flex-start; gap:9px; }
#result::before { content:""; flex:0 0 15px; width:15px; height:15px; margin-top:2px; background:var(--status-color); -webkit-mask:var(--status-icon) center/contain no-repeat; mask:var(--status-icon) center/contain no-repeat; }
#result.error { --status-color:#c49098; }
#result.success { --status-color:#91b3a0; --status-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3Cpath d='m6.5 10 2.3 2.3 4.7-4.7'/%3E%3C/svg%3E"); }
.register-link { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; column-gap:5px; row-gap:5px; margin-top:24px; padding-top:23px; border-top:1px solid var(--line); color:#948b9f; font-size:11px; }.register-link a { display:inline-flex; align-items:center; gap:3px; color:#d2cadf; font-weight:500; }.register-link svg { width:12px; height:12px; }
.secure-note { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:20px; color:#7d758a; font-size:10px; }.secure-note svg { width:12px; height:12px; }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:23px 0; border-top:1px solid rgba(213,211,225,.065); color:#82788f; font-size:11px; }.site-footer nav { display:flex; flex-wrap:wrap; gap:24px; }.site-footer a { display:inline-flex; align-items:center; gap:5px; color:#a79cb5; }.site-footer svg { width:12px; height:12px; }
.skip-link:not(:focus) { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }.skip-link:focus { position:fixed; top:10px; left:10px; z-index:10; background:#24212c; padding:12px; }
@media (min-width:741px) and (max-height:800px) { .site-header { min-height:80px; }.login-layout { padding-top:24px; padding-bottom:24px; }.login-card { padding-top:28px; padding-bottom:28px; }.form-heading .eyebrow { margin-bottom:6px; }.secure-note { margin-top:15px; } }
@media (max-width:1000px) { .login-layout { gap:48px; padding-inline:0; grid-template-columns:minmax(0,1fr) minmax(320px,400px); }.login-card { padding:29px; }h1 { font-size:47px; }.portal-benefits { flex-direction:column; gap:13px; }.intro-copy { font-size:15px; } }
@media (max-width:740px) {
  .wrap { width:calc(100% - 40px); }.site-header { min-height:78px; gap:16px; }.brand { gap:7px; }.brand img { width:44px; height:44px; }.brand span { font-size:20px; }.back-link { font-size:11px; gap:6px; }.back-link svg { width:13px; }
  .login-layout { display:block; width:min(430px,calc(100% - 40px)); padding:32px 0 40px; }.portal-intro { padding:0 3px 27px; }.portal-intro .eyebrow { margin-bottom:9px; font-size:11px; }h1 { font-size:32px; line-height:1.12; }h1 br { display:none; }h1 span::before { content:' '; }.intro-copy { margin-top:11px; font-size:12px; }.intro-copy br { display:none; }.portal-benefits,.explore-link { display:none; }
  .login-card { padding:26px 24px; border-radius:13px; }.form-heading .eyebrow { display:none; }.form-heading h2 { font-size:28px; }.form-heading>p:last-child { font-size:12px; }input { font-size:16px; }input::placeholder { font-size:12px; }form { margin-top:25px; }.register-link { font-size:11px; }.site-footer { font-size:10px; padding:21px 0; gap:14px; flex-wrap:wrap; }.site-footer nav { gap:15px; }
}
@media (max-width:360px) { .brand span { font-size:18px; }.back-link { max-width:86px; line-height:1.35; }.login-card { padding:24px 18px; }.label-row a { font-size:10px; }h1 { font-size:29px; }.site-footer { flex-direction:column; align-items:flex-start; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }