/* ==========================================================================
   Simple Stack — design system
   One signature theme, first-class light + dark.
   Vanilla CSS, no build step. Fonts: Bricolage Grotesque / Hanken Grotesk / JetBrains Mono.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  color-scheme: dark;

  --font-display: "Bricolage Grotesque", "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* fluid type scale */
  --step--1: clamp(0.82rem, 0.78rem + 0.2vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.36rem + 0.7vw, 1.92rem);
  --step-3: clamp(1.92rem, 1.7rem + 1.1vw, 2.6rem);
  --step-4: clamp(2.4rem, 2rem + 2vw, 3.6rem);
  --step-5: clamp(3rem, 2.3rem + 3.4vw, 5rem);
  --step-6: clamp(3.6rem, 2.4rem + 5.6vw, 6.75rem);

  --container: 1160px;
  --container-narrow: 920px;
  --gap: clamp(16px, 1.4vw, 24px);
  --nav-gutter: clamp(10px, 1.3vw, 16px);
  --nav-pill-h: 58px;
  --nav-flow-h: calc(var(--nav-pill-h) + var(--nav-gutter) * 2);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 34px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* signature accent (ember) — shared hue, mode tunes lightness */
  --accent: #ef5a26;
  --accent-2: #ff8a3d;
  --accent-ink: #1a0a04;
}

/* -------- DARK (default) -------- */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #08080b;
  --bg-grad-1: #120c10;
  --bg-grad-2: #08080b;
  --surface: #101015;
  --surface-2: #15151c;
  --surface-3: #1c1c25;
  --surface-glass: rgba(18, 18, 25, 0.55);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-highlight: rgba(255, 255, 255, 0.18);
  --surface-inset: rgba(255, 255, 255, 0.025);

  --border: rgba(255, 255, 255, 0.08);
  --border-2: rgba(255, 255, 255, 0.13);
  --border-glow: color-mix(in srgb, var(--accent) 42%, transparent);

  --text: #f6f4f1;
  --text-muted: #a7a4af;
  --text-faint: #6f6c79;

  /* Accent: only --accent / --accent-2 / --accent-ink are set per palette
     (see the [data-accent] blocks below); the rest derive from them so a
     palette swap needs just three values. */
  --accent: #ff6a38;
  --accent-2: #ffac5e;
  --accent-ink: #190a03;
  --accent-text: color-mix(in srgb, var(--accent) 84%, #ffffff);
  --accent-soft: color-mix(in srgb, var(--accent) 13%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 32%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 50%, transparent);

  --success: #3ddc97;
  --success-soft: rgba(61, 220, 151, 0.13);
  --warn: #f7c948;
  --warn-soft: rgba(247, 201, 72, 0.14);
  --danger: #ff6b81;
  --danger-soft: rgba(255, 107, 129, 0.14);
  --info: #5cc8ff;
  --info-soft: rgba(92, 200, 255, 0.13);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 44px 90px -30px rgba(0, 0, 0, 0.8);
  --ring: 0 0 0 1px var(--border);

  --grain-opacity: 0.05;
  --mesh-1: color-mix(in srgb, var(--accent) 50%, transparent);
  --mesh-2: rgba(255, 60, 120, 0.34);
  --mesh-3: rgba(120, 90, 255, 0.3);
  --mesh-4: rgba(255, 180, 70, 0.28);
}

/* -------- LIGHT -------- */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #faf8f5;
  --bg-grad-1: #fff4ec;
  --bg-grad-2: #faf8f5;
  --surface: #ffffff;
  --surface-2: #fbf9f6;
  --surface-3: #f4f1ea;
  --surface-glass: rgba(255, 253, 250, 0.62);
  --glass-border: rgba(28, 22, 18, 0.09);
  --glass-highlight: rgba(255, 255, 255, 0.85);
  --surface-inset: rgba(20, 16, 14, 0.025);

  --border: rgba(28, 22, 18, 0.1);
  --border-2: rgba(28, 22, 18, 0.16);
  --border-glow: color-mix(in srgb, var(--accent) 34%, transparent);

  --text: #181318;
  --text-muted: #5d5660;
  --text-faint: #8d8690;

  --accent: #e8531e;
  --accent-2: #ff8a3d;
  --accent-ink: #fffaf6;
  --accent-text: color-mix(in srgb, var(--accent) 70%, #000000);
  --accent-soft: color-mix(in srgb, var(--accent) 9%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 28%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 28%, transparent);

  --success: #11936b;
  --success-soft: rgba(17, 147, 107, 0.11);
  --warn: #b07206;
  --warn-soft: rgba(176, 114, 6, 0.12);
  --danger: #cc3a52;
  --danger-soft: rgba(204, 58, 82, 0.1);
  --info: #1f7fb8;
  --info-soft: rgba(31, 127, 184, 0.1);

  --shadow-sm: 0 2px 6px rgba(36, 24, 18, 0.07);
  --shadow: 0 24px 50px -24px rgba(46, 30, 22, 0.26);
  --shadow-lg: 0 40px 80px -30px rgba(46, 30, 22, 0.3);
  --ring: 0 0 0 1px var(--border);

  --grain-opacity: 0.04;
  --mesh-1: color-mix(in srgb, var(--accent) 22%, transparent);
  --mesh-2: rgba(255, 80, 130, 0.16);
  --mesh-3: rgba(120, 90, 255, 0.13);
  --mesh-4: rgba(255, 170, 60, 0.2);
}

/* ------------------------------------------------- accent palettes (1–20) --
   Pick one with APP_ACCENT in .env (or preview on /themes). Each palette only
   sets --accent / --accent-2 (gradient partner) / --accent-ink (text ON the
   accent); every other accent variable derives from these in the theme blocks
   above, so they work in both light and dark. Keep these in sync with
   accent_presets() in app/bootstrap.php (number + name). */
:root[data-accent="1"]  { --accent:#6366f1; --accent-2:#818cf8; --accent-ink:#ffffff; } /* Indigo */
:root[data-accent="2"]  { --accent:#3b82f6; --accent-2:#60a5fa; --accent-ink:#ffffff; } /* Blue */
:root[data-accent="3"]  { --accent:#0ea5e9; --accent-2:#38bdf8; --accent-ink:#ffffff; } /* Sky */
:root[data-accent="4"]  { --accent:#06b6d4; --accent-2:#22d3ee; --accent-ink:#ffffff; } /* Cyan */
:root[data-accent="5"]  { --accent:#14b8a6; --accent-2:#2dd4bf; --accent-ink:#04241f; } /* Teal */
:root[data-accent="6"]  { --accent:#10b981; --accent-2:#34d399; --accent-ink:#03251a; } /* Emerald */
:root[data-accent="7"]  { --accent:#22c55e; --accent-2:#4ade80; --accent-ink:#052e16; } /* Green */
:root[data-accent="8"]  { --accent:#84cc16; --accent-2:#a3e635; --accent-ink:#1a2e05; } /* Lime */
:root[data-accent="9"]  { --accent:#eab308; --accent-2:#facc15; --accent-ink:#2a2205; } /* Yellow */
:root[data-accent="10"] { --accent:#f59e0b; --accent-2:#fbbf24; --accent-ink:#2a1a02; } /* Amber */
:root[data-accent="11"] { --accent:#f97316; --accent-2:#fb923c; --accent-ink:#2a1402; } /* Orange */
:root[data-accent="12"] { --accent:#ef4444; --accent-2:#f87171; --accent-ink:#ffffff; } /* Red */
:root[data-accent="13"] { --accent:#f43f5e; --accent-2:#fb7185; --accent-ink:#ffffff; } /* Rose */
:root[data-accent="14"] { --accent:#ec4899; --accent-2:#f472b6; --accent-ink:#ffffff; } /* Pink */
:root[data-accent="15"] { --accent:#d946ef; --accent-2:#e879f9; --accent-ink:#ffffff; } /* Fuchsia */
:root[data-accent="16"] { --accent:#a855f7; --accent-2:#c084fc; --accent-ink:#ffffff; } /* Purple */
:root[data-accent="17"] { --accent:#8b5cf6; --accent-2:#a78bfa; --accent-ink:#ffffff; } /* Violet */
:root[data-accent="18"] { --accent:#5eead4; --accent-2:#99f6e4; --accent-ink:#04231f; } /* Mint (pastel) */
:root[data-accent="19"] { --accent:#c4b5fd; --accent-2:#ddd6fe; --accent-ink:#1e1b4b; } /* Lavender (pastel) */
:root[data-accent="20"] { --accent:#64748b; --accent-2:#94a3b8; --accent-ink:#ffffff; } /* Slate */

/* ----------------------------------------------------------------- reset -- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

html,
body {
  margin: 0;
  min-height: 100%;
  overflow-x: clip;
}

body {
  position: relative;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-feature-settings: "ss01", "cv01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* atmospheric backdrop + grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1100px 680px at 78% -8%, var(--bg-grad-1), transparent 60%),
    radial-gradient(900px 600px at -6% 4%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 55%),
    var(--bg-grad-2);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed;
  top: -60px;
  left: 16px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  transition: top 0.2s var(--ease);
}
.skip-link:focus {
  top: 16px;
}

/* ------------------------------------------------------------ typography -- */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--text);
  text-wrap: balance;
}

p {
  margin: 0;
}

strong {
  color: var(--text);
  font-weight: 600;
}

code,
.mono {
  font-family: var(--font-mono);
  font-size: 0.86em;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.muted {
  color: var(--text-muted);
}

[hidden],
.hidden {
  display: none !important;
}

.eyebrow,
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.eyebrow::before,
.section-kicker::before {
  content: "";
  width: 16px;
  height: 1px;
  background: var(--accent-line);
}

/* ------------------------------------------------------------- layout ----- */
.content {
  width: min(var(--container), 100% - 40px);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) 0 80px;
  display: grid;
  gap: var(--gap);
}

.section-heading {
  max-width: 720px;
}
.section-heading h1,
.section-heading h2 {
  font-size: var(--step-3);
}
.section-heading p {
  margin-top: 12px;
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: 1.55;
}
.section-heading.compact {
  margin-bottom: 6px;
}
.section-heading.compact h2 {
  font-size: var(--step-2);
}

.grid {
  display: grid;
  gap: var(--gap);
}
.grid.two-up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid.three-up {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dashboard-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* -------------------------------------------------------------- panels ---- */
.panel {
  position: relative;
  min-width: 0;
  padding: clamp(20px, 2.4vw, 30px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.panel > .eyebrow {
  margin-top: 0;
}
.panel h2 {
  font-size: var(--step-2);
  margin-bottom: 10px;
}
.panel h3 {
  font-size: var(--step-1);
}
.panel p {
  color: var(--text-muted);
  line-height: 1.6;
}
.panel + .panel,
.panel * + p {
  margin-top: 0;
}

.panel-dark {
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%),
    linear-gradient(160deg, var(--surface-3), var(--surface));
  border-color: var(--border-2);
  color: var(--text);
}
:root[data-theme="light"] .panel-dark {
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent) 92%, #2a1208), transparent 60%),
    linear-gradient(160deg, #1b1410, #120d0a);
  color: #fdf6ef;
  border-color: rgba(255, 255, 255, 0.08);
}
:root[data-theme="light"] .panel-dark p,
:root[data-theme="light"] .panel-dark .item-subtitle,
:root[data-theme="light"] .panel-dark .account-meta {
  color: rgba(253, 246, 239, 0.74);
}
:root[data-theme="light"] .panel-dark .account-email,
:root[data-theme="light"] .panel-dark strong,
:root[data-theme="light"] .panel-dark h1,
:root[data-theme="light"] .panel-dark h2 {
  color: #fff;
}

.panel-accent {
  background:
    radial-gradient(130% 130% at 0% 0%, var(--accent-soft), transparent 60%),
    var(--surface);
  border-color: var(--accent-line);
}

.panel-dark p {
  color: var(--text-muted);
}

/* ------------------------------------------------------------- buttons ---- */
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease),
    background 0.18s var(--ease), box-shadow 0.25s var(--ease), color 0.18s var(--ease);
}
.button:hover {
  transform: translateY(-2px);
  border-color: var(--border-glow);
  box-shadow: var(--shadow-sm);
}
.button:active {
  transform: translateY(0);
}
.button:disabled,
.button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.button-primary {
  border-color: transparent;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: var(--accent-ink);
  box-shadow: 0 10px 28px -10px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.button-primary:hover {
  border-color: transparent;
  box-shadow: 0 16px 40px -12px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.button-ghost {
  background: transparent;
  border-color: var(--border-2);
}
.button-small {
  min-height: 36px;
  padding: 0 14px;
  font-size: 0.82rem;
  border-radius: 8px;
}
.button-danger {
  border-color: color-mix(in srgb, var(--danger) 32%, transparent);
  background: var(--danger-soft);
  color: var(--danger);
}
.button-danger:hover {
  border-color: var(--danger);
}
.button svg {
  width: 17px;
  height: 17px;
}

/* ---------------------------------------------------------- forms --------- */
.inline-form {
  display: grid;
  gap: 12px;
}
.inline-form label,
.admin-search-form label,
.admin-notes-form label {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
input,
textarea,
select {
  font-family: inherit;
}
.inline-form input,
.inline-form textarea,
.admin-search-form input,
.admin-search-form select,
.admin-notes-form textarea {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.95rem;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.inline-form input::placeholder,
.inline-form textarea::placeholder {
  color: var(--text-faint);
}
.inline-form input:focus,
.inline-form textarea:focus,
.admin-search-form input:focus,
.admin-search-form select:focus,
.admin-notes-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.checkbox-row input[type="checkbox"] {
  width: 17px;
  height: 17px;
  min-height: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ---- auth / login page ---- */
.auth-page {
  width: min(620px, 100% - 32px);
  margin: 0 auto;
  min-height: calc(100svh - var(--nav-flow-h) - 64px);
  align-content: center;
  padding: 40px 0 64px;
}
.auth-card {
  text-align: center;
  padding: clamp(30px, 4vw, 52px);
}
.auth-card .eyebrow {
  justify-content: center;
}
.auth-card h1 {
  font-size: var(--step-3);
}
.auth-card > p {
  margin: 14px auto 0;
  max-width: 470px;
}
.auth-form {
  max-width: 460px;
  margin: 30px auto 0;
  text-align: left;
}
.auth-form {
  gap: 14px;
}
/* Single success notice sits above the form with clear breathing room. */
.auth-card .flash {
  margin: 22px 0 0;
  text-align: left;
}
/* After requesting a code: the email locks and a hairline separates it from
   the code-entry step so the two are visually distinct, not crammed. */
.auth-code-step {
  display: grid;
  gap: 14px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
/* Obvious "locked" treatment for the read-only email after a code is sent. */
.inline-form input[readonly] {
  background: var(--surface);
  color: var(--text-muted);
  border-style: dashed;
  cursor: not-allowed;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8693' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 15px;
}
.inline-form input[readonly]:focus {
  outline: none;
  border-color: var(--border-2);
  box-shadow: none;
}
.link-button {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-text);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}
.link-button:hover {
  text-decoration: underline;
}
.auth-foot {
  margin-top: 18px;
  text-align: center;
  font-size: 0.86rem;
}

/* ---- social / oauth sign-in ---- */
.auth-providers {
  max-width: 460px;
  margin: 26px auto 0;
  display: grid;
  gap: 16px;
}
.oauth-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.2s var(--ease), opacity 0.18s var(--ease);
}
.oauth-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.oauth-button svg {
  width: 18px;
  height: 18px;
}
/* Apple brand: black button on light, white on dark. */
.oauth-apple {
  background: #000;
  color: #fff;
}
:root[data-theme="dark"] .oauth-apple {
  background: #fff;
  color: #000;
}
.auth-divider {
  position: relative;
  text-align: center;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.auth-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
}
.auth-divider span {
  position: relative;
  padding: 0 12px;
  background: var(--surface);
}

/* account screen: link a sign-in provider */
.signin-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}
.signin-methods .oauth-button {
  flex: 0 1 200px;
}
.signin-method.is-linked {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--success);
  border-radius: var(--radius-sm);
  color: var(--success);
  font-weight: 600;
  font-size: 0.95rem;
}

/* admin: product file management */
.admin-product-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
}
.admin-product-form .file-label-input { flex: 1 1 200px; }
.admin-product-form .file-label-input,
.admin-product-form .file-field {
  min-height: 46px;
}

/* Custom file picker — the native input is hidden but still does the work; the
   label is the click target so it opens the OS picker, and we show the filename. */
.file-field {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex: 0 1 auto;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm, 10px);
  background: var(--surface-2);
  overflow: hidden;
  cursor: pointer;
  max-width: 100%;
}
.file-field .file-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
.file-field .file-btn {
  display: inline-grid;
  place-items: center;
  padding: 0 16px;
  align-self: stretch;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text);
  background: var(--surface-3);
  border-right: 1px solid var(--border-2);
  white-space: nowrap;
}
.file-field:hover .file-btn { background: color-mix(in srgb, var(--accent) 12%, var(--surface-3)); }
.file-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.file-field .file-name {
  padding: 0 14px;
  font-size: 0.88rem;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.file-field .file-name.has-file { color: var(--text); }

/* Armed state for the "email buyers" failsafe (turns red until a 2nd click). */
.notify-buyers-btn.is-armed {
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
  background: var(--danger-soft);
  color: var(--danger);
}
.admin-notify-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.inline-confirm { display: inline; }

/* legal pages */
.legal-body h2 {
  font-size: var(--step-2);
  margin: 30px 0 10px;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { margin: 0 0 12px; color: var(--text-muted); line-height: 1.65; }
.legal-body p a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.legal-body .plain-list { margin: 0 0 16px; }
.legal-body strong { color: var(--text); }

/* ------------------------------------------------------- chips & pills ---- */
.signal-chip,
.status-pill,
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-inset);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.signal-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

.status-pill {
  min-height: 24px;
  padding: 0 10px;
  border-color: transparent;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.status-paid,
.status-processed,
.status-ready,
.status-active,
.status-trialing,
.status-subscribed {
  background: var(--success-soft);
  color: var(--success);
}
.status-open,
.status-received,
.status-free,
.status-done,
.status-checkout-completed,
.status-past-due,
.status-pending,
.status-scheduled {
  background: var(--warn-soft);
  color: var(--warn);
}
.status-expired,
.status-failed,
.status-blocked,
.status-canceled,
.status-incomplete,
.status-incomplete-expired,
.status-unpaid,
.status-refunded,
.status-disputed {
  background: var(--danger-soft);
  color: var(--danger);
}

/* -------------------------------------------------------------- lists ----- */
.plain-list,
.checklist,
.api-list {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.plain-list li {
  position: relative;
  padding-left: 26px;
  color: var(--text-muted);
  line-height: 1.55;
}
.plain-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}
.plain-list li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: calc(0.55em + 3px);
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--accent);
}

.checklist li {
  position: relative;
  padding: 13px 14px 13px 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-muted);
  line-height: 1.45;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 999px;
}
.checklist li.is-ready::before {
  background: var(--success);
  box-shadow: 0 0 0 4px var(--success-soft);
}
.checklist li.is-pending::before {
  background: var(--warn);
  box-shadow: 0 0 0 4px var(--warn-soft);
}

.api-list li {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.api-list code {
  color: var(--accent-text);
  font-weight: 600;
}
.api-list span {
  color: var(--text-muted);
  font-size: 0.88rem;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.list-item:first-of-type {
  border-top: 0;
}
.notes-list {
  margin-top: 16px;
}
.item-meta {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.list-item strong,
.empty-state strong {
  font-size: 1.02rem;
  font-weight: 600;
}
.item-subtitle,
.empty-state span,
.account-meta {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}
.list-item > code {
  flex: 0 0 auto;
  max-width: 44%;
  text-align: right;
  align-self: center;
}
.note-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.note-form {
  padding-bottom: 18px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.empty-state {
  display: grid;
  gap: 6px;
  padding: 22px;
  border: 1px dashed var(--border-2);
  border-radius: var(--radius);
  background: var(--surface-inset);
  text-align: left;
}

.key-reveal {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
}
.key-reveal span {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.key-reveal code {
  color: var(--text);
  font-size: 0.86rem;
}

/* --------------------------------------------------------- stats / chips -- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: 18px;
}
.stat {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-inset);
}
.stat span {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.stat strong {
  display: block;
  margin: 8px 0 6px;
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1;
  letter-spacing: -0.03em;
}
.stat p {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.price-chip {
  display: grid;
  gap: 4px;
  min-width: 160px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-inset);
}
.price-chip span,
.price-chip small {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.price-chip strong {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
}

/* =====================================================  SITE NAV  ========= */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: var(--nav-gutter) 0;
  pointer-events: none; /* the gutter lets clicks/scroll pass; the pill re-enables */
}
.nav-inner {
  pointer-events: auto;
  width: min(var(--container), 100% - 28px);
  margin: 0 auto;
  height: var(--nav-pill-h);
  padding: 0 12px 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-radius: 999px;
  background: var(--surface-glass);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 1px solid var(--glass-border);
  box-shadow:
    0 12px 36px -14px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 var(--glass-highlight),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.site-nav.is-scrolled .nav-inner {
  box-shadow:
    0 18px 48px -16px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 var(--glass-highlight),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--text);
}
.logo-badge {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(150deg, var(--accent-2), var(--accent));
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  box-shadow: 0 6px 18px -6px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 14px;
  border-radius: 9px;
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 500;
  transition: color 0.16s var(--ease), background 0.16s var(--ease);
}
.nav-link:hover,
.nav-link.is-active {
  color: var(--text);
  background: var(--surface-inset);
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-2);
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.4s var(--ease);
}
.theme-toggle:hover {
  color: var(--text);
  border-color: var(--border-glow);
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
}
.theme-toggle .icon-sun {
  display: none;
}
.theme-toggle .icon-moon {
  display: block;
}
:root[data-theme="light"] .theme-toggle .icon-sun {
  display: block;
}
:root[data-theme="light"] .theme-toggle .icon-moon {
  display: none;
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.6px;
  margin: 4px auto;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
body.menu-open .nav-toggle span:nth-child(1) {
  transform: translateY(5.6px) rotate(45deg);
}
body.menu-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}
body.menu-open .nav-toggle span:nth-child(3) {
  transform: translateY(-5.6px) rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  top: calc(var(--nav-flow-h) + 8px);
  left: 14px;
  right: 14px;
  z-index: 99;
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 22px;
  background: var(--surface-glass);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 22px 54px -18px rgba(0, 0, 0, 0.55), inset 0 1px 0 var(--glass-highlight);
  transform: translateY(-12px) scale(0.98);
  opacity: 0;
  visibility: hidden;
  transform-origin: top center;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
body.menu-open .mobile-menu {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.mobile-menu a {
  padding: 13px 14px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 500;
}
.mobile-menu a:hover,
.mobile-menu a.is-active {
  background: var(--surface-inset);
  color: var(--accent-text);
}
.mm-theme,
.mm-link {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 13px 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.mm-theme { margin-top: 4px; }
.mm-theme:hover,
.mm-link:hover { background: var(--surface-inset); color: var(--accent-text); }
.mm-theme-to-dark { display: none; }
:root[data-theme="light"] .mm-theme-to-dark { display: inline; }
:root[data-theme="light"] .mm-theme-to-light { display: none; }

/* ----------------------------------------------------------- flash -------- */
.flash-host {
  width: min(var(--container), 100% - 40px);
  margin: 18px auto 0;
}
.flash {
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-weight: 500;
}
.flash-success {
  color: var(--success);
  background: var(--success-soft);
  border-color: color-mix(in srgb, var(--success) 28%, transparent);
}
.flash-error {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 28%, transparent);
}

/* =====================================================  LANDING  ========== */
.home {
  width: 100%;
  display: block;
  overflow: clip;
}
.section {
  position: relative;
  padding: clamp(64px, 9vw, 130px) 0;
}
.section-inner {
  width: min(var(--container), 100% - 40px);
  margin: 0 auto;
}
.section-inner.narrow {
  width: min(var(--container-narrow), 100% - 40px);
}
.section-alt {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.section-head {
  max-width: 760px;
  margin-bottom: clamp(34px, 5vw, 58px);
}
.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head.center .section-kicker {
  justify-content: center;
}
.section-head h2 {
  font-size: var(--step-4);
}
.section-head p {
  margin-top: 16px;
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: 1.55;
}

/* ---- hero ---- */
.hero {
  position: relative;
  /* Pull the hero up behind the floating nav so its gradient sits under the
     glass pill, then pad the content back down below the pill. */
  margin-top: calc(var(--nav-flow-h) * -1);
  padding: calc(var(--nav-flow-h) + clamp(34px, 5vh, 66px)) 0 clamp(56px, 7.5vw, 100px);
  overflow: clip;
}
.hero-bg {
  position: absolute;
  inset: -20% -10% auto;
  height: 760px;
  z-index: -1;
  pointer-events: none;
  filter: blur(8px);
}
.hero-glow {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  animation: drift 18s var(--ease) infinite alternate;
}
:root[data-theme="light"] .hero-glow {
  mix-blend-mode: multiply;
}
.hero-glow.g1 { top: -8%; left: 8%; width: 540px; height: 540px; background: radial-gradient(circle, var(--mesh-1), transparent 65%); }
.hero-glow.g2 { top: -14%; right: 4%; width: 620px; height: 620px; background: radial-gradient(circle, var(--mesh-2), transparent 65%); animation-delay: -6s; }
.hero-glow.g3 { top: 18%; left: 38%; width: 520px; height: 520px; background: radial-gradient(circle, var(--mesh-3), transparent 65%); animation-delay: -11s; }
.hero-glow.g4 { top: 2%; right: 30%; width: 420px; height: 420px; background: radial-gradient(circle, var(--mesh-4), transparent 65%); animation-delay: -3s; }

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(40px, 30px, 0) scale(1.12); }
}

.hero-inner {
  width: min(var(--container), 100% - 40px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.hero-copy { max-width: 620px; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 7px 7px 14px;
  margin-bottom: 18px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
  font-size: 0.82rem;
  color: var(--text-muted);
}
.hero-badge b {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.hero-title {
  font-size: clamp(3.1rem, 2rem + 4.1vw, 5.1rem);
  line-height: 0.97;
  letter-spacing: -0.035em;
}
.hero-title .grad {
  background: linear-gradient(120deg, var(--accent-2), var(--accent) 55%, var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  margin-top: 16px;
  max-width: 500px;
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: 1.5;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.hero-cta .button {
  min-height: 52px;
  padding: 0 26px;
  font-size: 1rem;
}
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.signal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* hero terminal / product visual */
.hero-visual {
  position: relative;
}
.app-window {
  position: relative;
  z-index: 1;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: perspective(1400px) rotateY(-9deg) rotateX(3deg);
  transition: transform 0.5s var(--ease);
}
.hero-visual:hover .app-window {
  transform: perspective(1400px) rotateY(-4deg) rotateX(1deg);
}
.app-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.app-bar i {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--border-2);
}
.app-bar i:first-child { background: #ff6b81; }
.app-bar i:nth-child(2) { background: #f7c948; }
.app-bar i:nth-child(3) { background: #3ddc97; }
.app-bar span {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-faint);
}
.app-body {
  display: grid;
  gap: 12px;
  padding: 18px;
}
.app-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.app-row .lbl {
  display: grid;
  gap: 5px;
}
.app-row .lbl b {
  font-family: var(--font-display);
  font-size: 0.96rem;
}
.app-row .lbl small {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.68rem;
}
.app-row .val {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}
.app-row .val.accent { color: var(--accent-text); }
.app-spark {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 40px;
}
.app-spark i {
  width: 7px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  opacity: 0.85;
}
.hero-float {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border: 1px solid var(--border-2);
  border-radius: 14px;
  background: var(--surface-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
  animation: bob 5s var(--ease) infinite alternate;
}
.hero-float .dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--success);
  box-shadow: 0 0 0 4px var(--success-soft);
}
.hero-float.f1 { top: 12%; left: -36px; }
.hero-float.f2 { bottom: 8%; right: -28px; animation-delay: -2.5s; }
@keyframes bob {
  from { transform: translateY(0); }
  to { transform: translateY(-12px); }
}

/* ---- marquee ---- */
.marquee {
  position: relative;
  padding: 26px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}
.marquee-track span {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  text-transform: uppercase;
  white-space: nowrap;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ---- bento feature grid ---- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gap);
}
.bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.bento-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(420px 220px at var(--mx, 80%) 0%, var(--accent-soft), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.bento-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-glow);
  box-shadow: var(--shadow);
}
.bento-card:hover::after {
  opacity: 1;
}
.bento-card.col-3 { grid-column: span 3; }
.bento-card.col-2 { grid-column: span 2; }
.bento-card.col-4 { grid-column: span 4; }
.bento-card.col-6 { grid-column: span 6; }
.bento-card h3 {
  font-size: var(--step-1);
}
.bento-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}
.feature-ico {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent-text);
}
.feature-ico svg { width: 22px; height: 22px; }
.bento-card .feature-foot {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* ---- steps / how it works ---- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  counter-reset: step;
}
.step {
  position: relative;
  padding: 26px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-text);
}
.step h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.step p {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}
.step-line {
  position: absolute;
  top: 38px;
  right: -webkit-calc(var(--gap) * -0.5);
  right: calc(var(--gap) * -0.5 - 1px);
  width: var(--gap);
  height: 1px;
  background: var(--border-2);
}

/* ---- includes grid ---- */
.includes-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}
.includes-grid span {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 500;
}
.includes-grid span::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
}
.mini-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 20px;
}
.mini-stack span {
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* ---- faq ---- */
.faq {
  display: grid;
  gap: 10px;
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.faq-item.is-open {
  border-color: var(--border-glow);
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 22px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.faq-q .ico {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}
.faq-q .ico::before,
.faq-q .ico::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--accent-text);
  transition: transform 0.3s var(--ease);
}
.faq-q .ico::before { width: 14px; height: 2px; }
.faq-q .ico::after { width: 2px; height: 14px; }
.faq-item.is-open .faq-q .ico::after { transform: scaleY(0); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease);
}
.faq-a p {
  padding: 0 22px 22px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ---- testimonial / quote ---- */
.quote-band {
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}
.quote-band blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.22;
  letter-spacing: -0.02em;
}
.quote-band blockquote .grad {
  background: linear-gradient(120deg, var(--accent-2), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.quote-cite {
  margin-top: 26px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

/* ---- CTA band ---- */
.cta-band {
  position: relative;
  padding: clamp(48px, 7vw, 92px);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 160% at 100% 0%, var(--accent-soft), transparent 60%),
    radial-gradient(120% 160% at 0% 100%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 60%),
    var(--surface);
  overflow: hidden;
  text-align: center;
}
.cta-band h2 {
  font-size: var(--step-4);
  max-width: 640px;
  margin: 0 auto;
}
.cta-band p {
  max-width: 520px;
  margin: 16px auto 0;
  color: var(--text-muted);
  font-size: var(--step-1);
}
.cta-band .hero-cta {
  justify-content: center;
}

/* ---- use cases ---- */
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
.usecase {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 24px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.usecase:hover {
  transform: translateY(-4px);
  border-color: var(--border-glow);
  box-shadow: var(--shadow);
}
.usecase h3 {
  font-size: 1.04rem;
}
.usecase p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}
.usecase-ico {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent-text);
}
.usecase-ico svg {
  width: 20px;
  height: 20px;
}
.usecase-feature {
  border-color: var(--accent-line);
  background:
    radial-gradient(130% 130% at 100% 0%, var(--accent-soft), transparent 62%),
    var(--surface);
}
.usecase-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- floating CTA ---- */
.floating-cta {
  position: fixed;
  z-index: 90;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: var(--accent-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 16px 40px -10px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(160%);
  opacity: 0;
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease), box-shadow 0.25s var(--ease);
}
.floating-cta.is-visible {
  transform: translateY(0);
  opacity: 1;
}
.floating-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 52px -10px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.36);
}
.floating-cta svg {
  width: 17px;
  height: 17px;
}
.floating-cta .cta-price {
  padding-left: 10px;
  margin-left: 2px;
  border-left: 1px solid rgba(0, 0, 0, 0.22);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .floating-cta {
    left: 50%;
    right: auto;
    bottom: 16px;
    transform: translate(-50%, 180%);
  }
  .floating-cta.is-visible {
    transform: translate(-50%, 0);
  }
  .floating-cta:hover {
    transform: translate(-50%, -3px);
  }
}

/* =====================================================  FOOTER  =========== */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.footer-grid {
  width: min(var(--container), 100% - 40px);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 76px) 0 0;
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
}
.footer-brand p {
  margin-top: 16px;
  max-width: 320px;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}
.footer-col h4 {
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.footer-col a {
  display: block;
  padding: 6px 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  transition: color 0.16s var(--ease);
}
.footer-col a:hover {
  color: var(--accent-text);
}
.footer-bottom {
  width: min(var(--container), 100% - 40px);
  margin: clamp(40px, 5vw, 60px) auto 0;
  padding: 22px 0 36px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--text-faint);
  font-size: 0.86rem;
}
.footer-bottom .footer-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/* =====================================================  PRICING  ========== */
.pricing-hero h1,
.page-hero h1,
.dashboard-hero h1 {
  font-size: var(--step-4);
}
.page-hero,
.pricing-hero,
.dashboard-hero {
  padding: clamp(28px, 4vw, 46px);
}
.page-hero p,
.pricing-hero p,
.dashboard-hero p {
  margin-top: 14px;
  color: var(--text-muted);
  font-size: var(--step-1);
  max-width: 640px;
}

.billing-toggle {
  display: inline-flex;
  width: fit-content;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
}
.billing-toggle a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  color: var(--text-muted);
  font-weight: 600;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.billing-toggle a.is-active {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: var(--accent-ink);
  box-shadow: 0 8px 20px -8px var(--accent-glow);
}
.billing-save {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: inherit;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.billing-toggle a.is-active .billing-save {
  background: rgba(255, 255, 255, 0.28);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}
.price-plan {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.price-plan.is-current {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 1px var(--accent-line), var(--shadow);
}
.price-plan.is-pending-change {
  border-color: color-mix(in srgb, var(--warn) 40%, transparent);
}
.plan-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-height: 24px;
}
.plan-topline .eyebrow {
  margin-bottom: 0;
}
.plan-current-pill {
  max-width: 55%;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.2;
}
.pricing-page[data-billing="monthly"] .billing-view[data-billing="yearly"],
.pricing-page[data-billing="yearly"] .billing-view[data-billing="monthly"] {
  display: none;
}
.plan-price {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
  letter-spacing: -0.03em;
}
.plan-price small {
  color: var(--text-faint);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
}
.plan-price-note {
  display: block;
  margin-top: 6px;
  color: var(--accent, var(--text-faint));
  font-size: 0.85rem;
  font-weight: 600;
}
.launch-note {
  margin-top: 10px;
  font-weight: 600;
  color: var(--accent, inherit);
}
.plan-price-stack {
  display: grid;
  gap: 5px;
}
.was-price {
  width: fit-content;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-decoration: line-through;
}
.price-note {
  color: var(--text-faint);
  font-size: 0.82rem;
  line-height: 1.4;
}
.plan-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.plan-meta span,
.theme-mode {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-inset);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.plan-actions {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
}
.plan-actions .button {
  width: 100%;
}
.plan-schedule-slot:empty {
  display: none;
}

.lazy-billing-slot {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lazy-billing-slot.is-done { color: var(--success); }
.lazy-billing-slot.is-error { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, var(--text-muted) 30%, transparent);
  border-top-color: var(--accent);
  border-radius: 999px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.schedule-card {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--border));
  border-radius: var(--radius-sm);
  background: var(--warn-soft);
}
.schedule-card-next {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
.schedule-card span {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.schedule-card strong { font-size: 0.95rem; }
.schedule-card time {
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--surface-inset);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.66rem;
}

/* =====================================================  PRODUCTS  ========= */
.product-sales-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
  gap: var(--gap);
  align-items: start;
}
.product-card-grid,
.product-support-stack {
  display: grid;
  gap: var(--gap);
}
.product-plan {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.flow-list {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.flow-list li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.flow-list span {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: linear-gradient(150deg, var(--accent-2), var(--accent));
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
}
/* Downloads: full-width cards (one per purchase), split into purchase + private
   link on the left and the actual download buttons on the right. */
.downloads-list {
  display: grid;
  gap: var(--gap, 18px);
}
.download-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(20px, 3.5vw, 44px);
  align-items: start;
}
.download-card-info,
.download-card-files {
  display: grid;
  gap: 16px;
  align-content: start;
}
.download-card-files > .eyebrow { margin-bottom: -4px; }
@media (max-width: 768px) {
  .download-card { grid-template-columns: 1fr; gap: 20px; }
}
.download-access-link {
  margin-top: 0;
  border-color: color-mix(in srgb, var(--success) 34%, var(--border));
}
.panel-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* =====================================================  DASHBOARD  ======== */
.dashboard-hero .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.62fr);
  gap: var(--gap);
  align-items: start;
}
.account-card {
  display: grid;
  gap: 7px;
  padding: 18px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--surface-inset);
}
.account-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.account-email {
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-size: 1.32rem;
  line-height: 1.2;
}
.action-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
}

/* =====================================================  ADMIN  ============ */
/* Admin operator-action controls (user detail + webhook detail). */
.admin-ops {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.admin-ops > .eyebrow { display: block; margin-bottom: 10px; }
.admin-ops-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.admin-ops-form {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.admin-ops-form input,
.admin-ops-form select {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
}
.admin-ops-form input[type="number"] { width: 120px; }
.admin-ops-form input[type="text"] { width: 170px; }
.admin-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.admin-metrics { margin-bottom: 14px; }

/* ----------------------------------------------------- /billing page ------ */
.billing-cols {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: var(--gap, 18px);
  align-items: start;
}
.billing-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.billing-plan {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 14px 0 18px;
}
.billing-facts { display: grid; gap: 12px; margin: 0 0 20px; }
.billing-facts > div { display: grid; gap: 2px; }
.billing-facts dt {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.billing-facts dd { margin: 0; color: var(--text); font-size: 0.95rem; }
.billing-summary .portal-button { width: 100%; }
.billing-summary .hint { margin-top: 12px; font-size: 0.85rem; color: var(--text-muted); }
.billing-table { width: 100%; border-collapse: collapse; }
.billing-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 0 0 10px;
  border-bottom: 1px solid var(--border);
}
.billing-table td { padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.billing-table tr:last-child td { border-bottom: 0; }
.billing-table .inv-link { text-align: right; }
.billing-table .inv-link a { color: var(--accent-text); font-weight: 600; }
.skeleton {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-inset) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.3s var(--ease) infinite;
}
.skeleton-pill { width: 64px; height: 22px; border-radius: 999px; }
.skeleton-h { width: 60%; height: 30px; margin: 14px 0 18px; }
.skeleton-line { width: 80%; height: 14px; }
.skeleton-btn { width: 100%; height: 42px; border-radius: var(--radius-sm); margin-top: 4px; }
.billing-skeleton-rows { display: grid; gap: 14px; margin-top: 16px; }
.skeleton-row { width: 100%; height: 18px; }
@keyframes skeleton-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
@media (max-width: 760px) { .billing-cols { grid-template-columns: 1fr; } }

/* ============================ AI Image Studio ============================== */
.studio-page, .gallery-page { padding-bottom: clamp(40px, 6vw, 72px); }
.studio-setup-banner {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 20px; padding: 14px 18px;
  border: 1px solid var(--accent-line); border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.studio-setup-ico { font-size: 1.6rem; line-height: 1; }
.studio-setup-banner strong { display: block; }
.studio-setup-banner span { color: var(--text-muted); font-size: 0.92rem; }

.studio-shell {
  display: grid;
  grid-template-columns: minmax(320px, 380px) 1fr;
  gap: clamp(18px, 2.4vw, 32px);
  align-items: start;
}
.studio-composer {
  position: sticky; top: calc(var(--nav-flow-h) + 12px);
  border: 1px solid var(--border); border-radius: var(--radius-lg, 20px);
  background: var(--surface);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.composer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.credit-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--border-2); background: var(--surface-2);
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--text);
}
.credit-badge svg { width: 15px; height: 15px; color: var(--accent-text); }
.composer-label {
  display: block; margin: 16px 0 8px;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-faint);
}
.composer-label:first-of-type { margin-top: 0; }
.composer-prompt, .composer-fold textarea {
  width: 100%; resize: vertical; min-height: 92px;
  padding: 12px 14px; border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); font: inherit; font-size: 0.96rem; line-height: 1.5;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.composer-prompt:focus, .composer-fold textarea:focus {
  outline: none; border-color: var(--border-glow);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.composer-fold { margin-top: 12px; }
.composer-fold summary {
  cursor: pointer; list-style: none; user-select: none;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-faint); padding: 4px 0;
}
.composer-fold summary::-webkit-details-marker { display: none; }
.composer-fold summary::after { content: " +"; }
.composer-fold[open] summary::after { content: " –"; }
.composer-fold textarea { min-height: 56px; margin-top: 8px; }

.seg-group { display: flex; gap: 8px; }
.model-group { flex-direction: column; }
.seg {
  flex: 1; cursor: pointer; text-align: left;
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); padding: 10px 12px;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease), transform 0.16s var(--ease);
}
.model-opt { display: grid; gap: 2px; }
.seg-title { font-weight: 600; font-size: 0.92rem; }
.seg-sub { font-size: 0.74rem; color: var(--text-muted); }
.count-group .seg { text-align: center; font-weight: 600; }
.seg:hover { border-color: var(--border-glow); }
.seg.is-on {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  box-shadow: 0 0 0 1px var(--accent), 0 6px 18px -10px var(--accent-glow);
}
.seg.is-on .seg-sub { color: var(--text); }

.ratio-group { display: flex; gap: 8px; flex-wrap: wrap; }
.ratio-opt {
  cursor: pointer; flex: 1 1 0; min-width: 56px;
  display: grid; gap: 6px; justify-items: center;
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: 10px 6px;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}
.ratio-box { width: 26px; background: var(--border-2); border-radius: 4px; }
.ratio-name { font-size: 0.66rem; color: var(--text-muted); }
.ratio-opt:hover { border-color: var(--border-glow); }
.ratio-opt.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); box-shadow: 0 0 0 1px var(--accent); }
.ratio-opt.is-on .ratio-box { background: var(--accent); }
.ratio-opt.is-on .ratio-name { color: var(--text); }

.adv-row { display: grid; gap: 6px; margin: 12px 0; }
.adv-row label { font-size: 0.82rem; color: var(--text-muted); display: flex; justify-content: space-between; }
.adv-row label em { color: var(--text); font-style: normal; font-family: var(--font-mono); }
.adv-row input[type="range"] { width: 100%; accent-color: var(--accent); }
.seed-input { display: flex; gap: 8px; }
.seed-input input { flex: 1; height: 38px; padding: 0 12px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font: inherit; }
.seed-dice { width: 38px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); cursor: pointer; font-size: 1.05rem; }
.seed-dice:hover { border-color: var(--border-glow); }

.gen-submit {
  position: relative; width: 100%; margin-top: 20px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; font-size: 1rem; font-weight: 700;
}
.gen-cost { font-family: var(--font-mono); font-size: 0.82rem; opacity: 0.85; }
.gen-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.gen-submit.is-loading { color: transparent; }
.gen-submit.is-loading::after {
  content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--accent-ink) 40%, transparent); border-top-color: var(--accent-ink);
  animation: spin 0.7s linear infinite;
}
.composer-hint { margin: 8px 0 0; font-size: 0.82rem; color: var(--danger); text-align: center; min-height: 1em; }
@keyframes spin { to { transform: rotate(360deg); } }

/* canvas / results */
.studio-canvas { min-height: 60vh; }
.gen-results { display: grid; gap: clamp(16px, 2vw, 24px); }
.gen-card { border: 1px solid var(--border); border-radius: var(--radius-lg, 20px); background: var(--surface); padding: 14px; }
.gen-card-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
.gen-card-grid[data-n="1"] { grid-template-columns: 1fr; max-width: 560px; }
.gen-ph {
  border-radius: var(--radius-sm); overflow: hidden;
  background: linear-gradient(110deg, var(--surface-2) 30%, color-mix(in srgb, var(--accent) 14%, var(--surface-inset)) 50%, var(--surface-2) 70%);
  background-size: 220% 100%; animation: skeleton-shimmer 1.4s var(--ease) infinite;
}
.gen-status { margin-top: 12px; display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 0.9rem; }
.gen-spinner { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--border-2); border-top-color: var(--accent); animation: spin 0.7s linear infinite; }
.gen-prompt-mini { color: var(--text-muted); font-size: 0.88rem; }
.gen-card.is-failed { border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.gen-card.is-failed .gen-status, .gen-card.is-slow .gen-status { color: var(--text); }

.studio-empty { display: grid; place-items: center; text-align: center; padding: clamp(40px, 8vw, 90px) 20px; }
.studio-empty-orb {
  width: 96px; height: 96px; border-radius: 50%; margin-bottom: 22px;
  background: radial-gradient(circle at 35% 30%, var(--accent-2), var(--accent) 60%, transparent 72%);
  box-shadow: 0 0 60px -8px var(--accent-glow); animation: orb-pulse 3.4s var(--ease) infinite;
}
@keyframes orb-pulse { 0%,100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.08); opacity: 1; } }
.studio-empty h2 { margin: 0 0 8px; font-size: var(--step-3); }
.studio-empty p { color: var(--text-muted); max-width: 420px; }

.studio-recent { margin-top: clamp(28px, 4vw, 44px); }
.recent-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.recent-all { font-size: 0.85rem; color: var(--accent-text); font-weight: 600; }
.recent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.recent-thumb { cursor: pointer; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); transition: transform 0.18s var(--ease), border-color 0.18s var(--ease); }
.recent-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recent-thumb:hover { transform: translateY(-2px); border-color: var(--border-glow); }

/* ------------------------------- gallery ---------------------------------- */
.gallery-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.gallery-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 18px 0 22px; }
.filter-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border-2);
  background: var(--surface-2); color: var(--text-muted); font-size: 0.86rem; font-weight: 500;
  cursor: pointer; transition: color 0.16s var(--ease), border-color 0.16s var(--ease), background 0.16s var(--ease);
}
.pill span { font-family: var(--font-mono); font-size: 0.72rem; opacity: 0.7; }
.pill:hover { color: var(--text); border-color: var(--border-glow); }
.pill.is-on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.pill.is-on span { opacity: 0.85; }
.pill-add { border-style: dashed; }
.folder-actions { display: flex; gap: 14px; }
.folder-actions .link-button { background: none; border: 0; cursor: pointer; font: inherit; color: var(--text-muted); }
.folder-actions .link-button:hover { color: var(--text); }
.folder-actions .is-danger:hover { color: var(--danger); }

.masonry { columns: 4 220px; column-gap: 14px; }
.masonry-item { position: relative; break-inside: avoid; margin: 0 0 14px; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.masonry-img { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.masonry-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--ease); }
.masonry-item:hover .masonry-img img { transform: scale(1.04); }
.masonry-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 12px; gap: 8px; opacity: 0; pointer-events: none; /* let image clicks reach the lightbox */
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
  transition: opacity 0.2s var(--ease);
}
.masonry-item:hover .masonry-overlay, .masonry-item:focus-within .masonry-overlay { opacity: 1; }
.masonry-prompt { margin: 0; color: #fff; font-size: 0.8rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; pointer-events: none; }
.masonry-actions { display: flex; gap: 8px; pointer-events: auto; }
.img-act {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 0; cursor: pointer; background: rgba(255,255,255,0.16); color: #fff; font-size: 1rem;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-decoration: none;
  transition: background 0.16s var(--ease), transform 0.16s var(--ease);
}
.img-act:hover { background: rgba(255,255,255,0.3); transform: translateY(-1px); }
.img-act.js-img-like.is-liked { background: var(--accent); color: var(--accent-ink); }

/* ------------------------------ lightbox ---------------------------------- */
body.lb-open { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 2000;
  display: grid; grid-template-columns: 1fr minmax(280px, 340px); align-items: stretch;
  background: rgba(8, 7, 12, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.lightbox[hidden] { display: none; }
.lb-stage { grid-column: 1; display: grid; place-items: center; padding: clamp(16px, 3vw, 48px); min-width: 0; }
.lb-stage img { max-width: 100%; max-height: 88vh; border-radius: 10px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7); }
.lb-meta {
  grid-column: 2; overflow-y: auto; padding: 28px 24px;
  background: var(--surface); border-left: 1px solid var(--border);
}
.lb-prompt { margin: 0 0 18px; color: var(--text); font-size: 0.98rem; line-height: 1.55; }
.lb-facts { display: grid; gap: 12px; margin: 0 0 22px; }
.lb-facts > div { display: grid; gap: 2px; }
.lb-facts dt { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.lb-facts dd { margin: 0; color: var(--text); font-size: 0.9rem; }
.lb-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-actions .button { flex: 1 1 auto; }
.lb-actions #lb-like.is-on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.lb-folders { margin-top: 12px; display: grid; gap: 4px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.lb-folders[hidden] { display: none; }
.lb-folder-opt { text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; font: inherit; font-size: 0.9rem; }
.lb-folder-opt:hover { background: var(--surface-inset); }
.lb-folder-opt.is-on { color: var(--accent-text); font-weight: 600; }
.lb-close { position: absolute; top: 16px; right: 16px; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.12); color: #fff; font-size: 1.5rem; cursor: pointer; backdrop-filter: blur(6px); }
.lb-close:hover { background: rgba(255,255,255,0.24); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.1); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; backdrop-filter: blur(6px); }
.lb-nav:hover { background: rgba(255,255,255,0.22); }
.lb-prev { left: 18px; }
.lb-next { right: calc(min(340px, 36vw) + 18px); }

@media (max-width: 920px) {
  .studio-shell { grid-template-columns: 1fr; }
  .studio-composer { position: static; }
  .masonry { columns: 3 160px; }
}
@media (max-width: 760px) {
  .lightbox { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .lb-stage { grid-column: 1; padding: 14px; }
  .lb-stage img { max-height: 60vh; }
  .lb-meta { grid-column: 1; border-left: 0; border-top: 1px solid var(--border); max-height: 38vh; padding: 18px; }
  .lb-next { right: 18px; }
  .lb-nav { top: 30vh; }
  .masonry { columns: 2 140px; column-gap: 10px; }
  .masonry-item { margin-bottom: 10px; }
  .masonry-overlay { opacity: 1; pointer-events: auto; }
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 1px;
  margin: 0 0 2px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--border); /* shows through the 1px gaps as hairline dividers */
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.admin-stats .stat {
  display: grid;
  gap: 4px;
  padding: 12px 16px;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  transition: background 0.16s var(--ease);
}
.admin-stats .stat:hover {
  background: var(--surface-2);
}
.admin-stats .stat strong {
  order: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.02em;
}
.admin-stats .stat span {
  order: 2;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.admin-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.18s var(--ease);
}
.admin-tabs a:hover {
  color: var(--text);
  border-color: var(--border-glow);
}
.admin-tabs a.is-active {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
.admin-overview-panels {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: var(--gap);
}
.admin-overview-panels .admin-table-panel {
  grid-column: span 2;
}
.attention-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.attention-list a {
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.attention-list a:hover {
  border-color: var(--border-glow);
  transform: translateY(-2px);
}
.attention-list strong {
  font-family: var(--font-display);
  font-size: 1.7rem;
}
.attention-list span {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
}
.admin-search-panel { padding: 20px; }
.admin-search-form {
  display: grid;
  grid-template-columns: 150px minmax(220px, 1fr) minmax(150px, 220px) auto;
  gap: 12px;
  align-items: end;
}
.admin-table-panel,
.admin-detail-page {
  margin-bottom: 4px;
}
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-sm);
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
.admin-table th,
.admin-table td {
  padding: 14px 14px;
  text-align: left;
  vertical-align: middle;
  border-top: 1px solid var(--border);
}
.admin-table thead th {
  border-top: 0;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.admin-table td {
  color: var(--text-muted);
  font-size: 0.9rem;
}
.admin-table td > strong,
.admin-table td > a {
  color: var(--text);
  font-weight: 600;
}
.admin-table td > a:hover { color: var(--accent-text); }
.admin-table td > span {
  display: block;
  margin-top: 3px;
  color: var(--text-faint);
  font-size: 0.78rem;
}
.admin-table-compact { min-width: 600px; }
.admin-table tbody tr {
  transition: background 0.14s var(--ease);
}
.admin-table tbody tr:hover {
  background: var(--surface-inset);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.88rem;
}
.pagination div { display: flex; gap: 8px; }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.9rem;
}
.back-link:hover { color: var(--accent-text); }
.back-link::before { content: "←"; }

.admin-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.admin-detail-header h1 {
  font-size: var(--step-3);
}
.admin-detail-header p {
  margin-top: 8px;
  color: var(--text-muted);
}
.admin-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}
.admin-facts span,
.admin-warning {
  display: grid;
  gap: 3px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.admin-facts strong {
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.96rem;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: anywhere;
}
.admin-warning {
  grid-column: 1 / -1;
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
  background: var(--danger-soft);
  color: var(--danger);
  text-transform: none;
  font-family: var(--font-body);
}
.admin-notes-form,
.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 18px 0;
}
.admin-notes-form { display: grid; }
.admin-detail-sections {
  display: grid;
  gap: 22px;
  margin-top: 24px;
}
.admin-detail-sections section {
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.payload-view { margin-top: 18px; }
.payload-view summary {
  cursor: pointer;
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.payload-view pre {
  max-height: 520px;
  overflow: auto;
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #0a0a0d;
  color: #e7e3dd;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.6;
}

/* =====================================================  THEMES PAGE  ====== */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
.theme-card {
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 180px;
  /* Accent shown on the cards follows the live palette (reactive to data-accent). */
  --theme-primary: var(--accent);
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--theme-primary) 20%, transparent), transparent 60%),
    var(--theme-surface);
  color: var(--theme-ink);
  border: 1px solid color-mix(in srgb, var(--theme-primary) 34%, transparent);
}
.theme-card strong {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--theme-ink);
}
.theme-card span:not(.theme-mode) {
  color: color-mix(in srgb, var(--theme-ink) 72%, transparent);
  line-height: 1.5;
}
.theme-card em {
  align-self: end;
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--theme-primary);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 600;
}
.theme-card.is-active {
  box-shadow: 0 0 0 2px var(--theme-primary), var(--shadow);
}

/* =====================================================  MODAL  ============ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 6, 9, 0.62);
  backdrop-filter: blur(8px);
}
.modal-backdrop.hidden { display: none; }
.modal-card {
  width: min(520px, 100%);
  padding: 30px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: modalIn 0.3s var(--ease);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.modal-card h2 {
  margin: 6px 0 10px;
  font-size: var(--step-2);
}
.modal-card p {
  color: var(--text-muted);
  line-height: 1.6;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* legal */
.legal-page .plain-list { margin-top: 16px; }

/* ==============================================  social sign-in  ========= */
.social-wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(30px, 5vw, 76px);
  align-items: center;
}
.social-copy h2 { font-size: var(--step-4); }
.social-copy > p {
  margin-top: 16px;
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: 1.55;
}
.social-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.social-actions .oauth-button { flex: 1 1 220px; }
/* These two are a feature SHOWCASE, not the real sign-in (that lives on the
   login page). Make them read as a static preview, not clickable controls. */
.social-actions .oauth-demo { cursor: default; }
.social-actions .oauth-demo:hover { transform: none; box-shadow: none; }
.oauth-google {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-2);
}
.social-note {
  margin-top: 20px;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}
.social-note .dot-live {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}
.social-note a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.dot-live {
  width: 8px; height: 8px; flex: none;
  border-radius: 999px;
  background: var(--success);
  animation: livePulse 2.2s var(--ease) infinite;
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 var(--success-soft); }
  70%, 100% { box-shadow: 0 0 0 8px transparent; }
}

.social-demo { display: flex; justify-content: center; }
.signin-card {
  position: relative;
  width: min(360px, 100%);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.signin-card-head {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-faint);
}
.auth-logo {
  width: 16px; height: 16px; flex: none;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
}
.signin-card-body {
  position: relative;
  display: grid; gap: 12px;
  padding: 26px 22px 32px;
}
.signin-card-title {
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  text-align: center;
}
.auth-mock-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 0.92rem; font-weight: 600;
}
.auth-mock-btn svg { width: 17px; height: 17px; }
.auth-mock-btn.dark { background: #000; color: #fff; border-color: #000; }
:root[data-theme="dark"] .auth-mock-btn.dark { background: #fff; color: #000; }
.auth-tap {
  position: absolute;
  left: 50%; top: 96px;
  width: 28px; height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 999px;
  background: var(--text);
  opacity: 0;
  pointer-events: none;
  animation: authTap 7s var(--ease) infinite;
}
@keyframes authTap {
  0%, 6% { opacity: 0; transform: scale(1.7); }
  11% { opacity: 0.25; transform: scale(1); }
  17% { opacity: 0; transform: scale(0.7); }
  100% { opacity: 0; }
}
.auth-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 38px;
  background: linear-gradient(180deg, var(--accent-glow), transparent);
  opacity: 0;
  pointer-events: none;
  animation: authScan 7s var(--ease) infinite;
}
@keyframes authScan {
  0%, 18% { opacity: 0; transform: translateY(0); }
  23% { opacity: 0.85; }
  47% { opacity: 0.85; transform: translateY(180px); }
  53%, 100% { opacity: 0; transform: translateY(180px); }
}
.auth-success {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: var(--surface);
  text-align: center;
  opacity: 0; visibility: hidden;
  animation: authSuccess 7s var(--ease) infinite;
}
.auth-success strong { font-family: var(--font-display); font-size: 1.35rem; }
.auth-success-sub { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.74rem; }
.auth-check {
  display: grid; place-items: center;
  width: 56px; height: 56px; margin-bottom: 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--success);
  animation: authCheckPop 7s var(--ease) infinite;
}
.auth-check svg { width: 27px; height: 27px; }
@keyframes authSuccess {
  0%, 52% { opacity: 0; visibility: hidden; }
  58%, 92% { opacity: 1; visibility: visible; }
  98%, 100% { opacity: 0; visibility: hidden; }
}
@keyframes authCheckPop {
  0%, 54% { transform: scale(0.3); }
  61% { transform: scale(1.12); }
  66%, 100% { transform: scale(1); }
}

/* ==============================================  admin console  ========== */
.console {
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.console-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-faint);
}
.console-bar i { width: 11px; height: 11px; flex: none; border-radius: 999px; background: var(--border-2); }
.console-bar i:first-child { background: #ff6b81; }
.console-bar i:nth-child(2) { background: #f7c948; }
.console-bar i:nth-child(3) { background: #3ddc97; }
.console-url { margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console-path { color: var(--accent-text); }
.console-live {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase;
}
.console-tabs {
  display: flex; gap: 2px;
  padding: 8px 10px 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.console-tabs::-webkit-scrollbar { display: none; }
.console-tab {
  position: relative;
  padding: 11px 16px;
  border: 0; background: none;
  color: var(--text-muted);
  font-family: var(--font-body); font-size: 0.92rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: color 0.18s var(--ease);
}
.console-tab:hover { color: var(--text); }
.console-tab.is-active { color: var(--text); }
.console-tab.is-active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 2px;
}
.console-body { padding: clamp(16px, 2.4vw, 26px); min-height: 280px; }
.console-panel { display: none; }
.console-panel.is-active { display: block; animation: panelIn 0.4s var(--ease-out); }
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.console-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cmetric {
  padding: 15px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-inset);
}
.cmetric span {
  display: block;
  color: var(--text-faint); font-family: var(--font-mono);
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
}
.cmetric strong {
  display: block; margin: 9px 0 3px;
  font-family: var(--font-display); font-size: var(--step-2); line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.cmetric em { font-style: normal; font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-faint); }
.cmetric em.up { color: var(--success); }
.console-chart {
  display: flex; align-items: flex-end; gap: clamp(5px, 1.5vw, 13px);
  height: 100px; margin-top: 14px; padding: 16px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-inset);
}
.console-chart i {
  flex: 1; height: var(--h, 50%);
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  opacity: 0.9; transform-origin: bottom;
}
.console-panel[data-panel="overview"].is-active .console-chart i {
  animation: barGrow 0.7s var(--ease-out) backwards;
}
@keyframes barGrow { from { transform: scaleY(0.02); opacity: 0; } to { transform: scaleY(1); opacity: 0.9; } }

.console-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.console-table th {
  text-align: left; padding: 9px 12px;
  color: var(--text-faint); font-family: var(--font-mono);
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.console-table td { padding: 13px 12px; border-bottom: 1px solid var(--border); }
.console-table tbody tr:last-child td { border-bottom: 0; }
.console-table td:first-child { font-family: var(--font-mono); font-size: 0.83rem; }

.console-stream { display: grid; gap: 8px; }
.stream-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-inset);
  font-size: 0.86rem;
}
.stream-row code { font-family: var(--font-mono); font-size: 0.79rem; color: var(--text); }
.stream-id { margin-left: auto; font-family: var(--font-mono); font-size: 0.71rem; color: var(--text-faint); }
.stream-row time { font-family: var(--font-mono); font-size: 0.71rem; color: var(--text-faint); min-width: 60px; text-align: right; }
.console-panel[data-panel="webhooks"].is-active .stream-row {
  animation: streamIn 0.5s var(--ease-out) backwards;
  animation-delay: calc(var(--si, 0) * 85ms);
}
@keyframes streamIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

.console-term {
  margin: 0; padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 0.52rem + 0.7vw, 0.85rem);
  line-height: 1.75; color: var(--text-muted);
  overflow-x: auto; white-space: pre;
}
.t-cmd { color: var(--accent-text); font-weight: 700; }
.t-str { color: var(--success); }
.t-prop { color: var(--info); }
.t-bool { color: var(--accent-2); }
.t-num { color: var(--warn); }
.t-punc { color: var(--text-faint); }

/* ==============================================  metric band  =========== */
.metric-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.metric {
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-inset);
}
.metric .count {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-4); line-height: 1; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.metric-unit {
  display: block; margin: 10px 0 12px;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--accent-text);
}
.metric p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; }
.metric p a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }

/* supply-chain stat row — reuses .metric cards, three across */
.supply-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-top: clamp(28px, 4vw, 46px);
}
@media (max-width: 880px) { .supply-band { grid-template-columns: 1fr; } }

/* =====================================================  MOTION  =========== */
.reveal {
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
/* only hide pre-reveal when JS is present, so no-JS / SEO still sees content */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.hero [data-stagger] {
  opacity: 0;
  transform: translateY(20px);
  animation: heroIn 0.85s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 95ms + 120ms);
}
@keyframes heroIn {
  to { opacity: 1; transform: none; }
}
.hero-visual {
  opacity: 0;
  transform: translateY(30px) scale(0.97);
  animation: heroVis 1s var(--ease-out) 0.35s forwards;
}
@keyframes heroVis {
  to { opacity: 1; transform: none; }
}

/* =====================================================  RESPONSIVE  ======= */
@media (max-width: 1040px) {
  .bento-card.col-3 { grid-column: span 6; }
  .bento-card.col-2,
  .bento-card.col-4 { grid-column: span 3; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step-line { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 920px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  /* On mobile the hamburger owns everything: the theme toggle + account dropdown
     move into the overlay, leaving just the brand and the hamburger in the pill. */
  .nav-actions .theme-toggle,
  .nav-actions .nav-account { display: none; }
  /* Stacked hero (copy over visual): centre everything so the copy doesn't sit
     lost on the left with dead space beside it. */
  .hero-inner { grid-template-columns: 1fr; justify-items: center; }
  .hero-copy { text-align: center; max-width: 660px; margin-inline: auto; }
  /* the sub is a max-width block, so it needs auto margins to centre under the
     headline (text-align only centres the text inside it, not the box). */
  .hero-sub { margin-inline: auto; }
  .hero-cta { justify-content: center; }
  .hero-proof { justify-content: center; }
  .hero-visual { max-width: 520px; margin-inline: auto; }
  .hero-float { display: none; }
  .hero,
  .dashboard-grid,
  .grid.two-up,
  .grid.three-up,
  .stats,
  .pricing-grid,
  .product-sales-grid,
  .theme-grid,
  .includes-grid,
  .admin-overview-panels,
  .admin-facts,
  .attention-list,
  .dashboard-hero .hero-grid,
  .admin-search-form {
    grid-template-columns: 1fr;
  }
  .admin-overview-panels .admin-table-panel { grid-column: auto; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-card.col-2,
  .bento-card.col-3,
  .bento-card.col-4,
  .bento-card.col-6 { grid-column: span 2; }
  .social-wrap { grid-template-columns: 1fr; }
  .console-metrics,
  .metric-band,
  .usecase-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .content { width: min(100% - 28px, var(--container)); }
  .nav-cta-desktop { display: none; }
  .nav-inner { padding-left: 16px; }
  .metric .count { font-size: var(--step-3); }
  .cmetric strong { font-size: var(--step-1); }
  .console-body { min-height: 0; }
  .pricing-grid,
  .usecase-grid,
  .bento { grid-template-columns: 1fr; }
  .bento-card.col-2,
  .bento-card.col-3,
  .bento-card.col-4,
  .bento-card.col-6 { grid-column: span 1; }
  .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-cta .button,
  .cta-band .button { width: 100%; }
  .list-item { flex-direction: column; }
  .list-item > code { max-width: 100%; text-align: left; }
  .admin-detail-header { flex-direction: column; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero [data-stagger],
  .hero-visual { opacity: 1; transform: none; animation: none; }
  .app-window { transform: none; }
  .auth-tap, .auth-scan, .auth-success, .auth-check, .dot-live { animation: none; }
  .auth-success { opacity: 0; visibility: hidden; }
  .console-chart i, .stream-row { animation: none; }
}

/* ===================== Launch offer ribbon ===================== */
/* Sits inside the hero (on the gradient), just under the floating nav. */
.offer-ribbon {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto clamp(20px, 3.5vw, 34px);
  padding: 7px 8px 7px 16px;
  border-radius: 999px;
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 14px 36px -16px var(--accent);
  transition: transform .15s ease, box-shadow .15s ease;
}
.offer-ribbon:hover { transform: translateY(-1px); box-shadow: 0 18px 40px -16px var(--accent); }
.offer-ribbon-tag {
  flex: none;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .68rem;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.16);
  white-space: nowrap;
}
.offer-ribbon-text { font-size: .9rem; min-width: 0; }
.offer-ribbon-cta {
  flex: none;
  font-weight: 800;
  white-space: nowrap;
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--accent-ink);
  color: var(--accent-2);
}
/* Mobile: drop the long note; keep a tight [badge] [Get it] pill on one line. */
@media (max-width: 720px) {
  .offer-ribbon { gap: 9px; padding: 6px 7px 6px 13px; }
  .offer-ribbon-text { display: none; }
  .offer-ribbon-tag { font-size: .62rem; padding: 4px 9px; letter-spacing: .04em; }
  .offer-ribbon-cta { font-size: .82rem; padding: 6px 12px; }
}

/* ===================== Thank-you / post-purchase ===================== */
.thanks-hero { text-align: center; }
.thanks-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
}
.thanks-check svg { width: 32px; height: 32px; }
.thanks-hero .hero-cta { justify-content: center; margin-top: 6px; }
.thanks-next { margin-top: 22px; }
.thanks-steps { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; counter-reset: step; }
.thanks-steps li {
  position: relative;
  padding: 14px 16px 14px 52px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.thanks-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 14px; top: 14px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-text, var(--accent));
  font-weight: 800; font-size: .85rem;
}

/* ===================== Admin audit trail ===================== */
.audit-summary { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.audit-stat {
  flex: 1 1 160px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.audit-stat span { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1; }
.audit-stat small { display: block; margin-top: 2px; color: var(--text-faint); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.audit-stat em { display: block; margin-top: 6px; font-style: normal; font-size: .82rem; color: var(--text-faint); }
.audit-subhead { margin: 18px 0 8px; font-size: .95rem; }

/* ===================== Agent-first callout ===================== */
.agent-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  margin: clamp(24px, 3.5vw, 38px) auto 0;
  max-width: 760px;
  padding: 18px 22px;
  border: 1px solid var(--accent-line, var(--border-2));
  border-radius: var(--radius);
  background: var(--accent-soft, var(--surface-2));
  text-align: center;
}
.agent-cta-kicker {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text, var(--accent));
}
.agent-cta code {
  font-size: 1rem;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border-2);
}
.agent-cta code strong { color: var(--accent-text, var(--accent)); }
.agent-cta-tail { color: var(--text-muted); font-size: 0.92rem; }

/* ===================== Agent-first value props ===================== */
.value-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: clamp(22px, 3vw, 34px) auto 0;
}
.value-item {
  padding: 18px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}
.value-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.04rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.value-item span {
  display: block;
  margin-top: 7px;
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.4;
}
@media (max-width: 900px) { .value-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .value-row { grid-template-columns: 1fr; } }

/* ===================== Toasts (auto-dismiss notifications) ===================== */
.toast-stack {
  position: fixed;
  z-index: 1000;
  right: clamp(12px, 2vw, 22px);
  bottom: clamp(12px, 2vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(380px, calc(100vw - 24px));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 16px 42px -16px rgba(0, 0, 0, 0.6), 0 2px 8px -4px rgba(0, 0, 0, 0.4);
  font-size: 0.92rem;
  line-height: 1.42;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.26s var(--ease, ease), transform 0.26s var(--ease, ease);
}
.toast.is-in { opacity: 1; transform: none; }
.toast.is-out { opacity: 0; transform: translateY(6px) scale(0.98); }
.toast-ico { flex: none; width: 19px; height: 19px; margin-top: 1px; }
.toast-msg { flex: 1 1 auto; min-width: 0; }
.toast-x {
  flex: none;
  margin: -2px -4px -2px 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--text-faint);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 7px;
}
.toast-x:hover { color: var(--text); background: var(--surface-2); }
.toast-success { border-color: color-mix(in srgb, var(--success) 42%, transparent); }
.toast-success .toast-ico { color: var(--success); }
.toast-error { border-color: color-mix(in srgb, var(--danger) 42%, transparent); }
.toast-error .toast-ico { color: var(--danger); }
.toast-info .toast-ico,
.toast-warning .toast-ico { color: var(--accent-text, var(--accent)); }
.toast-warning { border-color: var(--accent-line, var(--border-2)); }
@media (max-width: 560px) {
  .toast-stack { left: 12px; right: 12px; bottom: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity 0.15s ease; transform: none; }
  .toast.is-in, .toast.is-out { transform: none; }
}

/* ----------------------------------------------- account + delete pages ---- */
/* Nav account: a glassy icon-button that opens the Account / Billing / Sign out
   dropdown (sits next to the matching circular theme toggle). */
.nav-account {
  position: relative;
  display: inline-flex;
}
.nav-avatar {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-2);
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.nav-avatar svg { width: 18px; height: 18px; }
.nav-avatar:hover {
  color: var(--text);
  border-color: var(--border-glow);
  transform: translateY(-1px);
}
.nav-avatar.is-active {
  color: var(--text);
  border-color: var(--border-glow);
}
.nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 184px;
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 16px;
  background: var(--surface-glass);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 22px 54px -18px rgba(0, 0, 0, 0.55), inset 0 1px 0 var(--glass-highlight);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
  z-index: 120;
}
.nav-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.nav-dropdown a,
.nav-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
}
.nav-dropdown a:hover,
.nav-dropdown button:hover {
  background: var(--surface-inset);
  color: var(--accent-text);
}
.nav-dropdown .nav-dd-signout { color: var(--danger); }
.nav-dropdown .nav-dd-signout:hover { color: var(--danger); background: var(--danger-soft); }

.account-page .page-hero { margin-bottom: 22px; }
.account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gap, 18px);
  align-items: stretch;   /* same-row cards share the tallest card's height */
}
.acct-card {
  display: flex;
  flex-direction: column;
}
.acct-card h2 { margin: 2px 0 0; font-size: var(--step-1, 1.15rem); }
.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;        /* pin the button row to the bottom — cards line up */
  padding-top: 14px;
}
.acct-card .is-linked { cursor: default; opacity: 0.85; }
.eyebrow.is-rekt { color: var(--danger); }
.acct-danger { border-color: color-mix(in srgb, var(--danger) 26%, var(--border)); }

/* Full-width, low-key delete bar at the foot of the account page. */
.acct-danger-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: var(--gap, 18px);
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 14px);
  background: var(--surface-inset);
}
.acct-danger-bar .acct-danger-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.acct-danger-bar strong { font-size: 0.98rem; }
.acct-danger-bar .muted { font-size: 0.88rem; }

/* Delete-account two-step flow */
.delete-page .account-grid,
.delete-page .delete-flow { max-width: 620px; }
.delete-flow { margin-inline: auto; }
.delete-losses {
  margin: 16px 0 4px;
  padding-left: 20px;
  display: grid;
  gap: 9px;
  color: var(--text-muted);
  line-height: 1.5;
}
.delete-losses li::marker { color: var(--danger); }
.delete-losses strong { color: var(--text); }
.hint {
  margin-top: 14px;
  padding: 11px 14px;
  border-radius: var(--radius-sm, 10px);
  background: var(--surface-inset);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.88rem;
}

/* --------------------------------------------------- accent palette picker - */
.accent-section { margin-top: 22px; }
.accent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.accent-swatch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 14px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm, 12px);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.accent-swatch:hover { transform: translateY(-2px); border-color: var(--border-glow); }
.accent-swatch.is-active {
  border-color: var(--sw);
  box-shadow: 0 0 0 1px var(--sw), 0 10px 26px -14px var(--sw);
}
.accent-dot {
  width: 100%;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--sw2), var(--sw));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.accent-swatch strong { font-size: 0.92rem; }
.accent-swatch em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.accent-swatch.is-active em { color: var(--sw); }

/* ============================ [demo-mode] Demo mode banner (removable block) === */
.demo-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .5rem 1rem;
  font-family: var(--font-body);
  font-size: .82rem;
  color: var(--accent-text);
  background: linear-gradient(90deg, var(--accent-soft), color-mix(in srgb, var(--accent) 22%, transparent));
  border-bottom: 1px solid var(--accent-line);
  text-align: center;
  position: relative;
  z-index: 60;
}
.demo-banner-text { color: var(--text); }
.demo-banner-text strong { color: var(--accent-text); font-weight: 700; letter-spacing: .01em; }
.demo-banner-dot {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-glow);
  animation: demoPulse 2s var(--ease, ease-out) infinite;
  flex: none;
}
@keyframes demoPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70% { box-shadow: 0 0 0 .5rem transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.demo-banner-cta {
  display: inline-flex; align-items: center;
  padding: .22rem .7rem;
  border-radius: 999px;
  font-weight: 600;
  color: var(--accent-text);
  border: 1px solid var(--accent-line);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  text-decoration: none;
  transition: background .15s var(--ease-out, ease), transform .15s var(--ease-out, ease);
}
.demo-banner-cta:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); transform: translateY(-1px); }
.auth-demo-enter { margin-top: .4rem; }
@media (max-width: 560px) {
  .demo-banner { font-size: .76rem; padding: .45rem .7rem; gap: .45rem; }
}