:root{
      --bg0:#050B10;
      --bg1:#071B18;
      --bg2:#0C2521;
      --card:rgba(10, 26, 30, 0.62);
      --stroke:rgba(255,255,255,0.10);
      --stroke2:rgba(255,255,255,0.06);
      --text:#F4F9F8;
      --muted:#A9C3BF;
      --accent:#D48931;
      --accent2:#FFCB73;
      --shadow:0 18px 60px rgba(0,0,0,0.55);
      --r1:18px;
      --r2:26px;
    }

    *{ box-sizing:border-box; padding:0; margin:0; }
    html, body{ height:100%; }

    body{
      font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      color:var(--text);
      background:
        radial-gradient(1200px 800px at 15% 10%, rgba(212,137,49,0.18), transparent 60%),
        radial-gradient(900px 600px at 85% 25%, rgba(23,77,81,0.55), transparent 55%),
        linear-gradient(180deg, var(--bg0), var(--bg2));
      display:flex;
      justify-content:center;
      align-items:center;
      padding:24px 12px;
      overflow-x:hidden;
    }

    .fx-grid{
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
      background-size:52px 52px;
      mask-image: radial-gradient(circle at 50% 35%, rgba(0,0,0,1), rgba(0,0,0,0) 70%);
      opacity:0.55;
    }

    .login-shell{
      width:100%;
      max-width:540px;
      border-radius:var(--r2);
      background:var(--card);
      border:1px solid var(--stroke);
      box-shadow:var(--shadow);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      overflow:hidden;
      position:relative;
    }

    .shell-top{
      padding:28px 22px 12px 22px;
      position:relative;
    }

    .shell-top:before{
      content:"";
      position:absolute;
      inset:-2px -2px auto -2px;
      height:130px;
      background:
        radial-gradient(700px 220px at 20% 0%, rgba(255,203,115,0.22), transparent 60%),
        radial-gradient(700px 220px at 80% 0%, rgba(23,77,81,0.55), transparent 60%);
      opacity:0.95;
      pointer-events:none;
    }

    .brand-row{
      display:flex;
      align-items:center;
      gap:12px;
      position:relative;
    }

    .brand-logo{
      width:46px;
      height:46px;
      border-radius:14px;
      background:rgba(255,255,255,0.92);
      padding:6px;
      border:1px solid rgba(255,255,255,0.25);
      box-shadow:0 10px 24px rgba(0,0,0,0.25);
      display:flex;
      align-items:center;
      justify-content:center;
      flex:0 0 auto;
    }
    .brand-logo img{ width:100%; height:100%; object-fit:contain; }

    .brand-meta{ text-align:left; }
    .brand-title{
      font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      font-weight:800;
      letter-spacing:0.2px;
      font-size:18px;
      line-height:1.2;
    }
    .brand-sub{
      margin-top:4px;
      color:var(--muted);
      font-size:13px;
      line-height:1.2;
    }

    .shell-body{ padding:12px 22px 18px 22px; }

    .welcome{
      margin-top:14px;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
    }

    .welcome h1{
      font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      font-weight:800;
      font-size:22px;
      line-height:1.25;
    }
    .welcome p{
      margin-top:6px;
      color:var(--muted);
      font-size:13px;
      line-height:1.4;
      max-width:380px;
    }

    .chip{
      flex:0 0 auto;
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 12px;
      border-radius:999px;
      border:1px solid var(--stroke2);
      background:rgba(255,255,255,0.05);
      color:var(--muted);
      font-size:12px;
      white-space:nowrap;
    }
    .chip i{ color:var(--accent2); }

    .field{ text-align:left; margin-top:12px; }
    .label{
      display:block;
      margin:0 0 8px;
      font-size:12px;
      color:rgba(244,249,248,0.92);
      letter-spacing:0.15px;
    }

    .control{ position:relative; }

    .input{
      width:100%;
      border-radius:var(--r1);
      border:1px solid rgba(255,255,255,0.10);
      background:rgba(3, 10, 12, 0.55);
      color:var(--text);
      padding:14px 44px 14px 44px;
      font-size:14px;
      outline:none;
      transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
    }
    .input::placeholder{ color:rgba(169,195,191,0.75); }
    .input:focus{
      border-color:rgba(212,137,49,0.65);
      box-shadow:0 0 0 4px rgba(212,137,49,0.16);
      transform: translateY(-1px);
    }

    .left-ico{
      position:absolute;
      left:14px;
      top:50%;
      transform:translateY(-50%);
      color:rgba(169,195,191,0.9);
      pointer-events:none;
      font-size:15px;
    }

    .right-btn{
      position:absolute;
      right:10px;
      top:50%;
      transform:translateY(-50%);
      border:0;
      background:transparent;
      color:rgba(169,195,191,0.9);
      width:34px;
      height:34px;
      border-radius:12px;
      cursor:pointer;
      transition: background 0.15s ease, color 0.15s ease;
    }
    .right-btn:hover{
      background:rgba(255,255,255,0.08);
      color:var(--accent2);
    }

    .error{
      margin-top:12px;
      font-size:13px;
      color:#FFD6D6;
      background:rgba(255, 64, 64, 0.08);
      border:1px solid rgba(255, 64, 64, 0.25);
      padding:10px 12px;
      border-radius:14px;
      display:none;
    }

    .btn{
      width:100%;
      border:0;
      border-radius:18px;
      padding:14px 16px;
      margin-top:14px;
      font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      font-weight:800;
      font-size:15px;
      cursor:pointer;
      color:#2a1700;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      box-shadow: 0 14px 28px rgba(212,137,49,0.20);
      transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
    }
    .btn:hover{
      transform: translateY(-1px);
      filter: brightness(1.02);
      box-shadow: 0 18px 34px rgba(212,137,49,0.25);
    }
    .btn:active{ transform: translateY(0px) scale(0.99); }
    .btn[disabled]{ opacity:0.6; cursor:not-allowed; transform:none; }

    .row{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      margin-top:14px;
      flex-wrap:wrap;
    }

    .link{
      color:var(--accent2);
      text-decoration:none;
      font-size:13px;
      transition: opacity 0.15s ease;
    }
    .link:hover{ opacity:0.85; }

    .social{
      margin-top:18px;
      border-top:1px solid rgba(255,255,255,0.08);
      padding-top:16px;
    }

    .social h3{
      font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      font-weight:800;
      font-size:14px;
      color:rgba(244,249,248,0.92);
      margin-bottom:10px;
      text-align:left;
    }

    .social-grid{
      display:grid;
      grid-template-columns: 1fr;
      gap:10px;
    }

    .sbtn{
      width:100%;
      border-radius:18px;
      padding:12px 14px;
      font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      font-weight:800;
      font-size:14px;
      cursor:pointer;
      border:1px solid rgba(255,255,255,0.12);
      background:rgba(255,255,255,0.06);
      color:rgba(244,249,248,0.95);
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
    }
    .sbtn:hover{
      transform: translateY(-1px);
      background:rgba(255,255,255,0.08);
      border-color:rgba(255,255,255,0.18);
    }

    .shell-footer{
      padding:16px 22px 22px 22px;
      border-top:1px solid rgba(255,255,255,0.08);
      background:rgba(0,0,0,0.14);
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }

    .small{
      font-size:12px;
      color:rgba(169,195,191,0.95);
    }
    .small strong{ color:var(--accent2); }

    .alertBox{
      width:100%;
      margin-bottom:12px;
      border-radius:16px;
      padding:12px 14px;
      border:1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.05);
      color: rgba(244,249,248,0.96);
      font-size:13px;
    }

    @media (max-width: 480px){
      .shell-top{ padding:22px 16px 12px 16px; }
      .shell-body{ padding:12px 16px 16px 16px; }
      .shell-footer{ padding:14px 16px 18px 16px; }
      .welcome h1{ font-size:20px; }
    }


:root{
      --bg0:#050B10;
      --bg1:#071B18;
      --bg2:#0C2521;
      --card:rgba(10, 26, 30, 0.62);
      --stroke:rgba(255,255,255,0.10);
      --stroke2:rgba(255,255,255,0.06);
      --text:#F4F9F8;
      --muted:#A9C3BF;
      --accent:#D48931;
      --accent2:#FFCB73;
      --shadow:0 18px 60px rgba(0,0,0,0.55);
      --r1:18px;
      --r2:26px;
    }

    *{ box-sizing:border-box; padding:0; margin:0; }
    html, body{ height:100%; }

    body{
      font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      color:var(--text);
      background:
        radial-gradient(1200px 800px at 15% 10%, rgba(212,137,49,0.18), transparent 60%),
        radial-gradient(900px 600px at 85% 25%, rgba(23,77,81,0.55), transparent 55%),
        linear-gradient(180deg, var(--bg0), var(--bg2));
      display:flex;
      justify-content:center;
      align-items:center;
      padding:24px 12px;
      overflow-x:hidden;
    }

    .fx-grid{
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
      background-size:52px 52px;
      mask-image: radial-gradient(circle at 50% 35%, rgba(0,0,0,1), rgba(0,0,0,0) 70%);
      opacity:0.55;
    }

    .login-shell{
      width:100%;
      max-width:560px;
      border-radius:var(--r2);
      background:var(--card);
      border:1px solid var(--stroke);
      box-shadow:var(--shadow);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      overflow:hidden;
      position:relative;
    }

    .shell-top{
      padding:28px 22px 14px 22px;
      position:relative;
    }

    .shell-top:before{
      content:"";
      position:absolute;
      inset:-2px -2px auto -2px;
      height:130px;
      background:
        radial-gradient(700px 220px at 20% 0%, rgba(255,203,115,0.22), transparent 60%),
        radial-gradient(700px 220px at 80% 0%, rgba(23,77,81,0.55), transparent 60%);
      opacity:0.95;
      pointer-events:none;
    }

    .brand-row{
      display:flex;
      align-items:center;
      gap:12px;
      position:relative;
    }

    .brand-logo{
      width:46px;
      height:46px;
      border-radius:14px;
      background:rgba(255,255,255,0.92);
      padding:6px;
      border:1px solid rgba(255,255,255,0.25);
      box-shadow:0 10px 24px rgba(0,0,0,0.25);
      display:flex;
      align-items:center;
      justify-content:center;
      flex:0 0 auto;
    }
    .brand-logo img{ width:100%; height:100%; object-fit:contain; }

    .brand-meta{ text-align:left; }
    .brand-title{
      font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      font-weight:800;
      letter-spacing:0.2px;
      font-size:18px;
      line-height:1.2;
    }
    .brand-sub{
      margin-top:4px;
      color:var(--muted);
      font-size:13px;
      line-height:1.2;
    }

    .shell-body{
      padding:14px 22px 22px 22px;
    }

    .welcome{
      margin-top:14px;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
    }

    .welcome h1{
      font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      font-weight:800;
      font-size:22px;
      line-height:1.25;
    }
    .welcome p{
      margin-top:6px;
      color:var(--muted);
      font-size:13px;
      line-height:1.4;
      max-width:380px;
    }

    .chip{
      flex:0 0 auto;
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 12px;
      border-radius:999px;
      border:1px solid var(--stroke2);
      background:rgba(255,255,255,0.05);
      color:var(--muted);
      font-size:12px;
      white-space:nowrap;
    }
    .chip i{ color:var(--accent2); }

    .progress{
      margin-top:14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:12px 12px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,0.08);
      background:rgba(255,255,255,0.04);
    }

    .progress-left{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }

    .step-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,0.10);
      background:rgba(0,0,0,0.16);
      font-size:12px;
      color:rgba(244,249,248,0.92);
      flex:0 0 auto;
    }
    .step-pill strong{
      font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      font-weight:800;
      color:var(--accent2);
    }

    .meter{
      height:8px;
      border-radius:999px;
      background:rgba(255,255,255,0.08);
      overflow:hidden;
      flex:1;
      min-width:120px;
    }
    .meter > span{
      display:block;
      height:100%;
      width:50%;
      border-radius:999px;
      background:linear-gradient(135deg, var(--accent), var(--accent2));
      box-shadow: 0 10px 18px rgba(212,137,49,0.18);
      transition: width 0.22s ease;
    }

    .field{
      text-align:left;
      margin-top:12px;
    }
    .label{
      display:block;
      margin:0 0 8px;
      font-size:12px;
      color:rgba(244,249,248,0.92);
      letter-spacing:0.15px;
    }

    .control{ position:relative; }

    .input{
      width:100%;
      border-radius:var(--r1);
      border:1px solid rgba(255,255,255,0.10);
      background:rgba(3, 10, 12, 0.55);
      color:var(--text);
      padding:14px 44px 14px 44px;
      font-size:14px;
      outline:none;
      transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
    }
    .input::placeholder{ color:rgba(169,195,191,0.75); }
    .input:focus{
      border-color:rgba(212,137,49,0.65);
      box-shadow:0 0 0 4px rgba(212,137,49,0.16);
      transform: translateY(-1px);
    }

    .left-ico{
      position:absolute;
      left:14px;
      top:50%;
      transform:translateY(-50%);
      color:rgba(169,195,191,0.9);
      pointer-events:none;
      font-size:15px;
    }

    .right-btn{
      position:absolute;
      right:10px;
      top:50%;
      transform:translateY(-50%);
      border:0;
      background:transparent;
      color:rgba(169,195,191,0.9);
      width:34px;
      height:34px;
      border-radius:12px;
      cursor:pointer;
      transition: background 0.15s ease, color 0.15s ease;
    }
    .right-btn:hover{
      background:rgba(255,255,255,0.08);
      color:var(--accent2);
    }

    .hint{
      margin-top:8px;
      font-size:12px;
      color:rgba(169,195,191,0.90);
      line-height:1.35;
    }

    .error{
      margin-top:12px;
      font-size:13px;
      color:#FFD6D6;
      background:rgba(255, 64, 64, 0.08);
      border:1px solid rgba(255, 64, 64, 0.25);
      padding:10px 12px;
      border-radius:14px;
      display:none;
    }

    .row{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      margin-top:12px;
      flex-wrap:wrap;
    }

    .link{
      color:var(--accent2);
      text-decoration:none;
      font-size:13px;
      transition: opacity 0.15s ease;
    }
    .link:hover{ opacity:0.85; }

    .btn{
      width:100%;
      border:0;
      border-radius:18px;
      padding:14px 16px;
      font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      font-weight:800;
      font-size:15px;
      cursor:pointer;
      color:#2a1700;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      box-shadow: 0 14px 28px rgba(212,137,49,0.20);
      transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
    }
    .btn:hover{
      transform: translateY(-1px);
      filter: brightness(1.02);
      box-shadow: 0 18px 34px rgba(212,137,49,0.25);
    }
    .btn:active{ transform: translateY(0px) scale(0.99); }
    .btn[disabled]{ opacity:0.6; cursor:not-allowed; transform:none; }

    .btn-ghost{
      width:100%;
      border-radius:18px;
      padding:13px 16px;
      font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      font-weight:800;
      font-size:14px;
      cursor:pointer;
      color:rgba(244,249,248,0.95);
      background:rgba(255,255,255,0.06);
      border:1px solid rgba(255,255,255,0.10);
      transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
    }
    .btn-ghost:hover{
      transform: translateY(-1px);
      background:rgba(255,255,255,0.08);
      border-color:rgba(255,255,255,0.16);
    }

    .btn-row{
      display:grid;
      grid-template-columns: 1fr;
      gap:10px;
      margin-top:16px;
    }
    @media (min-width: 520px){
      .btn-row.two{
        grid-template-columns: 1fr 1fr;
      }
    }

    .shell-footer{
      padding:16px 22px 22px 22px;
      border-top:1px solid rgba(255,255,255,0.08);
      background:rgba(0,0,0,0.14);
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }

    .small{
      font-size:12px;
      color:rgba(169,195,191,0.95);
    }
    .small strong{ color:var(--accent2); }

    .alertBox{
      width:100%;
      margin-bottom:12px;
      border-radius:16px;
      padding:12px 14px;
      border:1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.05);
      color: rgba(244,249,248,0.96);
      font-size:13px;
    }

    @media (max-width: 480px){
      .shell-top{ padding:22px 16px 12px 16px; }
      .shell-body{ padding:12px 16px 18px 16px; }
      .shell-footer{ padding:14px 16px 18px 16px; }
      .welcome h1{ font-size:20px; }
    }

    /* =========================================================
       MOBILE SPACING FIX
       Prevent the card from touching the top on mobile
       ========================================================= */

    @media (max-width: 480px){
      body{
        align-items:flex-start !important;
        padding-top:18px !important;
        padding-bottom:22px !important;
      }
      .login-shell{
        margin-top:0 !important;
        margin-bottom:0 !important;
      }
    }

    @media (max-height: 700px){
      body{
        align-items:flex-start !important;
        padding-top:18px !important;
        padding-bottom:22px !important;
      }
    }

    @supports (padding: max(0px)){
      body{
        padding-top:max(18px, env(safe-area-inset-top)) !important;
        padding-bottom:max(22px, env(safe-area-inset-bottom)) !important;
      }
    }


/* SweetAlert2 Booremit theme */
.swal2-timer-progress-bar { background-color: #D48931 !important; }
.custom-popup{
  width:380px;
  height:300px;
  border-radius:14px !important;
  padding:20px !important;
  box-shadow:0 8px 24px rgba(0,0,0,0.18) !important;
  background: radial-gradient(circle at top left, #0C2521, #174D51) !important;
  color:#FFFFFF !important;
  border:1px solid #ffffff !important;
}
.custom-confirm-button{
  background-color:#D48931 !important;
  color:#ffffff !important;
  border:none !important;
  padding:8px 22px !important;
  font-weight:800 !important;
  border-radius:6px !important;
  box-shadow:0 3px 6px rgba(0,0,0,0.2) !important;
  text-transform:uppercase;
  letter-spacing:0.5px;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
}
.custom-confirm-button:hover{
  background-color:#b87327 !important;
  transform: translateY(-1px) !important;
  box-shadow:0 5px 10px rgba(0,0,0,0.25) !important;
}
.swal-animate-show{ animation: swalSlideUp 0.25s ease-out; }
.swal-animate-hide{ animation: swalSlideUp 0.2s ease-in reverse; }
@keyframes swalSlideUp{
  from { opacity:0; transform: translateY(20px) scale(0.98); }
  to { opacity:1; transform: translateY(0) scale(1); }
}
.swal-spinner{
  width:34px; height:34px; border-radius:50%;
  border:3px solid rgba(212, 137, 49, 0.2);
  border-top-color:#D48931;
  box-shadow:0 0 10px rgba(212, 137, 49, 0.6);
  animation: spin 0.8s linear infinite;
  margin:12px auto 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
.redirect-fade-out{ animation: redirectFadeOut 0.4s ease-in forwards; }
@keyframes redirectFadeOut{ to { opacity:0; transform: scale(0.9) translateY(10px); } }