/* ==== bundled from: vendor/fontawesome/fontawesome.css ==== */
.fa-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.fa-solid {
  fill: currentColor;
}

/* ==== bundled from: style.css ==== */
:root {
  --shell-max-width: 1200px;
  --shell-padding: 24px;
  --indicator-circle-size: 22px;
  --primary: #1648c5;
  --bg: #f1f4fa;
  --surface: #ffffff;
  --text-primary: #0a1428;
  --text-secondary: #4a566f;
  --border: #cdd7ea;
  --border-subtle: #d8e1f1;
  --border-strong: #a8b7d5;
  --accent: #1648c5;
  --accent-2: #0f2f70;
  --gradient: linear-gradient(135deg, #1648c5, #0a1330);
  --sunken: #e6ecf7;
  --panel-muted: #eef2fb;
  --panel-background: #ffffff;
  --muted-foreground: #4a566f;
  --shadow-xs: 0 6px 14px rgba(10, 20, 40, 0.05);
  --shadow-sm: 0 12px 30px rgba(10, 20, 40, 0.08);
  --tag-bg: #e1e9f7;
  --radius-lg: 16px;
  --radius-pill: 24px;
  --shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 10px 26px rgba(0, 0, 0, 0.06);
  --focus-ring: rgba(22, 72, 197, 0.4);
  --menu-icon-gap: 8px;
  --primary-500: #1648c5;
  --primary-100: #e3ecff;
  --primary-700: #0f2f70;
  --success-500: #2f9e62;
  --success-100: #e1f6ea;
  --success-700: #1d6a3f;
  --highlight-500: #f0b429;
  --highlight-100: #fff3d6;
  --highlight-700: #b98010;
  --draft-500: #6b6eff;
  --draft-100: #ebeaff;
  --draft-700: #4648b8;
  --danger-500: #e04b4b;
  --danger-100: #ffe3e3;
  --danger-700: #b13636;
  --gray-900: #0a1428;
  --gray-700: #4a566f;
  --gray-500: #7b879f;
  --gray-200: #d8e1f1;
  --gray-50: #f1f4fa;
  --pill-bg: #1d3f99;
  --pill-bg-hover: #16337e;
  --pill-border: #112968;
  --pill-border-hover: #0d204f;
  --pill-text: #f7f9ff;
  --hub-neutral-black: #0a1428;
  --hub-neutral-blue-900: #111f42;
  --hub-text-strong: #0a1428;
  --hub-text-default: #243552;
  --hub-text-muted: #4a566f;
  --hub-surface-base: #ffffff;
  --hub-surface-muted: #eef2fb;
  --hub-card-radius: 16px;
  --hub-card-shadow: 0 12px 30px rgba(10, 20, 40, 0.08);
  --hub-space-12: 12px;
  --hub-space-16: 16px;
  --hub-space-24: 24px;
  --hub-heading-xl: 2.2rem;
  --hub-heading-lg: 1.3rem;
  --hub-heading-md: 1.1rem;
  --hub-body-lg: 1.05rem;
  --hub-body-md: 0.96rem;
}

.fa-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.fa-solid {
  fill: currentColor;
}

[data-theme="light"] {
  --primary: #1648c5;
  --bg: #f1f4fa;
  --surface: #ffffff;
  --text-primary: #0a1428;
  --text-secondary: #4a566f;
  --border: #cdd7ea;
  --border-subtle: #d8e1f1;
  --border-strong: #a8b7d5;
  --accent: #1648c5;
  --accent-2: #0f2f70;
  --gradient: linear-gradient(135deg, #1648c5, #0a1330);
  --sunken: #e6ecf7;
  --panel-muted: #eef2fb;
  --panel-background: #ffffff;
  --muted-foreground: #4a566f;
  --shadow-xs: 0 6px 14px rgba(10, 20, 40, 0.05);
  --shadow-sm: 0 12px 30px rgba(10, 20, 40, 0.08);
  --tag-bg: #e1e9f7;
  --shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 10px 26px rgba(0, 0, 0, 0.06);
  --primary-500: #1648c5;
  --primary-100: #e3ecff;
  --primary-700: #0f2f70;
  --success-500: #2f9e62;
  --success-100: #e1f6ea;
  --success-700: #1d6a3f;
  --highlight-500: #f0b429;
  --highlight-100: #fff3d6;
  --highlight-700: #b98010;
  --draft-500: #6b6eff;
  --draft-100: #ebeaff;
  --draft-700: #4648b8;
  --danger-500: #e04b4b;
  --danger-100: #ffe3e3;
  --danger-700: #b13636;
  --gray-900: #0a1428;
  --gray-700: #4a566f;
  --gray-500: #7b879f;
  --gray-200: #d8e1f1;
  --gray-50: #f1f4fa;
  --pill-bg: #1d3f99;
  --pill-bg-hover: #16337e;
  --pill-border: #112968;
  --pill-border-hover: #0d204f;
  --pill-text: #f7f9ff;
  --surface-1: #fafafa;
  --surface-2: #f0f0f0;
  --muted: #888;
}

[data-theme="dark"] {
  --primary: #2f6ae8;
  --bg: #070d18;
  --surface: #0d1424;
  --text-primary: #e9eef9;
  --text-secondary: #a6b2c9;
  --border: #1f2a42;
  --border-subtle: #1f2a42;
  --border-strong: #3a4b6c;
  --accent: #2f6ae8;
  --accent-2: #9dc2ff;
  --gradient: linear-gradient(135deg, #2f6ae8, #0a1024);
  --sunken: #0b1322;
  --panel-muted: #111b30;
  --panel-background: #111b30;
  --muted-foreground: #a6b2c9;
  --shadow-xs: 0 8px 24px rgba(0, 0, 0, 0.32);
  --shadow-sm: 0 12px 30px rgba(0, 0, 0, 0.38);
  --tag-bg: #16233a;
  --shadow-soft: 0 16px 46px rgba(0, 0, 0, 0.28);
  --shadow-card: 0 10px 28px rgba(0, 0, 0, 0.2);
  --primary-500: #2f6ae8;
  --primary-100: #142245;
  --primary-700: #9dc2ff;
  --success-500: #33c07a;
  --success-100: #133528;
  --success-700: #b6f2d4;
  --highlight-500: #f2c14f;
  --highlight-100: #3a2a0d;
  --highlight-700: #ffe1a3;
  --draft-500: #7b7dff;
  --draft-100: #1d1e47;
  --draft-700: #c9caff;
  --danger-500: #ff6b6b;
  --danger-100: #3a1515;
  --danger-700: #ffb3b3;
  --gray-900: #e9eef9;
  --gray-700: #a6b2c9;
  --gray-500: #7d8aa6;
  --gray-200: #1f2a42;
  --gray-50: #0b111d;
  --pill-bg: #2a56be;
  --pill-bg-hover: #234aa6;
  --pill-border: #4f83ff;
  --pill-border-hover: #79a2ff;
  --pill-text: #f7f9ff;
  --hub-neutral-black: #e9eef9;
  --hub-neutral-blue-900: #9dc2ff;
  --hub-text-strong: #e9eef9;
  --hub-text-default: #c7d4ed;
  --hub-text-muted: #a6b2c9;
  --hub-surface-base: #0d1424;
  --hub-surface-muted: #111b30;
  --hub-card-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
  --surface-1: #111b30;
  --surface-2: #0b1322;
  --muted: #a6b2c9;
}

.hub-shared-page {
  gap: var(--hub-space-24);
}

.hub-shared-card {
  background: var(--hub-surface-base);
  border: 1px solid var(--border);
  border-radius: var(--hub-card-radius);
  box-shadow: var(--hub-card-shadow);
}

.hub-shared-card-muted {
  background: var(--hub-surface-muted);
}

.hub-stack-12 {
  display: grid;
  gap: var(--hub-space-12);
}

.hub-stack-16 {
  display: grid;
  gap: var(--hub-space-16);
}

.hub-stack-24 {
  display: grid;
  gap: var(--hub-space-24);
}

.hub-heading-xl,
.hub-heading-lg,
.hub-heading-md,
.hub-body-lg,
.hub-body-md {
  margin: 0;
  color: var(--hub-text-strong);
}

.hub-heading-xl {
  font-size: var(--hub-heading-xl);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.hub-heading-lg {
  font-size: var(--hub-heading-lg);
  letter-spacing: -0.01em;
  line-height: 1.28;
}

.hub-heading-md {
  font-size: var(--hub-heading-md);
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.hub-body-lg {
  font-size: var(--hub-body-lg);
  line-height: 1.6;
  color: var(--hub-text-default);
}

.hub-body-md {
  font-size: var(--hub-body-md);
  line-height: 1.55;
  color: var(--hub-text-muted);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--sx-font-body, 'Geist', 'Inter', 'SF Pro Display', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  background: var(--bg);
  color: var(--text-primary);
  text-align: left;
  min-height: 100vh;
  line-height: 1.6;
  letter-spacing: -0.01em;
}

.modal-open {
  overflow: hidden;
}

a {
  color: inherit;
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

.page-shell {
  width: 100%;
  max-width: var(--shell-max-width);
  margin: 0 auto;
  padding: 0 var(--shell-padding);
}

.shell-flush .page-shell {
  padding-inline: 0;
}
header {
  padding: 24px 0 12px;
}

.impersonation-banner {
  width: 100%;
  background: #6b4423;
  color: #fff7e9;
  border-bottom: 1px solid rgba(255, 247, 233, 0.2);
}

.impersonation-banner-shell {
  min-height: 44px;
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.impersonation-banner-text {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.impersonation-end-session {
  border-color: rgba(255, 247, 233, 0.65);
  color: #fff7e9;
  background: rgba(255, 247, 233, 0.08);
}

.impersonation-end-session:hover,
.impersonation-end-session:focus-visible {
  border-color: #fff7e9;
  background: rgba(255, 247, 233, 0.2);
}

/* Toast styles live in css/base.css (loaded after this file) — kept here as
 * a minimal stub so legacy cascades that referenced .toast-container don't
 * resurrect the old top-right top-padding-16 layout. See base.css for the
 * full Sigrix Refined §07 toast system. */
.toast-container {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 999;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
}
@supports not (backdrop-filter: blur(12px)) {}
.auth-env-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 8px auto 0;
  padding: 4px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: var(--panel-muted);
  color: var(--text-secondary);
  font-size: 0.78rem;
}

.auth-env-banner.hidden {
  display: none;
}

.auth-env-banner a {
  color: var(--accent);
  text-decoration: none;
}

.auth-env-banner a:hover,
.auth-env-banner a:focus-visible {
  text-decoration: underline;
}
@media (max-width: 1024px) {
  .global-search-hint {
    display: none;
  }
}

.icon-button {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.icon-button:hover,
.icon-button:focus-visible {
  background: var(--panel-muted);
  outline: none;
}

.icon-button[aria-expanded="true"] {
  background: var(--panel-muted);
  border-color: var(--border-subtle);
}

.icon-button .fa-icon,
.icon-button svg {
  width: 18px;
  height: 18px;
  display: block;
}

.icon-button .icon {
  width: 18px;
  height: 18px;
}

.mobile-nav-panel {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(360px, 92vw);
  background: var(--surface);
  border-left: 1px solid var(--border-subtle);
  box-shadow: -12px 0 40px rgba(10, 20, 40, 0.16);
  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 40;
  padding: 0 14px 20px;
  visibility: hidden;
  pointer-events: none;
  overflow-y: auto;
}

[data-theme="dark"] .mobile-nav-panel {
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.55);
}

/* Drawer is only available alongside the hamburger — keep this breakpoint
 * in lockstep with the 900px hamburger toggle in css/sx-nav-actions.css.
 * Above 900px the desktop .sx-nav-actions cluster is visible and the drawer
 * must not render. */
@media (min-width: 901px) {
  .mobile-nav-panel {
    display: none;
  }
}

body.is-mobile-nav-open .mobile-nav-panel {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

body.is-mobile-nav-open {
  overflow: hidden;
}

body.is-mobile-nav-open::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(20, 22, 28, 0.32);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 35;
}

[data-theme="dark"] body.is-mobile-nav-open::after {
  background: rgba(5, 7, 12, 0.55);
}

.mobile-nav-panel-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-nav-panel-inner > .mobile-nav-eyebrow {
  margin-top: 4px;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 14px;
  height: 48px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 500;
  font-size: 15px;
  transition: background-color 140ms ease, color 140ms ease;
}

.mobile-nav-link:hover,
.mobile-nav-link:focus-visible {
  background: var(--panel-muted);
  outline: none;
}

.mobile-nav-link.is-active {
  background: var(--panel-muted);
  color: var(--text-primary);
}

.mobile-nav-link__indicator {
  width: 12px;
  height: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  color: var(--text-muted, #6B7382);
}

/* Default state: a chevron pointing right (drawn with currentColor borders). */
.mobile-nav-link__indicator::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
}

/* Active state: replace chevron with a 6px brand-blue dot. */
.mobile-nav-link.is-active .mobile-nav-link__indicator::after {
  width: 6px;
  height: 6px;
  border: 0;
  border-radius: 50%;
  background: var(--accent, var(--sx-brand, #5B7CFF));
  transform: none;
}

.nav-dropdown {
  position: relative;
  display: inline-flex;
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 16px 40px rgba(10, 20, 40, 0.12), 0 2px 6px rgba(10, 20, 40, 0.04);
  min-width: 220px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 12;
}

[data-theme="dark"] .nav-dropdown-menu {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25);
}

.nav-menu-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease;
}

.nav-menu-item:hover,
.nav-menu-item:focus-visible {
  background: var(--panel-muted);
  outline: none;
}

.nav-menu-item.is-active {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text-primary);
  font-weight: 600;
}

.nav-menu-item-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--text-secondary);
  display: block;
}

.nav-menu-item.is-active .nav-menu-item-icon,
.nav-menu-item:hover .nav-menu-item-icon,
.nav-menu-item:focus-visible .nav-menu-item-icon {
  color: var(--accent);
}

.nav-dropdown.is-open .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  display: flex;
}

.nav-dropdown.is-active .nav-dropdown-toggle {
  border-color: var(--accent);
  box-shadow: none;
  background: transparent;
}

.nav-dropdown-chevron {
  display: inline-flex;
  align-items: center;
  transition: transform 0.15s ease-in-out;
}

.nav-dropdown-chevron .fa-icon {
  width: 10px;
  height: 10px;
}

.nav-dropdown.is-open .nav-dropdown-chevron,
.nav-dropdown:focus-within .nav-dropdown-chevron {
  transform: rotate(180deg);
}

.dropdown-link {
  display: block;
  text-decoration: none;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--text-primary);
  background: transparent;
}

.dropdown-link:hover,
.dropdown-link:focus-visible {
  border-color: var(--border);
  background: var(--sunken);
}

.dropdown-link.is-active {
  border-color: var(--accent);
  background: transparent;
  box-shadow: none;
}
.global-search {
  position: relative;
  width: 100%;
  min-width: 0;
}

.global-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--text-secondary);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.global-search-icon .fa-icon {
  width: 14px;
  height: 14px;
  display: block;
}

.global-search input[type="search"] {
  width: 100%;
  height: 36px;
  border: 0;
  border-radius: var(--sx-r-md, 10px);
  padding: 0 56px 0 34px;
  font-size: 13px;
  background: var(--sx-surface, var(--surface));
  color: var(--sx-text, var(--text-primary));
  box-shadow: 0 0 0 1px var(--sx-line, var(--border-subtle)) inset;
  font-family: var(--sx-font-body, inherit);
  transition: box-shadow 0.2s ease, background 0.2s ease;
}

.global-search input[type="search"]:hover {
  box-shadow: 0 0 0 1px var(--sx-line-2, var(--border)) inset;
}

.global-search-hint {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
  background: var(--bg);
  font-size: 11px;
  font-family: inherit;
  font-weight: 500;
  color: var(--text-secondary);
  pointer-events: none;
  line-height: 1.2;
}

.global-search input[type="search"]::placeholder {
  color: var(--sx-text-3, var(--text-secondary));
}

.global-search input[type="search"]:focus {
  outline: none;
  background: var(--sx-surface, var(--surface));
  box-shadow: 0 0 0 1px var(--sx-brand, var(--accent)) inset, 0 0 0 3px color-mix(in srgb, var(--sx-brand, var(--accent)) 22%, transparent);
}

.global-search-results {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 16px 40px rgba(10, 20, 40, 0.12), 0 2px 6px rgba(10, 20, 40, 0.04);
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 360px;
  overflow-y: auto;
  z-index: 20;
}

[data-theme="dark"] .global-search-results {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25);
}

.search-results-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.search-section-title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  padding: 4px 4px 2px;
}

.search-results-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.search-result-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--text-primary);
  background: transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.search-result-item:hover,
.search-result-item:focus-visible {
  border-color: var(--border);
  background: var(--sunken);
  outline: none;
}

.search-result-title {
  font-weight: 600;
}

.search-result-meta {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.search-empty {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
  padding: 4px 6px;
}

.auth-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.login-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 14px;
  width: min(320px, calc(100vw - 2 * var(--pad-mobile)));
  max-width: calc(100vw - 2 * var(--pad-mobile));
  box-shadow: 0 16px 40px rgba(10, 20, 40, 0.12), 0 2px 6px rgba(10, 20, 40, 0.04);
  z-index: 10;
}

[data-theme="dark"] .login-dropdown {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25);
}

.login-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.login-title {
  margin: 0;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.google-signin-button {
  display: flex;
  justify-content: center;
  width: 100%;
}

.google-signin-button > div,
.google-signin-button iframe {
  width: 100% !important;
  max-width: 100%;
  height: 40px;
}

.login-hint {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-field.inline input {
  width: 100%;
}

.form-actions.compact {
  margin-top: 6px;
}

.form-actions.compact .primary-pill {
  padding: 10px 14px;
}

.form-status {
  min-height: 18px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.form-status.error {
  color: #ff7b7b;
}

.form-status.success {
  color: var(--accent-2);
}
.user-menu {
  position: relative;
}

.user-menu-toggle {
  border: 1px solid transparent;
  background: transparent;
  padding: 2px 10px 2px 2px;
  min-height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.user-menu-toggle:hover,
.user-menu-toggle:focus-visible {
  background: var(--sunken);
  border-color: var(--border-subtle);
  outline: none;
}

.user-menu-toggle[aria-expanded="true"] {
  background: var(--sunken);
  border-color: var(--border-subtle);
}

.user-menu-toggle-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  color: var(--text-secondary);
  transition: transform 180ms ease;
}

.user-menu-toggle-chevron .fa-icon {
  width: 12px;
  height: 12px;
  display: block;
}

.user-menu-toggle[aria-expanded="true"] .user-menu-toggle-chevron {
  transform: rotate(180deg);
}

.user-summary {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 16px 40px rgba(10, 20, 40, 0.12), 0 2px 6px rgba(10, 20, 40, 0.04);
  min-width: 280px;
  width: 300px;
  max-width: 320px;
}

[data-theme="dark"] .user-summary {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25);
}

.user-menu-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 10;
}

.notification-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.notification-bell-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.notification-bell-toggle:hover,
.notification-bell-toggle:focus-visible {
  background: var(--sunken);
  color: var(--text-primary);
  outline: none;
}

.notification-bell-toggle[aria-expanded="true"] {
  background: var(--sunken);
  color: var(--text-primary);
  box-shadow: 0 0 0 1px var(--border-subtle) inset;
}

.notification-bell-toggle .fa-icon {
  width: 16px;
  height: 16px;
}

.notification-bell-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e53935;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--surface);
}

.notification-bell-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 340px;
  max-width: 92vw;
  max-height: 480px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(10, 20, 40, 0.12), 0 2px 6px rgba(10, 20, 40, 0.04);
  z-index: 20;
}

[data-theme="dark"] .notification-bell-dropdown {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25);
}

.notification-bell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
}

.notification-bell-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.notification-bell-mark-all {
  font-size: 12px;
  padding: 4px 8px;
}

.notification-bell-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 0;
}

.notification-bell-empty {
  margin: 0;
  padding: 20px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
}

.notification-bell-item {
  display: block;
  padding: 10px 14px;
  text-decoration: none;
  color: inherit;
  border-left: 3px solid transparent;
}

.notification-bell-item:hover,
.notification-bell-item:focus-visible {
  background: var(--sunken);
  outline: none;
}

.notification-bell-item.is-unread {
  background: rgba(59, 130, 246, 0.06);
}

.notification-bell-item.is-unread.is-success {
  border-left-color: #2e9e5a;
}

.notification-bell-item.is-unread.is-warning {
  border-left-color: #e68a00;
}

.notification-bell-item.is-unread.is-info {
  border-left-color: #3b82f6;
}

.notification-bell-item-title {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.notification-bell-item-body {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notification-bell-item-meta {
  margin: 0;
  font-size: 11px;
  color: var(--text-tertiary, var(--text-secondary));
}

.user-menu-identity {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  text-decoration: none;
  color: inherit;
  border-radius: 10px;
  transition: background-color 180ms ease;
}

.user-menu-identity:hover,
.user-menu-identity:focus-visible {
  background: var(--sunken);
  outline: none;
}

.user-menu-identity-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex: 0 0 40px;
}

.user-menu-identity-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.user-menu-identity .user-name {
  margin: 0;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-menu-identity .user-role {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--panel-muted);
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.user-role-pill.hidden {
  display: none;
}

.user-summary-actions {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.user-menu-section {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0;
  border-bottom: 0;
}

.user-menu-section:empty {
  display: none;
}

.user-menu-section + .user-menu-section:not(:empty) {
  border-top: 1px solid var(--border-subtle);
  margin-top: 6px;
  padding-top: 6px;
}

.user-summary-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.user-summary-link:hover,
.user-summary-link:focus-visible {
  background: var(--sunken);
  color: var(--text-primary);
  outline: none;
}

.user-summary-link.is-disabled {
  cursor: not-allowed;
  color: var(--text-muted);
  background: transparent;
  opacity: 0.6;
}

.user-summary-link.is-disabled:hover,
.user-summary-link.is-disabled:focus-visible {
  background: transparent;
  color: var(--text-muted);
}

.user-summary-link.is-logout {
  color: color-mix(in srgb, #d64545 85%, var(--text-primary));
}

.user-summary-link.is-logout:hover,
.user-summary-link.is-logout:focus-visible {
  color: #d64545;
  background: color-mix(in srgb, #d64545 10%, transparent);
}

.user-summary-link.is-logout:active {
  background: color-mix(in srgb, #d64545 16%, transparent);
}

.user-summary-link.is-logout .user-summary-icon {
  color: currentColor;
}

.user-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--text-secondary);
  line-height: 0;
}

.user-summary-link:hover .user-summary-icon,
.user-summary-link:focus-visible .user-summary-icon {
  color: var(--text-primary);
}

.user-summary-link.is-logout .user-summary-icon,
.user-summary-link.is-logout:hover .user-summary-icon {
  color: currentColor;
}

.user-summary-icon .fa-icon {
  display: block;
  width: 18px;
  height: 18px;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--gradient);
  color: #0e0f14;
  font-weight: 800;
  letter-spacing: -0.01em;
  overflow: hidden;
  position: relative;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.avatar-fallback {
  width: 100%;
  text-align: center;
}

.avatar.has-image {
  background: var(--surface);
  color: var(--text-primary);
}

.avatar.has-image .avatar-image {
  display: block;
}

.avatar.has-image .avatar-fallback {
  display: none;
}

.user-name {
  margin: 0;
  font-weight: 700;
}

.user-role {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.ghost-button.subtle {
  background: transparent;
  box-shadow: none;
}

.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  color: var(--text-primary);
  background: var(--surface);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(8, 16, 32, 0.08);
}

.ghost-button.danger {
  border-color: rgba(255, 107, 107, 0.45);
  color: #ff95a4;
  background: rgba(255, 107, 107, 0.08);
}

.ghost-button.danger:hover,
.ghost-button.danger:focus-visible {
  border-color: #ff6b7d;
  color: #ffc0c9;
  background: rgba(255, 107, 107, 0.12);
}

.ghost-button:disabled,
.ghost-button[disabled] {
  opacity: 0.48;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  color: var(--text-secondary);
}

.ghost-button:hover,
.ghost-button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--sunken);
  box-shadow: 0 8px 22px rgba(22, 72, 197, 0.15);
}

.ghost-button.header-cta {
  height: 36px;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  border-color: transparent;
  background: var(--accent);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}

.ghost-button.header-cta:hover,
.ghost-button.header-cta:focus-visible {
  background: color-mix(in srgb, var(--accent) 88%, #000);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 24%, transparent);
}

.header-signin-link {
  height: 36px;
  padding: 0 12px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 140ms ease, color 140ms ease;
}

.header-signin-link:hover,
.header-signin-link:focus-visible {
  background: var(--panel-muted);
  outline: none;
}

.markdown-editor {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 14px;
  line-height: 1.5;
}

.markdown-editor textarea {
  width: 100%;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
  padding: 12px 14px;
  border-radius: 0 0 10px 10px;
  border: 1px solid var(--border-subtle);
  border-top: none;
  background: var(--surface);
  color: var(--text-primary);
}

.markdown-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding: 6px;
  border: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 10px 10px 0 0;
  background: var(--sunken);
}

.markdown-toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.markdown-toolbar-group:first-child {
  margin-left: auto;
}

.markdown-toolbar .ghost-button.subtle {
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0 6px 0 0;
  justify-content: flex-end;
  flex: 0 0 auto;
  box-sizing: border-box;
  font-size: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted-foreground);
  box-shadow: none;
}

.markdown-toolbar .ghost-button.subtle.is-active {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
  box-shadow: none;
}

.markdown-toolbar .ghost-button.subtle:hover,
.markdown-toolbar .ghost-button.subtle:focus-visible {
  background: var(--panel-muted);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

.markdown-toolbar .ghost-button.subtle.is-active:hover,
.markdown-toolbar .ghost-button.subtle.is-active:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 85%, #000);
  color: #fff;
}

.markdown-toolbar .markdown-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.markdown-preview {
  margin-top: 8px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  padding: 12px 14px;
  color: var(--text-primary);
  font-weight: 400;
}

.markdown-preview p {
  margin: 0 0 12px;
}

.markdown-preview p:last-child {
  margin-bottom: 0;
}

.markdown-preview ul,
.markdown-preview ol {
  margin: 0 0 12px 20px;
}

.listing-markdown-content p {
  margin: 0 0 12px;
}

.listing-markdown-content p:last-child {
  margin-bottom: 0;
}

.listing-markdown-content ul,
.listing-markdown-content ol {
  margin: 0 0 12px 20px;
}

.markdown-preview code,
.listing-markdown-content code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
  background: var(--panel-muted);
  padding: 0.1rem 0.3rem;
  border-radius: 6px;
}

.markdown-preview pre,
.listing-markdown-content pre {
  position: relative;
  background: var(--panel-muted);
  padding: 12px;
  border-radius: 10px;
  overflow-x: auto;
  margin: 0 0 12px;
  max-width: 100%;
}

.markdown-preview pre code,
.listing-markdown-content pre code {
  background: transparent;
  padding: 0;
  display: block;
}

.markdown-preview .copy-code-button {
  position: absolute;
  top: 8px;
  right: 8px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
}

.markdown-preview .copy-code-button:hover,
.markdown-preview .copy-code-button:focus-visible {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.markdown-preview .copy-code-button:active {
  transform: translateY(1px);
}

.markdown-preview .copy-code-button.is-copied {
  color: var(--accent);
  border-color: var(--accent);
}

.theme-toggle {
  position: relative;
  color: var(--text-secondary);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: var(--text-primary);
}

.theme-toggle .icon {
  width: 18px;
  height: 18px;
  display: none;
  position: relative;
  line-height: 1;
}

.theme-toggle .icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

[data-theme="dark"] .icon-moon,
[data-theme="light"] .icon-sun {
  display: block;
}

.icon-sun::before {
  content: "\e94a";
  mask-image: url('/static/icons/sun.svg');
  -webkit-mask-image: url('/static/icons/sun.svg');
}

.icon-moon::before {
  content: "\e930";
  mask-image: url('/static/icons/moon.svg');
  -webkit-mask-image: url('/static/icons/moon.svg');
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px;
  min-width: 44px;
  color: inherit;
  text-decoration: none;
}
.brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 12px;
}

@media (max-width: 640px) {
  .brand {
    gap: 10px;
  }
}

.landing-hero {
  padding: 10px 0 6px;
}

.landing-hero-shell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 36px 32px;
  box-shadow: none;
  display: grid;
  gap: 24px;
}

.landing-hero-shell.combined {
  gap: 24px;
  padding: 36px 32px 32px;
}

.landing-hero-top {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 28px;
  align-items: end;
}

.landing-hero-copy h2 {
  margin: 8px 0 12px;
  font-size: 2.8rem;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.landing-hero-card-group {
  display: grid;
  gap: 8px;
  align-self: end;
}

.landing-hero-card-group .hero-footnote {
  margin: 0 0 4px;
  color: var(--text-secondary);
}

.accent-rule {
  width: 68px;
  height: 3px;
  background: var(--accent);
  display: inline-block;
  margin-bottom: 12px;
}

.landing-hero-copy .lead {
  margin: 0 0 18px;
  font-size: 1.05rem;
  color: var(--text-secondary);
}

.builder-paths {
  margin: 0;
  padding: 14px 12px 16px;
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: grid;
  gap: 14px;
}

.builder-paths.inline {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.builder-paths-header {
  display: grid;
  gap: 10px;
  align-items: start;
}

.builder-paths .supporting-text {
  margin: 0;
  color: var(--text-secondary);
}

.builder-path-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.builder-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 20px;
  box-shadow: none;
  display: grid;
  gap: 14px;
}

.builder-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.pill-label {
  margin: 0;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--pill-bg), color-mix(in srgb, var(--pill-bg) 86%, #000000));
  color: var(--pill-text);
  border: 1px solid var(--pill-border);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.pill-label:focus-visible {
  outline: 2px solid var(--pill-text);
  outline-offset: 2px;
  background: linear-gradient(135deg, var(--pill-bg-hover), color-mix(in srgb, var(--pill-bg-hover) 88%, #000000));
  border-color: var(--pill-border-hover);
}

.card-subtitle {
  margin: 0;
  color: var(--text-secondary);
  font-weight: 600;
}

.builder-card h3 {
  margin: 0;
  font-size: 1.4rem;
}

.builder-card-body {
  margin: 0;
  color: var(--text-secondary);
}

.builder-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  color: var(--text-secondary);
}

.builder-points li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
}

.builder-points .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

.builder-card-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.builder-card-actions .builder-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--accent);
  padding: 6px 2px;
  border-bottom: 1px solid rgba(22, 72, 197, 0.35);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.builder-card-actions .builder-card-link:hover,
.builder-card-actions .builder-card-link:focus-visible {
  color: var(--accent-strong, var(--accent));
  border-color: var(--accent);
  outline: none;
}

.builder-card-actions .ghost-button {
  min-width: 180px;
  text-align: center;
  flex: 1 1 200px;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  border-color: rgba(22, 72, 197, 0.4);
  background: var(--sunken);
  box-shadow: 0 10px 24px rgba(22, 72, 197, 0.12);
}

.builder-card-actions .ghost-button:hover,
.builder-card-actions .ghost-button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: linear-gradient(135deg, rgba(22, 72, 197, 0.06), rgba(10, 19, 48, 0.04));
  box-shadow: 0 12px 26px rgba(22, 72, 197, 0.18);
}

#agent-path-button,
#assistant-path-button {
  flex-basis: 100%;
}

.path-panel {
  margin: 12px 0 10px;
  display: grid;
  gap: 10px;
}

.agent-placeholder {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 18px 16px;
  box-shadow: none;
  display: grid;
  gap: 10px;
}

.hero-cta {
  min-width: 140px;
  text-align: center;
}

.hero-cta.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.assistant-picker {
  margin: 22px 0 10px;
  padding: 22px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: none;
  display: grid;
  gap: 14px;
}

.assistant-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.assistant-picker-status {
  margin: 0;
  color: var(--text-secondary);
  display: none;
}

.assistant-picker-status.is-visible {
  display: block;
}

.assistant-picker-status.error {
  color: #f98f9d;
}

.assistant-platform-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.assistant-platform-buttons .ghost-button {
  min-width: 120px;
}

.assistant-platform-buttons .ghost-button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--primary-500) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-500) 35%, transparent), var(--shadow-card);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--primary-500) 14%, transparent),
    color-mix(in srgb, var(--primary-100) 55%, transparent)
  );
}

.assistant-step {
  display: grid;
  gap: 10px;
}

.assistant-detail {
  background: var(--panel-muted);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.assistant-cart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--shadow-soft);
}

.assistant-cart-header {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
}

.assistant-cart-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.assistant-cart-count-badge {
  border-radius: var(--radius-pill);
  background: var(--sunken);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 4px 10px;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.assistant-cart-subtext {
  margin: 0;
  color: var(--text-secondary);
}

.assistant-cart-confirmation {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(47, 158, 98, 0.2);
  background: rgba(47, 158, 98, 0.12);
  display: grid;
  gap: 4px;
  animation: confirmation-enter 180ms ease-out;
}

.assistant-cart-confirmation-title {
  margin: 0;
  font-weight: 700;
  color: var(--text-primary);
}

.assistant-cart-confirmation-subtext {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

@keyframes confirmation-enter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .assistant-cart-confirmation {
    animation: none;
  }
}

.assistant-cart-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.assistant-cart-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
  transition: opacity 180ms ease, transform 180ms ease;
}

.assistant-cart-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--panel-muted);
  flex-shrink: 0;
}

.assistant-cart-item.is-removing {
  opacity: 0;
  transform: translateY(6px);
}

.assistant-cart-details {
  display: grid;
  gap: 4px;
}

.assistant-cart-name {
  margin: 0;
  font-weight: 800;
}

.assistant-cart-author,
.assistant-cart-price,
.assistant-cart-trust {
  margin: 0;
  color: var(--text-secondary);
}

.assistant-cart-price {
  font-weight: 700;
  color: var(--text-primary);
}

.assistant-cart-trust {
  font-size: 0.85rem;
}

.assistant-cart-badge {
  width: 26px;
  height: 26px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-muted);
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.assistant-cart-info-stack {
  display: grid;
  gap: 4px;
}

.assistant-cart-remove {
  display: flex;
  justify-content: flex-end;
}

.cart-remove-link {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  min-width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.cart-remove-link:hover,
.cart-remove-link:focus-visible {
  border-color: var(--danger);
  color: var(--danger);
  transform: translateY(-1px);
}

.cart-remove-button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.cart-remove-button svg {
  width: 16px;
  height: 16px;
}

.cart-remove-button:hover,
.cart-remove-button:focus-visible {
  border-color: var(--accent);
  color: var(--text-primary);
}

.assistant-cart-total {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 12px;
}

.assistant-cart-total.is-free {
  justify-content: center;
  color: var(--accent-2);
}

.assistant-cart-total-message {
  margin: 0;
  font-weight: 600;
}

.assistant-cart-actions-footer {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cart-checkout-button {
  width: 100%;
  text-align: center;
  text-decoration: none;
}

.cart-checkout-hint {
  margin: 0;
  text-align: center;
  color: var(--text-secondary);
}

.checkout-summary {
  display: grid;
  gap: 14px;
  background: var(--panel-muted);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
}

.checkout-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.checkout-summary-count {
  margin: 0;
  color: var(--text-secondary);
}

.checkout-summary-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.checkout-summary-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}

.checkout-summary-thumbnail {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--panel);
  flex-shrink: 0;
}

.checkout-summary-thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.checkout-summary-thumbnail-image.is-fallback {
  object-fit: contain;
  padding: 6px;
  background: var(--panel-muted);
}

.checkout-summary-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.checkout-link-hint {
  display: block;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.checkout-summary-details {
  display: grid;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.checkout-summary-name {
  margin: 0;
  font-weight: 800;
}

.checkout-summary-meta {
  margin: 0;
  color: var(--text-secondary);
}

@media (max-width: 640px) {
  .checkout-summary-item {
    align-items: flex-start;
  }

  .checkout-summary-thumbnail {
    width: 48px;
    height: 48px;
  }
}

.purchased-card {
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  display: grid;
  gap: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.purchased-card:hover,
.purchased-card:focus-within {
  border-color: var(--border-strong);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

.purchased-card-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}

.purchased-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--sunken);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.purchased-card-content {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.purchased-card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.purchased-card-description {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.purchased-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.purchased-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.purchased-card-cta {
  min-width: 140px;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 0.9rem;
  letter-spacing: 0;
  box-shadow: none;
}

.purchased-card-more {
  font-size: 1.2rem;
  line-height: 1;
}

.purchased-card-more[disabled],
.purchased-card-more[aria-disabled='true'] {
  pointer-events: none;
  opacity: 0.45;
  cursor: default;
}

.checkout-type-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.checkout-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
}

.checkout-summary-line {
  margin: 0;
  font-weight: 800;
}

.checkout-summary-total {
  display: flex;
  justify-content: space-between;
  padding-top: 8px;
}

.checkout-summary-total.is-total {
  border-top: 1px solid var(--border);
  margin-top: 2px;
  padding-top: 10px;
}

.checkout-trust {
  display: grid;
  gap: 2px;
  margin-top: 8px;
}

.assistant-selection-hint {
  margin: 0 0 8px;
  color: var(--text-secondary);
}

.checkout-actions-row {
  display: grid;
  gap: 10px;
}

.checkout-actions-row .primary-pill,
.checkout-actions-row .ghost-button {
  width: 100%;
  text-align: center;
}

.login-before-purchase-wrapper {
  position: relative;
  width: 100%;
}

.login-before-purchase-wrapper .login-dropdown {
  left: 0;
  right: auto;
}

.checkout-actions-row .tertiary-link {
  display: block;
  text-align: center;
  color: var(--text-secondary);
  font-weight: 600;
}

.checkout-actions-row .tertiary-link:hover,
.checkout-actions-row .tertiary-link:focus-visible {
  color: var(--text-primary);
  text-decoration: underline;
}

.purchased-instructions {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

details.purchased-instructions summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--text-primary);
}

details.purchased-instructions[open] summary {
  color: var(--accent);
}

.purchased-details-toggle {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}

.purchased-details-toggle:hover {
  color: var(--text-primary);
}

.purchased-details-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.purchased-details {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  display: grid;
  gap: 12px;
}

.assistant-setup-guide {
  border-top: 0;
  padding-top: 0;
}

.assistant-setup-field {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}

.assistant-setup-label {
  font-weight: 600;
}

.assistant-setup-value {
  min-width: 0;
  white-space: pre-wrap;
}

.assistant-setup-value pre {
  position: relative;
  background: rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 8px 0 0;
  overflow-x: auto;
  font-size: 0.9em;
}

.assistant-setup-value code {
  font-family: 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New',
    monospace;
  background: rgba(15, 23, 42, 0.08);
  padding: 2px 6px;
  border-radius: 6px;
}

.assistant-setup-value pre code {
  display: block;
  background: transparent;
  padding: 0;
}

.assistant-setup-value .copy-code-button {
  position: absolute;
  top: 8px;
  right: 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
}

.assistant-setup-value .copy-code-button:hover,
.assistant-setup-value .copy-code-button:focus-visible {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.assistant-setup-value .copy-code-button:active {
  transform: translateY(1px);
}

.assistant-setup-value .copy-code-button.is-copied {
  color: var(--accent);
  border-color: var(--accent);
}

.purchased-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.purchased-tab {
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.purchased-tab[aria-selected='true'] {
  background: #fff;
  color: var(--text-primary);
  border-color: var(--border-strong);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
}

.purchased-tab:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.purchased-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.purchased-tab-panels {
  max-width: 680px;
}

.purchased-tab-panel {
  display: block;
}


.purchased-tab-text {
  margin: 0;
  color: var(--text-secondary);
  white-space: pre-line;
}

.purchased-tab-pre {
  margin: 0;
  color: var(--text-secondary);
  white-space: pre-line;
  font-family: 'SFMono-Regular', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
}

.purchased-prompt-block {
  position: relative;
  background: #f7f9fc;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  max-height: 240px;
  overflow: auto;
}

.purchased-prompt-text {
  margin: 28px 0 0;
  white-space: pre-wrap;
  color: var(--text-primary);
  font-family: 'SFMono-Regular', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
  font-size: 0.85rem;
}

.purchased-prompt-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 10px;
  font-size: 0.75rem;
}

.purchased-prompt-copy.is-copied {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent), transparent 40%);
}

.prompt-copy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.prompt-copy-row .checkout-summary-meta {
  margin: 0;
}

.prompt-copy-button {
  padding: 6px 12px;
  font-size: 0.9rem;
}

.prompt-copy-button.is-copied {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent), transparent 40%);
}

.instruction-body {
  margin: 8px 0 0;
  white-space: pre-line;
}

.assistant-requirements {
  margin: 0 0 12px 18px;
  color: var(--text-secondary);
  padding: 0;
}

.assistant-requirements li {
  margin: 4px 0;
}

.assistant-detail h3 {
  margin: 0 0 4px;
}

.assistant-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  color: var(--text-secondary);
  font-weight: 700;
}

.assistant-summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-soft);
  height: 100%;
}

.cart-shell {
  position: fixed;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  z-index: 50;
}

.cart-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-inline: 14px;
}

.cart-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f7f9ff;
  font-size: 1.1rem;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(16, 39, 92, 0.6);
}

.cart-toggle-label {
  font-weight: 600;
}

.cart-toggle-peek {
  display: none;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.cart-count {
  min-width: 28px;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #1c55dc, #10275c);
  border: 1px solid var(--accent);
  color: #f7f9ff;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  box-shadow: 0 12px 28px rgba(22, 72, 197, 0.28);
}

.cart-panel {
  position: absolute;
  top: 46px;
  right: 0;
  width: min(340px, calc(100vw - 24px));
  max-height: min(70vh, 520px);
  overflow: auto;
  box-shadow: var(--shadow-card);
}

.assistant-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.assistant-price {
  margin: 0;
  font-weight: 800;
}

.assistant-quantity {
  background: var(--sunken);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.purchase-button {
  align-self: flex-start;
}

.assistant-cards {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  align-items: stretch;
  grid-auto-rows: 1fr;
}

@media (max-width: 720px) {
  .cart-shell {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    align-items: stretch;
    flex-direction: column-reverse;
    gap: 12px;
  }

  .cart-shell.is-open .cart-toggle-peek {
    display: none;
  }

  .cart-toggle {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    row-gap: 4px;
    padding: 12px 16px;
    text-align: left;
  }

  .cart-toggle-label {
    font-weight: 700;
  }

  .cart-toggle-peek {
    display: block;
  }

  .cart-count {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
  }

  .cart-panel {
    position: static;
    width: 100%;
    max-height: min(80vh, 560px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .assistant-cart-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
  }

  .assistant-cart-actions-footer {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    background: var(--panel-background);
    padding-bottom: 8px;
  }

  #finalize-order-summary,
  #finalize-order-actions,
  #guest-purchases,
  .assistant-detail,
  .assistant-summary-card,
  .assistant-cart,
  .checkout-summary,
  .purchased-card {
    padding: 14px;
  }

  .assistant-summary-card,
  .assistant-detail,
  .assistant-cards {
    width: 100%;
  }

  .assistant-cart-item {
    grid-template-columns: 40px 1fr auto;
    align-items: center;
  }

  .assistant-cart-thumb {
    width: 40px;
    height: 40px;
  }

  .assistant-cart-remove,
  .purchased-card-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .purchased-card-actions .purchased-card-cta {
    width: 100%;
  }

  .assistant-meta > *:nth-child(n+3),
  .purchased-card-meta > *:nth-child(n+3) {
    display: none;
  }
}

@media (min-width: 960px) {
  #finalize-order-summary {
    grid-area: summary;
  }

  #finalize-order-actions {
    grid-area: actions;
  }

  #guest-purchases {
    grid-area: purchases;
  }

  .assistant-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.assistant-description {
  margin: 0 0 12px;
  color: var(--text-secondary);
}

.assistant-instructions {
  white-space: pre-wrap;
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  color: var(--text-primary);
}

.hero-footnote {
  margin: 10px 0 0;
  color: var(--text-secondary);
}

.landing-hero-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 18px 16px;
  box-shadow: none;
  position: relative;
}

.hero-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.hero-badge {
  margin: 0;
  padding: 6px 0;
  border-radius: 0;
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-note {
  margin: 0;
  color: var(--text-secondary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hero-card-body h3 {
  margin: 0 0 10px;
  font-size: 1.3rem;
}

.hero-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  color: var(--text-secondary);
}

.hero-list li {
  list-style: none;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
}

.hero-dot {
  width: 10px;
  height: 2px;
  border-radius: 0;
  background: var(--accent);
}

.library-header {
  margin: 26px 0 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

button {
  font-family: inherit;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  min-height: 38px;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 80ms ease;
}

.icon-button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-button:hover,
.icon-button:focus-visible {
  border-color: var(--accent);
  color: var(--text-primary);
}

.primary-pill {
  background: var(--gradient);
  color: #f7f9ff;
  border: 1px solid var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 22px;
  border-radius: 14px;
  box-shadow: 0 14px 32px rgba(22, 72, 197, 0.2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}

.primary-pill.danger {
  background: rgba(255, 107, 107, 0.18);
  border-color: rgba(255, 107, 107, 0.6);
  color: #ffe8ec;
  box-shadow: 0 14px 32px rgba(255, 107, 107, 0.2);
}

.primary-pill.danger:hover,
.primary-pill.danger:focus-visible {
  background: rgba(255, 107, 107, 0.08);
  color: #ffccd4;
  border-color: rgba(255, 107, 107, 0.9);
  box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.7), var(--shadow-card);
}

.primary-pill:hover,
.primary-pill:focus-visible {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-500) 85%, #000000), color-mix(in srgb, var(--accent-2) 92%, #000000));
  color: #f7f9ff;
  border-color: color-mix(in srgb, var(--primary-700) 64%, #ffffff);
  transform: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-700) 64%, #ffffff), var(--shadow-card);
}

.primary-pill.is-disabled,
.primary-pill.is-disabled:hover,
.primary-pill.is-disabled:focus-visible {
  background: var(--panel-muted);
  color: var(--text-secondary);
  border-color: var(--border);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

main {
  padding: 34px 0 60px;
}

.home-main,
.marketplace-main,
.theory-main,
.about-main,
.product-main {
  padding-top: 0;
  padding-bottom: 0;
}

#agent-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}

.agent-card {
  background: var(--surface);
  padding: 20px;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 0;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.agent-card:hover,
.agent-card:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
  border-color: color-mix(in srgb, var(--primary-500) 45%, transparent);
  z-index: 3;
}

.agent-card h2 {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  background: var(--tag-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.2;
  font-weight: 600;
}

.agent-card p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

.view-instructions-btn {
  margin-top: auto;
  width: 100%;
  background: var(--gradient);
  color: #0b0c12;
  border: none;
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--primary-500) 24%, transparent);
}

.view-instructions-btn:hover,
.view-instructions-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--primary-500) 32%, transparent);
}

.best-match {
  border: 1px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)), var(--gradient);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 16px 40px color-mix(in srgb, var(--primary-500) 25%, transparent);
}

.best-match-banner {
  background: color-mix(in srgb, var(--primary-100) 60%, transparent);
  color: var(--text-primary);
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--primary-500) 24%, transparent);
  text-align: center;
  margin: -4px 0 6px;
}

.status-message {
  color: var(--text-secondary);
  font-size: 1rem;
  text-align: center;
  width: 100%;
  margin: 10px 0;
}

.status-message.error {
  color: #f98f9d;
}

button:focus-visible,
.modal-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Modal */
.hidden { display: none !important; }

.ownership-badge.is-hidden {
  display: none !important;
}

#modal {
  position: fixed;
  inset: 0;
  background: rgba(6, 7, 10, 0.68);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

#modal.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: static !important;
  z-index: auto !important;
  pointer-events: none !important;
}

.modal-content {
  background: var(--surface);
  padding: 24px;
  width: min(760px, 100%);
  border-radius: 16px;
  text-align: left;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  font-size: 1.4rem;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 10px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover,
.modal-close:focus {
  color: var(--text-primary);
  border-color: var(--accent);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 7, 10, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  z-index: 30;
  overflow-y: auto;
}

.modal-overlay.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: static !important;
  z-index: auto !important;
  pointer-events: none !important;
}

.dashboard-body .modal-overlay {
  background: rgba(6, 7, 10, 0.85);
  backdrop-filter: none;
}

.modal-dialog {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.04)), var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  width: min(820px, 100%);
  padding: 26px;
  box-shadow: var(--shadow-card);
  position: relative;
  max-height: min(90vh, 880px);
  overflow-y: auto;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}

.modal-header h3 {
  margin: 2px 0 4px;
}

.modal-header .lead {
  color: var(--text-secondary);
}

.auth-gate-dialog {
  width: min(560px, 100%);
}

.auth-gate-benefits {
  margin: 0 0 16px;
}

.auth-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.edit-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.edit-form .input-grid {
  gap: 14px;
}

.edit-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.edit-buttons {
  display: flex;
  gap: 10px;
}

.feedback-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 7, 10, 0.78);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  z-index: 30;
  overflow-y: auto;
}

.feedback-overlay.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: static !important;
  z-index: auto !important;
  pointer-events: none !important;
}

#cart-panel.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: static !important;
  z-index: auto !important;
  pointer-events: none !important;
}

.feedback-dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: min(560px, 100%);
  padding: 22px;
  box-shadow: var(--shadow-card);
  position: relative;
  max-height: min(90vh, 760px);
  overflow-y: auto;
}

.feedback-page .hero-grid {
  align-items: stretch;
}

.feedback-page .hero-panel {
  justify-content: stretch;
}

.feedback-page .feedback-panel-card {
  width: 100%;
  max-width: 640px;
}

.feedback-page .feedback-panel-header {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.feedback-page .supporting-text {
  margin: 12px 0 0;
  color: var(--text-secondary);
}

.feedback-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.feedback-header .lead {
  margin-top: 6px;
}

.feedback-form {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feedback-form .checkbox-field span {
  font-weight: 400;
}

.feedback-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feedback-step.hidden {
  display: none;
}

.feedback-step-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.intent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.intent-card {
  text-align: left;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.intent-card:hover,
.intent-card:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--shadow-lifted);
  transform: translateY(-2px);
  outline: none;
}

.intent-card.is-selected {
  border-color: var(--accent);
  background: rgba(74, 144, 226, 0.08);
}

.feedback-form[data-feedback-ready="false"] .intent-card {
  opacity: 0.62;
  cursor: wait;
  box-shadow: none;
}

.feedback-form[data-feedback-ready="false"] .intent-card:hover,
.feedback-form[data-feedback-ready="false"] .intent-card:focus-visible {
  transform: none;
  border-color: var(--border);
  box-shadow: none;
}

.intent-title {
  font-weight: 700;
}

.intent-description {
  color: var(--text-secondary);
  font-size: 0.92rem;
}

.feedback-actions {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.feedback-actions .form-status {
  margin: 0;
}

.feedback-outcome-panel {
  display: grid;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  background: var(--surface);
}

.feedback-outcome-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Dashboard layout */
.dashboard-main {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 12px 24px 60px;
}

.dashboard-header {
  align-items: flex-start;
}

.hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-soft);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0 0 6px;
}

.lead {
  margin: 8px 0 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

.subtitle {
  margin: 6px 0 0;
  font-weight: 600;
  color: var(--text-primary);
}

.hero h2 {
  margin: 0;
  font-size: 1.9rem;
}

.stat-grid {
  display: grid;
  gap: 14px;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--shadow-card);
}

.stat-card-button {
  width: 100%;
  text-align: left;
  cursor: pointer;
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
}

.stat-card-button:hover,
.stat-card-button:focus-visible {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-100) 60%, transparent);
  outline: none;
}

.stat-label {
  margin: 0 0 6px;
  color: var(--text-secondary);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.stat-value {
  margin: 0;
  font-size: 2rem;
  font-weight: 800;
}

.stat-subtext {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  box-shadow: var(--shadow-soft);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.panel h3 {
  margin: 2px 0;
  font-size: 1.4rem;
}

.panel-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 24px rgba(10, 20, 40, 0.04);
}

.panel-actions .ghost-button,
.panel-actions .filter-pill,
.panel-actions .primary-pill {
  margin: 0;
}

.panel-filters {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.search-field {
  flex: 1 1 280px;
}

.search-field input {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--panel-muted);
  color: var(--text-primary);
  font-size: 0.95rem;
}

.filter-pill {
  background: var(--sunken);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  font-weight: 700;
}

.filter-pill[aria-pressed="true"] {
  background: var(--gradient);
  color: #0b0c12;
  border-color: color-mix(in srgb, var(--primary-500) 55%, transparent);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 16px;
}

.owned-products-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-card {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  transition: border-color 160ms ease;
  overflow: visible;
}

.dashboard-card:hover,
.dashboard-card:focus-within {
  transform: none;
  box-shadow: var(--shadow-card);
}

.dashboard-empty {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.purchased-empty-state {
  grid-column: 1 / -1;
  align-items: flex-start;
}

.purchased-empty-state h4 {
  margin: 0;
}

.purchase-state-card {
  border-style: solid;
}

.purchase-state-card .purchase-state-title {
  margin: 0;
  font-size: 1rem;
}

.purchase-state-card .muted {
  margin: 0.4rem 0 0;
}

.purchase-state-actions {
  margin-top: 0.7rem;
}

.purchase-state-card--pending {
  border-color: color-mix(in srgb, var(--primary-500) 35%, transparent);
  background: color-mix(in srgb, var(--primary-100) 48%, var(--surface-color) 52%);
}

.purchase-state-card--error {
  border-color: color-mix(in srgb, #f87171 48%, transparent);
  background: color-mix(in srgb, #f87171 12%, var(--surface-color) 88%);
}

.purchase-state-card--warning {
  border-color: color-mix(in srgb, #f59e0b 48%, transparent);
  background: color-mix(in srgb, #f59e0b 13%, var(--surface-color) 87%);
}

.sigrix-skeleton-card {
  pointer-events: none;
  gap: 12px;
}

.sigrix-skeleton-line {
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--line-color) 45%, transparent) 0%,
    color-mix(in srgb, var(--line-color) 72%, transparent) 50%,
    color-mix(in srgb, var(--line-color) 45%, transparent) 100%
  );
  background-size: 220% 100%;
  animation: sigrix-skeleton-shimmer 1.3s ease infinite;
}

.sigrix-skeleton-line--title {
  width: 70%;
  height: 18px;
}

.sigrix-skeleton-line--subtitle {
  width: 48%;
  height: 14px;
}

.sigrix-skeleton-line--body {
  width: 100%;
  height: 58px;
}

.sigrix-skeleton-owner {
  margin-top: auto;
  display: grid;
  gap: 8px;
}

.sigrix-skeleton-line--owner {
  width: 85%;
  height: 12px;
}

.sigrix-skeleton-line--owner-short {
  width: 52%;
}

@keyframes sigrix-skeleton-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.account-layout {
  gap: 22px;
}

.account-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.account-action-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.account-action-note {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.account-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, rgba(22, 72, 197, 0.06), rgba(15, 47, 112, 0.08)), var(--surface);
  border-color: rgba(22, 72, 197, 0.22);
}

.account-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(22, 72, 197, 0.2), transparent 45%),
    radial-gradient(circle at 80% 40%, rgba(109, 175, 255, 0.16), transparent 35%);
  pointer-events: none;
}

.account-hero > * {
  position: relative;
  z-index: 1;
}

.account-hero-header {
  align-items: flex-start;
}

.account-hero-content {
  margin-top: 16px;
  display: flex;
}

.account-status-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  flex-wrap: wrap;
  width: 100%;
}

.account-status-strip .chip-label,
.account-status-strip .chip-value {
  margin: 0;
}

.account-status-strip .chip-value {
  white-space: nowrap;
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--border);
  box-shadow: 0 0 0 8px rgba(12, 18, 28, 0.12);
}

.status-dot.live {
  background: var(--success-500);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--success-500), transparent 84%);
}

.status-dot.accent {
  background: var(--accent);
  box-shadow: 0 0 0 8px rgba(46, 117, 250, 0.22);
}

.status-dot.muted {
  background: var(--text-secondary);
}

.chip-label {
  margin: 0;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
}

.chip-value {
  margin: 2px 0 0;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}

.account-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.account-card.danger .chip-value {
  color: #ff95a4;
}

.account-delete-confirmation {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px dashed rgba(255, 107, 107, 0.4);
  background: rgba(255, 107, 107, 0.08);
}

.account-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.subtle-pill {
  background: var(--panel-muted);
  color: var(--text-secondary);
  border: 1px dashed var(--border);
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.account-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.account-list-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--panel-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.account-list-row dt,
.account-list-row dd {
  margin: 0;
}

.account-list-row dt {
  font-weight: 800;
  letter-spacing: -0.01em;
}

.account-list-row dd {
  color: var(--text-secondary);
}

.username-display {
  display: flex;
  align-items: center;
  gap: 10px;
}

.username-display .chip-value {
  color: var(--text-primary);
}

.username-edit svg {
  width: 16px;
  height: 16px;
}

.username-edit-form {
  margin-top: 10px;
}

.username-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.username-edit-actions {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
}

.username-helper {
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.username-helper.success {
  color: var(--success-700);
}

.username-helper.error {
  color: #ff7b7b;
}

.account-note {
  margin: 4px 0 0;
  color: var(--text-secondary);
  line-height: 1.5;
}

.preview-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-left: 8px;
}

.preference-sections {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.preference-section-title {
  margin: 0 0 8px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.preference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.preference-card {
  padding: 14px 16px;
  background: var(--panel-muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.preference-card-with-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

@media (max-width: 720px) {
  .account-status-strip .chip-value {
    white-space: normal;
  }

  .account-action-group {
    align-items: flex-start;
  }
}

.user-page-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, rgba(22, 72, 197, 0.12), rgba(10, 19, 48, 0.12)), var(--surface);
  border-color: rgba(22, 72, 197, 0.22);
}

.user-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 18% 40%, rgba(22, 72, 197, 0.16), transparent 36%),
    radial-gradient(circle at 70% 20%, rgba(15, 47, 112, 0.24), transparent 38%);
  pointer-events: none;
}

.user-page-hero > * {
  position: relative;
  z-index: 1;
}

.user-page-hero-header {
  align-items: flex-start;
}

.user-hero-meta {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.meta-card {
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

.dashboard-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.dashboard-card .card-actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.agent-description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}

.agent-details {
  margin: 0;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  color: var(--text-secondary);
}

.agent-details summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--text-primary);
  list-style: none;
}

.agent-details summary::-webkit-details-marker {
  display: none;
}

.detail-label {
  margin: 10px 0 6px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

.kebab-menu {
  position: relative;
}

.kebab-menu[open] {
  z-index: 4;
}

.kebab-menu summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-muted);
  font-weight: 700;
}

.kebab-menu summary::-webkit-details-marker {
  display: none;
}

.kebab-menu[open] summary {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-100) 60%, transparent);
}

.kebab-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 140px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  z-index: 5;
}

.status-pill {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-weight: 700;
  font-size: 0.9rem;
}

.status-pill.live {
  background: var(--success-100);
  color: var(--success-700);
  border-color: color-mix(in srgb, var(--success-500), transparent 40%);
}

.status-pill.draft {
  background: var(--draft-100);
  color: var(--draft-700);
  border-color: color-mix(in srgb, var(--draft-500), transparent 40%);
}

.status-pill.pending-review {
  background: var(--highlight-100);
  color: var(--highlight-700);
  border-color: color-mix(in srgb, var(--highlight-500), transparent 40%);
}

.status-pill.approved {
  background: var(--success-100);
  color: var(--success-700);
  border-color: color-mix(in srgb, var(--success-500), transparent 40%);
}

.status-pill.rejected {
  background: var(--danger-100);
  color: var(--danger-700);
  border-color: color-mix(in srgb, var(--danger-500), transparent 40%);
}

.status-pill.purchased {
  background: var(--highlight-100);
  color: var(--highlight-700);
  border-color: color-mix(in srgb, var(--highlight-500), transparent 40%);
}

.status-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.status-flow-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.status-flow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.status-flow-toggle {
  cursor: pointer;
}

.status-flow-toggle:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.status-flow-overlay {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  max-width: 320px;
  padding: 12px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  z-index: 6;
  display: none;
}

.status-flow-overlay.is-open {
  display: block;
}

.status-flow-popover {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.status-flow-title {
  margin: 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

.status-flow-step {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px dashed var(--border);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  background: var(--panel-muted);
}

.status-flow-step.is-current,
.status-flow-step.is-active {
  border-style: solid;
  color: var(--text-primary);
  border-color: rgba(255, 201, 102, 0.55);
  background: rgba(255, 201, 102, 0.18);
}

.status-flow-step.is-complete {
  border-style: solid;
  color: #6af0df;
  border-color: rgba(61, 214, 198, 0.45);
  background: rgba(61, 214, 198, 0.18);
}

.status-flow-step:focus-visible {
  outline: 2px solid rgba(255, 201, 102, 0.8);
  outline-offset: 2px;
}

.status-flow-menu {
  position: relative;
}

.status-flow-menu[open] {
  z-index: 4;
}

.status-flow-trigger {
  list-style: none;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.75rem;
  font-weight: 700;
}

.status-flow-trigger:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.status-flow-trigger::-webkit-details-marker {
  display: none;
}

.status-flow-menu[open] .status-flow-trigger {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-100) 60%, transparent);
}

.status-flow-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 180px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.status-flow-option,
.status-flow-empty {
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 0.8rem;
}

.status-flow-option {
  background: var(--panel-muted);
  color: var(--text-primary);
}

.status-flow-option:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.status-flow-empty {
  color: var(--text-secondary);
  background: transparent;
}

.purchased-panel {
  background: var(--panel-muted);
  border-style: dashed;
  padding: 0;
}

.purchased-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 24px;
  align-items: start;
}

.purchased-shell--single {
  grid-template-columns: minmax(0, 1fr);
}

.purchased-main {
  grid-column: span 8;
  display: grid;
  gap: 16px;
}

.purchased-shell--single .purchased-main {
  grid-column: 1 / -1;
}

.purchased-aside {
  grid-column: span 4;
}

.purchased-access-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 10px;
  position: sticky;
  top: 24px;
}

.purchased-access-card h4 {
  margin: 0;
  font-size: 1.05rem;
}

.purchased-status-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.purchased-access-actions {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.purchased-access-actions .primary-button,
.purchased-access-actions .outline-button {
  width: 100%;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.purchased-access-actions .primary-button {
  background: var(--gradient);
  color: #f7f9ff;
  border: 1px solid var(--accent);
  box-shadow: 0 10px 24px rgba(22, 72, 197, 0.18);
}

.purchased-access-actions .primary-button:hover,
.purchased-access-actions .primary-button:focus-visible {
  background: transparent;
  color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-card);
}

.purchased-access-actions .outline-button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
}

.purchased-access-actions .outline-button:hover,
.purchased-access-actions .outline-button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--sunken);
}

.purchased-access-link {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-decoration: none;
}

.purchased-access-link:hover,
.purchased-access-link:focus-visible {
  color: var(--accent);
}

.purchased-access-list {
  margin: 0;
  padding-left: 18px;
  color: var(--text-secondary);
  display: grid;
  gap: 6px;
  font-size: 0.95rem;
}

.muted {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-top: 6px;
}

.form-wrapper {
  margin-top: 14px;
}

@media (max-width: 800px) {
  .purchased-shell {
    grid-template-columns: 1fr;
    padding: 20px 16px;
  }

  .purchased-main,
  .purchased-aside {
    grid-column: 1 / -1;
  }

  .purchased-access-card {
    position: static;
  }
}

.agent-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.input-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.input-grid .form-field.is-wide {
  grid-column: 1 / -1;
}

.input-with-indicator,
.input-with-prefix {
  position: relative;
  width: 100%;
}

.input-with-prefix {
  display: flex;
  align-items: center;
  gap: 8px;
}

.input-with-indicator input {
  padding-right: 96px;
}

.char-counter {
  position: absolute;
  right: 12px;
  bottom: 10px;
  color: var(--muted-foreground);
  font-weight: 600;
  font-size: 0.9rem;
}

.char-counter.is-warning {
  color: var(--warning-color);
}

.input-with-prefix .input-prefix {
  color: var(--text-secondary);
  font-weight: 700;
}

.input-with-prefix .currency-select {
  flex: 0 0 88px;
  width: 88px;
  min-width: 72px;
}

.input-with-prefix input {
  flex: 1;
  min-width: 140px;
}

.price-free-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--sunken);
  color: var(--text-secondary);
}

.price-free-row .price-pill {
  margin-left: 0;
}

.field-helper {
  margin: 0;
  color: var(--text-secondary);
  font-weight: 600;
}

.field-helper.is-subtle {
  color: var(--muted-foreground);
}

.field-helper.is-error {
  color: var(--error-color);
  font-weight: 700;
}

.field-error {
  margin: 0;
  color: var(--error-color);
  font-weight: 700;
}

.form-legend {
  margin: 6px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.publish-legend {
  margin-top: 24px;
}

.field-required-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--indicator-circle-size);
  height: var(--indicator-circle-size);
  border-radius: 999px;
  background: rgba(249, 143, 157, 0.2);
  color: #f98f9d;
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 700;
  color: var(--text-primary);
}

.field-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.help-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--indicator-circle-size);
  height: var(--indicator-circle-size);
  min-width: var(--indicator-circle-size);
  min-height: var(--indicator-circle-size);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--sunken);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  box-sizing: border-box;
  align-self: center;
  vertical-align: middle;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease,
    box-shadow 0.2s ease;
}

.help-icon:hover,
.help-icon:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--sunken);
  box-shadow: 0 8px 22px rgba(22, 72, 197, 0.15);
}

.help-icon:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(22, 72, 197, 0.15);
}

.help-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, -4px);
  max-width: 240px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--text-primary);
  color: #ffffff;
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.help-icon::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--text-primary);
  transform: translateX(-50%) rotate(45deg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 1;
}

.help-icon:hover::after,
.help-icon:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, -10px);
}

.help-icon:hover::before,
.help-icon:focus-visible::before {
  opacity: 1;
}

.form-field.is-optional > span {
  color: var(--text-secondary);
}

.form-field.is-required > span,
.form-field.is-required .field-label,
.checkbox-field.is-required span {
  display: inline-flex;
  align-items: center;
}

.form-field.is-required > span::after,
.form-field.is-required .field-label::after,
.checkbox-field.is-required span::after {
  content: "✱";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 6px;
  border-radius: 999px;
  background: rgba(249, 143, 157, 0.2);
  color: #f98f9d;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  align-self: center;
}

.form-field .required-marker {
  color: #f98f9d;
  margin-left: 4px;
}

.form-field.required-field.required-missing input,
.form-field.required-field.required-missing textarea,
.form-field.required-field.required-missing .checkbox-field {
  outline: 2px solid #f98f9d;
  outline-offset: 1px;
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--sunken);
  color: var(--text-primary);
  font-size: 1rem;
}

.form-field.is-wide input {
  padding: 14px 12px;
  font-size: 1.05rem;
}

.checkbox-field {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: flex-start;
  gap: 10px;
  font-weight: 600;
}

.checkbox-field input {
  margin-top: 4px;
}

.category-selector {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.category-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--sunken);
  color: var(--text-primary);
  font-weight: 600;
  text-align: left;
}

.category-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.category-toggle-count {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 600;
  white-space: nowrap;
}

.category-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 32px;
  padding: 4px 2px;
}

.category-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.85rem;
  font-weight: 600;
}

.category-placeholder {
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
}

.category-selector-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--sunken);
  max-height: 220px;
  overflow: auto;
}

.category-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--sunken);
}

.category-options .checkbox-field {
  font-weight: 600;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.repeatable-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.repeatable-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.repeatable-header .section-label {
  margin: 0;
}

.repeatable-actions .ghost-button {
  min-height: 32px;
  padding: 0 12px;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.hidden-action {
  display: none !important;
}

.form-status {
  min-height: 22px;
  color: var(--text-secondary);
  font-weight: 600;
}

.form-status.success {
  color: #6af0df;
}

.form-status.error {
  color: #f98f9d;
}

.roadmap-main {
  display: flex;
  flex-direction: column;
  gap: var(--hub-space-24);
  padding: 20px var(--hub-space-24) 80px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.roadmap-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--hub-card-radius);
  padding: var(--hub-space-24);
  box-shadow: var(--hub-card-shadow);
  position: relative;
  overflow: hidden;
}

.roadmap-hero h1 {
  margin: 6px 0 6px;
  font-size: var(--hub-heading-xl);
  letter-spacing: -0.02em;
}
.roadmap-hero .roadmap-note-text {
  margin: 0 0 10px;
}

.roadmap-hero .lead {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

.roadmap-list {
  display: flex;
  flex-direction: column;
  gap: var(--hub-space-16);
  position: relative;
}

.roadmap-year {
  position: relative;
  background: var(--panel-muted);
  border: 1px solid var(--border);
  border-radius: var(--hub-card-radius);
  padding: var(--hub-space-16);
  box-shadow: var(--hub-card-shadow);
  overflow: hidden;
  backdrop-filter: blur(5px);
}

.roadmap-year::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--gradient);
}

.roadmap-year-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-top: 6px;
  margin-bottom: 12px;
  position: relative;
}

.roadmap-year-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--pill-bg), color-mix(in srgb, var(--pill-bg) 84%, #000000));
  color: var(--pill-text);
  border: 1px solid var(--pill-border);
  font-weight: 800;
  letter-spacing: -0.01em;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--primary-500) 25%, transparent);
}

.roadmap-year-pill:hover {
  background: linear-gradient(135deg, var(--pill-bg-hover), color-mix(in srgb, var(--pill-bg-hover) 88%, #000000));
  border-color: var(--pill-border-hover);
  color: var(--pill-text);
}

.roadmap-year-pill:focus-visible {
  outline: 2px solid var(--pill-text);
  outline-offset: 2px;
  background: linear-gradient(135deg, var(--pill-bg-hover), color-mix(in srgb, var(--pill-bg-hover) 88%, #000000));
  border-color: var(--pill-border-hover);
  color: var(--pill-text);
}

.roadmap-year-title {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  font-weight: 800;
}

.roadmap-year-subtitle {
  margin: 4px 0 0;
  color: var(--text-secondary);
  line-height: 1.5;
}

.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--hub-space-12);
  position: relative;
}

.roadmap-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--hub-card-radius);
  padding: var(--hub-space-24);
  box-shadow: var(--hub-card-shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.roadmap-card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--hub-space-12);
  flex-wrap: wrap;
  flex-direction: column;
  width: 100%;
}

.roadmap-card:hover,
.roadmap-card:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
  border-color: color-mix(in srgb, var(--primary-500) 45%, transparent);
}

.roadmap-title {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  font-weight: 800;
}

.roadmap-phase {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.phase-milestones {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-pill);
  background: var(--sunken);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  min-width: 180px;
}

.phase-milestones::before {
  content: "";
  position: absolute;
  inset: 50% 14px auto 14px;
  height: 2px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--primary-500) 45%, transparent),
    color-mix(in srgb, var(--primary-100) 35%, transparent)
  );
  transform: translateY(-50%);
  opacity: 0.8;
}

.phase-pip {
  position: relative;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  overflow: visible;
}

.phase-pip::after {
  content: attr(data-phase);
  position: absolute;
  left: 50%;
  bottom: -26px;
  transform: translateX(-50%);
  color: var(--text-secondary);
  font-size: 0.68rem;
  letter-spacing: -0.01em;
  opacity: 0.7;
}

.phase-pip.is-active {
  background: radial-gradient(
      circle at 35% 35%,
      color-mix(in srgb, var(--primary-100) 40%, transparent),
      color-mix(in srgb, var(--primary-500) 25%, transparent)
    ),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--primary-500) 60%, transparent),
      color-mix(in srgb, var(--primary-700) 55%, transparent)
    );
  border-color: color-mix(in srgb, var(--primary-500) 50%, transparent);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--primary-500) 28%, transparent),
    0 0 0 5px color-mix(in srgb, var(--primary-100) 60%, transparent);
}

.phase-pip.is-active.is-bridge {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--primary-500) 65%, transparent),
    color-mix(in srgb, var(--primary-100) 65%, transparent)
  );
  box-shadow: 0 6px 18px color-mix(in srgb, var(--primary-500) 25%, transparent),
    0 0 0 5px color-mix(in srgb, var(--primary-100) 50%, transparent);
}

.roadmap-description {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

.roadmap-items {
  margin: 0;
  padding-left: 18px;
  color: var(--text-secondary);
  display: grid;
  gap: 8px;
  position: relative;
}

.roadmap-items li {
  position: relative;
  list-style: none;
  padding-left: 14px;
}

.roadmap-items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gradient);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--primary-500) 40%, transparent);
}

.roadmap-note-text {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.5;
}

@media (max-width: 720px) {
  .landing-hero {
    padding-inline: 18px;
  }

  .landing-hero-shell {
    grid-template-columns: 1fr;
  }

  .assistant-picker {
    padding: 18px;
  }
}

/* Guide page */
.guide-main {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 20px 24px 80px;
}

.guide-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px 24px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.guide-hero h1 {
  margin: 0;
  font-size: 2.2rem;
  letter-spacing: -0.02em;
}

.guide-summary-card {
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  display: grid;
  gap: 8px;
}

.guide-summary-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--primary-100) 55%, transparent);
  color: var(--text-primary);
  font-weight: 800;
  border: 1px solid color-mix(in srgb, var(--primary-500) 35%, transparent);
  width: fit-content;
}

.guide-steps {
  background: var(--panel-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-card);
}

.section-header h2 {
  margin: 4px 0 0;
  font-size: 1.7rem;
}

.section-header .lead {
  margin-top: 6px;
}

.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.step-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.step-number {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: var(--gradient);
  color: #0e0f14;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary-500) 25%, transparent);
}

.step-label {
  margin: 0;
  color: var(--text-secondary);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.step-card h3 {
  margin: 4px 0 6px;
  font-size: 1.2rem;
}

.step-card p {
  margin: 0 0 8px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.step-list {
  margin: 0;
  padding-left: 16px;
  color: var(--text-secondary);
  display: grid;
  gap: 6px;
}

.guide-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.guide-contrast {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contrast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.contrast-card {
  background: var(--panel-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.guide-example {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.example-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.example-card {
  background: var(--panel-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.small-print {
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.guide-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.guide-panel h3 {
  margin: 2px 0 6px;
}

.guide-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.guide-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  background: var(--tag-bg);
  border: 1px solid var(--border);
  font-weight: 700;
  color: var(--text-secondary);
}

.guide-rows {
  display: grid;
  gap: 10px;
}

.guide-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: flex-start;
  gap: 10px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.guide-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gradient);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary-500) 35%, transparent);
  margin-top: 6px;
}

.guide-cta {
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--primary-500) 16%, transparent),
    color-mix(in srgb, var(--primary-100) 40%, transparent)
  );
  border: 1px solid color-mix(in srgb, var(--primary-500) 35%, transparent);
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: var(--shadow-soft);
  flex-wrap: wrap;
}

.cta-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 640px) {
  .guide-main {
    padding-inline: 18px;
  }

  .contrast-grid {
    grid-template-columns: 1fr;
  }

  .example-grid {
    grid-template-columns: 1fr;
  }

  .guide-cta {
    flex-direction: column;
    align-items: flex-start;
  }
}

.about-main {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.about-hero-section {
  padding: 0;
}

.about-hero {
  padding: 2.75rem 0 2.25rem;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

.about-hero .hero-grid {
  align-items: center;
  padding: 0;
  gap: 1.5rem;
}

.about-info-section {
  padding: 0 0 90px;
}

.static-hero {
  max-width: 760px;
  display: grid;
  gap: 12px;
  padding: 24px 0;
}

.static-hero.hero {
  background: none;
  border: none;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

.static-hero h1 {
  margin: 0;
}

.static-hero .lead {
  color: var(--text-secondary);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 8px;
}

.info-card h2 {
  margin: 0;
}

.info-card p {
  margin: 0;
  color: var(--text-secondary);
}

/* Marketplace */
.marketplace-hero {
  padding: 24px 0 0;
}

.marketplace-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.marketplace-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.quiet-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 600;
}

.marketplace-help-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 10px;
}

.marketplace-help-link__icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.quiet-link:hover,
.quiet-link:focus-visible {
  color: var(--text-primary);
  text-decoration: underline;
}

.marketplace-help-link:hover,
.marketplace-help-link:focus-visible {
  background: rgba(22, 72, 197, 0.1);
  text-decoration: none;
}

.search-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.input-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  flex: 1;
}

.input-with-icon input {
  background: transparent;
  border: none;
  color: var(--text-primary);
  width: 100%;
  outline: none;
}

.type-tabs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 24px rgba(10, 20, 40, 0.04);
  max-width: 100%;
  flex-wrap: nowrap;
}

.tab-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  min-width: 88px;
  min-height: 42px;
  flex: 0 0 auto;
  white-space: nowrap;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.tab-pill[aria-selected='false'] {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
  box-shadow: none;
}

.tab-pill:hover {
  color: var(--text-primary);
  background: var(--sunken);
  border-color: var(--border);
}

.tab-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.tab-pill.is-active,
.tab-pill[aria-selected='true'] {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong, #0f2f70));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 30px rgba(12, 42, 120, 0.22), 0 1px 0 rgba(255, 255, 255, 0.25) inset;
}

.tab-pill.is-disabled,
.tab-pill[aria-disabled='true'] {
  color: var(--text-muted);
  background: transparent;
  border-color: transparent;
  opacity: 0.56;
  cursor: not-allowed;
  box-shadow: none;
}

.tab-pill.is-disabled:hover {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}

.tab-pill.is-disabled::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 4px);
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  font-size: 0.8rem;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 10;
}

.tab-pill.is-disabled:hover::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.coming-soon-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
  z-index: 100;
}

.coming-soon-toast.is-visible {
  opacity: 1;
}

.marketplace-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 0 60px;
}

.marketplace-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.filter-drawer {
  display: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-card);
}

.filter-drawer.is-open {
  display: block;
}

.sort-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.filter-block + .filter-block {
  margin-top: 18px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.filter-hint {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.chip {
  border: 1px solid var(--border);
  background: var(--sunken);
  color: var(--text-primary);
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chip.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Product detail */
.product-hero {
  padding-top: clamp(24px, 3vw, 48px);
  margin-bottom: clamp(28px, 3.5vw, 48px);
}

.product-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
}

.product-heading {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: clamp(20px, 2.5vw, 32px) 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.product-heading.product-heading-main {
  display: block;
}


.prompt-hero-content {
  display: grid;
  grid-template-columns: minmax(360px, 480px) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}

.prompt-hero-visual {
  display: flex;
  justify-content: center;
}

.listing-cover-hero {
  width: 100%;
  max-width: 480px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(155deg, var(--surface-elevated, #f6f7fb), var(--surface));
  box-shadow: var(--shadow-card);
  aspect-ratio: 3 / 4;
  margin: 0;
}

.listing-cover-hero img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}


.listing-cover-hero-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  background: repeating-linear-gradient(
    -45deg,
    rgba(99, 102, 241, 0.10),
    rgba(99, 102, 241, 0.10) 12px,
    rgba(99, 102, 241, 0.18) 12px,
    rgba(99, 102, 241, 0.18) 24px
  );
}

.listing-cover-hero-placeholder .placeholder-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
}

.listing-cover-hero-placeholder .placeholder-caption {
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.listing-cover-inline-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.listing-cover-inline-controls .form-status {
  margin: 0;
}

.product-box-hero {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-box-hero-inner {
  position: relative;
  width: 100%;
  max-height: 520px;
  min-height: 440px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(155deg, var(--surface-elevated, #f6f7fb), var(--surface));
  box-shadow: var(--shadow-card);
}

.product-box-hero img {
  width: 100%;
  height: 100%;
  min-height: 440px;
  max-height: 520px;
  object-fit: cover;
  display: block;
}

.product-box-hero-face-overlay {
  position: absolute;
  top: 17%;
  right: 25%;
  bottom: 16%;
  left: 37%;
  pointer-events: none;
}

.product-box-hero-overlay,
.product-box-overlay {
  --overlay-gap: clamp(0.2rem, 0.3vw, 0.46rem);
  --overlay-inline-pad: clamp(0.1rem, 0.2vw, 0.35rem);
  --overlay-stroke: rgba(4, 14, 38, 0.72);
  --overlay-ink-opacity: 0.95;
  position: absolute;
  inset: 0;
  color: rgba(243, 247, 255, var(--overlay-ink-opacity));
  text-align: center;
  display: grid;
  justify-items: center;
  grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto) minmax(0, auto);
  gap: clamp(0.12rem, 0.24vw, 0.34rem);
  align-content: stretch;
  padding-inline: var(--overlay-inline-pad);
  padding-block: clamp(0.08rem, 0.2vw, 0.28rem);
  pointer-events: none;
  overflow: hidden;
  transform: skewY(-0.75deg) rotate(-0.28deg);
  transform-origin: 50% 10%;
  clip-path: polygon(1.5% 0, 98% 0, 100% 100%, 0 100%);
  text-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(7, 18, 46, 0.34), 0 2px 4px rgba(6, 14, 36, 0.22);
}

.product-box-overlay-region {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--overlay-gap);
}

.product-box-overlay-region--label {
  align-items: flex-start;
  padding-top: clamp(0.06rem, 0.15vw, 0.2rem);
}

.product-box-overlay-region--title {
  align-self: stretch;
}

.product-box-overlay-region--tagline {
  flex-direction: column;
  gap: clamp(0.08rem, 0.16vw, 0.22rem);
  padding-bottom: clamp(0.06rem, 0.18vw, 0.18rem);
}

.product-box-overlay-region--footer {
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(0.1rem, 0.2vw, 0.28rem);
  padding-bottom: clamp(0.04rem, 0.16vw, 0.18rem);
}

.product-box-hero-overlay-label,
.product-box-overlay-label {
  margin: 0;
  color: rgba(199, 212, 250, 0.9);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.09em;
  font-size: clamp(0.4rem, 0.2rem + 0.44vw, 0.62rem);
  max-inline-size: 22ch;
  -webkit-text-stroke: 0.35px var(--overlay-stroke);
}

.product-box-hero-overlay-title,
.product-box-overlay-title {
  margin: 0;
  font-size: clamp(0.98rem, 0.22rem + 1.42vw, 1.76rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0.01em;
  max-inline-size: min(100%, 11ch);
  margin-inline: auto;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  -webkit-text-stroke: 0.55px var(--overlay-stroke);
}

.product-box-hero-overlay-tagline,
.product-box-overlay-tagline {
  margin: 0;
  color: rgba(223, 232, 255, 0.9);
  font-size: clamp(0.45rem, 0.2rem + 0.5vw, 0.68rem);
  line-height: 1.2;
  max-inline-size: min(100%, 18ch);
  margin-inline: auto;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  -webkit-text-stroke: 0.35px var(--overlay-stroke);
}

.product-box-hero-overlay-divider,
.product-box-overlay-divider {
  width: min(86%, 170px);
  height: 1px;
  margin: clamp(0.08rem, 0.22vw, 0.24rem) auto;
  background: linear-gradient(90deg, rgba(199, 212, 250, 0), rgba(199, 212, 250, 0.95), rgba(199, 212, 250, 0));
}

.product-box-hero-overlay-bullets,
.product-box-overlay-bullets {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(0.1rem, 0.2vw, 0.2rem);
  color: rgba(232, 238, 255, 0.92);
  font-size: clamp(0.42rem, 0.2rem + 0.45vw, 0.62rem);
  line-height: 1.16;
  justify-items: center;
  max-inline-size: min(100%, 22ch);
  width: 100%;
  margin-inline: auto;
}

.product-box-hero-overlay-bullets li,
.product-box-overlay-bullets li {
  max-inline-size: 20ch;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  -webkit-text-stroke: 0.3px var(--overlay-stroke);
}

.product-box-hero-overlay-bullets li::before,
.product-box-overlay-bullets li::before {
  content: "• ";
}

.product-box-hero-overlay-version,
.product-box-overlay-version {
  margin: 0;
  color: #c7d4fa;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: clamp(0.4rem, 0.2rem + 0.44vw, 0.58rem);
  max-inline-size: min(100%, 20ch);
  margin-inline: auto;
  -webkit-text-stroke: 0.35px var(--overlay-stroke);
}

.product-box-hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.product-box-hero-type,
.product-box-hero-version {
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--sunken);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 4px 10px;
}

.product-box-hero-placeholder {
  min-height: 440px;
  max-height: 520px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  text-align: center;
  background: repeating-linear-gradient(
    -45deg,
    rgba(99, 102, 241, 0.08),
    rgba(99, 102, 241, 0.08) 10px,
    rgba(99, 102, 241, 0.14) 10px,
    rgba(99, 102, 241, 0.14) 20px
  );
}

.product-box-hero-placeholder .placeholder-icon {
  font-size: 20rem;
  line-height: 1;
}

.product-box-hero-placeholder .placeholder-text {
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 8rem;
}

.product-info {
  flex: 1 1 520px;
}

@media (max-width: 960px) {
  .prompt-hero-content {
    grid-template-columns: minmax(0, 1fr);
  }

  .listing-cover-hero {
    max-width: 560px;
  }
}

.badge-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.type-pill {
  background: var(--accent);
  color: #fff;
  border-radius: 6px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 0.9rem;
}

.product-card[data-type="assistant"] .type-pill {
  background: var(--draft-500);
}

.product-card[data-type="persona"] .type-pill {
  background: var(--danger-500);
}

.product-card[data-type="agent"] .type-pill {
  background: var(--success-500);
}

.product-card[data-type="product"] .type-pill {
  background: var(--highlight-500);
  color: #1a1a1a;
}

.product-meta {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.title-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.title-row h1 {
  margin: 0;
}

.product-price {
  font-size: 1.4rem;
  margin: 0;
}

.value-line {
  margin: 8px 0 6px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
}


.value-proposition {
  margin: 16px 0 0;
  color: var(--text-secondary);
  font-size: 1rem;
}

.badge-group {
  margin-top: 16px;
  display: grid;
  gap: 8px;
}

.badge-group-label {
  margin: 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.product-info .pill-row {
  gap: 8px;
}

.product-cta-integrated {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
  display: grid;
  gap: 12px;
}

.cta-primary {
  width: 100%;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 700;
}

.cta-microcopy {
  display: grid;
  gap: 4px;
}

.cta-microcopy p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.seller-summary {
  margin-top: 16px;
}

.seller-summary-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.seller-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

.seller-summary .seller-label,
.seller-summary .seller-stats {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.seller-summary .seller-bio {
  margin: 6px 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.example-output p {
  margin: 0 0 10px;
}

.example-output p:last-child {
  margin-bottom: 0;
}

.guest-mode-microcopy {
  margin: 8px 0 4px;
  font-size: 0.92rem;
  color: var(--text-muted);
}


.ownership-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  width: auto;
  max-width: 100%;
  min-width: 0;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--success-color, #2fbf71) 62%, transparent);
  background: color-mix(in srgb, var(--success-color, #2fbf71) 20%, var(--surface));
  color: var(--success-strong, #177a47);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.ownership-badge-label {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ownership-badge--corner {
  position: absolute;
  display: inline-flex;
  top: 11px;
  right: 11px;
  z-index: 4;
  width: auto;
  min-width: 0;
  max-width: min(calc(100% - 22px), 12rem);
  padding: 0.18rem 0.45rem;
  font-size: 0.68rem;
  pointer-events: none;
  border-radius: 10px;
  border-color: color-mix(in srgb, var(--success-color, #2fbf71) 40%, var(--border));
  background: color-mix(in srgb, var(--success-color, #2fbf71) 14%, var(--surface));
  color: color-mix(in srgb, var(--success-strong, #177a47) 86%, var(--text-primary));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ownership-badge--corner .ownership-badge-icon {
  font-size: 0.62rem;
}

.ownership-badge-icon {
  font-size: 0.68rem;
  flex-shrink: 0;
}

.cart-button[data-owned="true"] .cart-icon {
  display: none;
}

.cart-button[data-owned="true"] {
  border-color: color-mix(in srgb, var(--success-color, #2fbf71) 42%, transparent);
}

.product-heading .title-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.product-hero .product-info > .eyebrow {
  margin-bottom: 0.45rem;
}

.ownership-card {
  margin-top: 0.9rem;
  padding: 0.8rem;
  border: 1px solid var(--line-color);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-color) 92%, var(--text-color) 8%);
}

.ownership-card-inline {
  margin-top: 0.6rem;
}

.ownership-card-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}

.ownership-owned-since {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.ownership-meta-grid {
  margin: 0.65rem 0 0;
  display: grid;
  gap: 0.55rem;
}

.ownership-meta-grid dt {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.ownership-meta-grid dd {
  margin: 0.2rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.ownership-id-wrap {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  max-width: 100%;
}

.ownership-meta-grid code {
  font-size: 0.82rem;
  padding: 0.2rem 0.4rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-color) 82%, black 18%);
}

.ownership-id-row {
  min-width: 0;
}

.ownership-id-code {
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
}

.ownership-copy-button {
  padding: 0.2rem 0.45rem;
  min-height: auto;
  font-size: 0.75rem;
  flex-shrink: 0;
}


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

.owner-value-panel {
  margin-top: 0.7rem;
  padding: 0.65rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--line-color) 82%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-color) 96%, var(--text-color) 4%);
}

.owner-value-panel h4 {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.owner-value-grid {
  margin: 0.5rem 0 0;
  display: grid;
  gap: 0.45rem;
}

.owner-value-grid dt {
  margin: 0;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.owner-value-grid dd {
  margin: 0.18rem 0 0;
  font-size: 0.86rem;
}

.owner-value-highlights .product-list {
  margin-top: 0.3rem;
  gap: 0.25rem;
}

.product-sticky-card :is(a, button):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.ownership-checklist {
  margin-top: 0.7rem;
  border: 1px solid var(--line-color);
  border-radius: 10px;
  padding: 0.45rem 0.6rem;
  background: color-mix(in srgb, var(--surface-color) 94%, var(--text-color) 6%);
}

.ownership-checklist summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
}

.ownership-checklist-list {
  margin: 0.55rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

.ownership-checklist-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.86rem;
}

.ownership-checklist-item .ghost-button {
  padding: 0.2rem 0.45rem;
  min-height: auto;
}

.ownership-checklist-item.is-complete {
  color: var(--muted-color);
}

.pill-row-ownership {
  margin-top: 2px;
  margin-bottom: 2px;
}

.product-cart-badge {
  border-radius: var(--radius-pill);
  background: var(--sunken);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 6px 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
 }

.product-sticky-card {
  position: sticky;
  top: 16px;
  align-self: start;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.product-sticky-card .badge-row {
  flex-wrap: wrap;
}

.sticky-price-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.product-body {
  display: grid;
  gap: 40px;
  padding: 0 0 40px;
}

.product-tabs-shell {
  gap: 16px;
}

.product-tab-panel {
  display: grid;
  gap: 20px;
}


.product-panel {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.product-panel h3 {
  margin: 0 0 16px;
}

.product-panel-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.product-panel-heading-row h3 {
  margin-bottom: 0;
}

.listing-section-anchor {
  position: relative;
}

.markdown-editor:has(textarea.hidden) {
  display: none;
}

.listing-section-highlight {
  animation: listingSectionHighlight 2.2s ease-out;
  outline: 2px solid color-mix(in srgb, var(--accent, #4f8cff) 45%, transparent);
  outline-offset: 4px;
  border-radius: 12px;
}

@keyframes listingSectionHighlight {
  0% {
    background: color-mix(in srgb, var(--accent, #4f8cff) 24%, transparent);
  }
  100% {
    background: transparent;
  }
}

.use-panel-locked {
  border-style: dashed;
}

.locked-content {
  opacity: 0.55;
  filter: blur(2px);
  pointer-events: none;
  user-select: none;
}

.product-lock-note {
  margin: 12px 0;
  font-weight: 600;
}

.product-panel.condensed {
  padding: 14px 16px;
}

.product-list {
  padding-left: 20px;
  margin: 10px 0 0;
}

.product-list.checklist {
  list-style: none;
  padding-left: 0;
}

.product-list.checklist li {
  position: relative;
  padding-left: 26px;
  margin: 8px 0;
}

.product-list.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--success, #1fa76a);
  font-weight: 700;
}


.review-subtitle {
  margin: 10px 0 0;
  font-size: 0.95rem;
  color: var(--muted-text, #56607a);
}

.review-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.review-card {
  border: 1px solid var(--border-color, #d3d9e8);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel-bg, #fff) 92%, var(--brand-color, #4f46e5) 8%);
  padding: 12px 14px;
  display: grid;
  gap: 8px;
}

.review-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.review-title-line {
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.review-rating {
  color: var(--rating-star-color, #f5b300);
  font-weight: 700;
}

.review-title {
  font-weight: 600;
}

.review-date,
.review-meta {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted-text, #4f5872);
}

.review-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.review-body {
  margin: 0;
  max-width: 72ch;
  line-height: 1.55;
}

.review-empty {
  color: var(--muted-text, #56607a);
  font-style: italic;
}

.review-flag-btn {
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid var(--border-color, #d6dbeb);
  border-radius: 999px;
  background: transparent;
  color: var(--muted-text, #56607a);
  font-size: 0.78rem;
  cursor: pointer;
}

.review-flag-btn:hover:not(:disabled) {
  color: var(--danger-text, #b3261e);
  border-color: currentColor;
}

.review-flag-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.review-form {
  margin-top: 16px;
  display: grid;
  gap: 12px;
}

.review-form h4 {
  margin: 0;
}

.review-field {
  display: grid;
  gap: 6px;
}

.review-label {
  font-weight: 600;
}

.review-help {
  font-size: 0.84rem;
  color: var(--muted-text, #4f5872);
}

.review-actions-row {
  position: sticky;
  bottom: max(8px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--panel-bg, #fff) 96%, transparent);
  padding: 8px 0;
  z-index: 2;
}

.review-card-skeleton .review-skeleton {
  display: inline-block;
  border-radius: 8px;
  background: linear-gradient(100deg, rgba(226, 232, 240, 0.85) 35%, rgba(203, 213, 225, 0.45) 50%, rgba(226, 232, 240, 0.85) 65%);
  background-size: 200% 100%;
  animation: reviewSkeletonPulse 1.2s ease-in-out infinite;
}

.review-skeleton-rating {
  width: 48px;
  height: 16px;
}

.review-skeleton-title {
  width: 180px;
  height: 16px;
}

.review-skeleton-date {
  width: 96px;
  height: 14px;
}

.review-skeleton-meta {
  width: 140px;
  height: 12px;
}

.review-skeleton-body {
  width: min(100%, 56ch);
  height: 28px;
}

@keyframes reviewSkeletonPulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (max-width: 900px) {
  .review-card-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (min-width: 721px) {
  .review-actions-row {
    position: static;
    padding: 0;
  }
}


.product-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.product-cta .ghost-button,
.product-cta .primary-pill {
  font-size: 0.95rem;
}

.product-cta .secondary-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cta-action-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cta-action-stack .cta-primary,
.cta-action-stack .cta-secondary-setup {
  justify-content: center;
}

.product-cta .secondary-cta {
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
}

.tertiary-cta {
  border-color: transparent;
  color: var(--text-secondary);
}

.marketplace-back-link-block {
  margin: 2px 0 14px;
  text-align: left;
}

.marketplace-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.marketplace-back-link:hover,
.marketplace-back-link:focus-visible {
  color: var(--text-primary);
  text-decoration: underline;
}

.product-cta.stacked {
  flex-direction: column;
  align-items: flex-start;
}

.product-hint:empty {
  display: none;
}

.product-hint {
  margin: 0;
}

.ownership-confirmed-hint {
  margin: 4px 0 0;
  font-weight: 600;
}

.ownership-policy-hint {
  margin: 0;
}

.product-sticky-card > .muted {
  margin: 0;
}

/* Publish */
.publish-hero {
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.publish-hero .cta-group {
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

#publish-listings-status {
  flex-basis: 100%;
}

.publish-login-banner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #eef5ff;
  color: var(--text-secondary);
  margin: 10px 0 14px;
  border: 1px solid #d6e4ff;
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 12px 16px;
}

.publish-login-banner.hidden {
  display: none;
}

.publish-eligibility-banner {
  align-items: flex-start;
}

.publish-eligibility-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.publish-eligibility-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.publish-login-icon {
  font-size: 1.05rem;
  color: var(--text-secondary);
}

.publish-login-text {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.publish-login-text strong {
  color: var(--text-primary);
  font-weight: 600;
}

.publish-shell {
  padding: 18px 24px 48px;
}

.publish-grid {
  display: grid;
  gap: 18px;
}

.wizard-step .field-section {
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wizard-step .field-section + .field-section {
  margin-top: 8px;
}

.field-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.section-label {
  margin: 0;
  font-weight: 800;
}

.section-helper {
  margin: 0;
  color: var(--text-secondary);
  font-weight: 600;
}

.wizard-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
}

.type-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.type-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  gap: 10px;
  cursor: pointer;
}

.type-card.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.type-card.is-disabled input {
  cursor: not-allowed;
}

.type-card input {
  margin-top: 6px;
}

.pill-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill-option {
  position: relative;
  cursor: pointer;
}

.pill-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pill-option span {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--sunken);
  font-weight: 600;
  color: var(--text-primary);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.pill-option input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent, #fff);
}

.pill-option input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pill-option:hover span {
  border-color: var(--accent);
}

.preview-card {
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-top: 12px;
}

.publish-shell .compiled-prompt.preview-card #compiled-prompt-preview {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-height: 320px;
  overflow-y: auto;
}

.preview-top {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

.preview-meta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.test-case-grid {
  gap: 16px;
}

.test-case-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: var(--surface);
  display: grid;
  gap: 10px;
}

.test-case-label {
  margin: 0;
  font-weight: 700;
}

.input-grid.single {
  grid-template-columns: 1fr;
}

.pill.subtle {
  background: var(--tag-bg);
  color: var(--text-primary);
  border-radius: 6px;
  padding: 6px 10px;
  font-weight: 600;
}

.pill.tested {
  background: var(--success-100);
  color: var(--success-700);
  border: 1px solid var(--success-500);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 600;
}

.marketplace-inline-preview {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.marketplace-inline-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: var(--sunken);
}

.advanced-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 6px 0;
}

.advanced-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.advanced-fields {
  display: grid;
  gap: 12px;
  padding-top: 8px;
}


.publish-note {
  margin: 0;
  font-weight: 600;
  color: var(--text-secondary);
}

.marketplace-inline-card h3 {
  margin: 0;
}

.marketplace-inline-card .card-description {
  margin: 4px 0 0;
}

/* Assistant vs Agent — Infographic Redesign */
.theory-hero {
  padding: 1.5rem 0;
  position: relative;
  z-index: 0;
  overflow: visible;
  background: none;
  border: none;
  box-shadow: none;
}

.theory-header {
  padding: 0;
  align-items: stretch;
  gap: 1.25rem;
  max-width: var(--shell-max-width);
  margin: 0 auto;
}

.theory-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}

/* Hero legend color-coded dots */
.analogy-legend .hero-dot--engine {
  background: var(--accent);
}

.analogy-legend .hero-dot--copilot {
  background: var(--draft-500);
}

.analogy-legend .hero-dot--car {
  background: var(--success-500);
}

.analogy-legend .hero-dot--blueprint {
  background: var(--highlight-500);
}

.analogy-legend .hero-dot--toolkit {
  background: #22C55E;
}

/* ── Infographic Overview Diagram ── */
.infographic-overview {
  padding: clamp(2rem, 4vw, 3.5rem) 0;
}

.infographic-overview__diagram {
  max-width: 960px;
  margin: 24px auto 0;
}

.infographic-overview__diagram svg {
  width: 100%;
  height: auto;
  display: block;
}

.infographic-overview__diagram text {
  font-family: 'Inter', system-ui, sans-serif;
}

/* ── Concept Detail Rows ── */
.concept-rows {
  padding: clamp(2rem, 4vw, 3.5rem) 0;
}

.concept-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2.5rem;
  align-items: center;
  padding: 2rem 0;
  border-bottom: 1px solid var(--border);
}

.concept-row:last-child {
  border-bottom: none;
}

.concept-row--reverse {
  grid-template-columns: 1fr 280px;
}

.concept-row--reverse .concept-row__visual {
  order: 2;
}

.concept-row--reverse .concept-row__content {
  order: 1;
}

.concept-row--muted {
  opacity: 0.7;
}

.concept-row__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--sunken);
  border-radius: 16px;
  border: 1px solid var(--border);
}

.concept-row__visual svg {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
}

.concept-row__visual--engine {
  background: var(--primary-100);
  background: color-mix(in srgb, var(--primary-100) 50%, var(--sunken) 50%);
}

.concept-row__visual--copilot {
  background: var(--draft-100);
  background: color-mix(in srgb, var(--draft-100) 50%, var(--sunken) 50%);
}

.concept-row__visual--car {
  background: var(--success-100);
  background: color-mix(in srgb, var(--success-100) 50%, var(--sunken) 50%);
}

.concept-row__visual--blueprint {
  background: var(--highlight-100);
  background: color-mix(in srgb, var(--highlight-100) 50%, var(--sunken) 50%);
}

.concept-row__visual--toolkit {
  background: #DCFCE7;
  background: color-mix(in srgb, #DCFCE7 50%, var(--sunken) 50%);
}

.concept-row__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.concept-row__content .lead {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.concept-row__content p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

.concept-row__metaphor {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.concept-row__content .builder-points {
  margin: 0.5rem 0 0;
}

.concept-row__content .builder-points li {
  align-items: baseline;
}

.concept-tiers li {
  align-items: baseline;
}

.concept-tiers li span {
  line-height: 1.6;
}

/* Color-coded pill labels — static colors, no hover change */
.pill-label.pill-label--engine,
.pill-label.pill-label--engine:hover,
.pill-label.pill-label--engine:focus-visible {
  background: var(--primary-100);
  color: var(--accent);
  border-color: transparent;
  box-shadow: none;
}

.pill-label.pill-label--copilot,
.pill-label.pill-label--copilot:hover,
.pill-label.pill-label--copilot:focus-visible {
  background: var(--draft-100);
  color: var(--draft-700);
  border-color: transparent;
  box-shadow: none;
}

.pill-label.pill-label--car,
.pill-label.pill-label--car:hover,
.pill-label.pill-label--car:focus-visible {
  background: var(--success-100);
  color: var(--success-700);
  border-color: transparent;
  box-shadow: none;
}

.pill-label.pill-label--blueprint,
.pill-label.pill-label--blueprint:hover,
.pill-label.pill-label--blueprint:focus-visible {
  background: var(--highlight-100);
  color: var(--highlight-700);
  border-color: transparent;
  box-shadow: none;
}

.pill-label.pill-label--toolkit,
.pill-label.pill-label--toolkit:hover,
.pill-label.pill-label--toolkit:focus-visible {
  background: #DCFCE7;
  color: #15803D;
  border-color: transparent;
  box-shadow: none;
}

/* ── Autonomy Spectrum ── */
.autonomy-spectrum {
  padding: clamp(2rem, 4vw, 3.5rem) 0;
}

.autonomy-spectrum__track {
  max-width: 720px;
  margin: 24px auto 0;
}

.autonomy-spectrum__labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.autonomy-spectrum__end {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.autonomy-spectrum__bar {
  position: relative;
  height: 6px;
  background: linear-gradient(90deg, var(--accent), var(--draft-500), var(--highlight-500), var(--success-500));
  border-radius: 3px;
  margin-bottom: 48px;
}

.autonomy-spectrum__marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.autonomy-spectrum__dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 2px var(--border);
}

.autonomy-spectrum__marker--engine .autonomy-spectrum__dot {
  background: var(--accent);
}

.autonomy-spectrum__marker--copilot .autonomy-spectrum__dot {
  background: var(--draft-500);
}

.autonomy-spectrum__marker--blueprint .autonomy-spectrum__dot {
  background: var(--highlight-500);
}

.autonomy-spectrum__marker--car .autonomy-spectrum__dot {
  background: var(--success-500);
}

.autonomy-spectrum__marker--toolkit .autonomy-spectrum__dot {
  background: #22C55E;
}

.autonomy-spectrum__tag {
  position: absolute;
  top: 28px;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* ── Closing CTA ── */
.infographic-cta {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  text-align: center;
}

.infographic-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.infographic-cta__inner h2 {
  margin: 0;
}

.infographic-cta__inner .lead {
  margin: 0 0 8px;
  max-width: 560px;
}

.infographic-cta__inner .cta-group {
  margin-top: 10px;
}

/* ── Infographic + Layout Responsive ── */
@media (max-width: 960px) {
  .concept-row,
  .concept-row--reverse {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .concept-row--reverse .concept-row__visual {
    order: 0;
  }

  .concept-row--reverse .concept-row__content {
    order: 0;
  }

  .concept-row__visual {
    max-width: 320px;
  }

  .marketplace-controls {
    align-items: flex-start;
    flex-direction: column;
  }

  .sort-control {
    margin-left: 0;
  }

  .product-heading,
  .publish-hero,
  .theory-header {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
  }

  .product-meta {
    text-align: left;
    align-items: flex-start;
  }

  .product-hero-layout {
    grid-template-columns: 1fr;
  }

  .product-sticky-card {
    position: static;
    width: 100%;
  }
}

@media (max-width: 720px) {
  .theory-hero {
    padding: 32px 0 18px;
  }

  .infographic-overview__diagram {
    max-width: 100%;
  }

  .autonomy-spectrum__bar {
    margin-bottom: 56px;
  }

  .autonomy-spectrum__tag {
    font-size: 0.72rem;
  }

  .concept-row__metaphor {
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  .concept-row {
    padding: 1.5rem 0;
  }

  .autonomy-spectrum__marker {
    gap: 6px;
  }

  .autonomy-spectrum__dot {
    width: 16px;
    height: 16px;
    border-width: 2px;
  }

  .autonomy-spectrum__tag {
    font-size: 0.68rem;
    top: 24px;
  }

  .infographic-cta__inner .lead {
    font-size: 0.92rem;
  }
}

@media (max-width: 640px) {
  .marketplace-bar {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    gap: 12px;
  }

  .search-group {
    flex-direction: column;
    gap: 12px;
  }

  .input-with-icon {
    width: 100%;
  }

  .type-tabs {
    width: 100%;
    justify-content: flex-start;
  }

  .marketplace-links {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .marketplace-links .quiet-link {
    flex: 1 1 auto;
    text-align: center;
    padding: 6px 0;
  }

  .marketplace-links .marketplace-help-link {
    justify-content: center;
  }

  .marketplace-help-link--responsive .link-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .marketplace-help-link--responsive {
    flex: 0 0 auto;
    min-width: 44px;
    justify-content: center;
  }
}

/* Landing hub */
.home-hero {
  padding: 1.5rem 0 1.25rem;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: var(--radius-lg);
  margin-inline: var(--home-shell-padding, 16px);
  position: relative;
  overflow: hidden;
}

.home-hero::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.home-hero::after {
  content: '';
  position: absolute;
  bottom: -15%;
  left: -8%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.home-hero > * {
  position: relative;
  z-index: 1;
}

.home-main .page-shell {
  padding-inline: 0;
}

.hero-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: flex-start;
}

.home-hero .hero-grid {
  padding: 0;
  grid-template-columns: 1fr;
  justify-items: start;
  max-width: var(--shell-max-width);
  margin: 0 auto;
}

.home-hero-grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.home-hero-grid--with-featured {
  grid-template-columns: minmax(0, 3.35fr) minmax(220px, 0.85fr);
  grid-template-areas: "copy featured";
  align-items: stretch;
  column-gap: 1rem;
}

.home-hero-main {
  grid-area: copy;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
}

.home-hero .hero-copy {
  margin-inline: 0;
  width: min(100%, 760px);
}

.home-hero-featured {
  grid-area: featured;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  max-width: 300px;
  width: 100%;
}

.home-hero-featured-panel {
  width: 100%;
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.home-hero-featured-stack {
  gap: 1rem;
}

.home-hero-featured-module-wrap {
  display: grid;
  gap: 0.45rem;
}

.feature-support-copy {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  line-height: 1.35;
}

.home-hero-featured-panel .pill-label {
  margin-bottom: 0;
}

.featured-module {
  background: var(--panel-background);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  box-shadow: 0 0 0 1px color-mix(in srgb, #f2c14e 24%, transparent), 0 10px 26px color-mix(in srgb, #f2c14e 20%, transparent), var(--shadow-sm);
  padding: 0.75rem;
  display: grid;
  gap: 0.7rem;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.featured-module:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--brand-primary) 48%, var(--border-subtle));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 20%, transparent), 0 14px 32px color-mix(in srgb, #f2c14e 28%, transparent), var(--shadow-sm);
  transform: translateY(-1px);
}

.featured-module:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.featured-module .product-box-hero {
  margin: 0;
}

.featured-module .product-box-hero-inner,
.featured-module .product-box-hero img,
.featured-module .product-box-hero-placeholder {
  min-height: 180px;
  max-height: 210px;
}

.featured-module-content {
  display: grid;
  gap: 0.4rem;
}

.featured-module-content h2 {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.2;
}

.featured-module-content p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.85rem;
  line-height: 1.35;
}

.featured-module-content .primary-pill {
  justify-self: flex-start;
}

.featured-module-countdown {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.3;
  color: color-mix(in srgb, var(--brand-primary) 72%, var(--text-primary));
  font-weight: 600;
}

.community-choice-module {
  box-shadow: 0 0 0 1px color-mix(in srgb, #6f74f6 22%, transparent), 0 10px 22px color-mix(in srgb, #6f74f6 16%, transparent), var(--shadow-sm);
}

.community-choice-module:is(:hover, :focus-visible) {
  box-shadow: 0 0 0 3px color-mix(in srgb, #6f74f6 22%, transparent), 0 14px 30px color-mix(in srgb, #6f74f6 22%, transparent), var(--shadow-sm);
}

.featured-module:is(:hover, :focus-visible) .featured-module-content .primary-pill {
  background: var(--brand-primary);
  color: var(--surface);
  border-color: color-mix(in srgb, var(--brand-primary) 68%, black);
}

.home-hero-featured-panel .listing-card,
.home-hero-featured-panel .bundle-card,
.home-hero-featured-panel .product-card {
  margin: 0;
}

.hero-copy h1 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin-bottom: 0.5rem;
}

.hero-subline {
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 1rem;
}

.hero-copy .lead {
  color: var(--muted-foreground);
  max-width: 40ch;
}

.hero-panel {
  display: flex;
  justify-content: flex-end;
}

.hero-panel-card {
  background: var(--panel-background);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  max-width: 420px;
}

.hero-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: 0.5rem;
}

.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  display: inline-block;
  margin-right: 0.5rem;
}

.type-selector {
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.home-main .section-header {
  margin-bottom: 1.5rem;
}

.section-header .ghost-button,
.section-header .primary-pill {
  align-self: flex-start;
}

.type-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.type-grid--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.type-teaser {
  margin: 0.75rem 0 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.home-main .type-card.is-muted {
  background: var(--sunken);
  color: var(--muted-foreground);
  border-color: var(--border-subtle);
  filter: grayscale(1);
  box-shadow: none;
  cursor: not-allowed;
  transition: none;
}

.home-main .type-card.is-muted:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border-subtle);
}

.type-card {
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 1rem;
  text-decoration: none;
  color: inherit;
  background: var(--panel-background);
  box-shadow: var(--shadow-xs);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.type-card.is-active {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
  background: linear-gradient(180deg, rgba(119, 157, 255, 0.08) 0%, rgba(119, 157, 255, 0) 100%);
}

.type-helper {
  color: var(--muted-foreground);
  margin: 0;
}

.type-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--border-strong);
}

.publish-shell .type-cards {
  gap: 8px;
}

.publish-shell .type-card {
  padding: 6px 8px;
  border-radius: 12px;
  display: grid;
  gap: 3px;
  box-shadow: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease,
    opacity 0.2s ease;
}

.publish-shell .type-card:hover {
  transform: none;
  box-shadow: none;
}

.publish-shell .type-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.publish-shell .type-card input {
  margin: 0;
}

.publish-shell .type-card-title {
  font-weight: 700;
  font-size: 1rem;
}

.publish-shell .type-card-description {
  margin: 0;
  font-size: 1rem;
  color: var(--muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.publish-shell .type-card:not(.is-disabled):not(:has(input:checked)) {
  opacity: 0.6;
}

.publish-shell .type-card:has(input:checked) {
  transform: scale(1.02);
  border-color: var(--primary);
  box-shadow: var(--shadow-xs);
}

.type-card-top h3 {
  margin: 0.25rem 0;
}

.type-card-top {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.type-description {
  color: var(--muted-foreground);
  margin: 0;
}

.type-link {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  margin-top: auto;
  padding-top: 0.35rem;
}

.type-link.coming-soon {
  color: var(--muted-foreground);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--panel-background);
}

.new-strip {
  padding: clamp(2rem, 4vw, 3.5rem) 0;
}

.product-grid.limited-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.empty-state.callout {
  border: 1px dashed var(--border-strong);
  border-radius: 14px;
  padding: 1.5rem;
  background: var(--panel-background);
  text-align: center;
}

.how-it-works {
  padding: 2rem 0;
}

.steps-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.how-it-works .step-card {
  border: 1px solid color-mix(in srgb, var(--border-subtle) 70%, transparent);
  border-radius: var(--radius-lg);
  padding: 18px;
  background: var(--panel-background);
  box-shadow: 0 12px 32px rgba(10, 20, 40, 0.05);
  gap: 0.75rem;
  transition: border-color 180ms ease-out, box-shadow 180ms ease-out, transform 180ms ease-out;
}

.how-it-works .step-card h3,
.how-it-works .step-card p {
  margin: 0;
}

.how-it-works .step-card:hover,
.how-it-works .step-card:focus-within {
  border-color: var(--border-subtle);
  box-shadow: 0 16px 36px rgba(10, 20, 40, 0.08);
  transform: translateY(-1px);
}

@media (min-width: 900px) {
  .steps-grid {
    gap: 1.25rem;
  }

  .how-it-works .step-card {
    padding: 20px;
  }
}

.step-action {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.25px;
  text-underline-offset: 3px;
  white-space: nowrap;
  margin-top: auto;
  align-self: flex-start;
}

.footer-cta {
  background: none;
  border-top: none;
  padding: 2rem 0;
  margin-top: 1rem;
}

.footer-cta-card {
  background: var(--panel-background);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
}

.footer-cta-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.moderation-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.moderation-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.moderation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  background: var(--panel-background);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.moderation-row:hover,
.moderation-row:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.moderation-row.is-active {
  border-color: var(--accent-strong);
  box-shadow: var(--shadow-md);
}

.moderation-row .eyebrow {
  margin: 0;
}

.moderation-row h4 {
  margin: 0.1rem 0;
}

.moderation-row .meta {
  margin: 0;
  color: var(--text-subtle);
  font-size: 0.95rem;
}

.moderation-row .pill {
  white-space: nowrap;
}

.moderation-row .row-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.moderation-shell .card {
  height: 100%;
}

.fields-grid {
  align-items: start;
}

.field-card .section-header {
  align-items: flex-start;
  gap: 1rem;
}

.field-section {
  margin-top: 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--sunken);
  padding: 0.75rem 1rem;
}

.field-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.field-summary::-webkit-details-marker {
  display: none;
}

.field-summary::after {
  content: '▾';
  font-size: 0.9rem;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
}

.field-section[open] .field-summary::after {
  transform: rotate(180deg);
}

.field-summary-meta {
  font-size: 0.85rem;
  color: var(--text-subtle);
  font-weight: 500;
}

.field-body {
  margin-top: 0.75rem;
}

.admin-home-shell {
  padding-top: 12px;
}

.admin-home-shell .page-header {
  margin-bottom: 1.5rem;
}

.admin-home-layout {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.admin-hub-card {
  padding: 1.5rem;
}

.admin-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.admin-hub-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 1rem 1.25rem;
  background: var(--panel-background);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.admin-hub-link:hover,
.admin-hub-link:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.admin-hub-link.is-active {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

/* Sidebar nav styles moved to css/admin.css */

.admin-panel-track {
  display: flex;
  transition: transform 0.4s ease;
  will-change: transform;
}

.admin-panel {
  flex: 0 0 100%;
  min-width: 100%;
  padding-right: 1rem;
}

.admin-panel .page-header {
  margin-top: 0;
}

.admin-testing-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  margin-top: 1rem;
}

.admin-testing-date-range {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.admin-testing-results {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 1.25rem;
}

.admin-testing-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--panel-background);
  box-shadow: var(--shadow-sm);
}

.admin-testing-info h4 {
  margin: 0;
}

.admin-testing-info .muted {
  margin: 0.25rem 0 0;
}

.admin-testing-action {
  white-space: nowrap;
}

.admin-testing-form-card #admin-test-panel.hidden {
  display: none;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.detail-block {
  margin-top: 1.25rem;
}

.detail-block p {
  margin: 0.25rem 0;
}

.stacked-list {
  display: grid;
  gap: 0.75rem;
}

.stacked-item {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 0.75rem;
  background: var(--panel-background);
}

.stacked-item.is-inactive {
  opacity: 0.65;
}

.stacked-title {
  margin: 0 0 0.5rem;
  font-weight: 700;
}

.stacked-field {
  display: grid;
  gap: 0.35rem;
}

.stacked-field span {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.stacked-field pre {
  margin: 0;
  white-space: pre-wrap;
  background: var(--sunken);
  border-radius: 10px;
  padding: 0.6rem;
  border: 1px solid var(--border-subtle);
}

.button-row {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.feedback-admin-shell .card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.feedback-filter {
  min-width: 200px;
}

.table-shell {
  width: 100%;
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}

.admin-table th {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 700;
}

.admin-table tbody tr:hover {
  background: var(--surface);
}

.admin-table a {
  color: inherit;
  text-decoration: none;
}

.admin-table a:hover,
.admin-table a:focus-visible {
  text-decoration: underline;
  color: var(--accent);
}

.admin-table a.is-disabled {
  color: var(--text-muted);
  pointer-events: none;
  text-decoration: none;
}

.feedback-reply-row td {
  background: var(--sunken);
  padding: 0.85rem 0.75rem;
}

.feedback-inline-panel {
  display: grid;
  gap: 0.75rem;
}

.feedback-inline-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: center;
}

.feedback-inline-panel textarea {
  width: 100%;
}

.feedback-inline-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.feedback-inline-actions .form-status {
  margin: 0;
}

.feedback-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--border-subtle);
  background: var(--sunken);
  color: var(--text-secondary);
}

.feedback-status-pill.status-new {
  background: rgba(59, 130, 246, 0.12);
  color: var(--accent);
  border-color: rgba(59, 130, 246, 0.3);
}

.feedback-status-pill.status-reviewed {
  background: var(--highlight-100);
  color: var(--highlight-700);
  border-color: var(--highlight-500);
}

.feedback-status-pill.status-replied {
  background: var(--success-100);
  color: var(--success-700);
  border-color: var(--success-500);
}

.feedback-status-pill.status-resolved {
  background: var(--success-100);
  color: var(--success-700);
  border-color: var(--success-500);
}

.feedback-detail-grid {
  display: grid;
  gap: 1.5rem;
}

.feedback-message {
  white-space: pre-wrap;
  background: var(--sunken);
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  padding: 0.85rem;
  margin: 0.35rem 0 0;
}

.feedback-meta {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.feedback-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
  z-index: 100;
}

.feedback-toast.is-visible {
  opacity: 1;
}

.feedback-toast.is-error {
  background: rgba(127, 29, 29, 0.95);
}

/* Sidebar responsive styles moved to css/admin.css */

.faq-main {
  padding: 32px 0 72px;
}

.faq-hero {
  padding: 16px 0 8px;
}

.faq-hero h1 {
  margin: 12px 0 8px;
  font-size: clamp(2rem, 3vw, 2.6rem);
}

.faq-section {
  padding: clamp(2rem, 4vw, 3.5rem) 0;
}

.faq-section h2,
.faq-section h3 {
  margin: 0 0 12px;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
}

.faq-section .eyebrow {
  margin-bottom: 6px;
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.faq-item {
  overflow: hidden;
}

.faq-question {
  width: 100%;
  min-height: 52px;
  padding: 18px 20px;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

.faq-question::after {
  content: '+';
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--accent);
}

.faq-question[aria-expanded='true']::after {
  content: '–';
}

.faq-question:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -4px;
  border-radius: calc(var(--radius-lg) - 4px);
}

.faq-answer {
  padding: 0 20px 18px;
  color: var(--text-secondary);
  font-size: 0.98rem;
}

.faq-answer p {
  margin: 0;
}

.faq-question + .faq-answer {
  border-top: 1px solid var(--border-subtle);
  padding-top: 16px;
}

@media (max-width: 600px) {
  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-testing-row {
    grid-template-columns: 1fr;
    justify-items: start;
  }
}

@media (min-width: 900px) {
  .moderation-grid {
    grid-template-columns: 1.2fr 1.5fr;
  }
}

@media (min-width: 980px) {
  .feedback-detail-grid {
    grid-template-columns: 1.2fr 1fr;
  }
}

.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
}

.checklist-icon {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid var(--neutral-200);
  background: var(--neutral-100);
  position: relative;
}

.checklist-item.is-complete .checklist-icon {
  border-color: var(--success-500);
  background: var(--success-500);
}

.checklist-item.is-complete .checklist-icon::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 10px;
  border-right: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(45deg);
  top: 1px;
  left: 5px;
}

.shop-shell {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.shop-hero {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.shop-banner {
  border-radius: 24px;
  overflow: hidden;
  background: var(--neutral-100);
  min-height: 200px;
  display: flex;
  align-items: stretch;
}

.shop-banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shop-banner-placeholder {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shop-profile {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--white);
  border-radius: 24px;
  padding: 24px;
  box-shadow: var(--shadow-soft);
}

.shop-profile-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shop-bio {
  margin-top: 8px;
}

.shop-social {
  margin-top: 12px;
}

.shop-social-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.shop-social-list a {
  color: var(--primary-500);
  font-weight: 600;
}

@media (max-width: 768px) {
  .shop-profile {
    flex-direction: column;
  }
}

.marketplace-results #marketplace-status {
  margin: 0 0 0.85rem;
}

.owned-products-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.owned-products-filters .pill {
  border: 1px solid var(--border-strong);
  background: var(--tag-bg);
  color: var(--text-primary);
  cursor: pointer;
}

.owned-products-filters .pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.owned-products-filters .pill.is-active {
  background: var(--primary-500);
  border-color: var(--primary-500);
  color: #fff;
}

.owned-product-card {
  display: grid;
  gap: 0.75rem;
}

.owned-product-box-visual {
  border-radius: 0.9rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.owned-product-box-visual img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
}

.owned-product-ownership-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Homepage layout refresh */
.home-page {
  --home-shell-padding: clamp(16px, 3vw, 34px);
}

.home-main .page-shell {
  padding-inline: 0;
}
.home-page header {
  padding: 24px 0 12px;
}

.home-main section {
  padding: clamp(24px, 3vw, 36px) 0;
}

.home-main > section:first-child {
  padding-top: clamp(16px, 2.5vw, 28px);
}

.home-hero {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.home-hero .hero-grid {
  grid-template-columns: 1fr;
  gap: 16px;
  justify-items: start;
}

.home-hero-grid--single {
  grid-template-columns: 1fr;
}

.home-hero-grid--split {
  grid-template-columns: 1fr;
  grid-template-areas:
    "copy"
    "promoted";
  align-items: stretch;
}

.home-hero-main {
  grid-area: copy;
  width: 100%;
  justify-content: flex-start;
}

.home-hero-promoted {
  grid-area: promoted;
  width: 100%;
}

.home-hero-promoted__panel {
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%),
    linear-gradient(160deg, var(--panel-muted), color-mix(in srgb, var(--surface) 94%, var(--accent)));
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent),
    var(--shadow-sm);
  padding: 14px;
  display: grid;
  gap: 10px;
}

.home-hero-promoted__panel .pill-label {
  margin: 0;
}

.home-hero-promoted__card {
  display: grid;
  gap: 10px;
}

.home-hero-promoted__thumb {
  margin: 0;
}

.home-hero-promoted__thumb .home-card-cover-image {
  width: 100%;
  min-height: 150px;
  max-height: 150px;
  object-fit: cover;
  object-position: center center;
  display: block;
  border-radius: 12px;
}

.home-hero-promoted__card h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
}

.home-hero-promoted__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.home-hero-promoted__empty {
  margin: 0;
  color: color-mix(in srgb, var(--text) 82%, #8f6400);
}

.home-hero .hero-copy {
  margin-inline: 0;
  width: min(100%, 760px);
}

.home-hero .cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.hero-subline {
  margin: 0 0 20px;
  max-width: 56ch;
}

.hero-chip-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.hero-chip {
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 6px 12px;
  background: var(--sunken);
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
}

.hero-chip:hover,
.hero-chip:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

/* Centered hero variant */
.home-hero--centered {
  text-align: center;
}

.hero-copy--centered {
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-hero .hero-copy--centered {
  margin-inline: auto;
}

.hero-copy--centered .hero-subline {
  max-width: 52ch;
}

.hero-copy--centered .cta-group {
  justify-content: center;
}

.hero-copy--centered .hero-chip-row {
  justify-content: center;
}

/* How it works section */
.how-it-works {
  padding: clamp(2rem, 4vw, 3.5rem) 0;
  overflow: hidden;
}

.faq-section.home-faq {
  overflow: hidden;
}

/* Closing CTA strip */
.home-cta-strip {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  text-align: center;
}

.home-cta-strip__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.home-cta-strip__inner h2 {
  margin: 0;
}

.home-cta-strip__inner .lead {
  margin: 0 0 8px;
}

.home-cta-strip__inner .cta-group {
  margin-top: 10px;
}

.home-updates-preview {
  padding: clamp(2rem, 4vw, 3.5rem) 0;
}

.how-it-works__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}

.how-it-works__card {
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.how-it-works__card:hover {
}

.how-it-works__step {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent);
  opacity: 0.25;
  letter-spacing: -0.02em;
  line-height: 1;
}

.how-it-works__card h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}

.how-it-works__card p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

@media (max-width: 768px) {
  .how-it-works__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (min-width: 900px) {
  .home-page {
    --home-shell-padding: clamp(20px, 2.8vw, 40px);
  }
}

@media (min-width: 1200px) {
  .home-page {
    --home-shell-padding: clamp(24px, 3.4vw, 56px);
  }
}

@media (min-width: 900px) {
  .home-hero-grid--split {
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.9fr);
    grid-template-areas: "copy promoted";
    gap: 20px;
    align-items: start;
  }

  .home-hero-promoted {
    align-self: stretch;
    justify-self: end;
    max-width: 360px;
  }

  .home-hero-promoted__panel {
    height: 100%;
    align-content: start;
  }
}

.home-trust-strip {
  padding: clamp(1rem, 2vw, 1.5rem) 0;
}

.trust-stat-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  background: var(--panel-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.15rem 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.trust-stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
}

.trust-stat__value {
  font-weight: 700;
  color: var(--accent);
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}

.trust-stat__label {
  color: var(--text-secondary);
}

.home-listing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.home-listing-card,
.type-card {
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.home-listing-card {
  min-height: 320px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-listing-card__top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-listing-card__title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.home-listing-card__description {
  margin: 0;
  color: var(--text-secondary);
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.home-listing-card__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.home-faq .faq-accordion {
  margin-bottom: 16px;
}

.hub-page .roadmap-hero {
  margin-bottom: 1.25rem;
}

.hub-page .roadmap-hero h1 {
  margin: 0 0 8px;
}

.hub-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 20px;
  align-items: start;
}

.hub-content {
  min-width: 0;
}

.hub-panel-report,
.hub-panel-report [data-tab-state-root="report"],
.hub-panel-report [data-tab-state="populated"] {
  width: 100%;
  max-width: none;
}

.hub-panel-report .hub-report-card {
  width: 100%;
  max-width: none;
  padding: 24px;
}

.hub-panel-report .feedback-form,
.hub-panel-report .feedback-step,
.hub-panel-report .conditional-field,
.hub-panel-report .form-field,
.hub-panel-report .form-field textarea,
.hub-panel-report .form-field input,
.hub-panel-report .form-field select {
  width: 100%;
  max-width: none;
}

/* Founding sellers panel — same full-width treatment as the Report panel. */
.hub-panel-founding,
.hub-panel-founding .hub-report-card {
  width: 100%;
  max-width: none;
}

.hub-panel-founding .hub-report-card {
  padding: 24px;
}

.hub-panel-founding .feedback-form,
.hub-panel-founding .form-field,
.hub-panel-founding .form-field textarea,
.hub-panel-founding .form-field input,
.hub-panel-founding .form-field select {
  width: 100%;
  max-width: none;
}

/* Grouped sections inside the founding form. */
.founding-form .form-section {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.founding-form .form-section + .form-section {
  padding-top: 18px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
}

.founding-form .form-section-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--text-secondary);
  padding: 0;
  margin: 0;
}

/* Chip-style checkbox/radio groups (platforms + education module). */
.founding-form fieldset.form-field {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.founding-form fieldset.form-field > legend {
  padding: 0;
  margin: 0 0 2px;
  font-weight: 700;
  color: var(--text-primary);
}

.founding-form .chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.founding-form .chip-row .checkbox-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  margin: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-pill, 24px);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease,
    box-shadow 0.15s ease, transform 0.15s ease;
}

.founding-form .chip-row .checkbox-field input[type="checkbox"],
.founding-form .chip-row .checkbox-field input[type="radio"] {
  width: 14px;
  height: 14px;
  margin: 0;
}

.founding-form .chip-row .checkbox-field:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.founding-form .chip-row .checkbox-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(22, 72, 197, 0.18);
}

.founding-form .chip-row .checkbox-field:has(input:checked) {
  border-color: var(--accent);
  background: var(--panel-muted, #eef2fb);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

.founding-form .muted-inline {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.88rem;
  white-space: nowrap;
}

/* Keep inputs bottom-aligned inside each grid row so a label that wraps
   (e.g. "Portfolio or sample link (optional)") does not push its input
   below the sibling input in the same row. */
.founding-form .input-grid > .form-field > input,
.founding-form .input-grid > .form-field > select,
.founding-form .input-grid > .form-field > textarea {
  margin-top: auto;
}

.founding-form fieldset.form-field > .muted {
  font-size: 0.88rem;
  margin: 0 0 2px;
}

.founding-form .consent-field {
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--sunken, #e6ecf7);
  font-weight: 500;
  line-height: 1.5;
}

.hub-rail {
  display: grid;
  gap: 16px;
}

@media (min-width: 961px) {
  .hub-rail {
    position: sticky;
    top: 20px;
  }
}

.hub-pagination {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hub-roadmap-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.stack-sm {
  display: grid;
  gap: 8px;
}

@media (max-width: 960px) {
  .hub-layout {
    grid-template-columns: 1fr;
  }

  .hub-content {
    order: 1;
  }

  .hub-rail {
    order: 2;
  }

  .hub-roadmap-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .hub-panel .input-grid {
    grid-template-columns: 1fr;
  }

  .hub-panel-report .hub-report-card,
  .hub-panel-founding .hub-report-card {
    padding: 16px;
  }

  .hub-panel .feedback-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hub-panel .feedback-actions .form-status {
    order: 1;
  }

  .hub-panel .feedback-actions .primary-pill {
    width: 100%;
    justify-content: center;
  }
}

.moderator-panel-shell {
  display: grid;
  gap: 24px;
  padding: 24px;
}

.moderator-hero {
  background: linear-gradient(135deg, #0a1428 0%, #10254f 58%, #17356f 100%);
  color: #f4f7ff;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid #27457f;
}

.moderator-hero h1,
.moderator-hero .lead,
.moderator-hero .roadmap-note-text,
.moderator-hero .eyebrow {
  color: #f4f7ff;
}

.moderator-hero .eyebrow {
  opacity: 0.9;
}

.moderator-content-card {
  display: grid;
  gap: 16px;
}

.moderator-content-header {
  margin-bottom: 0;
}

.moderator-section-badge {
  display: inline-flex;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  margin-right: 0.45rem;
  background: #102a58;
  color: #f8fbff;
  font-size: 0.8rem;
  font-weight: 700;
  border: 1px solid #284983;
}

.moderator-content-form {
  display: grid;
  gap: 16px;
}

.moderator-required-group,
.moderator-optional-group {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface);
}

.moderator-required-group h4,
.moderator-optional-group h4 {
  margin: 0;
}

.moderator-content-form label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
}

.moderator-content-form input,
.moderator-content-form select,
.moderator-content-form textarea {
  width: 100%;
}


.required-indicator {
  color: var(--error, #dc2626);
  font-weight: 700;
}

.field-error {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: var(--error, #dc2626);
  min-height: 1.1em;
}

.moderator-content-form .is-invalid {
  border-color: var(--error, #dc2626);
  outline-color: var(--error, #dc2626);
}

.helper-text {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.moderator-preview-card {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 16px;
  background: var(--surface);
}

.moderator-list-shell {
  display: grid;
  gap: 12px;
}

.moderator-table-shell {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}

.moderator-compact-table {
  min-width: 0;
}

.moderator-compact-table th,
.moderator-compact-table td {
  padding: 0.55rem 0.6rem;
}

.moderator-secondary-text {
  margin-top: 0.2rem;
  font-size: 0.75rem;
}

.moderator-status-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.22rem 0.62rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: capitalize;
  background: #122242;
  border: 1px solid #334f89;
  color: #f8fbff;
}

.moderator-status-chip.is-published,
.moderator-status-chip.is-complete,
.moderator-status-chip.is-active,
.moderator-status-chip.is-true,
.moderator-status-chip.is-covered {
  background: #12452f;
  border-color: #2e9468;
  color: #effff7;
}

.moderator-status-chip.is-draft,
.moderator-status-chip.is-planned,
.moderator-status-chip.is-pending,
.moderator-status-chip.is-unknown {
  background: #283245;
  border-color: #566685;
  color: #f2f6ff;
}

.moderator-status-chip.is-scheduled,
.moderator-status-chip.is-triaged,
.moderator-status-chip.is-v2,
.moderator-status-chip.is-partial {
  background: #143867;
  border-color: #3f72ba;
  color: #f3f8ff;
}

.moderator-status-chip.is-bug,
.moderator-status-chip.is-blocked,
.moderator-status-chip.is-false,
.moderator-status-chip.is-missing,
.moderator-status-chip.is-error {
  background: #5e1f2a;
  border-color: #b55364;
  color: #fff6f8;
}

.moderator-requests-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 1rem 0;
  align-items: end;
}

.moderator-status-chip.is-new,
.moderator-status-chip.is-under-review {
  background: #143867;
  border-color: #3f72ba;
  color: #f3f8ff;
}

.moderator-status-chip.is-needs-linking {
  background: #5a3a0f;
  border-color: #c58c2f;
  color: #fff8ea;
}

.moderator-status-chip.is-resolved {
  background: #12452f;
  border-color: #2e9468;
  color: #effff7;
}

.moderator-subscriptions-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  align-items: end;
}

.moderator-checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.moderator-checkbox-row input {
  width: auto;
}

.moderator-subscription-summary {
  font-size: 0.9rem;
}

.moderator-subscription-cards {
  display: grid;
  gap: 10px;
}

.moderator-subscription-card {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 12px;
  background: var(--surface);
  display: grid;
  gap: 10px;
}

.moderator-subscription-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.moderator-subscription-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 14px;
}

.moderator-subscription-grid p {
  margin: 0.3rem 0 0;
}


.moderator-request-details-dialog {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  max-width: min(760px, 95vw);
  width: 100%;
  padding: 0;
}

.moderator-request-details-dialog::backdrop {
  background: rgba(15, 23, 42, 0.5);
}

.moderator-request-details-card {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.moderator-request-details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.moderator-request-details-header h4,
.moderator-request-details-card h5 {
  margin: 0;
}

.moderator-request-details-list {
  margin: 0;
  padding-left: 1rem;
  display: grid;
  gap: 4px;
}

.star-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.star-rating-button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--border-color, #b8bfd6);
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.2rem 0.25rem;
  border-radius: 0.35rem;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.star-rating-button.is-hovered,
.star-rating[data-hovered-rating] .star-rating-button:hover,
.star-rating[data-hovered-rating] .star-rating-button:hover ~ .star-rating-button {
  color: color-mix(in srgb, var(--rating-star-color, #f5b300) 85%, var(--text-secondary, #4a566f));
}

.star-rating-button.is-selected,
.star-rating-button[aria-checked='true'] {
  color: var(--rating-star-color, #f5b300);
}

.star-rating-button:focus-visible {
  outline: 2px solid var(--brand-color, #4f46e5);
  outline-offset: 2px;
  border-color: var(--brand-color, #4f46e5);
  background: color-mix(in srgb, var(--brand-color, #4f46e5) 8%, transparent);
}

.star-rating-button.is-hovered,
.star-rating-button.is-selected {
  background: color-mix(in srgb, var(--rating-star-color, #f5b300) 12%, transparent);
}

.star-rating-button:disabled,
.star-rating[aria-disabled='true'] .star-rating-button {
  color: #9aa0b6;
  cursor: not-allowed;
  opacity: 0.65;
  background: transparent;
}

/* ...but a disabled star that is *selected* must still read as selected. A
   signed-out visitor arriving from the post-purchase email's star link
   (#3754) lands with their rating pre-chosen in a control they can't yet
   use, and the form tells them it was kept — greying it away makes that
   message a lie. Both selectors above outweigh `.is-selected` on their own,
   so the opt-out has to name the disabled state too. */
.star-rating-button:disabled.is-selected,
.star-rating-button:disabled[aria-checked='true'],
.star-rating[aria-disabled='true'] .star-rating-button.is-selected,
.star-rating[aria-disabled='true'] .star-rating-button[aria-checked='true'] {
  color: var(--rating-star-color, #f5b300);
  background: color-mix(in srgb, var(--rating-star-color, #f5b300) 12%, transparent);
  opacity: 1;
}

.product-card {
  display: flex;
  flex-direction: column;
}

.card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.card-title-block {
  min-height: calc(2 * var(--card-title-line-height) * var(--card-title-font-size));
}

.card-publisher {
  margin-top: auto;
}

/* ============================================================
   Founding seller launch panel (homepage)
   A dark mission-control style CTA with live countdown tiles
   and a founding-seat progress meter. Replaces the previous
   narrow ".founding-seller-launch-card" treatment.
   ============================================================ */

.founding-launch {
  margin: clamp(2rem, 4vw, 3.5rem) 0;
  color: #f7f9ff;
}

.founding-launch__panel {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: clamp(1.75rem, 4vw, 3rem);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(78, 130, 255, 0.35) 0%, rgba(78, 130, 255, 0) 55%),
    radial-gradient(90% 120% at 100% 100%, rgba(10, 19, 48, 0.6) 0%, rgba(10, 19, 48, 0) 55%),
    linear-gradient(135deg, #1648c5 0%, #0a1330 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 30px 60px rgba(10, 20, 40, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.founding-launch__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  opacity: 0.55;
}

.founding-launch__orb--one {
  width: 320px;
  height: 320px;
  top: -120px;
  left: -80px;
  background: radial-gradient(circle, rgba(106, 158, 255, 0.7), rgba(106, 158, 255, 0) 70%);
}

.founding-launch__orb--two {
  width: 360px;
  height: 360px;
  bottom: -160px;
  right: -100px;
  background: radial-gradient(circle, rgba(22, 72, 197, 0.6), rgba(22, 72, 197, 0) 70%);
}

.founding-launch__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}

@media (max-width: 860px) {
  .founding-launch__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.founding-launch__copy {
  min-width: 0;
}

.founding-launch__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 1rem;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #f7f9ff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.founding-launch__pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6af0a3;
  box-shadow: 0 0 0 3px rgba(106, 240, 163, 0.22);
}

@media (prefers-reduced-motion: no-preference) {
  .founding-launch__pill-dot {
    animation: founding-pulse 2.2s ease-in-out infinite;
  }
}

@keyframes founding-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(106, 240, 163, 0.22); }
  50% { box-shadow: 0 0 0 6px rgba(106, 240, 163, 0.08); }
}

.founding-launch__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.6rem, 2.8vw, 2.25rem);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-wrap: balance;
}

.founding-launch__lead {
  margin: 0 0 1.25rem;
  max-width: 46ch;
  color: rgba(231, 238, 255, 0.82);
  font-size: 1rem;
  line-height: 1.6;
}

.founding-launch__lead strong {
  color: #ffffff;
  font-weight: 700;
}

.founding-launch__benefits {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 10px;
}

.founding-launch__benefit {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: rgba(231, 238, 255, 0.92);
  font-size: 0.94rem;
  line-height: 1.5;
}

.founding-launch__benefit strong {
  color: #ffffff;
  font-weight: 700;
}

.founding-launch__benefit-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  padding: 3px;
  border-radius: 50%;
  background: rgba(106, 240, 163, 0.18);
  color: #6af0a3;
}

.founding-launch__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.founding-launch__cta-primary.primary-pill {
  background: #ffffff;
  color: #0a1330;
  border-color: #ffffff;
  box-shadow: 0 14px 32px rgba(10, 20, 40, 0.28);
}

.founding-launch__cta-primary.primary-pill:hover,
.founding-launch__cta-primary.primary-pill:focus-visible {
  background: #f0f4ff;
  color: #0a1330;
}

.founding-launch .ghost-button.founding-launch__cta-secondary {
  background: transparent;
  color: #f7f9ff;
  border-color: rgba(255, 255, 255, 0.38);
}

.founding-launch .ghost-button.founding-launch__cta-secondary:hover,
.founding-launch .ghost-button.founding-launch__cta-secondary:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
}

/* --- Countdown column ------------------------------------------------ */

.founding-launch__countdown {
  min-width: 0;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border-radius: 20px;
  background: rgba(8, 16, 40, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.founding-launch__eyebrow {
  margin: 0 0 0.9rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(231, 238, 255, 0.7);
}

.founding-launch__tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 0.9rem;
}

.founding-launch__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 0.25rem 0.7rem;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.founding-launch__tile-num {
  font-size: clamp(1.75rem, 4.5vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.founding-launch__tile-label {
  margin-top: 6px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(231, 238, 255, 0.7);
}

.founding-launch__meta {
  margin: 0 0 1.25rem;
  font-size: 0.82rem;
  color: rgba(231, 238, 255, 0.65);
}

.founding-launch__live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1.25rem;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(106, 240, 163, 0.14);
  border: 1px solid rgba(106, 240, 163, 0.35);
  color: #c9ffdd;
  font-weight: 700;
  font-size: 0.88rem;
}

.founding-launch__live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #6af0a3;
  box-shadow: 0 0 0 4px rgba(106, 240, 163, 0.25);
}

@media (prefers-reduced-motion: no-preference) {
  .founding-launch__live-dot {
    animation: founding-pulse 2.2s ease-in-out infinite;
  }
}

/* --- Progress meter -------------------------------------------------- */

.founding-launch__progress {
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.founding-launch__progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.founding-launch__progress-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(231, 238, 255, 0.7);
}

.founding-launch__progress-count {
  font-size: 0.88rem;
  color: rgba(231, 238, 255, 0.82);
  font-variant-numeric: tabular-nums;
}

.founding-launch__progress-count strong {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
}

.founding-launch__progress-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.founding-launch__progress-fill {
  position: relative;
  height: 100%;
  min-width: 2%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6af0a3 0%, #7fd0ff 100%);
  box-shadow: 0 0 14px rgba(106, 240, 163, 0.45);
  transition: width 600ms ease-out;
}

@media (prefers-reduced-motion: no-preference) {
  .founding-launch__progress-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
    transform: translateX(-100%);
    animation: founding-shimmer 2.6s ease-in-out infinite;
  }
}

@keyframes founding-shimmer {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

.founding-launch__progress-foot {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: rgba(231, 238, 255, 0.7);
}

.founding-launch__progress-foot strong {
  color: #ffffff;
  font-weight: 700;
}

/* --- Launch-day / live state tweaks --------------------------------- */

.founding-launch.is-launch-day .founding-launch__tile-num,
.founding-launch.is-live .founding-launch__title {
  color: #ffffff;
}

@media (max-width: 520px) {
  .founding-launch__panel {
    padding: 1.5rem 1.25rem;
  }
  .founding-launch__tile {
    padding: 0.7rem 0.2rem 0.55rem;
  }
  .founding-launch__tile-label {
    font-size: 0.58rem;
  }
  .founding-launch__benefit {
    font-size: 0.9rem;
  }
  .founding-launch__ctas .primary-pill,
  .founding-launch__ctas .ghost-button {
    width: 100%;
    justify-content: center;
  }
}

/* ==== bundled from: css/product-card.css ==== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.product-grid > .product-card {
  height: 100%;
}


.card-cover {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin: 2px 0 0.65rem;
}

.card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(240, 243, 255, 0.55);
  font-size: 0.85rem;
}

.product-card {
  --card-title-font-size: 1.1rem;
  --card-title-line-height: 1.28;
  position: relative;
  isolation: isolate;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: visible;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.product-card.is-clickable {
  cursor: pointer;
}

.product-card .card-main-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Stretched link: makes the entire card clickable via the native <a> tag,
   so navigation works before JavaScript loads. */
.product-card .card-main-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}

/* Keep interactive elements above the stretched link overlay. */
.product-card .like-button,
.product-card .preview-button,
.product-card .cart-button,
.product-card .publisher-link,
.product-card .card-review-link {
  position: relative;
  z-index: 1;
}

.product-card .card-main-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 10px;
}


.product-card:hover,
.product-card:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xs);
  border-color: var(--border);
}

.card-description {
  margin: 0;
  color: var(--text-secondary);
}

.card-description-preview {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  line-clamp: 2;
}

.card-header,
.card-footer,
.card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.card-header {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

/* ── Secondary metadata row (category + complexity + composed) ── */
.card-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
}

/* ── Generic badge tooltip (reusable via data-tooltip attr) ── */
.card-badge-tooltip[data-tooltip] {
  position: relative;
}

.card-badge-tooltip[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, -4px);
  max-width: min(260px, 90vw);
  width: max-content;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--text-primary);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  box-shadow: var(--shadow-xs);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.card-badge-tooltip[data-tooltip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  width: 7px;
  height: 7px;
  background: var(--text-primary);
  transform: translateX(-50%) rotate(45deg);
  opacity: 0;
  pointer-events: none;
  z-index: 9;
  transition: opacity 0.15s ease;
}

.card-badge-tooltip[data-tooltip]:hover::after,
.card-badge-tooltip[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, -8px);
}

.card-badge-tooltip[data-tooltip]:hover::before,
.card-badge-tooltip[data-tooltip]:focus-visible::before {
  opacity: 1;
}

.product-card .card-cover {
  position: relative;
  isolation: isolate;
}

.product-card .ownership-badge {
  z-index: 3;
}

.product-card .ownership-badge--corner,
.product-card .ownership-badge--cover-overlay,
.product-card .ownership-badge--creator,
.product-card .ownership-badge--owned {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  max-width: calc(100% - 20px);
  pointer-events: none;
}

.product-card .ownership-badge--owned {
  z-index: 5;
}

.product-card .ownership-badge--owned .ownership-badge-icon {
  display: inline-flex;
}

/* Quick add-to-cart button on listing card cover (matches sx-card-cart in sx-home.css) */
.product-card .card-cover .sx-card-cart {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  flex: 0 0 30px;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(11, 13, 18, 0.78);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18) inset,
    0 4px 10px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 180ms ease, transform 180ms ease, background-color 180ms ease, color 180ms ease;
  z-index: 4;
}
.product-card .card-cover .sx-card-cart:hover {
  background: var(--sx-brand, var(--brand-500, #5B7CFF));
  color: #fff;
}
.product-card .card-cover .sx-card-cart:focus-visible {
  outline: none;
  opacity: 1;
  transform: translateY(0);
  box-shadow:
    0 0 0 2px var(--surface, #FFFFFF),
    0 0 0 4px var(--sx-brand, var(--brand-500, #5B7CFF));
}
.product-card:hover .card-cover .sx-card-cart,
.product-card:focus-within .card-cover .sx-card-cart {
  opacity: 1;
  transform: translateY(0);
}
.product-card .card-cover .sx-card-cart .sx-card-cart-icon-added {
  display: none;
}
.product-card .card-cover .sx-card-cart.is-added,
.product-card .card-cover .sx-card-cart[data-in-cart="true"] {
  opacity: 1;
  transform: translateY(0);
  background: #2EBD85;
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.22) inset,
    0 4px 10px rgba(46, 189, 133, 0.35);
}
.product-card .card-cover .sx-card-cart.is-added .sx-card-cart-icon-default,
.product-card .card-cover .sx-card-cart[data-in-cart="true"] .sx-card-cart-icon-default {
  display: none;
}
.product-card .card-cover .sx-card-cart.is-added .sx-card-cart-icon-added,
.product-card .card-cover .sx-card-cart[data-in-cart="true"] .sx-card-cart-icon-added {
  display: inline-block;
}
@media (hover: none) {
  .product-card .card-cover .sx-card-cart {
    opacity: 1;
    transform: none;
  }
}

.type-pill-inline {
  font-size: 0.75rem;
  padding: 4px 10px;
}

.card-title-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 4px;
  min-height: calc(2 * var(--card-title-line-height) * var(--card-title-font-size));
}

.card-title-row {
  display: flex;
  align-items: baseline;
  width: 100%;
}

.card-title-meta {
  display: flex;
  align-items: center;
  width: 100%;
}

.card-title {
  margin: 0;
  font-weight: 700;
  font-size: var(--card-title-font-size);
  line-height: var(--card-title-line-height);
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  line-clamp: 2;
}

/* ── Tagline (inside title block) ───────────────────────── */
.card-tagline {
  margin: 0;
  font-style: italic;
  font-size: 0.82rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ── Target platform badge ─────────────────────────────── */
.target-platform-badge {
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--sunken);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}

.card-publisher {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  min-width: 0;
  margin-top: auto;
}

/* ── Stats row (sales, likes, rating) ──────────────────── */
.card-stats {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  flex-wrap: wrap;
}

.card-stats > *:not(:first-child)::before {
  content: "\00b7";
  margin-right: 4px;
  opacity: 0.5;
}

.card-publisher-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  overflow: hidden;
  flex-shrink: 0;
}

.card-publisher-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-publisher-avatar.has-image {
  background: var(--surface);
}

.publisher-link {
  display: inline-flex;
  min-width: 0;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.publisher-link:hover,
.publisher-link:focus-visible {
  color: var(--accent-2);
  text-decoration-thickness: 2px;
}

.publisher-name {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
}

.publisher-verified {
  font-size: 0.8rem;
  color: var(--accent);
}

.card-publisher .pill-badge {
  margin-left: 4px;
}

.card-sales-meta {
  display: inline-flex;
  align-items: center;
  font-size: inherit;
  color: inherit;
}

.card-rating-meta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: inherit;
  color: inherit;
}

.card-like-meta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: inherit;
  color: inherit;
}

.card-review-snippet {
  margin: -2px 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--text-secondary);
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  line-clamp: 2;
}

.card-review-link {
  align-self: flex-start;
  font-size: 0.78rem;
}

/* ── Category label ─────────────────────────────────────── */
.category-label {
  font-size: 0.7rem;
  color: var(--text-primary);
  background: var(--tag-bg);
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
  flex-shrink: 1;
}

/* ── Setup complexity indicator ─────────────────────────── */
.setup-complexity {
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 600;
  white-space: nowrap;
}

.setup-complexity--easy {
  background: var(--success-100);
  color: var(--success-700);
}

.setup-complexity--medium {
  background: var(--highlight-100);
  color: var(--highlight-700);
}

.setup-complexity--advanced {
  background: var(--danger-100);
  color: var(--danger-700);
}

.composed-badge {
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--primary-100);
  color: var(--primary-500);
  white-space: nowrap;
}

/* ── Visible tags on cards ──────────────────────────────── */
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.card-tag {
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--sunken);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Freshness badge (New / Updated) ────────────────────── */
.freshness-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  pointer-events: none;
}

.freshness-badge--new {
  background: rgba(59, 130, 246, 0.9);
  color: #fff;
}

.freshness-badge--updated {
  background: rgba(139, 92, 246, 0.85);
  color: #fff;
}

.price-pill {
  margin-left: auto;
  padding: 4px 0;
  background: none;
  border: none;
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
}

.price-pill-free {
  background: none;
  color: var(--success-700);
  border: none;
}

.price-pill-paid {
  background: none;
  color: var(--accent);
  border: none;
}

.price-pill-unknown {
  background: none;
  color: var(--text-secondary);
  border: none;
}

.card-footer {
  justify-content: stretch;
}

.card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.card-actions a {
  white-space: nowrap;
}

.card-actions .ghost-button,
.card-actions .primary-pill {
  flex: 1;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  text-align: center;
  justify-content: center;
}

.card-actions .cart-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.marketplace-main .card-actions .cart-button,
.mp-main .card-actions .cart-button,
.home-main .card-actions .cart-button,
.seller-profile-main .card-actions .cart-button {
  background: #ffffff;
  color: var(--accent);
  box-shadow: none;
}

.marketplace-main .card-actions .cart-button:hover,
.marketplace-main .card-actions .cart-button:focus-visible,
.mp-main .card-actions .cart-button:hover,
.mp-main .card-actions .cart-button:focus-visible,
.home-main .card-actions .cart-button:hover,
.home-main .card-actions .cart-button:focus-visible,
.seller-profile-main .card-actions .cart-button:hover,
.seller-profile-main .card-actions .cart-button:focus-visible {
  background: #f4f6ff;
  color: var(--accent);
}

[data-theme="dark"] .marketplace-main .card-actions .cart-button,
[data-theme="dark"] .mp-main .card-actions .cart-button,
[data-theme="dark"] .home-main .card-actions .cart-button,
[data-theme="dark"] .seller-profile-main .card-actions .cart-button {
  background: var(--surface);
  color: var(--accent-2);
}

[data-theme="dark"] .marketplace-main .card-actions .cart-button:hover,
[data-theme="dark"] .marketplace-main .card-actions .cart-button:focus-visible,
[data-theme="dark"] .mp-main .card-actions .cart-button:hover,
[data-theme="dark"] .mp-main .card-actions .cart-button:focus-visible,
[data-theme="dark"] .home-main .card-actions .cart-button:hover,
[data-theme="dark"] .home-main .card-actions .cart-button:focus-visible,
[data-theme="dark"] .seller-profile-main .card-actions .cart-button:hover,
[data-theme="dark"] .seller-profile-main .card-actions .cart-button:focus-visible {
  background: var(--panel-muted);
  color: var(--accent-2);
}

.card-actions .cart-button[aria-disabled='true'],
.card-actions .cart-button[aria-disabled='true']:hover,
.card-actions .cart-button[aria-disabled='true']:focus-visible {
  background: var(--panel-muted);
  color: var(--text-secondary);
  border-color: var(--border);
  box-shadow: none;
  cursor: not-allowed;
}

.card-actions .cart-button[aria-disabled='true'][data-tooltip] {
  position: relative;
}

.card-actions .cart-button[aria-disabled='true'][data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, -4px);
  max-width: min(360px, 90vw);
  width: max-content;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--text-primary);
  color: #ffffff;
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: center;
  text-transform: none;
  white-space: pre-line;
  box-shadow: var(--shadow-xs);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.card-actions .cart-button[aria-disabled='true'][data-tooltip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--text-primary);
  transform: translateX(-50%) rotate(45deg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 1;
}

.card-actions .cart-button[aria-disabled='true'][data-tooltip]:hover::after,
.card-actions .cart-button[aria-disabled='true'][data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, -10px);
}

.card-actions .cart-button[aria-disabled='true'][data-tooltip]:hover::before,
.card-actions .cart-button[aria-disabled='true'][data-tooltip]:focus-visible::before {
  opacity: 1;
}

.marketplace-main .card-actions .cart-button .cart-label,
.mp-main .card-actions .cart-button .cart-label,
.home-main .card-actions .cart-button .cart-label,
.seller-profile-main .card-actions .cart-button .cart-label {
  color: inherit;
}

.card-actions .cart-icon {
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.card-actions .cart-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.card-actions .cart-icon .fa-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.card-actions .cart-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.dashboard-card .card-actions .primary-pill {
  transition: none;
}

.dashboard-card .card-actions .primary-pill:hover,
.dashboard-card .card-actions .primary-pill:focus-visible {
  background: var(--gradient);
  color: #f7f9ff;
  box-shadow: none;
}

.card-actions .primary-pill.review-button {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.card-actions .primary-pill.review-button:hover,
.card-actions .primary-pill.review-button:focus-visible {
  text-decoration: none;
}

.card-testing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  padding: 0;
}

.card-testing .testing-badge {
  font-weight: 700;
  color: var(--text-primary);
}

.card-testing .testing-detail::before {
  content: "•";
  margin: 0 6px 0 4px;
  color: var(--text-secondary);
}

.card-testing .testing-confirmed-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  color: var(--accent);
  background: transparent;
  margin-left: 2px;
  transition: color 0.2s ease, box-shadow 0.2s ease;
}

.card-testing .testing-confirmed-icon:hover {
  color: var(--accent-2);
}

.card-testing .testing-confirmed-icon:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(22, 72, 197, 0.15);
}

.card-testing .testing-confirmed-icon:is([data-tooltip], [aria-label], [title]) {
  position: relative;
}

.card-testing .testing-confirmed-icon:is([data-tooltip], [aria-label], [title])::after {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, -4px);
  max-width: min(360px, 90vw);
  width: max-content;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--text-primary);
  color: #ffffff;
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: center;
  white-space: pre-line;
  box-shadow: var(--shadow-xs);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.card-testing .testing-confirmed-icon:is([data-tooltip], [aria-label], [title])::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--text-primary);
  transform: translateX(-50%) rotate(45deg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 1;
}

.card-testing .testing-confirmed-icon[data-tooltip]::after {
  content: attr(data-tooltip);
}

.card-testing .testing-confirmed-icon:not([data-tooltip])[aria-label]::after {
  content: attr(aria-label);
}

.card-testing .testing-confirmed-icon:not([data-tooltip]):not([aria-label])[title]::after {
  content: attr(title);
}

.card-testing .testing-confirmed-icon:is([data-tooltip], [aria-label], [title]):hover::after,
.card-testing .testing-confirmed-icon:is([data-tooltip], [aria-label], [title]):focus-visible::after {
  opacity: 1;
  transform: translate(-50%, -10px);
}

.card-testing .testing-confirmed-icon:is([data-tooltip], [aria-label], [title]):hover::before,
.card-testing .testing-confirmed-icon:is([data-tooltip], [aria-label], [title]):focus-visible::before {
  opacity: 1;
}

.price {
  font-weight: 700;
}

.empty-state {
  padding: 14px;
  background: var(--sunken);
  border: 1px dashed var(--border);
  border-radius: 12px;
}

/* ==== bundled from: css/responsive.css ==== */
/* responsive.css - global mobile readiness */

/* Prevent accidental horizontal scrolling due to wide elements */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Media should never overflow */
img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

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

/* Mobile tap target baseline */
button, .btn, a.button, input, select, textarea {
  min-height: 44px;
}

:root {
  --container-max: 1200px;
  --pad-desktop: 24px;
  --pad-mobile: 12px;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  .container {
    padding-left: 0;
    padding-right: 0;
  }}

@media (max-width: 640px) {
  :root {
    --pad-mobile: 10px;
  }

  body {
    font-size: 0.9375rem; /* 15px / 16px */
    line-height: 1.65;
  }


  h1 {
    font-size: 1.65rem;
    line-height: 1.2;
  }

  h2 {
    font-size: 1.35rem;
  }

  h3 {
    font-size: 1.1rem;
  }

  .brand h1 {
    font-size: 1.55rem;
  }

  .brand .brand-tagline {
    font-size: 0.95rem;
  }

  .hero-copy h1 {
    font-size: clamp(1.6rem, 6vw, 2.1rem);
  }

  .hero-copy .lead {
    font-size: 1rem;
  }

  .page-shell {
    padding: 0 var(--pad-mobile);
  }

  .shell-flush .page-shell {
    padding-inline: var(--pad-mobile);
  }

  .home-main .page-shell {
    padding-inline: 0;
  }

  .type-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  .type-tabs .tab-pill {
    scroll-snap-align: start;
  }

  .hub-main .feedback-form .form-field > span,
  .hub-main .feedback-form .field-label {
    line-height: 1.4;
  }

  .hub-main .feedback-form textarea {
    min-height: 120px;
  }

  header {
    padding: 0;
  }
  .global-search {
    order: 0;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .global-search-results {
    position: static;
    box-shadow: none;
    margin-top: 6px;
  }

  .auth-wrapper {
    width: 100%;
    justify-content: center;
  }
  .login-dropdown,
  .user-menu-dropdown {
    left: var(--pad-mobile);
    right: var(--pad-mobile);
    margin-left: 0;
    margin-right: 0;
  }

  .login-dropdown {
    width: auto;
    min-width: 0;
    max-width: none;
  }

  .user-menu-dropdown {
    display: flex;
    justify-content: flex-end;
  }

  .user-menu-dropdown .user-summary {
    width: auto;
    min-width: 0;
    max-width: none;
    flex: 1;
  }
  .card-testing {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .card-testing .testing-detail::before {
    margin: 0 4px;
  }

  .card-testing .testing-confirmed-icon {
    margin-left: 0;
  }

  .ghost-button,
  .primary-pill,
  .btn,
  button,
  a.button {
    min-height: 44px;
    padding: 6px 12px;
    font-size: 0.9rem;
  }

  .icon-button,
  .theme-toggle {
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
  }

  .product-grid,
  .dashboard-grid,
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .owned-products-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-card,
  .type-card,
  .assistant-card,
  .card,
  .stat-card,
  .dashboard-card,
  .agent-card,
  .marketplace-card {
    padding: 12px;
    gap: 8px;
  }

  .product-card,
  .marketplace-card {
    --card-title-font-size: 1.04rem;
    --card-title-line-height: 1.24;
  }

  .product-card {
    padding-top: 15px;
  }

  .product-card .card-title-block,
  .marketplace-card .card-title-block {
    margin-top: 2px;
  }

  .product-card .card-title-meta,
  .marketplace-card .card-title-meta {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .product-card .ownership-badge--corner {
    top: 8px;
    right: 8px;
    max-width: calc(100% - 16px);
  }

  .product-card .card-cover {
    margin-top: 4px;
  }

  .card-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .card-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }

  .card-actions .primary-pill.review-button {
    width: 100%;
    justify-content: center;
  }

  .card-actions .ghost-button {
    width: 100%;
    justify-content: center;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 0.5rem;
  }
}

@media (max-width: 960px) {
  .prompt-hero-content {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: left;
  }

  .listing-cover-hero {
    max-height: 420px;
  }

  .product-box-hero-face-overlay {
    top: 16.9%;
    right: 24.8%;
    bottom: 15.8%;
    left: 36.2%;
  }

  .product-box-hero-overlay,
  .product-box-overlay {
    transform: skewY(-0.75deg) rotate(-0.28deg);
    transform-origin: 50% 15%;
  }

  .prompt-hero-visual {
    width: 100%;
  }

  .prompt-hero-content .product-info {
    width: 100%;
  }

  .product-hero-layout {
    gap: 14px;
  }

  .product-sticky-card {
    order: -1;
    margin-bottom: 2px;
  }

  .product-sticky-card .ownership-card {
    margin-top: 0.35rem;
    padding: 0.65rem;
  }

  .product-sticky-card .ownership-card-header {
    align-items: flex-start;
    gap: 0.35rem 0.5rem;
  }

  .product-sticky-card .ownership-owned-since {
    font-size: 0.78rem;
  }

  .product-sticky-card .product-cta {
    gap: 8px;
  }

  .product-sticky-card .product-hint {
    font-size: 0.84rem;
  }


  .owned-product-ownership-row {
    align-items: flex-start;
  }

  .owned-product-ownership-row .ownership-badge,
  .owned-product-ownership-row .pill {
    width: fit-content;
    max-width: 100%;
  }
  .pill-row,
  .pill-row-ownership {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .pill-row .pill,
  .pill-row .type-pill,
  .pill-row-ownership .pill {
    max-width: 100%;
  }
}

@media (min-width: 961px) {
  .product-box-hero-face-overlay {
    top: 16.6%;
    right: 24.2%;
    bottom: 15.2%;
    left: 36.6%;
  }

  .product-box-hero-overlay,
  .product-box-overlay {
    transform: skewY(-0.75deg) rotate(-0.28deg);
    transform-origin: 50% 13%;
  }
}

@media (max-width: 640px) {
  .prompt-hero-content {
    gap: 14px;
  }

  .listing-cover-hero {
    aspect-ratio: 16 / 10;
    max-height: 280px;
  }

  .listing-cover-hero img {
    object-position: center top;
  }

  .product-box-hero {
    max-width: 300px;
  }

  .product-card .ownership-badge--corner {
    font-size: 0.64rem;
    padding: 0.17rem 0.4rem;
    border-radius: 9px;
  }

  .product-card,
  .marketplace-card {
    --card-title-font-size: 1rem;
    --card-title-line-height: 1.22;
  }

  .product-card .card-cover {
    margin-bottom: 0.5rem;
  }

  .product-box-hero-inner,
  .product-box-hero img,
  .product-box-hero-placeholder {
    min-height: 360px;
    max-height: 420px;
  }

  .product-box-hero-meta {
    justify-content: center;
  }

  .product-box-hero-overlay,
  .product-box-overlay {
    transform: skewY(-0.72deg) rotate(-0.24deg);
    transform-origin: 50% 18%;
    clip-path: polygon(1% 0, 99% 0, 100% 100%, 0 100%);
  }

  .product-box-hero-face-overlay {
    top: 14.2%;
    right: 23.6%;
    bottom: 13.8%;
    left: 35.4%;
  }

  .product-box-hero-overlay,
  .product-box-overlay {
    --overlay-gap: clamp(0.25rem, 0.72vw, 0.48rem);
    --overlay-inline-pad: clamp(0.16rem, 0.65vw, 0.3rem);
  }

  .product-box-hero-overlay-title,
  .product-box-overlay-title {
    font-size: clamp(1rem, 2.55vw, 1.6rem);
    -webkit-line-clamp: 2;
  }

  .product-box-hero-overlay-tagline,
  .product-box-overlay-tagline {
    font-size: clamp(0.52rem, 1.5vw, 0.72rem);
    -webkit-line-clamp: 2;
  }

  .product-box-hero-overlay-bullets,
  .product-box-overlay-bullets {
    font-size: clamp(0.5rem, 1.35vw, 0.68rem);
  }

  .product-box-hero-overlay-version,
  .product-box-overlay-version {
    font-size: clamp(0.48rem, 1.25vw, 0.62rem);
  }

  .prompt-hero-content .product-info {
    text-align: center;
  }

  .prompt-hero-content .badge-row,
  .prompt-hero-content .pill-row {
    justify-content: center;
  }

  .product-sticky-card {
    padding: 12px;
  }

  .product-sticky-card .product-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .product-sticky-card .product-cta .primary-pill,
  .product-sticky-card .product-cta .secondary-cta,
  .product-sticky-card .product-cta .tertiary-cta {
    width: 100%;
    justify-content: center;
  }

  .ownership-id-wrap {
    width: 100%;
    justify-content: space-between;
    gap: 0.35rem;
  }

  .ownership-id-code {
    max-width: min(68vw, 18rem);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ownership-copy-button {
    white-space: nowrap;
  }
}


@media (max-width: 1024px) {
  .home-hero-grid--with-featured {
    grid-template-areas: "copy" "featured";
    grid-template-columns: 1fr;
    row-gap: 1.25rem;
  }

  .home-hero-main {
    width: 100%;
  }

  .home-hero-featured {
    justify-content: flex-start;
    max-width: min(420px, 100%);
  }

  .home-hero-featured-panel {
    max-width: 100%;
  }

  .home-hero-featured-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.85rem;
  }
}

@media (max-width: 720px) {
  .home-hero-featured-stack {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-hero-featured {
    max-width: 100%;
  }
}

@media (max-width: 1100px) {
  .home-listing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .home-listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .home-listing-grid {
    grid-template-columns: 1fr;
  }

  .home-listing-card {
    min-height: 0;
  }

  .hero-chip-row {
    gap: 6px;
  }

  .home-hero {
    padding: 1.25rem 0 1rem;
  }

  .trust-stat-row {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }

  .type-grid--compact {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .product-card,
  .marketplace-card {
    --card-title-font-size: 0.96rem;
    --card-title-line-height: 1.2;
  }

  .product-card .ownership-badge--corner {
    top: 7px;
    right: 7px;
    max-width: calc(100% - 14px);
    font-size: 0.61rem;
  }

  .product-card .card-cover {
    border-radius: 10px;
  }
}

/* ==== bundled from: css/sx-nav-actions.css ==== */
/* ---------------------------------------------------------------------------
 * sx-nav-actions.css
 * Top-bar enhancements for the Sigrix shell:
 *   - v2 (guest):  in-nav shopping cart button + popover
 *   - v3 (signed): credits chip, redesigned notifications popover,
 *                  Publish CTA, and user "pill" with stats dropdown.
 * Sourced from Sigrix Marketplace v2 / v3 design prototypes.
 * --------------------------------------------------------------------------- */

/* ---------- Base sx-nav chrome ----------
 * The structural top-bar styles (band, inner shell, logo, primary links)
 * live here rather than in css/sx-home.css so EVERY page that renders
 * components/sx_nav.html gets the styled top bar — including the
 * moderator/admin shells, which use a `shell-flush` body (no `.sx` scope)
 * and never opt into sx-home.css. The search, cart, publish, credits, and
 * mobile chrome already live in this file for the same reason.
 *
 * `.sx-nav-inner` folds in the layout-container box model (max-width /
 * centering / gutter) so the bar stays centred even where `.sx-container`
 * isn't defined, and `.sx-nav-link` / `.sx-logo` set `text-decoration: none`
 * directly instead of leaning on the `.sx a` reset that only ships with
 * sx-home.css.
 *
 * ---------- Why the bar declares its own ground, and why its controls are
 * ---------- scoped `.sx-nav …` rather than left on a single class
 *
 * Living here is not by itself enough to render the same bar everywhere,
 * because pages disagree about what `<body>` is: roughly half the templates
 * carry the `.sx` design-system scope and the rest do not (every admin and
 * moderator console, the item and product editors, the agent builder). `.sx`
 * both re-declares the page's typography and resets the elements inside it:
 *
 *   .sx { letter-spacing: -0.005em; line-height: 1.5; color: var(--sx-text) }
 *   .sx :where(button) { padding: 0; background: transparent; border: 0;
 *                        color: inherit }
 *   .sx p { margin: 0 }
 *
 * Neither half stops at the page content. The bar is inside `<body>`, so it
 * inherits the typography, and the resets match its own buttons. Worse, they
 * *win*: `:where()` contributes nothing, so the reset is (0,1,0) — a tie with
 * every single-class rule below — and sx-home.css ships in the shell bundle,
 * which loads AFTER the head bundle that carries this file. Document order
 * decides the tie, and the reset is later.
 *
 * So the same nav rendered two different bars. On an `.sx` page the Resources
 * trigger and the Sign in button (both `<button class="sx-nav-link">`) lost
 * their `0 12px`, the user pill lost its padding and fill, and the bell, cart
 * and hamburger lost their surface; on a non-`.sx` page they kept all of it.
 * Because `.sx-nav-inner` is a flex row whose search field is `flex: 1 1 auto`,
 * every one of those losses is absorbed as slack somewhere else — so what the
 * difference *looks* like is not a missing background, it is the sections of
 * the bar sitting at different gaps from page to page.
 *
 * The two halves need different fixes, which is worth keeping straight:
 *
 *   1. Typography leaks by INHERITANCE, and no specificity beats inheritance —
 *      only a declaration on the bar itself does. The four below are `.sx`'s
 *      own values, since the bar is a design-system component and its
 *      prototype is authored inside that scope; pinning them here is what
 *      makes an admin console render the same bar as the marketplace.
 *   2. The control resets are a cascade tie, so each control the reset strips
 *      is scoped `.sx-nav …` (0,2,0) at its own rule below — never restated
 *      here. One copy of every value, out of the reset's reach, and out of
 *      reach of whatever a future page scope resets next.
 *
 * Every class scoped that way renders only inside components/sx_nav.html's
 * `<nav class="sx-nav">` (the login dropdown included — `#mobile-nav-panel`
 * is a sibling of the nav and keeps its own classes), so the prefix narrows
 * nothing that was reachable before. Anything measured in the bar is
 * therefore the same on both kinds of page; a *declared* difference that
 * survives is a real one — the active-page tint on `.sx-nav-link.is-active`
 * is the one that should differ, since the pages differ. */
.sx-nav {
  position: sticky; top: 0; z-index: 5;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--sx-line);
  /* See "why the bar declares its own ground" above: inherited from `<body>`,
   * these differ by page scope and move every text measurement in the bar.
   * Declared here, they cannot. `font-family` agrees between the two scopes
   * today — base.html's `body` rule names the same token `.sx` does — and is
   * pinned anyway, so the bar does not depend on that continuing to be true. */
  font-family: var(--sx-font-body);
  letter-spacing: -0.005em;
  line-height: 1.5;
  color: var(--sx-text);
}
.sx-nav-inner {
  width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px;
  height: 60px;
  display: flex; align-items: center; gap: 24px;
}
/* Logo lockup. The gap and letter-spacing are tuned to the twin-track mark
 * rather than the "S" chip it replaced (Sigrix_new 5b6e9d5) — the mark carries
 * ~15% clear space inside its own viewBox, so it reads tighter against the
 * wordmark than a chip that filled its box did. */
.sx-nav .sx-logo {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-family: var(--sx-font-display);
  font-size: 16px; letter-spacing: -0.03em;
  color: var(--sx-text); text-decoration: none;
}
/* The mark is an inline <svg> (components/sx_logo_mark.html) that paints its
 * own gradient, so this box is geometry only — no background, no ink colour.
 * Sizing it here rather than on the element keeps every instance (header,
 * mobile drawer, footer) on one number. */
.sx-logo-mark {
  width: 22px; height: 22px;
  display: block; flex-shrink: 0;
}
/* align-items:center keeps every item on one line: the plain links carry a
 * fixed height:32px while the dropdown wrappers (.sx-nav-has-menu) size to
 * content, so without explicit centring the two kinds can ride at different
 * heights. Mirrors .sx-nav-inner / .sx-nav-actions, which both centre. */
.sx-nav-links { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
/* Spacer between the primary links and the search/actions cluster. Grows to
 * fill the free space so the links stay grouped beside the logo while the
 * search + actions sit on the right (mirrors the Sigrix_new nav prototype,
 * which renders an equivalent flex:1 element in the same slot). */
.sx-nav-spacer { flex: 1 1 auto; }
.sx-nav .sx-nav-link {
  /* min-height:0 cancels the global 44px mobile tap-target reset
   * (responsive.css `button, input, … { min-height: 44px }`). Without it the
   * button-based nav links — the Resources <button> trigger and the Sign in
   * <button> — inflate past their declared height and ride taller than the
   * sibling <a> links, breaking the top-bar rhythm. Safe on mobile: the
   * desktop links are display:none ≤900px, where the drawer's own controls
   * carry the touch targets. */
  height: 32px; min-height: 0; padding: 0 12px; border-radius: 8px;
  display: inline-flex; align-items: center;
  font-size: 14px; color: var(--sx-text-2); font-weight: 500;
  text-decoration: none;
}
.sx-nav-link:hover { background: var(--sx-surface); color: var(--sx-text); }
.sx-nav-link[aria-current], .sx-nav-link.is-active { color: var(--sx-text); background: var(--sx-surface); }
.sx-nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Glass nav + search hint over a dark backdrop. */
[data-theme="dark"] .sx-nav { background: rgba(11,13,18,0.72); }
[data-theme="dark"] .sx-kbd { background: var(--sx-bg); }

/* Narrow viewports tighten the gutter (mirrors the .sx-container rule the
 * home/marketplace pages apply at the same breakpoint). */
@media (max-width: 640px) {
  .sx-nav-inner { padding: 0 20px; }
}

/* ---------- v3 nav refinements (apply on top of base sx-nav) ---------- */
.sx-nav .sx-nav-inner { gap: 20px; }
/* position:relative anchors #login-dropdown's `position: absolute; right: 0`.
 * The dropdown is a sibling of .auth-wrapper (not a child) so the mobile
 * hide rule below can keep the wrapper hidden while letting the dropdown
 * surface as a sheet. */
.sx-nav .sx-nav-actions { gap: 6px; position: relative; }

/* ---------- Mobile hamburger (#nav-toggle) ----------
 * Hidden on desktop; surfaced on mobile to open #mobile-nav-panel via
 * the shared base_bootstrap.js handler that listens for
 * [data-action="header-toggle-nav"]. Lives in this globally-loaded
 * stylesheet so every page rendering sx_nav.html gets the burger — not
 * just the ones that opt into sx-home.css. */
.sx-nav .sx-nav-toggle {
  display: none;
  width: 40px; height: 40px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--sx-r-md);
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  color: var(--sx-text);
  align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.sx-nav-toggle:hover { box-shadow: 0 0 0 1px var(--sx-line-2) inset; }
.sx-nav-toggle:active { transform: scale(0.96); }
.sx-nav-toggle:focus-visible { outline: 2px solid var(--sx-brand); outline-offset: 2px; }
.sx-nav-toggle-icon { width: 18px; height: 18px; display: block; }

/* ---------- Global search bar (#global-search-form) ----------
 * Renders inside sx_nav.html on every page that pulls in base.html, so the
 * styling has to live in this globally-loaded stylesheet — not in sx-home.css
 * which only loads on a handful of marketing/home pages. Without these rules
 * the SVG icon renders at the SVG default size (~viewport-filling) and the
 * form items wrap to their own row, busting the topbar on moderator/admin
 * pages. Same logic as the hamburger toggle above. */
.sx-search {
  flex: 1; max-width: 360px;
  height: 36px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px 0 12px;
  background: var(--sx-surface);
  border-radius: var(--sx-r-md);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  color: var(--sx-text-3); font-size: 13px;
  position: relative;
}
.sx-search:hover { box-shadow: 0 0 0 1px var(--sx-line-2) inset; }
/* Specificity (0,3,1) so this beats the inline base.html
 * `.global-search input[type="search"]` rule (0,2,1) that would
 * otherwise re-pill the input inside the new flat search shell. */
.sx-search input[type="search"].sx-search-input {
  flex: 1; min-width: 0;
  height: 100%;
  min-height: 0;
  width: auto;
  border: 0; background: transparent; outline: none;
  color: var(--sx-text); font-size: 13px;
  font-family: inherit;
  padding: 0;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.sx-search input[type="search"].sx-search-input::placeholder { color: var(--sx-text-3); }
.sx-search-icon { width: 14px; height: 14px; color: var(--sx-text-3); flex-shrink: 0; }
.sx-kbd {
  font-family: var(--sx-font-mono);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--sx-bg-2);
  color: var(--sx-text-3);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}

/* sign-in text link (v3 guest). Scoped `.sx-nav` for the same reason the base
 * rule is, plus one of its own: three rules match `<button id="login-toggle">`
 * — this one, `.sx-nav .sx-nav-link` above, and `.sx-nav .header-signin-link`
 * in css/base.css — and with all three at (0,2,0) the order between them is
 * what decides the control (base.css ships in the shell bundle, so
 * `.header-signin-link`'s 32px/13px is what actually paints). Leaving this one
 * at (0,1,0) while the other two moved up would reshuffle that order rather
 * than preserve it. Any future `.sx-nav-link--*` needs the prefix too. */
.sx-nav .sx-nav-link--auth {
  height: 34px; padding: 0 12px;
  display: inline-flex; align-items: center;
  font-size: 13.5px; color: var(--sx-text-2);
  border-radius: 8px;
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: color 140ms ease;
}
.sx-nav-link--auth:hover { color: var(--sx-text); background: transparent; }

/* ---------- Anchor for popovers ---------- */
.sx-nav-anchor { position: relative; display: inline-flex; }

/* ---------- Cart button + popover (v2) ---------- */
.sx-nav .mp-cart-btn {
  position: relative;
  width: 36px; height: 36px;
  min-height: 0;
  border-radius: var(--sx-r-md);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sx-text);
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  border: 0;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
  transition: background 120ms ease, box-shadow 120ms ease, color 120ms ease;
}
.mp-cart-btn:hover { box-shadow: 0 0 0 1px var(--sx-line-2) inset; background: var(--sx-surface-2); }
.mp-cart-btn:focus-visible { outline: 2px solid var(--sx-brand); outline-offset: 2px; }
.mp-cart-btn[aria-expanded="true"] {
  background: var(--sx-surface-2);
  box-shadow: 0 0 0 1px var(--sx-line-2) inset;
}
.mp-cart-btn-badge {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--sx-brand);
  color: var(--sx-brand-ink, #fff);
  font-family: var(--sx-font-mono);
  font-size: 10px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--sx-bg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mp-cart-btn-badge--bump { transform: scale(1.35); }
.mp-cart-btn-badge.hidden { display: none !important; }

.mp-cart-anchor { position: relative; display: inline-flex; }

.mp-cart-pop {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 380px;
  background: var(--sx-surface);
  border-radius: var(--sx-r-lg);
  box-shadow:
    0 0 0 1px var(--sx-line) inset,
    0 24px 48px -16px rgba(0,0,0,0.6),
    0 8px 16px -8px rgba(0,0,0,0.4);
  overflow: hidden;
  z-index: 50;
  transform-origin: top right;
  animation: mp-cart-pop-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.mp-cart-pop.hidden { display: none !important; }
[data-theme="light"] .mp-cart-pop {
  box-shadow:
    0 0 0 1px var(--sx-line) inset,
    0 24px 48px -16px rgba(14,19,32,0.18),
    0 8px 16px -8px rgba(14,19,32,0.10);
}
@keyframes mp-cart-pop-in {
  from { opacity: 0; transform: scale(0.96) translateY(-6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.mp-cart-pop::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 14px;
  width: 12px; height: 12px;
  background: var(--sx-surface);
  transform: rotate(45deg);
  box-shadow: -1px -1px 0 0 var(--sx-line);
  z-index: 0;
}

.mp-cart-head {
  padding: 14px 16px 12px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--sx-line);
  position: relative;
  z-index: 1;
}
.mp-cart-head h3 {
  font-size: 13px; font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  display: inline-flex; align-items: baseline; gap: 8px;
  color: var(--sx-text);
}
.mp-cart-head .count {
  font-family: var(--sx-font-mono);
  font-size: 11px; font-weight: 500;
  color: var(--sx-text-3);
  letter-spacing: 0.02em;
}
.mp-cart-head-close {
  width: 24px; height: 24px;
  min-height: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sx-text-3);
  cursor: pointer;
  padding: 0;
  transition: color 120ms, background 120ms;
}
.mp-cart-head-close:hover { color: var(--sx-text); background: var(--sx-surface-2); }

.mp-cart-list {
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--sx-line) transparent;
}
.mp-cart-list::-webkit-scrollbar { width: 6px; }
.mp-cart-list::-webkit-scrollbar-thumb { background: var(--sx-line); border-radius: 3px; }

.mp-cart-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--sx-line);
  align-items: center;
  transition: background 200ms ease;
}
.mp-cart-item:last-child { border-bottom: 0; }
.mp-cart-item--just-added {
  animation: mp-cart-flash 1400ms ease-out;
}
@keyframes mp-cart-flash {
  0%   { background: rgba(91,124,255,0.18); }
  100% { background: transparent; }
}

.mp-cart-thumb {
  width: 44px; height: 44px;
  border-radius: var(--sx-r-sm);
  overflow: hidden;
  background: linear-gradient(135deg, #1B2230 0%, #131722 100%);
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
[data-theme="light"] .mp-cart-thumb {
  background: linear-gradient(135deg, #EEF1F8 0%, #F7F8FB 100%);
}
.mp-cart-thumb-letter {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sx-font-display);
  font-weight: 600;
  font-size: 18px;
  color: rgba(255,255,255,0.85);
  z-index: 1;
}
[data-theme="light"] .mp-cart-thumb-letter { color: rgba(14,19,32,0.7); }
.mp-cart-thumb::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 8px 8px;
}
[data-theme="light"] .mp-cart-thumb::after {
  background-image:
    linear-gradient(to right, rgba(14,19,32,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14,19,32,0.04) 1px, transparent 1px);
}
.mp-cart-thumb-tag {
  position: absolute; top: 4px; left: 4px;
  width: 6px; height: 6px; border-radius: 50%;
  z-index: 2;
  box-shadow: 0 0 0 1.5px rgba(0,0,0,0.4);
}
.mp-cart-thumb-tag--prompt    { background: #5B7CFF; }
.mp-cart-thumb-tag--persona   { background: #F5B454; }
.mp-cart-thumb-tag--agent     { background: #7CE3D4; }
.mp-cart-thumb-tag--assistant { background: #B48CFF; }
.mp-cart-thumb-tag--product   { background: #F47B7B; }

.mp-cart-info { min-width: 0; }
.mp-cart-info-title {
  font-size: 13px; font-weight: 500;
  color: var(--sx-text);
  letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3;
}
.mp-cart-info-meta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 3px;
  font-size: 11px;
  color: var(--sx-text-3);
}
.mp-cart-info-meta .type { text-transform: capitalize; font-weight: 500; }
.mp-cart-info-meta .sep { opacity: 0.5; }

.mp-cart-side {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.mp-cart-price {
  font-family: var(--sx-font-mono);
  font-size: 12px; font-weight: 500;
  color: var(--sx-text);
  letter-spacing: -0.01em;
}
.mp-cart-price--free { color: var(--sx-ok); }
.mp-cart-remove {
  width: 20px; height: 20px;
  min-height: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sx-text-3);
  cursor: pointer;
  padding: 0;
  transition: color 120ms, background 120ms;
}
.mp-cart-remove:hover { color: var(--sx-danger); background: var(--sx-surface-2); }

.mp-cart-summary {
  padding: 12px 16px;
  border-top: 1px solid var(--sx-line);
  background: var(--sx-surface-2);
  display: grid; gap: 6px;
}
.mp-cart-summary-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px;
  color: var(--sx-text-2);
}
.mp-cart-summary-row .num {
  font-family: var(--sx-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.mp-cart-summary-row--total {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--sx-line);
  font-size: 14px;
  color: var(--sx-text);
  font-weight: 600;
}
.mp-cart-summary-row--total .num { font-size: 15px; font-weight: 600; }

.mp-cart-actions {
  padding: 12px 16px 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
}
.mp-cart-actions .sx-btn { height: 38px; }
.mp-cart-actions .sx-btn--primary { justify-content: center; }

.mp-cart-empty {
  padding: 36px 20px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mp-cart-empty-icon {
  width: 44px; height: 44px;
  flex: 0 0 44px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  margin: 0 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sx-surface-2);
  color: var(--sx-text-3);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
.mp-cart-empty h4 { font-size: 14px; font-weight: 600; margin: 0 0 4px; color: var(--sx-text); text-align: center; }
.mp-cart-empty p  { font-size: 12px; color: var(--sx-text-3); line-height: 1.5; max-width: 28ch; margin: 0 auto; text-align: center; }

.mp-cart-tip {
  padding: 9px 16px;
  font-size: 11px;
  color: var(--sx-text-3);
  letter-spacing: 0.01em;
  background: var(--sx-bg);
  border-top: 1px solid var(--sx-line);
  display: flex; align-items: center; gap: 8px;
}
.mp-cart-tip svg { color: var(--sx-accent); flex-shrink: 0; }

/* Toast when cart is closed and an item was added */
.mp-cart-toast {
  position: fixed;
  top: 74px;
  right: 32px;
  background: var(--sx-surface);
  border-radius: var(--sx-r-md);
  box-shadow:
    0 0 0 1px var(--sx-line) inset,
    0 12px 28px -10px rgba(0,0,0,0.5);
  padding: 10px 12px;
  display: inline-flex; align-items: center; gap: 10px;
  z-index: 60;
  font-size: 13px;
  animation: mp-toast-in 240ms cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 340px;
}
[data-theme="light"] .mp-cart-toast {
  box-shadow:
    0 0 0 1px var(--sx-line) inset,
    0 12px 28px -10px rgba(14,19,32,0.18);
}
.mp-cart-toast.hidden { display: none !important; }
@keyframes mp-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mp-cart-toast-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(110,231,161,0.16);
  color: var(--sx-ok);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(110,231,161,0.30) inset;
}
.mp-cart-toast-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mp-cart-toast-text strong {
  font-size: 12px; font-weight: 600; color: var(--sx-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 220px;
}
.mp-cart-toast-text span { font-size: 11px; color: var(--sx-text-3); }
.mp-cart-toast-view {
  font-size: 12px; font-weight: 500; color: var(--sx-brand);
  margin-left: 4px;
  white-space: nowrap;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
}
.mp-cart-toast-view:hover { background: var(--sx-surface-2); }


/* ---------- Credits chip (Refined) — star + number in a surface chip ---------- */
.sx-nav-credits {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px 0 10px;
  border-radius: 10px;
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  color: var(--sx-text);
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  transition: box-shadow 140ms ease, background 140ms ease;
}
.sx-nav-credits svg { color: #F5B454; flex-shrink: 0; }
.sx-nav-credits .num {
  font-family: var(--sx-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 500;
}
.sx-nav-credits:hover {
  background: var(--sx-surface-2);
  box-shadow: 0 0 0 1px var(--sx-line-2) inset;
}

/* Inactive state — credits feature not live yet. */
.sx-nav-credits--disabled,
.sx-nav-credits--disabled:hover {
  cursor: not-allowed;
  pointer-events: auto;
  opacity: 0.55;
  filter: grayscale(0.85);
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  color: var(--sx-text-3);
}
.sx-nav-credits--disabled svg { color: var(--sx-text-3); }

/* ---------- Notifications icon (v3) ---------- */
.sx-nav .sx-nav-icon {
  position: relative;
  width: 36px; height: 36px;
  min-height: 0;
  border: 0;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sx-text-2);
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.sx-nav-icon:hover { background: var(--sx-surface-2); color: var(--sx-text); box-shadow: 0 0 0 1px var(--sx-line-2) inset; }
.sx-nav-icon[aria-expanded="true"],
.sx-nav-icon.is-open {
  background: var(--sx-surface);
  color: var(--sx-text);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
.sx-nav-icon-dot {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px;
  background: var(--sx-danger);
  color: #fff;
  font-family: var(--sx-font-mono);
  font-size: 9.5px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--sx-bg);
  font-variant-numeric: tabular-nums;
}
.sx-nav-icon-dot.hidden { display: none !important; }

/* ---------- Publish CTA (Refined) — secondary outlined surface button ---------- */
.sx-nav-publish {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px;
  border-radius: 10px;
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  color: var(--sx-text);
  font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
  text-decoration: none; flex-shrink: 0;
  transition: background 120ms ease, box-shadow 120ms ease, color 120ms ease;
}
.sx-nav-publish:hover {
  background: var(--sx-surface-2);
  box-shadow: 0 0 0 1px var(--sx-line-2) inset;
}
.sx-nav-publish svg { color: var(--sx-text-3); transition: color 120ms ease; }
.sx-nav-publish:hover svg { color: var(--sx-text); }
.sx-nav-publish.is-active {
  color: var(--sx-brand);
  box-shadow: 0 0 0 1px var(--sx-brand) inset;
}
.sx-nav-publish.is-active svg { color: var(--sx-brand); }

/* ---------- User pill (v3) ---------- */
.sx-nav .sx-nav-user {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 3px 10px 3px 3px;
  border-radius: 999px;
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  color: var(--sx-text);
  cursor: pointer;
  margin-left: 4px;
  border: 0;
  font: inherit;
  transition: background 140ms ease, box-shadow 140ms ease;
}
.sx-nav-user:hover {
  background: var(--sx-surface-2);
  box-shadow: 0 0 0 1px var(--sx-line-2) inset;
}
.sx-nav-user[aria-expanded="true"],
.sx-nav-user.is-open {
  background: var(--sx-surface-2);
  box-shadow: 0 0 0 1px var(--sx-line-2) inset;
}
.sx-nav-user-avatar.avatar {
  width: 28px; height: 28px;
  flex: 0 0 28px;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--sx-brand) 0%, #6B82FF 100%);
  color: #fff;
  font-size: 12px; font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset;
  overflow: hidden;
}
.sx-nav-user-avatar.avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.sx-nav-user-avatar.lg.avatar {
  width: 40px; height: 40px;
  flex: 0 0 40px;
  font-size: 16px;
}
.sx-nav-user-name {
  display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1.1;
}
.sx-nav-user-name .n { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.sx-nav-user-name .r { font-size: 10.5px; color: var(--sx-text-3); margin-top: 2px; letter-spacing: 0.04em; }
.sx-nav-user-chevron { transition: transform 160ms; }
.sx-nav-user[aria-expanded="true"] .sx-nav-user-chevron,
.sx-nav-user.is-open .sx-nav-user-chevron { transform: rotate(180deg); }

/* ---------- Popover panels (notifications + user menu) ---------- */
.sx-nav-pop {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 320px;
  background: var(--sx-surface);
  border-radius: var(--sx-r-lg);
  box-shadow:
    0 0 0 1px var(--sx-line) inset,
    0 24px 48px -16px rgba(0,0,0,0.6),
    0 8px 16px -8px rgba(0,0,0,0.4);
  overflow: hidden;
  z-index: 60;
  transform-origin: top right;
  animation: sx-nav-pop-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-theme="light"] .sx-nav-pop {
  box-shadow:
    0 0 0 1px var(--sx-line) inset,
    0 24px 48px -16px rgba(14,19,32,0.18),
    0 8px 16px -8px rgba(14,19,32,0.10);
}
.sx-nav-pop.hidden { display: none !important; }
.sx-nav-pop--user { width: 300px; }
@keyframes sx-nav-pop-in {
  from { opacity: 0; transform: scale(0.97) translateY(-6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.sx-nav-pop-head {
  padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--sx-line);
  font-size: 12px; font-weight: 600; color: var(--sx-text);
  letter-spacing: -0.005em;
}
.sx-nav .sx-nav-pop-link {
  font-size: 11px; color: var(--sx-text-3); font-weight: 500;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}
.sx-nav-pop-link:hover { color: var(--sx-text-2); }
.sx-nav-pop-body { padding: 6px; }
.sx-notif {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px;
  border-radius: var(--sx-r-md);
  text-decoration: none;
  color: inherit;
  transition: background 120ms ease;
}
.sx-notif:hover { background: var(--sx-surface-2); }
.sx-notif-dot {
  width: 6px; height: 6px; border-radius: 50%;
  margin-top: 6px; flex-shrink: 0;
  background: var(--sx-brand);
}
.sx-notif-title {
  font-size: 13px; color: var(--sx-text); line-height: 1.4;
}
.sx-notif-meta {
  font-size: 11px; color: var(--sx-text-3);
  margin-top: 2px; font-family: var(--sx-font-mono);
}
.sx-notif-empty {
  padding: 28px 18px;
  text-align: center;
  font-size: 12px; color: var(--sx-text-3);
}
.sx-nav-pop-foot {
  display: block;
  padding: 12px 16px;
  border-top: 1px solid var(--sx-line);
  font-size: 12px; font-weight: 500;
  color: var(--sx-text-2);
  text-align: center;
  text-decoration: none;
}
.sx-nav-pop-foot:hover { color: var(--sx-text); background: var(--sx-surface-2); }

/* User menu card / stats / sections */
.sx-nav-user-card {
  padding: 16px;
  display: flex; gap: 12px; align-items: center;
  border-bottom: 1px solid var(--sx-line);
  text-decoration: none;
  color: inherit;
  transition: background 120ms ease;
}
.sx-nav-user-card:hover { background: var(--sx-surface-2); }
.sx-nav-user-fullname {
  font-size: 14px; font-weight: 600; color: var(--sx-text);
  letter-spacing: -0.01em;
}
.sx-nav-user-handle {
  font-size: 12px; color: var(--sx-text-3);
  margin-top: 2px; font-family: var(--sx-font-mono);
}
.sx-nav-user-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 12px 8px;
  border-bottom: 1px solid var(--sx-line);
  text-align: center;
}
.sx-nav-user-stats > div + div { box-shadow: -1px 0 0 var(--sx-line); }
.sx-nav-user-stats .v {
  font-family: var(--sx-font-mono);
  font-size: 14px; color: var(--sx-text);
  font-weight: 500;
}
.sx-nav-user-stats .l {
  font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sx-text-3);
  margin-top: 4px;
}
.sx-nav-pop-section {
  padding: 6px;
  border-bottom: 1px solid var(--sx-line);
}
.sx-nav-pop-section:last-child { border-bottom: 0; }
.sx-nav-pop-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--sx-r-md);
  font-size: 13px; color: var(--sx-text);
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font: inherit;
}
.sx-nav-pop-item:hover { background: var(--sx-surface-2); }
.sx-nav-pop-item svg { color: var(--sx-text-3); flex-shrink: 0; }
.sx-nav-pop-item .kbd {
  margin-left: auto;
  font-family: var(--sx-font-mono);
  font-size: 11px;
  color: var(--sx-text-3);
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--sx-bg);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
.sx-nav-pop-item--muted { color: var(--sx-text-2); }
.sx-nav-pop-item--muted:hover { color: var(--sx-text); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .sx-nav-user-name   { display: none; }
}

/* Mobile chrome (≤900px) matches the Sigrix_new prototype: nav links,
 * search, and most actions collapse into the hamburger drawer. The notification
 * bell and cart stay visible in the top bar alongside the hamburger (the bell
 * is hidden for guests by its own .hidden modifier in notification_bell.html).
 *
 * The burger lives inside .sx-nav-actions (it's #nav-toggle), so we keep
 * the actions container visible and only hide the actions that aren't the
 * toggle, cart, or bell. Keep the breakpoint in lockstep with the
 * .mobile-nav-panel desktop-hide rule in style.css. */
@media (max-width: 900px) {
  /* Specificity (0,2,0) — must beat the unconditional `.sx-nav-links
   * { display: flex }` rule in css/sx-home.css, which page templates
   * load AFTER css/sx-nav-actions.css via their {% block extra_head %}.
   * Without the `.sx-nav` prefix the two declarations tie on specificity
   * and the later-loaded sx-home.css wins, leaving the desktop links
   * visible on mobile alongside the hamburger. */
  .sx-nav .sx-nav-links { display: none; }
  .sx-search,
  .sx-nav .sx-search { display: none; }
  /* #login-dropdown is exempt so the mobile drawer's "Sign in" tile can
   * surface it as a centered sheet — see body.is-login-dropdown-open below.
   * Its .hidden class keeps it invisible until JS opens it. */
  .sx-nav-actions > *:not(.sx-nav-toggle):not(#nav-cart-anchor):not(#notification-bell-container):not(#login-dropdown) { display: none !important; }
  .sx-nav .sx-nav-toggle { display: inline-flex; }

  /* Full-height sheet on phones (per design doc). Size with viewport units
   * because `.sx-nav` has `backdrop-filter`, which makes it the
   * containing block for `position: fixed` descendants — `inset: 0` would
   * size the sheet to the ~60px header box, not the viewport, leaving a
   * top stripe over a translucent backdrop. */
  body.is-login-dropdown-open #login-dropdown {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    transform: none;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    border: 0;
    padding: 56px 20px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    text-align: center;
    z-index: 60;
  }
  body.is-login-dropdown-open #login-dropdown .login-eyebrow {
    display: block;
    position: absolute;
    top: 18px;
    left: 0;
    right: 0;
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-secondary);
  }
  body.is-login-dropdown-open #login-dropdown .login-close {
    top: 12px;
    left: 12px;
    right: auto;
  }
  body.is-login-dropdown-open #login-dropdown .login-brand { margin-top: 8px; }
  body.is-login-dropdown-open #login-dropdown .login-brand-mark {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    font-size: 26px;
  }
  body.is-login-dropdown-open #login-dropdown .login-title {
    font-size: 1.5rem;
  }
  body.is-login-dropdown-open #login-dropdown .login-oauth-btn { height: 48px; }
  /* No backdrop on mobile: the full-bleed sheet already covers the viewport.
   * Painting a backdrop here is also broken — `.sx-nav` (which contains
   * the sheet) has `backdrop-filter` and `z-index: 5`, so it forms a
   * stacking context. The sheet's `z-index: 60` is scoped inside that
   * context, while a `body::before` backdrop sits in the root stacking
   * context — so any positive z-index there would paint over the sheet. */
}

@media (max-width: 720px) {
  .sx-nav-publish span { display: none; }
  .sx-nav-publish { padding: 0 10px; }
}

/* Mobile popovers (≤900px) — anchor cart + notifications to the viewport
 * instead of their trigger buttons.
 *
 * On narrow screens the desktop bell / cart buttons can be small or off-axis,
 * so an `position: absolute; right: 0` popover ends up off-screen or visually
 * disconnected from the tile the user tapped. We use `position: fixed` so the
 * popover doesn't follow its anchor button's small bounding box.
 *
 * Caveat: `.sx-nav` applies `backdrop-filter`, which creates a containing
 * block for fixed descendants. So `top: 72px` is measured from
 * the bar's box, not the actual viewport — but because the bar is
 * `position: sticky; top: 0` it stays glued to viewport y=0, which makes the
 * two coordinate systems coincide in practice. Anchoring via `top` (just
 * below the 60px header bar) gives a stable position regardless of scroll;
 * `bottom: 16px` would have measured 16px from the *header's* bottom edge,
 * placing the popover at the top of the page.
 *
 * The triggers' existing outside-click handlers (see sx_nav_cart.js and
 * notifications_bell.js) still close the popover, so no JS coordination is
 * needed — the change is presentation-only. */
@media (max-width: 900px) {
  .mp-cart-pop,
  .sx-nav-pop {
    position: fixed;
    top: 72px;
    bottom: auto;
    left: 50%;
    right: auto;
    width: min(380px, calc(100vw - 24px));
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    transform: translateX(-50%);
    animation: sx-nav-pop-mobile-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* The pointer arrow points at the desktop trigger button, which is hidden
   * (or visually disconnected) on mobile — hide it to avoid a stray triangle
   * floating at the top of the centered sheet. */
  .mp-cart-pop::before,
  .sx-nav-pop::before { display: none; }
  @keyframes sx-nav-pop-mobile-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
  }
}

/* Narrow desktop (901-1200px). The cluster does NOT simply fit here, which is
 * what this block used to claim: measured on a healthy signed-out page the row
 * bottomed out at 1086px wide and overhung every viewport below that, so
 * between 901px and ~1086px `Sign in` and `Get started` rendered past the right
 * edge -- clipped, and with their centres off-screen, unclickable (#4841).
 * Nothing scrolled into view either: .sx-nav-inner is a fixed-height flex row,
 * so the overflow was silently cut and document.scrollWidth still matched the
 * viewport.
 *
 * The rules below reclaim the ~62px the row was short at 1024px. They are all
 * spacing, except the two noted. */
@media (min-width: 901px) and (max-width: 1200px) {
  .sx-nav .sx-nav-inner { padding: 0 20px; gap: 10px; }
  .sx-nav .sx-nav-actions { gap: 4px; }
  .sx-nav .sx-nav-links { gap: 2px; margin-left: 4px; }
  .sx-nav .sx-nav-link { padding: 0 8px; }
  /* Decorative: the ⌘K shortcut keeps working without its badge, and the badge
   * counts toward the search's min-content width below. */
  .sx-nav .sx-kbd { display: none; }
  /* The real culprit. .sx-search is `flex: 1` but never declared a min-width,
   * so it kept `min-width: auto` -- its min-content size, ~200px -- and that
   * floor is what pinned the whole row at 1086px however much the rest gave
   * up. An explicit floor replaces `auto` and lets the row shrink with the
   * viewport again. */
  .sx-nav .sx-search { min-width: 140px; max-width: 220px; }
  .sx-nav-publish span { display: none; }
  .sx-nav-publish { padding: 0 10px; }
}

/* 901-999px: even at its 140px floor the search no longer fits beside the links
 * and the action cluster, so it stands down rather than pushing the row back
 * over the edge. This is the same trade the nav already makes at <=900px, where
 * .sx-search is hidden outright and the mobile drawer carries its own search
 * field -- the difference is that here the primary links stay, which is worth
 * more at this width than an inline search box would be. */
@media (min-width: 901px) and (max-width: 999px) {
  .sx-nav .sx-search { display: none; }
}

/* ---------- Mobile drawer interior (Refined design) -----------------------
 * The drawer shell + slide animation lives in style.css (.mobile-nav-panel).
 * Rules below cover the new richer content: drawer head (logo + close),
 * search, primary CTA, navigation list with trailing indicator, theme row,
 * and the variant block (account card + credits + inbox/cart grid for
 * signed-in, or sign-in link + get-started CTA for guests).
 * ------------------------------------------------------------------------- */
.mobile-nav-head {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px;
  /* Span the panel edge-to-edge by reversing the panel's 14px side padding. */
  margin: 0 -14px 6px;
  padding: 0 14px;
  border-bottom: 1px solid var(--sx-line);
}
.mobile-nav-head-logo { text-decoration: none; }
.mobile-nav-close {
  width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sx-surface);
  color: var(--sx-text-2);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  border: 0; padding: 0; cursor: pointer;
  transition: color 140ms ease, box-shadow 140ms ease;
}
.mobile-nav-close:hover { color: var(--sx-text); box-shadow: 0 0 0 1px var(--sx-line-2) inset; }
.mobile-nav-close svg { display: block; }

.mobile-nav-search {
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 14px;
  background: var(--sx-surface);
  border-radius: 12px;
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
.mobile-nav-search-icon { width: 14px; height: 14px; color: var(--sx-text-3); flex-shrink: 0; }
.mobile-nav-search-input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  color: var(--sx-text); font-size: 14px; font-family: inherit;
}
.mobile-nav-search-input::placeholder { color: var(--sx-text-3); }
.mobile-nav-search-input:focus { outline: 0; }
.mobile-nav-search:focus-within { box-shadow: 0 0 0 1px var(--sx-brand) inset; }

.mobile-nav-publish {
  display: flex; align-items: center; justify-content: space-between;
  height: 48px; padding: 0 16px;
  border-radius: 12px;
  background: var(--sx-brand, #3D4DFF);
  color: #FFFFFF;
  font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 0 0 1px rgba(91,124,255,0.6);
  transition: filter 140ms ease;
}
.mobile-nav-publish:hover { filter: brightness(1.05); }
.mobile-nav-publish-label { display: inline-flex; align-items: center; gap: 8px; }
.mobile-nav-publish svg { display: block; }

.mobile-nav-eyebrow {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sx-text-3); font-weight: 600;
  padding: 0 4px;
}

.mobile-nav-theme-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 4px;
}
.mobile-nav-theme-label { font-size: 13px; color: var(--sx-text-2); font-weight: 500; }

/* The drawer's theme switch reuses the guest top-bar toggle's component
 * (`.sx-theme-toggle`, defined in css/sx-home.css) so both share one visual —
 * see the button markup in components/sx_nav.html. No pill-specific styles
 * live here anymore; only the row + label above are drawer-specific. */

.mobile-nav-account-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  background: var(--sx-surface);
  border-radius: 12px;
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 140ms ease, background 140ms ease;
}
.mobile-nav-account-card:hover { background: var(--sx-surface-2); box-shadow: 0 0 0 1px var(--sx-line-2) inset; }
.mobile-nav-account-card-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sx-brand) 0%, #1A1F6B 100%);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 14px;
  flex-shrink: 0;
}
.mobile-nav-account-card-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.mobile-nav-account-card-name {
  font-size: 14px; font-weight: 500; color: var(--sx-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mobile-nav-account-card-role {
  font-size: 10px; color: var(--sx-text-3);
  font-family: var(--sx-font-mono);
  letter-spacing: 0.06em; text-transform: uppercase;
}

.mobile-nav-credits-row {
  /* Inherits .sx-nav-credits + --disabled styling. Stretch full-width. */
  display: flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 14px;
  width: 100%;
  box-sizing: border-box;
}
.mobile-nav-credits-row .num { padding-left: 4px; }

.mobile-nav-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.mobile-nav-tile {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 14px;
  border-radius: 12px;
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  color: var(--sx-text);
  border: 0;
  font: inherit;
  font-size: 13px; font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms ease, box-shadow 140ms ease;
}
.mobile-nav-tile:hover { background: var(--sx-surface-2); box-shadow: 0 0 0 1px var(--sx-line-2) inset; }
.mobile-nav-tile svg { color: var(--sx-text-3); }
.mobile-nav-tile-badge {
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: var(--sx-brand);
  color: #fff;
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.mobile-nav-tile-badge.hidden { display: none !important; }
.mobile-nav-tile--ghost {
  background: transparent;
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
.mobile-nav-tile--primary {
  background: var(--sx-brand);
  color: var(--sx-brand-ink, #fff);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 0 0 1px rgba(91,124,255,0.6);
  font-weight: 600;
}
.mobile-nav-tile--primary:hover { filter: brightness(1.05); background: var(--sx-brand); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 0 0 1px rgba(91,124,255,0.6); }

/* Guest variant: full-width Cart tile rendered above the auth row so guests
 * can reach the cart from the mobile drawer (matches the Building Blocks
 * canonical top-bar spec where cart is always present, even for guests). */
.mobile-nav-tile--guest-cart { width: 100%; }

/* Guest CTA grid — 2-up Sign in (ghost) + Get started (primary), matching
 * the Sigrix_new prototype's .sx-mb-cta layout. Both buttons share the same
 * height and stretch to fill their column. */
.mobile-nav-auth-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
  padding: 4px 0 0;
}
.mobile-nav-signin-link,
.mobile-nav-signup-cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 16px;
  border-radius: 12px;
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: 0;
  transition: background 140ms ease, box-shadow 140ms ease, filter 140ms ease, color 140ms ease;
}
.mobile-nav-signin-link {
  background: var(--sx-surface);
  color: var(--sx-text);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
.mobile-nav-signin-link:hover {
  background: var(--sx-surface-2);
  box-shadow: 0 0 0 1px var(--sx-line-2) inset;
}
.mobile-nav-signup-cta {
  background: var(--sx-brand);
  color: var(--sx-brand-ink, #fff);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 0 0 1px rgba(91,124,255,0.6);
}
.mobile-nav-signup-cta:hover { filter: brightness(1.05); }

/* ── Marketplace "browse by type" dropdown (desktop nav) ─────────────────────
   CSS-only flyout: the trigger is a real link to /marketplace; the panel opens
   on hover and on keyboard focus (:focus-within). Greyed types carry a "Soon"
   pill and are non-interactive spans. The whole thing is hidden ≤900px where
   the mobile drawer's nested sub-links take over. */
.sx-nav-has-menu { position: relative; display: inline-flex; align-items: center; }
.sx-nav-link-chevron {
  /* Pin the box explicitly: the global `svg { height: auto }` reset
   * (responsive.css) overrides the SVG's width/height attributes and collapses
   * this caret to 0×0, so the Marketplace/Resources dropdown indicator vanished
   * entirely. flex:none keeps the flex trigger row from shrinking it. Same
   * belt-and-braces sizing as .sx-nav-menu-ic svg further down. */
  width: 11px;
  height: 11px;
  flex: none;
  margin-left: 5px;
  /* Negative right margin tucks the caret toward the trigger's edge, matching
   * the Sigrix_new prototype caret (.sx-nav-trigger .caret). */
  margin-right: -2px;
  opacity: 0.75;
  transition: transform 160ms ease, opacity 160ms ease;
}
.sx-nav-has-menu:hover .sx-nav-link-chevron,
.sx-nav-has-menu:focus-within .sx-nav-link-chevron {
  opacity: 1;
  transform: rotate(180deg);
}
.sx-nav-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 300px;
  padding: 6px;
  /* Deeper than the surrounding chrome (matches the Sigrix_new flyout): the
   * panel sits on --sx-bg-2 so the surface-level icon tiles + hover rows read
   * as raised cards against it. */
  background: var(--sx-bg-2);
  border-radius: var(--sx-r-lg);
  box-shadow:
    0 0 0 1px var(--sx-line) inset,
    0 24px 48px -16px rgba(0,0,0,0.6),
    0 8px 16px -8px rgba(0,0,0,0.4);
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.97) translateY(-6px);
  transform-origin: top left;
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}
[data-theme="light"] .sx-nav-menu {
  box-shadow:
    0 0 0 1px var(--sx-line) inset,
    0 24px 48px -16px rgba(14,19,32,0.18),
    0 8px 16px -8px rgba(14,19,32,0.10);
}
/* Hover bridge so the cursor can cross the gap to the panel without it closing. */
.sx-nav-menu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}
.sx-nav-has-menu:hover .sx-nav-menu,
.sx-nav-has-menu:focus-within .sx-nav-menu {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
  transition: opacity 160ms ease, transform 160ms ease;
}
/* ---------- Ink, same rule as the box above ----------
 * `.sx a` and `.sx :where(button)` also carry `color: inherit`, and `.sx h1..h5`
 * its own heading typography, so the bar's popovers were rendering their links
 * in the page's ink rather than their own: the mega-menu's category column read
 * `--sx-text` on a marketplace page and `--sx-text-2` on an admin one. Same tie,
 * same `.sx-nav` scoping. `--soon` / `--rich` come along because they beat their
 * base on document order alone. */

.sx-nav .sx-nav-menu-link {
  display: block;
  padding: 9px 11px;
  border-radius: var(--sx-r-md);
  text-decoration: none;
  color: var(--sx-text);
  transition: background 120ms ease;
}
a.sx-nav-menu-link:hover,
a.sx-nav-menu-link:focus-visible { background: var(--sx-surface); }
.sx-nav-menu-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.sx-nav-menu-blurb {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--sx-text-3);
}
.sx-nav .sx-nav-menu-link--soon { cursor: default; }
.sx-nav-menu-link--soon .sx-nav-menu-label { color: var(--sx-text-2); }
.sx-nav-menu-link--soon .sx-nav-menu-blurb { color: var(--sx-text-3); opacity: 0.7; }

/* Shared "Soon" pill — used in the desktop menu and the mobile sub-nav. */
.sx-nav-soon {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sx-text-3);
  background: var(--sx-surface-2);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}

/* ── Resources dropdown (Learn + Blog grouped menu, IA "Option A") ────────────
   Reuses the .sx-nav-has-menu / .sx-nav-menu flyout above. The trigger is a
   disclosure <button> (there is no /resources landing page), so it needs the
   usual button reset to read as a plain nav link. Each menu item is the "rich"
   variant: a colour-tinted icon tile alongside the label + blurb. */
.sx-nav-trigger {
  background: none;
  border: 0;
  cursor: pointer;
  /* Only the family needs inheriting to escape the UA's default button font.
   * The full `font` shorthand also resets font-size/weight/line-height to the
   * inherited body values (16px / 400 / 1.6), which clobbers `.sx-nav-link`'s
   * 14px / 500 — so the Resources <button> rendered larger and off-baseline
   * from the sibling links (Home / Marketplace / Hub / About). Inheriting just
   * the family keeps it the same size as the rest of the row. Matches the
   * Sigrix_new prototype (.sx-nav-trigger { … font-family: inherit }). */
  font-family: inherit;
}
.sx-nav .sx-nav-menu-link--rich {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.sx-nav-menu-ic {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Surface-level tile raised against the deeper --sx-bg-2 panel. */
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
.sx-nav-menu-ic svg { width: 16px; height: 16px; }
.sx-nav-menu-link--rich .sx-nav-menu-text { min-width: 0; }
.sx-nav-menu-link[aria-current="page"] .sx-nav-menu-label { color: var(--sx-brand-3); }
/* Not-yet-launched ("Soon") types: mute the icon tile like the blurb. */
.sx-nav-menu-link--soon .sx-nav-menu-ic { opacity: 0.72; }

/* ── Marketplace mega-menu (Sigrix_new "Marketplace ▾") ───────────────────────
   The Marketplace dropdown widens from the single 300px column into a
   three-column grid — By type · By category · Discover. The --mega modifier
   only overrides layout; the reveal (hover + :focus-within), positioning, and
   panel surface all come from the shared .sx-nav-menu rules above. The nav's
   primary links hide ≤900px (the mobile drawer takes over), so this wide panel
   only ever renders on desktop where it fits at left:0 under the trigger. */
.sx-nav-menu--mega {
  width: auto;
  padding: 10px;
  display: grid;
  /* First column widened from 180px so the nested Text/Image
     generation subs under Prompts have room without wrapping their count. */
  grid-template-columns: 204px 210px 240px;
  gap: 2px;
}
.sx-mega-col { min-width: 0; padding: 2px; }
.sx-mega-col--discover {
  border-left: 1px solid var(--sx-line);
  padding-left: 12px;
  margin-left: 8px;
}
.sx-mega-h {
  margin: 0;
  padding: 4px 10px 8px;
  font-family: var(--sx-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--sx-text-3);
}
/* Tighter icon tile for the dense type column (the shared tile is 32px). */
.sx-nav-menu--mega .sx-mega-type .sx-nav-menu-ic { width: 26px; height: 26px; border-radius: 7px; }
.sx-nav-menu--mega .sx-mega-type .sx-nav-menu-ic svg { width: 14px; height: 14px; }
.sx-nav .sx-mega-type {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--sx-text);
  transition: background 120ms ease;
}
a.sx-mega-type:hover,
a.sx-mega-type:focus-visible { background: var(--sx-surface); }
.sx-mega-type .lb {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sx-mega-type .ct {
  flex-shrink: 0;
  font-family: var(--sx-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  color: var(--sx-text-3);
  font-variant-numeric: tabular-nums;
}
.sx-mega-type[aria-current="page"] .lb { color: var(--sx-brand-3); }
/* Sub-categories nested under a live type (Prompts' Text generation /
   Image generation). Indented under the type row via a left rule, echoing
   .sx-mega-col--discover's own left-border-as-nesting pattern. */
.sx-mega-subs {
  display: grid;
  gap: 1px;
  margin: 1px 0 6px 25px;
  padding-left: 11px;
  border-left: 1px solid var(--sx-line);
}
.sx-nav .sx-mega-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 9px;
  border-radius: 7px;
  text-decoration: none;
  color: var(--sx-text-2);
  transition: background 120ms ease, color 120ms ease;
}
a.sx-mega-sub:hover,
a.sx-mega-sub:focus-visible { background: var(--sx-surface); color: var(--sx-text); }
.sx-mega-sub .lb {
  min-width: 0;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sx-mega-sub .ct {
  flex-shrink: 0;
  font-family: var(--sx-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 10.5px;
  color: var(--sx-text-3);
  font-variant-numeric: tabular-nums;
}
.sx-nav .sx-mega-type--soon { cursor: default; }
.sx-mega-type--soon .lb { color: var(--sx-text-2); font-weight: 500; }
.sx-mega-type--soon .sx-nav-menu-ic { opacity: 0.72; }
.sx-mega-type--soon .sx-nav-soon { margin-left: 0; }
.sx-nav .sx-mega-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--sx-text-2);
  transition: background 120ms ease, color 120ms ease;
}
a.sx-mega-cat:hover,
a.sx-mega-cat:focus-visible { background: var(--sx-surface); color: var(--sx-text); }
.sx-mega-cat .lb {
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sx-mega-cat .ct {
  flex-shrink: 0;
  font-family: var(--sx-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  color: var(--sx-text-3);
  font-variant-numeric: tabular-nums;
}
.sx-mega-cat[aria-current="page"] .lb { color: var(--sx-brand-3); }
.sx-nav .sx-mega-all {
  display: block;
  padding: 8px 10px;
  margin-top: 4px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sx-brand-3);
  text-decoration: none;
  transition: background 120ms ease;
}
.sx-mega-all:hover,
.sx-mega-all:focus-visible { background: var(--sx-surface); }
/* The Discover column reuses the rich link/tile styling; keep its rows on one
   line with the column heading's rhythm. */
.sx-nav-menu--mega .sx-nav-menu-link--rich { padding: 9px 10px; }

/* Mobile drawer: per-type hubs nested under Marketplace. */
.mobile-nav-subnav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 6px;
  padding-left: 12px;
  border-left: 1px solid var(--sx-line);
}
.mobile-nav-sublink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--sx-r-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--sx-text-2);
  text-decoration: none;
}
a.mobile-nav-sublink:hover,
a.mobile-nav-sublink:focus-visible { background: var(--sx-surface-2); color: var(--sx-text); }
.mobile-nav-sublink svg { opacity: 0.6; }
.mobile-nav-sublink--soon { color: var(--sx-text-3); cursor: default; }
/* Sub-categories nested one level deeper (Prompts' Text generation /
   Image generation), inside the same .mobile-nav-subnav left rule. */
.mobile-nav-sublink--nested { padding-left: 22px; font-size: 13px; }

/* ==== bundled from: css/sx-eyebrow.css ==== */
/* Unified page eyebrow / wayfinder — ported from Sigrix_new SxEyebrow.
   Renders: section › page · metric. Tokens are defined globally in base.html
   (theme-aware), so the section-link color flips light/dark automatically. */

/* ── Where the wayfinder sits ─────────────────────────────────────────────
   The path used to land somewhere different on every page, because nobody
   owned its position: each hero brought its own top padding (28px on the
   homepage, 56px on /marketplace, 96px on /about — eight distinct values,
   32px to 100px measured below the top bar) and each call site passed its
   own inline `margin-bottom` (12/16/18/20px, or none at all, which the
   title's own margin-top then topped up to anywhere from 5px to 40px).

   Both distances are tokens now, and this file owns them:

     --sx-eb-offset   top bar → wayfinder
     --sx-eb-gap      wayfinder → page title

   Call sites pass no spacing at all. Retune the site-wide placement by
   editing these two values — there is nowhere else to look.

   Kept out of base.html's :root deliberately: the wayfinder's geometry
   belongs with the wayfinder, and this sheet ships on every page via the
   head bundle (see src/services/css_bundles.py). */
:root {
  --sx-eb-offset: 56px;
  --sx-eb-gap: 16px;
}
@media (max-width: 900px) {
  :root {
    --sx-eb-offset: 32px;
    --sx-eb-gap: 14px;
  }
}

.sx-eb {
  /* Block-level, not inline-flex: as an atomic inline the eyebrow sat in a
     line box and picked up ~4px of baseline slop that varied with each
     hero's line-height, so the same margin produced a different gap per
     page. As a block box the two tokens above are exact. Every call site
     renders it left-aligned and alone on its line, so the full-width box
     is not visible. */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 4px;
  margin: 0 0 var(--sx-eb-gap);
  font-family: var(--sx-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.4;
}

/* Whatever follows the wayfinder — usually the page's H1 — starts exactly
   --sx-eb-gap below it. Without this the title's own margin-top collapses
   with the eyebrow's and quietly decides the gap instead of the token. The
   page sheets that used to set such a margin (.lrn-hero h1, .faq-hero h1,
   .sx-meet-head h1, .sx .legal-title, .art-cat) had it removed rather than
   overridden — they all load after this file and would otherwise win the
   (0,1,0) tie — so nothing here has to win a specificity fight. */
.sx-eb + * { margin-top: 0; }

/* The page band that leads with the wayfinder hands its top padding over,
   so the crumb lands on the same line whether the hero was built at 28px or
   96px. Scoped with :has() rather than a class on each hero so a new page
   inherits the placement by using the macro, with nothing else to remember.

   Specificity note — same cascade problem the `.sx a.sx-eb-s` bump below
   solves: these page sheets load AFTER this file (each page's extra_head),
   and the strongest of them reaches (0,2,1) — `.home-main > section:first-
   child` on the homepage, `.sx .mx-hero` on /about, `.hub-update-sx
   .post-hero` in the hub post's inline <style>. The `html body` prefix
   takes this rule to (0,2,2) so it wins on merit, not on load order. */
html body :is(
  .sx-hero, .sl-hero, .mp-hero, .mx-hero, .lrn-hero, .faq-hero, .hub-hero,
  .art-header, .post-hero, .legal-header, .sf-page, .sh-page
):has(.sx-eb) {
  padding-top: var(--sx-eb-offset);
}
/* The `.sx a` prefix bumps specificity to (0,2,1) so the brand-colored
   section link beats `.sx a { color: inherit }` from sx-home.css, which
   loads after this file via the page's extra_head. Without it the link
   renders in inherited (dark) body text instead of brand blue. */
.sx a.sx-eb-s,
a.sx-eb-s {
  color: var(--sx-brand-3);
  text-decoration: none;
  transition: color 120ms;
}
a.sx-eb-s:hover { text-decoration: underline; text-underline-offset: 3px; }
.sx-eb-s--static { color: var(--sx-text-3); }
/* The homepage's "current section" label (section="Sigrix marketplace" with no
   href) renders as a static span. The Site - Home prototype colors it brand
   blue in light theme via `.sx[data-theme="light"] .sx-eb-s`; mirror that here
   (data-theme lives on <html> on the platform). Dark theme keeps it muted, as
   the prototype does. */
[data-theme="light"] .sx-eb-s--static { color: var(--sx-brand-3); }
.sx-eb-chev { color: var(--sx-mute); padding: 0 8px; }
.sx-eb-p { color: var(--sx-text-2); }
.sx-eb-met {
  font-family: var(--sx-font-mono);
  color: var(--sx-text-3);
  font-weight: 500;
  letter-spacing: 0;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--sx-line-2);
  white-space: nowrap;
}
@media (max-width: 560px) {
  .sx-eb-met { margin-left: 0; padding-left: 0; border-left: 0; flex-basis: 100%; }
}
/* A metric that cites a source (the home hero's platform version links its
   release note). Colour is inherited from .sx-eb-met on purpose, so the link
   follows the metric's muted ink in both themes and on the pages that carry
   no `.sx` scope; only the affordance is declared. The transparent resting
   border keeps hover from shifting the row. */
.sx-eb-met-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.sx-eb-met-link:hover,
.sx-eb-met-link:focus-visible {
  color: var(--sx-text-2);
  border-bottom-color: currentColor;
}

/* Shared marketplace back-link breadcrumb — restyled to the wayfinder look while
   keeping its richer path (Marketplace / Type / @seller). Lives here (global) so
   it renders consistently on product/assistant/agent detail pages. */
.marketplace-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  row-gap: 4px;
  font-family: var(--sx-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.4;
  color: var(--sx-text-2);
  text-decoration: none;
}
/* Same specificity bump as .sx-eb-s above — keeps the back-link's section
   links brand blue on `.sx` detail pages instead of inheriting body text. */
.sx .marketplace-back-link a,
.marketplace-back-link a {
  color: var(--sx-brand-3);
  text-decoration: none;
  transition: color 120ms;
}
.marketplace-back-link a:hover,
.marketplace-back-link a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.marketplace-back-link span[aria-hidden] { font-size: 0; }
.marketplace-back-link span[aria-hidden]::before {
  content: "›";
  font-size: 13px;
  color: var(--sx-mute);
}

/* ==== bundled from: css/sx-footer.css ==== */
/* ---------------------------------------------------------------------------
 * sx-footer.css
 * Sigrix-shell site footer chrome (components/sx_footer.html).
 *
 * These rules live here — and are loaded globally from base.html — rather
 * than in css/sx-home.css so EVERY page that renders the footer gets it
 * styled, including the moderator/admin shells and product/detail pages
 * that never opt into sx-home.css. This mirrors css/sx-nav-actions.css,
 * which holds the global top-bar chrome for the same reason.
 *
 * The footer wraps its content in `.sx-container`; that class only ships
 * with css/sx-home.css, so the `.sx-footer .sx-container` rule below
 * restates the same box model (max-width / centring / gutter) so the
 * footer stays centred on pages that don't load it. Likewise `.sx-footer a`
 * sets `text-decoration: none` directly instead of leaning on the `.sx a`
 * reset that only ships with sx-home.css.
 * --------------------------------------------------------------------------- */

.sx-footer {
  padding: 64px 0 32px;
  border-top: 1px solid var(--sx-line);
  margin-top: 80px;
}
.sx-footer .sx-container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.sx-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 32px; }
.sx-footer h4 { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sx-text-3); font-weight: 600; margin-bottom: 14px; }
.sx-footer h4 a { color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: none; }
.sx-footer h4 a:hover { color: var(--sx-text); }
.sx-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.sx-footer a { color: var(--sx-text-2); font-size: 14px; text-decoration: none; }
.sx-footer a:hover { color: var(--sx-text); }
.sx-footer-bottom {
  margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--sx-line);
  display: flex; justify-content: space-between; align-items: center;
  color: var(--sx-text-3); font-size: 12px;
  flex-wrap: wrap; gap: 12px;
}
.sx-footer-bottom code { font-family: var(--sx-font-mono); font-size: 12px; }

/* Social row — sits under the brand description in column 1 of the footer grid */
.sx-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.sx-social a {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sx-text-2);
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.sx-social a:hover {
  color: var(--sx-brand-ink);
  background: var(--sx-brand);
  box-shadow: 0 0 0 1px rgba(91, 124, 255, 0.6) inset, 0 1px 0 rgba(255, 255, 255, 0.25) inset;
  transform: translateY(-1px);
}
.sx-social a:focus-visible {
  outline: 2px solid var(--sx-brand);
  outline-offset: 2px;
}
.sx-social svg { width: 15px; height: 15px; display: block; }
[data-theme="dark"] .sx-social a { color: var(--sx-text-3); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .sx-footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .sx-footer-grid { grid-template-columns: 1fr; }
  .sx-footer .sx-container { padding: 0 20px; }
}