:root {
  --font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  /* Brand accents */
  --primary-color: #4c7af1;
  --primary-hover: #3b66d1;

  --success-color: #2b9d69;
  --success-light-color: #a1e3c5;
  --failed-color: #e05656;
  --failed-light-color: #f4b0b0;

  /* Surface colors */
  --background-color: #f5f7fb;
  --background-color2: #eef2fb;
  --card-background: #ffffff;

  /* Borders & depth */
  --border1-color: #d6deeb;
  --box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);

  /* Typography */
  --text1-color: #1f2937;
  --text2-color: #576078;

  /* Header */
  --header-color: #ffffff;
  --header-secondary: #f1f4fb;
  --header-hover: #e3eaf8;

  /* Defaults */
  --border: 1px solid var(--border1-color);
  --border-radius: 10px;

  /* Buttons */
  --button-color: #e6ecff;
  --button-text: var(--text1-color);
  --button-hover-color: #d8e2ff;
  --button-active-color: #c4d4ff;
  --button-selected-color: var(--primary-color);
  --button-selected-hover-color: var(--primary-hover);
  --button-border: 1px solid rgba(76, 122, 241, 0.25);
  --button-border-hover: 1px solid rgba(76, 122, 241, 0.45);
}


   *
   {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
 
   }

    body {
      background-color: var(--background-color);
      font-family: var(--font-family);
      min-height: 100vh;
      padding: 0;
    }

    .auth-page {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: calc(100vh - 72px);
      padding: 72px 16px 48px;
    }

    .wrapper {
      background: var(--card-background);
      border-radius: 12px;
      box-shadow: var(--box-shadow);
      padding: 40px 48px;
      max-width: 460px;
      width: 100%;
      color: var(--text1-color);
    }

    .wrapper h2
    {
      margin-bottom: 10px;
    }

    .wrapper p 
    {
      font-size: 14px; 
      color: var(--text2-color); 
      margin-bottom: 25px;
    }

    .alert {
      font-size: 14px;
      margin-bottom: 20px;
      padding: 12px;
      border-radius: var(--border-radius);
    }

    .alert-error {
      background-color: var(--failed-light-color);
      color: var(--failed-color);
    }

    .oauth-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px;
      border-radius: 8px;
      font-weight: 600;
      font-size: 15px;
      color: #ffffff;
      text-decoration: none;
      transition: 0.2s;
    }

    .google-btn { background-color: #DB4437; border: var(--border); }
    .github-btn { background-color: #24292e; border: var(--border); }
    .oauth-btn i { margin-right: 10px; }

    .btn-primary {
      width: 100%;
      padding: 12px;
      background-color: var(--primary-hover);
      color: #ffffff;
      border: none;
      border-radius: var(--border-radius);
      margin-top: 10px;
      cursor: pointer;
      font-weight: 600;
      box-shadow: 0 12px 22px rgba(76, 122, 241, 0.18);
    }
    .btn-primary:hover { background-color: var(--primary-color); }

    .input-group {
      margin-bottom: 18px;
    }

    .input-group label {
      display: block;
      font-weight: 600;
      margin-bottom: 6px;
      font-size: 14px;
    }

    .input-group input {
      width: 100%;
      padding: 12px;
      font-size: 15px;
      border-radius: var(--border-radius);
      border: var(--border);
      background-color: var(--background-color2);
      color: var(--text1-color);
    }

    .input-group input:focus {
      outline: none;
      border: 1px solid var(--primary-color);
    }

    .links {
      font-size: 13px;
      margin-top: 15px;
      display: flex;
      justify-content: space-between;
    }

    #login_link
    {
        justify-content: center;
        gap: 10px;
    }

    a { color: var(--primary-color); }

    .links a 
    {
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .links a:hover 
    {
      color: var(--primary-hover);
    }

    .divider {
      margin: 25px 0 15px;
      text-align: center;
      color: var(--text2-color);
      font-size: 13px;
    }

    @media (max-width: 640px) {
      .auth-page {
        padding: 96px 12px 40px;
        align-items: flex-start;
      }

      .wrapper {
        padding: 32px 24px;
      }
    }