:root {
  color-scheme: var(--theme-scheme, dark);
  /* Dark glass, Bitcoin Connect-inspired: deep blue-black night, electric-blue
     primary (lightning), bitcoin-orange energy accent. Panels are translucent
     glass floating over an aurora of orange + blue glow with fine noise. */
  --bg: #070810;
  --panel: #12151f;
  --ink: #eaeef6;
  --muted: #98a2b6;
  --line: rgba(255, 255, 255, 0.10);
  --accent: #3d9bff;
  --accent-2: #f7931a;
  --danger: #ff6b6b;
  --success: #48c78e;
  --on-accent: #04101f;
  --on-accent-2: #180d00;
  --surface: color-mix(in srgb, var(--panel) 92%, var(--bg));
  --surface-strong: color-mix(in srgb, var(--panel) 76%, var(--bg));
  --surface-muted: color-mix(in srgb, var(--panel) 56%, var(--bg));
  --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--panel));
  --accent-2-soft: color-mix(in srgb, var(--accent-2) 18%, var(--panel));
  --danger-soft: color-mix(in srgb, var(--danger) 16%, var(--panel));
  --glass: color-mix(in srgb, var(--panel) 56%, transparent);
  --glass-strong: color-mix(in srgb, var(--panel) 80%, transparent);
  --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012));
  --hairline-top: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  --shadow-up: 0 -14px 44px rgba(0, 0, 0, 0.5);
  --scrim: color-mix(in srgb, black 68%, transparent);
  --font-main: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius: 14px;
  --density-scale: 1;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-main);
  overflow-x: hidden;
}

/* Slowly drifting aurora — the colored atmosphere behind the glass UI. */
body::before {
  content: "";
  position: fixed;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 42% at 18% 22%, color-mix(in srgb, var(--accent) 36%, transparent), transparent 70%),
    radial-gradient(36% 40% at 84% 16%, color-mix(in srgb, var(--accent-2) 30%, transparent), transparent 68%),
    radial-gradient(48% 50% at 55% 96%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 72%);
  animation: auroraDrift 34s ease-in-out infinite alternate;
  will-change: transform;
}

/* Fine film-grain noise layered over the aurora. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.15;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes auroraDrift {
  0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  50% { transform: translate3d(2.5%, -2%, 0) scale(1.08) rotate(4deg); }
  100% { transform: translate3d(-2.5%, 2.5%, 0) scale(1.05) rotate(-3deg); }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

body.modalOpen {
  overflow: hidden;
}

/* Ensure [hidden] always wins over component display rules (e.g. #sellerNav
   is .sidebarGroup{display:flex}, which otherwise overrides the hidden attr). */
[hidden] {
  display: none !important;
}

button,
input,
select,
textarea {
  font: inherit;
}

.devBanner {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 8px clamp(18px, 4vw, 44px);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--on-accent-2);
  background: repeating-linear-gradient(
    45deg,
    var(--accent-2),
    var(--accent-2) 12px,
    color-mix(in srgb, var(--accent-2) 76%, var(--panel)) 12px,
    color-mix(in srgb, var(--accent-2) 76%, var(--panel)) 24px
  );
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
}

.devBanner[hidden] {
  display: none;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px clamp(18px, 4vw, 40px);
  background: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.brand {
  color: inherit;
  text-decoration: none;
  flex: 0 0 auto;
}

.brandTitle { margin: 0; line-height: 0; }
.brandLogo {
  display: block;
  height: 30px;
  width: auto;
  max-width: 100%;
}

.topbarActions { flex: 0 0 auto; }

.headerSearch {
  flex: 0 0 auto;
  width: clamp(190px, 30vw, 330px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-strong);
}
.headerSearch:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.headerSearchIcon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--muted);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.headerSearchInput {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  outline: none;
  padding: 0;
  font-size: .88rem;
}
.headerSearchInput::placeholder { color: var(--muted); }
.headerSearchFilters {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: var(--muted);
}
.headerSearchFilters:hover,
.headerSearchFilters.isActive { color: var(--accent); background: transparent; }
.headerSearchFilters .navIcon { width: 19px; height: 19px; color: inherit; }

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

.sessionIdentityButton.isConnected {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 8px;
  min-width: 168px;
  max-width: 250px;
  padding: 6px 10px;
  text-align: left;
}

.sessionIdentityAvatar {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--panel) 50%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--panel) 14%, transparent);
  font-size: .78rem;
  font-weight: 850;
}

.sessionIdentityAvatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sessionIdentityName,
.sessionIdentityPubkey {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sessionIdentityName { font-size: .78rem; }
.sessionIdentityPubkey { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .65rem; opacity: .8; }

.topNav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.topNav a {
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 8px 10px;
  color: var(--muted);
  font-weight: 800;
  text-decoration: none;
}

.topNav a:hover,
.topNav a[aria-current="page"] {
  border-color: var(--line);
  background: var(--panel);
  color: var(--accent);
}

.themePickerLabel {
  max-width: 260px;
  min-width: 180px;
  margin: 0;
}

.storeThemeEditor {
  margin: 0 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface);
}

.storeThemeEditor legend {
  padding: 0 5px;
  color: var(--ink);
  font-size: .84rem;
  font-weight: 800;
}

.storeThemeEditor > .mutedCopy {
  margin: 0 0 12px;
}

.themeColorGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
}

.themeColorGrid label {
  display: grid;
  gap: 5px;
  margin: 0;
  color: var(--muted);
}

.themeColorGrid input[type="color"] {
  width: 100%;
  height: 36px;
  margin: 0;
  padding: 3px;
  cursor: pointer;
}

.themeContrast {
  min-height: 1.3em;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}

.themeContrast[data-state="ok"] { color: var(--accent); }
.themeContrast[data-state="error"] { color: var(--danger); }

.topbar h1,
.panel h2 {
  margin: 0;
  letter-spacing: 0;
}

.topbar h1 {
  font-size: 1.7rem;
  line-height: 1;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}

button {
  border: 1px solid color-mix(in srgb, var(--accent) 86%, var(--ink));
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  padding: 9px 13px;
  padding: calc(9px * var(--density-scale)) calc(13px * var(--density-scale));
  font-weight: 750;
  cursor: pointer;
}

button:hover { filter: brightness(1.12); }

button:disabled {
  cursor: not-allowed;
  opacity: .62;
}

.iconButton {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  background: var(--panel);
  color: var(--ink);
}

button[type="button"]:not(#connectNostrBtn) {
  background: color-mix(in srgb, var(--panel) 62%, transparent);
  border-color: var(--line);
  color: color-mix(in srgb, var(--accent) 88%, var(--ink));
}
button[type="button"]:not(#connectNostrBtn):hover {
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}

.buttonLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--accent) 86%, var(--ink));
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  padding: 9px 13px;
  font-weight: 750;
  text-decoration: none;
}

/* Dev-only simulate-payment button: dashed accent2 so it never reads as a real
   pay action. Hidden entirely in production via FEATURE_DEV_CHECKOUT. */
.devCheckoutBtn {
  border: 1px dashed var(--accent2);
  background: color-mix(in srgb, var(--accent2) 14%, transparent);
  color: var(--accent2);
  border-radius: var(--radius);
  padding: 9px 13px;
  font-weight: 700;
}

:root {
  --topbar-h: 84px;
  --sidebar-width: 232px;
}

.appShell {
  display: flex;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

.sidebar {
  position: sticky;
  top: var(--topbar-h);
  flex: 0 0 auto;
  width: max-content;
  min-width: 148px;
  max-width: 220px;
  max-height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  padding: 20px 12px;
  background: transparent;
  box-sizing: border-box;
}

.sidebarNav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebarGroup {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.sidebarGroupLabel {
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  padding: 2px 10px 4px;
}

.sidebarLink {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: .92rem;
}

.sidebarLink:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.sidebarLink[aria-current="page"] {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent);
}
.sidebarLink[aria-current="page"] .navIcon { color: var(--accent); }

.navIcon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sidebarLink .navIcon { color: color-mix(in srgb, var(--ink) 74%, var(--muted)); }
.iconButton .navIcon { width: 22px; height: 22px; color: var(--ink); }

.sidebarFootnote {
  margin: 16px 12px 0;
  font-size: .75rem;
  color: var(--muted);
}

body.sidebarCollapsed .sidebar {
  display: none;
}

.sidebarToggle {
  font-size: 1.15rem;
}

.sellButton {
  font-weight: 700;
}

.workspace {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 1200px;
  margin: 24px auto 48px;
  padding: 0 clamp(18px, 2.5vw, 36px);
  box-sizing: border-box;
}

.sidebarBackdrop {
  display: none;
}

.mobileTabBar { display: none; }

@media (max-width: 860px) {
  /* Mobile navigation is a fixed glass bottom tab bar, not a sidebar drawer. */
  .sidebar,
  .sidebarBackdrop,
  .sidebarToggle,
  .topbarActions { display: none !important; }

  .topbar { flex-wrap: wrap; justify-content: center; padding: 12px 14px; row-gap: 10px; }
  .headerSearch { flex: 1 1 100%; width: 100%; max-width: none; margin: 0; order: 3; }

  .workspace {
    width: 100%;
    margin: 14px auto;
    padding: 0 14px calc(94px + env(safe-area-inset-bottom, 0px));
  }

  .marketplaceHero { grid-template-columns: 1fr; gap: 16px; }
  .marketplaceToolbar { grid-template-columns: 1fr; }

  .mobileTabBar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 35;
    padding: 9px 8px calc(9px + env(safe-area-inset-bottom, 0px));
    background: var(--glass-strong);
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    border-top: 1px solid var(--line);
    box-shadow: var(--shadow-up);
  }
  .mobileTab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: 0;
    padding: 4px 2px;
    min-height: 46px;
    color: var(--muted);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
  }
  .mobileTab .navIcon { width: 23px; height: 23px; color: inherit; }
  .mobileTab[aria-current="page"] { color: var(--accent); }
  .mobileTabSell { color: var(--ink); }
  .mobileSellDot {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-top: -18px;
    border-radius: 16px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 82%, white), var(--accent));
    color: var(--on-accent);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 50%, transparent);
  }
  .mobileSellDot .navIcon { width: 24px; height: 24px; stroke-width: 2.3; color: var(--on-accent); }

  body.modalOpen .mobileTabBar { display: none; }
}

body:not(.developerMode) .devOnly {
  display: none !important;
}

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

.dashboardTabs {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 2px;
}

.routePanel[data-dashboard-section="overview"] {
  grid-column: 1 / -1;
}

.dashboardTabs a {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 11px;
  color: var(--muted);
  background: var(--panel);
  font-size: .84rem;
  font-weight: 800;
  text-decoration: none;
}

.dashboardTabs a[aria-current="page"] {
  border-color: color-mix(in srgb, var(--accent) 86%, var(--ink));
  color: var(--on-accent);
  background: var(--accent);
}

.panel {
  background: var(--glass-sheen), var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow), var(--hairline-top);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  padding: calc(18px * var(--density-scale));
}

.intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 24px;
  align-items: end;
  margin-bottom: 18px;
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 10px 0 18px;
}

.intro p {
  margin: 10px 0 0;
  max-width: 780px;
  color: var(--muted);
  line-height: 1.55;
}

.statusGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.statusGrid div {
  padding: 12px;
  border-right: 1px solid var(--line);
  background: var(--surface);
}

.statusGrid div:last-child { border-right: 0; }
.statusGrid span {
  display: block;
  color: var(--muted);
  font-size: .74rem;
}
.statusGrid strong { display: block; margin-top: 3px; }

.storefrontStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.storefrontStats div {
  padding: 12px;
  border-right: 1px solid var(--line);
  background: var(--surface);
}

.storefrontStats div:last-child { border-right: 0; }
.storefrontStats span {
  display: block;
  color: var(--muted);
  font-size: .74rem;
}
.storefrontStats strong { display: block; margin-top: 3px; }

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

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

.sectionHeader h2 {
  font-size: 1rem;
}

.pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 9px;
  color: var(--muted);
  background: var(--surface);
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
}

.formPanel {
  grid-row: auto;
}

label {
  display: block;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 750;
}

input,
select,
textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  padding: 9px 10px;
}

textarea {
  resize: vertical;
  line-height: 1.45;
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px;
  margin: 0 0 14px;
  background: var(--surface);
}

.segmented label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--ink);
  cursor: pointer;
}

.segmented label:has(input:checked) {
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.bundleComponentsField {
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.bundleComponentsField legend {
  padding: 0 4px;
  color: var(--ink);
  font-size: .86rem;
  font-weight: 800;
}

.bundleComponentsField > .mutedCopy {
  margin: 0 0 10px;
}

.bundleComponentsList {
  display: grid;
  gap: 8px;
}

.bundleComponentOption {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
}

.bundleComponentOption:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.bundleComponentOption input {
  display: inline-block;
  width: auto;
  margin: 0;
}

.bundleComponentOption small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 650;
}

.storefrontThemePreview { margin-top: 14px; color: var(--ink); }
.themePreviewLabel { margin: 0 0 7px; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.themePreviewStore { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.themePreviewBanner { display: block; width: 100%; height: 76px; object-fit: cover; background: var(--surface-strong); }
.themePreviewIdentity { display: flex; align-items: center; gap: 9px; padding: 12px; }
.themePreviewIdentity > div, .themePreviewProduct > div { min-width: 0; }
.themePreviewIdentity strong, .themePreviewIdentity span, .themePreviewProduct strong, .themePreviewProduct span, .themePreviewProduct b { display: block; }
.themePreviewIdentity span, .themePreviewProduct span { color: var(--muted); font-size: .74rem; }
.themePreviewAvatar { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; object-fit: cover; background: var(--accent-soft); }
.themePreviewAvatarFallback { display: grid; place-items: center; color: var(--on-accent); background: var(--accent); font-weight: 900; }
.themePreviewProduct { display: grid; grid-template-columns: 62px 1fr; gap: 10px; margin: 0 12px 12px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.themePreviewProductImage { min-height: 62px; border-radius: calc(var(--radius) * .75); background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.themePreviewProduct b { margin-top: 5px; color: var(--accent); font-size: .78rem; }
.themePreviewStore button { width: calc(100% - 24px); margin: 0 12px 12px; pointer-events: none; }

.fieldError {
  display: block;
  min-height: 1.2em;
  margin-top: 4px;
  color: var(--danger);
  font-size: .72rem;
  font-weight: 700;
}

.formError {
  min-height: 1.35em;
  margin: 2px 0 10px;
  color: var(--danger);
  font-size: .78rem;
  font-weight: 750;
}

.publishStatus {
  min-height: 1.4em;
  margin-top: 10px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 750;
}

.publishStatus[data-state="ok"] { color: var(--accent); }
.publishStatus[data-state="error"] { color: var(--danger); }

.publishCelebration {
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
  overflow: hidden;
}

.publishSuccessPulse {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  padding: 12px 18px;
  border: 2px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 800;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent);
  animation: publishSuccessPulse 1.1s ease-out both;
}

.publishConfettiPiece {
  --angle: calc(var(--piece) * 12deg);
  position: absolute;
  left: 50%;
  top: 42%;
  width: 9px;
  height: 16px;
  border-radius: 2px;
  background: hsl(calc(var(--piece) * 23deg), 82%, 54%);
  transform: rotate(var(--angle));
  animation: publishConfetti 2s cubic-bezier(.18, .72, .3, 1) both;
  animation-delay: calc(var(--piece) * -24ms);
}

@keyframes publishSuccessPulse {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
  30% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 0 0 18px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.12); }
}

@keyframes publishConfetti {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--angle)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x) * 1vw), calc(-50% + 58vh)) rotate(calc(var(--angle) + 540deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .publishSuccessPulse,
  .publishConfettiPiece { animation: none; }
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.sellerOnboarding {
  display: grid;
  gap: 12px;
  margin: 14px 0;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-strong));
}

.sellerOnboarding h3,
.sellerOnboarding p { margin: 0; }

.sellerSetupSteps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 750;
}

.sellerSetupSteps li { padding: 5px 8px; border: 1px solid var(--line); }
.sellerSetupSteps .isCurrent { color: var(--ink); border-color: var(--accent); background: var(--surface-strong); }
.sellerSetupSteps .isDone { color: var(--accent); }

.codeBlock {
  min-height: 340px;
  max-height: 520px;
  overflow: auto;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 72%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--ink) 88%, var(--bg));
  color: color-mix(in srgb, var(--panel) 88%, var(--ink));
  padding: 14px;
  font-size: .78rem;
  line-height: 1.45;
}

.miniCodeBlock {
  min-height: 120px;
  max-height: 260px;
  overflow: auto;
  margin: 12px 0 0;
  border: 1px solid color-mix(in srgb, var(--ink) 72%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--ink) 88%, var(--bg));
  color: color-mix(in srgb, var(--panel) 88%, var(--ink));
  padding: 12px;
  font-size: .74rem;
  line-height: 1.45;
}

.splitList {
  display: grid;
  gap: 10px;
}

.splitItem {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  background: var(--surface);
}

.splitItem span {
  color: var(--muted);
}

.libraryEmpty,
.libraryItem {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 14px;
  color: var(--muted);
}

.libraryItem {
  border-style: solid;
  color: var(--ink);
  background: var(--surface);
}

.libraryItem p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: .84rem;
}

.libraryActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

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

.checkoutSurface {
  width: min(640px, calc(100vw - 32px));
}

.checkoutTestNotice {
  border: 1px solid color-mix(in srgb, var(--accent-2) 55%, var(--line));
  background: var(--accent-2-soft);
  padding: 11px 12px;
}
.checkoutTestNotice p { margin: 4px 0 0; color: var(--ink); font-size: .84rem; }

.checkoutModalBody {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.checkoutSummary,
.checkoutLegs {
  display: grid;
  gap: 8px;
}

.checkoutSummary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.checkoutSummary > div,
.checkoutLeg {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
}

.checkoutSummary span,
.checkoutLeg span,
.checkoutInvoice span {
  display: block;
  color: var(--muted);
  font-size: .76rem;
}

.checkoutSummary strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

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

.checkoutLeg em {
  color: var(--muted);
  font-size: .78rem;
  font-style: normal;
}

.checkoutInvoice textarea {
  width: 100%;
  min-height: 92px;
  margin-top: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .74rem;
}

/* One-click pay-all button: the primary checkout action, full-width and larger. */
.detailActions button.primaryAction {
  flex: 1 1 100%;
  font-size: 1rem;
  padding: calc(12px * var(--density-scale)) calc(16px * var(--density-scale));
}

/* Manual per-leg controls are a secondary fallback, tucked under a disclosure. */
.checkoutManual {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.checkoutManual > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 650;
  list-style-position: inside;
}

.checkoutManual .detailActions button {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line);
  font-weight: 650;
}

.checkoutExternal {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
}

.checkoutExternal input {
  width: 100%;
  margin-top: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .74rem;
}

.importPanel {
  grid-column: 1 / -1;
}

.importPreview {
  overflow: auto;
  margin-top: 12px;
}

.importRowActions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.columnMappingPanel {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.importDefaultsPanel {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.importDefaultsPanel legend {
  padding: 0 4px;
  font-weight: 700;
}

.importDefaultsPanel > .mutedCopy {
  margin: 0 0 12px;
}

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

.mappingHeader span {
  color: var(--muted);
  font-size: .82rem;
}

.mappingGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.mappingGrid label {
  margin: 0;
}

.mappingGrid label.hasCsvData {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.mappingSource {
  display: block;
  margin-top: 2px;
  color: var(--accent);
  font-size: .74rem;
  font-weight: 700;
}

.importTable {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: .82rem;
}

.importTable th,
.importTable td {
  border-bottom: 1px solid var(--line);
  padding: 9px 8px;
  text-align: left;
  vertical-align: top;
}

.importTable th {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.importTable tr[data-import-valid="false"] td {
  color: var(--danger);
}

.importSigilPreview {
  display: block;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: var(--surface-muted);
  object-fit: contain;
}

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

.storefrontPanel {
  grid-column: 1 / -1;
}

.storefrontGrid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  align-items: stretch;
}

.storefrontManagerList {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.storefrontManagerItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  padding: 12px;
  background: var(--surface-strong);
}

.storefrontManagerItem p,
.mutedCopy {
  margin: 4px 0 0;
  color: var(--muted);
}

.storefrontManagerActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.storeDeleteBtn { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.storeDeleteBtn.isDanger { background: var(--danger); color: var(--on-accent); border-color: var(--danger); }

.marketplaceToolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 190px);
  gap: 12px;
  align-items: end;
  margin-bottom: 10px;
}

.marketplaceSearch {
  margin: 0;
  max-width: none;
}

.marketplaceSearch span,
.marketplaceSort span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.marketplaceSort {
  margin: 0;
}

.marketplaceSort select {
  min-height: 42px;
  border-radius: var(--radius);
}

.marketplaceSearch input {
  width: 100%;
  min-height: 42px;
  border-radius: var(--radius);
  background: var(--surface);
}

.marketplaceFilters {
  margin: 0 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.marketplaceFilters summary {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.marketplaceFilters summary::-webkit-details-marker { display: none; }
.marketplaceFilters summary::after { content: '+'; margin-left: auto; color: var(--accent); font-size: 1.1rem; }
.marketplaceFilters[open] summary { border-bottom: 1px solid var(--line); color: var(--ink); }
.marketplaceFilters[open] summary::after { content: '−'; }

.marketplaceFilterContent {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.marketplaceTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}

.marketplaceTags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 2px;
}

.marketplaceHero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  padding: clamp(22px, 4vw, 38px);
  background:
    linear-gradient(130deg, var(--accent-soft), transparent 58%),
    var(--panel);
}

.marketplaceHero h2 { max-width: 18ch; margin: 4px 0 8px; font-size: clamp(1.7rem, 3vw, 2.45rem); letter-spacing: -.035em; }
.marketplaceHero > div > p:last-child { max-width: 56ch; margin: 0; color: var(--muted); line-height: 1.55; }

.marketplaceTags:empty {
  display: none;
}

.marketplaceTagChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 2px 10px;
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel) !important;
  color: var(--muted) !important;
  cursor: pointer;
  white-space: nowrap;
}

.marketplaceTagChip[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent) !important;
  color: var(--on-accent) !important;
}

.marketplaceTagChip span {
  font-size: 10px;
  opacity: 0.75;
}

.marketplaceTagChip--clear {
  font-style: italic;
}

.marketplaceTab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  border-color: var(--line);
  background: var(--panel) !important;
  color: var(--muted) !important;
  white-space: nowrap;
}

.marketplaceTab[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 86%, var(--ink));
  background: var(--accent) !important;
  color: var(--on-accent) !important;
}

.marketplaceTab strong {
  display: inline-grid;
  min-width: 24px;
  min-height: 24px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  font-size: .72rem;
}

.marketplaceTab[aria-pressed="true"] strong {
  background: color-mix(in srgb, var(--panel) 20%, transparent);
}

.marketplaceEmpty {
  grid-column: 1 / -1;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  display: grid;
  align-content: center;
  min-height: 180px;
  padding: 26px;
  background:
    linear-gradient(135deg, var(--accent-soft), var(--accent-2-soft)),
    var(--surface);
  color: var(--muted);
}

.marketplaceEmpty strong {
  display: block;
  color: var(--ink);
  font-size: 1rem;
}

.marketplaceEmpty p {
  margin: 6px 0 0;
}

.marketplaceEmpty button {
  width: fit-content;
  margin-top: 16px;
}

.storefrontBanner {
  min-height: 0;
  margin: -18px -18px 0;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--surface-strong);
}

.storefrontBannerImage {
  display: block;
  width: 100%;
  height: clamp(92px, 12vw, 132px);
  object-fit: cover;
}

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

.storefrontHeroContent.hasBanner {
  margin-top: 0;
}

.storefrontHeroContent.isCompact {
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}

.storefrontIdentity h2 {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 2rem);
}

.storefrontSummary {
  margin: 6px 0 0;
  color: var(--muted);
}

.storefrontPubkey {
  margin: 3px 0 0;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem;
}

.storefrontAvatar {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
  font-size: 1.35rem;
  font-weight: 850;
  overflow: hidden;
}

.storefrontAvatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.storefrontBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.storefrontBadge {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 750;
}

.storefrontShareButton {
  min-height: 40px;
  white-space: nowrap;
}

.storefrontHeaderActions {
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
}

.storefrontEmpty {
  grid-column: 1 / -1;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 22px;
  background: var(--surface);
  color: var(--muted);
}

.storefrontEmpty strong {
  color: var(--ink);
}

.storefrontEmpty p {
  margin: 6px 0 0;
}

.productCard,
.listingItem {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.productCard {
  display: grid;
  min-width: 0;
}

.productCardMedia {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: var(--surface-strong);
  color: var(--ink);
}

.productCardMedia img,
.productCardPlaceholder {
  display: block;
  width: 100%;
  height: 100%;
}

.productCardMedia img {
  object-fit: cover;
}

.productCardMedia img.urbitSigilImage,
.productDetailMedia img.urbitSigilImage {
  padding: 16px;
  object-fit: contain;
  background: var(--surface-muted);
}

.productCardPlaceholder {
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, var(--accent-soft), var(--accent-2-soft)),
    var(--surface-strong);
  color: var(--accent);
  font-size: 1.4rem;
  font-weight: 850;
}

.productCardBody,
.listingItem {
  padding: 12px;
}

.productCardTopline,
.productCardMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.productCardTopline {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.listingVisibility {
  border-radius: 999px;
  padding: 4px 7px;
  font-size: .66rem;
  line-height: 1;
}

.listingVisibility.is-public {
  background: var(--accent-soft);
  color: var(--accent);
}

.listingVisibility.is-draft {
  background: var(--accent-2-soft);
  color: var(--accent-2);
}

.listingVisibility.is-owned {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  color: var(--accent);
}

.listingAssignment {
  border-radius: 999px;
  padding: 4px 7px;
  font-size: .66rem;
  line-height: 1;
}

.listingAssignment.is-unassigned {
  background: var(--danger-soft);
  color: var(--danger);
}

.sellerListingsGroups {
  display: grid;
  gap: 20px;
}

.listingAssignmentControls {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.listingAssignmentControls label { margin: 0; }
.listingAssignmentControls select { min-width: 220px; }
.productCardSelect { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; color: var(--muted); }
.productCardSelect input { width: auto; margin: 0; }

.listingAssignmentGroup {
  display: grid;
  gap: 10px;
}

.listingAssignmentGroup > div:first-child {
  padding: 12px 14px;
  border-left: 4px solid var(--line);
  background: var(--surface);
}

.listingAssignmentGroup h3,
.listingAssignmentGroup p { margin: 0; }
.listingAssignmentGroup p { margin-top: 4px; color: var(--muted); font-size: .84rem; }
.listingGroupSelect { margin-top: 10px; font-size: .78rem; }
.listingAssignmentGroup.isAssigned > div:first-child { border-left-color: var(--accent); }
.listingAssignmentGroup.isUnassigned > div:first-child { border-left-color: var(--danger); }

.productCard h3 {
  margin: 8px 0 0;
  font-size: .98rem;
  line-height: 1.25;
}

.productCard p {
  min-height: 2.6em;
  margin: 7px 0 10px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.35;
}

.productCardMeta {
  color: var(--muted);
  font-size: .78rem;
}

.productCardMeta a {
  overflow: hidden;
  color: var(--accent);
  font-weight: 800;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.productCardMeta strong {
  color: var(--ink);
  font-size: .9rem;
}

.productCardAction {
  width: 100%;
}

.productCardActions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.productCardLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  color: var(--accent);
  background: var(--panel);
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  appearance: none;
  cursor: pointer;
}

.listingItem strong {
  display: block;
}

.listingItem p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: .84rem;
}

.listingItem button {
  margin-top: 10px;
}

.detailPanel {
  grid-column: 1 / -1;
}

.detailEmpty {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 14px;
  color: var(--muted);
}

.detailView {
  display: grid;
  gap: 14px;
}

.productDetailModal {
  display: grid;
  grid-template-columns: minmax(240px, .75fr) minmax(0, 1.25fr);
  gap: 18px;
  align-items: stretch;
}

.productDetailMedia {
  min-height: 320px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-strong);
}

.productDetailMedia img,
.productDetailPlaceholder {
  width: 100%;
  height: 100%;
}

.productDetailMedia img {
  display: block;
  object-fit: cover;
}

.productDetailPlaceholder {
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, var(--accent-soft), var(--accent-2-soft)),
    var(--surface-strong);
  color: var(--accent);
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 850;
}

.productDetailContent {
  min-width: 0;
}

.productDetailTopline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.detailView h3,
.productDetailContent h3 {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 2.25rem);
  line-height: 1.08;
}

.productDetailSummary {
  margin: 10px 0 16px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.45;
}

.productDetailStats,
.detailMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.productDetailStats div {
  min-width: 130px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface);
}

.productDetailStats span,
.productDetailAddress span {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.productDetailStats strong {
  display: block;
  margin-top: 3px;
}

.productDetailSellerLink {
  color: var(--accent);
  text-decoration: none;
}

.productDetailSellerLink:hover {
  text-decoration: underline;
}

.detailMeta span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 9px;
  color: var(--muted);
  background: var(--surface);
  font-size: .74rem;
  font-weight: 700;
}

.productDetailDescription {
  margin-top: 14px;
  color: var(--ink);
  line-height: 1.55;
}

.productDetailDescription p {
  margin: 0 0 9px;
}

.productDetailNotice {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface);
}

.productDetailNotice strong {
  display: block;
}

.productDetailNotice p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.4;
}

.productDetailAddress {
  min-width: 0;
  margin-top: 12px;
}

.productDetailAddress code {
  display: block;
  overflow: auto;
  margin-top: 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
  background: var(--surface);
  color: var(--muted);
  font-size: .78rem;
}

.detailActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.productDetailRelated {
  grid-column: 1 / -1;
  min-width: 0;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.productDetailRelatedHeader {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.productDetailRelatedHeader h4 {
  margin: 0;
  font-size: 1rem;
}

.productDetailRelatedHeader a {
  color: var(--accent);
  font-size: .84rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

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

.modalOverlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px;
}

.modalOverlay[hidden] {
  display: none;
}

.modalBackdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modalSurface {
  position: relative;
  z-index: 1;
  width: min(1080px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 24px 80px color-mix(in srgb, black 55%, transparent);
}

.miniCodeBlock:empty {
  display: none;
}

.modalHeader {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  padding: 12px 14px;
}

.modalHeader h2 {
  margin: 0;
  font-size: 1rem;
}

.productDetailSurface .detailView {
  padding: 14px;
}

.profileSurface {
  width: min(620px, calc(100vw - 32px));
}

.profileModalBody {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.profileHero .profileAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.profileTabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.profileTab {
  flex: 1;
  min-height: 38px;
  border: 1px solid transparent;
  background: transparent !important;
  color: var(--muted) !important;
  font-weight: 700;
}

.profileTab[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
  color: var(--accent) !important;
}

.profilePaneBody {
  display: grid;
  gap: 14px;
}

.themeChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.themeChip {
  min-height: 36px;
  padding: 4px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel) !important;
  color: var(--ink) !important;
}

.themeChip.isActive {
  border-color: var(--accent);
  background: var(--accent) !important;
  color: var(--on-accent) !important;
}

.primaryButton {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border-color: transparent !important;
}

.dangerButton {
  background: transparent !important;
  color: var(--danger) !important;
  border-color: color-mix(in srgb, var(--danger) 40%, transparent) !important;
}

.linkButton {
  background: transparent !important;
  border: none !important;
  color: var(--accent) !important;
  padding: 4px 6px;
  font-weight: 700;
  cursor: pointer;
}

.profileIdentityRow {
  display: flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border-radius: var(--radius);
  padding: 8px 10px;
}

.profileNpub {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .72rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.nsecSignin {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--danger) 5%, transparent);
}

.nsecSignin input {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .76rem;
}

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

.profileAvatar {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background:
    linear-gradient(135deg, var(--accent-soft), var(--accent-2-soft)),
    var(--surface-strong);
  color: var(--accent);
  font-size: 1.35rem;
  font-weight: 850;
}

.profileHero h3 {
  margin: 0;
  font-size: 1.2rem;
}

.profileHero p,
.profilePanel p {
  margin: 4px 0 0;
  color: var(--muted);
}

.profileStats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.profileStats div,
.profilePanel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface);
}

.profileStats span {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.profileStats strong {
  display: block;
  margin-top: 3px;
  font-size: 1.2rem;
}

.profileActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 860px) {
  .intro,
  .grid,
  .productDetailModal {
    grid-template-columns: 1fr;
  }

  .topbar {
    padding: 10px 14px;
    gap: 8px;
  }

  .topbar h1 { font-size: 1.2rem; }
  .brandLogo { height: 25px; }
  .brand .eyebrow { display: none; }

  .topbarActions {
    gap: 8px;
    flex-shrink: 0;
  }

  .sellButton {
    padding: 8px 12px;
  }

  /* Compact identity to an avatar on phones. */
  .sessionIdentityButton.isConnected {
    grid-template-columns: 32px;
    padding: 3px;
    border-radius: 999px;
  }
  .sessionIdentityButton.isConnected .sessionIdentityName,
  .sessionIdentityButton.isConnected .sessionIdentityPubkey {
    display: none;
  }

  .marketplaceToolbar {
    width: 100%;
  }

  .marketplaceTabs {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }

  .marketplaceTab {
    flex: 0 0 auto;
  }

  .themePickerLabel {
    max-width: none;
  }

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

  .storefrontHeroContent {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .storefrontShareButton {
    grid-column: 1 / -1;
    width: 100%;
  }

  .storefrontHeaderActions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .storefrontHeaderActions > * { flex: 1; text-align: center; }

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

  .statusGrid div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .statusGrid div:last-child { border-bottom: 0; }

  /* Mobile: modals are full-screen (no scrim gap around the edges). */
  .modalOverlay {
    place-items: stretch;
    padding: 0;
  }

  .modalSurface {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border: 0;
  }

  .modalHeader {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--panel);
  }

  .actions > * {
    flex: 1 1 140px;
  }

  .productDetailMedia {
    min-height: 220px;
  }

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

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

/* Buyer order form (checkout) + seller order fulfillment cards */
.checkoutOrder {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 4%, var(--panel));
  display: grid;
  gap: 8px;
}
.checkoutOrder textarea,
.checkoutOrder input { width: 100%; }

.orderPaneHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.orderList { display: grid; gap: 12px; margin-top: 12px; }
.orderCard {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: var(--panel);
  display: grid;
  gap: 6px;
}
.orderCard.isFulfilled { opacity: .68; }
.orderCardHead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.orderBadges { display: flex; flex-wrap: wrap; gap: 6px; }
.orderBadge {
  font-size: .72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.orderBadge--ok { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.orderBadge--warn { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 45%, var(--line)); }
.orderBadge--done { color: var(--muted); }
.orderShip { display: grid; grid-template-columns: 88px 1fr; gap: 8px; font-size: .9rem; }
.orderShip span { color: var(--muted); }
.orderNote { margin: 2px 0 0; font-style: italic; color: var(--ink); }

/* Public store directory */
.storeDirectoryGrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.storeDirectoryGrid.libraryEmpty { display: block; }
.storeDirectoryCard {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}
.storeDirectoryCard strong { display: block; font-size: 1.05rem; }
.storeDirectoryCard .buttonLink { align-self: flex-start; }
.storeCardHead { display: flex; align-items: flex-start; gap: 12px; }
.storeCardHead > div { flex: 1; min-width: 0; }
.storefrontManagerIdentity { display: flex; align-items: center; gap: 10px; }
.storefrontManagerIdentity .storeCardLogo { width: 36px; height: 36px; font-size: 1rem; border-radius: 9px; }

/* Reviews */
.starRow { display: inline-flex; letter-spacing: 1px; color: color-mix(in srgb, var(--muted) 60%, transparent); }
.starRow .star.isFull, .starRow .star.isHalf { color: var(--accent-2); }
.starRow .star.isHalf { position: relative; }
.reviewBadge { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); margin-top: 4px; }
.reviewBadgeMeta { font-weight: 600; }
.reviewSlot { margin-top: 8px; }
.reviewsSection { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 16px; }
.reviewsHead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.reviewsHead h3 { margin: 0; }
.reviewsAverage { display: inline-flex; align-items: baseline; gap: 8px; }
.reviewsAverage strong { font-size: 1.2rem; }
.reviewsAverage .starRow { font-size: 1.05rem; }
.reviewEligibility { margin: 12px 0 0; }
.reviewForm { display: grid; gap: 8px; margin: 14px 0 4px; padding: 13px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-muted); }
.reviewFormLabel { margin: 0; font-weight: 600; }
.ratingPicker { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; font-size: 1.5rem; }
.ratingPicker input { position: absolute; opacity: 0; width: 0; height: 0; }
.ratingPicker label { color: color-mix(in srgb, var(--muted) 55%, transparent); cursor: pointer; line-height: 1; }
.ratingPicker label:hover, .ratingPicker label:hover ~ label,
.ratingPicker input:checked ~ label { color: var(--accent-2); }
.ratingPicker input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.reviewTitleInput, .reviewBodyInput { width: 100%; }
.reviewFormActions { display: flex; gap: 8px; }
.reviewFormStatus { margin: 0; font-size: .8rem; color: var(--muted); }
.reviewFormStatus[data-state="error"] { color: var(--danger); }
.reviewFormStatus[data-state="ok"] { color: var(--success); }
.reviewsList { display: grid; gap: 12px; margin-top: 16px; }
.reviewItem { border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 13px; background: color-mix(in srgb, var(--panel) 60%, transparent); }
.reviewItem.isMine { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.reviewItemHead { display: flex; align-items: center; gap: 8px; font-size: .82rem; }
.reviewAuthor { font-weight: 600; }
.reviewDate { color: var(--muted); margin-left: auto; }
.reviewTitle { display: block; margin: 6px 0 2px; }
.reviewBody { margin: 2px 0 0; white-space: pre-wrap; }
.storeCardLogo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  color: var(--accent);
  font-weight: 700;
  font-size: 1.2rem;
  border: 1px solid var(--line);
}
.storeCardLogo img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Mobile fit & wrap: never scroll the page sideways, give room to breathe ---- */
@media (max-width: 860px) {
  html { overflow-x: clip; }

  /* No box may exceed the viewport width. */
  .panel,
  .modalSurface,
  .workspace,
  form,
  section,
  article,
  .detailView,
  .profileModalBody,
  .checkoutModalBody { max-width: 100%; min-width: 0; }

  /* Long unbreakable strings (npubs, coordinates, invoices, links) wrap. */
  .mutedCopy,
  .miniCodeBlock,
  .listingPreview,
  .sessionIdentityPubkey,
  .modalSurface p,
  .modalSurface strong,
  .modalSurface a,
  .panel p,
  .panel li,
  td,
  dd,
  code { overflow-wrap: anywhere; }

  /* Code/JSON and data tables scroll inside their own box, not the page. */
  pre,
  .miniCodeBlock,
  .listingPreview { overflow-x: auto; max-width: 100%; }
  .importPreview { overflow-x: auto; }
  .importTable { font-size: .76rem; }

  /* Trim padding so panels and modals aren't cramped. */
  .panel { padding: 15px; }
  .checkoutModalBody { padding: 15px; }

  /* Profile modal tabs wrap to two rows instead of overflowing sideways. */
  .profileTabs { flex-wrap: wrap; row-gap: 6px; }
  .profileTab { flex: 1 1 44%; font-size: .82rem; }

  /* Compact 3-up stats instead of a tall stack. */
  .profileStats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Kill desktop min-widths that force sideways scroll. */
  .listingAssignmentControls { flex-wrap: wrap; }
  .listingAssignmentControls select { min-width: 0; width: 100%; }

  /* Action button rows wrap and fill the width for easy tapping. */
  .actions,
  .detailActions,
  .profileActions,
  .storefrontManagerActions { flex-wrap: wrap; }
  .actions button,
  .detailActions button { flex: 1 1 auto; }
}

/* Global search results view */
.searchSection { margin-top: 18px; }
.searchSection > h3 { margin: 0 0 10px; font-size: .95rem; }
.searchFiltersPanel {
  display: grid;
  gap: 12px;
  margin: 4px 0 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.searchSortLabel { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .8rem; font-weight: 700; }
.searchSortLabel select { width: auto; margin: 0; }
.searchSellerHead { display: flex; gap: 10px; align-items: center; }
.searchSellerAvatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--surface-strong);
  color: var(--accent);
  font-weight: 850;
}
.searchSellerAvatar img { width: 100%; height: 100%; object-fit: cover; }

/* The product-detail header pill only shows transient messages, not the status. */
#detailStatus:empty { display: none; }

/* Server-gated (BitUnlock) delivery-tier selector in the product editor. */
.deliveryTierRow { display: grid; gap: 8px; margin: 4px 0; }
.deliveryTierRow .fieldLabel { font-size: .85rem; font-weight: 650; color: var(--ink); }
.tierChoice { display: grid; gap: 8px; }
.tierOpt { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--panel) 60%, transparent); cursor: pointer; }
.tierOpt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.tierOpt input { margin-top: 3px; }
.tierOpt strong { display: block; font-size: .9rem; }
.tierOpt small { display: block; color: var(--muted); font-size: .78rem; }
.tierNote { margin: 2px 0 0; color: var(--muted); font-size: .78rem; }
.tierNote[data-tone="warn"] { color: var(--danger); }
.tierNote a { color: var(--accent); }
.tierConn { margin: 2px 0 0; font-size: .78rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.tierConn[data-tone="ok"] { color: var(--success); }
.tierConn[data-tone="warn"] { color: var(--danger); }
.tierConn a { color: var(--accent); }
.sellingSummary { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-muted); padding: 13px 15px; margin: 0 0 14px; }
.sellingSummaryHead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.sellingConn { font-size: .82rem; color: var(--muted); }
.sellingConn[data-tone="ok"] { color: var(--success); }
.sellingConn[data-tone="warn"] { color: var(--danger); }
.sellingConn a, .sellingSummary a { color: var(--accent); }
.sellingStats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 16px; margin: 0; }
.sellingStats div { display: grid; gap: 2px; }
.sellingStats dt { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.sellingStats dd { margin: 0; font-size: .9rem; font-weight: 600; }