:root{--brand-primary:#075bdc}
*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,Arial,sans-serif}
html,body{min-height:100vh}
body{background:#f6f9ff}

/* ─── Layout ──────────────────────────────────────────── */
.login-page{min-height:100vh;display:flex}

/* ─── LEFT SIDE ───────────────────────────────────────── */
.left-side{width:42%;min-height:100vh;padding:55px 65px;color:white;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;background:radial-gradient(circle at 70% 30%,#1767d0 0,transparent 35%),linear-gradient(145deg,#06234f,#0744a8 65%,#087bea)}
.left-side::before,.left-side::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.12);border-radius:50%}
.left-side::before{width:220px;height:220px;right:-80px;top:130px}
.left-side::after{width:300px;height:300px;left:-130px;bottom:-120px}

.logo{position:relative;z-index:2}
.logo-img{width:min(280px,80%);height:auto;object-fit:contain;filter:drop-shadow(0 5px 15px rgba(0,0,0,.12))}

.hero{position:relative;z-index:2;max-width:500px}
.hero h2{font-size:42px;line-height:1.25;margin-bottom:22px;font-weight:700}
.hero h2 span{color:#3ab7ff}
.hero p{color:#d3e4ff;font-size:17px;line-height:1.7;max-width:440px}

.features{display:flex;gap:34px;position:relative;z-index:2;margin-top:45px}
.feature{display:flex;align-items:center;gap:11px;font-size:13px;font-weight:600}
.feature-icon{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:18px;color:white;background:linear-gradient(135deg,#1cb5ff,#2762d7);box-shadow:0 8px 24px rgba(0,0,0,.18)}

/* ─── RIGHT SIDE ──────────────────────────────────────── */
.right-side{width:58%;min-height:100vh;display:grid;place-items:center;padding:40px;position:relative;overflow:hidden;background:radial-gradient(circle at 90% 55%,#e2f2ff,transparent 30%),linear-gradient(135deg,#ffffff,#f5f9ff)}
.right-side::after{content:"";width:330px;height:330px;border-radius:50%;position:absolute;right:-180px;top:-160px;background:#edf4ff}

/* ─── LOGIN CARD ──────────────────────────────────────── */
.login-card{width:100%;max-width:570px;padding:48px 50px 35px;background:rgba(255,255,255,.94);border:1px solid #edf1f7;border-radius:28px;box-shadow:0 30px 80px rgba(28,70,140,.12);position:relative;z-index:2}

.water-icon{width:72px;height:72px;margin:0 auto 18px;border-radius:50%;color:white;display:grid;place-items:center;font-size:29px;background:linear-gradient(145deg,#07389c,#0879f8);box-shadow:0 10px 25px rgba(0,88,220,.25)}

.login-card h2{text-align:center;color:#08275b;font-size:30px;margin-bottom:8px}
.subtitle{text-align:center;color:#79849a;margin-bottom:38px;font-size:15px}

/* ─── Form Fields ─────────────────────────────────────── */
.form-group{margin-bottom:24px}
label{display:block;color:#526078;font-size:12px;font-weight:700;margin-bottom:9px;letter-spacing:.4px}
.input-box{height:62px;border:1px solid #d8deea;border-radius:12px;display:flex;align-items:center;background:white;transition:.25s}
.input-box:focus-within{border-color:#0876ee;box-shadow:0 0 0 4px rgba(8,118,238,.08)}
.input-box>i{width:52px;text-align:center;color:#65738c;font-size:16px}
.input-box input{flex:1;height:100%;border:0;outline:0;font-size:15px;color:#24334d;background:transparent}
.input-box input::placeholder{color:#929bad}

.eye{cursor:pointer;padding-right:20px;border:0;background:none;color:#65738c;font-size:16px}

.forgot{display:block;text-align:right;color:#0872e9;font-size:13px;font-weight:700;text-decoration:none;margin-top:-10px;margin-bottom:28px;border:0;background:none;cursor:pointer;width:100%}
.forgot:hover{text-decoration:underline}

/* ─── Submit Button ───────────────────────────────────── */
.login-btn{width:100%;height:58px;border:0;border-radius:12px;background:linear-gradient(90deg,#0642b4,#1682ff);color:white;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 12px 24px rgba(0,89,220,.25);transition:.25s}
.login-btn:hover{transform:translateY(-2px);box-shadow:0 16px 28px rgba(0,89,220,.3)}
.login-btn:disabled{opacity:.7;cursor:wait;transform:none}
.login-btn i{margin-right:9px}

/* ─── Divider & Footer ────────────────────────────────── */
.divider{display:flex;align-items:center;gap:14px;margin:28px auto;color:#8792a6;width:180px}
.divider:before,.divider:after{content:"";height:1px;flex:1;background:#e4e9f1}
.footer{text-align:center;color:#8792a6;font-size:12px}

/* ─── Messages ────────────────────────────────────────── */
.message-container{display:none;margin:0 0 20px;padding:13px 15px;border-radius:10px;font-size:14px}
.message-container.show{display:flex;gap:10px;align-items:flex-start}
.message-container.success{background:#eaf9f1;color:#17633d}
.message-container.error{background:#fff0f0;color:#9d2631}
.message-container.info{background:#edf6ff;color:#174f88}
.message-close{margin-left:auto;border:0;background:none;color:inherit;cursor:pointer}

/* ─── OTP Panel ───────────────────────────────────────── */
.otp-panel{display:none}
.back-link{border:0;background:none;color:#0872e9;font-weight:700;cursor:pointer;margin-top:18px}
.otp-phone{color:#0872e9;font-weight:700}
.otp-input{text-align:center;letter-spacing:9px;font-size:24px}

/* ─── Spinner ─────────────────────────────────────────── */
.spinner{display:none;width:17px;height:17px;margin-right:9px;border:2px solid rgba(255,255,255,.4);border-top-color:white;border-radius:50%;animation:spin .7s linear infinite}
.login-btn.loading .spinner{display:inline-block}
.login-btn.loading .indicator-label{opacity:.85}
@keyframes spin{to{transform:rotate(360deg)}}

/* ─── Responsive ──────────────────────────────────────── */
@media(max-width:900px){
  .left-side{display:none}
  .right-side{width:100%;padding:25px 18px;background:linear-gradient(145deg,#073b93,#1685ed)}
  .login-card{padding:38px 25px 28px;border-radius:22px}
  .login-card h2{font-size:26px}
  .subtitle{margin-bottom:30px}
}
@media(max-width:480px){
  .login-card{padding:32px 20px 25px}
  .input-box{height:56px}
  .water-icon{width:62px;height:62px;font-size:24px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}