.container {
            max-width: 500px;
            margin: 4rem auto;
            background-color: #1c1e26;
            padding: 2rem;
            border-radius: 12px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
        }

        h2 {
            color: #b57bff;
            text-align: center;
            margin-bottom: 1.5rem;
        }

        p {
            color: #ccc;
            font-size: 1rem;
            text-align: center;
            margin-bottom: 1.2rem;
        }

        .qr-container {
            text-align: center;
            margin: 1rem 0;
        }

        form {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        input[type="text"] {
            padding: 0.75rem;
            border-radius: 8px;
            border: none;
            background-color: #2a2d3a;
            color: white;
        }

        button {
            padding: 0.75rem;
            border: none;
            border-radius: 999px;
            background-color: #6366f1;
            color: white;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        button:hover {
            background-color: #4f46e5;
        }

        .error {
            color: #ff6961;
            text-align: center;
        }

        .action-buttons {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .action-buttons form {
            flex: 1 1 48%;
        }
    body {
      display: flex;
      margin: 0;
      background-color: #0f1117;
      color: white;
      min-height: 100vh;
      font-family: Arial, sans-serif;
    }

    .sidebar {
      width: 240px;
      background-color: #1c1e26;
      padding: 2rem 1rem;
      box-shadow: 2px 0 10px rgba(0,0,0,0.3);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .sidebar h2 {
      color: #b57bff;
      margin-bottom: 2rem;
      font-size: 1.5rem;
      text-align: center;
    }

    .nav-link {
      display: block;
      padding: 0.75rem 1rem;
      color: #ddd;
      margin-bottom: 0.5rem;
      border-radius: 8px;
      transition: background-color 0.2s ease;
      text-decoration: none;
    }

    .nav-link:hover {
      background-color: #2a2d3a;
    }

    .logout-btn {
      margin-top: 1.4rem;
      padding: 0.6rem 4rem;
      background-color: #ff4d4d;
      color: white;
      border: none;
      border-radius: 6px;
      text-align: center;
      font-weight: bold;
      cursor: pointer;
      text-decoration: none;
    }

    .logout-btn:hover {
      background-color: #e84343;
    }

    .main {
      flex: 1;
      padding: 2rem;
    }

    .main h1 {
      font-size: 2rem;
      color: #b57bff;
      margin-bottom: 1.5rem;
    }

    .content-section {
      background-color: #1c1e26;
      padding: 1.5rem;
      border-radius: 12px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
      margin-bottom: 2rem;
    }

    .content-section h3 {
      color: #ffd966;
      margin-top: 0;
      margin-bottom: 0.75rem;
    }

    .content-section p {
      color: #ccc;
    }