.login-page { min-height: 100vh; color: var(--text-inverse); background: var(--surface-login); }
.login-layout { display: grid; min-height: 100vh; grid-template-columns: minmax(18rem, 1.1fr) minmax(24rem, .9fr); }
.login-visual { display: grid; place-items: center; padding: clamp(2rem, 7vw, 7rem); background: linear-gradient(145deg, #8a8a8a, #747474); }
.login-visual img { width: min(36rem, 80%); filter: drop-shadow(1rem 1.25rem 1rem rgba(0, 0, 0, .28)); }
.login-panel-wrap { display: grid; place-items: center; padding: clamp(1.5rem, 6vw, 6rem); background: var(--surface-login-panel); }
.login-panel { width: min(26rem, 100%); }
.login-brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-7); }
.login-brand img { width: 2.5rem; height: 2.5rem; }
.login-brand strong { font-size: 1.125rem; }
.login-panel h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
.login-intro { margin-bottom: var(--space-6); color: #e0e0e0; }
.login-panel .field label { color: #f4f4f4; }
.login-panel .field-help { color: #d6d6d6; }
.login-panel .input { color: #fff; background: #393939; border-color: #c6c6c6; }
.login-panel .input::placeholder { color: #c6c6c6; }
.login-panel .notice { margin-bottom: var(--space-5); color: var(--text-primary); }
.password-field { position: relative; }
.password-field .input { padding-right: 4rem; }
.password-toggle { position: absolute; top: 0; right: 0; min-width: 4rem; height: var(--control-height); border: 0; color: #fff; background: transparent; cursor: pointer; }
.login-meta { margin-top: var(--space-6); color: #d6d6d6; font-size: .8125rem; }
.login-meta a { color: #fff; }

@media (max-width: 48rem) {
    .login-layout { grid-template-columns: 1fr; }
    .login-visual { display: none; }
    .login-panel-wrap { min-height: 100vh; }
}