:root{color-scheme:light;font-family:Inter,Arial,sans-serif;background:#f3f6fb;color:#172033}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(145deg,#eef4ff 0%,#f7f9fc 52%,#edf2f7 100%);color:#172033}
.login-wrap{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{width:100%;max-width:380px;background:#fff;border:1px solid #dce5f0;border-radius:18px;box-shadow:0 18px 48px rgba(23,32,51,.12)}
.card-body{padding:34px}
.login-brand-logo{display:block;width:190px;max-width:72%;height:auto;margin:0 auto 25px}
.card-title{margin:0 0 24px;text-align:center;font-size:21px}
.mb-3{margin-bottom:18px}.form-label{display:block;margin:0 0 7px;font-size:13px;font-weight:700;color:#44526a}
.form-control{display:block;width:100%;height:46px;padding:10px 13px;border:1px solid #cbd6e4;border-radius:10px;background:#fff;color:#172033;font:16px inherit;outline:0}
.form-control:focus{border-color:#3578ef;box-shadow:0 0 0 3px rgba(53,120,239,.14)}
.form-control.mb-3{margin-bottom:16px}
.btn{display:block;width:100%;min-height:46px;border:0;border-radius:10px;padding:11px 16px;font:700 15px inherit;cursor:pointer}
.btn-primary{background:#2468e8;color:#fff}.btn-primary:hover{background:#1958ca}.btn:disabled{opacity:.65;cursor:wait}
.alert{margin-bottom:16px;padding:11px 13px;border-radius:9px;font-size:14px}.alert-danger{background:#fff0f1;color:#b4232f;border:1px solid #ffcbd0}
.d-none{display:none!important}
@media(max-width:480px){.login-wrap{align-items:flex-start;padding:10vh 16px 24px}.card-body{padding:28px 22px}.login-card{border-radius:15px}}

/* NORTHA / northern light. Local HyperFrames scene, original logo, no video downloads. */
:root{background:#0b121e}
body{background:#0b121e;isolation:isolate}
.login-sky{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 23% 41%,#152d48 0%,transparent 54%),linear-gradient(135deg,#101b2b,#090f19 75%)}
.login-aurora{position:absolute;width:115%;height:56%;left:-28%;top:-8%;border-radius:50%;transform:rotate(-24deg);opacity:.55;background:radial-gradient(ellipse at center,transparent 24%,#168bff30 40%,#168bff08 56%,transparent 66%);animation:login-aurora-drift 22s ease-in-out infinite alternate}
.login-aurora-ice{left:7%;top:15%;height:65%;opacity:.32;background:radial-gradient(ellipse at center,transparent 29%,#7acffb26 42%,#168bff08 54%,transparent 64%);animation-duration:29s;animation-delay:-12s}
.login-stars{position:absolute;inset:0;opacity:.42;background-image:radial-gradient(circle at 12% 21%,#d1e9ff 0 1px,transparent 1.8px),radial-gradient(circle at 37% 13%,#a9c9e8 0 1px,transparent 1.7px),radial-gradient(circle at 8% 74%,#a9c9e8 0 1px,transparent 1.8px),radial-gradient(circle at 61% 29%,#a9c9e8 0 1px,transparent 1.8px),radial-gradient(circle at 48% 81%,#a9c9e8 0 1px,transparent 1.8px),radial-gradient(circle at 87% 72%,#a9c9e8 0 1px,transparent 1.8px)}
.login-horizon{position:absolute;inset:0;background:linear-gradient(transparent 67%,#090f1966),linear-gradient(112deg,transparent 42%,#9ac6e807 42.05%,transparent 42.15%)}
.login-wrap{position:relative;max-width:1180px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:100px;align-items:center;padding:70px 44px 90px}
.login-identity{position:relative;min-width:0;align-self:center;color:#fff;text-align:center}
.login-compass{position:relative;width:min(100%,480px);aspect-ratio:1;margin:0 auto}
.login-compass .hf-north-label{font-size:9px;letter-spacing:3px}
.login-orbit{position:absolute;inset:0;border:1px solid #91b8df20;border-radius:50%}
.login-orbit-outer::before{content:'';position:absolute;inset:18px;border:1px dashed #91b8df17;border-radius:50%}
.login-orbit-inner{inset:58px;border-color:#91b8df14}
.login-north{position:absolute;top:-6px;left:50%;transform:translateX(-50%);padding:0 12px;background:#122238;color:#a7bdd2;font-size:9px;letter-spacing:3px}
.login-bearing{position:absolute;width:1px;top:28px;bottom:28px;left:50%;background:linear-gradient(#168bff00,#168bff55 12%,#168bff00 35%,#168bff00 68%,#168bff26)}
.login-emblem{position:absolute;inset:21%;animation:login-emblem-reveal 2.6s cubic-bezier(.16,1,.3,1) both}
.login-emblem img{display:block;width:100%;height:100%;object-fit:contain}
.login-emblem::before{content:'';position:absolute;inset:18%;border-radius:50%;background:#168bff14;box-shadow:0 0 80px 25px #168bff10;z-index:-1}
.login-light-pass{position:absolute;inset:0;overflow:hidden;mask:url('/public/brand/northa-mark-white.svg') center/contain no-repeat;-webkit-mask:url('/public/brand/northa-mark-white.svg') center/contain no-repeat}
.login-light-pass::after{content:'';position:absolute;top:-20%;bottom:-20%;left:-100%;width:65%;background:linear-gradient(100deg,transparent,#168bff55,transparent);transform:translateX(0) rotate(12deg);animation:login-sheen 11s ease-in-out infinite;animation-delay:2s}
.login-identity-copy{margin:20px 0 0}
.login-identity-copy>span{font-size:10px;letter-spacing:2.4px;color:#9bb3cb}
.login-identity-copy p{margin:14px 0 10px;font-size:clamp(32px,4vw,48px);font-weight:500;letter-spacing:-1.6px;line-height:1.12}
.login-identity-copy small{font-size:12px;color:#8ca4bc;letter-spacing:.3px}
.login-card{position:relative;background:#fbfcff;border-color:#ffffffb3;box-shadow:0 28px 90px #0005,0 1px 0 #fff9 inset;border-radius:22px}
.card-body{padding:36px 32px}
.login-brand-logo{margin-bottom:25px}
.login-card .btn-primary{background:#167aee;box-shadow:0 4px 12px #167aee25;transition:background .15s ease}
.login-card .btn-primary:hover{background:#1165ce}
.login-motion-controls{position:fixed;bottom:22px;right:28px;z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:8px;width:350px;max-width:calc(100% - 40px)}
.login-motion-status{margin:0;padding:9px 12px;border-radius:10px;background:#0b121ee8;color:#b3c7dc;font-size:12px;line-height:1.5;text-align:right;overflow-wrap:anywhere}
.login-motion-status[hidden]{display:none}
.login-motion-toggle{border:1px solid #7898b63d;background:#111e30;color:#b3c7dc;border-radius:20px;padding:10px 16px;min-height:40px;font:12px Inter,Arial,sans-serif;cursor:pointer;flex-shrink:0}
.login-motion-toggle[hidden]{display:none}
.login-motion-toggle:hover{border-color:#92b5da88;color:#fff}
.login-motion-toggle:disabled{cursor:default;opacity:.7}
.login-motion-toggle:focus-visible{outline:2px solid #168bff;outline-offset:4px}
/* Motion is opt-in after capability checks; without JS the whole scene is static. */
.login-aurora,.login-emblem,.login-light-pass::after{animation-play-state:paused}
.login-emblem{animation-name:none}
.login-motion-enabled .login-emblem{animation-name:login-emblem-reveal}
.login-motion-running .login-aurora,.login-motion-running .login-emblem,.login-motion-running .login-light-pass::after{animation-play-state:running}
@keyframes login-aurora-drift{from{transform:translate3d(-2%,0,0) rotate(-24deg);opacity:.3}to{transform:translate3d(5%,7%,0) rotate(-17deg);opacity:.65}}
@keyframes login-emblem-reveal{from{opacity:.5;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes login-sheen{0%,55%{transform:translateX(0) rotate(12deg)}85%,100%{transform:translateX(400%) rotate(12deg)}}
@media(max-width:900px){
 .login-wrap{grid-template-columns:minmax(0,1fr) 360px;gap:32px;padding-left:28px;padding-right:28px}
 .login-orbit-inner{inset:35px}.login-identity-copy>span{font-size:9px;letter-spacing:1px}
}
@media(max-width:700px){
 .login-wrap{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:25px;padding:35px 20px 180px}
 .login-identity{align-self:auto;width:180px}.login-compass{width:180px}.login-orbit-inner{inset:20px}
 .login-compass .hf-north-label{font-size:7px;letter-spacing:2px}
 .login-orbit-outer::before{inset:9px}.login-north{font-size:7px;padding:0 6px;letter-spacing:2px}
 .login-bearing{top:15px;bottom:15px}.login-emblem{inset:19%}.login-identity-copy{display:none}
 .login-card{max-width:380px;border-radius:18px}.card-body{padding:28px 24px}
 .login-motion-controls{position:relative;bottom:auto;right:auto;margin:-155px auto 24px;align-items:center}
 .login-motion-status{text-align:center}
 .login-aurora{width:150%;left:-50%;height:65%}.login-aurora-ice{left:-10%;top:10%}
}
@media(min-width:701px) and (max-height:850px){.login-wrap{padding-bottom:190px}.login-motion-controls{position:relative;bottom:auto;right:auto;margin:-165px 28px 22px auto}}
@media(prefers-reduced-motion:reduce){html:not(.login-motion-override) .login-aurora,html:not(.login-motion-override) .login-emblem,html:not(.login-motion-override) .login-light-pass::after{animation:none!important}}