body {
      font-family: system-ui, -apple-system, sans-serif;
      background: linear-gradient(180deg, #1a1a2e 0%, #0a4377 100%);
      color: #fff;
      overflow: hidden;
      margin: 0;
      min-height: 100vh;
      min-height: 100dvh; /* For mobile browsers */
    }

    canvas {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1;
    }
            .logo-container {
            position: fixed;
            top: 2rem;
            left: 2rem;
            z-index: 2;
        }
        .logo {
            height: 100px;
            width: auto;
            filter: brightness(0) invert(1);
        }
    .navbar {
      padding: 1rem;
    }

    .navbar-brand {
      color: #fff !important;
    }

    .navbar-brand svg {
      width: 28px;
      height: 28px;
    }

    @media (max-width: 576px) {
      .navbar-brand svg {
        width: 24px;
        height: 24px;
      }

      .navbar-brand span {
        font-size: 1.25rem;
      }
    }

    .login-card {
      width: 100%;
      max-width: 28rem;
      background-color: rgb(7 22 44 / 64%);
      backdrop-filter: blur(8px);
      padding: 2rem;
      border-radius: 1rem;
      border: 1px solid #ffffff1f;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      margin: 1rem;
      z-index: 99;
    }

    @media (max-width: 576px) {
      .login-card {
        padding: 1.5rem;
        margin: 1rem;
        max-width: 100%;
      }
    }

    .form-control::placeholder {
      color: rgba(148, 163, 184, 0.7);
    }

    .form-label {
      color: #e2e8f0;
      margin-bottom: 0.5rem;
      font-weight: 500;
    }

    .btn-primary {
      background-color: #2563eb;
      border-color: #2563eb;
      height: 3rem;
      font-weight: 500;
      font-size: 1rem;
    }

    .btn-primary:hover {
      background-color: #1d4ed8;
      border-color: #1d4ed8;
    }

    .btn-link {
      color: #94a3b8;
      text-decoration: none;
      padding: 0;
    }

    .btn-link:hover {
      color: #fff;
    }

    a {
      color: #93c5fd;
      transition: color 0.2s ease;
    }

    a:hover {
      color: #60a5fa;
    }

    /* Responsive font sizes */
    @media (max-width: 576px) {
      h2 {
        font-size: 1.5rem;
      }

      .form-label {
        font-size: 0.9rem;
      }

      .btn-primary {
        height: 2.75rem;
        font-size: 0.95rem;
      }
    }

    /* Landscape mode on mobile */
    @media (max-height: 600px) and (orientation: landscape) {
      .navbar {
        padding: 0.5rem 1rem;
      }

      .login-card {
        padding: 1.25rem;
        margin: 0.5rem;
      }

      .form-control {
        height: 2.5rem;
      }

      .btn-primary {
        height: 2.5rem;
      }

      h2 {
        margin-bottom: 1rem !important;
      }

      .mb-3 {
        margin-bottom: 0.75rem !important;
      }

      .mb-4 {
        margin-bottom: 1rem !important;
      }
    }