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

  body {
    height: 100vh;
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    background: #1d2635; /* Deep dark background */
    color: #e0e0e0; 
    overflow: hidden; 
    position: relative;
  }

  .logo {
    display: none; 
  }

  /* Styling for the main title ("Sign in to continue") */
  .main-title {
      font-size: 1.8rem;
      font-weight: bold;
      color: #e0e0e0;
      margin-bottom: 35px; /* Slightly increased space for title */
      text-align: center;
  }

  .container {
    /* Adjusted color for a darker, deeper blue/black card */
    background: #1c1c2c; 
    /* Reduced Padding: 30px top/bottom, 35px left/right */
    padding: 30px 35px; 
    border-radius: 8px; /* Slightly less rounded corners */
    width: 400px; /* Slight reduction in width */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); 
    text-align: left; 
    position: relative;
    z-index: 1; 
  }

  /* Hiding the original h2 "Create Account" */
  .original-title {
      display: none;
  }

  form label {
      display: block;
      text-align: left;
      margin-top: 20px; 
      margin-bottom: 8px; 
      font-size: 0.95rem; 
      color: #b0b0b0; 
      font-weight: normal; 
  }

  input[type="text"],
  input[type="password"] {
    width: 100%;
    padding: 14px 18px; 
    margin: 0 0 10px 0;
    border-radius: 6px; /* Slightly less rounded inputs */
    border: 1px solid #48485a; /* Subtle gray border */
    outline: none;
    font-size: 1.05rem; 
    /* Dark input background, slightly lighter than container for contrast */
    background: #2a2a3e; 
    color: #e0e0e0; 
    transition: border-color 0.3s, box-shadow 0.3s;
  }

  input:focus {
    border-color: #5a5a7f; 
    box-shadow: 0 0 0 2px rgba(80, 80, 150, 0.4); 
  }

  /* Primary "Sign Up" button styled like the purple "Sign In" button */
  button {
    width: 100%;
    padding: 14px 18px; 
    margin-top: 15px; 
    border-radius: 6px; /* Consistent rounding */
    border: none;
    font-size: 1.05rem; 
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
    color: #e0e0e0;
  }

  .signup-btn {
    background: #504fa3; /* Vibrant purple from the image */
    color: #fff; 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); 
    margin-bottom: 10px; 
  }

  .signup-btn:hover {
    background: #6a69c0;
  }

  #status {
    margin-top: 20px; 
    font-weight: bold;
    min-height: 20px;
    text-align: center; 
    font-size: 0.9rem;
  }

  /* Styling the secondary action section (Login Prompt) */
  .login-prompt {
      /* Less vertical margin/padding to compact the look */
      margin-top: 20px; 
      padding-top: 20px;
      border-top: 1px solid #38384a; /* Subtle separator line */
      text-align: center;
  }

  .login-prompt p {
      font-size: 0.9rem;
      color: #b0b0b0; 
      margin-bottom: 15px; 
      display: none; 
  }

  /* Styling the "Log In" button like the secondary action buttons in the image */
  .login-redirect-btn { 
    /* Darker button matching the secondary buttons in the image */
    background: #2a2a3e; 
    border: 1px solid #38384a; 
    font-weight: normal; 
    margin-top: 10px; 
  }

  .login-redirect-btn:hover {
    background: #333345; 
    border-color: #48485a;
  }