.auth-page { min-height:100vh; background:#fff; }
.auth-layout { min-height:100vh; display:grid; grid-template-columns:minmax(500px,1.08fr) minmax(520px,.92fr); }
.auth-showcase { position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; padding:80px clamp(50px,7vw,130px); color:#fff; background:#061a3d; }
.auth-showcase__image { position:absolute; inset:0; opacity:.48; background:linear-gradient(90deg,rgba(2,14,38,.70),rgba(4,29,70,.24)),url('../../img/baner2.png') center/cover; animation:authImageIn 1.4s ease both; }
.auth-showcase::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(3,18,47,.93) 0%,rgba(4,29,70,.62) 60%,rgba(4,29,70,.34)); }
.auth-showcase__grid { position:absolute; z-index:1; inset:0; opacity:.14; background-image:linear-gradient(rgba(255,255,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.15) 1px,transparent 1px); background-size:75px 75px; mask-image:linear-gradient(120deg,#000,transparent 78%); }
.auth-showcase__orbit { position:absolute; z-index:2; border:1px solid rgba(255,221,0,.25); border-radius:50%; }
.auth-showcase__orbit::after { content:""; position:absolute; top:50%; left:-5px; width:10px; height:10px; border-radius:50%; background:#ffdd00; box-shadow:0 0 24px #ffdd00; }
.auth-showcase__orbit--one { right:-140px; top:8%; width:520px; height:520px; animation:orbitSpin 24s linear infinite; }
.auth-showcase__orbit--two { left:-260px; bottom:-330px; width:650px; height:650px; opacity:.55; animation:orbitSpin 30s linear infinite reverse; }
.auth-showcase__content { position:relative; z-index:3; max-width:680px; animation:authContentIn .9s .15s both; }
.auth-showcase h2 { margin:0; font-size:clamp(44px,4.7vw,76px); line-height:1.05; letter-spacing:-.055em; text-shadow:0 12px 38px rgba(0,0,0,.25); }
.auth-showcase__content>p { max-width:650px; margin:26px 0 36px; color:#d4deed; font-size:17px; line-height:1.75; }
.auth-showcase__footer { position:absolute; z-index:3; right:55px; bottom:35px; left:55px; display:flex; justify-content:space-between; color:#93a5bf; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.auth-showcase__footer span { color:#ffdd00; font-weight:800; }
.auth-panel { position:relative; display:grid; place-items:center; min-height:100vh; padding:75px clamp(40px,6vw,110px); overflow:hidden; background:linear-gradient(145deg,#fff,#f7f9fc); }
.auth-panel::before { content:""; position:absolute; top:-170px; right:-170px; width:420px; height:420px; border:1px solid rgba(8,45,115,.07); border-radius:50%; box-shadow:0 0 0 65px rgba(8,45,115,.018),0 0 0 130px rgba(8,45,115,.012); }
.auth-back { position:absolute; top:35px; right:45px; display:flex; align-items:center; gap:9px; color:#627086; font-size:11px; font-weight:600; transition:.3s; }
.auth-back:hover { color:#082d73; transform:translateX(-4px); }
.auth-form-wrap { position:relative; z-index:2; width:min(100%,510px); animation:authFormIn .9s .2s both; }
.auth-logo { display:block; height:140px; margin:0 0 10px; }
.auth-logo img { display:block; height:100%; width:auto; max-width:none; }
.auth-heading>p { margin:0 0 9px; color:#b48400; font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.auth-heading h1 { margin:0; color:#061a3d; font-size:clamp(34px,3.2vw,48px); line-height:1.1; letter-spacing:-.045em; }
.auth-heading>span { display:block; margin-top:13px; color:#778296; font-size:13px; line-height:1.6; }
.auth-form { margin-top:32px; }
.auth-field { display:block; margin-bottom:19px; color:#273b5b; font-size:11px; font-weight:700; }
.auth-field>span { display:block; margin-bottom:8px; }
.auth-input { position:relative; }
.auth-input>i { position:absolute; top:50%; left:17px; color:#96a1b2; transform:translateY(-50%); transition:.25s; }
.auth-input input { width:100%; height:56px; padding:0 50px 0 49px; border:1px solid #dbe2eb; border-radius:0; outline:0; color:#102746; background:#fff; font:500 13px Montserrat,sans-serif; box-shadow:0 8px 25px rgba(6,26,61,.035); transition:border .25s,box-shadow .25s,transform .25s; }
.auth-input input:focus { border-color:#ffdd00; box-shadow:0 0 0 4px rgba(255,221,0,.12),0 14px 35px rgba(6,26,61,.07); transform:translateY(-1px); }
.auth-input:focus-within>i { color:#ffdd00; }
.password-toggle { position:absolute; top:0; right:0; width:50px; height:56px; border:0; color:#778398; background:transparent; cursor:pointer; transition:.25s; }
.password-toggle:hover { color:#082d73; }
.auth-error { display:flex; align-items:center; gap:9px; margin:-6px 0 18px; padding:12px 15px; border:1px solid #f3c2c2; background:#fdf1f1; color:#b23a3a; font-size:11px; font-weight:600; }
.auth-error i { flex:0 0 auto; }
.auth-options { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:3px 0 25px; font-size:10px; }
.auth-options>a { color:#082d73; font-weight:700; }
.auth-options>a:hover { color:#b48400; }
.remember-me { display:flex; align-items:center; gap:9px; color:#657187; cursor:pointer; }
.remember-me input { position:absolute; opacity:0; }
.remember-me>span { position:relative; width:17px; height:17px; border:1px solid #cdd5e0; background:#fff; transition:.25s; }
.remember-me input:checked+span { border-color:#082d73; background:#082d73; }
.remember-me input:checked+span::after { content:""; position:absolute; left:5px; top:2px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.auth-submit { position:relative; width:100%; height:58px; display:flex; align-items:center; justify-content:center; gap:14px; overflow:hidden; border:0; color:#061a3d; background:#ffdd00; font:800 12px Montserrat,sans-serif; letter-spacing:.03em; box-shadow:0 14px 34px rgba(255,221,0,.24); cursor:pointer; transition:.35s; }
.auth-submit::before { content:""; position:absolute; top:0; bottom:0; left:-40%; width:25%; background:rgba(255,255,255,.6); transform:skewX(-25deg); transition:left .6s; }
.auth-submit:hover { color:#fff; background:#082d73; transform:translateY(-3px); box-shadow:0 20px 40px rgba(8,45,115,.23); }
.auth-submit:hover::before { left:120%; }
.auth-submit i { transition:transform .3s; }
.auth-submit:hover i { transform:translateX(6px); }
.auth-help { display:flex; align-items:center; gap:13px; margin-top:28px; padding:16px; border:1px solid #e3e8ef; background:rgba(255,255,255,.8); }
.auth-help>span { width:38px; height:38px; display:grid; place-items:center; flex:0 0 auto; color:#082d73; background:#fff3cc; border-radius:50%; }
.auth-help small,.auth-help a { display:block; }
.auth-help small { margin-bottom:3px; color:#8791a1; font-size:9px; }
.auth-help a { color:#061a3d; font-size:12px; font-weight:800; }
.auth-security { margin:20px 0 0; color:#98a1af; font-size:9px; text-align:center; }
.auth-security i { margin-right:6px; color:#55af79; }
@keyframes authImageIn { from{opacity:0;transform:scale(1.08)} to{opacity:.48;transform:scale(1)} }
@keyframes authContentIn { from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:none} }
@keyframes authFormIn { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:none} }
@media(max-width:1050px){.auth-layout{grid-template-columns:1fr}.auth-showcase{min-height:460px;padding:70px 40px}.auth-showcase h2{font-size:52px}.auth-panel{min-height:auto;padding:90px 30px 70px}.auth-form-wrap{width:min(100%,560px)}.auth-back{top:30px;right:30px}.auth-showcase__footer{display:none}}
@media(max-width:600px){.auth-showcase{min-height:390px;padding:55px 22px}.auth-showcase h2{font-size:39px}.auth-showcase__content>p{font-size:14px}.auth-panel{padding:75px 20px 55px}.auth-back{top:24px;right:20px}.auth-logo{height:110px}.auth-heading h1{font-size:36px}.auth-options{align-items:flex-start}.auth-page .floating-tools{display:none}}