@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap");
    @import url("https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap");
    @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

    :root{
      --bg:#F6F8FC;
      --bg2:#FFFFFF;
      --card:#FFFFFF;
      --text:#0B1220;
      --muted:#5B6B86;
      --muted2:#7A8AA6;
      --line:rgba(12,18,32,.10);

      --green:#0AA36C;
      --blue:#2F6BFF;
      --violet:#7C3AED;

      --btn:#032254;
      --btnText:#FFFFFF;
      --btnHover:#0B1438;

      --radius: 16px;
      --radius2: 22px;

      --container: 1160px;
      --ease: cubic-bezier(.2,.8,.2,1);

      --shadow:none;
      --shadow2:none;
    }

    *{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    body{
      margin:0;
      font-family: 'Inter Tight', 'PT Sans', Arial, sans-serif;
      color:var(--text);

      /* light-blue theme background */
      background:
        radial-gradient(1100px 700px at 10% 0%, rgba(56,189,248,.16), transparent 60%),
        radial-gradient(1100px 700px at 92% 8%, rgba(59,130,246,.14), transparent 60%),
        radial-gradient(900px 600px at 55% 105%, rgba(14,165,233,.12), transparent 55%),
        linear-gradient(180deg, #F2F8FF 0%, #F7FBFF 55%, #FFFFFF 100%);

      overflow-x:hidden;
      min-height:100vh;
    }

    a{ color:inherit; text-decoration:none; }
    button, input{ font-family:inherit; }

    .container{
      width:min(var(--container), 100%);
      margin-inline:auto;
      padding-inline:20px;
    }
        /* Header */
    header{
      position:sticky;
      top:0;
      z-index:50;
      background: rgba(255,255,255,.78);
      backdrop-filter: blur(10px);
      border-bottom:1px solid var(--line);
    }
    .nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:14px 0;
      gap:12px;
    }
    
    @media (max-width:640px){
      .nav{
        flex-wrap:wrap;
      }
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .logo{
      width:40px;height:40px;border-radius:14px;
      background: linear-gradient(135deg, var(--green), var(--blue));
      box-shadow: 0 14px 26px rgba(47,107,255,.18);
      position:relative;
      overflow:hidden;
      flex:0 0 auto;
    }
    .logo:after{
      content:"";
      position:absolute; inset:-30%;
      background: conic-gradient(from 180deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
      animation: spin 6s linear infinite;
      opacity:.45;
    }
    @keyframes spin{ to{ transform:rotate(360deg);} }
    .brand b{ font-size:16px; letter-spacing:.2px; }
    .brand span{ display:block; margin-top:2px; color:var(--muted); font-size:12px; }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:12px 14px;
      border-radius: 14px;
      border:1px solid var(--line);
      background:#fff;
      color: var(--text);
      font-weight:900;
      font-size:14px;
      cursor:pointer;
      transition: transform .18s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
      white-space:nowrap;
    }
    .btn:hover{
      transform: translateY(-1px);
      border-color: rgba(47,107,255,.18);
      background: rgba(47,107,255,.04);
    }
    .btn.primary{
      border:1px solid rgba(1,9,22,.85);
      color: var(--btnText);
      background: var(--btn);
      box-shadow:none;
    }
    .btn.primary:hover{
      background: var(--btnHover);
      transform: translateY(-2px);
      box-shadow:none;
      border-color: rgba(1,9,22,.95);
    }

    /* Auth layout */
    main{ padding: 42px 0 60px; }
    .auth-grid{
      display:grid;
      grid-template-columns: 1.02fr .98fr;
      gap: 16px;
      align-items:stretch;
    }

    .panel{
      background:#fff;
      border:1px solid var(--line);
      border-radius: var(--radius2);
      padding: 18px;
      box-shadow:none;
      position:relative;
      overflow:hidden;
    }

    .panel.soft:before{
      content:"";
      position:absolute; inset:-45%;
      background:
        radial-gradient(520px 300px at 20% 20%, rgba(56,189,248,.16), transparent 60%),
        radial-gradient(520px 300px at 80% 10%, rgba(59,130,246,.14), transparent 60%),
        radial-gradient(520px 300px at 60% 90%, rgba(14,165,233,.12), transparent 65%);
      opacity:.9;
    }
    .panel.soft > *{ position:relative; }

    .pill{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 9px 12px;
      border-radius: 999px;
      border:1px solid rgba(59,130,246,.18);
      background: rgba(59,130,246,.06);
      color: rgba(11,18,32,.86);
      font-size:13px;
      font-weight:900;
    }
    .pill i{ opacity:.8; }

    h1{
      margin: 14px 0 8px;
      font-size: clamp(30px, 3.2vw, 40px);
      line-height: 1.1;
      letter-spacing:-.7px;
    }
    .lead{
      margin: 0 0 14px;
      color: rgba(91,107,134,.95);
      font-size: 15px;
      line-height: 1.75;
      max-width: 62ch;
    }

    /* Form */
    .form{
      display:grid;
      gap: 12px;
    }
    .field{
      display:grid;
      gap: 6px;
    }
     .form{ display:grid; gap: 12px; max-width: 520px; margin-inline:auto; }
    .field{ display:grid; gap: 6px; }
    label{
      font-weight:900;
      font-size: 13px;
      color: rgba(11,18,32,.82);
    }
     .input-wrap{ position:relative; }
    .input{
      width:100%;
      padding: 12px 44px 12px 12px;
      border-radius: 14px;
      border:1px solid rgba(12,18,32,.12);
      background: rgba(246,248,252,.85);
      outline:none;
      font-size: 14px;
      transition: border-color .2s var(--ease), background .2s var(--ease);
    }
    .input:focus{
      border-color: rgba(59,130,246,.40);
      background: #fff;
    }
    
     .toggle{
      position:absolute;
      right:10px; top:50%;
      transform: translateY(-50%);
      width:34px; height:34px;
      border-radius: 12px;
      border:1px solid rgba(12,18,32,.10);
      background: rgba(255,255,255,.9);
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      color: rgba(11,18,32,.70);
      transition: background .2s var(--ease), border-color .2s var(--ease);
    }
    .toggle:hover{
      background: rgba(59,130,246,.06);
      border-color: rgba(59,130,246,.18);
    }

    .row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }
    .hint{
      color: rgba(91,107,134,.95);
      font-size: 13px;
      line-height: 1.6;
    }

    .checkline{
      display:flex;
      align-items:center;
      gap:10px;
      font-size: 13px;
      color: rgba(91,107,134,.95);
      user-select:none;
    }
    .checkline input{ width:16px; height:16px; }

    .actions{
      display:grid;
      gap:10px;
      margin-top: 4px;
    }
    .btn.wide{ width:100%; }

    /* Minimal “preview card” (matches landing feel) */
    .mini-card{
      border-radius: 18px;
      border:1px solid rgba(12,18,32,.10);
      background: rgba(246,248,252,.75);
      padding: 14px;
      display:grid;
      gap: 10px;
    }
    .mini-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding: 10px 10px;
      border-radius: 14px;
      border: 1px solid rgba(12,18,32,.08);
      background: #fff;
    }
    .tag{
      display:inline-flex; align-items:center; gap:8px;
      padding: 7px 10px;
      border-radius: 999px;
      font-size:12px;
      font-weight:900;
      color: rgba(11,18,32,.78);
      border:1px solid rgba(12,18,32,.12);
      background: rgba(12,18,32,.03);
      white-space:nowrap;
    }
    .tag .dot{
      width:10px;height:10px;border-radius:999px;
      background: linear-gradient(135deg, var(--green), var(--blue));
    }
    .muted{ color: rgba(91,107,134,.95); font-size:12px; }
    .amount{ font-weight:950; letter-spacing:-.2px; }

    footer{
      border-top:1px solid var(--line);
      background:#fff;
      padding: 22px 0 28px;
    }
    .foot{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    .foot small{ color: rgba(91,107,134,.96); }

    /* Responsive */
    @media (max-width: 980px){
      .auth-grid{ grid-template-columns: 1fr; }
    }
    

/* Visible by default */
.alert{
  border-radius:14px;
  padding:12px 14px;
  margin: 0 0 14px 0;
  border:1px solid var(--line);
  font-size:12px;
  font-weight:200;
  line-height:1.5;

  display:flex;
  gap:10px;
  align-items:flex-start;

  opacity:1;                 /* ✅ default visible */
  transform:none;            /* ✅ default visible */
}

/* Animate only when added */
.alert.is-anim{
  transform: translateY(-8px);
  opacity:0;
  animation: alertIn .28s var(--ease) forwards;
}

@keyframes alertIn{
  to { transform: translateY(0); opacity:1; }
}

.alert.is-hiding{
  animation: alertOut .22s var(--ease) forwards;
}

@keyframes alertOut{
  to { transform: translateY(-8px); opacity:0; }
}
.alert .alert-icon{
  width:34px;
  height:34px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--card) 90%, transparent);
}

.alert .alert-body{
  flex:1;
  min-width:0;
}

.alert .alert-title{
  margin:0;
  font-weight:950;
  letter-spacing:-.2px;
}

.alert .alert-text{
  margin:2px 0 0;
  color: color-mix(in srgb, var(--text) 86%, transparent);
  font-weight:200;
}

.alert .alert-close{
  width:38px;
  height:38px;
  border-radius:14px;
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  color: var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  transition: transform .18s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}

.alert .alert-close:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--blue) 24%, var(--line));
  background: color-mix(in srgb, var(--blue) 6%, var(--card));
}

/* Type styles */
.alert-danger{
  background: rgba(220,38,38,.08);
  border-color: rgba(220,38,38,.25);
  color: rgba(185,28,28,1);
}
.alert-danger .alert-icon{
  background: rgba(220,38,38,.12);
  border-color: rgba(220,38,38,.25);
  color: rgba(185,28,28,1);
}

.alert-success{
  background: rgba(16,185,129,.10);
  border-color: rgba(16,185,129,.28);
  color: rgba(5,150,105,1);
}
.alert-success .alert-icon{
  background: rgba(16,185,129,.14);
  border-color: rgba(16,185,129,.28);
  color: rgba(5,150,105,1);
}

.alert-info{
  background: rgba(59,130,246,.10);
  border-color: rgba(59,130,246,.28);
  color: rgba(37,99,235,1);
}
.alert-info .alert-icon{
  background: rgba(59,130,246,.14);
  border-color: rgba(59,130,246,.28);
  color: rgba(37,99,235,1);
}

/* Validation list inside alert */
.alert ul{
  margin:6px 0 0 16px;
  padding:0;
}
.alert li{ margin:4px 0; }

/* Dark mode tuning */
html[data-theme="dark"] .alert{
  border-color: rgba(255,255,255,.10);
}
html[data-theme="dark"] .alert-danger{
  background: rgba(220,38,38,.18);
  border-color: rgba(220,38,38,.35);
  color: rgba(248,113,113,1);
}
html[data-theme="dark"] .alert-success{
  background: rgba(16,185,129,.18);
  border-color: rgba(16,185,129,.35);
  color: rgba(52,211,153,1);
}
html[data-theme="dark"] .alert-info{
  background: rgba(59,130,246,.18);
  border-color: rgba(59,130,246,.35);
  color: rgba(96,165,250,1);
}

/* Value list */
    .list{
      list-style:none;
      margin: 14px 0 0;
      padding: 0;
      display:grid;
      gap:10px;
    }
    .list li{
      display:flex;
      gap:10px;
      align-items:flex-start;
      padding: 10px;
      border-radius: 14px;
      border:1px solid rgba(12,18,32,.10);
      background: rgba(246,248,252,.75);
    }
    .check{
      width:22px;height:22px;border-radius:8px;
      background: rgba(10,163,108,.12);
      border:1px solid rgba(10,163,108,.18);
      display:flex;align-items:center;justify-content:center;
      color:#0A6D49;
      font-weight:900;
      flex:0 0 auto;
      margin-top:2px;
    }
    .list b{ display:block; margin-bottom:2px; }
    .list span{ color: rgba(91,107,134,.96); font-size:14px; line-height:1.65; }
  
   .strength{
      margin-top: 6px;
      display:flex;
      align-items:center;
      gap:10px;
    }
    .bar{
      flex:1;
      height:10px;
      border-radius:999px;
      background: rgba(59,130,246,.10);
      border:1px solid rgba(59,130,246,.14);
      overflow:hidden;
    }
    .bar > i{
      display:block;
      height:100%;
      width: 0%;
      border-radius:999px;
      background: linear-gradient(90deg, #0AA36C, #2F6BFF);
      transition: width .25s var(--ease);
    }
    .strength small{
      color: rgba(91,107,134,.95);
      font-weight:900;
      min-width: 84px;
      text-align:right;
    }

    .actions{ display:grid; gap:10px; margin-top: 4px; }
    .btn.wide{ width:100%; }
    
    
      /* OTP boxes */
    .otp{
      display:flex;
      gap:10px;
      justify-content:center;
      align-items:center;
      margin: 16px 0 8px;
      flex-wrap:wrap;
    }
    .otp input{
      width: 52px;
      height: 56px;
      border-radius: 14px;
      border:1px solid rgba(12,18,32,.12);
      background: rgba(246,248,252,.85);
      outline:none;
      text-align:center;
      font-weight:950;
      font-size: 18px;
      letter-spacing: .4px;
      transition: border-color .2s var(--ease), background .2s var(--ease), transform .18s var(--ease);
    }
    .otp input:focus{
      border-color: rgba(59,130,246,.42);
      background: #fff;
      transform: translateY(-1px);
    }


    .meta{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      margin-top: 8px;
      max-width: 420px;
      margin-inline:auto;
    }

    .timer{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 8px 10px;
      border-radius: 999px;
      border:1px solid rgba(12,18,32,.10);
      background: rgba(246,248,252,.75);
      color: rgba(11,18,32,.78);
      font-size: 12px;
      font-weight:900;
    }