:root{--primary-blue:#0056b3;--primary-blue-hover:#003f88;--primary-blue-light:#0066cc;--primary-blue-dark:#002d5a;--text-primary:#1a1a1a;--text-secondary:#666666;--text-tertiary:#999999;--border-color:#e0e0e0;--border-color-light:#f0f0f0;--background-white:#ffffff;--background-gray:#fafafa;--background-input:#f7f9fc;--shadow-sm:0 2px 8px rgba(0, 0, 0, 0.04);--shadow-md:0 4px 16px rgba(0, 0, 0, 0.08);--shadow-lg:0 8px 32px rgba(0, 0, 0, 0.12);--shadow-xl:0 20px 60px rgba(0, 0, 0, 0.15);--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:20px;--transition-base:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);--transition-smooth:all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);--font-family:"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif}*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}body{min-height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#f5f7fa 0%,#e8ecf1 100%);font-family:var(--font-family);color:var(--text-primary);line-height:1.6;padding:2rem 1rem;position:relative;overflow-x:hidden}body::before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:#f5f5f5 url(../images/flex/courier-pattern1.svg) center/contain no-repeat;background-attachment:fixed;background-repeat:no-repeat;background-size:100%;opacity:.6;pointer-events:none;z-index:0}body::after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgb(0 0 0 / .2) 0%,rgb(0 86 179 / .05) 50%,rgb(0 0 0 / .15) 100%);pointer-events:none;z-index:1}.login-container{width:100%;max-width:1200px;height:90vh;min-height:650px;max-height:900px;display:grid;grid-template-columns:1.2fr 1fr;background:var(--background-white);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-xl);position:relative;z-index:10;backdrop-filter:blur(20px);border:1px solid rgb(255 255 255 / .8)}.login-container::before{content:"";background:linear-gradient(135deg,rgb(0 86 179 / .08) 0%,rgb(0 102 204 / .04) 100%),url(../images/loginpromo.png) center/cover no-repeat;grid-column:1 / 2;width:100%;height:100%;filter:brightness(.97) contrast(1.03) saturate(1.05);position:relative}.login-card{position:relative;grid-column:2 / 3;display:flex;flex-direction:column;justify-content:flex-start;padding:3rem 3.5rem;background:rgb(255 255 255 / .98);border-left:1px solid var(--border-color-light);overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;scrollbar-gutter:stable}.login-card *{position:relative;z-index:2}.login-card::-webkit-scrollbar{width:10px}.login-card::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#cbd5e0 0%,#a0aec0 100%);border-radius:10px;border:2px solid rgb(255 255 255 / .5)}.logo-section{text-align:center;margin-bottom:2.5rem;padding-top:.5rem;animation:fadeInDown 0.6s ease-out}@keyframes fadeInDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.mcl-logo{width:140px;height:140px;margin-bottom:1rem;object-fit:contain;filter:drop-shadow(0 4px 8px rgb(0 0 0 / .1));transition:var(--transition-smooth);padding:0;margin:0 auto .2rem}.mcl-logo:hover{transform:scale(1.05) rotate(2deg);filter:drop-shadow(0 6px 12px rgb(0 86 179 / .2))}.logo-section h2{font-size:1.35rem;font-weight:600;margin-bottom:.35rem}.logo-section p{font-size:.875rem;color:var(--text-secondary)}form h3{text-align:center;margin-bottom:1.75rem;color:var(--text-primary);font-size:1.25rem;font-weight:600}.google-login.top{text-align:center;margin:0 0 1.25rem 0}.google-btn{display:flex;align-items:center;justify-content:center;gap:.75rem;width:100%;padding:.875rem 1.25rem;border:1.5px solid var(--border-color);border-radius:var(--radius-md);background:var(--background-white);color:var(--text-primary);font-size:.9375rem;font-weight:500;text-decoration:none;transition:var(--transition-base);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}.google-btn img{width:20px;height:20px;object-fit:contain;position:relative;z-index:1}.google-btn:hover{background:var(--background-gray);transform:translateY(-2px);box-shadow:var(--shadow-md)}.divider{display:flex;align-items:center;justify-content:center;margin:1.5rem 0;color:var(--text-tertiary);font-size:.8125rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;position:relative}.divider::before,.divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--border-color),transparent);margin:0 1rem}.form-group{display:flex;flex-direction:column;margin-bottom:1.25rem}.form-group label{font-size:.875rem;font-weight:500;margin-bottom:.5rem}.form-group input{padding:.75rem 1rem;border:1.5px solid var(--border-color);border-radius:var(--radius-md);background:var(--background-input);transition:var(--transition-base)}.form-group input:focus{border-color:var(--primary-blue);box-shadow:0 0 0 4px rgb(0 86 179 / .08)}.form-group.forgot{text-align:right;margin-top:-.5rem}.form-group.forgot a{color:var(--primary-blue);text-decoration:none;font-size:.875rem;font-weight:500}.form-group.forgot a:hover{color:var(--primary-blue-hover)}#loginBtn{width:100%;padding:.9375rem 1.5rem;background:linear-gradient(135deg,var(--primary-blue),var(--primary-blue-dark));color:#fff;font-size:1rem;font-weight:600;border:none;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-base);box-shadow:0 4px 14px rgb(0 86 179 / .25)}#loginBtn:hover{background:linear-gradient(135deg,var(--primary-blue-hover),var(--primary-blue-dark));transform:translateY(-2px)}.register-redirect{text-align:center;font-size:.9375rem;color:var(--text-secondary);margin-top:1.5rem}.register-redirect a{color:var(--primary-blue);font-weight:600;text-decoration:none}.register-redirect a:hover{color:var(--primary-blue-light)}.login-footer{text-align:center;font-size:.8rem;color:var(--text-tertiary);margin-top:1.5rem;border-top:1px solid var(--border-color-light);padding-top:1rem}@media (max-width:768px){.login-container{grid-template-columns:1fr;height:auto}.login-container::before{display:none}.login-card{grid-column:1;padding:2rem 1.5rem;border-left:none}}.otp-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgb(0 0 0 / .5);z-index:9999}.otp-content{background:#fff;border-radius:10px;padding:2rem;width:320px;text-align:center;box-shadow:0 8px 25px rgb(0 0 0 / .2);animation:fadeIn 0.3s ease}.otp-content input{padding:10px;font-size:1.1rem;width:80%;text-align:center;margin:1rem 0;border:1px solid #ddd;border-radius:6px}.otp-buttons{display:flex;justify-content:center;gap:1rem}.otp-buttons button{border:none;padding:8px 16px;border-radius:6px;font-weight:600;cursor:pointer}#otpVerifyBtn{background:#2563eb;color:#fff}#otpCancelBtn{background:#e5e7eb}@keyframes fadeIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.btn-primary{width:100%;padding:.9rem 1.5rem;margin-top:.5rem;background:linear-gradient(135deg,var(--primary-blue),var(--primary-blue-dark));color:#fff;font-size:.95rem;font-weight:600;border:none;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-base);box-shadow:0 4px 14px rgb(0 86 179 / .25)}.btn-primary:hover{background:linear-gradient(135deg,var(--primary-blue-hover),var(--primary-blue-dark));transform:translateY(-2px);box-shadow:0 6px 20px rgb(0 86 179 / .35)}.btn-secondary{width:100%;padding:.9rem 1.5rem;background:#f2f4f8;color:var(--text-primary);font-size:.9rem;font-weight:500;border:1.5px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-base)}.btn-secondary:hover{background:#e6e9ef}.btn-loading{pointer-events:none;opacity:.85;position:relative}.btn-loading::after{content:"";width:18px;height:18px;border:2px solid rgb(255 255 255 / .4);border-top-color:#fff;border-radius:50%;position:absolute;right:16px;top:50%;transform:translateY(-50%);animation:spin 0.8s linear infinite}@keyframes spin{to{transform:rotate(360deg) translateY(-50%)}}