/*
 * Fanetam design system.
 *
 * Ported constraints from the Next.js build (public/globals.css), and they are not
 * cosmetic preferences — they are rules the owner has stated:
 *
 *   1. The theme is FIXED. No `prefers-color-scheme`, no `dark:` variants. The colour
 *      scheme is declared once, so a phone in dark mode cannot let the browser
 *      auto-darken the page and recolour text, form controls and images.
 *   2. SEPARATE WITH TONE, NOT LINES. Depth comes from background steps, spacing and
 *      soft shadows. A 1px hairline around every box is the strongest "generated by
 *      an AI" tell, so strokes are the exception: at most ONE per element, at
 *      `--stroke` (6% white), and never animated on hover.
 *   3. The brand accent is PURPLE. Green exists in exactly one place — money — and
 *      never as decoration.
 */

:root {
  color-scheme: dark;

  --bg: #09090b;
  --surface: #18181b;
  --surface-2: #1f1f23;
  --surface-raised: #27272a;

  --text: #f4f4f5;
  --text-muted: #a1a1aa;
  --text-faint: #71717a;

  /* Brand: purple. volt-600 for the dark parts, volt-500 for brighter surfaces. */
  --brand: #4323aa;
  --brand-bright: #552bcd;
  --brand-soft: rgba(85, 43, 205, 0.16);

  /* Money and verified states. This is the ONLY green in the product. */
  --cash: #37b986;
  --cash-soft: rgba(55, 185, 134, 0.14);

  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.14);
  --warn: #fbbf24;

  /* The single stroke used for a card silhouette or a field. Never doubled. */
  --stroke: rgba(255, 255, 255, 0.06);
  --stroke-strong: rgba(255, 255, 255, 0.1);

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -12px rgba(0, 0, 0, 0.6);

  --font: "Vazirmatn", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.65;
  /* Faint brand wash: depth without a single extra element. */
  background-image:
    radial-gradient(60rem 40rem at 100% -10%, rgba(85, 43, 205, 0.13), transparent 70%),
    radial-gradient(45rem 30rem at 0% 0%, rgba(67, 35, 170, 0.09), transparent 65%);
  background-repeat: no-repeat;
}

a:where(:not([class*="text-"])) { color: inherit; }
a { text-decoration: none; }
h1, h2, h3 { line-height: 1.3; margin: 0 0 .5rem; font-weight: 700; }
p { margin: 0 0 1rem; }

/* ── Layout ──────────────────────────────────────────────────────────────── */

.wrap { width: min(1180px, 100% - 2rem); margin-inline: auto; }

.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(9, 9, 11, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--stroke);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 64px;
}

.brand img { height: 36px; width: auto; display: block; }

.nav { margin-inline-start: auto; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }

.nav a, .nav button {
  padding: .45rem .8rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: .94rem;
  font-family: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav a:hover, .nav button:hover { color: var(--text); background: var(--surface); }

/* The first port's page wrapper. Scoped to `.legacy-shell` (set by the layout only
 * while a page has not been ported to the reference markup yet) so it cannot pad a
 * ported page that manages its own spacing. */
.legacy-shell { padding: 2.5rem 0 4rem; }

/* ── Cards: tone, not outlines ───────────────────────────────────────────── */

.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.35rem;
  /* The ONE stroke a card is allowed. */
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
}

.card-plain {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.35rem;
}

.grid { display: grid; gap: 1rem; }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* Two panels side by side, collapsing to one on a phone — same rule as .form-grid.
   `auto-fit` is deliberately NOT used: at 1200px it fits three columns of 320px, which
   is not what a two-panel section asked for. */
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }

.stat-label { color: var(--text-muted); font-size: .82rem; margin: 0 0 .35rem; }
.stat-value { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; margin: 0; font-variant-numeric: tabular-nums; }
.stat-value.cash { color: var(--cash); }
.stat-value.brand { color: #a78bfa; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1.2rem;
  border-radius: var(--radius-sm);
  border: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  background: var(--brand-bright);
  color: #fff;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.btn:hover { background: #6234e0; box-shadow: 0 8px 24px -10px rgba(85, 43, 205, .9); }
.btn:active { transform: translateY(1px); }
.btn-ghost { background: var(--surface-raised); color: var(--text); }
.btn-ghost:hover { background: #323238; box-shadow: none; }
.btn-cash { background: var(--cash); color: #04241a; }
.btn-cash:hover { background: #43cf98; box-shadow: none; }
.btn-block { width: 100%; }

/* Focus is the ONE sanctioned ring, and only for keyboard users. */
:focus-visible { outline: 2px solid #8b5cf6; outline-offset: 2px; }

/* ── Forms ───────────────────────────────────────────────────────────────── */

.field { margin-bottom: 1rem; }
.label { display: block; font-size: .86rem; color: var(--text-muted); margin-bottom: .4rem; }

.input {
  width: 100%;
  padding: .7rem .85rem;
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--stroke-strong);
  font: inherit;
}

.input::placeholder { color: var(--text-faint); }
.input:focus { border-color: var(--brand-bright); outline: none; }

.roles { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }

.role {
  display: block;
  padding: .8rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  cursor: pointer;
  font-size: .9rem;
}

.role input { margin-inline-end: .4rem; }
.role:has(input:checked) { background: var(--brand-soft); }

/* ── Messages ────────────────────────────────────────────────────────────── */

.alert { padding: .8rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: .92rem; }
.alert-error { background: var(--danger-soft); color: #fca5a5; }
.alert-ok { background: var(--cash-soft); color: #6ee7b7; }
.alert-warn { background: rgba(251, 191, 36, .12); color: #fcd34d; }

.pill {
  display: inline-block;
  padding: .18rem .6rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  background: var(--surface-raised);
  color: var(--text-muted);
}
.pill-cash { background: var(--cash-soft); color: var(--cash); }
.pill-brand { background: var(--brand-soft); color: #a78bfa; }

/* ── Tables ──────────────────────────────────────────────────────────────── */

/* No borders between rows: alternating tone and spacing do the work. */
/* `.card` already provides the surface for a table. */
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th {
  text-align: start;
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  padding: .5rem .75rem;
}
.table td { padding: .7rem .75rem; }
.table tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.018); }
.table tbody tr:hover { background: rgba(255, 255, 255, 0.035); }
.num { font-variant-numeric: tabular-nums; }

.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); font-size: .84rem; }
.center { text-align: center; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.75rem; }
.row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }

/* ── Marketing ───────────────────────────────────────────────────────────── */

.hero { padding: 3rem 0 2rem; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); letter-spacing: -.02em; max-width: 22ch; }
.hero p { color: var(--text-muted); font-size: 1.06rem; max-width: 56ch; }

.tag { color: #a78bfa; font-weight: 600; font-size: .9rem; margin-bottom: .6rem; display: block; }

.footer { padding: 2.5rem 0; color: var(--text-faint); font-size: .85rem; }
.empty { padding: 3rem 1rem; text-align: center; color: var(--text-muted); }

/* ── Campaigns ───────────────────────────────────────────────────────────────
 * A campaign card is ONE surface with ONE hairline (`--stroke`), the tonal step from
 * the page doing the separating. Nothing here appears on hover: the owner reported a
 * stroke that showed up under the cursor as a rendering bug, so hover feedback is
 * `translateY` and a deeper shadow only.
 * -------------------------------------------------------------------------- */

.camp-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.camp-card {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  transition: transform .18s ease, box-shadow .18s ease;
}

.camp-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.camp-card h3 { font-size: 1.05rem; margin: 0; }
.camp-brand { color: var(--text-muted); font-size: .87rem; }

/* A rate line: the number is the thing the eye must land on, so it is the bright one. */
.rate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: .45rem .65rem;
  font-size: .87rem;
}

.rate-row b { font-variant-numeric: tabular-nums; color: #a78bfa; }
.rate-row .platform { color: var(--text-muted); }

.money { color: var(--cash); font-variant-numeric: tabular-nums; font-weight: 600; }
.money-quiet { color: var(--text-muted); font-variant-numeric: tabular-nums; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .18rem .5rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: .78rem;
}

.chip-brand { background: var(--brand-soft); color: #a78bfa; }
.chip-cash { background: var(--cash-soft); color: var(--cash); }
.chip-warn { background: rgba(251, 191, 36, .12); color: #fcd34d; }
.chip-danger { background: var(--danger-soft); color: #fca5a5; }

/* A form laid out in two columns, collapsing to one on a phone. */
.form-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }

textarea.input { min-height: 7rem; resize: vertical; line-height: 1.6; }

/* The fee preview: read-only arithmetic, so it is shown as text, not as a field. */
.quote-box {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: .8rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .92rem;
}

.quote-line { display: flex; justify-content: space-between; gap: 1rem; }
.quote-line.total { font-weight: 700; border-top: 1px solid var(--stroke); padding-top: .45rem; margin-top: .2rem; }

.stack { display: flex; flex-direction: column; gap: .5rem; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }


@media (max-width: 640px) {
  .nav a, .nav button { padding: .4rem .55rem; font-size: .88rem; }
  main { padding: 1.5rem 0 3rem; }
  .roles { grid-template-columns: 1fr; }
  .hero { padding: 1.75rem 0 1rem; }
}

/* ── Admin impersonation strip ────────────────────────────────────────────────
 * One tone step (amber, the warning colour) and ONE stroke at the page's own
 * --stroke — never a second one, and nothing here animates: a strip that appears
 * with a flourish is a strip the operator stops noticing.
 * -------------------------------------------------------------------------- */

.fb-impersonation {
  background: rgba(251, 191, 36, 0.1);
  border-bottom: 1px solid var(--stroke);
  color: #fcd34d;
  font-size: .86rem;
}

.fb-impersonation > * {
  width: min(1180px, 100% - 2rem);
  margin-inline: auto;
}

/* The strip is a flex row (statement + the way out), wrapping on a phone rather
 * than squeezing the sentence into a column of single words. */
.fb-impersonation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding-block: .55rem;
}

.fb-impersonation > span {
  width: auto;
  flex: 1 1 22rem;
  margin-inline: 0;
}

@media (max-width: 720px) {
  .fb-impersonation { padding-inline: 1rem; }
  .fb-impersonation > span { flex-basis: 100%; }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * The auth pages — /login and /signup.
 *
 * THE SEAM IS A FADE, NEVER A LINE. The owner's report was "in the middle I see
 * sharp edge of the div, make it fade and cooler between two divs", and the rule
 * that satisfies it is geometric: BOTH panes are exactly `zinc-950` at the shared
 * edge and each ramps AWAY from it. A tint that PEAKS at the edge is still a line,
 * just a softer-looking one — that was the first attempt's mistake.
 *
 * Two things are load-bearing and easy to undo by accident:
 *
 *   1. **The glows come BEFORE the seam spans in the DOM.** The blurred volt blobs
 *      are clipped by the pane's own edge, and that clipped edge is itself a hard
 *      line (measured 4–6/255 on the reference). The fade must paint OVER them, so
 *      it has to come later.
 *   2. **Logical properties, not left/right.** The site renders RTL by default. The
 *      seam sits at the brand pane's inline END in both languages, so `inset-inline-end`
 *      / `inset-inline-start` and `to left`/`to right` gradients flipped by direction
 *      are the only correct form. A physical `right-0` looks right in one language
 *      and wrong in the other.
 *
 * The measured target on the reference was ≤2/255 worst single-column step; the
 * geometry below is the same one that produced it.
 * ───────────────────────────────────────────────────────────────────────────── */

.fb-auth {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* ── Brand pane ────────────────────────────────────────────────────────────── */
.fb-auth-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  overflow: hidden;
  /* Exactly the shared tone at the edge — see the seam spans below. */
  background: #09090b;
  padding: 2rem 1.5rem;
}

.fb-auth-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 9999px;
  filter: blur(110px);
}

.fb-auth-glow-a {
  inset-block-start: 33%;
  inset-inline-start: -6rem;
  width: 20rem;
  height: 20rem;
  background: rgba(85, 43, 205, .15); /* volt-500 at 15% */
}

.fb-auth-glow-b {
  inset-block-end: 0;
  inset-inline-end: -4rem;
  width: 16rem;
  height: 16rem;
  background: rgba(124, 92, 224, .1);
  filter: blur(100px);
}

/* The vertical seam: this pane is zinc-950 AT the edge and ramps away from it. */
.fb-seam-end {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 6rem;
  pointer-events: none;
  display: none;
  background: linear-gradient(to left, #09090b, transparent);
}

/* RTL: `to left` would point the wrong way, so the gradient is mirrored. */
[dir="rtl"] .fb-seam-end {
  background: linear-gradient(to right, #09090b, transparent);
}

/* The horizontal seam on narrow screens, where the panes stack. */
.fb-seam-bottom {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 5rem;
  pointer-events: none;
  background: linear-gradient(to top, #09090b, transparent);
}

.fb-auth-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Height-sized, NEVER width: the mark is portrait (880×1187), so a width rule
 * would blow it up to a giant square. */
.fb-auth-logo-img {
  height: 2.75rem;
  width: auto;
}

.fb-auth-brand-body {
  position: relative;
}

.fb-auth-kicker {
  margin: 0;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8b6ff0; /* volt-400-ish, readable on zinc-950 */
}

.fb-auth-headline {
  margin: .75rem 0 0;
  max-width: 28rem;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
}

.fb-auth-headline > span { color: #a78bfa; }

.fb-auth-perks {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
  max-width: 28rem;
}

.fb-auth-perks li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .9rem;
  line-height: 1.6;
  color: #d4d4d8;
}

.fb-auth-perk-icon {
  flex: 0 0 auto;
  margin-block-start: .1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: .5rem;
  border: 1px solid rgba(85, 43, 205, .3);
  background: rgba(85, 43, 205, .1);
  color: #a78bfa;
}

.fb-auth-paynote {
  display: none;
  align-items: center;
  gap: .75rem;
  margin-block-start: 2rem;
  max-width: 28rem;
  border-radius: .75rem;
  background: rgba(24, 24, 27, .7);
  padding: .75rem 1rem;
}

.fb-auth-paynote p {
  margin: 0;
  font-size: .75rem;
  color: #a1a1aa;
}

.fb-auth-dot {
  position: relative;
  display: inline-flex;
  width: .5rem;
  height: .5rem;
  flex: 0 0 auto;
  border-radius: 9999px;
  background: #552bcd;
}

/* A slow pulse reads as "live" without moving anything the user is reading. */
@media (prefers-reduced-motion: no-preference) {
  .fb-auth-dot::after {
    content: "";
    position: absolute;
    inset: -.25rem;
    border-radius: 9999px;
    background: rgba(85, 43, 205, .35);
    animation: fbAuthPulse 2.4s ease-in-out infinite;
  }
}

@keyframes fbAuthPulse {
  0%, 100% { transform: scale(.85); opacity: .5; }
  50% { transform: scale(1.25); opacity: 0; }
}

.fb-auth-footer {
  position: relative;
  margin: 2rem 0 0;
  display: none;
  font-size: .75rem;
  color: #71717a;
}

/* ── Form pane ─────────────────────────────────────────────────────────────── */
.fb-auth-form-pane {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
  /* A touch lighter than the brand pane — but zinc-950 at the shared edge, which
   * is what the seam spans below restore. */
  background: rgba(24, 24, 27, .3);
}

/* The other half of the vertical seam. */
.fb-seam-start {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 8rem;
  pointer-events: none;
  display: none;
  background: linear-gradient(to right, #09090b, transparent);
}

[dir="rtl"] .fb-seam-start {
  background: linear-gradient(to left, #09090b, transparent);
}

/* The other half of the horizontal seam. */
.fb-seam-top {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 4rem;
  pointer-events: none;
  background: linear-gradient(to bottom, #09090b, transparent);
}

.fb-auth-form-wrap {
  width: 100%;
  max-width: 28rem;
}

/* ── The login / signup switch ─────────────────────────────────────────────── */
.fb-auth-switch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .25rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(24, 24, 27, .7);
  padding: .25rem;
}

/* The active pill sits UNDER the labels and animates on load — a pop, not a slide,
 * so it cannot mis-measure in RTL. */
.fb-auth-switch-pill {
  position: absolute;
  inset-block: .25rem;
  inset-inline-start: .25rem;
  width: calc(50% - .375rem);
  border-radius: 9999px;
  background: #552bcd;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

@media (prefers-reduced-motion: no-preference) {
  .fb-auth-switch-pill { animation: fbAuthPop .19s both; }
}

@keyframes fbAuthPop {
  from { transform: scale(.94); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.fb-auth-switch-link {
  position: relative;
  z-index: 1;
  display: block;
  padding: .5rem .75rem;
  border-radius: 9999px;
  text-align: center;
  font-size: .875rem;
  font-weight: 600;
  color: #a1a1aa;
  text-decoration: none;
  transition: color .15s ease;
}

.fb-auth-switch-link:hover { color: #fff; }
.fb-auth-switch-link.is-active { color: #fff; }

/* ── The form ──────────────────────────────────────────────────────────────── */
.fb-auth-title {
  margin: 2rem 0 0;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.fb-auth-sub {
  margin: .5rem 0 0;
  font-size: .875rem;
  line-height: 1.6;
  color: #a1a1aa;
}

.fb-auth-alert,
.fb-auth-note {
  margin-block-start: 1.25rem;
  border-radius: .75rem;
  padding: .75rem 1rem;
  font-size: .875rem;
  line-height: 1.6;
}

.fb-auth-alert { background: rgba(239, 68, 68, .1); color: #fca5a5; }
.fb-auth-note  { background: rgba(85, 43, 205, .12); color: #c4b5fd; }

.fb-auth-form {
  margin-block-start: 1.5rem;
  display: grid;
  gap: 1rem;
}

.fb-auth-field { display: block; }

.fb-auth-label {
  display: block;
  margin-block-end: .375rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #71717a;
}

.fb-auth-input-wrap {
  position: relative;
  display: block;
}

.fb-auth-input-icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: .875rem;
  transform: translateY(-50%);
  pointer-events: none;
  color: #52525b;
}

.fb-auth-input {
  width: 100%;
  border-radius: .75rem;
  border: 1px solid rgba(255, 255, 255, .1);
  background: #09090b;
  padding: .625rem .75rem .625rem 2.5rem;
  font-size: .875rem;
  color: #f4f4f5;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* RTL: the icon flips sides, so the padding that clears it must flip too. */
[dir="rtl"] .fb-auth-input {
  padding: .625rem 2.5rem .625rem .75rem;
}

.fb-auth-input::placeholder { color: #52525b; }

.fb-auth-input:focus {
  outline: none;
  border-color: rgba(85, 43, 205, .6);
  box-shadow: 0 0 0 3px rgba(85, 43, 205, .18);
}

/* The password field carries the toggle button. */
.fb-auth-input-pw { padding-inline-end: 2.75rem !important; }

.fb-auth-eye {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: .75rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .25rem;
  border: 0;
  background: transparent;
  color: #71717a;
  cursor: pointer;
  transition: color .15s ease;
}

.fb-auth-eye:hover { color: #fff; }

.fb-auth-submit {
  margin-block-start: .25rem;
  width: 100%;
  min-height: 2.75rem;
  border: 0;
  border-radius: .75rem;
  background: #552bcd;
  padding: .75rem 1rem;
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: filter .15s ease, transform .1s ease, box-shadow .15s ease;
}

.fb-auth-submit:hover { filter: brightness(1.1); box-shadow: 0 8px 24px -12px rgba(85, 43, 205, .8); }
.fb-auth-submit:active { transform: scale(.985); }
.fb-auth-submit:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }

.fb-auth-swap {
  margin: 1.25rem 0 0;
  text-align: center;
  font-size: .875rem;
  color: #71717a;
}

.fb-auth-swap a {
  color: #a78bfa;
  font-weight: 600;
  text-decoration: none;
}

.fb-auth-swap a:hover { text-decoration: underline; }

.fb-auth-hint {
  display: block;
  margin-block-start: .4rem;
  font-size: .78rem;
  line-height: 1.7;
  color: #71717a;
}

.fb-auth-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.fb-auth-roles {
  display: grid;
  gap: .5rem;
}

@media (min-width: 480px) {
  .fb-auth-roles { grid-template-columns: 1fr 1fr; }
}

.fb-auth-role {
  display: flex;
  align-items: center;
  gap: .5rem;
  border-radius: .75rem;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(9, 9, 11, .6);
  padding: .7rem .8rem;
  font-size: .82rem;
  color: #d4d4d8;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

/* `:has()` lets the CARD show the selection, which is a background change rather
 * than an animated stroke — the owner's rule against hover strokes still holds. */
.fb-auth-role:has(input:checked) {
  border-color: rgba(85, 43, 205, .55);
  background: rgba(85, 43, 205, .1);
}

.fb-auth-role input { accent-color: #552bcd; }

.fb-auth-legal { margin-block-start: .25rem; }

.fb-auth-legal-row {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .82rem;
  line-height: 1.8;
  color: #a1a1aa;
  cursor: pointer;
}

.fb-auth-legal-row input { margin-block-start: .35rem; accent-color: #552bcd; }

.fb-auth-legal-link {
  color: #a78bfa;
  font-weight: 600;
  text-decoration: none;
}

.fb-auth-legal-link:hover { text-decoration: underline; }

/* On the signup page the active pill sits in the SECOND column. */
.fb-auth-switch-pill-end {
  inset-inline-start: calc(50% + .125rem);
}

.fb-auth-terms {
  margin: 1.5rem 0 0;
  border-block-start: 1px solid rgba(255, 255, 255, .05);
  padding-block-start: 1.25rem;
  text-align: center;
  font-size: .75rem;
  line-height: 1.7;
  color: #52525b;
}

/* ── Desktop: two panes, one seam ──────────────────────────────────────────── */
@media (min-width: 1024px) {
  .fb-auth { flex-direction: row; }
  .fb-auth-brand { width: 44%; padding: 3rem; }
  .fb-auth-form-pane { padding: 3rem 2rem; }

  /* The vertical seam replaces the horizontal one. */
  .fb-seam-end,
  .fb-seam-start { display: block; }
  .fb-seam-bottom,
  .fb-seam-top { display: none; }

  .fb-auth-paynote { display: flex; }
  .fb-auth-footer { display: block; }
  .fb-auth-headline { font-size: 2.1rem; }
}

/* ── Motion & Animation System (Compositor only, 150-340ms) ─────────────── */

@keyframes fbShake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-4px, 0, 0); }
  40% { transform: translate3d(4px, 0, 0); }
  60% { transform: translate3d(-3px, 0, 0); }
  80% { transform: translate3d(3px, 0, 0); }
}

.fb-shake,
.animate-shake {
  animation: fbShake 320ms cubic-bezier(0.36, 0.07, 0.19, 0.97) 1;
}

@keyframes fbBoxIn {
  from {
    opacity: 0.65;
    transform: scale(0.96);
  }
}

.fb-box-in {
  animation: fbBoxIn 150ms cubic-bezier(0.16, 1, 0.3, 1) 1;
}

@keyframes fbFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade-in {
  animation: fbFadeIn 200ms ease-out both;
}

@keyframes fbFadeUp {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.animate-fade-up {
  animation: fbFadeUp 340ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes fbPop {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-pop {
  animation: fbPop 190ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-modal-in {
  animation: modalIn 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Remove default webkit marker across all summary elements */
summary::-webkit-details-marker {
  display: none !important;
}

/* Card press dim feedback — does not deform the card geometry */
@keyframes fbCardTint {
  0% { opacity: 0; }
  45% { opacity: 1; }
  100% { opacity: 0; }
}

a[href][class~="group/card"]:not(.no-press):active {
  animation: none;
}

.fb-card-tint {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  border-radius: inherit;
  background: rgb(9 9 11 / 0.16);
  opacity: 0;
}

a[href][class~="group/card"]:not(.no-press):active > .fb-card-tint {
  animation: fbCardTint 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Password strength indicators & step bars */
.strength-weak { background-color: #ef4444 !important; }
.strength-okay { background-color: #fbbf24 !important; }
.strength-good { background-color: #8f66f5 !important; }
.strength-strong { background-color: #552bcd !important; }

/* Motion is decoration here: honour a reduced-motion preference by removing it. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}