*, *::before, *::after { box-sizing: border-box; }
:root { --bg-base: #fafafa; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #18181b;
  background: #fafafa;
  min-height: 100dvh;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font-family: inherit; }
a { color: inherit; }

/* layout */
.page {
  min-height: 100dvh;
  background: linear-gradient(135deg, #fafafa 0%, #ffffff 50%, #f4f4f5 100%);
}
.container {
  max-width: 80rem;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) { .container { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .container { padding-left: 2rem; padding-right: 2rem; } }

header.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding-top: 1.5rem;
  padding-bottom: 0.75rem;
}
.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.brand-svg { width: 40px; height: 40px; }
.brand-name { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.025em; color: #18181b; }
.brand-name .muted { color: #a1a1aa; }
.source-link {
  font-size: 1rem;
  font-weight: 600;
  color: #52525b;
  text-decoration: none;
  transition: color 0.15s;
}
.source-link:hover { color: #18181b; }
.bar-start { display: flex; align-items: center; gap: 1.25rem; }
.bar-end { display: flex; align-items: center; gap: 1rem; }
/* Primary nav links sit inline on desktop; on mobile they collapse into the
   hamburger (.nav-toggle), which is hidden here and revealed below. */
.bar-links { display: flex; align-items: center; gap: 1.25rem; }
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  border: 1px solid #e4e4e7;
  background: #ffffff;
  color: #52525b;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.nav-toggle:hover { background: #f4f4f5; color: #18181b; transform: scale(1.06); }
.nav-toggle[aria-expanded="true"] { border-color: #6366f1; color: #6366f1; }
:root[data-theme="dark"] .nav-toggle { border-color: #3f3f46; background: #18181b; color: #d4d4d8; }
:root[data-theme="dark"] .nav-toggle:hover { background: #27272a; color: #fafafa; }
:root[data-theme="dark"] .nav-toggle[aria-expanded="true"] { border-color: #818cf8; color: #818cf8; }

/* Mobile: collapse the primary nav links behind the hamburger so the bar stays
   a single tidy row. The links drop down as an absolutely-positioned panel
   anchored under the bar (out of flow, so they don't change the header height
   that card.js/studio.js measure into --header-h). */
@media (max-width: 767px) {
  header.bar { position: relative; flex-wrap: nowrap; column-gap: 0.5rem; }
  /* Reclaim horizontal room so the whole bar — including the rightmost account
     avatar — fits one row on narrow phones. The logo stays clickable; only the
     decorative wordmark is dropped. The avatar must never shrink, or it gets
     squashed/clipped off the right edge (users couldn't reach "My account"). */
  .brand-name { display: none; }
  .bar-start { gap: 0.625rem; }
  .bar-end { gap: 0.5rem; }
  .avatar { flex: none; }
  .nav-toggle { display: inline-flex; }
  .bar-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    flex-direction: column;
    align-items: stretch;
    gap: 0.375rem;
    min-width: 12rem;
    max-width: calc(100vw - 2rem);
    margin-top: 0.25rem;
    padding: 0.5rem;
    border-radius: 1rem;
    border: 1px solid #e4e4e7;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  }
  .bar-links.is-open { display: flex; }
  .bar-links .btn-nav { text-align: center; }
  :root[data-theme="dark"] .bar-links {
    background: #18181b;
    border-color: #27272a;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  }
}

/* Desktop: pack every bar item into one continuous, flush-left row. Flattening
   the wrappers (display:contents) lets the items fill the row left-to-right and
   wrap as a single flow only when genuinely out of room — instead of a left nav
   cluster and a right account cluster that wrapped independently and left a big
   dead gap in the middle (which forced buttons onto a second row). */
@media (min-width: 768px) {
  header.bar { justify-content: flex-start; flex-wrap: wrap; column-gap: 0.375rem; row-gap: 0.5rem; }
  .bar-start, .bar-end, .bar-links { display: contents; }
  .btn-nav { padding-left: 0.75rem; padding-right: 0.75rem; }
  /* The account avatar always closes the row; give it a touch of breathing room
     from the theme toggle without widening the whole bar. */
  .user-menu { margin-left: 0.25rem; }
  /* The logged-out bar only has the brand and the auth actions, so the flush-left
     flattening above isn't wanted: keep the brand on the left and push the
     sign-in / create-account buttons to the right. */
  header.bar.bar-guest { justify-content: space-between; }
  header.bar.bar-guest .bar-start, header.bar.bar-guest .bar-end { display: flex; }
}
.btn-nav {
  background: #18181b;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.btn-nav:hover { background: #3f3f46; }
.btn-nav.is-active {
  background: #6366f1;
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.4), 0 1px 2px rgba(0, 0, 0, 0.08);
}
.btn-nav.is-active:hover { background: #4f46e5; }

/* Give-feedback CTA — solid indigo pill. Reads as a clear secondary action,
   bolder than the old pale chip but calmer than the gradient+sparkle CTAs. */
.btn-feedback {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #ffffff;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  border: 1px solid transparent;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
.btn-feedback:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(99, 102, 241, 0.5); filter: brightness(1.06); }
.btn-feedback svg { flex: none; }
.btn-feedback.is-active { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7), 0 2px 8px rgba(99, 102, 241, 0.4); }
:root[data-theme="dark"] .btn-feedback { background: linear-gradient(135deg, #4f46e5, #4338ca); box-shadow: 0 2px 8px rgba(79, 70, 229, 0.5); }
:root[data-theme="dark"] .btn-feedback:hover { box-shadow: 0 5px 16px rgba(79, 70, 229, 0.65); }
:root[data-theme="dark"] .btn-feedback.is-active { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), 0 2px 8px rgba(79, 70, 229, 0.5); }

/* Upgrade CTA — animated gradient pill with twinkling stars to draw the eye. */
/* Two prominent gradient CTAs that share the same shimmer + sparkle treatment;
   only the palette differs (upgrade = violet, invite = green). */
.btn-upgrade, .btn-invite {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  background-size: 220% 100%;
  animation: upgrade-shift 6s ease-in-out infinite;
}
.btn-upgrade {
  background: linear-gradient(110deg, #6366f1, #a855f7 42%, #ec4899 74%, #f59e0b);
  box-shadow: 0 2px 10px rgba(168, 85, 247, 0.45);
}
.btn-invite {
  background: linear-gradient(110deg, #047857, #10b981 42%, #34d399 74%, #84cc16);
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.45);
}
.btn-upgrade:hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 5px 18px rgba(168, 85, 247, 0.6); }
.btn-invite:hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 5px 18px rgba(16, 185, 129, 0.6); }
.btn-upgrade.is-active { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7), 0 2px 10px rgba(168, 85, 247, 0.45); }
.btn-invite.is-active { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7), 0 2px 10px rgba(16, 185, 129, 0.45); }
.btn-upgrade .btn-upgrade-icon,
.btn-upgrade .btn-upgrade-label,
.btn-invite .btn-invite-icon,
.btn-invite .btn-invite-label { position: relative; z-index: 1; flex: none; }
.btn-upgrade-stars, .btn-invite-stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.btn-upgrade-stars .ustar, .btn-invite-stars .ustar {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #ffffff;
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  opacity: 0;
  animation: ustar-twinkle 2.4s ease-in-out infinite;
}
/* Initial spots are a fallback; the nav script re-scatters them on each flash. */
.btn-upgrade-stars .ustar:nth-child(1), .btn-invite-stars .ustar:nth-child(1) { top: 20%; left: 14%; animation-delay: 0s; }
.btn-upgrade-stars .ustar:nth-child(2), .btn-invite-stars .ustar:nth-child(2) { top: 58%; left: 30%; width: 4px; height: 4px; animation-delay: 0.7s; }
.btn-upgrade-stars .ustar:nth-child(3), .btn-invite-stars .ustar:nth-child(3) { top: 26%; left: 70%; width: 5px; height: 5px; animation-delay: 1.3s; }
.btn-upgrade-stars .ustar:nth-child(4), .btn-invite-stars .ustar:nth-child(4) { top: 62%; left: 86%; animation-delay: 1.9s; }
@keyframes upgrade-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes ustar-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  50% { opacity: 0.95; transform: scale(1) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-upgrade, .btn-invite { animation: none; }
  .btn-upgrade:hover, .btn-invite:hover { transform: none; }
  .btn-upgrade-stars .ustar, .btn-invite-stars .ustar { animation: none; opacity: 0.6; transform: scale(0.8); }
}
/* Tighten both CTAs into icon-only chips on narrow screens so the bar stays
   on one row alongside the theme toggle and avatar. */
@media (max-width: 767px) {
  .btn-feedback, .btn-upgrade { padding: 0.5rem 0.6rem; gap: 0; }
  .btn-feedback-label, .btn-upgrade-label { display: none; }
}
.save-state {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: #a1a1aa;
  transition: color 0.15s;
}
.save-state::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: currentColor;
}
.save-state:empty { display: none; }
.save-state.saving { color: #a1a1aa; }
.save-state.saved { color: #16a34a; }
.save-state.error { color: #dc2626; }
.logout-form { margin: 0; display: inline-flex; }

/* Account controls — visually distinct from nav items */
.nav-link {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #71717a;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color 0.15s, text-decoration-color 0.15s;
}
.nav-link:hover {
  color: #18181b;
  text-decoration-color: currentColor;
}
.nav-link.is-active {
  color: #18181b;
  font-weight: 600;
  text-decoration-color: currentColor;
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  border: 1px solid #e4e4e7;
  background: #ffffff;
  color: #52525b;
  font-size: 0.95rem;
  line-height: 1;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.theme-toggle:hover { background: #f4f4f5; color: #18181b; transform: scale(1.06); }
:root[data-theme="dark"] .theme-toggle { border-color: #3f3f46; background: #18181b; color: #d4d4d8; }
:root[data-theme="dark"] .theme-toggle:hover { background: #27272a; color: #fafafa; }
.home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  border: 1px solid #e4e4e7;
  background: #ffffff;
  color: #52525b;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.home-link:hover { background: #f4f4f5; color: #18181b; transform: scale(1.06); }
.home-link.is-active { border-color: #6366f1; color: #6366f1; }
:root[data-theme="dark"] .home-link { border-color: #3f3f46; background: #18181b; color: #d4d4d8; }
:root[data-theme="dark"] .home-link:hover { background: #27272a; color: #fafafa; }
:root[data-theme="dark"] .home-link.is-active { border-color: #818cf8; color: #818cf8; }

/* Mobile-only round icon that links to the card page; takes the theme toggle's
   spot in the bar (the toggle moves into the account menu on mobile). Hidden on
   desktop, where "View card" is an inline nav link. Filled blue gradient so it
   pops against the bar — its own hue, distinct from the other CTAs. */
.card-link {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  border: none;
  color: #ffffff;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.45);
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
.card-link:hover { transform: translateY(-1px) scale(1.08); box-shadow: 0 5px 16px rgba(37, 99, 235, 0.6); filter: brightness(1.06); }
.card-link.is-active { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 2px 8px rgba(37, 99, 235, 0.45); }
:root[data-theme="dark"] .card-link { box-shadow: 0 2px 8px rgba(37, 99, 235, 0.55); }
:root[data-theme="dark"] .card-link.is-active { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 2px 8px rgba(37, 99, 235, 0.55); }
/* Reveal the card shortcut at the same breakpoint where the upgrade/feedback
   buttons collapse to bare icons (≤767px). Must come AFTER the base rule above:
   same specificity, so source order decides — an earlier @media block would lose
   to the base `display: none` and the icon would never show. */
@media (max-width: 767px) { .card-link { display: inline-flex; } }

/* Theme toggle as a row inside the account dropdown — the single home for it at
   all widths. Inherits .user-menu-item looks. The round bar toggle is dropped
   for signed-in users below; guests (no account menu) keep their inline toggle. */
.user-menu-theme { display: flex; align-items: center; gap: 0.5rem; }
.user-menu-theme .tt-icon { font-size: 1rem; line-height: 1; }
header.bar:has(.nav-toggle) .bar-end > .theme-toggle { display: none; }
.user-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: #3f3f46;
  padding: 0.25rem 0.625rem;
  background: #f4f4f5;
  border: 1px solid #e4e4e7;
  border-radius: 9999px;
}
a.user-chip {
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
a.user-chip:hover { border-color: #a1a1aa; color: #18181b; }
/* Ally-status tinted user chip (palette vars defined with the auth badge). */
.user-chip.status-ally,
.user-chip.status-super_ally,
.user-chip.status-ultimate_ally {
  gap: 0.3rem;
  border-color: var(--tier-border);
  background: var(--tier-bg);
}
a.user-chip.status-ally:hover,
a.user-chip.status-super_ally:hover,
a.user-chip.status-ultimate_ally:hover { border-color: var(--tier-dark); }
/* In the nav the animations play once on page load, then settle — a
   constant loop next to the page content is distracting. The shimmer ends
   at background-position 0 (the static resting value, band just off the
   right edge) so the hand-off from animated to settled is seamless. */
.user-chip .status-text { animation: chip-shimmer 2.4s ease-in-out 1; }
@keyframes chip-shimmer {
  from { background-position: 105% 0; }
  to { background-position: 0% 0; }
}
.user-chip .chip-sparkle {
  font-size: 0.625rem;
  color: var(--tier-dark, #a1a1aa);
  opacity: 0.75;
  animation: chip-twinkle 2.1s ease-in-out 1;
}
@keyframes chip-twinkle {
  0% { opacity: 0; transform: scale(0.3); }
  35% { opacity: 1; transform: scale(1.15) rotate(90deg); }
  100% { opacity: 0.75; transform: scale(1) rotate(90deg); }
}
.logout-btn {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #71717a;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color 0.15s, text-decoration-color 0.15s;
}
.logout-btn:hover {
  color: #dc2626;
  text-decoration-color: currentColor;
}

/* Account avatar + dropdown menu (top-right, Google-style). */
.user-menu { position: relative; display: inline-flex; }
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 9999px;
  border: 1px solid var(--tier-border, #e4e4e7);
  background: var(--tier-bg, #f4f4f5);
  color: var(--tier-dark, #3f3f46);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.avatar:hover { transform: scale(1.06); border-color: var(--tier-dark, #a1a1aa); }
.avatar[aria-expanded="true"] { border-color: var(--tier-dark, #a1a1aa); }
.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 11rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.375rem;
  background: #ffffff;
  border: 1px solid #e4e4e7;
  border-radius: 0.625rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  z-index: 50;
}
.user-menu-dropdown[hidden] { display: none; }
.user-menu-item {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  color: #3f3f46;
  background: none;
  border: none;
  border-radius: 0.375rem;
  padding: 0.5rem 0.625rem;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.user-menu-item:hover { background: #f4f4f5; color: #18181b; }
.user-menu-item.is-active { background: #eef2ff; color: #4f46e5; }
.user-menu-logout:hover { background: #fef2f2; color: #dc2626; }
/* Superuser-only tools, set apart from the everyday account links above. */
.user-menu-group { margin-top: 0.375rem; padding-top: 0.375rem; border-top: 1px solid #e4e4e7; }
.user-menu-group-label {
  display: block;
  padding: 0.25rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a1a1aa;
}
.user-menu-item.is-admin { color: #b45309; font-weight: 600; }
.user-menu-item.is-admin:hover { background: #fffbeb; color: #92400e; }
.user-menu-item.is-admin.is-active { background: #fef3c7; color: #92400e; }
:root[data-theme="dark"] .avatar.status-unactivated { background: #27272a; border-color: #3f3f46; color: #d4d4d8; }
:root[data-theme="dark"] .user-menu-dropdown { background: #18181b; border-color: #27272a; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
:root[data-theme="dark"] .user-menu-item { color: #e4e4e7; }
:root[data-theme="dark"] .user-menu-item:hover { background: #27272a; color: #fafafa; }
:root[data-theme="dark"] .user-menu-item.is-active { background: #312e81; color: #c7d2fe; }
:root[data-theme="dark"] .user-menu-logout:hover { background: #3f1d1d; color: #f87171; }
:root[data-theme="dark"] .user-menu-group { border-top-color: #27272a; }
:root[data-theme="dark"] .user-menu-group-label { color: #71717a; }
:root[data-theme="dark"] .user-menu-item.is-admin { color: #fbbf24; }
:root[data-theme="dark"] .user-menu-item.is-admin:hover { background: #3a2e10; color: #fcd34d; }
:root[data-theme="dark"] .user-menu-item.is-admin.is-active { background: #422006; color: #fcd34d; }

/* Notifications bell + dropdown. The bell reuses the round theme-toggle look;
   the badge is a small count that hides itself when there's nothing unread. */
.notif-menu { position: relative; display: inline-flex; }
.notif-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  border: 1px solid #e4e4e7;
  background: #ffffff;
  color: #52525b;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.notif-bell:hover { background: #f4f4f5; color: #18181b; transform: scale(1.06); }
.notif-bell[aria-expanded="true"] { border-color: #a1a1aa; color: #18181b; }
.notif-badge {
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #dc2626;
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}
.notif-badge.is-empty { display: none; }
.notif-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 20rem;
  max-width: calc(100vw - 1.5rem);
  max-height: 26rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 0.375rem;
  background: #ffffff;
  border: 1px solid #e4e4e7;
  border-radius: 0.625rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  z-index: 50;
}
.notif-dropdown[hidden] { display: none; }
.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a1a1aa;
}
.notif-clear {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: #6366f1;
  cursor: pointer;
}
.notif-clear:hover { color: #4338ca; text-decoration: underline; }
.notif-clear[hidden] { display: none; }
.notif-list { display: flex; flex-direction: column; }
/* "See all" footer row, divided from the list above it. */
.notif-foot-link {
  margin-top: 0.25rem;
  padding: 0.5rem 0.625rem;
  border-top: 1px solid #e4e4e7;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: #4f46e5;
}
.notif-foot-link:hover { text-decoration: underline; }
.notif-item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.375rem;
  text-decoration: none;
  color: #3f3f46;
  transition: background 0.12s, color 0.12s;
}
.notif-item:hover { background: #f4f4f5; color: #18181b; }
.notif-item-msg { font-size: 0.875rem; font-weight: 500; }
.notif-item-date { font-size: 0.75rem; color: #a1a1aa; }
/* Unread items get an accent dot and a tinted background. */
.notif-item.is-unread { background: #eef2ff; }
.notif-item.is-unread .notif-item-msg { font-weight: 600; }
.notif-item.is-unread .notif-item-msg::before {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.4rem;
  border-radius: 9999px;
  background: #4f46e5;
  vertical-align: middle;
}
.notif-empty { padding: 0.75rem 0.625rem; font-size: 0.875rem; color: #71717a; }
:root[data-theme="dark"] .notif-bell { border-color: #3f3f46; background: #18181b; color: #d4d4d8; }
:root[data-theme="dark"] .notif-bell:hover { background: #27272a; color: #fafafa; }
:root[data-theme="dark"] .notif-dropdown { background: #18181b; border-color: #27272a; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
:root[data-theme="dark"] .notif-item { color: #e4e4e7; }
:root[data-theme="dark"] .notif-item:hover { background: #27272a; color: #fafafa; }
:root[data-theme="dark"] .notif-item.is-unread { background: #312e81; }
:root[data-theme="dark"] .notif-item.is-unread .notif-item-msg::before { background: #c7d2fe; }
:root[data-theme="dark"] .notif-empty { color: #a1a1aa; }
:root[data-theme="dark"] .notif-foot-link { border-top-color: #27272a; color: #a5b4fc; }
:root[data-theme="dark"] .notif-clear { color: #a5b4fc; }
:root[data-theme="dark"] .notif-clear:hover { color: #c7d2fe; }

/* Full notifications page: a wider list of the same items, plus a pager. */
.notif-page-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 42rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.notif-page-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid #e4e4e7;
  border-radius: 0.625rem;
  background: #ffffff;
  text-decoration: none;
  color: #3f3f46;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.notif-page-item:hover { background: #f4f4f5; color: #18181b; }
.notif-page-msg { font-size: 0.9375rem; font-weight: 500; }
.notif-page-date { flex: none; font-size: 0.8125rem; color: #a1a1aa; }
.notif-page-item.is-unread { border-color: #c7d2fe; background: #eef2ff; }
.notif-page-item.is-unread .notif-page-msg { font-weight: 600; }
.notif-page-item.is-unread .notif-page-msg::before {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.45rem;
  border-radius: 9999px;
  background: #4f46e5;
  vertical-align: middle;
}
.pager {
  max-width: 42rem;
  margin: 1.25rem auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.notif-clear-all { flex: none; }
.pager-status { font-size: 0.875rem; color: #71717a; }
.pager .is-disabled { opacity: 0.4; pointer-events: none; }
:root[data-theme="dark"] .notif-page-item { border-color: #27272a; background: #18181b; color: #e4e4e7; }
:root[data-theme="dark"] .notif-page-item:hover { background: #27272a; color: #fafafa; }
:root[data-theme="dark"] .notif-page-date { color: #a1a1aa; }
:root[data-theme="dark"] .notif-page-item.is-unread { border-color: #4338ca; background: #312e81; }
:root[data-theme="dark"] .notif-page-item.is-unread .notif-page-msg::before { background: #c7d2fe; }
:root[data-theme="dark"] .pager-status { color: #a1a1aa; }

/* Brief highlight when a notification deep-links to a specific card. */
.ticket-card:target { animation: notif-target-flash 2s ease-out; }
@keyframes notif-target-flash {
  0% { box-shadow: 0 0 0 3px #c7d2fe; }
  100% { box-shadow: 0 0 0 3px transparent; }
}

/* Auth */
main.auth {
  display: flex;
  justify-content: center;
  padding: 3rem 0 4rem;
}
.auth-card {
  width: 100%;
  max-width: 22rem;
  background: #ffffff;
  border: 1px solid #e4e4e7;
  border-radius: 1rem;
  padding: 2rem;
}
.auth-title { margin: 0 0 1.25rem; font-size: 1.25rem; letter-spacing: -0.025em; }
.auth-label { display: block; font-size: 0.8125rem; color: #71717a; margin-bottom: 0.375rem; }
.auth-input,
.auth-card input[type="text"],
.auth-card input[type="password"] {
  width: 100%;
  padding: 0.625rem 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #e4e4e7;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}
.auth-input:focus,
.auth-card input[type="text"]:focus,
.auth-card input[type="password"]:focus { outline: none; border-color: #a1a1aa; }
.auth-submit { width: 100%; margin-top: 0.25rem; }
/* Read-only field (e.g. account status — granted by admins, not editable). */
.auth-status {
  position: relative;
  overflow: hidden;
  margin: 0 0 1rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid #e4e4e7;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: #71717a;
  background: #fafafa;
}
/* Animated ally-status tiers: shimmering gradient text + twinkling sparkles.
   Shared by the account-page badge and the nav user chip.
   Tier colors — unactivated: grey, ally: blue, super ally: green,
   ultimate ally: gold. */
.status-unactivated {
  --tier-dark: #52525b;
  --tier-bright: #a1a1aa;
  --tier-border: #e4e4e7;
  --tier-bg: #f4f4f5;
}
.status-ally {
  --tier-dark: #1d4ed8;
  --tier-bright: #7dd3fc;
  --tier-border: #bfdbfe;
  --tier-bg: #eff6ff;
}
.status-super_ally {
  --tier-dark: #15803d;
  --tier-bright: #86efac;
  --tier-border: #bbf7d0;
  --tier-bg: #f0fdf4;
}
.status-ultimate_ally {
  --tier-dark: #b45309;
  --tier-bright: #fde047;
  --tier-border: #fde68a;
  --tier-bg: linear-gradient(120deg, #fffbeb, #fef3c7, #fffbeb);
}
.status-text {
  position: relative;
  z-index: 1;
  font-weight: 600;
  background: linear-gradient(
    100deg,
    var(--tier-dark, #71717a) 0%,
    var(--tier-dark, #71717a) 38%,
    var(--tier-bright, #a1a1aa) 50%,
    var(--tier-dark, #71717a) 62%,
    var(--tier-dark, #71717a) 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: status-shimmer 2.4s linear infinite;
}
/* One full tile period of the 250%-wide gradient (Δ166.67%), so the loop
   wraps around seamlessly with no jump between iterations. */
@keyframes status-shimmer {
  from { background-position: 83.33% 0; }
  to { background-position: -83.34% 0; }
}
/* Make "Ultimate Ally" inside the top perk pop: bolder, a touch larger, and a
   gentle glow layered on top of the inherited shimmer. */
.plan-perks .perk-ultimate {
  font-weight: 800;
  font-size: 1.06em;
  letter-spacing: 0.01em;
  animation: status-shimmer 2.4s linear infinite, perk-glow 2.4s ease-in-out infinite;
}
@keyframes perk-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(253, 224, 71, 0)); }
  50% { filter: drop-shadow(0 0 6px rgba(253, 224, 71, 0.75)); }
}
@media (prefers-reduced-motion: reduce) {
  .plan-perks .perk-ultimate { animation: none; filter: none; }
}
.auth-status.status-unactivated,
.auth-status.status-ally,
.auth-status.status-super_ally,
.auth-status.status-ultimate_ally {
  border-color: var(--tier-border);
  background: var(--tier-bg);
}
.status-sparkles { position: absolute; inset: 0; pointer-events: none; }
.status-sparkles .sparkle {
  position: absolute;
  font-size: 0.625rem;
  color: var(--tier-bright, #a1a1aa);
  opacity: 0;
  animation: status-twinkle 2.1s ease-in-out infinite;
}
.status-sparkles .sparkle:nth-child(1) { top: 12%; left: 58%; animation-delay: 0s; }
.status-sparkles .sparkle:nth-child(2) { top: 52%; left: 76%; animation-delay: 0.35s; font-size: 0.5rem; }
.status-sparkles .sparkle:nth-child(3) { top: 22%; left: 88%; animation-delay: 0.7s; }
.status-sparkles .sparkle:nth-child(4) { top: 58%; left: 46%; animation-delay: 1.05s; font-size: 0.5rem; }
.status-sparkles .sparkle:nth-child(5) { top: 8%; left: 70%; animation-delay: 1.4s; }
.status-sparkles .sparkle:nth-child(6) { top: 44%; left: 94%; animation-delay: 1.75s; font-size: 0.75rem; }
@keyframes status-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .status-text { animation: none; }
  .status-sparkles .sparkle,
  .user-chip .chip-sparkle { animation: none; opacity: 0.6; transform: none; }
}
.auth-error { color: #dc2626; font-size: 0.8125rem; margin: 0 0 1rem; }
.auth-saved { color: #16a34a; font-size: 0.8125rem; margin: 0 0 1rem; }
.auth-help { color: #a1a1aa; font-size: 0.75rem; margin: -0.5rem 0 1rem; }
.auth-alt { font-size: 0.8125rem; color: #71717a; margin: 1.25rem 0 0; text-align: center; }
.auth-help ul { margin: 0; padding-left: 1.1rem; }
.pw-rules { list-style: none; color: #a1a1aa; font-size: 0.75rem; margin: -0.5rem 0 1rem; padding-left: 0; }
.pw-rules li::before { content: "•"; display: inline-block; width: 1.1rem; }
.pw-rules li.ok { color: #16a34a; }
.pw-rules li.ok::before { content: "✓"; }
.pw-rules[hidden], .pw-rules li[hidden] { display: none; }
.email-status { font-size: 0.75rem; margin: -0.5rem 0 1rem; }
.email-status.err { color: #dc2626; }
.email-status.ok { color: #16a34a; }
.email-status[hidden] { display: none; }

/* Signup scene — floating blob friends and ambient color washes behind the
   auth card. Everything in .blob-field is decorative (aria-hidden, no
   pointer events) and sits behind the content. */
.auth-page {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* A whole-page pastel sweep that visibly cycles, with the morphing washes
     layered on top of it. */
  background: linear-gradient(120deg, #cdeffd, #ffdfe9, #e4d8ff, #cff2df, #fff0cf, #cdeffd);
  background-size: 400% 400%;
  animation: page-drift 16s ease-in-out infinite;
}
@keyframes page-drift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.blob-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.ambient {
  position: absolute;
  width: 30rem;
  height: 30rem;
  filter: blur(45px);
  opacity: 0.7;
  border-radius: 42% 58% 60% 40% / 45% 52% 48% 55%;
  animation: ambient-morph 9s ease-in-out infinite alternate;
}
.ambient.a1 { top: -8rem; left: -6rem; background: #5BCEFA; }
.ambient.a2 { bottom: -10rem; right: -7rem; background: #F5A9B8; animation-delay: -2.25s; }
.ambient.a3 { top: 38%; right: -5rem; width: 24rem; height: 24rem; background: #C9B6FF; animation-delay: -4.5s; }
.ambient.a4 { top: 52%; left: -8rem; width: 26rem; height: 26rem; background: #9FE6C5; animation-delay: -6.75s; }
@keyframes ambient-morph {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); border-radius: 42% 58% 60% 40% / 45% 52% 48% 55%; }
  50%  { border-radius: 65% 35% 38% 62% / 58% 42% 58% 42%; }
  100% { transform: translate(7rem, -4rem) scale(1.3) rotate(18deg); border-radius: 45% 55% 52% 48% / 62% 38% 62% 38%; }
}
.float-blob {
  position: absolute;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.1));
  animation: blob-bob 6s ease-in-out infinite;
}
.float-blob svg { width: 100%; height: auto; display: block; }
.float-blob.f1 { width: 84px; top: 18%; left: 7%; animation-duration: 7s; }
.float-blob.f2 { width: 60px; top: 66%; left: 13%; animation-duration: 5.5s; animation-delay: -2s; }
.float-blob.f3 { width: 96px; top: 24%; right: 8%; animation-duration: 8s; animation-delay: -1s; }
.float-blob.f4 { width: 56px; top: 60%; right: 14%; animation-duration: 6.5s; animation-delay: -3.5s; }
.float-blob.f5 { width: 48px; top: 86%; left: 42%; animation-duration: 7.5s; animation-delay: -5s; }
.float-blob.f6 { width: 40px; top: 7%; left: 47%; animation-duration: 9s; animation-delay: -2.5s; }
@keyframes blob-bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-16px) rotate(3deg); }
}
/* On phones the card spans most of the width; keep the friends small and
   tucked into the corners so they peek out around it instead of crowding. */
@media (max-width: 639px) {
  .float-blob.f1 { width: 52px; top: 11%; left: 4%; }
  .float-blob.f2 { width: 40px; top: 80%; left: 6%; }
  .float-blob.f3 { width: 60px; top: 9%; right: 5%; }
  .float-blob.f4 { width: 40px; top: 84%; right: 8%; }
  .float-blob.f5 { width: 36px; top: 93%; left: 44%; }
  .float-blob.f6 { display: none; }
  .ambient { width: 20rem; height: 20rem; filter: blur(38px); }
}

/* Greeter mascot above the signup form. The bubble text and the blob's face
   react to what the visitor is doing (see signup.html). */
.auth-greeter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}
.greeter-blob { width: 96px; animation: greeter-bob 3.5s ease-in-out infinite; }
.greeter-blob svg { width: 100%; height: auto; display: block; }
.greeter-bubble {
  font-size: 0.8125rem;
  color: #52525b;
  background: #f4f4f5;
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
}
@keyframes greeter-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Signup card: frosted glass over the blob field, a sliding rainbow edge,
   and a gentle entrance. */
.auth-card.auth-card-signup {
  position: relative;
  overflow: hidden;
  max-width: 24rem;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 50px -24px rgba(24, 24, 27, 0.3);
  animation: card-enter 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.auth-card-signup::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #E40303, #FF8C00, #FFED00, #008026, #004DFF, #750787, #5BCEFA, #F5A9B8, #E40303);
  background-size: 200% 100%;
  animation: rainbow-slide 8s linear infinite;
}
@keyframes rainbow-slide { to { background-position: -200% 0; } }
@keyframes card-enter {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
}
.auth-card-signup .auth-title { text-align: center; font-size: 1.375rem; margin-bottom: 0.25rem; }
.auth-sub { text-align: center; font-size: 0.875rem; color: #71717a; margin: 0 0 1.25rem; }
.auth-card-signup input[type="text"]:focus,
.auth-card-signup input[type="password"]:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.auth-card-signup .auth-submit {
  position: relative;
  overflow: hidden;
  padding: 0.7rem 1rem;
  border-radius: 0.625rem;
  transition: transform 0.15s, box-shadow 0.15s;
}
.auth-card-signup .auth-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(24, 24, 27, 0.5);
}
.auth-card-signup .auth-submit:active { transform: translateY(0); }
.auth-card-signup .auth-submit::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.3) 50%, transparent 60%);
  transform: translateX(-100%);
}
.auth-card-signup .auth-submit:hover::after { animation: btn-shine 0.8s ease; }
@keyframes btn-shine { to { transform: translateX(100%); } }

/* "More blobs" re-roll button: re-randomizes the floating friends (and the
   greeter), popping each new blob in. Sits above the card on phones and
   beside it (to the right) on wider screens. */
.auth-page main.auth { flex-direction: column; align-items: center; gap: 1.25rem; }
.blob-reroll {
  order: -1; /* mobile: above the form */
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #52525b;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #e4e4e7;
  border-radius: 999px;
  padding: 1rem 1.75rem;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px -6px rgba(24, 24, 27, 0.2);
  transition: transform 0.15s, box-shadow 0.15s, color 0.15s;
}
@media (min-width: 640px) {
  .auth-page main.auth { flex-direction: row; justify-content: center; gap: 2.5rem; }
  .blob-reroll {
    order: 0; /* desktop: to the right of the form */
    font-size: 1.5rem;
    padding: 1.4rem 2.4rem;
    flex-shrink: 0;
    white-space: nowrap; /* let the card flex instead of wrapping the label */
  }
}
.blob-reroll:hover {
  transform: translateY(-2px);
  color: #18181b;
  box-shadow: 0 10px 22px -8px rgba(24, 24, 27, 0.35);
}
.blob-reroll:active { transform: scale(0.96); }
.blob-reroll .die { font-size: 1.4em; }
.blob-reroll .die { display: inline-block; }
.blob-reroll:hover .die { animation: die-spin 0.5s ease; }
@keyframes die-spin { to { transform: rotate(360deg); } }
.float-blob.pop svg { animation: blob-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes blob-pop {
  from { transform: scale(0.3) rotate(-10deg); }
  to { transform: scale(1) rotate(0deg); }
}

:root[data-theme="dark"] {
  .auth-page {
    background: linear-gradient(120deg, #0b1d2c, #2c0f1e, #1c1133, #0d2a1c, #2a2208, #0b1d2c);
    background-size: 400% 400%;
  }
  .ambient { opacity: 0.32; }
  .float-blob { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5)); }
  .auth-card.auth-card-signup {
    background: rgba(24, 24, 27, 0.72);
    box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.8);
  }
  .greeter-bubble { background: #18181b; color: #a1a1aa; }
  .blob-reroll {
    color: #a1a1aa;
    background: rgba(24, 24, 27, 0.7);
    border-color: #27272a;
    box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.6);
  }
  .blob-reroll:hover { color: #fafafa; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.8); }
  .auth-card-signup .auth-submit:hover { box-shadow: 0 8px 20px -8px rgba(255, 255, 255, 0.25); }
  .auth-card-signup input[type="text"]:focus,
  .auth-card-signup input[type="password"]:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
  }
}
@media (prefers-reduced-motion: reduce) {
  .auth-page, .ambient, .float-blob, .greeter-blob,
  .auth-card.auth-card-signup, .auth-card-signup::before,
  .float-blob.pop svg, .blob-reroll:hover .die { animation: none; }
  .auth-card-signup .auth-submit::after { display: none; }
  .auth-card-signup .auth-submit:hover { transform: none; }
  .blob-reroll:hover, .blob-reroll:active { transform: none; }
}

main.studio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding-bottom: 4rem;
}
@media (min-width: 1024px) {
  main.studio {
    grid-template-columns: 1fr 400px;
    column-gap: 2.5rem;
    row-gap: 0;
    grid-template-areas:
      "stage  editor"
      "extras editor";
  }
  .stage { grid-area: stage; }
  .editor { grid-area: editor; }
  .stage-extras { grid-area: extras; }
}

/* Visitor view (no editor rendered): place the profile info beside the blob on
   tablet and desktop so everything fits in one screen. Owners (.editing) keep
   the editor layout above. */
@media (min-width: 768px) {
  .page:not(.editing) main.studio {
    grid-template-columns: minmax(0, 1fr) 340px;
    column-gap: 2rem;
    row-gap: 0;
    grid-template-areas: "stage extras";
    align-items: center;
  }
  .page:not(.editing) .stage { grid-area: stage; }
  .page:not(.editing) .stage-extras { grid-area: extras; }
}
@media (min-width: 1024px) {
  .page:not(.editing) main.studio { grid-template-columns: minmax(0, 1fr) 400px; }
}

/* Desktop editing: the blob preview is a 1:1 square capped at 40rem, which on
   shorter desktop screens grows tall enough to push the animation row (and
   anything below) off-screen. Cap its height to a share of the viewport so it
   only shrinks when the screen is short — keeping the bottom controls in view
   without affecting tall displays. */
@media (min-width: 1024px) {
  .page.editing .stage-frame { max-width: min(40rem, 52vh); }
}

/* Mobile editing: pin the blob preview to the top so it stays in view while
   the controls scroll beneath it. The header pins too, keeping the auto-save
   status visible. Only owners (.editing) get this; visitors keep normal flow. */
@media (max-width: 1023px) {
  .page.editing header.bar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg-base);
  }
  .page.editing main.studio { display: block; }
  .page.editing .stage {
    position: sticky;
    top: var(--header-h, 4.5rem);
    z-index: 5;
    align-items: center;
    background: var(--bg-base);
    padding-top: 0.25rem;
    padding-bottom: 0.75rem;
    box-shadow: 0 10px 14px -10px rgba(0, 0, 0, 0.18);
  }
  .page.editing .stage-frame {
    aspect-ratio: 1 / 1;
    width: auto;
    height: min(38vh, 16rem);
    max-width: 100%;
  }
  .page.editing .anim-row { margin-top: 0.5rem; }
  .page.editing .editor { margin-top: 1.25rem; }
  .page.editing .editor-card { position: static; }
  .page.editing .tab-body { max-height: none; overflow: visible; }
  .page.editing .stage-extras { margin-top: 1.5rem; }
}

/* Stage */
.stage { display: flex; flex-direction: column; }
.stage-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  border-radius: 1.5rem;
  border: 1px solid #e4e4e7;
  background: #ffffff;
  overflow: hidden;
}
.stage-bg {
  position: absolute; inset: 0;
  pointer-events: none;
}
.stage-bg svg { width: 100%; height: 100%; display: block; }
.stage-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(0,0,0,0.04), transparent 60%);
  pointer-events: none;
}
.stage-shadow {
  position: absolute;
  left: 50%;
  bottom: 17%;
  transform: translateX(-50%);
  width: 42%;
  height: 3.2%;
  border-radius: 50%;
  background: rgba(0,0,0,0.12);
  pointer-events: none;
}
.stage-center {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.stage-blob {
  width: 70%;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,0.08));
}
.stage-blob svg { width: 100%; height: auto; display: block; }

.nametag {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid #e4e4e7;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  display: flex; align-items: center; gap: 0.5rem;
  max-width: calc(100% - 2rem);
}
.nametag-name { font-size: 0.875rem; font-weight: 500; color: #18181b; }
.nametag-pronouns { font-size: 0.75rem; color: #71717a; }

.anim-row {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  justify-content: center;
}
.anim-chip {
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  background: #ffffff;
  border: 1px solid #e4e4e7;
  color: #52525b;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.anim-chip:hover { border-color: #a1a1aa; color: #18181b; }
.anim-chip.selected { background: #18181b; color: #ffffff; border-color: #18181b; }

@keyframes blob-hover  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes blob-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes blob-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
@keyframes blob-spin   { to { transform: rotate(360deg); } }
@keyframes blob-wild {
  0%   { transform: translate(0, 0) rotate(0) scale(1); }
  12%  { transform: translate(-26px, -18px) rotate(-18deg) scale(1.05); }
  24%  { transform: translate(28px, -8px) rotate(22deg) scale(0.93); }
  37%  { transform: translate(18px, 22px) rotate(-28deg) scale(1.1); }
  50%  { transform: translate(-22px, 14px) rotate(40deg) scale(0.9); }
  63%  { transform: translate(26px, -20px) rotate(-35deg) scale(1.08); }
  76%  { transform: translate(-14px, 18px) rotate(50deg) scale(0.95); }
  88%  { transform: translate(-24px, -12px) rotate(-22deg) scale(1.04); }
  100% { transform: translate(0, 0) rotate(0) scale(1); }
}
.stage-blob.anim-hover  { animation: blob-hover 3.2s ease-in-out infinite; }
.stage-blob.anim-wobble { animation: blob-wobble 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
.stage-blob.anim-bounce { animation: blob-bounce 1.1s cubic-bezier(.5,0,.5,1) infinite; }
.stage-blob.anim-spin   { animation: blob-spin 7s linear infinite; }
.stage-blob.anim-wild   { animation: blob-wild 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .stage-blob.anim-hover,
  .stage-blob.anim-wobble,
  .stage-blob.anim-bounce,
  .stage-blob.anim-spin,
  .stage-blob.anim-wild { animation: none; }
}

.stage-actions {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.btn {
  padding: 0.625rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.btn-primary {
  background: #18181b;
  color: #ffffff;
}
.btn-primary:hover { background: #27272a; }
.btn-secondary {
  background: #ffffff;
  border: 1px solid #e4e4e7;
  color: #18181b;
}
.btn-secondary:hover { border-color: #a1a1aa; }
.btn[disabled] { opacity: 0.5; cursor: default; }

/* Share */
.share-row {
  margin-top: 1rem;
  max-width: 40rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.share-input {
  flex: 1;
  padding: 0.625rem 0.875rem;
  border-radius: 0.75rem;
  background: #ffffff;
  border: 1px solid #e4e4e7;
  font-size: 0.8125rem;
  color: #3f3f46;
  outline: none;
}
.share-input:focus { border-color: #a1a1aa; }
.share-status {
  font-size: 0.75rem;
  color: #16a34a;
  text-align: center;
  margin-top: 0.5rem;
  min-height: 1rem;
}
.share-status.error { color: #dc2626; }

.slug-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}
.slug-prefix {
  font-size: 0.8125rem;
  color: #a1a1aa;
  white-space: nowrap;
}
.slug-input {
  flex: 1;
  min-width: 8rem;
}

.profile-card {
  margin-top: 1.5rem;
  max-width: 40rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 1.25rem;
  border-radius: 1rem;
  background: #ffffff;
  border: 1px solid #e4e4e7;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.pc-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 0.75rem;
  align-items: start;
}
.pc-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #a1a1aa;
  padding-top: 0.25rem;
}
.pc-val { font-size: 0.875rem; color: #3f3f46; }
.pc-val.story { white-space: pre-wrap; line-height: 1.6; margin: 0; }
.pc-traits { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.pc-trait {
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background: #f4f4f5;
  font-size: 0.75rem;
  color: #3f3f46;
}

/* Editor */
aside.editor { display: flex; flex-direction: column; }
.editor-card {
  position: sticky;
  top: 1.5rem;
  border-radius: 1.5rem;
  border: 1px solid #e4e4e7;
  background: #ffffff;
  overflow: hidden;
}
.tabs {
  display: flex;
  border-bottom: 1px solid #e4e4e7;
}
.tab {
  flex: 1;
  padding: 0.75rem 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: #a1a1aa;
  position: relative;
  transition: color 0.15s;
}
.tab:hover { color: #52525b; }
.tab.active { color: #18181b; }
.tab.active::after {
  content: "";
  position: absolute;
  left: 1rem; right: 1rem; bottom: -1px;
  height: 2px;
  background: #18181b;
}
.tab-body {
  padding: 1.25rem;
  max-height: 70vh;
  overflow-y: auto;
}

/* Sections (look) */
.section { display: flex; flex-direction: column; gap: 0.5rem; }
.section + .section { margin-top: 1.5rem; }
.section-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #71717a;
  margin: 0;
}
.color-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
}
.swatch {
  aspect-ratio: 1 / 1;
  border-radius: 9999px;
  transition: transform 0.15s, box-shadow 0.15s;
  border: none;
  padding: 0;
  overflow: hidden;
}
.swatch svg { display: block; width: 100%; height: 100%; }
.swatch[hidden] { display: none; }
.swatch:hover { transform: scale(1.05); }
.swatch.selected {
  transform: scale(1.1);
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #18181b;
}
.color-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #52525b;
}
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.chip {
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  background: #f4f4f5;
  color: #3f3f46;
  transition: background-color 0.15s, color 0.15s;
}
.chip:hover { background: #e4e4e7; }
.chip.selected { background: #18181b; color: #ffffff; }
.chip.selected:hover { background: #18181b; }

.section-search {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: #fafafa;
  border: 1px solid #e4e4e7;
  font-size: 0.8125rem;
  color: #18181b;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.section-search:focus { border-color: #a1a1aa; box-shadow: 0 0 0 3px rgba(24,24,27,0.06); }
.section-search::placeholder { color: #a1a1aa; }
.see-more {
  align-self: flex-start;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #ffffff;
  background: #4f46e5;
  border: 1px solid transparent;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.see-more:hover { background: #4338ca; }
.chip[hidden] { display: none; }
.section-empty {
  font-size: 0.75rem;
  color: #a1a1aa;
  font-style: italic;
  padding: 0.25rem 0;
}
.blush-row {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
}
.blush-row input { width: 16px; height: 16px; accent-color: #18181b; }

/* "Missing something?" feedback. Feedback is gold — the chip gets its own
   accent and a gentle pulsing glow so it invites a click without nagging. */
.chip.missing-chip {
  position: relative;
  align-self: flex-start;
  background: #db2777;
  border: 1px solid transparent;
  color: #ffffff;
  transition: background-color 0.15s, transform 0.15s;
}
/* The pulsing glow lives on a pseudo-element ring that animates only transform
   and opacity — both GPU-composited. Animating box-shadow instead (as this once
   did) repaints every frame and forces the whole .tab-body scroller onto the
   main thread, which makes it lag until the scrollbar is released. */
.chip.missing-chip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 3px rgba(219, 39, 119, 0.45);
  opacity: 0;
  pointer-events: none;
  animation: missing-pulse 2.4s ease-in-out infinite;
}
.chip.missing-chip:hover {
  background: #be185d;
  transform: scale(1.05);
}
.chip.missing-chip:hover::after { animation: none; opacity: 0; }
@keyframes missing-pulse {
  0%   { transform: scale(1);    opacity: 0.7; }
  70%  { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .chip.missing-chip::after { animation: none; opacity: 0; }
  .chip.missing-chip:hover { transform: none; }
}
.feedback-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(24, 24, 27, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.feedback-modal {
  width: 100%;
  max-width: 26rem;
  background: #ffffff;
  border: 1px solid #e4e4e7;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.feedback-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: #18181b;
}
.feedback-hint {
  margin: 0;
  font-size: 0.8125rem;
  color: #71717a;
  line-height: 1.5;
}
.feedback-link { color: #18181b; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.feedback-status {
  font-size: 0.75rem;
  color: #dc2626;
  min-height: 1rem;
}
.feedback-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Profile editor */
.field { display: flex; flex-direction: column; gap: 0.375rem; }
.field + .field { margin-top: 1rem; }
.field-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #71717a;
}
.field-hint { font-size: 0.75rem; color: #a1a1aa; }
.field-label-row { display: flex; align-items: center; gap: 0.375rem; }

/* Info icon + click tooltip (e.g. the disabilities field) */
.info-tip { position: relative; display: inline-flex; line-height: 0; }
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: 1px solid #c4c4cc;
  border-radius: 50%;
  background: #ffffff;
  color: #71717a;
  font-size: 0.625rem;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.info-icon:hover, .info-tip.is-open .info-icon {
  border-color: #18181b;
  color: #18181b;
}
.info-icon:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.12);
}
.info-popover {
  /* Fixed so it escapes the scrollable editor panel's overflow clipping;
     left/top are set in JS from the button's position. */
  position: fixed;
  top: 0;
  left: 0;
  transform: translateY(-3px);
  z-index: 100;
  width: max-content;
  max-width: 17rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.625rem;
  background: #1f2937;
  color: #f9fafb;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.13s ease, transform 0.13s ease, visibility 0.13s;
  pointer-events: none;
}
.info-popover::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: var(--arrow-left, 50%);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: #1f2937;
}
.info-tip.is-open .info-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border-radius: 0.75rem;
  background: #ffffff;
  border: 1px solid #e4e4e7;
  font-size: 0.875rem;
  color: #18181b;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus { border-color: #a1a1aa; box-shadow: 0 0 0 3px rgba(24,24,27,0.06); }
.input::placeholder { color: #a1a1aa; }
textarea.input { resize: none; line-height: 1.5; }
.char-count { font-size: 0.75rem; color: #a1a1aa; text-align: right; }

/* Export */
.export-list { display: flex; flex-direction: column; gap: 0.5rem; }
.export-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: #ffffff;
  border: 1px solid #e4e4e7;
  transition: border-color 0.15s, opacity 0.15s;
  text-align: left;
  width: 100%;
}
.export-row:hover:not([disabled]) { border-color: #a1a1aa; }
.export-row[disabled] { opacity: 0.5; cursor: default; }
.export-row .label { font-size: 0.875rem; font-weight: 500; color: #18181b; display: block; }
.export-row .hint { font-size: 0.75rem; color: #71717a; display: block; }
.export-row .tag { font-size: 0.75rem; font-weight: 500; color: #71717a; flex-shrink: 0; }

footer.foot {
  text-align: center;
  font-size: 0.75rem;
  color: #a1a1aa;
  padding-bottom: 2.5rem;
}

/* Gallery */
main.gallery { flex: 1; padding: 1rem 0 2.5rem; }
.gallery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.gallery-title { margin: 0; font-size: 1.5rem; letter-spacing: -0.025em; color: #18181b; }
.gallery-empty { color: #71717a; font-size: 0.9375rem; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.25rem;
}
.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e4e4e7;
  border-radius: 1.25rem;
  background: #ffffff;
  padding: 1rem;
}
.card-preview {
  display: block;
  border-radius: 0.875rem;
  background: radial-gradient(circle at 30% 20%, rgba(0,0,0,0.04), transparent 60%);
  padding: 0.75rem 1.25rem;
}
.card-name {
  display: block;
  margin: 0.75rem 0.25rem 0.875rem;
  font-weight: 600;
  color: #18181b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; }
.card-edit { flex: 1; text-align: center; text-decoration: none; }
.card-delete {
  font-size: 0.8125rem;
  color: #a1a1aa;
  padding: 0.5rem 0.75rem;
  border-radius: 9999px;
}
.card-delete:hover { color: #dc2626; }
.card-new {
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 16rem;
  border-style: dashed;
  background: transparent;
  cursor: pointer;
  color: #71717a;
  font: inherit;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.card-new:hover { border-color: #a1a1aa; color: #18181b; }
.card-new:disabled { opacity: 0.5; cursor: default; }
.card-new-icon { font-size: 2.25rem; line-height: 1; }
.card-new-label { font-weight: 600; font-size: 0.9375rem; }

/* Tickets */
main.tickets { padding-bottom: 4rem; }
.ticket-create { margin-bottom: 1.75rem; }
.ticket-form {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  max-width: 40rem;
  padding: 1.25rem;
  border: 1px solid #e4e4e7;
  border-radius: 1rem;
  background: #ffffff;
}
.ticket-textarea { resize: vertical; min-height: 6rem; }
.ticket-form-actions { display: flex; justify-content: flex-end; }

.ticket-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ticket-card {
  border: 1px solid #e4e4e7;
  border-radius: 1.25rem;
  background: #ffffff;
  padding: 1.25rem 1.375rem;
}
.ticket-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-bottom: 0.875rem;
}
.ticket-status {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  border: 1px solid transparent;
}
.ticket-status.status-received { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.ticket-status.status-in-review { background: #fef9c3; color: #a16207; border-color: #fde68a; }
.ticket-status.status-selected-for-development { background: #ede9fe; color: #6d28d9; border-color: #ddd6fe; }
.ticket-status.status-in-progress { background: #ffedd5; color: #c2410c; border-color: #fed7aa; }
.ticket-status.status-testing { background: #cffafe; color: #0e7490; border-color: #a5f3fc; }
.ticket-status.status-in-release-queue { background: #fae8ff; color: #a21caf; border-color: #f5d0fe; }
.ticket-status.status-implemented { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.ticket-status.status-backlogged { background: #f4f4f5; color: #52525b; border-color: #e4e4e7; }
.ticket-status-wrap { position: relative; display: inline-flex; }
.ticket-status[role="button"] { cursor: help; }
.ticket-status[role="button"]:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}
.ticket-status-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  width: max-content;
  max-width: 17rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.625rem;
  background: #1f2937;
  color: #f9fafb;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
  letter-spacing: normal;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3px);
  transition: opacity 0.13s ease, transform 0.13s ease, visibility 0.13s;
  pointer-events: none;
}
.ticket-status-popover strong {
  display: block;
  margin-bottom: 0.2rem;
  font-weight: 700;
}
.ticket-status-popover::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 1rem;
  border: 6px solid transparent;
  border-bottom-color: #1f2937;
}
.ticket-status-wrap:hover .ticket-status-popover,
.ticket-status-wrap:focus-within .ticket-status-popover,
.ticket-status-wrap.is-open .ticket-status-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ticket-queue {
  font-size: 0.75rem;
  font-weight: 600;
  color: #3f3f46;
  padding: 0.25rem 0.5rem;
  background: #f4f4f5;
  border: 1px solid #e4e4e7;
  border-radius: 9999px;
}
/* Filer's ally status at filing time, in that tier's colors. */
.ticket-tier {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  border: 1px solid var(--tier-border, #e4e4e7);
  background: var(--tier-bg, #fafafa);
}
.ticket-date { margin-left: auto; font-size: 0.75rem; color: #a1a1aa; }
.ticket-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #3f3f46;
  white-space: pre-wrap;
  word-break: break-word;
}
/* ---------- Ticket conversation thread ---------- */
.ticket-thread {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}
.ticket-msg {
  max-width: 85%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid #e4e4e7;
  background: #fff;
}
/* The filer's messages sit on the left; support's answers on the right. */
.ticket-msg-user { align-self: flex-start; border-bottom-left-radius: 0.25rem; }
.ticket-msg-support {
  align-self: flex-end;
  background: #f4f4f5;
  border-bottom-right-radius: 0.25rem;
}
.ticket-msg-meta {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  margin-bottom: 0.1875rem;
}
.ticket-msg-who { font-size: 0.75rem; font-weight: 600; color: #52525b; }
.ticket-msg-time { font-size: 0.6875rem; color: #a1a1aa; }
.ticket-msg-body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #3f3f46;
  white-space: pre-wrap;
  word-break: break-word;
}
.ticket-reply-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}
.ticket-reply-input { min-height: 3.5rem; }
.ticket-reply-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}
.ticket-reply-error { font-size: 0.8125rem; color: #b91c1c; margin-right: auto; }

.ticket-remove-form {
  margin: 0.875rem 0 0;
  display: flex;
  justify-content: flex-end;
}
.ticket-remove-btn {
  font: inherit;
  font-size: 0.8125rem;
  padding: 0.3125rem 0.75rem;
  border: 1px solid #fecaca;
  border-radius: 0.5rem;
  background: #fff;
  color: #b91c1c;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ticket-remove-btn:hover { background: #fef2f2; border-color: #fca5a5; }

/* ---------- Product updates ("What's new") ---------- */
/* Reuses .ticket-card / .ticket-text; the list mirrors .ticket-list. */
.update-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.update-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #18181b;
}
/* Push the date to the far end of the heading row, like the ticket header. */
.update-card .ticket-date { margin-left: auto; }

/* ---------- Digital ID card ---------- */
main.cardpage {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0 4rem;
}
.card-stage {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
}
.idcard-float {
  width: min(420px, 100%);
}
.idcard {
  position: relative;
  width: 100%;
  aspect-ratio: 27 / 43;
  border-radius: 1.75rem;
  overflow: hidden;
  color: #ffffff;
  background: var(--card-grad);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    0 30px 60px -18px var(--card-glow),
    0 8px 22px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
/* Tier looks for the card itself. The shimmer vars (--tier-dark/-bright) are
   re-pointed at bright values so the shared .status-text gradient stays
   legible on the card's jewel-toned background. The --holo/--shine vars make
   every effect richer and faster as the tier climbs, so each upgrade visibly
   outshines the last. */
.idcard.status-unactivated {
  --card-grad: linear-gradient(155deg, #18181b 0%, #34343a 38%, #52525b 72%, #a1a1aa 115%);
  --card-glow: rgba(82, 82, 91, 0.45);
  --tier-dark: #d4d4d8;
  --tier-bright: #ffffff;
  --holo-opacity: 0.05;
  --holo-speed: 16s;
  --shine-speed: 9s;
}
.idcard.status-ally {
  --card-grad: linear-gradient(155deg, #0a1738 0%, #14306e 38%, #1d4ed8 72%, #38bdf8 115%);
  --card-glow: rgba(29, 78, 216, 0.55);
  --tier-dark: #bfdbfe;
  --tier-bright: #ffffff;
  --holo-opacity: 0.1;
  --holo-speed: 13s;
  --shine-speed: 7.5s;
}
.idcard.status-super_ally {
  --card-grad: linear-gradient(155deg, #03190c 0%, #0f4023 38%, #15803d 72%, #4ade80 115%);
  --card-glow: rgba(21, 128, 61, 0.55);
  --tier-dark: #bbf7d0;
  --tier-bright: #ffffff;
  --holo-opacity: 0.18;
  --holo-speed: 9s;
  --shine-speed: 5.5s;
}
.idcard.status-ultimate_ally {
  --card-grad: linear-gradient(155deg, #1d1002 0%, #6a3b0a 36%, #b45309 68%, #fcd34d 112%);
  --card-glow: rgba(217, 119, 6, 0.6);
  --tier-dark: #fde68a;
  --tier-bright: #ffffff;
  --holo-opacity: 0.28;
  --holo-speed: 6s;
  --shine-speed: 4s;
}
/* Higher tiers breathe: the card's glow swells and fades, faster at the top. */
.idcard.status-super_ally { animation: card-aura 6s ease-in-out infinite; }
.idcard.status-ultimate_ally { animation: card-aura 4s ease-in-out infinite; }
/* Both frames carry the same four shadow layers (the halo is merely
   transparent at rest) — mismatched lists would snap instead of easing. */
@keyframes card-aura {
  0%, 100% {
    box-shadow:
      0 30px 60px -18px var(--card-glow),
      0 0 38px transparent,
      0 8px 22px rgba(0, 0, 0, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.35);
  }
  50% {
    box-shadow:
      0 30px 70px -14px var(--card-glow),
      0 0 38px var(--card-glow),
      0 8px 22px rgba(0, 0, 0, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.35);
  }
}
/* Holographic foil: a soft rainbow weave that slowly cycles hue. */
.idcard-holo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    115deg,
    rgba(255, 119, 225, 0.5) 0px,
    rgba(255, 227, 110, 0.5) 60px,
    rgba(110, 255, 188, 0.5) 120px,
    rgba(110, 196, 255, 0.5) 180px,
    rgba(255, 119, 225, 0.5) 240px
  );
  opacity: var(--holo-opacity, 0.16);
  mix-blend-mode: overlay;
  animation: holo-drift var(--holo-speed, 9s) linear infinite;
}
@keyframes holo-drift {
  from { filter: hue-rotate(0deg); }
  to { filter: hue-rotate(360deg); }
}
/* A glossy light band sweeping across the card. */
.idcard-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0.45) 48%,
    rgba(255, 255, 255, 0.12) 53%,
    transparent 62%,
    transparent 100%
  );
  background-size: 260% 100%;
  animation: card-shine var(--shine-speed, 5.5s) ease-in-out infinite;
}
@keyframes card-shine {
  0% { background-position: 110% 0; }
  55%, 100% { background-position: -45% 0; }
}
/* Twinkles scattered over the card — higher tiers earn more of them. */
.idcard-sparks { position: absolute; inset: 0; pointer-events: none; }
.idcard-sparks span {
  position: absolute;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
  opacity: 0;
  animation: status-twinkle 2.8s ease-in-out infinite;
}
.idcard-sparks span:nth-child(1) { top: 7%;  left: 12%; animation-delay: 0s; }
.idcard-sparks span:nth-child(2) { top: 16%; left: 78%; animation-delay: 0.4s; font-size: 0.625rem; }
.idcard-sparks span:nth-child(3) { top: 40%; left: 6%;  animation-delay: 0.8s; font-size: 0.75rem; }
.idcard-sparks span:nth-child(4) { top: 33%; left: 90%; animation-delay: 1.2s; }
.idcard-sparks span:nth-child(5) { top: 60%; left: 14%; animation-delay: 1.6s; font-size: 0.625rem; }
.idcard-sparks span:nth-child(6) { top: 72%; left: 84%; animation-delay: 2.0s; }
.idcard-sparks span:nth-child(7) { top: 87%; left: 28%; animation-delay: 2.4s; font-size: 0.75rem; }
.idcard-sparks span:nth-child(8) { top: 92%; left: 64%; animation-delay: 2.8s; font-size: 1rem; }
.idcard-sparks span:nth-child(9)  { top: 50%; left: 92%; animation-delay: 0.6s; font-size: 0.625rem; }
.idcard-sparks span:nth-child(10) { top: 12%; left: 34%; animation-delay: 1.4s; font-size: 0.75rem; }
.idcard-sparks span:nth-child(11) { top: 78%; left: 7%;  animation-delay: 2.2s; }
.idcard-sparks span:nth-child(12) { top: 96%; left: 44%; animation-delay: 3.0s; font-size: 0.625rem; }
/* Sparkle count climbs with the tier; the starting card has none. */
.idcard.status-unactivated .idcard-sparks span { display: none; }
.idcard.status-ally .idcard-sparks span:nth-child(n+5) { display: none; }
.idcard.status-super_ally .idcard-sparks span:nth-child(n+9) { display: none; }
/* Ultimate only: shooting stars streak diagonally across the card. */
.idcard.status-ultimate_ally .idcard-sparks::before,
.idcard.status-ultimate_ally .idcard-sparks::after {
  content: "";
  position: absolute;
  top: -4%;
  left: 96%;
  width: 110px;
  height: 2px;
  border-radius: 9999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 70%, #ffffff 100%);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.7));
  opacity: 0;
  animation: card-comet 7s ease-in infinite;
}
.idcard.status-ultimate_ally .idcard-sparks::after {
  top: 34%;
  width: 80px;
  animation-delay: 3.5s;
}
@keyframes card-comet {
  0% { transform: translate3d(0, 0, 0) rotate(135deg); opacity: 0; }
  3% { opacity: 1; }
  13%, 100% { transform: translate3d(-340px, 340px, 0) rotate(135deg); opacity: 0; }
}

.idcard-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 1.5rem 1.25rem;
}
.idcard-head { display: flex; align-items: center; justify-content: space-between; }
.idcard-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.idcard-brand .muted { color: rgba(255, 255, 255, 0.6); }
.idcard-brand-svg {
  width: 30px;
  height: 30px;
  display: inline-flex;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.idcard-brand-svg svg { width: 100%; height: auto; }
.idcard-type {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.idcard-blobs {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.idcard-blob {
  flex: 1;
  max-width: 13rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 1rem 0.75rem 0.75rem;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.idcard-blob svg {
  width: 100%;
  height: auto;
  max-height: 10rem;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.25));
  animation: blob-hover 3.2s ease-in-out infinite;
}
.idcard-blob-name {
  max-width: 100%;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Nothing picked yet: a dashed slot that sends the user to My blobs. */
.idcard-blob-empty {
  justify-content: center;
  gap: 0.625rem;
  min-height: 10rem;
  border-style: dashed;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: none;
  text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}
.idcard-blob-empty:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.12);
}
.idcard-blob-plus { font-size: 1.75rem; line-height: 1; opacity: 0.8; }
.idcard-blob-empty .idcard-blob-name {
  color: rgba(255, 255, 255, 0.75);
  white-space: normal;
  text-align: center;
  line-height: 1.45;
}
/* The tier banner — the card's centerpiece for the ally status. */
.idcard-tier {
  position: relative;
  overflow: hidden;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 2.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 22px var(--card-glow);
}
.idcard-tier .status-text {
  font-size: 1.3125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* The banner steps up with the tier: brighter ring for super, a gilded
   gradient border for ultimate. */
.idcard.status-super_ally .idcard-tier {
  border-color: rgba(255, 255, 255, 0.65);
}
.idcard.status-ultimate_ally .idcard-tier {
  border-color: transparent;
  background:
    linear-gradient(rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.26)) padding-box,
    linear-gradient(120deg, #fde68a, #fffbeb, #f59e0b, #fde68a) border-box;
}
/* Lower tiers show fewer of the banner's six sparkles. */
.idcard.status-ally .idcard-tier .sparkle:nth-child(n+3) { display: none; }
.idcard.status-super_ally .idcard-tier .sparkle:nth-child(n+5) { display: none; }
.idcard-fields { display: flex; flex-direction: column; gap: 0.875rem; }
.idcard-label {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.idcard-name {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  overflow-wrap: anywhere;
}
/* No name set yet: point the user at account settings. */
.idcard-name-missing {
  display: inline-block;
  font-size: 0.9375rem;
  font-weight: 600;
  font-style: italic;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 3px;
  transition: color 0.15s, text-decoration-color 0.15s;
}
.idcard-name-missing:hover {
  color: #ffffff;
  text-decoration-color: currentColor;
}
.idcard-number {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 0 14px rgba(255, 255, 255, 0.25);
}
.idcard-foot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.25rem;
}
.idcard-foot-info {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-right: auto;
  text-align: left;
  min-width: 0;
}
.idcard-since { font-size: 0.6875rem; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.6); }
.idcard-verify-hint {
  font-size: 0.625rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
  overflow-wrap: anywhere;
}
/* The QR code linking to this card's public /verify page. White tile so
   scanners get the contrast (and quiet zone) they need. */
.idcard-qr {
  flex-shrink: 0;
  display: inline-flex;
  width: 92px;
  height: 92px;
  padding: 6px;
  border-radius: 0.625rem;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.idcard-qr svg { display: block; width: 100%; height: 100%; }

/* Mobile: the card is the experience — let it fill the screen below the
   header (card.js keeps --header-h in sync as the nav wraps). */
@media (max-width: 640px) {
  .card-stage { padding: 0.25rem 0 1rem; }
  .idcard {
    aspect-ratio: auto;
    height: calc(100dvh - var(--header-h, 6.5rem) - 1.75rem);
    min-height: 30rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .idcard.status-super_ally,
  .idcard.status-ultimate_ally,
  .idcard-holo,
  .idcard-shine,
  .idcard-blob svg,
  .idcard.status-ultimate_ally .idcard-sparks::before,
  .idcard.status-ultimate_ally .idcard-sparks::after,
  .idcard-sparks span { animation: none; }
  .idcard-sparks span { opacity: 0.6; }
}

/* Card verification (public page behind the card's QR code) */
main.verify {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 0 4rem;
}
.verify-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}
.verify-mark { width: 72px; height: 72px; }
.verify-mark circle { stroke-width: 4; }
.verify-mark path {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.verify-mark.ok { animation: verify-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.verify-mark.ok circle { fill: #dcfce7; stroke: #16a34a; }
.verify-mark.ok path {
  stroke: #16a34a;
  stroke-dasharray: 42;
  stroke-dashoffset: 42;
  animation: verify-draw 0.45s ease-out 0.3s forwards;
}
.verify-mark.bad circle { fill: #fee2e2; stroke: #dc2626; }
.verify-mark.bad path { stroke: #dc2626; }
@keyframes verify-pop {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes verify-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .verify-mark.ok { animation: none; }
  .verify-mark.ok path { animation: none; stroke-dashoffset: 0; }
}
.verify-title { margin: 0; font-size: 1.75rem; letter-spacing: -0.025em; }
.verify-title.ok { color: #16a34a; }
.verify-title.bad { color: #dc2626; }
.verify-heading { margin: 0 0 0.5rem; font-size: 1.5rem; letter-spacing: -0.025em; }
.verify-sub { margin: 0; max-width: 26rem; font-size: 0.9375rem; color: #71717a; }
.verify-form {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  max-width: 22rem;
  margin-top: 1.5rem;
}
.verify-input {
  flex: 1;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
}
.verify-again { margin: 0.25rem 0 0; font-size: 0.875rem; }
.verify-again a { font-weight: 600; }

/* Gallery: feature-on-ID-card toggle (one blob stars on the card). */
.card-star {
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  color: #71717a;
  padding: 0.5rem 0.625rem;
  border-radius: 9999px;
  border: 1px solid #e4e4e7;
  background: #ffffff;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.card-star:hover { border-color: #f59e0b; color: #b45309; }
.card-star.on { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.card-star.on:hover { border-color: #f59e0b; }

/* Dark mode */
:root[data-theme="dark"] {
  --bg-base: #09090b;
  body { color: #fafafa; background: #09090b; }
  .page { background: linear-gradient(135deg, #09090b 0%, #000000 50%, #18181b 100%); }
  .brand-name { color: #fafafa; }
  .brand-name .muted { color: #a1a1aa; }
  .source-link { color: #d4d4d8; }
  .source-link:hover { color: #fafafa; }
  .nav-link { color: #a1a1aa; }
  .nav-link:hover { color: #fafafa; }
  .nav-link.is-active { color: #fafafa; }
  .user-chip { color: #e4e4e7; background: #18181b; border-color: #27272a; }
  a.user-chip:hover { border-color: #52525b; color: #fafafa; }
  .logout-btn { color: #a1a1aa; }
  .logout-btn:hover { color: #f87171; }

  .stage-frame { background: #09090b; border-color: #27272a; }
  .stage-blob { filter: drop-shadow(0 24px 40px rgba(0,0,0,0.6)); }
  .stage-glow { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.04), transparent 60%); }
  .nametag { background: rgba(24,24,27,0.9); border-color: #27272a; }
  .nametag-name { color: #fafafa; }
  .nametag-pronouns { color: #a1a1aa; }

  .btn-primary { background: #ffffff; color: #18181b; }
  .btn-primary:hover { background: #e4e4e7; }
  .btn-nav { background: #fafafa; color: #18181b; }
  .btn-nav:hover { background: #d4d4d8; }
  .btn-nav.is-active { background: #6366f1; color: #ffffff; }
  .btn-nav.is-active:hover { background: #818cf8; }
  .btn-secondary { background: #18181b; border-color: #27272a; color: #fafafa; }
  .btn-secondary:hover { border-color: #52525b; }

  .anim-chip { background: #18181b; border-color: #27272a; color: #a1a1aa; }
  .anim-chip:hover { border-color: #52525b; color: #fafafa; }
  .anim-chip.selected { background: #ffffff; color: #18181b; border-color: #ffffff; }

  .share-input { background: #18181b; border-color: #27272a; color: #d4d4d8; }
  .share-input:focus { border-color: #52525b; }

  .profile-card { background: #09090b; border-color: #27272a; }
  .pc-label { color: #a1a1aa; }
  .pc-val { color: #d4d4d8; }
  .pc-trait { background: #27272a; color: #e4e4e7; }

  .auth-card { background: #09090b; border-color: #27272a; }
  .auth-input,
  .auth-card input[type="text"],
  .auth-card input[type="password"] { background: #18181b; border-color: #27272a; color: #fafafa; }
  .auth-input:focus,
  .auth-card input[type="text"]:focus,
  .auth-card input[type="password"]:focus { border-color: #52525b; }
  .pw-rules li.ok, .email-status.ok, .auth-saved { color: #22c55e; }
  .auth-status { background: #18181b; border-color: #27272a; color: #a1a1aa; }
  .status-ally {
    --tier-dark: #60a5fa;
    --tier-bright: #bae6fd;
    --tier-border: #1e3a8a;
    --tier-bg: #101a2e;
  }
  .status-super_ally {
    --tier-dark: #4ade80;
    --tier-bright: #bbf7d0;
    --tier-border: #14532d;
    --tier-bg: #0d2117;
  }
  .status-ultimate_ally {
    --tier-dark: #fbbf24;
    --tier-bright: #fef08a;
    --tier-border: #78350f;
    --tier-bg: linear-gradient(120deg, #1f1607, #2b1d08, #1f1607);
  }

  .editor-card { background: #09090b; border-color: #27272a; }
  .tabs { border-color: #27272a; }
  .tab:hover { color: #d4d4d8; }
  .tab.active { color: #fafafa; }
  .tab.active::after { background: #ffffff; }

  .section-title { color: #a1a1aa; }
  .swatch.selected { box-shadow: 0 0 0 2px #09090b, 0 0 0 4px #ffffff; }
  .color-name { color: #a1a1aa; }
  .chip { background: #27272a; color: #e4e4e7; }
  .chip:hover { background: #3f3f46; }
  .chip.selected { background: #ffffff; color: #18181b; }
  .chip.selected:hover { background: #ffffff; }
  .section-search { background: #18181b; border-color: #27272a; color: #fafafa; }
  .section-search:focus { border-color: #52525b; box-shadow: 0 0 0 3px rgba(255,255,255,0.06); }
  .see-more { background: #6366f1; border-color: transparent; color: #ffffff; }
  .see-more:hover { background: #818cf8; }
  .section-empty { color: #71717a; }
  .chip.missing-chip { background: #ec4899; border-color: transparent; color: #ffffff; }
  .chip.missing-chip:hover { background: #f472b6; }
  .feedback-overlay { background: rgba(0, 0, 0, 0.6); }
  .feedback-modal { background: #09090b; border-color: #27272a; }
  .feedback-title { color: #fafafa; }
  .feedback-hint { color: #a1a1aa; }
  .feedback-link { color: #fafafa; }

  .field-label { color: #a1a1aa; }
  .input { background: #18181b; border-color: #27272a; color: #fafafa; }
  .input:focus { border-color: #52525b; box-shadow: 0 0 0 3px rgba(255,255,255,0.06); }

  .export-row { background: #18181b; border-color: #27272a; }
  .export-row:hover:not([disabled]) { border-color: #52525b; }
  .export-row .label { color: #fafafa; }
  .export-row .hint { color: #a1a1aa; }

  .gallery-title { color: #fafafa; }
  .card { background: #09090b; border-color: #27272a; }
  .card-new { background: transparent; color: #71717a; }
  .card-new:hover { border-color: #52525b; color: #fafafa; }
  .card-preview { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.04), transparent 60%); }
  .card-name { color: #fafafa; }
  .card-delete { color: #71717a; }
  .card-delete:hover { color: #f87171; }

  .ticket-form { background: #09090b; border-color: #27272a; }
  .ticket-card { background: #09090b; border-color: #27272a; }
  .ticket-text { color: #d4d4d8; }
  .update-title { color: #fafafa; }
  .ticket-queue { color: #e4e4e7; background: #18181b; border-color: #27272a; }
  .ticket-msg { background: #18181b; border-color: #27272a; }
  .ticket-msg-support { background: #1f1f23; }
  .ticket-msg-who { color: #d4d4d8; }
  .ticket-msg-body { color: #d4d4d8; }
  .ticket-status.status-received { background: #172554; color: #93c5fd; border-color: #1e3a8a; }
  .ticket-status.status-in-review { background: #422006; color: #fcd34d; border-color: #713f12; }
  .ticket-status.status-selected-for-development { background: #2e1065; color: #c4b5fd; border-color: #4c1d95; }
  .ticket-status.status-in-progress { background: #431407; color: #fdba74; border-color: #7c2d12; }
  .ticket-status.status-testing { background: #083344; color: #67e8f9; border-color: #155e75; }
  .ticket-status.status-in-release-queue { background: #4a044e; color: #f0abfc; border-color: #701a75; }
  .ticket-status.status-implemented { background: #052e16; color: #86efac; border-color: #14532d; }
  .ticket-status.status-backlogged { background: #18181b; color: #a1a1aa; border-color: #27272a; }
  .ticket-status-popover { background: #27272a; color: #fafafa; border: 1px solid #3f3f46; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55); }
  .ticket-status-popover::before { border-bottom-color: #3f3f46; }
  .ticket-remove-btn { background: #09090b; color: #f87171; border-color: #7f1d1d; }
  .ticket-remove-btn:hover { background: #1f0a0a; border-color: #991b1b; }

  /* Digital ID card — the card itself is jewel-toned in both schemes;
     only the page chrome around it needs a dark pass. */
  .idcard { border-color: rgba(255, 255, 255, 0.22); }
  .verify-heading { color: #fafafa; }
  .verify-sub { color: #a1a1aa; }
  .verify-title.ok { color: #22c55e; }
  .verify-title.bad { color: #f87171; }
  .verify-mark.ok circle { fill: #052e16; stroke: #22c55e; }
  .verify-mark.ok path { stroke: #22c55e; }
  .verify-mark.bad circle { fill: #450a0a; stroke: #f87171; }
  .verify-mark.bad path { stroke: #f87171; }
  .card-star { background: #18181b; border-color: #27272a; color: #a1a1aa; }
  .card-star:hover { border-color: #b45309; color: #fbbf24; }
  .card-star.on { background: #2b1d08; border-color: #78350f; color: #fbbf24; }
  .card-star.on:hover { border-color: #b45309; }
}

/* ===== Upgrade status & Invite friend pages ===== */

.upgrade { padding: 1.5rem 0 3rem; }

.upgrade-banner {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid #bfdbfe;
  border-radius: 0.625rem;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.875rem;
}
.upgrade-banner.ok { border-color: #bbf7d0; background: #f0fdf4; color: #15803d; }
.upgrade-banner.err { border-color: #fecaca; background: #fef2f2; color: #dc2626; }

.upgrade-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.upgrade-summary-item {
  border: 1px solid #e4e4e7;
  border-radius: 14px;
  background: #fff;
  padding: 1rem 1.25rem;
}
.upgrade-summary-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #a1a1aa;
  margin-bottom: 0.5rem;
}
.upgrade-count { font-size: 1.5rem; margin: 0 0 0.25rem; }
.upgrade-note { font-size: 0.8125rem; color: #71717a; margin: 0.25rem 0 0; }
.referral-form .upgrade-note { display: block; margin-bottom: 0.5rem; }
.referral-row { display: flex; gap: 0.5rem; }
.referral-row .input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.1em; }
.referral-row .btn { flex: none; }

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  align-items: stretch;
}
.plan-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tier-border, #e4e4e7);
  border-radius: 14px;
  background: #fff;
  padding: 1.25rem;
}
/* The user's current plan stands out: lifted, with a tier-coloured ring and
   twinkling sparkles scattered across the card so the active card is obvious. */
.plan-card.plan-current {
  position: relative;
  border-color: var(--tier-bright, #e4e4e7);
  transform: translateY(-4px);
  box-shadow: 0 0 0 3px var(--tier-bright, #e4e4e7), 0 8px 24px -8px var(--tier-bright, #e4e4e7);
}
/* Spread the twinkles across the whole card (the base .status-sparkles
   positions are tuned for the small status chip). */
.plan-card .status-sparkles .sparkle:nth-child(1) { top: 14%; left: 12%; animation-delay: 0s; }
.plan-card .status-sparkles .sparkle:nth-child(2) { top: 34%; left: 86%; animation-delay: 0.4s; font-size: 0.75rem; }
.plan-card .status-sparkles .sparkle:nth-child(3) { top: 62%; left: 22%; animation-delay: 0.8s; }
.plan-card .status-sparkles .sparkle:nth-child(4) { top: 78%; left: 78%; animation-delay: 1.2s; font-size: 0.75rem; }
.plan-card .status-sparkles .sparkle:nth-child(5) { top: 46%; left: 50%; animation-delay: 1.6s; font-size: 0.5rem; }
.plan-card .status-sparkles .sparkle:nth-child(6) { top: 88%; left: 42%; animation-delay: 2s; }
.plan-name { font-size: 1.125rem; margin: 0 0 0.25rem; }
.plan-price { font-size: 1.75rem; font-weight: 800; margin: 0 0 0.75rem; }
.plan-price-note { font-size: 0.8125rem; font-weight: 500; color: #a1a1aa; }
/* Small "AUD" marker after a price; em-sized + currentColor so it works on
   both the large card price and the coloured Pay button. */
.plan-price-cur { font-size: 0.6em; font-weight: 600; opacity: 0.65; margin-left: 0.15em; vertical-align: 0.15em; }
/* Approximate converted price shown beneath the AUD price for overseas
   visitors (geo-detected). Reference only — the real charge is in their
   local currency at Stripe checkout. */
.plan-price-est { font-size: 0.8125rem; font-weight: 600; color: #a1a1aa; margin: -0.5rem 0 0.75rem; cursor: help; }
.plan-price-was {
  font-size: 1.125rem;
  font-weight: 600;
  color: #a1a1aa;
  text-decoration: line-through;
  margin-right: 0.2rem;
}
.plan-perks {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  font-size: 0.875rem;
  color: #52525b;
  flex: 1;
}
.plan-perks li { padding: 0.2rem 0 0.2rem 1.25rem; position: relative; }
.plan-perks li::before { content: "✓"; position: absolute; left: 0; color: var(--tier-dark, #71717a); }
.plan-btn { width: 100%; }
.plan-or {
  text-align: center;
  font-size: 0.75rem;
  color: #a1a1aa;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0.5rem 0;
}
.plan-state {
  margin: 0;
  padding: 0.55rem 0;
  text-align: center;
  font-size: 0.875rem;
  color: #71717a;
}
.plan-state.current {
  color: var(--tier-dark, #71717a);
  font-weight: 700;
  align-self: center;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--tier-bright, #e4e4e7);
}
.plan-invites { font-size: 0.8125rem; color: #71717a; margin: 0; text-align: center; }
.upgrade-fineprint { font-size: 0.75rem; color: #a1a1aa; margin-top: 1.5rem; }

/* Locked Look panel (unactivated accounts in the studio editor). */
.look-locked {
  text-align: center;
  padding: 1.5rem 0.75rem 1rem;
}
.look-locked-icon { font-size: 1.75rem; display: block; margin-bottom: 0.5rem; }
.look-locked-title { font-size: 1rem; font-weight: 700; margin: 0 0 0.4rem; }
.look-locked-text { font-size: 0.85rem; color: #71717a; line-height: 1.5; margin: 0 0 1rem; }
.look-locked-btn { display: inline-block; }

.invite-code {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
}
.invite-stats {
  margin: 1.25rem 0 0;
  padding: 0.625rem 0.75rem;
  border: 1px solid #e4e4e7;
  border-radius: 0.5rem;
  background: #fafafa;
  font-size: 0.875rem;
  color: #52525b;
}

:root[data-theme="dark"] {
  .upgrade-banner { background: #172554; border-color: #1e3a8a; color: #93c5fd; }
  .upgrade-banner.ok { background: #052e16; border-color: #166534; color: #86efac; }
  .upgrade-banner.err { background: #450a0a; border-color: #7f1d1d; color: #fca5a5; }
  .upgrade-summary-item, .plan-card { background: #09090b; border-color: #27272a; }
  .plan-card { border-color: var(--tier-border-dark, #27272a); }
  .plan-card.plan-current { box-shadow: 0 0 0 2px var(--tier-border-dark, #27272a); }
  .plan-perks { color: #a1a1aa; }
  .status-ally { --tier-border-dark: #1e3a8a; }
  .status-super_ally { --tier-border-dark: #166534; }
  .status-ultimate_ally { --tier-border-dark: #78350f; }
  .invite-stats { background: #18181b; border-color: #27272a; color: #a1a1aa; }
  .look-locked-text { color: #a1a1aa; }
}

/* ---- Triage board (superuser ticket queue) ---- */
.triage { padding-bottom: 3rem; }
.triage-sub { margin: 0.25rem 0 0; font-size: 0.875rem; color: #71717a; }
.triage-table-wrap {
  overflow-x: auto;
  border: 1px solid #e4e4e7;
  border-radius: 0.75rem;
  background: #fff;
}
.triage-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.triage-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #71717a;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e4e4e7;
  white-space: nowrap;
}
.triage-table tbody td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid #f4f4f5;
  vertical-align: top;
}
.triage-table tbody tr:last-child td { border-bottom: none; }
.triage-row[disabled] { opacity: 0.5; }
.triage-q { width: 2.5rem; font-weight: 700; color: #3f3f46; }
.triage-user { white-space: nowrap; }
.triage-user-name { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.triage-priority { white-space: nowrap; color: #52525b; }
.triage-desc { min-width: 16rem; max-width: 28rem; color: #3f3f46; }
.triage-date { white-space: nowrap; color: #71717a; }
.triage-status-col { width: 1%; white-space: nowrap; }
.triage-status {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.triage-status[disabled] { opacity: 0.6; }
.triage-status-opt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  cursor: pointer;
}
.triage-status-opt input { cursor: pointer; }
.triage-status-close span { color: #b91c1c; font-weight: 600; }

.triage-thread-toggle {
  display: inline-block;
  margin-top: 0.5rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.1875rem 0.5rem;
  border: 1px solid #e4e4e7;
  border-radius: 0.5rem;
  background: #fafafa;
  color: #52525b;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.triage-thread-toggle:hover { background: #f4f4f5; border-color: #d4d4d8; }
.triage-thread-toggle[aria-expanded="true"] { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
.triage-thread-row > td { background: #fafafa; padding: 1rem; }
.triage-thread-row .ticket-msg { background: #fff; }
.triage-thread-row .ticket-reply-form { margin-bottom: 0; }

/* Status-board search box: an icon sits inside the field, which filters the
   user rows as you type. */
.triage-search { position: relative; margin: 0 0 1rem; max-width: 24rem; }
.triage-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #a1a1aa;
  pointer-events: none;
}
.triage-search-input { width: 100%; padding-left: 2.25rem; }

:root[data-theme="dark"] {
  .triage-search-icon { color: #71717a; }
  .triage-table-wrap { background: #09090b; border-color: #27272a; }
  .triage-table thead th { color: #a1a1aa; border-bottom-color: #27272a; }
  .triage-table tbody td { border-bottom-color: #18181b; }
  .triage-q { color: #d4d4d8; }
  .triage-desc, .triage-priority { color: #d4d4d8; }
  .triage-date, .triage-sub { color: #a1a1aa; }
  .triage-status-close span { color: #fca5a5; }
  .triage-thread-toggle { background: #18181b; border-color: #27272a; color: #d4d4d8; }
  .triage-thread-toggle:hover { background: #1f1f23; border-color: #3f3f46; }
  .triage-thread-toggle[aria-expanded="true"] { background: #1e1b4b; border-color: #3730a3; color: #c7d2fe; }
  .triage-thread-row > td { background: #09090b; }
  .triage-thread-row .ticket-msg { background: #18181b; }
}