:root { --auth-blue: #0d59b4; --auth-navy: #073d80; }
* { box-sizing: border-box; }
body.auth-page { min-height: 100vh; margin: 0; color: #1d2a3a; background: #f3f6fb; }
.auth-shell { min-height: 100vh; padding: clamp(.75rem, 2vw, 1.5rem); }
.auth-frame { display: grid; min-height: calc(100vh - clamp(1.5rem, 4vw, 3rem)); max-width: 1480px; margin: auto; overflow: hidden; grid-template-columns: 1.03fr .97fr; background: #fff; border: 1px solid #d9e0ea; border-radius: 1rem; box-shadow: 0 1rem 3rem rgba(14,45,86,.1); }
.auth-hero { position: relative; display: flex; min-height: 700px; padding: clamp(2rem, 5vw, 4.5rem); overflow: hidden; flex-direction: column; background: radial-gradient(circle at 85% 16%, rgba(105,174,255,.36), transparent 34%), linear-gradient(145deg, #164e94 0%, #0d56a9 58%, #2875ce 100%); }
.auth-hero::before, .auth-hero::after { position: absolute; content: ''; border: 1px solid rgba(141,200,255,.2); transform: rotate(30deg); }
.auth-hero::before { width: 340px; height: 340px; top: 80px; right: -170px; }
.auth-hero::after { width: 440px; height: 440px; bottom: -270px; left: 70px; }
.auth-brand { position: relative; z-index: 2; display: flex; align-items: center; gap: .8rem; }
.auth-brand-shield { display: inline-grid; width: 52px; height: 58px; place-items: center; font-size: 1.3rem; border: 2px solid #fff; border-radius: 50% 50% 45% 45%; }
.auth-brand strong { display: block; font-size: 1.15rem; letter-spacing: .03em; }
.auth-brand small { display: block; margin-top: .15rem; color: rgba(255,255,255,.75); font-size: .62rem; line-height: 1.35; text-transform: uppercase; }
.auth-copy { position: relative; z-index: 2; margin-top: clamp(3.2rem, 10vh, 7rem); }
.auth-copy h1 { font-size: clamp(1.75rem, 3vw, 2.65rem); font-weight: 700; line-height: 1.24; }
.auth-version { display: inline-block; color: #9edbff; font-size: .55em; white-space: nowrap; vertical-align: .18em; }
.auth-copy-line { display: block; width: 48px; height: 3px; margin: 1.4rem 0; background: #5cc4ff; border-radius: 1rem; }
.auth-copy p { max-width: 480px; margin: 0; color: rgba(255,255,255,.84); font-size: 1.05rem; line-height: 1.65; }
.auth-tech-visual { position: relative; z-index: 2; height: 270px; margin-top: auto; }
.tech-grid { position: absolute; right: 0; bottom: 0; left: 0; height: 105px; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.45) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.45) 1px, transparent 1px); background-size: 34px 24px; transform: perspective(250px) rotateX(58deg); transform-origin: bottom; }
.tech-monitor { position: absolute; left: 8%; bottom: 45px; width: 220px; height: 150px; padding: 10px; background: #dce8f7; border: 8px solid #edf4fb; border-radius: .6rem; box-shadow: 0 1rem 1.5rem rgba(4,30,71,.35); transform: rotate(-6deg); }
.monitor-screen { position: relative; display: flex; height: 100%; padding: 24px 24px 18px; align-items: flex-end; gap: 12px; background: #f8fbff; }
.monitor-screen span { width: 22px; background: #2474cb; }.monitor-screen span:nth-child(1){height:45%}.monitor-screen span:nth-child(2){height:68%}.monitor-screen span:nth-child(3){height:86%}
.monitor-screen i { position: absolute; top: 18px; right: 20px; color: #7a9fc8; font-size: 2.2rem; }
.monitor-stand { position: absolute; width: 75px; height: 38px; left: 65px; bottom: -42px; background: #dce8f7; clip-path: polygon(30% 0,70% 0,100% 100%,0 100%); }
.tech-server { position: absolute; left: 48%; bottom: 60px; display: flex; width: 112px; flex-direction: column; gap: 5px; transform: rotate(2deg); }
.tech-server span { height: 48px; background: linear-gradient(145deg,#335e91,#173d6c); border: 2px solid #5982b2; border-radius: .35rem; box-shadow: 0 .45rem .7rem rgba(3,25,58,.25); }
.tech-server span::after { display: block; width: 7px; height: 7px; margin: 18px 12px 0 auto; content: ''; background: #67d59c; border-radius: 50%; box-shadow: -15px 0 #7fb4e9; }
.tech-shield { position: absolute; left: 71%; bottom: 44px; display: grid; width: 104px; height: 122px; place-items: center; color: #fff; font-size: 2rem; background: linear-gradient(145deg,#3d91e8,#0950a7); border: 7px solid #dcecff; border-radius: 50% 50% 43% 43%; box-shadow: 0 1rem 1.5rem rgba(4,30,71,.35); }
.auth-form-side { display: grid; padding: clamp(1.2rem, 5vw, 4.5rem); place-items: center; background: radial-gradient(circle at 90% 8%, #f0f6ff, transparent 35%), #f9fbfe; }
.login-panel { width: min(100%, 560px); padding: clamp(1.7rem, 4vw, 3.5rem); background: #fff; border: 1px solid #edf0f4; border-radius: 1rem; box-shadow: 0 1rem 3rem rgba(17,47,88,.12); }
.login-user-icon { display: grid; width: 86px; height: 86px; margin: 0 auto 1.2rem; place-items: center; color: #1262bd; font-size: 2.6rem; background: #eaf3ff; border-radius: 50%; }
.auth-input { border: 1px solid #cfd7e3; border-radius: .45rem; transition: border-color .15s, box-shadow .15s; }
.auth-input:focus-within { border-color: #86b7fe; box-shadow: 0 0 0 .2rem rgba(13,110,253,.1); }
.auth-input .input-group-text, .auth-input .form-control, .password-toggle { min-height: 52px; border: 0; background: #fff; }
.auth-input .form-control:focus { box-shadow: none; }.password-toggle { color: #65748a; }
.auth-submit { min-height: 54px; background: linear-gradient(90deg,#0c58b1,#2d76cc); border: 0; }
.login-meta { display: flex; margin-top: 2rem; padding-top: 1.5rem; align-items: center; flex-direction: column; gap: .35rem; color: #526277; border-top: 1px solid #e7ebf1; }
.login-meta span { font-weight: 600; }.login-meta small { color: #8792a2; }
@media(max-width:991.98px){.auth-frame{grid-template-columns:1fr}.auth-hero{min-height:auto;padding:2rem}.auth-copy{margin-top:2.5rem}.auth-tech-visual{display:none}.auth-form-side{padding:1.5rem}.login-panel{box-shadow:none}.auth-copy p{max-width:650px}}
@media(max-width:575.98px){.auth-shell{padding:0}.auth-frame{min-height:100vh;border:0;border-radius:0}.auth-hero{padding:1.35rem}.auth-copy{margin-top:1.8rem}.auth-copy h1{font-size:1.45rem}.auth-copy p{font-size:.9rem}.auth-form-side{padding:1rem}.login-panel{padding:1.4rem;border-radius:.8rem}.login-user-icon{width:68px;height:68px;font-size:2rem}}