.login-container{min-height:100dvh;padding:2rem;padding-top:calc(2rem + var(--safe-top));padding-bottom:calc(2rem + var(--safe-bottom));background:var(--color-bg);justify-content:center;align-items:center;display:flex;position:relative}.login-container:before{content:"";pointer-events:none;background:radial-gradient(#0071e314 0%,#0000 70%);width:600px;height:400px;position:absolute;top:0;left:50%;transform:translate(-50%)}.login-card{background:var(--color-surface);border:1px solid var(--color-border-light);border-radius:var(--radius-xl);z-index:1;width:100%;max-width:420px;padding:2.5rem;position:relative}.login-header{text-align:center;margin-bottom:2rem}.login-logo{color:var(--color-accent);margin-bottom:1rem;font-size:2rem}.login-header h2{font-size:var(--text-xl);color:var(--color-text-primary);letter-spacing:-.02em;margin:0;font-weight:700}.login-error{color:var(--color-danger);border-radius:var(--radius-md);font-size:var(--text-sm);text-align:center;background-color:#ef44441a;border:1px solid #ef444433;margin-bottom:1.5rem;padding:.75rem 1rem}.login-form{flex-direction:column;gap:1rem;display:flex}.form-field{flex-direction:column;display:flex}.form-field input{border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-overlay);width:100%;color:var(--color-text-primary);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);padding:.875rem 1rem;font-size:.9375rem}.form-field input:focus{border-color:var(--color-accent);outline:none;box-shadow:0 0 0 3px #0071e326}.form-field input::placeholder{color:var(--color-text-muted)}.login-submit{color:#000;border-radius:var(--radius-md);cursor:pointer;width:100%;min-height:var(--touch-target);transition:all var(--transition-fast);background:#fff;border:none;margin-top:.5rem;padding:.875rem 1rem;font-size:.9375rem;font-weight:600}.login-submit:hover:not(:disabled){transform:scale(1.02);box-shadow:0 4px 16px #0000004d}.login-submit:disabled{opacity:.5;cursor:not-allowed}.login-switch{text-align:center;font-size:var(--text-sm);color:var(--color-text-secondary);margin-top:1.5rem}.login-switch button{color:var(--color-accent);cursor:pointer;font-weight:600;font-size:inherit;min-height:var(--touch-target);transition:color var(--transition-fast);background:0 0;border:none;padding:4px 8px}.login-switch button:hover{color:var(--color-accent-light)}.login-divider{align-items:center;gap:1rem;margin:1.5rem 0;display:flex}.login-divider:before,.login-divider:after{content:"";background:var(--color-overlay-hover);flex:1;height:1px}.login-divider span{font-size:var(--text-sm);color:var(--color-text-muted)}.login-social{gap:.75rem;display:flex}.social-btn{border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-overlay);font-size:var(--text-sm);color:var(--color-text-secondary);cursor:pointer;min-height:var(--touch-target);transition:all var(--transition-fast);flex:1;justify-content:center;align-items:center;gap:.5rem;padding:.875rem 1rem;font-weight:500;display:flex}.social-btn:hover{border-color:var(--color-text-faint);background:var(--color-overlay-hover);color:var(--color-text-primary)}.social-btn.apple{color:#000;background:#fff;border-color:#0000}.social-btn.apple:hover{background:var(--color-text-primary)}.social-btn.guest{color:var(--color-accent);background:#0071e31a;border-color:#0071e340;width:100%}.social-btn.guest:hover{color:var(--color-accent-light);background:#0071e32e;border-color:#0071e366}@media (width<=768px){.login-card{max-width:400px;padding:2rem}}@media (width<=640px){.login-container{padding:1rem;padding-top:calc(1rem + var(--safe-top));padding-bottom:calc(1rem + var(--safe-bottom));align-items:flex-start}.login-container:before{width:100vw;height:250px}.login-card{border-radius:var(--radius-lg);max-width:100%;padding:1.5rem 1.25rem}.login-header{margin-bottom:1.5rem}.login-header h2{font-size:1.25rem}.login-logo{margin-bottom:.75rem;font-size:1.5rem}.login-form{gap:.75rem}.form-field input{padding:.75rem;font-size:1rem}.login-submit{padding:.75rem}.login-social{flex-wrap:wrap}.social-btn{flex:none;min-width:100%}.login-divider{margin:1rem 0}}@media (width<=480px){.login-card{padding:1.25rem 1rem}.login-header h2{font-size:1.125rem}.login-logo{font-size:1.25rem}}