/* Login page specific styles */
.page{min-height:100vh;display:flex}
.left{flex:1;display:flex;align-items:center;justify-content:center;padding:40px}
.panel{width:100%;max-width:480px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.1) blur(6px);backdrop-filter:saturate(1.1) blur(6px);border:1px solid var(--border);border-radius:16px;box-shadow:0 12px 40px rgba(2,6,23,.10);padding:32px 28px}

.brand{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:12px;text-align:center}
.brand .logo{width:96px;height:auto;border-radius:8px;background:none;display:block}
.brand h1{font-size:20px;letter-spacing:.04em}
.brand small{display:block;color:var(--muted);font-size:12px;letter-spacing:.02em}

h2{margin:10px 0 18px 0;font-size:26px;letter-spacing:.02em}
.field{margin-bottom:14px}
.password-wrap{position:relative}
.toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer;color:#6b7280;font-size:13px}

.remember{display:flex;align-items:center;gap:8px;color:#111827;font-size:14px}

.btn-primary{background:var(--brand)}
.btn-primary:hover{background:var(--brand-dark)}

.meta{display:flex;justify-content:space-between;margin-top:10px;font-size:13px}
.notice{margin-top:14px;font-size:12px;color:#475569}

.right{flex:1;min-height:100vh;position:relative;overflow:hidden;background:linear-gradient(0deg,rgba(14,107,168,.15),rgba(14,107,168,.15)),url('../img/login-hero.webp') center/cover no-repeat}
.right::after{content:"";position:absolute;top:0;right:-1px;bottom:0;width:min(22vw,220px);pointer-events:none;background:linear-gradient(90deg, rgba(244,246,251,0) 0%, rgba(244,246,251,.6) 55%, var(--bg) 100%);}

.version{position:fixed;right:12px;bottom:8px;color:#94a3b8;background:#fff;border:1px solid var(--border);padding:4px 8px;border-radius:8px;font-size:12px}

/* Form row spacing */
.form-row{margin:8px 0 14px 0}

@media (max-width: 980px){
    .page{flex-direction:column}
    .right{order:-1;height:32vh;min-height:220px}
    .left{padding:24px}
}


/* UX polish */
.toggle:hover{color:var(--brand)}
.btn-primary:focus{outline:none;box-shadow:0 0 0 3px rgba(14,107,168,.2)}
.btn-primary:active{transform:translateY(.5px)}