:root{color-scheme:dark;font-family:Inter,"Segoe UI",Arial,sans-serif;background:#020811;color:#f4f8ff}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:#020811}
body::before{content:"";position:fixed;inset:0;background:linear-gradient(90deg,rgba(1,6,15,.93) 0%,rgba(2,10,23,.72) 45%,rgba(2,8,18,.44) 100%),linear-gradient(0deg,rgba(0,5,13,.88),transparent 55%),url("/arkonia/fortress.png") center/cover no-repeat;filter:saturate(.9);transform:scale(1.01)}
.gate{position:relative;z-index:1;min-height:100vh;display:grid;grid-template-columns:minmax(280px,1fr) minmax(340px,520px);grid-template-rows:auto 1fr;gap:40px;padding:42px clamp(24px,5vw,88px) 58px}
.brand{grid-column:1/-1;display:flex;align-items:center;gap:14px;letter-spacing:.14em}.brand strong,.brand small{display:block}.brand strong{font-size:18px}.brand small{font-size:10px;color:#7fb9ff;margin-top:4px}.crest{width:44px;height:44px;border:1px solid #4ea4ff;display:grid;place-items:center;transform:rotate(45deg);box-shadow:0 0 34px rgba(43,147,255,.35)}.crest::first-letter{transform:rotate(-45deg)}
.motto{align-self:end;max-width:710px;padding-bottom:7vh}.motto p,.eyebrow{color:#62aeff;text-transform:uppercase;letter-spacing:.22em;font-size:12px;font-weight:700}.motto h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(52px,7vw,108px);line-height:.88;margin:20px 0 26px;letter-spacing:-.055em;text-shadow:0 12px 45px #000}.motto span{font-size:clamp(16px,1.5vw,22px);color:#b6c8df;max-width:620px;display:block}
.login-card{align-self:center;background:linear-gradient(145deg,rgba(8,21,42,.94),rgba(5,13,28,.9));border:1px solid rgba(92,167,255,.34);border-radius:24px;padding:clamp(28px,4vw,48px);box-shadow:0 30px 90px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.05);backdrop-filter:blur(18px)}
.login-card h2{font-size:clamp(28px,3vw,40px);margin:10px 0}.lead{color:#aabbd0;line-height:1.55;margin:0 0 28px}label{display:grid;gap:8px;color:#9fb5d2;font-size:14px;margin:0 0 18px}input{width:100%;border:1px solid #284d79;border-radius:12px;background:#061225;color:#fff;font:inherit;padding:15px 16px;outline:none}input:focus{border-color:#50a8ff;box-shadow:0 0 0 3px rgba(66,157,255,.14)}button{width:100%;border:0;border-radius:12px;padding:16px;background:linear-gradient(90deg,#1676d9,#33a5ff);color:white;font:700 16px inherit;cursor:pointer;box-shadow:0 12px 30px rgba(14,122,231,.25)}button:disabled{opacity:.65;cursor:wait}.message{min-height:22px;color:#ff9c9c;margin:14px 0 0}.links{display:flex;gap:20px;flex-wrap:wrap;margin-top:12px}.links a{color:#8dc5ff;text-decoration:none;font-size:14px}.links a:hover{text-decoration:underline}
@media(max-width:850px){.gate{grid-template-columns:1fr;padding:24px;gap:28px}.brand{grid-column:1}.motto{align-self:auto;padding:5vh 0 0}.motto h1{font-size:clamp(46px,15vw,78px)}.login-card{align-self:start;margin-bottom:30px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}