:root {
      --bg: #000000; --panel:#151821; --row:#1a1d24; --muted:#9aa3b2; --line:#232735;
      --green:#22c55e; --txt:#e8ecf4; --text-300:#a7b0ad; --brand-500: #16da64; --brand-600: #12b754;
      --danger: #ef4444; --surface: #111418; --card: #151821; --cyan: #22d3ee; --blue: #3b82f6; --amber: #f59e0b;

    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

   body {
            background-color: var(--bg);
            color: var(--txt);
            overflow-x: hidden;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }


    

        

    /* Form Container Styles */
    .login-container {
      width: 100%;
      max-width: 450px;
      background: var(--panel);
      padding: 30px;
      border-radius: 20px;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
      position: relative;
      z-index: 10;
      border: 1px solid var(--line);
    }

    .brand-text {
      color: var(--green);
      font-weight: 700;
      margin-bottom: 5px;
    }

    .login-container p {
      color: var(--muted);
      margin-bottom: 10px;
      text-align: center;
    }

    .form-label {
      color: var(--txt);
      font-weight: 500;
      margin-bottom: 8px;
    }

    .form-control {
      background: var(--card);
      border: 1px solid var(--line);
      color: var(--txt);
      padding: 12px 16px;
      border-radius: 8px;
      transition: all 0.3s ease;
    }

    .form-control:focus {
      background: var(--card);
      border-color: var(--brand-500);
      color: var(--txt);
      box-shadow: 0 0 0 0.2rem rgba(22, 218, 100, 0.15);
    }

    .form-control::placeholder {
      color: var(--muted);
    }

    .btn-custom {
      background: var(--brand-500);
      border: none;
      color: var(--bg);
      padding: 12px;
      font-weight: 600;
      border-radius: 8px;
      transition: all 0.3s ease;
      margin-top: 10px;
    }

    .btn-custom:hover {
      background: var(--brand-600);
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(22, 218, 100, 0.3);
    }

    .sign-link, .login-link {
      text-align: center;
      margin-top: 30px;
      color: var(--muted);
    }

    .sign-link a, .login-link a {
      color: var(--brand-500);
      text-decoration: none;
      font-weight: 500;
    }

    .sign-link a:hover, .login-link a:hover {
      text-decoration: underline;
    }

    .forgot-link {
      color: var(--brand-500);
      text-decoration: none;
      font-size: 0.9rem;
    }

    .forgot-link:hover {
      text-decoration: underline;
    }

    .form-check-input:checked {
      background-color: var(--brand-500);
      border-color: var(--brand-500);
    }

    .form-check-label {
      color: var(--text-300);
    }

    .logo-container {
      text-align: center;
      margin-bottom: 10px;
    }

    .logo-icon {
      font-size: 3rem;
      color: var(--brand-500);
      margin-bottom: 5px;
    }

    .alert {
      border: none;
      border-radius: 8px;
      margin-bottom: 20px;
    }

    .alert-danger {
      background: rgba(239, 68, 68, 0.15);
      color: var(--danger);
      border: 1px solid rgba(239, 68, 68, 0.3);
    }

    /* Responsive Design */
    @media (max-width: 576px) {
      .login-container {
        padding: 30px 20px;
        margin: 10px;
      }
      
      body {
        padding: 10px;
      }
    }

    @media (max-width: 768px) {
      .floating-card {
        display: none;
      }
      
      .shape {
        opacity: 0.05;
      }
    }

    /* Background Styles */
        .auth-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
            background: linear-gradient(135deg, var(--bg) 0%, var(--surface) 100%);
        }



.grid-lines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(33, 13, 212, 0.05) 1px, transparent 2px),
        linear-gradient(90deg, rgba(33, 13, 212, 0.05) 1px, transparent 2px);
    background-size: 40px 40px;
    animation: gridMove 20s linear infinite;
}

.floating-icons {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.floating-icons i {
    position: absolute;
    font-size: 1.5rem;
    color: var(--brand-500);
    opacity: 0.2;
    animation: floatIcon 8s ease-in-out infinite;
}

.floating-icons i:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
.floating-icons i:nth-child(2) { top: 60%; left: 80%; animation-delay: 1s; }
.floating-icons i:nth-child(3) { top: 80%; left: 20%; animation-delay: 2s; }
.floating-icons i:nth-child(4) { top: 40%; left: 90%; animation-delay: 3s; }
.floating-icons i:nth-child(5) { top: 10%; left: 70%; animation-delay: 4s; }
.floating-icons i:nth-child(6) { top: 70%; left: 40%; animation-delay: 5s; }
.floating-icons i:nth-child(7) { top: 45%; left: 12%; animation-delay: 9s; }
.floating-icons i:nth-child(8) { top: 25%; left: 65%; animation-delay: 10.5s; }



.corner-accent {
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--brand-500) 0%, transparent 70%);
    opacity: 0.05;
    filter: blur(20px);
}

.corner-accent.top-left {
    top: -100px;
    left: -100px;
}

.corner-accent.bottom-right {
    bottom: -100px;
    right: -100px;
}

@keyframes gridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

@keyframes floatIcon {
    0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.2; }
    50% { transform: translateY(-20px) rotate(180deg); opacity: 0.1; }
}

       .swal2-popup{ background:var(--panel)!important; color:#e8ecf4!important; border:1px solid var(--line)!important; border-radius:16px!important; box-shadow:0 6px 24px rgba(0,0,0,0.45)!important; } /* [web:66] */
  .swal2-title{ color:#e8ecf4!important; } /* [web:66] */
  .swal2-html-container{ color:var(--muted)!important; } /* [web:66] */
  .swal2-icon.swal2-success{ border-color:var(--green)!important; color:var(--green)!important; } /* [web:66] */
  .swal2-icon.swal2-error{ border-color:var(--danger)!important; color:var(--danger)!important; } /* [web:66] */
  .swal2-styled.swal2-confirm{ background:#1f2634!important; color:#dbe7ff!important; border:1px solid #2b3b58!important; border-radius:999px!important; padding:10px 16px!important; }
  .swal2-styled.swal2-cancel{ background:#2a2314!important; color:#ffe2b4!important; border:1px solid #3f311c!important; border-radius:999px!important; padding:10px 16px!important; }