/**
 * The shared look of the pages you land on before the app.
 *
 * Sign-in and the invitation page are the same card on the same background,
 * so the CSS lives in one file rather than being copied into each — a copy is
 * how two pages that should look identical stop looking identical.
 *
 * Extracted verbatim from signin.html's <style> block; nothing here changed
 * on the way out.
 */
  :root {
    --brand: #0101ff;
    --brand-ink: #FFFFFF;
    --ink: #14161D;
    --muted: #5F6577;
    --line: #E3E6EF;
    --bg: #FFFFFF;
    --panel: #FFFFFF;
    --field: #FFFFFF;
    --bad: #B32D2D;
    --bad-bg: #FBEDED;
    --ok: #0B7A4B;
    --ok-bg: #E8F6EF;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    display: grid;
    place-items: center;
    padding: 32px 20px;
    -webkit-font-smoothing: antialiased;
  }
  .card { width: 100%; max-width: 390px; }
  .brand {
    display: flex; align-items: center; gap: 9px;
    margin-bottom: 30px; text-decoration: none; color: var(--ink);
  }
  .brand img { width: 26px; height: 26px; }
  .brand span {
    font-family: 'Sora', sans-serif; font-weight: 700;
    letter-spacing: .16em; font-size: 14px; text-transform: uppercase;
  }
  h1 {
    font-family: 'Sora', sans-serif; font-weight: 700;
    font-size: 26px; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 7px;
  }
  .sub { margin: 0 0 26px; color: var(--muted); font-size: 14px; }
  .google {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 12px 16px;
    border: 1px solid var(--line); border-radius: 9px;
    background: var(--field); color: var(--ink);
    font-family: inherit; font-size: 14.5px; font-weight: 500;
    text-decoration: none; cursor: pointer;
  }
  .google:hover { border-color: #C6CBDA; background: #FAFBFF; }
  .google:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .or {
    display: flex; align-items: center; gap: 12px;
    margin: 20px 0; color: var(--muted); font-size: 12.5px;
  }
  .or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
  label {
    display: block; font-size: 12.5px; font-weight: 500;
    margin-bottom: 5px; color: var(--muted);
  }
  input {
    width: 100%; padding: 11px 13px; margin-bottom: 15px;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--field); color: var(--ink);
    font-family: inherit; font-size: 15px;
  }
  input:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }
  .btn {
    width: 100%; padding: 12px 16px; border: 0; border-radius: 9px;
    background: var(--brand); color: var(--brand-ink);
    font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
  }
  .btn:hover { background: #163BD0; }
  .btn:disabled { opacity: .6; cursor: default; }
  .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .msg { font-size: 13.5px; border-radius: 8px; padding: 0; margin: 0 0 14px; }
  .msg:not(:empty) { padding: 10px 13px; }
  .msg.bad { background: var(--bad-bg); color: var(--bad); }
  .msg.good { background: var(--ok-bg); color: var(--ok); }
  .swap {
    display: block; width: 100%; margin-top: 18px; padding: 0;
    background: none; border: 0; color: var(--brand);
    font-family: inherit; font-size: 13.5px; cursor: pointer; text-align: center;
  }
  .swap:hover { text-decoration: underline; }
  .foot { margin-top: 26px; font-size: 12.5px; color: var(--muted); text-align: center; }
  .legal {
    text-align: center; font-size: 12.5px; line-height: 1.55;
    color: var(--muted); margin: 18px auto 0; max-width: 34ch;
  }
  .foot a { color: var(--muted); }
  .hint { font-size: 12.5px; color: var(--muted); margin: -8px 0 15px; }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
      --bg: #0C0E14; --panel: #141824; --field: #141824;
      --ink: #E9EBF2; --muted: #939AAE; --line: #262B38;
      --brand: #3f80ff; --brand-ink: #0C0E14;
      --bad: #FF8A8A; --bad-bg: #2C1618; --ok: #48D394; --ok-bg: #12261D;
    }
  }
  html[data-theme="dark"] {
    --bg: #0C0E14; --panel: #141824; --field: #141824;
    --ink: #E9EBF2; --muted: #939AAE; --line: #262B38;
    --brand: #3f80ff; --brand-ink: #0C0E14;
    --bad: #FF8A8A; --bad-bg: #2C1618; --ok: #48D394; --ok-bg: #12261D;
  }