/* Extracted from user/login.php during UI migration. */
.login-page {
      width: min(100%, 960px);
      margin: 0 auto;
      padding: 44px 20px 64px;
      box-sizing: border-box;
    }
    .login-container {
      width: min(100%, 640px);
      margin: 0 auto;
      padding: 30px;
      background: #fff;
      border: 1px solid #e0e4ec;
      border-radius: 18px;
      box-shadow: 0 10px 30px rgba(40,83,124,.06);
    }
    .login-container h1 {
      margin: 0 0 24px;
      color: #20232a;
      text-align: center;
      font-size: 28px;
      font-weight: 650;
    }
    .login-container label {
      display: block;
      margin-top: 12px;
      color: #4b5260;
      font-size: 14px;
      font-weight: 600;
    }
    .login-container input[type="text"],
    .login-container input[type="password"] {
      width: 100%;
      min-height: 46px;
      padding: 9px 11px;
      margin-top: 6px;
      box-sizing: border-box;
      border: 1px solid #ccd4e0;
      border-radius: 11px;
    }
    .login-container input[type="text"]:focus,
    .login-container input[type="password"]:focus {
      outline: 0;
      border-color: #3779f3;
      box-shadow: 0 0 0 3px rgba(55, 121, 243, .12);
    }
    .login-container input[type="submit"] {
      width: 100%;
      min-height: 46px;
      margin-top: 18px;
      padding: 10px;
      color: #fff;
      background: #3779f3;
      border: 0;
      border-radius: 11px;
      cursor: pointer;
      font-weight: 650;
    }
    .login-container input[type="submit"]:hover { background: #2869dc; }
    .login-container .message { margin: 10px 0; padding: 10px; }
    .login-container .error { color: #9c1c1c; background: #fff0f0; }
    .login-container .captcha-img {
      height: 46px;
      margin-left: 10px;
      cursor: pointer;
      vertical-align: middle;
    }
    .login-container .extra-links { margin-top: 18px; text-align: center; }
    .login-container .extra-links a { color: #176dde; text-decoration: none; }
    .login-container .extra-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
    html[data-theme="dark"] .login-container {
      color: #e8eef5;
      background: #171e27;
      border-color: #303b48;
      box-shadow: none;
    }
    html[data-theme="dark"] .login-container h1,
    html[data-theme="dark"] .login-container label { color: #f4f7fb; }
    html[data-theme="dark"] .login-container input[type="text"],
    html[data-theme="dark"] .login-container input[type="password"] {
      color: #fff;
      background: #10161d;
      border-color: #46515f;
    }
    html[data-theme="dark"] .login-container input::placeholder { color: #8492a3; }
    html[data-theme="dark"] .login-container input[type="text"]:focus,
    html[data-theme="dark"] .login-container input[type="password"]:focus {
      border-color: #5b9dff;
      box-shadow: 0 0 0 3px rgba(91, 157, 255, .18);
    }
    html[data-theme="dark"] .login-container .error {
      color: #ffb7c0;
      background: #3a1e24;
      border: 1px solid #63303a;
    }
    html[data-theme="dark"] .login-container hr { border-color: #303b48; }
    html[data-theme="dark"] .login-container .extra-links a { color: #8bbcff; }
    .qn-user-login-entry-note {
      margin: -10px 0 18px;
      padding: 11px 13px;
      text-align: center;
      color: #536173;
      background: #f8faff;
      border: 1px solid #e4e9f6;
      border-radius: 11px;
    }
    .qn-user-login-entry-note a { color: #176dde; font-weight: 650; }
    .qn-google-primary {
      margin: 0 0 20px;
      padding: 18px;
      text-align: center;
      background: #f7f9ff;
      border: 1px solid #dbe4ff;
      border-radius: 14px;
    }
    .qn-google-primary-title {
      margin-bottom: 12px;
      color: #26364d;
      font-weight: 700;
    }
    .qn-user-login-third-party {
      display: flex;
      justify-content: center;
      min-height: 44px;
    }
    .qn-auth-separator {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 20px 0 12px;
      color: #7b8798;
      font-size: 13px;
    }
    .qn-auth-separator::before,
    .qn-auth-separator::after {
      content: "";
      height: 1px;
      background: #e2e7ef;
      flex: 1;
    }
    html[data-theme="dark"] .qn-user-login-entry-note,
    html[data-theme="dark"] .qn-google-primary {
      color: #cbd6e3;
      background: #121923;
      border-color: #303b48;
    }
    html[data-theme="dark"] .qn-google-primary-title { color: #eef4fb; }
    html[data-theme="dark"] .qn-auth-separator { color: #93a2b4; }
    html[data-theme="dark"] .qn-auth-separator::before,
    html[data-theme="dark"] .qn-auth-separator::after { background: #303b48; }

    @media (max-width: 760px) {
      .login-page { padding: 24px 14px 48px; }
      .login-container { padding: 22px 18px; }
      .login-container h1 { font-size: 24px; }
      .qn-google-primary { padding: 14px 10px; }
      .qn-google-primary .g_id_signin { max-width: 100%; overflow: hidden; }
    }