* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', 'Poppins', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;}
body {min-height: 100vh;background: #ffffff;display: flex;align-items: center;justify-content: center;padding: 20px;position: relative;}
.login-container {width: 100%;max-width: 440px;background: #ffffff;border-radius: 24px;padding: 2rem 2rem 2.2rem;box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02), 0 0 0 1px #eef2f6;transition: transform 0.2s ease, box-shadow 0.2s ease;}
.brand {text-align: center;margin-bottom: 1.8rem;}
.brand h1 {font-size: 1.9rem;font-weight: 700;background: linear-gradient(120deg, #0f172a, #1e293b);background-clip: text;-webkit-background-clip: text;color: #059669;letter-spacing: -0.3px;margin-bottom: 0.4rem;}
.brand p {color: #5b6e8c;font-size: 0.85rem;font-weight: 500;}
.brand .by-icon {width: 48px;height: 48px;background: #059669;margin: 0 auto 12px auto;border-radius: 20px;display: flex;align-items: center;justify-content: center;font-weight: bold;font-size: 1.6rem;color: white;box-shadow: 0 4px 8px rgba(0,0,0,0.02);}
.input-group {margin-bottom: 1.4rem;position: relative;}
.input-label {display: block;font-size: 0.85rem;font-weight: 600;color: #1e293b;margin-bottom: 0.5rem;letter-spacing: 0.2px;}
.input-field {width: 100%;padding: 0.8rem 1rem;background: #ffffff;border: 1px solid #e2e8f0;border-radius: 12px;font-size: 0.95rem;color: #0f172a;transition: all 0.2s ease;outline: none;font-weight: 500;}
.input-field:focus {border-color: #10b981;box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);}
.input-field::placeholder {color: #94a3b8;font-weight: 400;}
.captcha-row {display: flex;gap: 0.9rem;align-items: center;}
.captcha-row .input-field {flex: 2;}
.captcha-box {flex: 1.2;display: flex;justify-content: center;align-items: center;gap: 6px;padding: 0 0.6rem;height: 48px;transition: all 0.2s;}
.captcha-code {font-family: 'Courier New', 'Fira Code', monospace;font-size: 1.5rem;font-weight: 800;letter-spacing: 4px;color: #0f172a;background: #ffffff;padding: 0 8px;border-radius: 8px;user-select: none;text-shadow: none;}
.sms-send-btn {flex: 0 0 auto;min-width: 120px;height: 48px;border: none;border-radius: 12px;background: #10b981;color: #fff;font-size: 0.88rem;font-weight: 700;letter-spacing: 0.2px;cursor: pointer;transition: all 0.2s ease;white-space: nowrap;padding: 0 0.9rem;box-shadow: 0 1px 2px rgba(16, 185, 129, 0.15);appearance: none;-webkit-appearance: none;}
.sms-send-btn:hover {background: #059669;box-shadow: 0 4px 12px rgba(16, 185, 129, 0.28);transform: translateY(-1px);}
.sms-send-btn:active {transform: translateY(0);box-shadow: 0 1px 2px rgba(16, 185, 129, 0.12);}
.sms-send-btn:disabled {background: #cbd5e1;color: #fff;box-shadow: none;cursor: not-allowed;transform: none;}
.login-btn {width: 100%;background: #10b981;border: none;padding: 0.85rem;border-radius: 12px;font-weight: 700;font-size: 1rem;color: white;cursor: pointer;margin: 1.5rem 0 1rem;transition: all 0.2s ease;box-shadow: 0 1px 2px rgba(0,0,0,0.05);letter-spacing: 0.3px;}
.login-btn:hover {background: #059669;transform: scale(0.98);box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);}
.login-btn:active {transform: scale(0.97);}
.error-message {color: #dc2626;padding: 0.6rem; font-size:13px;}
@media (max-width: 480px) {.login-container {padding: 1.5rem;}
.captcha-code {font-size: 1.2rem;letter-spacing: 2px;}
.captcha-box {height: 44px;}
.sms-send-btn {height: 44px;min-width: 108px;font-size: 0.82rem;padding: 0 0.7rem;}
.input-field {padding: 0.7rem 0.9rem;}}
@keyframes fadeSlide {from {opacity: 0;transform: translateY(8px);}
to {opacity: 1;transform: translateY(0);}}
.login-container {animation: fadeSlide 0.4s ease-out;}