@font-face { font-family: Manrope; src: url('/assets/Manrope-VariableFont_wght.ttf') format('truetype'); font-weight: 200 800; font-display: swap; }
:root { --deep:#020812; --navy:#061426; --blue:#0a56a6; --cyan:#00d7e8; --ink:#102238; --slate:#465a6e; --line:#d6e0e7; --cloud:#edf2f5; --white:#fcfcfb; --red:#b42318; --red-soft:#fee9e7; --green:#067647; --green-soft:#e7f7ef; }
* { box-sizing: border-box; }
[hidden] { display:none !important; }
body { min-height:100vh; margin:0; display:grid; grid-template-columns:minmax(320px,.8fr) minmax(520px,1.2fr); background:var(--deep); color:var(--white); font:14px/1.5 Manrope,Aptos,Arial,sans-serif; }
.identity { min-height:100vh; display:flex; flex-direction:column; justify-content:space-between; padding:48px 5vw; background:var(--navy); border-right:1px solid rgba(255,255,255,.12); }
.mark { width:62px; height:62px; }
.identity-copy { max-width:480px; }
.kicker { color:var(--cyan); font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.identity h1 { margin:12px 0 14px; font-size:38px; line-height:1.16; letter-spacing:0; }
.identity p { max-width:440px; margin:0; color:#bac8d6; font-size:16px; }
.domain { color:#91a5b8; font-size:12px; }
.auth-area { display:grid; place-items:center; padding:30px; }
.auth-card { width:min(430px,100%); padding:34px; border-radius:7px; background:var(--white); color:var(--ink); box-shadow:0 24px 60px rgba(0,0,0,.28); }
.logo { display:block; width:280px; max-width:100%; height:auto; margin:0 auto 21px; }
.rule { width:42px; height:3px; margin:0 0 22px; background:var(--cyan); }
h2 { margin:0 0 5px; color:var(--navy); font-size:22px; letter-spacing:0; }
.subhead { margin:0 0 24px; color:var(--slate); }
form { display:grid; gap:16px; }
label { display:grid; gap:6px; color:var(--slate); font-size:11px; font-weight:750; text-transform:uppercase; letter-spacing:.07em; }
input { width:100%; height:44px; border:1px solid #bbc9d3; border-radius:5px; padding:0 12px; background:#fff; color:var(--ink); font:14px Manrope,Aptos,Arial,sans-serif; letter-spacing:0; }
input:hover { border-color:#91a5b5; }
input:focus { outline:3px solid var(--blue); outline-offset:2px; border-color:var(--blue); }
button { min-height:44px; border:1px solid var(--navy); border-radius:5px; padding:8px 12px; background:var(--navy); color:#fff; cursor:pointer; font:750 13px Manrope,Aptos,Arial,sans-serif; letter-spacing:0; }
button:hover { background:#0a203a; }
button:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
.secondary { margin-top:12px; background:#fff; color:var(--navy); border-color:#bbc9d3; }
.secondary:hover { background:#f4f6f7; }
.fallback-destination { margin:0; color:var(--slate); font-size:11px; text-align:center; }
.error,.success { display:none; margin:0 0 16px; padding:10px 12px; border-left:3px solid var(--red); background:var(--red-soft); color:var(--red); font-size:12px; }
.success { border-left-color:var(--green); background:var(--green-soft); color:var(--green); }
.security-note { display:flex; gap:8px; align-items:flex-start; margin:20px 0 0; padding-top:17px; border-top:1px solid var(--line); color:var(--slate); font-size:11px; }
.security-note svg { width:16px; height:16px; flex:0 0 auto; color:var(--blue); }
@media(max-width:820px) { body{grid-template-columns:1fr;background:var(--cloud)} .identity{display:none} .auth-area{min-height:100vh;padding:20px} .auth-card{padding:27px} .logo{width:250px} }