.div-hidden { display: none !important; }
    body {
      padding-top: 80px;
    }
    html, body {
      overflow-x: hidden !important;
      width: 100% !important;
    
    }

    :root{
      --bg:#f4f7fb;
      --surface:#ffffff !important;
      --surface-2:#f8fbff !important;
      --text:#162033 !important;
      --muted:#5e6b84 !important;
      --line:#d9e3f2 !important;
      --primary:#19346f !important;
      --primary-2:#264d9b !important;
      --accent:#0b8f72 !important;
      --shadow:0 16px 40px rgba(17, 38, 78, 0.08) !important;
      --radius-xl:28px !important;
      --radius-lg:22px !important;
      --radius-md:16px !important;
      --radius-sm:12px !important;
      --container:1240px !important;
    }

    *{box-sizing:border-box !important;}
    html{scroll-behavior:smooth !important;}
    body{
      margin:0 !important;
      font-family:Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
      color:var(--text) !important;
     
    }
    a{text-decoration:none !important; color:inherit  !important;}
    .container{width:min(var(--container), calc(100% - 32px)) !important; margin:0 auto !important;}

    .topbar{
      background:#eef3fb !important;
      border-bottom:1px solid #dce6f5 !important;
      font-size:13px !important;
      color:#4d5a73 !important;
    }
    .topbar-inner{
      display:flex !important;
      align-items:center !important;
      justify-content:space-between !important;
      gap:16px !important;
      padding:10px 0 !important;
      flex-wrap:wrap !important;
    }

    .navbar{
      position:sticky !important;
      top:0 !important;
      z-index:50 !important;
      backdrop-filter:blur(14px) !important;
      background:rgba(255,255,255,.88) !important;
      border-bottom:1px solid rgba(217,227,242,.95) !important;
    }
    .nav-inner{
      display:flex !important;
      align-items:center !important;
      justify-content:space-between !important;
      gap:20px !important;
      padding:14px 0 !important;
    }
    .brand{
      display:flex !important;
      align-items:center !important;
      gap:14px !important;
      min-width:250px !important;
    }
    .brand-mark{
      width:42px !important;height:42px !important;border-radius:14px !important;
      background:linear-gradient(135deg,#1f56c2,#0b8f72) !important;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.35) !important;
    }
    .brand-title{
      font-size:15px !important;
      font-weight:800 !important;
      color:#0f1f3d !important;
    }
    .brand-sub{
      font-size:12px !important;
      color:#62708a !important;
      margin-top:2px !important;
    }

    .nav-links{
      display:flex !important;
      align-items:center !important;
      gap:26px !important;
      flex-wrap:wrap !important;
      justify-content:center !important;
    }
    .nav-links a{
      font-size:15px !important;
      font-weight:700 !important;
      color:#33435f !important;
    }
    .nav-links a.active{color:var(--primary)}

    .nav-actions{
      display:flex;
      gap:12px;
      align-items:center;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    /* .btn{
      display:inline-flex !important;
      align-items:center !important;
      justify-content:center !important;
      gap:10px !important;
      padding:13px 18px !important;
      border-radius:999px !important;
      font-weight:800 !important;
      font-size:15px !important;
      border:1px solid transparent !important;
      transition:.2s ease !important;
      cursor:pointer !important;
      white-space:nowrap !important;
    }
    .btn:hover{transform:translateY(-1px) !important;}
    .btn-primary{
      background:linear-gradient(135deg,var(--primary),var(--primary-2)) !important;
      color:#fff !important;
      box-shadow:0 10px 24px rgba(25,52,111,.18) !important;
    } */

    .custom-btn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 1rem;
      background-color: #1e3a8a;
      padding: 14px 20px;
      font-size: 14px;
      font-weight: 600;
      color: #ffffff;
      text-decoration: none;
      transition: background-color 0.3s ease;
    } 
    .custom-btn:hover {
      background-color: #172554;
    }
    .custom-btn:focus {
       outline: none;
      box-shadow: 0 0 0 4px rgba(148, 163, 184, .35);
    }
    .custom-outline-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 1px solid #cbd5e1;
      border-radius: 16px;
      background-color: #ffffff;
      padding: 14px 20px;
      font-size: 14px;
      font-weight: 600;
      color: #334155;
      text-decoration: none;
      transition: all 0.3s ease;
    }

    .custom-outline-btn:hover {
        background-color: #f8fafc;
    }

    /* focus-ring */
    .custom-outline-btn:focus {
      outline: none;
      box-shadow: 0 0 0 4px rgba(148, 163, 184, .35);

    }

    .btn-secondary{
      background:#fff !important;
      color:var(--primary) !important;
      border-color:#cad8ef !important;
    }
    .btn-soft{
      background:#edf4ff !important;
      color:var(--primary) !important;
      border-color:#d7e4fb !important;
    }
    .button-group {
      display: flex;
      gap: 12px; 
      width: 100%;
    }
    .button-group .btn {
      flex: 1; 
      padding: 12px 0; 
      font-weight: 600;
      border-radius: 50px; 
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    /* Secondary/Reset button styling */
    .btn-outline {
     background: linear-gradient(135deg, #f44336, #d32f2f) !important;

      color:#fff !important;
      box-shadow:0 10px 24px rgba(111, 25, 25, 0.18) !important;
    }

    .btn-outline:hover {
      background-color: #f4f7fa;
    }

    .page{
      padding:22px 0 42px;
    }

    .layout{
      display:grid;
      grid-template-columns: minmax(320px, 0.95fr) minmax(420px, 1.05fr);
      gap:24px;
      align-items:start;
    }

    .left-panel{
      display:grid;
      gap:18px;
      position:sticky;
      top:96px;
    }

    .hero-card,
    .info-card,
    .auth-card{
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,255,.98));
      border:1px solid var(--line);
      border-radius:var(--radius-xl);
      box-shadow:var(--shadow);
    }

    .hero-card{
      padding:30px;
      position:relative;
      overflow:hidden;
    }
    .hero-card::after{
      content:"";
      position:absolute;
      right:-80px;
      top:-70px;
      width:250px;
      height:250px;
      background:radial-gradient(circle, rgba(25,52,111,.08), transparent 68%);
      pointer-events:none;
    }

    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:8px 14px;
      border-radius:999px;
      background:#edf4ff;
      color:var(--primary);
      border:1px solid #d7e4fb;
      font-size:13px;
      font-weight:800;
      margin-bottom:16px;
    }
/* 
    h1{
      margin:0 0 14px !important;
      font-size:42px !important;
      line-height:1.08 !important;
      letter-spacing:-1px !important;
      font-weight: bold !important;
    } */
    .hero-copy{
      margin:0;
      font-size:17px;
      color:#50617d;
      line-height:1.65;
    }

    .quick-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px;
      margin-top:22px;
    }
    .quick-card{
      background:#fff;
      border:1px solid #dde6f4;
      border-radius:18px;
      padding:18px;
    }
    .quick-card h3{
      margin:0 0 8px !important;
      font-size:18px !important;
      font-weight: bold !important;
    }
    .quick-card p{
      margin:0 !important;
      font-size:14px !important;
      color:#62708a !important;
      line-height:1.55 !important;
    }

    .info-card{
      padding:22px !important;
    }
    .info-card h3{
      margin:0 0 10px !important;
      font-size:21px !important;
      font-weight: bold !important;
    }
    .info-card p{
      margin:0 0 12px !important;
      color:var(--muted) !important;
      font-size:15px !important;
      line-height:1.6 !important;
    }
    .check-list{
      list-style:none !important;
      padding:0 !important;
      margin:0 !important;
      display:grid !important;
      gap:10px !important;
    }
    .check-list li{
      display:flex;
      align-items:flex-start;
      gap:10px;
      font-size:14px;
      color:#33435f;
      line-height:1.55;
    }
    .check{
      width:20px;
      height:20px;
      border-radius:50%;
      background:#e7f7f1;
      color:#0b8f72;
      display:grid;
      place-items:center;
      font-size:12px;
      font-weight:900;
      flex:0 0 auto;
      border:1px solid #cfeee4;
      margin-top:1px;
    }

    .auth-card{
      overflow:hidden;
    }
    .auth-head{
      padding:24px 26px 18px;
      border-bottom:1px solid #e3ebf7;
      background:linear-gradient(180deg,#f7fbff,#f2f7ff);

      display: flex;
      justify-content: space-between; 
      align-items: center; 
      gap: 15px;
    }
    .auth-title{
      font-size:24px;
      font-weight:800;
      margin:0;
    }
    .auth-sub{
      margin:8px 0 0;
      color:var(--muted);
      font-size:15px;
      line-height:1.55;
    }

    .tabs{
      padding:20px 26px 0;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
    }
    .tab{
      appearance:none;
      border:1px solid #cad8ef;
      background:#fff;
      color:#15223a;
      border-radius:18px;
      padding:14px 16px;
      font-size:15px;
      font-weight:800;
      cursor:pointer;
      transition:.2s ease;
    }
    .tab.active{
      background:linear-gradient(135deg,var(--primary),var(--primary-2));
      color:#fff;
      border-color:transparent;
      box-shadow:0 10px 24px rgba(25,52,111,.16);
    }

    .panel{
      /* padding:22px 26px 28px; */
      display:none;
      background-color: white;
    }
    .panel.active{display:block}

    .note-pill{
      display:inline-flex;
      align-items:center;
      padding:8px 12px;
      border-radius:999px;
      background:#ffffff;
      color:#224790;
      border:1px solid #d7e4fb;
      font-size:12px;
      font-weight:800;
      /* margin-bottom:18px; */
      white-space: nowrap;
    }

    form{
      display:grid;
      gap:18px;
    }
    .grid-2{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:16px;
    }
    .grid-12{
      display:grid;
      grid-template-columns:repeat(12,1fr);
      gap:16px;
    }

    .field{display:grid; gap:8px}
    label{
      font-size:13px;
      font-weight:800;
      color:#33435f;
    }
    .req::after{
      content:" *";
      color:#e11d48;
    }

    .field-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .field-help{
      border:none;
      background:none;
      padding:0;
      color:#224790;
      font-size:12px;
      font-weight:800;
      cursor:pointer;
    }

    /* input, select{
      width:100% !important;
      height:48px !important;
      border:1px solid #cad8ef !important;
      border-radius:14px !important;
      padding:0 14px !important;
      font-size:14px !important;
      color:#162033 !important;
      background:#fff !important;
      outline:none !important;
      transition:.2s ease !important;
    }
    input:focus, select:focus{
      border-color:#88aee8 !important;
      box-shadow:0 0 0 4px rgba(102,153,255,.12) !important;
    } */

        .input-field {
      width: 100%; border-radius: 1rem; border: 1px solid rgb(203 213 225); background: white;
      padding: .9rem 1rem; font-size: .95rem; color: rgb(15 23 42);
    }
    .input-field:focus { outline: none; border-color: rgb(30 64 175); box-shadow: 0 0 0 4px rgba(59,130,246,.12); }
    .invalid{
      border-color:#ef9a9a !important;
      background:#fff3f3 !important;
    }

    .upload-wrap{
      display:flex !important;
      align-items:center !important;
      gap:12px !important;
      flex-wrap:wrap !important;
    }
    .upload-btn{
      display:inline-flex !important;
      align-items:center !important;
      justify-content:center !important;
      gap:10px !important;
      padding:12px 16px !important;
      border-radius:14px !important;
      border:1px solid #cad8ef !important;
      background:#fff !important;
      color:#19346f !important;
      font-weight:800 !important;
      cursor:pointer !important;
      min-height:48px !important;
    }
    .upload-name{
      color:#62708a !important;
      font-size:14px !important;
      word-break:break-word !important;
    }
    /* Password Wrapper for Eye Icon */
    .password-wrapper { 
        position: relative; 
        width: 100%; 
    }
    .eye-icon {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        color: #6c757d;
        display: flex;
        align-items: center;
    }


    .captcha-wrap{
      display:grid !important;
      grid-template-columns:110px 56px 1fr !important;
      gap:10px !important;
      align-items:center !important;
    }
    .captcha-box{
      height:48px;
      border-radius:14px;
      border:1px solid #cad8ef;
      background:#f8fbff;
      display:grid;
      place-items:center;
      font-weight:900;
      letter-spacing:3px;
      font-size:18px;
      color:#0f1f3d;
      user-select:none;
    }
    .captcha-img img{
        height: 54px !important;
        width: 130px !important;
        border:1px solid #cad8ef !important;
        pointer-events: none !important;
        border-radius:14px;
    }
    .captcha-refresh{
      height:48px;
      border-radius:14px;
      border:1px solid #cad8ef;
      background:#fff;
      font-size:18px;
      font-weight:900;
      color:#224790;
      cursor:pointer;
      justify-content: center;
      display: inline-flex;
      align-items: center
      
    }
    /* Tooltip background color */
    .tooltip-inner {
        background-color: #212529 !important; 
        color: #fff !important;               
        font-size: 14px;
        padding: 8px 12px;
        border-radius: 6px;
        max-width: 200px;
        text-align: center;
    }
    .tooltip {
        opacity: 1 !important; 
        font-family: sans-serif;
    }

    .inline-links{
      display:flex;
      justify-content:flex-end;
      gap:16px;
      flex-wrap:wrap;
      font-size:14px;
    }
    .inline-links a{
      color:#224790 !important;
      
    }

    .security-box,
    .hint-box,
    .error-box{
      border-radius:18px !important;
      padding:16px 18px !important;
      font-size:14px !important;
      line-height:1.6 !important;
    }
    .security-box{
      background:#f8fbff !important;
      border:1px solid #e0e9f7 !important;
      color:#50617d !important;
    }
    .hint-box{
      background:#f7fbff;
      border:1px solid #d9e8fb;
      color:#445676;
      display:none;
    }
    .hint-box.show{display:block}
    .error-box{
      background:#fff2f2;
      border:1px solid #f2cccc;
      color:#983f3f;
      display:none !important;
      align-items: center; 
      display: flex !important;
      gap: 10px;
    }
    /* .error-box.show{display:block} */
    .border-error {
        border: 1px solid #ef4444 !important; 
        background-color: #fef2f2 !important; 
    }

    .form-actions{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      flex-wrap:wrap;
      padding-top:6px;
      border-top:1px solid #e6edf8;
    }
    .form-actions .muted{
      font-size:13px;
      color:#62708a;
    }
    .btn-row{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
    }

    .footer{
      border-top:1px solid #dce5f3;
      padding:18px 0 34px;
      color:#5e6c84;
      font-size:13px;
    }
    .footer-inner{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:16px;
      flex-wrap:wrap;
    }

    .toast{
      position:fixed;
      left:50%;
      bottom:20px;
      transform:translateX(-50%);
      background:#0f172a;
      color:#fff;
      padding:12px 16px;
      border-radius:16px;
      font-size:14px;
      box-shadow:0 16px 30px rgba(2,6,23,.28);
      opacity:0;
      pointer-events:none;
      transition:.25s ease;
      z-index:80;
    }
    .toast.show{
      opacity:1;
      pointer-events:auto;
    }

    @media (max-width: 1100px){
      .layout{
        grid-template-columns:1fr;
      }
      .left-panel{
        position:static;
      }
    }

    @media (max-width: 760px){
      .nav-links{display:none}
      .nav-inner{
        align-items:flex-start;
        flex-direction:column;
      }
      h1{font-size:34px}
      .grid-2,
      .quick-grid{
        grid-template-columns:1fr;
      }
      .grid-12{
        grid-template-columns:1fr;
      }
      .captcha-wrap{
        grid-template-columns:1fr 56px 1fr;
      }
      .tabs{
        grid-template-columns:1fr;
      }
      .form-actions{
        align-items:flex-start;
        flex-direction:column;
      }
      .btn-row{
        width:100%;
      }
      .btn-row .btn{
        width:100%;
      }
    }
    /* Responsive for mobile */
    @media (max-width: 640px) {
      .auth-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }
    }