/* ─── RESET & BASE ─────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --primary:        #2563eb;
      --primary-dark:   #1d4ed8;
      --primary-light:  #dbeafe;
      --accent:         #7c3aed;
      --success:        #16a34a;
      --success-light:  #dcfce7;
      --danger:         #dc2626;
      --danger-light:   #fee2e2;
      --info:           #0891b2;
      --info-light:     #cffafe;

      --bg:             #f0f4ff;
      --surface:        #ffffff;
      --sidebar-bg:     #0f172a;
      --text-primary:   #0f172a;
      --text-secondary: #475569;
      --text-muted:     #94a3b8;
      --border:         #e2e8f0;
      --border-focus:   #2563eb;

      --radius-sm:  6px;
      --radius:     12px;
      --radius-lg:  20px;
      --transition: .22s cubic-bezier(.4,0,.2,1);
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: var(--bg);
      color: var(--text-primary);
      min-height: 100vh;
      display: flex;
      overflow: hidden;
      font-size: 14px;
    }

    /* ══════════════════════════════════════════════════════════
       LEFT PANEL – Brand / Illustration
    ══════════════════════════════════════════════════════════ */
    .left-panel {
      width: 52%;
      background: linear-gradient(145deg, #0f172a 0%, #1e3a8a 45%, #1d4ed8 75%, #7c3aed 100%);
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 44px 52px;
      overflow: hidden;
    }

    /* Decorative blobs */
    .blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(70px);
      pointer-events: none;
    }
    .blob-1 {
      width: 340px; height: 340px;
      background: rgba(124,58,237,.35);
      top: -80px; right: -80px;
    }
    .blob-2 {
      width: 260px; height: 260px;
      background: rgba(37,99,235,.4);
      bottom: 80px; left: -60px;
    }
    .blob-3 {
      width: 180px; height: 180px;
      background: rgba(6,182,212,.25);
      top: 50%; left: 50%;
      transform: translate(-50%,-50%);
    }

    /* Floating grid pattern */
    .grid-overlay {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 48px 48px;
      pointer-events: none;
    }

    /* Floating cards on left panel */
    .float-cards {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .float-card {
      position: absolute;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: var(--radius);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      padding: 14px 18px;
      display: flex;
      align-items: center;
      gap: 12px;
      animation: floatUp 6s ease-in-out infinite;
    }
    .float-card:nth-child(1) { top: 18%; right: 8%; animation-delay: 0s; }
    .float-card:nth-child(2) { top: 42%; right: 14%; animation-delay: 1.8s; }
    .float-card:nth-child(3) { bottom: 24%; right: 6%; animation-delay: 3.5s; }
    @keyframes floatUp {
      0%,100% { transform: translateY(0px); }
      50%      { transform: translateY(-10px); }
    }
    .float-card-icon {
      width: 36px; height: 36px;
      border-radius: 9px;
      display: grid; place-items: center;
      font-size: 16px;
      flex-shrink: 0;
    }
    .float-card-text strong {
      display: block;
      font-size: 12.5px;
      font-weight: 700;
      color: #fff;
    }
    .float-card-text span {
      font-size: 11px;
      color: rgba(255,255,255,.6);
    }

    /* Branding top */
    .brand {
      display: flex;
      align-items: center;
      gap: 14px;
      position: relative;
      z-index: 2;
    }
    .brand-icon {
      width: 50px; height: 50px;
      background: rgba(255,255,255,.15);
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 14px;
      display: grid; place-items: center;
      backdrop-filter: blur(8px);
    }
    .brand-icon i { color: #fff; font-size: 22px; }
    .brand-text strong {
      display: block;
      color: #fff;
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -.5px;
    }
    .brand-text span {
      font-size: 12px;
      color: rgba(255,255,255,.6);
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    /* Center content */
    .left-center {
      position: relative;
      z-index: 2;
    }
    .left-center h1 {
      font-size: 40px;
      font-weight: 800;
      color: #fff;
      line-height: 1.15;
      letter-spacing: -1.5px;
      margin-bottom: 16px;
    }
    .left-center h1 span {
      background: linear-gradient(90deg, #93c5fd, #c4b5fd);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .left-center p {
      font-size: 15px;
      color: rgba(255,255,255,.65);
      line-height: 1.7;
      max-width: 380px;
    }

    /* Feature pills */
    .feature-pills {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 36px;
    }
    .feature-pill {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 10px;
      backdrop-filter: blur(6px);
      max-width: 380px;
      transition: background var(--transition);
    }
    .feature-pill:hover { background: rgba(255,255,255,.11); }
    .feature-pill-icon {
      width: 34px; height: 34px;
      border-radius: 8px;
      display: grid; place-items: center;
      font-size: 15px;
      flex-shrink: 0;
    }
    .feature-pill-text strong {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: #fff;
    }
    .feature-pill-text span {
      font-size: 11.5px;
      color: rgba(255,255,255,.55);
    }

    /* Bottom bar */
    .left-bottom {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .security-badge {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 8px;
      font-size: 12px;
      color: rgba(255,255,255,.7);
    }
    .security-badge i { color: #4ade80; font-size: 13px; }

    /* ══════════════════════════════════════════════════════════
       RIGHT PANEL – Login Form
    ══════════════════════════════════════════════════════════ */
    .right-panel {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 32px;
      overflow-y: auto;
      position: relative;
      background: var(--bg);
    }

    /* Subtle background pattern */
    .right-panel::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle at 80% 20%, rgba(37,99,235,.06) 0%, transparent 60%),
                        radial-gradient(circle at 20% 80%, rgba(124,58,237,.05) 0%, transparent 60%);
      pointer-events: none;
    }

    .login-box {
      width: 100%;
      max-width: 460px;
      position: relative;
      z-index: 1;
    }

    /* Top header */
    .login-header {
      text-align: center;
      margin-bottom: 36px;
    }
    .login-header .header-icon {
      width: 64px; height: 64px;
      background: linear-gradient(135deg, var(--primary), var(--accent));
      border-radius: 18px;
      display: grid; place-items: center;
      margin: 0 auto 16px;
      box-shadow: 0 8px 28px rgba(37,99,235,.35);
      animation: iconPop .5s cubic-bezier(.34,1.56,.64,1) both;
    }
    @keyframes iconPop {
      from { opacity:0; transform: scale(.6); }
      to   { opacity:1; transform: scale(1); }
    }
    .login-header .header-icon i { color: #fff; font-size: 26px; }
    .login-header h2 {
      font-size: 26px;
      font-weight: 800;
      color: var(--text-primary);
      letter-spacing: -.7px;
    }
    .login-header p {
      font-size: 14px;
      color: var(--text-muted);
      margin-top: 6px;
    }


    /* Card */
    .login-card {
      background: var(--surface);
      border-radius: var(--radius-lg);
      border: 1px solid var(--border);
      box-shadow: 0 8px 40px rgba(15,23,42,.08), 0 2px 8px rgba(15,23,42,.04);
      padding: 36px 34px;
      animation: cardSlide .45s cubic-bezier(.4,0,.2,1) both;
    }
    @keyframes cardSlide {
      from { opacity:0; transform: translateY(20px); }
      to   { opacity:1; transform: translateY(0); }
    }


    /* Form groups */
    .form-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 18px;
    }
    .form-label {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .form-label i { font-size: 12px; color: var(--primary); }
    .required { color: var(--danger); }

    .input-wrap {
      position: relative;
    }
    .input-icon {
      position: absolute;
      left: 14px; top: 50%;
      transform: translateY(-50%);
      color: var(--text-muted);
      font-size: 14px;
      pointer-events: none;
      transition: color var(--transition);
    }
    .form-input {
      width: 100%;
      padding: 13px 44px 13px 42px;
      border: 1.5px solid var(--border);
      border-radius: 10px;
      font-size: 14px;
      font-family: inherit;
      color: var(--text-primary);
      background: #fafbff;
      transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
      outline: none;
    }
    .form-input::placeholder { color: #c1c9d8; }
    .form-input:focus {
      border-color: var(--border-focus);
      box-shadow: 0 0 0 3.5px rgba(37,99,235,.12);
      background: #fff;
    }
    .form-input:focus + .input-icon,
    .input-wrap:focus-within .input-icon { color: var(--primary); }

    /* Right icon (eye toggle) */
    .input-action {
      position: absolute;
      right: 13px; top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      padding: 4px;
      border-radius: 5px;
      font-size: 14px;
      transition: color var(--transition);
      z-index: 1;
    }
    .input-action:hover { color: var(--primary); }


    .field-hint {
      font-size: 11.5px;
      margin-top: 4px;
      display: none;
      align-items: center;
      gap: 4px;
    }
    .field-hint.error { color: var(--danger); display: flex; }
    .field-hint.success { color: var(--success); display: flex; }

    

    /* Remember / Forgot row */
    .row-opts {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 22px;
    }
    .checkbox-label {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      user-select: none;
    }
    .checkbox-label input[type=checkbox] { display: none; }
    .custom-check {
      width: 18px; height: 18px;
      border: 1.5px solid var(--border);
      border-radius: 5px;
      display: grid; place-items: center;
      transition: all var(--transition);
      flex-shrink: 0;
      background: #fafbff;
    }
    .checkbox-label input:checked ~ .custom-check {
      background: var(--primary);
      border-color: var(--primary);
    }
    .custom-check::after {
      content: '';
      width: 5px; height: 9px;
      border: 2px solid #fff;
      border-top: none;
      border-left: none;
      transform: rotate(45deg) translateY(-1px);
      display: none;
    }
    .checkbox-label input:checked ~ .custom-check::after { display: block; }
    .checkbox-label span {
      font-size: 13px;
      color: var(--text-secondary);
    }


    /* Submit button */
    .btn-login {
      width: 100%;
      padding: 15px;
      background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
      color: #fff;
      border: none;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      transition: all var(--transition);
      box-shadow: 0 6px 24px rgba(37,99,235,.38);
      letter-spacing: .2px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      position: relative;
      overflow: hidden;
    }
    .btn-login::before {
      content: '';
      position: absolute;
      top: 0; left: -100%;
      width: 100%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
      transition: left .5s;
    }
    .btn-login:hover::before { left: 100%; }
    .btn-login:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 32px rgba(37,99,235,.48);
    }
    .btn-login:active { transform: translateY(0); }
    .btn-login:disabled {
      opacity: .7;
      cursor: not-allowed;
      transform: none;
    }

    /* Progress bar inside button */
    .btn-progress {
      position: absolute;
      bottom: 0; left: 0;
      height: 3px;
      background: rgba(255,255,255,.5);
      border-radius: 0 0 12px 12px;
      width: 0%;
      transition: width 2s linear;
    }
    .btn-login.loading .btn-progress { width: 100%; }

    /* Alert banner */
    .alert-banner {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 12px 14px;
      border-radius: 10px;
      font-size: 13px;
      margin-bottom: 20px;
      line-height: 1.55;
      animation: fadeIn .3s ease;
    }
    .alert-banner.error {
      background: var(--danger-light);
      border: 1px solid #fca5a5;
      color: #991b1b;
    }
    .alert-banner.success {
      background: var(--success-light);
      border: 1px solid #86efac;
      color: #14532d;
    }
    .alert-banner.info {
      background: var(--info-light);
      border: 1px solid #67e8f9;
      color: #155e75;
    }
    .alert-banner i { font-size: 15px; margin-top: 1px; flex-shrink: 0; }
    @keyframes fadeIn {
      from { opacity:0; transform: translateY(-6px); }
      to   { opacity:1; transform: none; }
    }


    
/* ─── TOAST ─────────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 28px;
  right: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
}
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
  border: 1px solid var(--border);
  min-width: 300px;
  max-width: 400px;
  animation: slideUp .3s ease;
  transition: opacity .3s ease, transform .3s ease;
}
.toast.hide { opacity: 0; transform: translateY(10px); }
.toast-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  flex-shrink: 0;
  font-size: 14px;
}
.toast.success .toast-icon { background: var(--success-light); color: var(--success); }
.toast.info    .toast-icon { background: var(--info-light);    color: var(--info); }
.toast.warning .toast-icon { background: var(--warning-light); color: var(--warning); }
.toast.error   .toast-icon { background: var(--danger-light);  color: var(--danger); }
.toast-text strong { display: block; font-size: 13px; color: var(--text-primary); }
.toast-text span   { font-size: 12px; color: var(--text-muted); }
.toast-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 2px;
  flex-shrink: 0;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
    /* Spin */
    .spin { animation: spin 1s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ─── RESPONSIVE ───────────────────────────────────────── */
    @media (max-width: 900px) {
      .left-panel { display: none; }
      .right-panel { padding: 28px 20px; }
    }
    @media (max-width: 480px) {
      .login-card { padding: 26px 20px; }
     
    }
/*OTP Login Verify Modal */
.otp-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.55);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
opacity:0;
pointer-events:none;
transition:.25s;
}

.otp-overlay.show{
opacity:1;
pointer-events:auto;
}

.otp-modal{
width:420px;
background:white;
border-radius:14px;
padding:32px;
text-align:center;
box-shadow:0 25px 80px rgba(0,0,0,.35);
animation:scaleIn .25s ease;
}

@keyframes scaleIn{
from{transform:scale(.9);opacity:0}
to{transform:scale(1);opacity:1}
}

.otp-icon{
width:58px;
height:58px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#4f46e5,#6366f1);
color:white;
font-size:22px;
margin:auto;
margin-bottom:14px;
}

.otp-sub{
font-size:13px;
color:#6b7280;
margin-bottom:24px;
}

/* OTP INPUTS */

.otp-inputs{
display:flex;
justify-content:center;
gap:10px;
margin-bottom:20px;
}

.otp-digit{
width:46px;
height:52px;
font-size:22px;
text-align:center;
border-radius:8px;
border:1px solid #d1d5db;
}

.otp-digit:focus{
border-color:#4f46e5;
outline:none;
box-shadow:0 0 0 3px rgba(79,70,229,.15);
}

/* FOOTER */

.otp-footer{
margin-top:16px;
font-size:12px;
color:#6b7280;
}

#resendOtpBtn{
background:none;
border:none;
color:#4f46e5;
font-weight:600;
cursor:pointer;
margin-left:6px;
}

#resendOtpBtn:disabled{
color:#9ca3af;
cursor:not-allowed;
}

/* SHAKE ERROR */

.shake{
animation:shake .35s;
}

@keyframes shake{
0%,100%{transform:translateX(0)}
25%{transform:translateX(-6px)}
75%{transform:translateX(6px)}
}

/* BACK TO LOGIN BUTTON */
.otp-actions{
margin-top:12px;
text-align:center;
}

.otp-back{
background:none;
border:none;
font-size:13px;
color:#6b7280;
cursor:pointer;
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 8px;
transition:.2s;
}

.otp-back i{
font-size:12px;
}

.otp-back:hover{
color:#2563eb;
}