body {
      font-family: Arial;
      background: #f1f1f1;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
      justify-content: center;
  }

  .login-container {
      background: white;
      padding: 25px;
      border-radius: 8px;
      width: 320px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  }

  h2 {
      text-align: center;
      color: #333;
      font-size: 20px;
      /* Refined size to match app */
      margin-bottom: 25px;
      margin-top: 5px;
      /* <--- ADD THIS LINE */
      font-weight: 600;
  }

  .toggle-password {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      color: #666;
      font-size: 18px;
      user-select: none;
  }

  /* Label Styling (Matching App) */
  .input-label {
      display: block;
      text-align: left;
      font-weight: 500;
      font-size: 13px;
      color: rgba(0, 0, 0, 0.87);
      margin-bottom: 8px;
      padding-left: 10px;
  }

  /* Pipe Shaped Input (Matching App) */
  input[type="email"],
  input[type="password"],
  input[type="text"] {
      width: 100%;
      padding: 15px 20px;
      margin-bottom: 20px;
      border-radius: 30px;
      border: 1px solid #E0E0E0;
      box-sizing: border-box;
      font-size: 14px;
      transition: border-color 0.3s ease;
      outline: none;
  }

  input[type="email"]:focus,
  input[type="password"]:focus,
  input[type="text"]:focus {
      border: 1.5px solid #1E88E5;
  }

  /* Captcha Styling to match App logic */
  .captcha-box {
      background: #eee;
      padding: 10px;
      border-radius: 5px;
      margin: 15px 0 10px;
      text-align: center;
      letter-spacing: 5px;
      user-select: none;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .captcha-display span {
      display: inline-block;
      font-weight: bold;
      color: #333;
  }

  .refresh-captcha {
      margin-left: 10px;
      cursor: pointer;
      font-size: 18px;
      color: #5b69e6;
  }

  .remember-container {
      display: flex;
      align-items: center;
      margin: 10px 0 20px;
      gap: 10px;
      font-size: 14px;
      color: #555;
  }

  .remember-container input {
      width: 18px;
      height: 18px;
      margin: 0;
      cursor: pointer;
  }

  button {
      width: 100%;
      padding: 15px;
      background: #5b69e6;
      /* Blue to match app login button */
      border: none;
      color: white;
      border-radius: 30px;
      cursor: pointer;
      font-weight: bold;
      font-size: 17px;
      transition: background 0.3s ease;
      margin-bottom: 5px;
      /* Spacing for the link below */
  }

  button:hover {
      background: #3f4fc4;
  }

  /* Custom Green Checkbox (Matching App) */
  .remember-container input[type="checkbox"] {
      accent-color: #28a745;
      /* Makes the checkmark green */
      width: 16px;
      height: 16px;
      cursor: pointer;
  }

  .links a {
      color: #5b69e6;
      text-decoration: none;
  }

  /* DVC Logo Styling */
  .logo-container {
      width: 110px;
      /* Reduced from 100px */

      margin: 0 auto 0px;
      /* Tighter margin */
      display: block;

      /* Minimal padding so logo fills box */
      border-radius: 5px;
      /* Sharper corners like app */
  }

  .dvc-logo {
      width: 100%;
      height: auto;
      display: block;

  }

  /* Error / Success Message Styling */
  .error {
      background: #fdecea;
      color: #c0392b;
      border: 1px solid #f5c6cb;
      border-radius: 8px;
      padding: 12px 16px;
      font-size: 14px;
      text-align: center;
      margin-bottom: 15px;
  }

  .message-box {
      width: 320px;
  }