.zu-login-page { --login-green:#009b4d; --login-deep:#063b23; --login-dark:#032a19; --login-yellow:#fff200; --login-ink:#17372a; --login-muted:#687c72; --login-soft:#f1f8f4; overflow:hidden; background:#f3f8f5; color:var(--login-ink); }
.login-stage { position:relative; min-height:620px; display:flex; align-items:center; padding:42px 0; isolation:isolate; background-position:center; background-size:cover; }
.login-stage::before { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(110deg,rgba(3,42,24,.94),rgba(4,68,38,.82)),url("../images/bg/wall2.jpg") center/cover; }
.login-stage::after { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 78% 18%,rgba(255,242,0,.13),transparent 23%),linear-gradient(135deg,transparent 57%,rgba(0,155,77,.25)); }
.login-layout { max-width:940px; display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.88fr); margin:0 auto; overflow:hidden; border:1px solid rgba(255,255,255,.22); border-radius:23px; background:rgba(3,48,28,.5); box-shadow:0 27px 65px rgba(1,28,16,.32); backdrop-filter:blur(12px); }
.login-brand-panel { position:relative; padding:38px 40px; overflow:hidden; color:#fff; }
.login-brand-panel::after { content:""; position:absolute; right:-85px; bottom:-100px; width:280px; height:280px; border:1px solid rgba(255,242,0,.15); border-radius:50%; box-shadow:0 0 0 45px rgba(255,255,255,.025),0 0 0 90px rgba(255,255,255,.018); pointer-events:none; }
.login-brand-mark { width:62px; height:62px; display:grid; place-items:center; margin-bottom:22px; padding:7px; border-radius:15px; background:#fff; box-shadow:0 12px 25px rgba(0,0,0,.17); }
.login-brand-mark img { display:block; max-width:100%; max-height:100%; object-fit:contain; }
.login-eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom:15px; color:var(--login-yellow); font-size:.7rem; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.login-brand-panel h1 { max-width:490px; margin:0 0 12px; color:#fff; font-size:clamp(2.2rem,3.6vw,3.05rem); font-weight:850; letter-spacing:-.05em; line-height:1; }
.login-brand-panel>p { max-width:510px; margin:0 0 20px; color:rgba(255,255,255,.72); font-size:.88rem; line-height:1.62; }
.login-assurances { display:grid; gap:8px; }
.login-assurances>div { display:flex; align-items:center; gap:11px; padding:9px 11px; border:1px solid rgba(255,255,255,.11); border-radius:11px; background:rgba(255,255,255,.055); }
.login-assurances>div>span { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; border-radius:9px; background:rgba(255,242,0,.13); color:var(--login-yellow); font-size:.85rem; }
.login-assurances strong,.login-assurances small { display:block; }.login-assurances strong{font-size:.77rem}.login-assurances small{margin-top:1px;color:rgba(255,255,255,.55);font-size:.65rem;line-height:1.35}
.login-brand-footer { position:relative; z-index:2; display:flex; align-items:center; gap:9px; margin-top:19px; padding-top:13px; border-top:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.8); font-size:.78rem; }
.login-brand-footer>i { color:var(--login-yellow); }.login-brand-footer small{display:block;color:rgba(255,255,255,.45);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase}
.login-form-panel { padding:36px 38px; background:#fff; }
.login-form-heading { display:flex; align-items:center; gap:14px; margin-bottom:15px; }.login-form-icon{width:52px;height:52px;display:grid;place-items:center;flex:0 0 auto;border-radius:15px;background:var(--login-deep);color:var(--login-yellow);font-size:1.15rem;box-shadow:0 11px 24px rgba(6,59,35,.16)}
.login-form-heading small { color:var(--login-green); font-size:.65rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }.login-form-heading h2{margin:2px 0 0;color:var(--login-deep);font-size:1.8rem;font-weight:840;letter-spacing:-.035em}
.login-intro { margin:0 0 23px; color:var(--login-muted); font-size:.87rem; line-height:1.6; }
.login-alert { display:flex; align-items:flex-start; gap:9px; margin-bottom:19px; padding:12px 13px; border-radius:11px; font-size:.8rem; line-height:1.5; }.login-alert>i{margin-top:2px}.login-alert-error{border:1px solid #f1c6c6;background:#fff3f3;color:#9d2929}.login-alert-success{border:1px solid #bfe5cd;background:#effbf3;color:#17683a}
.login-form { display:grid; gap:15px; }.login-field label{display:block;margin-bottom:7px;color:var(--login-deep);font-size:.76rem;font-weight:800}.login-label-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.login-label-row>span{color:#8b9b93;font-size:.64rem}
.login-input-wrap { position:relative; }.login-input-wrap>i{position:absolute;left:15px;top:50%;z-index:2;color:var(--login-green);transform:translateY(-50%)}
.login-input-wrap input { width:100%; height:52px; padding:0 46px 0 44px; border:1px solid #d9e7df; border-radius:12px; outline:none; background:#f8fbf9; color:var(--login-ink); font-size:.86rem; transition:border-color .2s ease,box-shadow .2s ease,background .2s ease; }
.login-input-wrap input:focus { border-color:var(--login-green); background:#fff; box-shadow:0 0 0 4px rgba(0,155,77,.1); }.login-input-wrap input::placeholder{color:#98a69f}
.login-field>small { display:block; margin-top:6px; color:#8a9b92; font-size:.65rem; }.password-toggle{position:absolute;right:7px;top:50%;width:38px;height:38px;border:0;border-radius:9px;background:transparent;color:#758a7f;transform:translateY(-50%)}.password-toggle:hover,.password-toggle:focus-visible{background:var(--login-soft);color:var(--login-green);outline:none}
.login-form.was-validated input:invalid { border-color:#d55b5b; box-shadow:0 0 0 3px rgba(213,91,91,.09); }
.login-submit { width:100%; height:53px; display:flex; align-items:center; justify-content:space-between; margin-top:2px; padding:0 18px; border:0; border-radius:12px; background:linear-gradient(110deg,var(--login-green),#00743d); color:#fff; font-size:.84rem; font-weight:850; box-shadow:0 13px 26px rgba(0,155,77,.2); transition:transform .25s ease,box-shadow .25s ease; }.login-submit:hover{transform:translateY(-2px);box-shadow:0 17px 30px rgba(0,155,77,.27)}.login-submit:disabled{cursor:wait;opacity:.82;transform:none}
.login-security-note { display:flex; align-items:flex-start; gap:9px; margin-top:20px; padding:12px; border-radius:11px; background:var(--login-soft); color:var(--login-muted); }.login-security-note i{margin-top:3px;color:var(--login-green)}.login-security-note p{margin:0;font-size:.7rem;line-height:1.55}
.login-return { margin-top:19px; padding-top:17px; border-top:1px solid #e2ece6; text-align:center; }.login-return a{color:var(--login-deep);font-size:.75rem;font-weight:800;text-decoration:none}.login-return a:hover{color:var(--login-green)}.login-return i{margin-right:6px}
.login-stage-pattern { position:absolute; left:4%; bottom:9%; display:flex; gap:8px; opacity:.45; }.login-stage-pattern i{width:48px;height:4px;border-radius:99px;background:var(--login-yellow);transform:skewX(-28deg);animation:loginPulse 2.2s ease-in-out infinite}.login-stage-pattern i:nth-child(2){width:29px;animation-delay:.18s}.login-stage-pattern i:nth-child(3){width:14px;animation-delay:.36s}
@keyframes loginPulse{0%,100%{opacity:.35;transform:skewX(-28deg) scaleX(.75)}50%{opacity:1;transform:skewX(-28deg) scaleX(1)}}
@media(max-width:991.98px){.login-stage{padding:36px 0}.login-layout{max-width:620px;grid-template-columns:1fr}.login-brand-panel{padding:32px}.login-brand-panel h1{font-size:2.45rem}.login-assurances{grid-template-columns:repeat(3,1fr)}.login-assurances>div{align-items:center;flex-direction:column;text-align:center}.login-assurances small{display:none}.login-brand-footer{display:none}.login-form-panel{padding:34px 36px}}
@media(max-width:767.98px){.login-stage{padding:36px 0}.login-assurances{grid-template-columns:1fr}.login-assurances>div{align-items:center;flex-direction:row}.login-brand-mark{width:68px;height:68px;margin-bottom:25px}.login-brand-panel{padding:32px}.login-form-panel{padding:34px}.login-brand-panel h1{font-size:2.35rem}}
@media(max-width:575.98px){.login-stage{padding:22px 0}.login-layout{border-radius:19px}.login-brand-panel{padding:27px 23px}.login-brand-panel>p{font-size:.86rem}.login-assurances small{display:none}.login-form-panel{padding:29px 22px}.login-form-heading h2{font-size:1.55rem}.login-form-icon{width:47px;height:47px}}
@media(prefers-reduced-motion:reduce){.login-stage-pattern i{animation:none}.login-submit,.login-input-wrap input{transition:none}}