.login-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 1.05fr) minmax(480px, .95fr); }
.login-visual { position: relative; overflow: hidden; min-height: 100vh; color: white; background: radial-gradient(circle at 20% 20%, rgba(22,199,217,.22), transparent 38%), linear-gradient(145deg, #061522 0%, #0a2d45 65%, #075769 120%); }
.login-visual::before, .login-visual::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }
.login-visual::before { width: 520px; height: 520px; right: -180px; top: -160px; }
.login-visual::after { width: 360px; height: 360px; left: -120px; bottom: -170px; }
.visual-content { position: relative; z-index: 1; min-height: 100%; padding: 46px 7vw 42px; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand > div:last-child { display: grid; }
.brand strong { font-size: 20px; letter-spacing: -.02em; }
.brand span { color: var(--cyan); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; }
.visual-copy { max-width: 620px; margin: auto 0; }
.eyebrow { display: inline-block; color: var(--cyan); font-size: 12px; font-weight: 850; letter-spacing: .16em; }
.eyebrow.dark { color: #087e8d; }
.visual-copy h1 { max-width: 570px; margin: 20px 0 18px; font-size: clamp(38px, 5vw, 68px); line-height: 1.02; letter-spacing: -.045em; }
.visual-copy p { max-width: 540px; color: #bed1dc; font-size: 18px; line-height: 1.7; }
.security-note { display: flex; align-items: center; gap: 9px; color: #b8cdd8; font-size: 13px; }
.security-note span { width: 8px; height: 8px; border-radius: 50%; background: #43e4cf; box-shadow: 0 0 0 5px rgba(67,228,207,.12); }
.login-panel { display: grid; place-items: center; padding: 32px; background: #f7fafb; }
.login-card { width: min(440px, 100%); padding: 38px; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: 0 22px 60px rgba(7,26,43,.10); }
.login-card h2 { margin: 10px 0 8px; font-size: 34px; letter-spacing: -.035em; }
.intro { margin: 0 0 28px; color: var(--muted); line-height: 1.55; }
form { display: grid; gap: 18px; }
.password-field { position: relative; }
.password-field input { padding-right: 82px; }
.password-field button { position: absolute; right: 6px; top: 6px; height: 34px; border: 0; border-radius: 7px; color: #087e8d; background: transparent; font-size: 12px; font-weight: 800; cursor: pointer; }
.full { width: 100%; }
.otp-input { text-align: center; font-size: 26px; font-weight: 800; letter-spacing: .35em; }
.back-button { border: 0; color: #087e8d; background: transparent; font-weight: 750; cursor: pointer; }
.login-card footer { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.mobile-brand { display: none; }
@media (max-width: 900px) { .login-layout { grid-template-columns: 1fr; } .login-visual { display: none; } .login-panel { align-content: center; gap: 28px; min-height: 100vh; } .mobile-brand { display: flex; color: var(--navy); } }
@media (max-width: 520px) { .login-panel { padding: 18px; } .login-card { padding: 26px 22px; } .login-card h2 { font-size: 29px; } }

.login-logo{width:110px;height:110px;object-fit:contain;background:#fff;border-radius:14px}.login-panel .mobile-brand{margin-bottom:24px}.login-panel footer small{white-space:nowrap}@media(max-width:600px){.login-logo{width:90px;height:90px}.login-card footer{flex-wrap:wrap;gap:12px}}