/* Lifted out of templates/user_templates/_auth_style.html, unchanged.
   Linked from that template and nowhere else, so these rules reach
   exactly the pages they always did. */
  :root {
    --lg-navy:   #6d3fd1;   /* --brand-navy, the console's own */
    --lg-navy-d: #2e1a5c;
    --lg-ink:    #111827;
    --lg-ink-2:  #5b6b7f;
    --lg-line:   #e3eaf2;
    --lg-field:  #fbfcfe;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; min-height: 100vh; height: auto; display: flex;
    align-items: center; justify-content: center; padding: 26px;
    background: #eef2f7 !important; background-image: none !important;
    color: var(--lg-ink);
    font-family: 'Rubik', -apple-system, 'Segoe UI', Arial, sans-serif;
  }

  /* One white surface. login.html splits it in two; the password pages use it
     whole, at the same width the split one falls back to on a phone. */
  .lg-shell {
    width: 100%; max-width: 1000px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    background: #fff; border: 1px solid var(--lg-line); border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16,40,70,.04), 0 26px 60px rgba(16,40,70,.10);
  }
  .lg-shell.lg-solo { grid-template-columns: 1fr; max-width: 460px; }

  /* ---- the form, whichever page it is on --------------------------------- */
  .lg-form, .lg-card { padding: 52px 54px; display: flex; flex-direction: column;
    justify-content: center; }
  /* Width-pinned, not height-pinned: with height:30px and width:auto this box
     ran to 391px -- 78% of the column -- and the mark dominated the page. */
  .lg-form .logo, .lg-card .logo { display: block; width: 188px; height: auto;
    margin: 0 0 40px; }
  .lg-form h1, .lg-card h1 { margin: 0 0 8px; font-size: 30px; font-weight: 800;
    letter-spacing: -.4px; line-height: 1.2; color: var(--lg-ink); }
  .lg-sub { margin: 0 0 34px; font-size: 14px; color: var(--lg-ink-2); }

  /* The password rule, under a field that sets one. */
  .pw-rule { margin: -6px 0 14px; font-size: 12.5px; line-height: 1.45; color: var(--lg-ink-2); }
  .lg-form label, .lg-card label { display: block; margin: 0 0 7px; font-size: 13px;
    font-weight: 600; color: var(--lg-ink); }
  .lg-form input[type="email"], .lg-form input[type="password"],
  .lg-form input[type="text"],
  .lg-card input[type="email"], .lg-card input[type="password"],
  .lg-card input[type="text"] {
    width: 100%; min-height: 48px; margin: 0 0 20px; padding: 0 14px;
    font-size: 14px; font-family: inherit; color: var(--lg-ink);
    background: var(--lg-field); border: 1px solid #dfe5ec; border-radius: 10px;
    transition: border-color .15s ease, box-shadow .15s ease; }
  .lg-form input::placeholder, .lg-card input::placeholder { color: #646f83; }
  .lg-form input:focus, .lg-card input:focus { outline: none; background: #fff;
    border-color: var(--lg-navy); box-shadow: 0 0 0 3px rgba(109, 63, 209,.14); }
  .lg-row { display: flex; align-items: baseline; justify-content: space-between; }
  .lg-row a, a.forgot { font-size: 12.5px; font-weight: 600;
    color: var(--lg-navy) !important; text-decoration: none; }
  .lg-row a:hover { text-decoration: underline; }

  .lg-form .signin-btn, .lg-card .signin-btn {
    width: 100%; min-height: 50px; margin-top: 8px; border: 0; border-radius: 10px;
    font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
    color: #fff; background: var(--lg-navy); transition: background .15s ease; }
  .lg-form .signin-btn:hover, .lg-card .signin-btn:hover { background: var(--lg-navy-d); }
  .lg-form .signin-btn:disabled,
  .lg-card .signin-btn:disabled { opacity: .6; cursor: not-allowed; }

  /* ---- the two password pages -------------------------------------------- */

  /* Flask flashes here: an expired link, a password too short, two that do not
     match. They are the page's only feedback, so they are not decoration --
     each pair is 4.5:1 or better on its own tint. */

  .lg-lede { margin: -14px 0 30px; font-size: 14px; line-height: 1.6;
    color: var(--lg-ink-2); }
  .lg-lede strong { color: var(--lg-ink); font-weight: 700; }
  .lg-back { margin: 20px 0 0; text-align: center; font-size: 13px; }
  .lg-back a { color: var(--lg-navy) !important; font-weight: 600;
    text-decoration: none; }
  .lg-back a:hover { text-decoration: underline; }

  @media (max-width: 560px) {
    .lg-card { padding: 38px 26px; }
  }
  /* The flash styles that were here are gone: every flashed message now
     renders through partials/flash.html and css/flash.css. */