.login-layout { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; }
.login-visual { position: relative; display: grid; place-items: center; align-content: center; min-height: 620px; padding: 70px; overflow: hidden; text-align: center; background: radial-gradient(circle at 45% 38%, rgba(53,208,230,.14), transparent 36%), linear-gradient(145deg, #080d18, #111c30); }
.login-visual canvas { width: min(620px, 100%); height: 300px; background: rgba(11,20,35,.72); border: 1px solid var(--line); border-radius: 16px; }.login-visual h2 { margin: 34px 0 0; }.login-visual p { margin: 8px 0; }
.floating-card { position: absolute; z-index: 2; width: 150px; padding: 14px; text-align: left; background: rgba(17,27,46,.94); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }.floating-card small, .floating-card span { display: block; color: var(--muted); font-size: 10px; }.floating-card strong { display: block; margin: 6px 0; font-size: 22px; }.float-a { left: 9%; top: 25%; }.float-b { right: 8%; bottom: 26%; }
.login-panel { display: grid; place-items: center; padding: 42px; }.login-box { width: min(390px, 100%); }.back-link { margin-bottom: 35px; padding: 0; border: 0; background: transparent; color: var(--muted); }.login-box h1 { margin: 28px 0 5px; font-size: 32px; }
.login-box label { display: block; margin: 16px 0; color: var(--muted); font-size: 11px; font-weight: 700; }.login-box input { display: block; width: 100%; margin-top: 7px; padding: 13px 14px; color: var(--text); background: #10192a; border: 1px solid var(--line); border-radius: 11px; outline: none; }.login-box input:focus { border-color: var(--cyan); }.login-box form .btn { width: 100%; margin-top: 4px; }
.google-btn { width: 100%; margin-top: 20px; color: var(--text); background: #10192a; font-weight: 750; }
.google-btn:disabled { cursor: not-allowed; opacity: .55; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 0; color: var(--muted); font-size: 10px; }.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.auth-note { min-height: 22px; margin: 14px 0 0; color: var(--red); font-size: 11px; text-align: center; }
.auth-note.success { color: var(--green); }
.auth-switch { margin-top: 16px; text-align: center; font-size: 11px; }.auth-switch button { padding: 0; color: var(--cyan); background: none; border: 0; font-weight: 750; }
.signup-visual { background: radial-gradient(circle at 45% 38%, rgba(74,222,128,.12), transparent 36%), linear-gradient(145deg, #080d18, #111c30); }