@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');*, *::before, *::after {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;background: #f8fafc;color: #1e293b;min-height: 100vh;}.login-container {display: grid;grid-template-columns: 1fr 1fr;min-height: 100vh;}.login-image-panel {position: relative;overflow: hidden;background: #0f172a;}.login-image-panel img {width: 100%;height: 100%;object-fit: cover;transition: opacity 0.6s ease;}.login-image-overlay {position: absolute;inset: 0;background: linear-gradient(135deg, rgba(15, 23, 42, 0.7) 0%, rgba(30, 58, 95, 0.5) 100%);}.login-image-content {position: absolute;bottom: 0;left: 0;right: 0;padding: 48px 40px;z-index: 2;}.login-image-content h3 {font-size: 28px;font-weight: 700;color: #fff;margin-bottom: 12px;line-height: 1.3;}.login-image-content p {font-size: 16px;color: rgba(255, 255, 255, 0.8);line-height: 1.6;max-width: 480px;}.login-carousel-dots {display: flex;gap: 8px;margin-top: 24px;}.login-carousel-dot {width: 10px;height: 10px;border-radius: 50%;background: rgba(255, 255, 255, 0.3);cursor: pointer;transition: all 0.3s ease;border: none;}.login-carousel-dot.active {background: #fff;width: 28px;border-radius: 5px;}.login-form-panel {display: flex;align-items: center;justify-content: center;padding: 40px;background: #f8fafc;}.login-form-inner {width: 100%;max-width: 440px;}.brand {display: flex;align-items: center;gap: 12px;margin-bottom: 32px;}.brand-logo {width: 40px;height: 40px;object-fit: contain;}.brand-name {font-size: 24px;font-weight: 700;background: linear-gradient(135deg, #1e3a5f, #3b82f6);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;}.step-indicators {display: flex;align-items: center;margin-bottom: 32px;}.step-dot {width: 32px;height: 32px;border-radius: 50%;background: #f1f5f9;border: 2px solid #e2e8f0;color: #94a3b8;font-size: 13px;font-weight: 600;display: flex;align-items: center;justify-content: center;transition: all 0.3s ease;flex-shrink: 0;}.step-dot.active {background: #1e3a5f;border-color: #1e3a5f;color: #fff;}.step-dot.completed {background: #10b981;border-color: #10b981;color: #fff;}.step-line {flex: 1;height: 2px;background: #e2e8f0;transition: background 0.3s ease;}.step-line.active {background: #10b981;}.login-step {display: none;animation: fadeSlideIn 0.35s ease;}.login-step.active {display: block;}@keyframes fadeSlideIn {from { opacity: 0; transform: translateY(12px); }to { opacity: 1; transform: translateY(0); }}.login-step h2 {font-size: 24px;font-weight: 700;color: #0f172a;margin-bottom: 8px;letter-spacing: -0.01em;}.step-subtitle {font-size: 15px;color: #64748b;margin-bottom: 24px;line-height: 1.5;}.step-subtitle strong {color: #334155;font-weight: 600;}.form-field {margin-bottom: 20px;}.form-field label {display: block;font-size: 14px;font-weight: 500;color: #334155;margin-bottom: 6px;}.input-wrapper {position: relative;display: flex;align-items: center;}.input-icon {position: absolute;left: 14px;color: #94a3b8;font-size: 15px;pointer-events: none;z-index: 1;}.input-wrapper input {width: 100%;height: 48px;padding: 0 14px 0 42px;border: 1.5px solid #e2e8f0;border-radius: 10px;font-size: 15px;font-family: inherit;color: #1e293b;background: #f8fafc;transition: all 0.2s ease;outline: none;}.input-wrapper input:focus {border-color: #3b82f6;background: #fff;box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08);}.input-wrapper input::placeholder {color: #94a3b8;}.toggle-password {position: absolute;right: 12px;background: none;border: none;color: #94a3b8;cursor: pointer;font-size: 15px;padding: 4px;transition: color 0.2s;}.toggle-password:hover {color: #64748b;}.code-inputs {display: flex;gap: 10px;justify-content: center;margin-bottom: 24px;}.code-digit {width: 52px;height: 60px;text-align: center;font-size: 24px;font-weight: 700;font-family: 'Inter', monospace;color: #1e293b;border: 1.5px solid #e2e8f0;border-radius: 12px;background: #f8fafc;outline: none;transition: all 0.2s ease;caret-color: #3b82f6;}.code-digit:focus {border-color: #3b82f6;background: #fff;box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08);transform: translateY(-1px);}.btn-primary {width: 100%;height: 48px;background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);color: #fff;border: none;border-radius: 10px;font-size: 15px;font-weight: 600;font-family: inherit;cursor: pointer;transition: all 0.2s ease;display: flex;align-items: center;justify-content: center;gap: 8px;}.btn-primary:hover:not(:disabled) {background: linear-gradient(135deg, #172e4a 0%, #1d4ed8 100%);box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);transform: translateY(-1px);}.btn-primary:active:not(:disabled) {transform: translateY(0);}.btn-primary:disabled {opacity: 0.65;cursor: not-allowed;}.btn-secondary {display: block;width: 100%;height: 48px;line-height: 48px;text-align: center;background: #f1f5f9;color: #334155;border: 1.5px solid #e2e8f0;border-radius: 10px;font-size: 15px;font-weight: 500;font-family: inherit;text-decoration: none;cursor: pointer;transition: all 0.2s ease;}.btn-secondary:hover {background: #e2e8f0;border-color: #cbd5e1;color: #1e293b;}.btn-back {display: inline-flex;align-items: center;gap: 6px;margin-top: 20px;background: none;border: none;color: #64748b;font-size: 14px;font-weight: 500;font-family: inherit;cursor: pointer;padding: 6px 0;transition: color 0.2s;}.btn-back:hover {color: #334155;}.btn-link {background: none;border: none;color: #2563eb;font-size: 14px;font-weight: 500;font-family: inherit;cursor: pointer;padding: 0;transition: color 0.2s;}.btn-link:hover {color: #1d4ed8;text-decoration: underline;}.divider {display: flex;align-items: center;margin: 24px 0;gap: 16px;}.divider::before,.divider::after {content: '';flex: 1;height: 1px;background: #e2e8f0;}.divider span {font-size: 13px;color: #94a3b8;font-weight: 500;}.resend-row {text-align: center;margin-top: 20px;display: flex;align-items: center;justify-content: center;gap: 6px;}.resend-text {font-size: 14px;color: #64748b;}.resend-timer {font-size: 14px;color: #94a3b8;font-weight: 500;}.forgot-link {display: block;text-align: center;margin-top: 16px;font-size: 14px;color: #64748b;text-decoration: none;font-weight: 500;transition: color 0.2s;}.forgot-link:hover {color: #2563eb;}.alert-box {padding: 12px 16px;border-radius: 8px;font-size: 14px;margin-bottom: 20px;line-height: 1.4;}.alert-error {background: #fef2f2;border: 1px solid #fecaca;color: #dc2626;}.alert-success {background: #f0fdf4;border: 1px solid #bbf7d0;color: #16a34a;}.back-to-home {text-align: center;margin-top: 32px;}.back-to-home a {color: #64748b;font-size: 14px;text-decoration: none;font-weight: 500;transition: color 0.2s;}.back-to-home a:hover {color: #2563eb;}@media (max-width: 900px) {.login-container {grid-template-columns: 1fr;}.login-image-panel {display: none;}.login-form-panel {min-height: 100vh;padding: 24px;}}@media (max-width: 480px) {.login-form-inner {max-width: 100%;}.code-digit {width: 44px;height: 52px;font-size: 20px;}}