*{box-sizing:border-box;margin:0;padding:0}
:root{font-family:"Segoe UI",system-ui,sans-serif;color:#f8f8f2;background:#282a36;font-synthesis:none}
body{min-height:100vh;min-height:100svh;background:#282a36}
.login-stage{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:48px 24px}
.login-shell{width:min(100%,1080px);display:grid;grid-template-columns:1fr 1fr;min-width:0;min-height:610px;background:#282a36;box-shadow:0 35px 80px #282a3630,0 6px 20px #282a3620;animation:arrive .65s cubic-bezier(.2,.8,.2,1) both}
.login-visual{position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:58px 72px 65px 44px;background:#44475a;min-width:0}
.login-visual::before{content:"";position:absolute;inset:0;background:linear-gradient(155deg,#44475a55,#44475aee),url('/assets/auth-background.webp') 18% center/cover;filter:grayscale(1);opacity:.65}
.login-wave path{fill:#282a36}
.login-wave{z-index:2;position:absolute;right:-1px;top:0;height:100%;width:120px;pointer-events:none}
.visual-copy{position:relative;z-index:1;color:#f8f8f2;max-width:310px}
.visual-mark{display:grid;place-items:center;width:46px;height:46px;border:1px solid #f8f8f270;border-radius:50%;font-size:24px;font-weight:600;margin-bottom:40px}
.visual-eyebrow{font-size:10px;letter-spacing:2px;color:#f8f8f2;margin-bottom:18px}
.visual-copy h2{font-size:36px;line-height:1.25;letter-spacing:-1px;font-weight:500;margin-bottom:20px}
.visual-copy>p:last-child{font-size:14px;line-height:1.9;color:#f8f8f2}
.login-card{min-width:0;padding:68px 42px 44px 18px;display:flex;flex-direction:column;justify-content:center;background:#282a36}
.login-head{text-align:center;margin-bottom:34px}
.form-eyebrow{font-size:10px;letter-spacing:2px;color:#f8f8f2;margin-bottom:16px}
.login-head h1{font-size:clamp(25px,2.7vw,34px);font-weight:400;line-height:1.25;letter-spacing:-1px;color:#f8f8f2}
.login-head>p:last-child{font-size:13px;color:#f8f8f2;margin-top:12px}
.field{margin-bottom:20px}.field>label{display:block;margin:0 0 7px 18px;font-size:12px;color:#f8f8f2}
.input-shell{display:flex;align-items:center;height:48px;border:1px solid #f8f8f2;border-radius:28px;background:#282a36;transition:border-color .2s,box-shadow .2s;overflow:hidden}
.input-shell:focus-within{border-color:#bd93f9;box-shadow:0 0 0 3px #bd93f91f}
.input-icon{width:44px;flex:none;display:grid;place-items:center;color:#f8f8f2}.input-icon svg,.password-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}
.input-shell input{font:inherit;font-size:14px;color:#f8f8f2;min-width:0;width:100%;flex:1;align-self:stretch;border:0;background:transparent;outline:none;padding:0 8px 0 0}
.input-shell input::placeholder{color:#f8f8f2}.password-toggle{width:44px;height:44px;flex:none;border:0;background:transparent;display:grid;place-items:center;color:#f8f8f2;cursor:pointer}
.password-toggle:hover{background:#282a36;color:#f8f8f2}.form-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin:2px 8px 24px;font-size:11px;color:#f8f8f2}
.remember{display:flex;gap:7px;align-items:center;cursor:pointer}.remember input{width:16px;height:16px;accent-color:#bd93f9}
.submit,.clear{display:block;font:inherit;font-size:14px;cursor:pointer;transition:background .2s,transform .2s;border-radius:28px;min-height:44px}
.submit{width:160px;max-width:100%;margin:0 auto;border:0;background:#bd93f9;color:#282a36;box-shadow:0 6px 16px #bd93f926}
.submit:hover{background:#bd93f9;transform:translateY(-2px)}.submit:active{transform:translateY(1px)}.submit:disabled{opacity:.6;cursor:wait}
.clear{margin:10px auto 0;padding:8px 18px;background:none;border:0;color:#f8f8f2;font-size:12px}.clear:hover{background:#282a36;color:#f8f8f2}
.access-note{font-size:11px;color:#f8f8f2;text-align:center;line-height:1.7;margin:26px auto 0;max-width:290px}
.msg{padding:12px 16px;margin-bottom:20px;font-size:13px;border-radius:10px;line-height:1.5}.msg.err{background:#282a36;color:#f8f8f2;border:1px solid #ff5555}.msg.ok{background:#282a36;color:#f8f8f2}
.auth-note{font-size:12px;text-align:center;color:#f8f8f2;margin-top:12px}
button:focus-visible,a:focus-visible{outline:2px solid #bd93f9;outline-offset:3px}
@keyframes arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(max-width:760px){.login-stage{padding:24px 16px}.login-shell{grid-template-columns:minmax(0,1fr);max-width:440px;min-height:0}.login-visual{min-height:160px;padding:24px 28px;align-items:center;background-position:center 35%}.visual-mark{width:34px;height:34px;font-size:18px;margin-bottom:12px}.visual-eyebrow{margin-bottom:0}.visual-copy h2,.visual-copy>p:last-child{display:none}.login-wave{display:none}.login-card{padding:32px 24px 28px}.login-head{margin-bottom:26px}.login-head h1{font-size:27px}.access-note{margin-top:20px}}
@media(max-height:700px) and (min-width:761px){.login-stage{padding:24px}.login-shell{min-height:540px}.login-card{padding-top:36px;padding-bottom:30px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.submit:hover{transform:none}}