/*
 * Emerald Pitch visual system
 * Central, visual-only theme layer for every public, collector, and admin view.
 * Existing selectors, controls, status meaning, and interaction wiring remain intact.
 */

@font-face {
  font-family: "Anton";
  src: url("/fonts/anton/anton-latin.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Geist";
  src: url("/fonts/geist/geist-latin-variable.woff2") format("woff2-variations");
  font-display: swap;
  font-style: normal;
  font-weight: 400 800;
}

:root {
  color-scheme: dark;
  --pitch-950: #020b07;
  --pitch-925: #020f0a;
  --pitch-900: #041710;
  --pitch-850: #072219;
  --pitch-800: #0a2d20;
  --pitch-700: #125239;
  --pitch-600: #167350;
  --pitch-500: #0fb979;
  --pitch-400: #18d98a;
  --pitch-300: #76e5b1;
  --gold-500: #d8a62a;
  --gold-400: #f2c94c;
  --gold-300: #ffe18a;
  --ivory: #f5f3e8;
  --ink-soft: #cddcd3;
  --ink-muted: #8eaa9a;
  --line: rgba(118, 229, 177, 0.14);
  --line-strong: rgba(242, 201, 76, 0.28);
  --glass: rgba(4, 24, 16, 0.86);
  --glass-solid: #071f16;
  --glass-soft: rgba(8, 40, 27, 0.62);
  --shadow-card: 0 18px 48px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(118, 229, 177, 0.035);
  --shadow-gold: 0 10px 28px rgba(216, 166, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --focus: #ffe18a;
}

html {
  min-width: 320px;
  background: var(--pitch-950);
  scroll-behavior: smooth;
}

body.bg-slate-100 {
  position: relative;
  overflow-x: clip;
  background:
    linear-gradient(90deg, rgba(0, 5, 3, 0.9) 0%, rgba(1, 9, 6, 0.38) 14%, transparent 31%, transparent 69%, rgba(1, 9, 6, 0.38) 86%, rgba(0, 5, 3, 0.9) 100%),
    radial-gradient(ellipse 66vw 54vh at 50% 12%, rgba(11, 104, 70, 0.3) 0%, rgba(6, 62, 42, 0.18) 42%, rgba(2, 15, 10, 0) 74%),
    radial-gradient(ellipse 54vw 40vh at 50% 72%, rgba(9, 74, 49, 0.12), rgba(2, 15, 10, 0) 76%),
    linear-gradient(180deg, var(--pitch-925) 0%, #010805 100%) !important;
  background-attachment: fixed !important;
  color: var(--ivory) !important;
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -0.008em;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  opacity: 0.22;
  background-image:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(118, 229, 177, 0.13) 50%, transparent calc(50% + 1px)),
    radial-gradient(circle at 50% 42%, transparent 0 7.8rem, rgba(118, 229, 177, 0.11) 7.9rem 8rem, transparent 8.1rem),
    linear-gradient(rgba(118, 229, 177, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118, 229, 177, 0.04) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 44px 44px, 44px 44px;
  mask-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0.54) 70%, transparent);
}

::selection {
  background: var(--gold-400);
  color: var(--pitch-950);
}

main {
  position: relative;
  z-index: 1;
  width: 100%;
}

h1,
h2 {
  font-family: "Anton", "Arial Narrow", Impact, sans-serif;
  font-weight: 400 !important;
  letter-spacing: 0.018em;
  text-wrap: balance;
}

h1 {
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

p,
li,
dd,
dt {
  text-wrap: pretty;
}

a {
  text-underline-offset: 0.2em;
}

button,
a,
input,
select,
textarea,
summary,
[role="button"],
[tabindex] {
  -webkit-tap-highlight-color: transparent;
}

:where(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
  outline: 3px solid var(--focus) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px rgba(242, 201, 76, 0.2) !important;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
[contenteditable="true"] {
  min-height: 48px;
  border-color: rgba(149, 213, 176, 0.28) !important;
  background: rgba(2, 11, 7, 0.72) !important;
  color: var(--ivory) !important;
  caret-color: var(--gold-300);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

input::placeholder,
textarea::placeholder {
  color: #82a08f !important;
  opacity: 1;
}

select {
  color-scheme: dark;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--pitch-400);
}

hr {
  border-color: var(--line) !important;
}

/* Shared glass surfaces: utility names remain unchanged for stable templates. */
.bg-white,
.bg-slate-50,
.bg-slate-100 {
  border-color: var(--line) !important;
  background-color: var(--glass) !important;
  background-image:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 45%),
    radial-gradient(circle at 100% 0, rgba(24, 217, 138, 0.045), transparent 13rem) !important;
}

/* Mid-slate utilities are pills and compact controls in the base UI. Keep
   them dark so inherited light theme text can never become pale-on-pale. */
.bg-slate-200,
.bg-slate-300 {
  border-color: rgba(149, 213, 176, 0.24) !important;
  background-color: #132a20 !important;
  background-image: linear-gradient(145deg, rgba(142, 170, 154, 0.09), rgba(2, 11, 7, 0.16)) !important;
}

.bg-white.rounded-lg,
.bg-white.rounded-xl,
.bg-white.rounded-2xl,
.bg-white.rounded-3xl,
.bg-slate-50.rounded-lg,
.bg-slate-50.rounded-xl,
.bg-slate-100.rounded-lg,
section.bg-white,
article.bg-white {
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  box-shadow: var(--shadow-card) !important;
}

.bg-slate-950,
.bg-slate-900,
.bg-slate-800,
.bg-slate-700,
.bg-slate-600,
.from-slate-800,
.from-slate-900,
.to-slate-800,
.to-slate-900 {
  border-color: rgba(123, 225, 177, 0.18) !important;
  background-color: var(--pitch-900) !important;
  background-image:
    linear-gradient(135deg, rgba(18, 82, 57, 0.68), rgba(2, 11, 7, 0.95)),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 8px) !important;
}

.hover\:bg-slate-50:hover,
.hover\:bg-slate-100:hover,
.hover\:bg-slate-600:hover,
.hover\:bg-slate-700:hover,
.hover\:bg-slate-800:hover,
.hover\:bg-slate-900:hover {
  background-color: rgba(31, 157, 108, 0.24) !important;
  background-image: linear-gradient(135deg, rgba(66, 201, 141, 0.1), transparent) !important;
}

.text-slate-950,
.text-slate-900,
.text-slate-800,
.text-slate-700,
.text-white {
  color: var(--ivory) !important;
}

.text-slate-600,
.text-slate-500 {
  color: var(--ink-soft) !important;
}

.text-slate-400,
.text-slate-300,
.text-slate-200 {
  color: var(--ink-muted) !important;
}

.border-slate-50,
.border-slate-100,
.border-slate-200,
.border-slate-300,
.border-slate-400,
.border-slate-500,
.border-slate-600,
.border-slate-700,
.border-slate-800,
.divide-slate-100 > :not([hidden]) ~ :not([hidden]),
.divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--line) !important;
}

.ring-slate-100,
.ring-slate-200,
.ring-slate-300 {
  --tw-ring-color: var(--line) !important;
}

/* Gold is the trophy/foil action color. */
.bg-amber-300,
.bg-amber-400,
.bg-amber-500 {
  border-color: rgba(255, 225, 138, 0.55) !important;
  background-color: var(--gold-400) !important;
  background-image:
    linear-gradient(112deg, #9f6f10 0%, #f8d86c 24%, #fff1ae 43%, #d9a626 65%, #f6d873 82%, #ac7611 100%) !important;
  color: #171006 !important;
  box-shadow: var(--shadow-gold) !important;
}

.hover\:bg-amber-200:hover,
.hover\:bg-amber-300:hover,
.hover\:bg-amber-400:hover {
  background-color: var(--gold-300) !important;
  background-image: linear-gradient(112deg, #c08c1c, #ffe995 44%, #e6b837 72%, #f9dc77) !important;
  color: #171006 !important;
}

.text-amber-950,
.text-amber-900,
.text-amber-800 {
  color: #ffebaa !important;
}

.bg-amber-300 .text-amber-950,
.bg-amber-400 .text-amber-950,
.bg-amber-500 .text-amber-950,
.bg-amber-300.text-amber-950,
.bg-amber-400.text-amber-950,
.bg-amber-500.text-amber-950 {
  color: #171006 !important;
}

.text-amber-700,
.text-amber-600,
.text-amber-500,
.text-amber-400,
.text-amber-300,
.text-amber-200 {
  color: var(--gold-300) !important;
}

.bg-amber-50,
.bg-amber-100 {
  border-color: rgba(242, 201, 76, 0.35) !important;
  background-color: rgba(104, 75, 12, 0.22) !important;
  background-image: linear-gradient(135deg, rgba(242, 201, 76, 0.1), transparent) !important;
}

.border-amber-100,
.border-amber-200,
.border-amber-300,
.border-amber-400,
.border-amber-500 {
  border-color: var(--line-strong) !important;
}

.ring-amber-100,
.ring-amber-200,
.ring-amber-300,
.ring-amber-400 {
  --tw-ring-color: rgba(242, 201, 76, 0.3) !important;
}

/* Emerald remains the pitch/success family, tuned for dark surfaces. */
.bg-emerald-50,
.bg-emerald-100 {
  border-color: rgba(66, 201, 141, 0.3) !important;
  background-color: rgba(16, 93, 63, 0.24) !important;
  background-image: linear-gradient(135deg, rgba(66, 201, 141, 0.1), transparent) !important;
}

.bg-emerald-500,
.bg-emerald-600,
.bg-emerald-700 {
  background-color: var(--pitch-600) !important;
  background-image: linear-gradient(135deg, #1ba672, #0d5c40) !important;
  color: #f4fff8 !important;
}

.text-emerald-950,
.text-emerald-900,
.text-emerald-800,
.text-emerald-700,
.text-emerald-600,
.text-emerald-500,
.text-emerald-400 {
  color: var(--pitch-300) !important;
}

.border-emerald-100,
.border-emerald-200,
.border-emerald-300,
.border-emerald-400 {
  border-color: rgba(66, 201, 141, 0.34) !important;
}

/* Eliminate legacy blue/indigo/sky accents without changing template tokens. */
.bg-blue-50,
.bg-blue-100,
.bg-blue-500,
.bg-blue-600,
.bg-sky-50,
.bg-sky-100,
.bg-sky-400,
.bg-sky-500,
.bg-sky-600,
.bg-indigo-50,
.bg-indigo-100,
.bg-indigo-500,
.bg-indigo-600,
.bg-violet-50,
.bg-violet-100,
.bg-violet-500,
.bg-violet-600 {
  border-color: rgba(66, 201, 141, 0.3) !important;
  background-color: rgba(16, 93, 63, 0.3) !important;
  background-image: linear-gradient(135deg, rgba(66, 201, 141, 0.18), rgba(4, 19, 13, 0.44)) !important;
  color: var(--pitch-300) !important;
}

.text-blue-950,
.text-blue-900,
.text-blue-800,
.text-blue-700,
.text-blue-600,
.text-sky-950,
.text-sky-900,
.text-sky-800,
.text-sky-700,
.text-sky-600,
.text-sky-500,
.text-indigo-950,
.text-indigo-900,
.text-indigo-800,
.text-indigo-700,
.text-indigo-600,
.text-violet-950,
.text-violet-900,
.text-violet-800,
.text-violet-700,
.text-violet-600 {
  color: var(--pitch-300) !important;
}

.border-blue-100,
.border-blue-200,
.border-blue-300,
.border-sky-100,
.border-sky-200,
.border-sky-300,
.border-indigo-100,
.border-indigo-200,
.border-indigo-300,
.border-violet-100,
.border-violet-200,
.border-violet-300 {
  border-color: rgba(66, 201, 141, 0.34) !important;
}

.ring-blue-300,
.ring-blue-400,
.ring-blue-500,
.ring-sky-300,
.ring-sky-400,
.ring-sky-500,
.ring-indigo-300,
.ring-indigo-400,
.ring-indigo-500,
.ring-violet-300,
.ring-violet-400,
.ring-violet-500 {
  --tw-ring-color: var(--gold-400) !important;
}

.hover\:bg-blue-50:hover,
.hover\:bg-sky-50:hover,
.hover\:bg-indigo-50:hover,
.hover\:bg-violet-50:hover {
  background-color: rgba(31, 157, 108, 0.2) !important;
}

/* Red/rose retain semantic meaning, shifted to accessible dark glass. */
.bg-red-50,
.bg-red-100,
.bg-rose-50,
.bg-rose-100 {
  background-color: rgba(127, 29, 29, 0.28) !important;
  border-color: rgba(252, 165, 165, 0.32) !important;
}

.text-red-950,
.text-red-900,
.text-red-800,
.text-red-700,
.text-rose-950,
.text-rose-900,
.text-rose-800,
.text-rose-700 {
  color: #fecaca !important;
}

.bg-red-500,
.bg-red-600,
.bg-rose-500,
.bg-rose-600 {
  background-color: #9f3030 !important;
  color: white !important;
}

table {
  border-color: var(--line) !important;
}

thead,
tfoot {
  background: rgba(2, 11, 7, 0.5) !important;
}

tbody tr {
  border-color: var(--line) !important;
}

tbody tr:hover {
  background: rgba(66, 201, 141, 0.055);
}

code,
pre {
  border-color: var(--line) !important;
  background: rgba(2, 11, 7, 0.7) !important;
  color: var(--gold-300) !important;
}

details {
  transition: border-color 180ms ease, transform 180ms ease;
}

details[open] {
  border-color: var(--line-strong) !important;
}

details > summary::marker {
  color: var(--gold-400);
}

/* Sticky stadium-glass header, darkened by nav.js after scrolling. */
.site-header {
  position: sticky !important;
  top: 0;
  z-index: 70 !important;
  border-bottom: 1px solid rgba(123, 225, 177, 0.16);
  background:
    linear-gradient(90deg, rgba(4, 19, 13, 0.92), rgba(9, 52, 35, 0.88), rgba(4, 19, 13, 0.92)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
  transition: background-color 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.site-header.is-scrolled {
  border-bottom-color: rgba(242, 201, 76, 0.26);
  background: rgba(2, 11, 7, 0.96) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.44), 0 1px 0 rgba(242, 201, 76, 0.08);
}

.site-brand {
  font-family: "Anton", "Arial Narrow", Impact, sans-serif;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.site-brand__ball {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 1px solid rgba(242, 201, 76, 0.36);
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #2ba978, #073121 66%);
  box-shadow: 0 0 24px rgba(66, 201, 141, 0.2);
}

.nav-pill,
.nav-icon-pill {
  border-color: rgba(149, 213, 176, 0.2) !important;
  background: rgba(2, 11, 7, 0.34) !important;
  color: var(--ink-soft) !important;
  border-radius: 0.8rem !important;
}

.nav-pill:hover,
.nav-icon-pill:hover,
.nav-pill:focus-visible,
.nav-icon-pill:focus-visible,
.nav-dd.is-open > .nav-pill,
.nav-dd.is-open > .nav-icon-pill {
  border-color: rgba(242, 201, 76, 0.42) !important;
  background: rgba(18, 82, 57, 0.72) !important;
  color: var(--gold-300) !important;
}

.nav-pill--cta {
  border-color: rgba(255, 225, 138, 0.55) !important;
  background: linear-gradient(112deg, #a87512, #ffe18a 47%, #c9921d) !important;
  color: #171006 !important;
  box-shadow: 0 8px 24px rgba(216, 166, 42, 0.18);
}

.nav-dd__panel {
  border-color: var(--line-strong) !important;
  background: rgba(4, 28, 18, 0.98) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.48) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.nav-dd__link,
.nav-dd__action {
  min-height: 48px;
  color: var(--ink-soft) !important;
}

.nav-dd__link:hover,
.nav-dd__action:hover {
  background: rgba(31, 157, 108, 0.18) !important;
  color: var(--gold-300) !important;
}

.nav-sep,
.nav-dd__divider {
  background: rgba(123, 225, 177, 0.2) !important;
}

.nav-badge--sky {
  background: var(--pitch-500) !important;
}

#mobile-menu-backdrop {
  background: rgba(1, 8, 5, 0.82) !important;
}

#mobile-menu-panel {
  border-left: 1px solid var(--line-strong);
  background:
    linear-gradient(180deg, rgba(8, 48, 32, 0.98), rgba(2, 11, 7, 0.99)),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(123, 225, 177, 0.04) 40px) !important;
  box-shadow: -24px 0 70px rgba(0, 0, 0, 0.5) !important;
}

#mobile-menu-panel a,
#mobile-menu-panel button {
  /* Tighter rows so the whole menu fits without scrolling */
  min-height: 34px;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

#mobile-menu-panel a:hover,
#mobile-menu-panel button:hover {
  background: rgba(31, 157, 108, 0.16) !important;
  color: var(--gold-300) !important;
}

/* Floating authenticated mobile dock; the full existing menu remains available. */
.mobile-dock {
  position: fixed;
  right: max(0.75rem, env(safe-area-inset-right));
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  left: max(0.75rem, env(safe-area-inset-left));
  z-index: 65;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.25rem;
  max-width: 30rem;
  margin-inline: auto;
  padding: 0.4rem;
  border: 1px solid rgba(118, 229, 177, 0.24);
  border-radius: 1.35rem;
  background: rgba(2, 18, 12, 0.9);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.54), 0 0 24px rgba(24, 217, 138, 0.055), inset 0 1px rgba(255, 255, 255, 0.07);
}

.mobile-dock__item {
  display: flex;
  min-width: 0;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.12rem;
  padding: 0.32rem 0.15rem;
  border: 0;
  border-radius: 1rem;
  background: transparent;
  color: var(--ink-muted);
  font: 650 0.61rem/1 "Geist", sans-serif;
  text-decoration: none;
  cursor: pointer;
}

.mobile-dock__item:hover,
.mobile-dock__item:active {
  background: rgba(66, 201, 141, 0.13);
  color: var(--gold-300);
}

.mobile-dock__item svg {
  width: 1.18rem;
  height: 1.18rem;
}

.mobile-dock__item--primary {
  background: linear-gradient(145deg, rgba(24, 217, 138, 0.2), rgba(15, 185, 121, 0.07));
  color: var(--pitch-300);
  box-shadow: inset 0 0 0 1px rgba(118, 229, 177, 0.08);
}

body.has-auth-dock {
  padding-bottom: calc(5.7rem + env(safe-area-inset-bottom));
}

/* Home/banner and premium collectible treatment. */
.home-hero {
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(118, 229, 177, 0.13);
  border-radius: 0 0 1.4rem 1.4rem;
}

.home-hero::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2, 11, 7, 0.02) 45%, rgba(2, 11, 7, 0.58) 100%),
    linear-gradient(90deg, rgba(1, 13, 8, 0.18), transparent 18%, transparent 82%, rgba(1, 13, 8, 0.18));
}

.home-hero img {
  filter: saturate(0.76) brightness(0.8) contrast(1.12);
}

.home-hero {
  border-bottom: 1px solid rgba(242, 201, 76, 0.25);
  background: var(--pitch-950);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42);
}

.home-intro {
  position: relative;
}

.home-intro::before {
  display: block;
  width: 2.5rem;
  height: 2px;
  margin: 0 auto 1.25rem;
  content: "";
  background: linear-gradient(90deg, transparent, var(--pitch-400), transparent);
  box-shadow: 0 0 16px rgba(24, 217, 138, 0.28);
}

.home-intro a.bg-amber-400,
.home-final a.bg-amber-400 {
  border-color: rgba(118, 229, 177, 0.42) !important;
  background: linear-gradient(135deg, #10cc82, #079a63) !important;
  color: #011a10 !important;
  box-shadow: 0 12px 30px rgba(16, 204, 130, 0.16), inset 0 1px rgba(255, 255, 255, 0.2) !important;
}

.home-intro a.bg-amber-400:hover,
.home-final a.bg-amber-400:hover {
  background: linear-gradient(135deg, #2cdda0, #0aad72) !important;
}

.home-features article {
  border-color: rgba(118, 229, 177, 0.16) !important;
  background: linear-gradient(145deg, rgba(7, 34, 23, 0.86), rgba(2, 16, 10, 0.9)) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.3) !important;
}

.home-features article > div:first-child {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid rgba(24, 217, 138, 0.18);
  border-radius: 0.75rem;
  background: rgba(15, 185, 121, 0.09);
  color: var(--pitch-300);
  font-size: 1.05rem;
}

.home-steps > h2,
.home-faq > h2 {
  text-shadow: 0 0 22px rgba(24, 217, 138, 0.08);
}

.home-steps li {
  border: 1px solid rgba(118, 229, 177, 0.13);
  background: linear-gradient(145deg, rgba(7, 30, 21, 0.88), rgba(2, 14, 9, 0.94)) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28);
}

.home-steps li > div:first-child {
  border: 1px solid rgba(118, 229, 177, 0.24) !important;
  background: rgba(15, 185, 121, 0.15) !important;
  color: var(--pitch-300) !important;
  box-shadow: none !important;
}

.home-steps li:nth-child(2) > div:first-child {
  border-color: rgba(242, 201, 76, 0.3) !important;
  background: rgba(216, 166, 42, 0.12) !important;
  color: var(--gold-300) !important;
}

.home-faq details {
  background: rgba(3, 23, 15, 0.8) !important;
  box-shadow: none !important;
}

.home-final {
  border: 1px solid rgba(24, 217, 138, 0.25);
  background:
    radial-gradient(circle at 50% 100%, rgba(15, 185, 121, 0.15), transparent 45%),
    linear-gradient(145deg, rgba(6, 36, 24, 0.9), rgba(1, 12, 8, 0.98)) !important;
  box-shadow: 0 0 34px rgba(24, 217, 138, 0.08), 0 24px 60px rgba(0, 0, 0, 0.36);
}

.shadow-sm,
.shadow,
.shadow-md,
.shadow-lg,
.shadow-xl,
.shadow-2xl {
  --tw-shadow-color: rgba(0, 0, 0, 0.35) !important;
}

/* ==================================================================
   Collector sticker cards (Dashboard › My Album)
   Mirrors the marketing preview: glass card, rarity ring + tier pill,
   tinted art band with the player name bottom-left, hover lift.
   All interaction hooks (need toggle, dup badge, qty stepper, save status)
   keep their original class names — this layer is visual only.
   ================================================================== */
.sticker-card.sc {
  border: 0 !important;
  border-radius: 16px;
  padding: 6px 6px 5px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    inset 0 0 0 1px rgba(118, 229, 177, 0.28),
    0 8px 26px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sticker-card.sc::before {
  display: none; /* edge accent bar replaced by the rarity ring */
}

.sticker-card.sc:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 0 0 2px rgba(118, 229, 177, 0.55),
    0 14px 38px rgba(0, 0, 0, 0.5);
}

/* Rarity rings + glow (LEGEND gold, SPECIAL emerald, FOIL amber shimmer, BASE neutral) */
.sticker-card.sc--legend {
  box-shadow:
    inset 0 0 0 1px rgba(252, 211, 77, 0.7),
    0 10px 40px -6px rgba(245, 186, 38, 0.55);
}
.sticker-card.sc--legend:hover {
  box-shadow:
    inset 0 0 0 2px rgba(252, 211, 77, 0.9),
    0 16px 46px -6px rgba(245, 186, 38, 0.65);
}
.sticker-card.sc--special {
  box-shadow:
    inset 0 0 0 1px rgba(52, 211, 153, 0.45),
    0 10px 40px -6px rgba(0, 210, 148, 0.45);
}
.sticker-card.sc--special:hover {
  box-shadow:
    inset 0 0 0 2px rgba(52, 211, 153, 0.7),
    0 16px 46px -6px rgba(0, 210, 148, 0.55);
}
.sticker-card.sc--foil {
  box-shadow:
    inset 0 0 0 1px rgba(252, 211, 77, 0.5),
    0 10px 40px -6px rgba(226, 232, 240, 0.35);
}
.sticker-card.sc--foil:hover {
  box-shadow:
    inset 0 0 0 2px rgba(252, 211, 77, 0.75),
    0 16px 46px -6px rgba(226, 232, 240, 0.45);
}

/* Duplicates keep the gold signal on top of the rarity ring */
.sticker-card.sc:has(.dup-badge:not(.hidden)) {
  box-shadow:
    inset 0 0 0 1px rgba(242, 201, 76, 0.75),
    0 10px 40px -6px rgba(242, 201, 76, 0.5);
}

/* Head: code + tier pill */
.sticker-card.sc .sc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  min-width: 0;
  padding: 1px 2px 3px;
}
.sticker-card.sc .sc-code {
  font-family: "Anton", "Arial Narrow", Impact, sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.9);
  font-variant-numeric: tabular-nums;
}
.sticker-card.sc .sc-tier {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 1px 4px;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
.sticker-card.sc--legend .sc-tier {
  background: linear-gradient(to right, #fcd34d, #f59e0b);
  color: #451a03;
  box-shadow: inset 0 0 0 1px rgba(254, 243, 199, 0.9);
}
.sticker-card.sc--special .sc-tier {
  background: rgba(52, 211, 153, 0.2);
  color: #a7f3d0;
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.4);
}
.sticker-card.sc--foil .sc-tier {
  background: rgba(252, 211, 77, 0.2);
  color: #fde68a;
  box-shadow: inset 0 0 0 1px rgba(252, 211, 77, 0.5);
}
.sticker-card.sc--base .sc-tier {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

/* Art band: rarity-tinted wash, light sweep, pitch lines.
   Player name sits bottom-left inside the band; Need pill top-left. */
.sticker-card.sc .sc-art {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 34px;
  border-radius: 10px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(118, 229, 177, 0.1), rgba(4, 24, 16, 0.55)),
    var(--pitch-900);
}
.sticker-card.sc--legend .sc-art {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(6, 21, 12, 0.4) 55%, rgba(6, 78, 59, 0.35));
}
.sticker-card.sc--special .sc-art {
  background: linear-gradient(135deg, rgba(0, 210, 148, 0.25), rgba(6, 21, 12, 0.4) 55%, rgba(6, 78, 59, 0.35));
}
.sticker-card.sc--foil .sc-art {
  background: linear-gradient(135deg, rgba(252, 211, 77, 0.28), rgba(15, 23, 42, 0.35) 55%, rgba(30, 41, 59, 0.4));
}
.sticker-card.sc .sc-art::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -30%;
  width: 70%;
  height: 160%;
  transform: rotate(18deg);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.16), transparent);
  filter: blur(10px);
  opacity: 0.7;
  pointer-events: none;
}
.sticker-card.sc .sc-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 10px, rgba(118, 229, 177, 0.05) 10px 11px);
  opacity: 0.5;
  pointer-events: none;
}

.sticker-card.sc .sc-name {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 2px 4px 3px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  letter-spacing: -0.01em;
  /* The legacy `.sticker-card h3` rule (0.72rem !important, 2-line clamp)
     would override the sizing here — restate with higher specificity. */
  font-size: 9px !important;
  min-height: 0 !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden;
  text-align: left;
  overflow-wrap: break-word;
  color: #fffdf4;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.25;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  background: linear-gradient(to top, rgba(2, 12, 7, 0.55), transparent);
}
.sticker-card.sc--legend .sc-name {
  background: linear-gradient(to top, rgba(69, 26, 3, 0.6), transparent);
}
.sticker-card.sc--special .sc-name {
  background: linear-gradient(to top, rgba(2, 22, 14, 0.6), transparent);
}

/* Need toggle: its own row under the name, just above the qty stepper */
.sticker-card.sc .sc-need {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0 0 1px 2px;
  border-radius: 999px;
  padding: 1.5px 6px;
  background: rgba(2, 12, 7, 0.55);
  color: var(--ivory);
  font-size: 9px;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
}
/* JS toggles Tailwind's .hidden — this must win over the display above */
.sticker-card.sc .sc-need.hidden {
  display: none;
}
.sticker-card.sc .sc-need input {
  width: 11px;
  height: 11px;
  accent-color: var(--gold-400);
}

/* Controls (dup badge, qty stepper, save status) on the glass card */
.sticker-card.sc .dup-slot {
  /* Shrink the reserved strip; cards needing the dup badge get it back.
     Need pill and dup badge never show on the same card, so this stays
     uniform while removing the dead gap under the Need pill. */
  min-height: 6px !important;
  margin-bottom: 1px;
}
.sticker-card.sc .dup-slot:has(.dup-badge:not(.hidden)) {
  min-height: 16px !important;
}
.sticker-card.sc .dup-text {
  background: rgba(242, 201, 76, 0.16) !important;
  color: var(--gold-300) !important;
  border-radius: 999px;
  padding: 1px 6px;
}
.sticker-card.sc .inline-flex.items-center.rounded.border, /* qty stepper wrapper */
.sticker-card.sc > .mt-auto .inline-flex.items-center.rounded {
  border-color: rgba(118, 229, 177, 0.3) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px;
}
.sticker-card.sc .qty-minus,
.sticker-card.sc .qty-plus {
  color: var(--ivory) !important;
  min-width: 22px;
  min-height: 20px;
}
.sticker-card.sc .qty-minus:hover,
.sticker-card.sc .qty-plus:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}
.sticker-card.sc .qty-value {
  color: #fffdf4;
}
.sticker-card.sc .save-status {
  color: var(--pitch-300) !important;
}

@media (min-width: 768px) {
  .sticker-card.sc .sc-name {
    font-size: 11px;
    padding: 3px 7px 4px;
  }
  .sticker-card.sc .sc-code {
    font-size: 11.5px;
  }
  .sticker-card.sc .sc-tier {
    font-size: 8px;
    padding: 1px 6px;
  }
}

.mkt-card,
[class*="sticker-card"],
[class*="album-card"] {
  position: relative;
  overflow: hidden;
}

.mkt-card::before,
[class*="sticker-card"]::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  content: "";
  background: linear-gradient(to bottom, var(--pitch-300), var(--pitch-500));
  box-shadow: 0 0 12px rgba(24, 217, 138, 0.24);
}

.sticker-card:has(.dup-badge:not(.hidden))::before,
.mkt-card.border-amber-400::before {
  background: linear-gradient(to bottom, var(--gold-300), var(--gold-500), var(--pitch-400));
  box-shadow: 0 0 14px rgba(242, 201, 76, 0.28);
}

/* Dense album UI must stay crisp. Anton is intentionally reserved for large
   poster headings, never sticker metadata, controls, or status labels. */
.sticker-card,
.sticker-card *,
.match-badge,
.trade-status,
.message-bubble,
.trade-message,
.gc-bubble,
.gc-bubble-me {
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  text-shadow: none !important;
  filter: none !important;
}

.sticker-card {
  border-color: rgba(118, 229, 177, 0.36) !important;
  color: var(--ivory);
}

.sticker-card:has(.dup-badge:not(.hidden)) {
  border-color: rgba(242, 201, 76, 0.48) !important;
}

.sticker-card h3 {
  display: -webkit-box;
  min-height: 2.5em;
  overflow: hidden;
  color: #fffdf4 !important;
  font-size: 0.72rem !important;
  font-weight: 720 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  text-overflow: clip !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sticker-card h3 + p {
  color: #b9cfc2 !important;
  font-size: 0.65rem !important;
  font-weight: 560;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

.sticker-card .qty-value,
.sticker-card .qty-minus,
.sticker-card .qty-plus,
.sticker-card .need-toggle,
.sticker-card .dup-text,
.sticker-card .save-status {
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0;
}

@media (min-width: 768px) {
  .sticker-card h3 {
    font-size: 0.81rem !important;
  }

  .sticker-card h3 + p {
    font-size: 0.7rem !important;
  }
}

/* Explicit compact-state contracts prevent light-theme utility combinations
   from inheriting pale foregrounds on foil or washed-out surfaces. */
.match-badge,
.trade-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  font-weight: 720 !important;
  line-height: 1.2;
  letter-spacing: 0.015em;
  box-shadow: none !important;
}

/* Pending-in-proposal chip (album cards + inventory lists) */
.sc-pending {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 1px 5px;
  background: rgba(242, 201, 76, 0.2);
  color: var(--gold-300);
  border: 1px solid rgba(242, 201, 76, 0.4);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  white-space: nowrap;
  line-height: 1.4;
}
.sc-head-right {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

/* My Inventory lists: collapsed on mobile until "Show more" */
.inv-collapsible[data-inv-collapsed="true"] {
  max-height: 6.6rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 78%, transparent);
  mask-image: linear-gradient(to bottom, black 78%, transparent);
}
@media (min-width: 768px) {
  .inv-collapsible[data-inv-collapsed="true"] {
    max-height: none;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Tiny in-place user popover (Profile / Message) */
.user-popover {
  position: absolute;
  z-index: 90;
  min-width: 9.5rem;
  padding: 0.25rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.65rem;
  background: var(--glass-solid);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.4);
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
}
.user-popover__name {
  padding: 0.3rem 0.5rem 0.45rem;
  color: var(--ivory);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.2rem;
}
.user-popover a,
.user-popover button {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  min-height: 34px;
  padding: 0.3rem 0.5rem;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.user-popover a:hover,
.user-popover button:hover {
  background: rgba(66, 201, 141, 0.14);
  color: var(--gold-300);
}

.star-label input:checked + .star-icon {
  color: var(--gold-400) !important;
}
.star-label:hover .star-icon {
  color: var(--gold-300) !important;
}

.match-badge--partial {
  border-color: #9d7927 !important;
  background: #49360f !important;
  color: #ffe8a3 !important;
}

.match-badge--perfect,
.trade-status--accepted {
  border-color: #3ac18a !important;
  background: #0d5339 !important;
  color: #f2fff8 !important;
}

.match-badge--bulk,
.trade-status--pending {
  border-color: #b78c2e !important;
  background: #503a10 !important;
  color: #ffedb3 !important;
}

.match-badge--mail,
.match-badge--presence {
  border-color: rgba(118, 229, 177, 0.42) !important;
  background: #123d2d !important;
  color: #dff9e9 !important;
}

.match-badge--location {
  border-color: rgba(255, 225, 138, 0.38) !important;
  background: #2a2210 !important;
  color: #ffe9a7 !important;
}

.match-badge--count-receive {
  border-color: #b78c2e !important;
  background: #503a10 !important;
  color: #ffedb3 !important;
}

.match-badge--count-give {
  border-color: #3ac18a !important;
  background: #0d5339 !important;
  color: #f2fff8 !important;
}

.trade-status--completed {
  border-color: #708477 !important;
  background: #233229 !important;
  color: #f8f3df !important;
}

.trade-status--canceled {
  border-color: #b96767 !important;
  background: #521f1f !important;
  color: #ffe1e1 !important;
}

/* Message direction uses both surface and border shape, so it remains
   unambiguous without relying on color perception alone. */
.message-bubble,
.trade-message,
.gc-bubble,
.gc-bubble-me {
  color: #f7f7ef !important;
  font-size: 0.875rem;
  font-weight: 480;
  line-height: 1.55;
}

.message-bubble--received,
.trade-message--received,
.gc-bubble {
  border-color: #476056 !important;
  background: #0b2119 !important;
  color: #f3f4eb !important;
  box-shadow: inset 3px 0 0 rgba(174, 194, 183, 0.22);
}

.message-bubble--sent,
.trade-message--sent,
.gc-bubble-me {
  border-color: #39b881 !important;
  background: #0b5138 !important;
  color: #ffffff !important;
  box-shadow: inset -3px 0 0 rgba(118, 229, 177, 0.28), 0 8px 20px rgba(0, 0, 0, 0.16);
}

.message-bubble__meta,
.trade-message__meta {
  color: #b3c8bc !important;
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 650;
  text-shadow: none !important;
}

.message-bubble--sent .message-bubble__meta,
.trade-message--sent .trade-message__meta {
  color: #d5f6e5 !important;
}

/* Admin "Community recognition" ribbon section: bg-slate-50/60 is another
   slash-opacity utility the theme doesn't repaint — dark glass it is. */
.fr-section {
  border-top: 1px solid var(--line) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.03), transparent 45%),
    var(--glass) !important;
}

/* Tip-jar buttons: company brand colors (identical in dark and light) */
a.tip-brand-coffee,
.csm-tip--coffee {
  background: #FFDD00 !important;
  color: #1a1a1a !important;
}
a.tip-brand-coffee:hover,
.csm-tip--coffee:hover {
  background: #ffe23a !important;
}
a.tip-brand-venmo,
.csm-tip--venmo {
  background: #008CFF !important;
  color: #ffffff !important;
}
a.tip-brand-venmo:hover,
.csm-tip--venmo:hover {
  background: #1f9dff !important;
}
a.tip-brand-cashapp,
.csm-tip--cashapp {
  background: #00D632 !important;
  color: #ffffff !important;
}
a.tip-brand-cashapp:hover,
.csm-tip--cashapp:hover {
  background: #17e04a !important;
}
a.tip-brand-paypal,
.csm-tip--paypal {
  background: #003087 !important;
  color: #ffffff !important;
}
a.tip-brand-paypal:hover,
.csm-tip--paypal:hover {
  background: #003c9e !important;
}

/* Help page trade cards: body text uses slash-opacity classes
   (text-emerald-900/80, text-sky-900/80) the theme's text rules miss. */
.text-emerald-900\/80,
.text-sky-900\/80 {
  color: var(--ink-soft) !important;
}

/* Help page donate section: its light gradient (from-amber-500/10 via-amber-50
   to-white) is invisible to the dark theme — repaint as dark glass. */
#support-project {
  border-color: var(--line-strong) !important;
  background:
    radial-gradient(circle at top right, rgba(242, 201, 76, 0.1), transparent 14rem),
    linear-gradient(135deg, rgba(7, 34, 23, 0.94), rgba(2, 16, 10, 0.97)) !important;
  color: var(--ivory) !important;
}
#support-project .text-slate-600,
#support-project .text-slate-500 {
  color: var(--ink-soft) !important;
}

/* My Collection group panel: bg-slate-50/80 is a slash-opacity utility the
   theme selectors don't match, so it stayed light-gray in dark mode with pale
   text — repaint it as dark glass with readable ink. */
.group-details {
  border-color: var(--line) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.03), transparent 45%),
    var(--glass) !important;
}
.group-details .text-slate-700,
.group-details .text-slate-600 {
  color: var(--ivory) !important;
}
.group-details .text-slate-500,
.group-details .text-slate-400 {
  color: var(--ink-soft) !important;
}
.group-details .border-slate-200\/60,
.group-details .border-slate-100 {
  border-color: var(--line) !important;
}

/* Trader of the Year is premium foil, not a light card: readable dark glass
   carries the gold accent while retaining the existing content and actions. */
.leader-hero {
  border: 1px solid rgba(118, 229, 177, 0.16);
  background:
    radial-gradient(circle at 88% 10%, rgba(242, 201, 76, 0.1), transparent 13rem),
    linear-gradient(112deg, #061b13, #0b3a29 52%, #04130d) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.34) !important;
}

.leader-toy-card {
  position: relative;
  isolation: isolate;
  border-color: rgba(242, 201, 76, 0.54) !important;
  background-color: #081b13 !important;
  background-image:
    radial-gradient(circle at 8% 0%, rgba(255, 225, 138, 0.16), transparent 18rem),
    linear-gradient(118deg, rgba(145, 101, 15, 0.18), rgba(4, 24, 16, 0.96) 38%, rgba(13, 62, 43, 0.9) 72%, rgba(154, 109, 19, 0.14)) !important;
  color: var(--ivory) !important;
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.38), 0 0 28px rgba(242, 201, 76, 0.07) !important;
}

.leader-toy-card::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  opacity: 0.28;
  background: repeating-linear-gradient(118deg, transparent 0 14px, rgba(255, 225, 138, 0.055) 15px, transparent 16px 28px);
}

.leader-toy-card__label {
  color: #ffe18a !important;
}

.leader-toy-card__name {
  color: #fffdf4 !important;
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 760 !important;
  letter-spacing: -0.012em;
  text-shadow: none !important;
}

.leader-toy-card__copy {
  color: #d6e1da !important;
}

.leader-toy-card__secondary {
  border-color: rgba(242, 201, 76, 0.48) !important;
  background: rgba(2, 11, 7, 0.6) !important;
  color: #ffe9a7 !important;
}

/* Text-bearing controls: rounded rectangles (~10px), not pills. */
:root {
  --ui-rect-radius: 0.625rem;
}

.rounded-full:not(.w-2):not(.h-2):not(.w-3):not(.h-3):not(.w-5):not(.h-5):not(.w-6):not(.h-6):not(.w-7):not(.h-7):not(.w-8):not(.h-8):not(.w-9):not(.h-9):not(.w-10):not(.h-10):not(.w-12):not(.h-12):not(.w-14):not(.h-14):not(.master-collector-thumb):not(.site-brand__ball):not(.nav-badge):not(#gc-badge) {
  border-radius: var(--ui-rect-radius) !important;
}

/* Keep true circles for avatars, dots, counters, progress tracks. */
.rounded-full.w-2,
.rounded-full.h-2,
.rounded-full.w-3,
.rounded-full.h-3,
.rounded-full.w-5,
.rounded-full.h-5,
.rounded-full.w-6,
.rounded-full.h-6,
.rounded-full.w-7,
.rounded-full.h-7,
.rounded-full.w-8,
.rounded-full.h-8,
.rounded-full.w-9,
.rounded-full.h-9,
.rounded-full.w-10,
.rounded-full.h-10,
.rounded-full.w-12,
.rounded-full.h-12,
.rounded-full.w-14,
.rounded-full.h-14,
.master-collector-thumb,
.site-brand__ball,
.nav-badge,
#gc-badge,
[class*="w-10"][class*="h-10"].rounded-full,
[class*="w-9"][class*="h-9"].rounded-full,
[class*="w-8"][class*="h-8"].rounded-full {
  border-radius: 9999px !important;
}

.h-2.rounded-full,
.h-2\.5.rounded-full,
.h-3.rounded-full {
  border-radius: var(--ui-rect-radius) !important;
}

.sa-launcher {
  min-width: 52px;
  min-height: 52px;
  background: linear-gradient(112deg, #a87512, #ffe18a 47%, #c9921d) !important;
  color: #171006 !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.44), 0 0 28px rgba(242, 201, 76, 0.14) !important;
}

.sa-launcher:focus-visible {
  outline-color: var(--focus) !important;
}

.sa-panel,
.sa-suggests,
.sa-foot,
.sa-tour-pop {
  border-color: var(--line-strong) !important;
  background: var(--glass-solid) !important;
  color: var(--ivory) !important;
}

.sa-panel__head,
.sa-msg--user {
  background: var(--pitch-950) !important;
}

.sa-body {
  background: rgba(2, 11, 7, 0.96) !important;
}

.sa-msg--bot,
.sa-chip {
  border-color: var(--line) !important;
  background: rgba(18, 82, 57, 0.55) !important;
  color: var(--ink-soft) !important;
}

.sa-chip--tour {
  border-color: var(--line-strong) !important;
  color: var(--gold-300) !important;
}

.sa-input {
  border-color: var(--line) !important;
  background: var(--pitch-950) !important;
  color: var(--ivory) !important;
}

.sa-tour-pop__title,
.sa-tour-pop__body {
  color: var(--ivory) !important;
}

.sa-foot__note,
#gc-subtitle,
.gc-name-me,
.gc-time,
.border-more,
.border-chip {
  color: var(--ink-muted) !important;
}

a:not([class]) {
  color: var(--gold-300);
}

.ao-card,
.ae-card,
.ae-picker,
.ae-editor-wrap,
.ae-dropdown,
.ae-files,
.ae-file {
  border-color: var(--line) !important;
  background: var(--glass-solid) !important;
  color: var(--ivory) !important;
}

.ao-card__head,
.ao-step__num,
.ae-send {
  background: var(--pitch-950) !important;
}

.ao-card__body,
.ao-steps,
.ae-toolbar,
.ae-picker__input,
.ae-option,
.ae-editor {
  border-color: var(--line) !important;
  background: rgba(4, 30, 20, 0.82) !important;
}

.ao-card__lead,
.ao-step,
.ao-step strong,
.ae-label,
.ae-input,
.ae-option__name,
.ae-editor,
.ae-file__name {
  color: var(--ink-soft) !important;
}

.ao-card__subtitle,
.ao-steps__label,
.ae-hint,
.ae-option__meta,
.ae-file__meta {
  color: var(--ink-muted) !important;
}

.ae-input,
.ae-picker__input {
  background: var(--pitch-950) !important;
}

.ae-option:hover,
.ae-option.is-active {
  background: rgba(31, 157, 108, 0.18) !important;
}

.csm-tip,
#csm-lang-btn {
  min-height: 48px !important;
}

#csm-overlay,
#toy-fw-overlay {
  background: rgba(1, 8, 5, 0.84) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

#csm-container,
#toy-fw-card {
  border-color: var(--line-strong) !important;
  background:
    linear-gradient(145deg, rgba(12, 48, 33, 0.97), rgba(3, 24, 16, 0.99)) !important;
  color: var(--ivory) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.58), 0 0 38px rgba(242, 201, 76, 0.08) !important;
}

/* Community note readability: the story box and footer use Tailwind
   slash-opacity light surfaces (bg-amber-50/70, bg-slate-50/90) that the
   dark theme never repaints, while their text is forced ivory. Repaint
   both surfaces as dark glass so the text is legible. */
#csm-story {
  border-color: rgba(242, 201, 76, 0.35) !important;
  background: rgba(104, 75, 12, 0.24) !important;
  color: var(--ivory) !important;
}

#csm-story p,
#csm-story strong {
  color: var(--ivory) !important;
}

#csm-story .text-slate-600,
#csm-story .text-slate-700 {
  color: var(--ink-soft) !important;
}

#csm-footer {
  border-color: var(--line) !important;
  background: rgba(3, 24, 16, 0.96) !important;
}

#csm-footer label,
#csm-footer .group > span,
#csm-footer span.font-medium {
  color: var(--ink-soft) !important;
}

#gc-toggle {
  min-height: 52px !important;
  border-radius: var(--ui-rect-radius) !important;
  border: 1px solid rgba(255, 225, 138, 0.48) !important;
  background: linear-gradient(112deg, #a87512, #ffe18a 47%, #c9921d) !important;
  color: #171006 !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.44), 0 0 28px rgba(242, 201, 76, 0.14) !important;
}

#gc-panel {
  border-color: var(--line-strong) !important;
  background: var(--glass-solid) !important;
  color: var(--ivory) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.56) !important;
}

#gc-header {
  background: linear-gradient(135deg, var(--pitch-800), var(--pitch-950)) !important;
}

#gc-msgs,
#gc-preview,
#gc-foot,
#gc-bar {
  border-color: var(--line) !important;
  background: rgba(2, 11, 7, 0.96) !important;
  color: var(--ink-soft) !important;
}

#gc-input,
#gc-photo {
  border-color: var(--line) !important;
  background: rgba(4, 30, 20, 0.9) !important;
  color: var(--ivory) !important;
}

#gc-close,
#gc-photo,
#gc-send {
  min-width: 48px !important;
  min-height: 48px !important;
}

#gc-send {
  border: 1px solid rgba(255, 225, 138, 0.52) !important;
  background: linear-gradient(112deg, #a87512, #ffe18a 47%, #c9921d) !important;
  color: #171006 !important;
}

.welcome-toast {
  border-color: var(--line-strong) !important;
  background: rgba(3, 24, 16, 0.94) !important;
  color: var(--ivory) !important;
}

footer {
  border-color: var(--line) !important;
  background:
    linear-gradient(180deg, rgba(4, 19, 13, 0.6), rgba(2, 11, 7, 0.96)) !important;
}

@media (min-width: 768px) {
  .home-hero {
    left: auto !important;
    width: calc(100% - 2rem) !important;
    max-width: 72rem !important;
    margin: 0 auto !important;
    transform: none !important;
    border-radius: 1.25rem;
  }

  .mobile-dock {
    display: none;
  }

  body.has-auth-dock {
    padding-bottom: 0;
  }
}

@media (max-width: 767px) {
  body.bg-slate-100 {
    background:
      linear-gradient(90deg, rgba(0, 5, 3, 0.92) 0%, rgba(1, 9, 6, 0.44) 18%, transparent 34%, transparent 66%, rgba(1, 9, 6, 0.44) 82%, rgba(0, 5, 3, 0.92) 100%),
      radial-gradient(ellipse 54vw 44vh at 50% 10%, rgba(11, 104, 70, 0.27) 0%, rgba(6, 62, 42, 0.15) 38%, rgba(2, 15, 10, 0) 70%),
      radial-gradient(ellipse 48vw 32vh at 50% 64%, rgba(9, 74, 49, 0.1), rgba(2, 15, 10, 0) 72%),
      linear-gradient(180deg, var(--pitch-925) 0%, #010805 100%) !important;
    background-attachment: fixed !important;
  }

  .site-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .site-header::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background: rgba(3, 24, 16, 0.74);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    backdrop-filter: blur(18px) saturate(135%);
  }

  body.overflow-hidden .mobile-dock {
    opacity: 0;
    pointer-events: none;
  }

  body.overflow-hidden .sa-launcher,
  body.overflow-hidden #gc-root {
    opacity: 0;
    pointer-events: none;
  }

  main {
    padding-top: 1.5rem !important;
    padding-inline: 0.875rem !important;
  }

  .site-header nav {
    padding-inline: 0.875rem;
    padding-block: 0.5rem;
  }

  .site-brand {
    font-size: 0.8rem;
  }

  .site-brand__ball {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 1.1rem;
  }

  .home-hero {
    margin-top: -1.5rem;
  }

  .home-intro {
    padding-top: 2.25rem;
    padding-bottom: 2.75rem;
  }

  .home-features {
    gap: 1rem;
  }

  h1 {
    font-size: clamp(1.75rem, 8vw, 2.6rem) !important;
    line-height: 1.02 !important;
  }

  h2 {
    line-height: 1.08;
  }

  .overflow-x-auto {
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .sa-panel {
    height: min(68vh, 520px) !important;
    border-radius: 1rem !important;
  }

  #gc-panel {
    width: min(370px, calc(100vw - 1.5rem)) !important;
    max-height: min(62vh, 520px) !important;
  }
}

@media (max-width: 390px) {
  .mobile-dock {
    right: 0.5rem;
    bottom: max(0.5rem, env(safe-area-inset-bottom));
    left: 0.5rem;
    padding: 0.3rem;
    border-radius: 1.15rem;
  }

  .mobile-dock__item {
    font-size: 0.58rem;
  }

  .site-brand {
    max-width: calc(100vw - 5.5rem);
  }

  main {
    padding-inline: 0.75rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  :where(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
    outline: 3px solid CanvasText !important;
  }
}

/* ==================================================================
   LIGHT THEME — "Emerald Pitch Daylight"
   Opt-in via html[data-theme="light"] (theme toggle in the header,
   persisted in localStorage as fst-theme). Dark remains the default.

   Strategy: most component rules read the custom properties below, so
   redefining them flips the majority of surfaces. Only rules with
   hardcoded rgba/hex darkness get explicit overrides after this block.
   Palette mirrors the marketing preview's own light tokens
   (#f9faf9 page, #fff cards, #071009 ink, #008853 emerald, gold #8a6410).
   ================================================================== */
html[data-theme="light"] {
  color-scheme: light;
  --pitch-950: #f6faf7;
  --pitch-925: #f9fbf8;
  --pitch-900: #eef5f0;
  --pitch-850: #e4f0e9;
  --pitch-800: #d9ede1;
  --pitch-700: #9ed7ba;
  --pitch-600: #12946a;
  --pitch-500: #0e8a5f;
  --pitch-400: #0d7f57;
  --pitch-300: #046c46;
  --gold-500: #d8a62a;
  --gold-400: #dfaf2e;
  --gold-300: #8a6410;
  --ivory: #12281c;
  --ink-soft: #3c5248;
  --ink-muted: #647a6e;
  --line: rgba(4, 84, 55, 0.16);
  --line-strong: rgba(181, 130, 20, 0.45);
  --glass: #ffffff;
  --glass-solid: #ffffff;
  --glass-soft: rgba(238, 245, 240, 0.78);
  --shadow-card: 0 12px 32px rgba(16, 44, 32, 0.1), 0 0 0 1px rgba(4, 84, 55, 0.05);
  --shadow-gold: 0 8px 20px rgba(216, 166, 42, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --focus: #8a6410;
}

html[data-theme="light"] body.bg-slate-100 {
  background:
    radial-gradient(ellipse 66vw 54vh at 50% 8%, rgba(0, 210, 148, 0.07) 0%, rgba(0, 136, 83, 0.04) 45%, rgba(249, 250, 249, 0) 75%),
    radial-gradient(ellipse 54vw 40vh at 50% 78%, rgba(0, 136, 83, 0.035), rgba(249, 250, 249, 0) 76%),
    linear-gradient(180deg, #fbfcfa 0%, #f4f7f3 100%) !important;
  color: #12281c !important;
}

html[data-theme="light"] body::before {
  opacity: 0.12;
  background-image:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(4, 108, 70, 0.16) 50%, transparent calc(50% + 1px)),
    radial-gradient(circle at 50% 42%, transparent 0 7.8rem, rgba(4, 108, 70, 0.14) 7.9rem 8rem, transparent 8.1rem),
    linear-gradient(rgba(4, 108, 70, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4, 108, 70, 0.06) 1px, transparent 1px);
}

html[data-theme="light"] ::selection {
  background: #dfaf2e;
  color: #171006;
}

/* Form controls */
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] [contenteditable="true"] {
  border-color: rgba(4, 84, 55, 0.24) !important;
  background: #ffffff !important;
  color: #12281c !important;
  caret-color: #8a6410;
  box-shadow: inset 0 1px 2px rgba(16, 44, 32, 0.04);
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: #7d9186 !important;
}

html[data-theme="light"] select {
  color-scheme: light;
}

/* Glass panels: white cards instead of dark glass */
html[data-theme="light"] .bg-white,
html[data-theme="light"] .bg-slate-50,
html[data-theme="light"] .bg-slate-100 {
  background-color: #ffffff !important;
  background-image:
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(249, 252, 250, 0.6)),
    radial-gradient(circle at 100% 0, rgba(0, 210, 148, 0.05), transparent 13rem) !important;
}

html[data-theme="light"] .bg-slate-200,
html[data-theme="light"] .bg-slate-300 {
  border-color: rgba(4, 84, 55, 0.18) !important;
  background-color: #e9f3ec !important;
  background-image: linear-gradient(145deg, #f2f8f4, #e4efe8) !important;
}

html[data-theme="light"] .hover\:bg-slate-50:hover,
html[data-theme="light"] .hover\:bg-slate-100:hover,
html[data-theme="light"] .hover\:bg-slate-600:hover,
html[data-theme="light"] .hover\:bg-slate-700:hover,
html[data-theme="light"] .hover\:bg-slate-800:hover,
html[data-theme="light"] .hover\:bg-slate-900:hover {
  background-color: rgba(0, 210, 148, 0.12) !important;
  background-image: linear-gradient(135deg, rgba(0, 136, 83, 0.08), transparent) !important;
}

/* Deep-emerald action panels (bg-slate-900 buttons etc.) stay rich green
   with light text — intentional accents on the light page. The base theme
   maps .text-white to --ivory (dark ink here) with !important, so buttons
   on dark surfaces need explicit combo overrides to stay legible. */
html[data-theme="light"] .bg-slate-950.text-white,
html[data-theme="light"] .bg-slate-900.text-white,
html[data-theme="light"] .bg-slate-800.text-white,
html[data-theme="light"] .bg-slate-700.text-white,
html[data-theme="light"] .bg-slate-600.text-white,
html[data-theme="light"] .bg-emerald-600.text-white,
html[data-theme="light"] .bg-emerald-700.text-white,
html[data-theme="light"] .bg-rose-600.text-white,
html[data-theme="light"] .bg-red-600.text-white,
html[data-theme="light"] .bg-violet-600.text-white,
html[data-theme="light"] .from-slate-800.text-white,
html[data-theme="light"] .from-slate-900.text-white {
  color: #ffffff !important;
}

/* Amber family: gold buttons keep the trophy gradient (dark text on gold);
   tinted panels go light-gold. */
html[data-theme="light"] .text-amber-950,
html[data-theme="light"] .text-amber-900,
html[data-theme="light"] .text-amber-800 {
  color: #6b4d09 !important;
}

html[data-theme="light"] .bg-amber-50,
html[data-theme="light"] .bg-amber-100 {
  border-color: rgba(181, 130, 20, 0.32) !important;
  background-color: #fdf6e0 !important;
  background-image: linear-gradient(135deg, rgba(242, 201, 76, 0.22), transparent) !important;
}

html[data-theme="light"] .bg-emerald-50,
html[data-theme="light"] .bg-emerald-100 {
  border-color: rgba(4, 108, 70, 0.28) !important;
  background-color: #e6f6ee !important;
  background-image: linear-gradient(135deg, rgba(0, 210, 148, 0.16), transparent) !important;
}

html[data-theme="light"] .bg-blue-50,
html[data-theme="light"] .bg-blue-100,
html[data-theme="light"] .bg-blue-500,
html[data-theme="light"] .bg-blue-600,
html[data-theme="light"] .bg-sky-50,
html[data-theme="light"] .bg-sky-100,
html[data-theme="light"] .bg-sky-400,
html[data-theme="light"] .bg-sky-500,
html[data-theme="light"] .bg-sky-600,
html[data-theme="light"] .bg-indigo-50,
html[data-theme="light"] .bg-indigo-100,
html[data-theme="light"] .bg-indigo-500,
html[data-theme="light"] .bg-indigo-600,
html[data-theme="light"] .bg-violet-50,
html[data-theme="light"] .bg-violet-100,
html[data-theme="light"] .bg-violet-500,
html[data-theme="light"] .bg-violet-600 {
  border-color: rgba(4, 108, 70, 0.26) !important;
  background-color: #e6f6ee !important;
  background-image: linear-gradient(135deg, rgba(0, 210, 148, 0.14), rgba(255, 255, 255, 0.4)) !important;
  color: #046c46 !important;
}

html[data-theme="light"] .hover\:bg-blue-50:hover,
html[data-theme="light"] .hover\:bg-sky-50:hover,
html[data-theme="light"] .hover\:bg-indigo-50:hover,
html[data-theme="light"] .hover\:bg-violet-50:hover {
  background-color: rgba(0, 210, 148, 0.14) !important;
}

html[data-theme="light"] .bg-red-50,
html[data-theme="light"] .bg-red-100,
html[data-theme="light"] .bg-rose-50,
html[data-theme="light"] .bg-rose-100 {
  background-color: #fdf0f0 !important;
  border-color: rgba(190, 40, 40, 0.25) !important;
}

html[data-theme="light"] .text-red-950,
html[data-theme="light"] .text-red-900,
html[data-theme="light"] .text-red-800,
html[data-theme="light"] .text-red-700,
html[data-theme="light"] .text-rose-950,
html[data-theme="light"] .text-rose-900,
html[data-theme="light"] .text-rose-800,
html[data-theme="light"] .text-rose-700 {
  color: #b3261e !important;
}

html[data-theme="light"] .bg-red-500,
html[data-theme="light"] .bg-red-600,
html[data-theme="light"] .bg-rose-500,
html[data-theme="light"] .bg-rose-600 {
  background-color: #d04545 !important;
  color: #ffffff !important;
}

/* Tables and code */
html[data-theme="light"] thead,
html[data-theme="light"] tfoot {
  background: #e9f3ec !important;
}

html[data-theme="light"] tbody tr:hover {
  background: rgba(0, 210, 148, 0.06);
}

html[data-theme="light"] code,
html[data-theme="light"] pre {
  border-color: rgba(4, 84, 55, 0.18) !important;
  background: #f2f6f3 !important;
  color: #6b4d09 !important;
}

/* Header: white stadium glass */
html[data-theme="light"] .site-header {
  border-bottom: 1px solid rgba(4, 84, 55, 0.16);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.94), rgba(244, 250, 246, 0.92), rgba(255, 255, 255, 0.94)) !important;
  box-shadow: 0 6px 24px rgba(16, 44, 32, 0.08);
}

html[data-theme="light"] .site-header.is-scrolled {
  border-bottom-color: rgba(181, 130, 20, 0.35);
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 10px 32px rgba(16, 44, 32, 0.12);
}

html[data-theme="light"] .site-brand,
html[data-theme="light"] .site-header .text-white {
  color: #12281c;
}

html[data-theme="light"] .site-header .text-amber-400 {
  color: #b8860b;
}

html[data-theme="light"] .nav-pill,
html[data-theme="light"] .nav-icon-pill {
  border-color: rgba(4, 84, 55, 0.18) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: #3c5248 !important;
}

html[data-theme="light"] .nav-pill:hover,
html[data-theme="light"] .nav-icon-pill:hover,
html[data-theme="light"] .nav-pill:focus-visible,
html[data-theme="light"] .nav-icon-pill:focus-visible,
html[data-theme="light"] .nav-dd.is-open > .nav-pill,
html[data-theme="light"] .nav-dd.is-open > .nav-icon-pill {
  border-color: rgba(181, 130, 20, 0.45) !important;
  background: #e6f6ee !important;
  color: #8a6410 !important;
}

html[data-theme="light"] .nav-dd__panel {
  border-color: rgba(4, 84, 55, 0.2) !important;
  background: #ffffff !important;
  box-shadow: 0 22px 60px rgba(16, 44, 32, 0.18) !important;
}

html[data-theme="light"] #mobile-menu-backdrop {
  background: rgba(18, 40, 28, 0.5) !important;
}

html[data-theme="light"] #mobile-menu-panel {
  border-left: 1px solid rgba(4, 84, 55, 0.2);
  background: linear-gradient(180deg, #ffffff, #f6faf7) !important;
  box-shadow: -24px 0 70px rgba(16, 44, 32, 0.28) !important;
}

html[data-theme="light"] #mobile-menu-panel a:hover,
html[data-theme="light"] #mobile-menu-panel button:hover {
  background: rgba(0, 210, 148, 0.1) !important;
  color: #046c46 !important;
}

html[data-theme="light"] .mobile-dock {
  border: 1px solid rgba(4, 84, 55, 0.16);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 48px rgba(16, 44, 32, 0.2), inset 0 1px rgba(255, 255, 255, 0.8);
}

html[data-theme="light"] .mobile-dock__item--primary {
  background: linear-gradient(145deg, rgba(0, 210, 148, 0.16), rgba(0, 136, 83, 0.06));
  box-shadow: inset 0 0 0 1px rgba(4, 108, 70, 0.14);
}

/* Home page surfaces */
html[data-theme="light"] .home-intro::before {
  background: linear-gradient(90deg, transparent, #0d7f57, transparent);
  box-shadow: 0 0 16px rgba(0, 210, 148, 0.2);
}

html[data-theme="light"] .home-features article {
  border-color: rgba(4, 84, 55, 0.14) !important;
  background: linear-gradient(145deg, #ffffff, #f4f9f6) !important;
  box-shadow: 0 14px 36px rgba(16, 44, 32, 0.1) !important;
}

html[data-theme="light"] .home-features article > div:first-child {
  border: 1px solid rgba(4, 108, 70, 0.2);
  background: rgba(0, 210, 148, 0.1);
  color: #046c46;
}

html[data-theme="light"] .home-steps > h2,
html[data-theme="light"] .home-faq > h2 {
  text-shadow: none;
}

html[data-theme="light"] .home-steps li {
  border: 1px solid rgba(4, 84, 55, 0.12);
  background: linear-gradient(145deg, #ffffff, #f4f9f6) !important;
  box-shadow: 0 14px 36px rgba(16, 44, 32, 0.09);
}

html[data-theme="light"] .home-steps li > div:first-child {
  border: 1px solid rgba(4, 108, 70, 0.22) !important;
  background: rgba(0, 210, 148, 0.12) !important;
  color: #046c46 !important;
}

html[data-theme="light"] .home-steps li:nth-child(2) > div:first-child {
  border-color: rgba(181, 130, 20, 0.4) !important;
  background: rgba(242, 201, 76, 0.18) !important;
  color: #8a6410 !important;
}

html[data-theme="light"] .home-faq details {
  background: #ffffff !important;
  border-color: rgba(4, 84, 55, 0.14) !important;
}

html[data-theme="light"] .home-final {
  border: 1px solid rgba(4, 108, 70, 0.22);
  background:
    radial-gradient(circle at 50% 100%, rgba(0, 210, 148, 0.12), transparent 45%),
    linear-gradient(145deg, #f0faf5, #e6f4ec) !important;
  box-shadow: 0 0 34px rgba(0, 210, 148, 0.06), 0 20px 48px rgba(16, 44, 32, 0.12);
}

html[data-theme="light"] .shadow-sm,
html[data-theme="light"] .shadow,
html[data-theme="light"] .shadow-md,
html[data-theme="light"] .shadow-lg,
html[data-theme="light"] .shadow-xl,
html[data-theme="light"] .shadow-2xl {
  --tw-shadow-color: rgba(16, 44, 32, 0.16) !important;
}

/* Collector sticker cards: white card, deeper rarity ring, dark-ink name band */
html[data-theme="light"] .sticker-card.sc {
  background: linear-gradient(to bottom, #ffffff, #f7fbf8);
  box-shadow:
    inset 0 0 0 1px rgba(4, 108, 70, 0.22),
    0 8px 22px rgba(16, 44, 32, 0.12);
}

html[data-theme="light"] .sticker-card.sc:hover {
  box-shadow:
    inset 0 0 0 2px rgba(4, 108, 70, 0.45),
    0 14px 32px rgba(16, 44, 32, 0.18);
}

html[data-theme="light"] .sticker-card.sc--legend {
  box-shadow:
    inset 0 0 0 1px rgba(181, 130, 20, 0.55),
    0 10px 30px -6px rgba(216, 166, 42, 0.4);
}
html[data-theme="light"] .sticker-card.sc--legend:hover {
  box-shadow:
    inset 0 0 0 2px rgba(181, 130, 20, 0.8),
    0 16px 38px -6px rgba(216, 166, 42, 0.5);
}
html[data-theme="light"] .sticker-card.sc--special {
  box-shadow:
    inset 0 0 0 1px rgba(4, 108, 70, 0.4),
    0 10px 30px -6px rgba(4, 108, 70, 0.28);
}
html[data-theme="light"] .sticker-card.sc--special:hover {
  box-shadow:
    inset 0 0 0 2px rgba(4, 108, 70, 0.6),
    0 16px 38px -6px rgba(4, 108, 70, 0.35);
}
html[data-theme="light"] .sticker-card.sc--foil {
  box-shadow:
    inset 0 0 0 1px rgba(181, 130, 20, 0.45),
    0 10px 30px -6px rgba(120, 113, 108, 0.3);
}
html[data-theme="light"] .sticker-card.sc--foil:hover {
  box-shadow:
    inset 0 0 0 2px rgba(181, 130, 20, 0.7),
    0 16px 38px -6px rgba(120, 113, 108, 0.38);
}
html[data-theme="light"] .sticker-card.sc:has(.dup-badge:not(.hidden)) {
  box-shadow:
    inset 0 0 0 1px rgba(181, 130, 20, 0.7),
    0 10px 30px -6px rgba(216, 166, 42, 0.38);
}

html[data-theme="light"] .sticker-card.sc .sc-code {
  color: #12281c;
}

html[data-theme="light"] .sticker-card.sc--special .sc-tier {
  background: rgba(4, 108, 70, 0.12);
  color: #046c46;
  box-shadow: inset 0 0 0 1px rgba(4, 108, 70, 0.35);
}
html[data-theme="light"] .sticker-card.sc--foil .sc-tier {
  background: rgba(181, 130, 20, 0.14);
  color: #8a6410;
  box-shadow: inset 0 0 0 1px rgba(181, 130, 20, 0.4);
}
html[data-theme="light"] .sticker-card.sc--base .sc-tier {
  background: rgba(18, 40, 28, 0.07);
  color: #647a6e;
}

html[data-theme="light"] .sticker-card.sc .sc-art {
  background:
    linear-gradient(135deg, rgba(0, 210, 148, 0.1), rgba(238, 245, 240, 0.9)),
    #f4f9f6;
}
html[data-theme="light"] .sticker-card.sc--legend .sc-art {
  background: linear-gradient(135deg, rgba(242, 201, 76, 0.22), rgba(255, 251, 240, 0.6) 55%, rgba(253, 246, 224, 0.7));
}
html[data-theme="light"] .sticker-card.sc--special .sc-art {
  background: linear-gradient(135deg, rgba(0, 210, 148, 0.2), rgba(244, 249, 246, 0.6) 55%, rgba(230, 246, 238, 0.7));
}
html[data-theme="light"] .sticker-card.sc--foil .sc-art {
  background: linear-gradient(135deg, rgba(242, 201, 76, 0.18), rgba(250, 250, 248, 0.6) 55%, rgba(241, 239, 236, 0.7));
}
html[data-theme="light"] .sticker-card.sc .sc-art::before {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.75), transparent);
  opacity: 0.9;
}
html[data-theme="light"] .sticker-card.sc .sc-art::after {
  background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(4, 108, 70, 0.05) 10px 11px);
}

html[data-theme="light"] .sticker-card.sc .sc-name {
  color: #12281c;
  text-shadow: none;
  background: linear-gradient(to top, rgba(4, 84, 55, 0.08), transparent);
}
html[data-theme="light"] .sticker-card.sc--legend .sc-name {
  background: linear-gradient(to top, rgba(181, 130, 20, 0.12), transparent);
}
html[data-theme="light"] .sticker-card.sc--special .sc-name {
  background: linear-gradient(to top, rgba(4, 108, 70, 0.1), transparent);
}

html[data-theme="light"] .sticker-card.sc .sc-need {
  background: rgba(255, 255, 255, 0.85);
  color: #3c5248;
}

html[data-theme="light"] .sticker-card.sc .dup-text {
  background: rgba(242, 201, 76, 0.28) !important;
  color: #6b4d09 !important;
}

html[data-theme="light"] .sticker-card.sc > .mt-auto .inline-flex.items-center.rounded {
  border-color: rgba(4, 84, 55, 0.24) !important;
  background: #ffffff !important;
}
html[data-theme="light"] .sticker-card.sc .qty-minus,
html[data-theme="light"] .sticker-card.sc .qty-plus {
  color: #3c5248 !important;
}
html[data-theme="light"] .sticker-card.sc .qty-minus:hover,
html[data-theme="light"] .sticker-card.sc .qty-plus:hover {
  background: rgba(0, 210, 148, 0.12) !important;
}
html[data-theme="light"] .sticker-card.sc .qty-value {
  color: #12281c;
}

html[data-theme="light"] .sticker-card {
  border-color: rgba(4, 108, 70, 0.2) !important;
}
html[data-theme="light"] .sticker-card:has(.dup-badge:not(.hidden)) {
  border-color: rgba(181, 130, 20, 0.55) !important;
}
html[data-theme="light"] .sticker-card h3 {
  color: #12281c !important;
}
html[data-theme="light"] .sticker-card h3 + p {
  color: #647a6e !important;
}


/* Assistant + group chat widgets */
html[data-theme="light"] .sa-panel,
html[data-theme="light"] .sa-suggests,
html[data-theme="light"] .sa-foot,
html[data-theme="light"] .sa-tour-pop,
html[data-theme="light"] #gc-panel {
  color: #12281c !important;
}

html[data-theme="light"] .sa-panel__head,
html[data-theme="light"] .sa-msg--user {
  background: #e6f6ee !important;
}

/* Assistant head text is hard-coded white in assistant.css — restore dark ink
   on the light header band. */
html[data-theme="light"] .sa-panel__head,
html[data-theme="light"] .sa-panel__title,
html[data-theme="light"] .sa-panel__status,
html[data-theme="light"] .sa-panel__close {
  color: #12281c !important;
}
html[data-theme="light"] .sa-panel__close:hover {
  color: #046c46 !important;
  background: rgba(4, 108, 70, 0.1) !important;
}

html[data-theme="light"] .sa-body,
html[data-theme="light"] #gc-msgs,
html[data-theme="light"] #gc-preview,
html[data-theme="light"] #gc-foot,
html[data-theme="light"] #gc-bar {
  background: #f6faf7 !important;
}

html[data-theme="light"] .sa-msg--bot,
html[data-theme="light"] .sa-chip {
  background: #ffffff !important;
}

html[data-theme="light"] .sa-input,
html[data-theme="light"] #gc-input,
html[data-theme="light"] #gc-photo {
  background: #ffffff !important;
  color: #12281c !important;
}

html[data-theme="light"] #gc-header {
  background: linear-gradient(135deg, #12946a, #046c46) !important;
}

/* Toast + footer */
html[data-theme="light"] .welcome-toast {
  background: #ffffff !important;
}

/* Feedback hero: the view paints a near-black background via an inline
   style, which beats stylesheet rules — override it with !important. */
html[data-theme="light"] .fb-hero {
  background-color: #f0faf5 !important;
  background-image:
    radial-gradient(circle at top right, rgba(242, 201, 76, 0.18), transparent 16rem) !important;
}

html[data-theme="light"] .fb-hero .text-slate-300 {
  color: #3c5248 !important;
}

/* The hero carries bg-slate-950 + text-white, so the dark-button combo rule
   above would force white text — restore dark ink on the light hero. */
html[data-theme="light"] .fb-hero.text-white,
html[data-theme="light"] .fb-hero .text-white,
html[data-theme="light"] .fb-hero h1 {
  color: #12281c !important;
}

html[data-theme="light"] .fb-hero .text-amber-300,
html[data-theme="light"] .fb-hero .text-amber-400 {
  color: #8a6410 !important;
}

/* Help page: restore original dark-on-light colors */
html[data-theme="light"] .text-emerald-900\/80 {
  color: #065f46 !important;
}
html[data-theme="light"] .text-sky-900\/80 {
  color: #075985 !important;
}

html[data-theme="light"] #support-project {
  border-color: rgba(181, 130, 20, 0.35) !important;
  background: linear-gradient(135deg, rgba(242, 201, 76, 0.15), #fdf6e0 45%, #ffffff) !important;
  color: #12281c !important;
}
html[data-theme="light"] #support-project .text-slate-600,
html[data-theme="light"] #support-project .text-slate-500 {
  color: #3c5248 !important;
}

/* Admin "Community recognition" ribbon section: bg-slate-50/60 is another
html[data-theme="light"] .fb-hero a.text-amber-300:hover {
  color: #6b4d09 !important;
}

/* Leaders Board hero: same inline-dark-hero treatment as the feedback hero. */
html[data-theme="light"] .leader-hero {
  border-color: rgba(4, 84, 55, 0.18) !important;
  background:
    radial-gradient(circle at 88% 10%, rgba(242, 201, 76, 0.16), transparent 13rem),
    linear-gradient(112deg, #ffffff, #e9f6ee 52%, #f2f9f4) !important;
  box-shadow: 0 14px 36px rgba(16, 44, 32, 0.12) !important;
}

html[data-theme="light"] .leader-hero.text-white,
html[data-theme="light"] .leader-hero .text-white,
html[data-theme="light"] .leader-hero h1 {
  color: #12281c !important;
}

html[data-theme="light"] .leader-hero .text-slate-200,
html[data-theme="light"] .leader-hero .text-slate-300 {
  color: #3c5248 !important;
}

html[data-theme="light"] .message-bubble--received,
html[data-theme="light"] .trade-message--received,
html[data-theme="light"] .gc-bubble {
  border-color: rgba(4, 84, 55, 0.2) !important;
  background: #ffffff !important;
  color: #12281c !important;
  box-shadow: inset 3px 0 0 rgba(4, 108, 70, 0.18) !important;
}

html[data-theme="light"] .message-bubble__meta,
html[data-theme="light"] .trade-message__meta {
  color: #647a6e !important;
}

html[data-theme="light"] footer {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(244, 249, 246, 0.95)) !important;
}

/* Community note in light theme: the base theme paints the container,
   story box, and footer as dark glass with !important — repaint all of
   them light here so text stays legible. */
html[data-theme="light"] #csm-container,
html[data-theme="light"] #toy-fw-card {
  border-color: rgba(4, 84, 55, 0.2) !important;
  background: #ffffff !important;
  color: #12281c !important;
  box-shadow: 0 30px 80px rgba(16, 44, 32, 0.22) !important;
}

html[data-theme="light"] #csm-story {
  border-color: rgba(181, 130, 20, 0.3) !important;
  background: #fdf6e0 !important;
  color: #12281c !important;
}

html[data-theme="light"] #csm-story p,
html[data-theme="light"] #csm-story strong {
  color: #12281c !important;
}

html[data-theme="light"] #csm-story .text-slate-600,
html[data-theme="light"] #csm-story .text-slate-700 {
  color: #3c5248 !important;
}

html[data-theme="light"] #csm-header {
  border-bottom-color: rgba(181, 130, 20, 0.28) !important;
  background: linear-gradient(to right, #f6faf7, #fdf6e0) !important;
}

html[data-theme="light"] #csm-header .text-white,
html[data-theme="light"] #csm-title.text-white {
  color: #12281c !important;
}

html[data-theme="light"] #csm-header .text-amber-400 {
  color: #b8860b !important;
}

html[data-theme="light"] #csm-close-btn {
  color: #647a6e !important;
}
html[data-theme="light"] #csm-close-btn:hover {
  color: #12281c !important;
  background: rgba(4, 84, 55, 0.08) !important;
}

html[data-theme="light"] #csm-footer {
  border-color: rgba(4, 84, 55, 0.16) !important;
  background: #f6faf7 !important;
}

html[data-theme="light"] #csm-footer label,
html[data-theme="light"] #csm-footer .group > span,
html[data-theme="light"] #csm-footer span.font-medium {
  color: #3c5248 !important;
}

/* Mobile page wash */
@media (max-width: 767px) {
  html[data-theme="light"] body.bg-slate-100 {
    background:
      radial-gradient(ellipse 54vw 44vh at 50% 10%, rgba(0, 210, 148, 0.07) 0%, rgba(0, 136, 83, 0.03) 40%, rgba(249, 250, 249, 0) 72%),
      linear-gradient(180deg, #fbfcfa 0%, #f4f7f3 100%) !important;
    background-attachment: fixed !important;
  }

  html[data-theme="light"] .site-header::before {
    background: rgba(255, 255, 255, 0.92);
  }
}

/* Theme toggle icon state (moon shown while dark, sun while light) */
html:not([data-theme="light"]) .theme-toggle .theme-toggle__sun {
  display: none;
}
html[data-theme="light"] .theme-toggle .theme-toggle__moon {
  display: none;
}