/* InvokePortal sign-in — brand styling.
   Palette mirrors the Cosmo app's base.html CSS variables (--il-red, --il-purple). */
:root {
  --il-red: #c8102e;
  --il-purple: #6b1f7c;
  --navy: #0f1b2d;
  --il-gray: #5b6470;
  --bg: #f4f5f7;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: Helvetica, "Trebuchet MS", Arial, sans-serif;
  color: var(--navy);
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(107, 31, 124, 0.12), transparent 60%),
    radial-gradient(1000px 500px at -10% 110%, rgba(200, 16, 46, 0.10), transparent 60%),
    var(--bg);
  display: grid;
  place-items: center;
}

.card {
  width: min(420px, 92vw);
  margin: 6vh auto;
  padding: 40px 36px 28px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(15, 27, 45, 0.14);
  text-align: center;
}

.brand {
  font-family: "Barlow Condensed", Helvetica, sans-serif;
  font-weight: 700;
  font-size: 40px;
  letter-spacing: 0.5px;
  line-height: 1;
}
.brand-invoke { color: var(--navy); }
.brand-portal { color: var(--il-red); }

.tagline {
  margin: 10px 0 26px;
  color: var(--il-gray);
  font-size: 15px;
}

#firebaseui-container { min-height: 48px; }

.loader {
  margin-top: 12px;
  color: var(--il-gray);
  font-size: 14px;
}

.error {
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(200, 16, 46, 0.08);
  color: var(--il-red);
  font-size: 14px;
}

.footer {
  margin-top: 28px;
  color: var(--il-gray);
  font-size: 12px;
}

/* Nudge FirebaseUI buttons toward the brand look. */
.firebaseui-idp-button,
.mdl-button { border-radius: 8px !important; }