/*
 * ── Design System Tokens ──────────────────────────────
 *
 * TYPE SCALE (rem, base 16px)
 *   --text-xs    0.75rem   12px   Labels, badges, fine print
 *   --text-sm    0.85rem   ~14px  Secondary text, notes, captions
 *   --text-base  1rem      16px   Body text (default)
 *   --text-lg    1.15rem   ~18px  Subheadings, emphasized text
 *   --text-xl    1.3rem    ~21px  Section headings
 *   --text-2xl   1.6rem    ~26px  Page headings
 *   --text-3xl   2rem      32px   Hero headings
 *
 * LINE HEIGHT
 *   --leading-tight    1.15   Headings
 *   --leading-normal   1.5    Body text
 *   --leading-relaxed  1.65   Long-form content
 *
 * SPACING SCALE (4px base grid)
 *   --space-1    0.25rem   4px
 *   --space-2    0.5rem    8px
 *   --space-3    0.75rem   12px
 *   --space-4    1rem      16px
 *   --space-5    1.25rem   20px
 *   --space-6    1.5rem    24px
 *   --space-8    2rem      32px
 *   --space-10   2.5rem    40px
 *   --space-12   3rem      48px
 *   --space-16   4rem      64px
 *
 * RADIUS
 *   --radius-xs    6px    Small chips, badges
 *   --radius-sm    10px   Inputs, buttons
 *   --radius-md    12px   Cards, dropdowns
 *   --radius-lg    14px   Panels, modals
 *   --radius-pill  9999px Toggle switches, pills
 *
 * BREAKPOINTS (reference only — CSS can't use vars in @media)
 *   sm   640px    Mobile landscape / small tablet
 *   md   768px    Tablet portrait
 *   lg   1024px   Desktop / tablet landscape
 *   xl   1280px   Wide desktop
 *
 * COLOR TOKENS — see :root and [data-theme="dark"] blocks below
 *   Text:    --text (primary), --text-secondary (muted), --text-tertiary (faint), --text-disabled
 *            Legacy aliases: --muted = --text-secondary, --text-mid = --text-tertiary, --text-faint = --text-disabled
 *   Surface: --bg, --panel-bg, --surface-elevated, --surface-dim
 *   Border:  --border, --input-bg, --input-border
 *   Status:  --success, --danger, --warning, --info (with -bg, -border variants)
 *   Interactive: --accent-hover, --accent-active, --danger-hover, --surface-hover
 */

/* ── Light mode (default) ────────────────────────────── */
:root {
  color-scheme: light dark;
  font-family: 'Manrope', sans-serif;
  --font-family: 'Manrope', sans-serif;

  /* Type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.85rem;
  --text-base: 1rem;
  --text-lg: 1.15rem;
  --text-xl: 1.3rem;
  --text-2xl: 1.6rem;
  --text-3xl: 2rem;
  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Spacing scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Radius – sharp, modern corners */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-pill: 9999px;

  /* Breakpoints (for reference — CSS can't use vars in media queries) */
  /* --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; */

  /* Timing */
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 350ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

  /* Backgrounds */
  --bg: linear-gradient(135deg, #e7e7e7 0%, #e7e7e7 20%, #f6d4e8 60%, #ffffff 100%);
  --card-color: rgba(255, 255, 255, 0.9);
  --panel-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 239, 247, 0.9));
  --panel-border: rgba(236, 72, 153, 0.16);
  --panel-shadow: 0 2px 12px rgba(212, 217, 236, 0.28);

  /* Text */
  --text: #0f172a;
  --muted: #475569;

  /* Accent – pink */
  --accent: #f39bc7;
  --accent-strong: #db2777;
  --accent-gradient: linear-gradient(135deg, #8a0045a3 0%, #f39bc7 10%, #ec4899 65%, #8a0045 100%);
  --accent-gradient-soft: linear-gradient(135deg, rgba(244, 114, 182, 0.35), rgba(190, 24, 93, 0.12));
  --accent-gradient-faint: linear-gradient(135deg, rgba(244, 114, 182, 0.22), rgba(190, 24, 93, 0.06));

  /* Ghost / Chip */
  --ghost-bg: var(--accent-gradient-faint);
  --ghost-border: rgba(236, 72, 153, 0.22);
  --shadow: 0 2px 12px rgba(212, 217, 236, 0.28);
  --chip-bg: var(--accent-gradient-faint);

  /* Surfaces */
  --surface: #ffffff;
  --surface-dim: rgba(255, 255, 255, 0.72);
  --surface-elevated: rgba(255, 255, 255, 0.92);
  --border: rgba(31, 41, 55, 0.08);
  --divider-strong: rgba(31, 41, 55, 0.22);
  --menu-bg: #ffffff;
  --border-accent: rgba(236, 72, 153, 0.18);
  --input-bg: rgba(255, 255, 255, 0.9);
  --input-border: rgba(236, 72, 153, 0.18);
  --overlay: rgba(255, 255, 255, 0.75);
  --glow: rgba(236, 72, 153, 0.12);
  --glow-strong: rgba(236, 72, 153, 0.32);
  --text-secondary: var(--muted);
  --text-tertiary: rgba(31, 41, 55, 0.72);
  --text-disabled: rgba(31, 41, 55, 0.40);
  --text-on-surface: rgba(31, 41, 55, 0.92);
  --text-faint: var(--text-disabled);
  --text-mid: var(--text-tertiary);
  --line: rgba(31, 41, 55, 0.12);

  /* Semantic status */
  --success: #047857;
  --success-bg: rgba(4, 120, 87, 0.10);
  --success-border: rgba(4, 120, 87, 0.25);
  --danger: #b91c1c;
  --danger-bg: rgba(185, 28, 28, 0.08);
  --danger-border: rgba(185, 28, 28, 0.25);
  --warning: #b45309;
  --warning-bg: rgba(180, 83, 9, 0.08);
  --warning-border: rgba(180, 83, 9, 0.25);
  --info: #1d4ed8;
  --info-bg: rgba(29, 78, 216, 0.08);
  --info-border: rgba(29, 78, 216, 0.25);

  /* Interactive hover/active */
  --accent-hover: #be185d;
  --accent-active: #9d174d;
  --danger-hover: #991b1b;
  --surface-hover: rgba(0, 0, 0, 0.04);
}

/* ── Dark mode ───────────────────────────────────────── */
/* ── Dark mode tokens ────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0c0c18;
    --card-color: rgba(255, 255, 255, 0.035);
    --panel-bg: rgba(255, 255, 255, 0.04);
    --panel-border: rgba(255, 255, 255, 0.07);
    --panel-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --text: #f1f5f9;
    --muted: #94a3b8;
    --accent: #f472b6;
    --accent-strong: #ec4899;
    --accent-gradient: linear-gradient(135deg, #be185d 0%, #ec4899 50%, #db2777 100%);
    --accent-gradient-soft: linear-gradient(135deg, rgba(236, 72, 153, 0.22), rgba(190, 24, 93, 0.08));
    --accent-gradient-faint: linear-gradient(135deg, rgba(236, 72, 153, 0.10), rgba(190, 24, 93, 0.04));
    --ghost-bg: rgba(255, 255, 255, 0.04);
    --ghost-border: rgba(255, 255, 255, 0.08);
    --shadow: 0 1px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --chip-bg: rgba(236, 72, 153, 0.08);
    --surface: rgba(255, 255, 255, 0.05);
    --surface-dim: rgba(255, 255, 255, 0.025);
    --surface-elevated: rgba(255, 255, 255, 0.045);
    --border: rgba(255, 255, 255, 0.07);
    --divider-strong: rgba(255, 255, 255, 0.16);
    --menu-bg: #1a1a2e;
    --border-accent: rgba(255, 255, 255, 0.10);
    --input-bg: rgba(255, 255, 255, 0.05);
    --input-border: rgba(255, 255, 255, 0.10);
    --overlay: rgba(0, 0, 0, 0.6);
    --glow: rgba(236, 72, 153, 0.06);
    --glow-strong: rgba(236, 72, 153, 0.18);
    --text-secondary: var(--muted);
    --text-tertiary: rgba(255, 255, 255, 0.60);
    --text-disabled: rgba(255, 255, 255, 0.40);
    --text-on-surface: rgba(255, 255, 255, 0.92);
    --text-faint: var(--text-disabled);
    --text-mid: var(--text-tertiary);
    --line: rgba(255, 255, 255, 0.07);
    --success: #34d399;
    --success-bg: rgba(52, 211, 153, 0.10);
    --success-border: rgba(52, 211, 153, 0.25);
    --danger: #f87171;
    --danger-bg: rgba(248, 113, 113, 0.10);
    --danger-border: rgba(248, 113, 113, 0.25);
    --warning: #fbbf24;
    --warning-bg: rgba(251, 191, 36, 0.10);
    --warning-border: rgba(251, 191, 36, 0.25);
    --info: #60a5fa;
    --info-bg: rgba(96, 165, 250, 0.10);
    --info-border: rgba(96, 165, 250, 0.25);
    --accent-hover: #f472b6;
    --accent-active: #ec4899;
    --danger-hover: #fca5a5;
    --surface-hover: rgba(255, 255, 255, 0.06);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0c18;
  --card-color: rgba(255, 255, 255, 0.035);
  --panel-bg: rgba(255, 255, 255, 0.04);
  --panel-border: rgba(255, 255, 255, 0.07);
  --panel-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --text: #f1f5f9;
  --muted: #94a3b8;
  --accent: #f472b6;
  --accent-strong: #ec4899;
  --accent-gradient: linear-gradient(135deg, #be185d 0%, #ec4899 50%, #db2777 100%);
  --accent-gradient-soft: linear-gradient(135deg, rgba(236, 72, 153, 0.22), rgba(190, 24, 93, 0.08));
  --accent-gradient-faint: linear-gradient(135deg, rgba(236, 72, 153, 0.10), rgba(190, 24, 93, 0.04));
  --ghost-bg: rgba(255, 255, 255, 0.04);
  --ghost-border: rgba(255, 255, 255, 0.08);
  --shadow: 0 1px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --chip-bg: rgba(236, 72, 153, 0.08);
  --surface: rgba(255, 255, 255, 0.05);
  --surface-dim: rgba(255, 255, 255, 0.025);
  --surface-elevated: rgba(255, 255, 255, 0.045);
  --border: rgba(255, 255, 255, 0.07);
  --divider-strong: rgba(255, 255, 255, 0.16);
  --menu-bg: #1a1a2e;
  --border-accent: rgba(255, 255, 255, 0.10);
  --input-bg: rgba(255, 255, 255, 0.05);
  --input-border: rgba(255, 255, 255, 0.10);
  --overlay: rgba(0, 0, 0, 0.6);
  --glow: rgba(236, 72, 153, 0.06);
  --glow-strong: rgba(236, 72, 153, 0.18);
  --text-secondary: var(--muted);
  --text-tertiary: rgba(255, 255, 255, 0.60);
  --text-disabled: rgba(255, 255, 255, 0.40);
  --text-on-surface: rgba(255, 255, 255, 0.92);
  --text-faint: var(--text-disabled);
  --text-mid: var(--text-tertiary);
  --line: rgba(255, 255, 255, 0.07);
  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.10);
  --success-border: rgba(52, 211, 153, 0.25);
  --danger: #f87171;
  --danger-bg: rgba(248, 113, 113, 0.10);
  --danger-border: rgba(248, 113, 113, 0.25);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.10);
  --warning-border: rgba(251, 191, 36, 0.25);
  --info: #60a5fa;
  --info-bg: rgba(96, 165, 250, 0.10);
  --info-border: rgba(96, 165, 250, 0.25);
  --accent-hover: #f472b6;
  --accent-active: #ec4899;
  --danger-hover: #fca5a5;
  --surface-hover: rgba(255, 255, 255, 0.06);
}

/* ── Reset ───────────────────────────────────────────── */
* {
  box-sizing: border-box;
}

select {
  color: var(--text);
  background: var(--input-bg);
}

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
}

:where(input, textarea, select):focus-visible {
  box-shadow: 0 0 0 4px var(--glow);
}

/* ── Icon font ───────────────────────────────────────── */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
  font-size: 0;
  line-height: 1;
}

.material-symbols-rounded::before {
  content: attr(data-icon);
  font-size: 1.05rem;
  line-height: 1;
  opacity: 0;
}

.icons-ready .material-symbols-rounded::before {
  opacity: 1;
}

.nav-link,
.btn,
.avatar-link {
  gap: 0.4rem;
}

/* ── Button component ─────────────────────────────────
   `.btn` and its variants were defined only in home.css and account.css, so every other
   page that used the class — legal, the help center, the feature pages — rendered its
   buttons as plain underlined links. The base component belongs in the stylesheet every
   page loads. home.css and account.css still carry their own copies and, loading after
   this one, still win where they differ; the duplication is worth collapsing separately. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1.7rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 700;
  border: 1px solid transparent;
  background-clip: padding-box;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.btn--primary {
  background: var(--accent-gradient);
  border: 0;
  color: #fff;
  box-shadow: 0 4px 14px var(--glow-strong);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px var(--glow-strong);
}

.btn--ghost {
  background: var(--surface-dim);
  border-color: var(--border);
  color: var(--text);
}

.btn--ghost:hover {
  background: var(--surface-elevated);
}

.nav-link .material-symbols-rounded,
.btn .material-symbols-rounded,
.avatar-link .material-symbols-rounded {
  font-size: 1.05rem;
}

/* ── Brand bar ───────────────────────────────────────── */
.portal-brand {
  max-width: var(--brand-width, 1080px);
  margin: 0 auto;
  padding: var(--brand-padding, 2.5rem 1.5rem 0);
  margin-bottom: var(--brand-gap, 0);
  display: flex;
  justify-content: var(--brand-justify, flex-start);
  align-items: center;
}

.portal-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: var(--logo-padding, 0.55rem 0.9rem);
  border-radius: var(--radius-md);
  background: var(--logo-bg, var(--surface-elevated));
  border: 1px solid var(--logo-border, var(--border-accent));
  box-shadow: var(--logo-shadow, var(--shadow));
  text-decoration: none;
  transition: transform 160ms ease;
}

.portal-logo:hover {
  transform: translateY(-1px);
}

.portal-logo img {
  height: var(--logo-height, 30px);
  width: auto;
  display: block;
}

/* Default: show the full wordmark logo, hide the hand-only mark. Narrow
   viewports swap these (see the portal header media query). */
.portal-logo__mark {
  display: none;
}

.portal-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.portal-header-title {
  display: none;
}

/* ── Nav links ───────────────────────────────────────── */
.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
  background: var(--surface-elevated);
  box-shadow: none;
  transition: transform 160ms ease, background 160ms ease;
}

.nav-link:hover {
  transform: translateY(-1px);
}

.nav-link--primary {
  background: var(--accent-gradient);
  color: #fff;
  border: none;
  box-shadow: 0 4px 14px var(--glow-strong);
}

.nav-link--ghost {
  background: var(--ghost-bg);
  border-color: var(--ghost-border);
  color: var(--text);
}

.theme-toggle {
  padding: 0.45rem 0.65rem;
}

.theme-toggle .material-symbols-rounded::before {
  font-size: 1.15rem;
}

/* ── Avatar menu ─────────────────────────────────────── */
.avatar-menu {
  position: relative;
}

.avatar-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-sm);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  box-shadow: none;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  min-width: 0;
}

.avatar-trigger:hover {
  transform: translateY(-1px);
}

.avatar-circle {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

/* Cap and ellipsize the label so a long email can't grow the pill into the
   centered header title. The circle + caret never shrink; only the text clips. */
.avatar-label {
  font-size: 0.9rem;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar-caret {
  flex-shrink: 0;
  color: var(--muted);
}

.avatar-dropdown {
  position: absolute;
  right: 0;
  margin-top: 0.5rem;
  background: var(--menu-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  padding: 0.4rem;
  min-width: 100%;
  display: none;
  flex-direction: column;
  z-index: 10;
}

.avatar-dropdown.open {
  display: flex;
}

.avatar-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.65rem;
  border: none;
  background: transparent;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.avatar-link:hover {
  background: var(--ghost-bg);
}

.avatar-link--ghost {
  text-align: left;
}

.avatar-dropdown__divider {
  height: 1px;
  background: var(--line);
  margin: 0.3rem 0;
}

.avatar-dropdown__label {
  padding: 0.4rem 0.75rem 0.2rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
  font-weight: 600;
}

/* ── Footer ──────────────────────────────────────────── */
.site-footer {
  width: 100%;
  margin-top: 3rem;
  padding: 2.5rem 1.5rem 3rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.site-footer__inner {
  max-width: var(--brand-width, 1080px);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  border-top: 1px solid var(--panel-border);
  padding-top: 1.5rem;
}

.site-footer__brand {
  font-weight: 600;
  color: var(--text);
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}

.site-footer__nav a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
}

.site-footer__nav a:hover {
  color: var(--text);
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
  .portal-brand {
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
  }

  .portal-nav {
    width: 100%;
    margin-left: 0;
    justify-content: center;
  }

  .avatar-trigger {
    padding: 0.4rem 0.7rem;
  }

  .avatar-label {
    max-width: 10rem;
  }
}

/* ── Mobile touch targets ────────────────────────────── */
@media (max-width: 768px) {
  .btn {
    min-height: 44px;
  }

  .nav-link {
    min-height: 44px;
    padding: 0.55rem 1rem;
  }

  .avatar-link {
    min-height: 44px;
    padding: 0.7rem 0.75rem;
  }

  .app-modal__dialog {
    max-width: 96vw;
    max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    margin-top: auto;
    align-self: flex-end;
  }

  .app-modal {
    align-items: flex-end;
  }

  .toast-container {
    left: var(--space-3);
    right: var(--space-3);
    bottom: var(--space-3);
  }

  .toast {
    max-width: none;
  }
}

/* ── Bottom sheet (mobile action menus) ──────────────── */
@media (max-width: 640px) {
  .avatar-dropdown {
    position: fixed;
    inset: auto 0 0 0;
    right: 0;
    margin-top: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-width: none;
    padding: var(--space-4) var(--space-4) var(--space-6);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.2);
    z-index: 50;
  }

  .avatar-dropdown::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 9999px;
    background: var(--line);
    margin: 0 auto var(--space-3);
  }
}

/* ── Animation utilities ─────────────────────────────── */
.fade-in {
  animation: ui-fade-in var(--duration-slow) var(--ease-out) both;
}

.slide-up {
  animation: ui-slide-up 600ms var(--ease-out) both;
}

.stagger-children > * {
  animation: ui-slide-up 600ms var(--ease-out) both;
}

.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 120ms; }
.stagger-children > *:nth-child(3) { animation-delay: 240ms; }
.stagger-children > *:nth-child(4) { animation-delay: 360ms; }
.stagger-children > *:nth-child(5) { animation-delay: 480ms; }
.stagger-children > *:nth-child(6) { animation-delay: 600ms; }
.stagger-children > *:nth-child(7) { animation-delay: 720ms; }
.stagger-children > *:nth-child(8) { animation-delay: 840ms; }
.stagger-children > *:nth-child(9) { animation-delay: 960ms; }
.stagger-children > *:nth-child(10) { animation-delay: 1080ms; }
.stagger-children > *:nth-child(11) { animation-delay: 1200ms; }
.stagger-children > *:nth-child(12) { animation-delay: 1320ms; }
.stagger-children > *:nth-child(13) { animation-delay: 1440ms; }
.stagger-children > *:nth-child(14) { animation-delay: 1560ms; }
.stagger-children > *:nth-child(15) { animation-delay: 1680ms; }
.stagger-children > *:nth-child(16) { animation-delay: 1800ms; }
.stagger-children > *:nth-child(17) { animation-delay: 1920ms; }
.stagger-children > *:nth-child(18) { animation-delay: 2040ms; }
.stagger-children > *:nth-child(19) { animation-delay: 2160ms; }
.stagger-children > *:nth-child(20) { animation-delay: 2280ms; }

@keyframes ui-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ui-slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ui-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

@keyframes ui-check-draw {
  to { stroke-dashoffset: 0; }
}

/* Success / error feedback classes */
.shake {
  animation: ui-shake 300ms ease;
}

.flash-success {
  animation: ui-flash-success 600ms var(--ease-out) both;
}

.flash-error {
  animation: ui-flash-error 600ms var(--ease-out) both;
}

@keyframes ui-flash-success {
  0% { box-shadow: 0 0 0 0 var(--success); }
  30% { box-shadow: 0 0 0 4px var(--success-bg); }
  100% { box-shadow: none; }
}

@keyframes ui-flash-error {
  0% { box-shadow: 0 0 0 0 var(--danger); }
  30% { box-shadow: 0 0 0 4px var(--danger-bg); }
  100% { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .slide-up,
  .stagger-children > * {
    animation: none !important;
  }
}

/* ── Button interaction feedback ─────────────────────── */
.btn:active:not([disabled]) {
  transform: scale(0.97);
  transition-duration: var(--duration-fast);
}

.nav-link:active,
.avatar-trigger:active,
.avatar-link:active {
  transform: scale(0.97);
  transition-duration: var(--duration-fast);
}

/* ── Skeleton loaders ────────────────────────────────── */
.skeleton {
  background: var(--surface-dim);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--surface-elevated) 50%,
    transparent 100%
  );
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.skeleton-line {
  height: 0.85rem;
  width: 100%;
  border-radius: var(--radius-xs);
}

.skeleton-line--short {
  width: 60%;
}

.skeleton-line--xs {
  width: 35%;
}

.skeleton-stat {
  height: 5rem;
  border-radius: var(--radius-md);
}

.skeleton-card {
  height: 8rem;
  border-radius: var(--radius-md);
}

.skeleton-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

@keyframes skeleton-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
  }
}

/* ── Toast notifications ─────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-3);
  z-index: 9999;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 600;
  max-width: 380px;
  animation: toast-in var(--duration-slow) var(--ease-out) both;
  backdrop-filter: blur(12px);
}

.toast--success {
  border-color: var(--success-border);
  background: var(--success-bg);
  color: var(--success);
}

.toast__check {
  flex-shrink: 0;
}

.toast--error {
  border-color: var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger);
}

.toast--warning {
  border-color: var(--warning-border);
  background: var(--warning-bg);
  color: var(--warning);
}

.toast--info {
  border-color: var(--info-border);
  background: var(--info-bg);
  color: var(--info);
}

.toast.is-exiting {
  animation: toast-out var(--duration-normal) var(--ease-in-out) both;
}

.toast__dismiss {
  margin-left: auto;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  opacity: 0.5;
  cursor: pointer;
  font-size: var(--text-lg);
  line-height: 1;
}

.toast__dismiss:hover {
  opacity: 1;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(8px) scale(0.96); }
}

@media (max-width: 480px) {
  .toast-container {
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
  }

  .toast {
    max-width: none;
  }
}

/* ── Copy tooltip ────────────────────────────────────── */
.copy-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-strong);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-xs);
  white-space: nowrap;
  pointer-events: none;
  animation: copy-tooltip-fade 1.2s ease forwards;
  z-index: 50;
}

@keyframes copy-tooltip-fade {
  0% { opacity: 0; transform: translateX(-50%) translateY(4px); }
  15% { opacity: 1; transform: translateX(-50%) translateY(0); }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Pull-to-refresh ─────────────────────────────────── */
.pull-to-refresh-indicator {
  height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: height 200ms ease, opacity 200ms ease;
  color: var(--muted);
}

.pull-to-refresh-indicator.is-ready {
  color: var(--accent-strong);
}

.pull-to-refresh-indicator.is-refreshing {
  height: 40px !important;
  opacity: 1 !important;
}

.pull-to-refresh-indicator.is-refreshing .material-symbols-rounded {
  animation: ptr-spin 800ms linear infinite;
}

@keyframes ptr-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── Scrollbar ───────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

/* Proactive tier-gating (G1): locked-feature affordance + upgrade modal.
   Locked elements stay clickable (no pointer-events:none) so entitlements.js can swallow the
   activation into the upsell modal; they're dimmed and carry a tier badge. */
.is-tier-locked {
  position: relative;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.is-tier-locked:hover,
.is-tier-locked:focus-within {
  opacity: 0.8;
}
.tier-lock-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 9px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent-gradient, var(--accent-strong, #db2777));
  border-radius: var(--radius-pill, 9999px);
  vertical-align: middle;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(190, 24, 93, 0.25);
}
.tier-lock-badge--lg {
  margin: 0 0 8px;
  padding: 4px 14px;
  font-size: 0.72rem;
}
.upgrade-modal__header {
  text-align: center;
}
.upgrade-modal__header h3 {
  margin: 4px 0 6px;
}

/* Usage meter (G1): "X of Y used" chip for limit-based caps (portals/products/contacts/seats). */
.usage-meter {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted, #475569);
  background: var(--chip-bg, rgba(244, 114, 182, 0.12));
  border: 1px solid var(--panel-border, rgba(236, 72, 153, 0.16));
  border-radius: var(--radius-pill, 9999px);
  vertical-align: middle;
  white-space: nowrap;
}
.usage-meter--full {
  color: #fff;
  background: var(--accent-gradient, var(--accent-strong, #db2777));
  border-color: transparent;
}