/* tokens.css */
/*
 * ZecMarket design tokens — copy of design/tokens.css (direction V2, dark only).
 * The design values must stay identical to design/tokens.css (checked by
 * src/views/stylesheet.test.ts): when the design changes, update both files.
 */
:root {
  --bg: #111214;
  --bg-alt: #0c0d0f;
  --surface: #1a1c1f;
  --surface-2: #222529;
  --border: #2b2e33;
  --border-strong: #41454c;
  --text: #ece9e3;
  --muted: #aba79f;
  --faint: #8f8b83;
  --link: #f2c55c;
  --link-hover: #ffda85;
  --accent: #f4b728;
  --accent-hover: #ffc845;
  --on-accent: #17150f;
  --accent-soft: #29231a;
  --accent-line: #4e4122;
  --success: #63cfa0;
  --success-soft: #16291f;
  --danger: #f0877b;
  --danger-soft: #33191a;
  --info-soft: #1e2126;
  --shadow: rgba(0, 0, 0, 0.6);
  --ph1: #212327;
  --ph2: #25231f;
  --ph3: #1f2426;
  --ph4: #242127;
  --ph-ink: #4b4f56;
  --font:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', 'DejaVu Sans Mono', Menlo, Consolas, monospace;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 14px;
  --fs-lg: 15px;
  --fs-h3: 18px;
  --fs-h2: 22px;
  --fs-h1: 28px;
  --fs-price-lg: 32px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-card: 14px;
  --radius-panel: 16px;
  --radius-pill: 999px;
  --container: 1240px;

  /* Local additions: layout widths. */
  --form-width: 880px; /* NewListing */
  --auth-width: 420px; /* Signup card */
  --gallery: 560px; /* Listing: photo column */
  --buybox: 320px; /* Listing: buy box */
  --filters: 260px; /* search filters column */

  /* Local additions: the payment QR code stays black on white (DESIGN.md §3). */
  --qr-ink: #0f1111;
  --qr-bg: #ffffff;
}

/* base.css */
/*
 * Base elements (design/DESIGN.md §1): system fonts, dark surfaces, links without underline
 * until hovered. Colors come from tokens.css only.
 */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h1 {
  font-size: var(--fs-h1);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

p {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
}

code,
kbd,
pre,
samp {
  font-family: var(--mono);
}

hr {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--border);
}

details > summary {
  cursor: pointer;
  color: var(--link);
}

/* Form controls (design/DESIGN.md §5 "Form fields"): 40 px high, 8 px radius. */
input,
select,
textarea,
button {
  font-family: var(--font);
  font-size: var(--fs-md);
  color: var(--text);
}

input:not([type='checkbox'], [type='radio'], [type='file']),
select,
textarea {
  max-width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
}

input:not([type='checkbox'], [type='radio'], [type='file']),
select {
  height: 40px;
  padding: 0 var(--sp-3);
}

select {
  padding: 0 var(--sp-2) 0 10px;
  background: var(--surface-2);
}

input:not([type='checkbox'], [type='radio'], [type='file']):focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
}

textarea {
  width: 100%;
  padding: 10px var(--sp-3);
  line-height: 1.5;
}

input[type='checkbox'],
input[type='radio'] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--accent);
}

input[readonly],
textarea[readonly] {
  background: var(--surface-2);
}

::placeholder {
  color: var(--faint);
}

/* Utilities */

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

.zm-faint {
  color: var(--faint);
}

.zm-small {
  font-size: 13px;
}

.zm-xs {
  font-size: var(--fs-sm);
}

.zm-mono {
  font-family: var(--mono);
}

.zm-strong {
  font-weight: 700;
}

.zm-break {
  overflow-wrap: anywhere;
}

.zm-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.zm-skip {
  position: absolute;
  left: -9999px;
}

.zm-skip:focus {
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 10;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  background: var(--surface);
}

.zm-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.zm-stack--lg {
  gap: var(--sp-6);
}

.zm-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.zm-inline form {
  margin: 0;
}

.zm-list-plain {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

.zm-actions form {
  margin: 0;
}

.zm-actions--end {
  justify-content: flex-end;
}

/* Linked text rendered as a button (log-out and other POST actions in link style). */
.zm-linkbtn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  cursor: pointer;
}

.zm-linkbtn:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

.zm-linkbtn[aria-pressed='true'] {
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* layout.css */
/*
 * Page frame (design/DESIGN.md §4): full-width header, category bar and footer; content in a
 * centered column of --container (1280 px), with a 16 px gutter on smaller screens.
 */

.zm-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.zm-wrap {
  width: min(var(--container), 100% - 2 * var(--sp-4));
  margin-inline: auto;
}

.zm-main {
  flex-grow: 1;
}

.zm-main__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: var(--sp-2) 0 var(--sp-8);
}

/* Sign-up, log-in and error pages: one card centered on the alternate background. */
.zm-main--auth .zm-main__inner {
  align-items: center;
  gap: 18px;
  padding: 40px 0;
}

.zm-narrow {
  width: var(--auth-width);
  max-width: 100%;
}

.zm-narrow--wide {
  width: 640px;
}

/* Form pages (NewListing): an 880 px column. */
.zm-formpage {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  width: var(--form-width);
  max-width: 100%;
  margin-inline: auto;
}

/* Search: filters on the left, results on the right. */
.zm-columns {
  display: grid;
  grid-template-columns: var(--filters) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}

.zm-columns > .zm-sidebar {
  grid-row: 1;
  grid-column: 1;
}

.zm-columns > .zm-results {
  grid-row: 1;
  grid-column: 2;
}

.zm-results {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.zm-mobile-only {
  display: none;
}

@media (max-width: 1023px) {
  .zm-columns {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--sp-4);
  }
}

@media (max-width: 767px) {
  .zm-wrap {
    width: calc(100% - 28px);
  }

  .zm-main__inner {
    gap: var(--sp-5);
    padding: var(--sp-3) 0 var(--sp-6);
  }

  .zm-main--auth .zm-main__inner {
    padding: var(--sp-5) 0;
  }

  .zm-columns {
    display: flex;
    flex-direction: column;
  }

  /* Filters go below the results; a link at the top jumps to them. */
  .zm-columns > .zm-sidebar {
    order: 2;
    width: 100%;
  }

  .zm-mobile-only {
    display: revert;
  }

  /* Touch targets ≥ 44 px. */
  .zm-btn,
  select,
  input:not([type='checkbox'], [type='radio'], [type='file']) {
    min-height: 44px;
  }
}

/* Wide screens: the filters stay in view under the sticky header while results scroll. */
@media (min-width: 1024px) {
  .zm-columns > .zm-sidebar {
    position: sticky;
    top: 84px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

/* components/badge.css */
/*
 * Pills (design/DESIGN.md §5): card tags ("New"), payment badges, and neutral chips (listing
 * types in tables, statuses, shipping).
 */

.zm-chip,
.zm-tag,
.zm-paybadge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px var(--sp-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.zm-chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
}

.zm-chip--lg {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.zm-chip--success {
  background: var(--success-soft);
  color: var(--success);
}

.zm-chip--danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.zm-chip--accent {
  background: var(--accent-soft);
  color: var(--text);
}

/* Card tags, top left of the image: "New" in gold. */
.zm-tag--new {
  background: var(--accent);
  color: var(--on-accent);
}

/* Payment badges: a colored dot and a word, never color alone. On photos they sit on a solid
   surface so they stay readable. */
.zm-paybadge {
  padding-inline: var(--sp-2);
  border: 1px solid var(--border);
}

.zm-paybadge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentcolor;
}

.zm-card__badge.zm-paybadge {
  background: var(--surface);
}

.zm-paybadge--direct {
  background: var(--danger-soft);
  color: var(--danger);
}

.zm-paybadge--bonded {
  background: var(--success-soft);
  color: var(--success);
}

/* Order statuses: green once completed, red when it ended badly, gold while waiting. */
.zm-status--pending,
.zm-status--accepted,
.zm-status--paid {
  background: var(--accent-soft);
}

.zm-status--completed {
  background: var(--success-soft);
  color: var(--success);
}

.zm-status--rejected,
.zm-status--cancelled,
.zm-status--expired,
.zm-status--disputed {
  background: var(--danger-soft);
  color: var(--danger);
}

/* Unread marker and counter (header "Orders"). */
.zm-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  vertical-align: middle;
}

.zm-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--danger);
  color: var(--surface);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* Star ratings. */
.zm-stars {
  color: var(--link);
  letter-spacing: 1px;
  white-space: nowrap;
}

/* components/button.css */
/*
 * Buttons (design/DESIGN.md §5): --primary gold pill, --secondary outlined pill. Always a real
 * <button> or <a>. --sq uses the 8 px radius of the header "+ Sell" button.
 */

.zm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s;
}

.zm-btn:hover {
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}

.zm-btn--primary {
  padding-inline: 22px;
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

.zm-btn--primary:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
  color: var(--on-accent);
}

.zm-btn--danger {
  border-color: var(--danger);
  color: var(--danger);
}

.zm-btn--danger:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.zm-btn--sq {
  padding: 10px var(--sp-4);
  border-radius: var(--radius);
}

.zm-btn--sm {
  padding: 6px var(--sp-3);
  font-size: 13px;
}

.zm-btn--lg {
  padding: var(--sp-3);
  font-size: var(--fs-lg);
}

.zm-btn--block {
  display: flex;
  width: 100%;
}

/* components/card.css */
/*
 * Listing card (design/DESIGN.md §5, v2): 14 px radius; 4:3 photo with the placeholder tint and
 * "no photo" in words when there is none; tag top left, payment badge top right; 2-line title,
 * large price + estimate, place · rating, seller. Hover: border lights up, photo zooms slightly.
 * Grid: 4 columns ≥ 1180 px, 3 from 900, 2 below.
 */

.zm-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zm-grid > li {
  display: flex;
}

.zm-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  transition:
    border-color 0.2s,
    box-shadow 0.2s ease;
}

.zm-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 14px 30px -18px var(--shadow);
  color: var(--text);
  text-decoration: none;
}

.zm-card__image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ph1);
  color: var(--ph-ink);
}

.zm-grid > li:nth-child(4n + 2) .zm-card__image {
  background: var(--ph2);
}

.zm-grid > li:nth-child(4n + 3) .zm-card__image {
  background: var(--ph3);
}

.zm-grid > li:nth-child(4n + 4) .zm-card__image {
  background: var(--ph4);
}

.zm-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.zm-card:hover .zm-card__image img {
  transform: scale(1.03);
}

.zm-card__noimg {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zm-card__tag,
.zm-card__badge {
  position: absolute;
  top: 10px;
}

.zm-card__tag {
  left: 10px;
}

.zm-card__badge {
  right: 10px;
}

.zm-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 6px;
  padding: var(--sp-3) 14px 14px;
}

.zm-card__title {
  display: -webkit-box;
  min-height: 38px;
  overflow: hidden;
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.zm-card__price {
  font-variant-numeric: tabular-nums;
}

.zm-card__price b {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.zm-card__approx,
.zm-card__meta,
.zm-card__seller {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.zm-card__seller {
  margin-top: auto;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
  font-weight: 600;
}

.zm-star {
  color: var(--link);
}

/* Secondary rows ("More from this seller"): a wider photo. */
.zm-grid--compact .zm-card__image {
  aspect-ratio: 16 / 10;
}

@media (max-width: 1179px) {
  .zm-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {
  .zm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .zm-grid {
    gap: var(--sp-3) 10px;
  }

  .zm-card__tag,
  .zm-card__badge {
    top: 6px;
  }

  .zm-card__tag {
    left: 6px;
  }

  .zm-card__badge {
    right: 6px;
  }

  .zm-card__body {
    gap: 3px;
    padding: var(--sp-2) 10px 10px;
  }

  .zm-card__title {
    min-height: 0;
    font-size: 13px;
  }

  .zm-card__price b {
    font-size: var(--fs-lg);
  }

  .zm-card__meta {
    font-size: var(--fs-xs);
  }

  .zm-card__approx,
  .zm-card__seller {
    display: none;
  }
}

/* components/catbar.css */
/* Category bar (design/DESIGN.md §5, v2): a strip of pill links under the header. */

.zm-catbar {
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}

.zm-catbar__links {
  display: flex;
  gap: 6px;
  padding: 10px 0;
  overflow-x: auto;
  scrollbar-width: none;
  font-size: var(--fs-md);
}

.zm-catbar a {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
  transition:
    background 0.15s,
    color 0.15s;
}

.zm-catbar a:hover {
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}

.zm-catbar__all {
  font-weight: 700;
}

.zm-catbar a.zm-catbar__all {
  color: var(--text);
}

.zm-catbar a[aria-current='page'] {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 700;
}

@media (max-width: 767px) {
  .zm-catbar a {
    min-height: 38px;
    border-color: var(--border);
    background: var(--surface);
    font-size: 13px;
  }
}

/* components/crumbs.css */
/* Breadcrumb (mockups Listing, Order): 13 px, muted, "›" separators. */

.zm-crumbs {
  padding-top: var(--sp-3);
  color: var(--muted);
  font-size: 13px;
}

.zm-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zm-crumbs li + li::before {
  content: '›';
  padding: 0 6px;
  color: var(--faint);
}

/* The breadcrumb sits right on top of the page; the page gap would push the content away. */
.zm-main__inner > .zm-crumbs {
  margin-bottom: calc(-1 * var(--sp-4));
  padding-top: var(--sp-1);
}

/* components/filters.css */
/* Search filters column: groups of controls in a panel. */

.zm-filters {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}

.zm-filters select {
  width: 100%;
}

.zm-filters__group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.zm-filters__group > legend,
.zm-filters label.zm-filters__label {
  margin-bottom: 6px;
  padding: 0;
  font-weight: 600;
}

.zm-filters .zm-field {
  gap: 6px;
}

/* components/footer.css */
/*
 * Footer (design/DESIGN.md §5): --bg-alt, logo + one-line pitch, link columns, bottom line.
 * Mobile (MobileHome): one row of links and the copyright.
 */

.zm-footer {
  margin-top: auto;
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
}

.zm-footer__cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--sp-6);
  padding: var(--sp-8) 0 var(--sp-5);
}

.zm-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.zm-footer__pitch {
  max-width: 260px;
  color: var(--muted);
  font-size: 13px;
}

.zm-footer__col,
.zm-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.zm-footer__col h2 {
  font-size: var(--fs-md);
  letter-spacing: 0;
}

.zm-footer__col a {
  color: var(--muted);
}

.zm-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  padding: 14px 0 22px;
  border-top: 1px solid var(--border);
  color: var(--faint);
  font-size: var(--fs-sm);
}

.zm-footer__prefs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.zm-footer__prefs form {
  display: flex;
  gap: var(--sp-2);
  margin: 0;
}

@media (max-width: 1023px) {
  .zm-footer__cols {
    grid-template-columns: repeat(3, 1fr);
  }

  .zm-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .zm-footer__cols {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: 18px 0 var(--sp-3);
  }

  .zm-footer__brand,
  .zm-footer__col h2 {
    display: none;
  }

  .zm-footer__col ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    font-size: var(--fs-md);
  }

  .zm-footer__col a {
    color: var(--link);
  }

  .zm-footer__extra {
    display: none;
  }

  .zm-footer__bottom {
    flex-direction: column;
    padding-top: var(--sp-3);
    border-top: 0;
  }
}

/* components/form.css */
/*
 * Forms (design/DESIGN.md §5 "Form fields"): labels 14 px 600 above 40 px inputs; required * in
 * --danger; errors = 2 px --danger border + --danger-soft fill + 13 px message below. Forms are
 * grouped in numbered cards (12 px radius). Radio tiles for the listing type.
 */

.zm-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: 0;
}

/* Numbered card (fieldset). The legend is the card title. */
.zm-formcard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: var(--sp-5) 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  background: var(--surface);
  box-shadow: 0 1px 3px -1px var(--shadow);
}

.zm-formcard > legend {
  float: left;
  width: 100%;
  padding: 0;
  font-size: var(--fs-h3);
  font-weight: 700;
}

.zm-formcard > legend + * {
  clear: both;
}

.zm-formcard__num {
  color: var(--muted);
  font-weight: 500;
}

.zm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.zm-field__label {
  font-size: var(--fs-md);
  font-weight: 600;
}

.zm-required {
  color: var(--danger);
  font-weight: 400;
}

/* Low specificity (:where) so that the width classes below win. */
.zm-field :where(input:not([type='checkbox'], [type='radio'], [type='file']), select, textarea) {
  width: 100%;
}

.zm-field__hint {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.zm-field__error {
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
}

.zm-field--invalid input:not([type='checkbox'], [type='radio']),
.zm-field--invalid select,
.zm-field--invalid textarea,
.zm-field--invalid .zm-tile {
  border: 2px solid var(--danger);
  background: var(--danger-soft);
}

/* Fields side by side (category + title, amount + currency, city + country). */
.zm-fieldrow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
}

.zm-fieldrow > .zm-field {
  flex: 1 1 200px;
}

.zm-fieldrow--1-2 {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: start;
}

.zm-fieldrow__note {
  padding-bottom: 10px;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.zm-input--amount {
  width: 160px;
}

.zm-input--currency {
  width: 110px;
}

.zm-input--city {
  width: 240px;
}

.zm-input--country {
  width: 200px;
}

.zm-fieldrow > .zm-field--fit {
  flex: 0 0 auto;
}

/* Radios and checkboxes in a row. */
.zm-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px var(--sp-5);
}

.zm-choice {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  cursor: pointer;
}

/* Listing type tiles: selected tile has a 2 px gold border and --accent-soft fill. */
.zm-tiles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.zm-tile {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  font-weight: 600;
  cursor: pointer;
}

.zm-tile:has(input:checked) {
  padding: 11px;
  border: 2px solid var(--accent);
  background: var(--accent-soft);
}

.zm-tile:has(input:focus-visible) {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* Upload area: dashed frame around the file input. */
.zm-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: 22px;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  color: var(--muted);
  text-align: center;
}

/* Bottom bar: legal checkbox on the left, actions on the right. */
.zm-formbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  background: var(--surface-2);
}

.zm-formbar.zm-field--invalid {
  border: 2px solid var(--danger);
}

.zm-formbar .zm-field__error {
  flex-basis: 100%;
}

@media (max-width: 1023px) {
  .zm-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .zm-formcard {
    padding: var(--sp-4);
  }

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

  .zm-fieldrow--1-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .zm-input--city,
  .zm-input--country {
    width: 100%;
  }

  .zm-formbar {
    padding: var(--sp-4);
  }

  .zm-formbar .zm-actions {
    width: 100%;
  }

  .zm-formbar .zm-btn {
    flex-grow: 1;
  }
}

/* Groups whose label only matters to screen readers (the card title already says it). */
.zm-sr-label > .zm-field__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* components/header.css */
/*
 * Header (design/DESIGN.md §5, v2): logo · search group · tools (ZEC price,
 * account, "Post an ad"). Sticky on wide screens. From 768 to 1023 px the search group wraps onto
 * its own row; below 768 px it sits under the logo.
 */

.zm-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.zm-header__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  height: 68px;
}

/* Logo: ZecMarket mark (public/img/logo.webp) + "Zec" bold + "Market". */
.zm-logo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 21px;
  letter-spacing: -0.02em;
}

.zm-logo:hover {
  color: var(--text);
  text-decoration: none;
}

.zm-logo b {
  color: var(--link);
  font-weight: 800;
}

.zm-logo__mark {
  flex-shrink: 0;
}

/* Search group: one rounded field holding the words, the listing type and a gold button. */
.zm-search {
  display: flex;
  flex-grow: 1;
  align-items: center;
  min-width: 0;
  max-width: 640px;
  height: 44px;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  transition: border-color 0.15s;
}

.zm-search:hover {
  border-color: var(--muted);
}

.zm-search:focus-within {
  border-color: var(--accent);
  outline: 2px solid var(--accent-line);
  outline-offset: 0;
}

.zm-search input[type='search'] {
  flex-grow: 1;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 0 var(--sp-4);
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: var(--fs-lg);
}

.zm-search input[type='search']:focus-visible {
  outline: none;
}

/* Listing type menu (zm-pick): a <details> of radio buttons styled as a dropdown. */
.zm-pick {
  position: relative;
  flex-shrink: 0;
  height: 100%;
}

.zm-pick > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 14px;
  border-left: 1px solid var(--border);
  list-style: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.15s;
}

.zm-pick > summary::-webkit-details-marker {
  display: none;
}

.zm-pick > summary::after {
  content: '▾';
  font-weight: 400;
}

.zm-pick > summary:hover,
.zm-pick[open] > summary {
  color: var(--text);
}

.zm-pick__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: -60px;
  z-index: 25;
  display: flex;
  flex-direction: column;
  min-width: 210px;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 16px 32px -12px var(--shadow);
}

.zm-pick__menu label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-md);
  cursor: pointer;
}

.zm-pick__menu label:hover {
  background: var(--surface-2);
}

/* The radio itself is hidden; the chosen line is gold with a check mark. */
.zm-pick__menu input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.zm-pick__menu label:has(input:checked) {
  background: var(--accent-soft);
  color: var(--link);
  font-weight: 700;
}

.zm-pick__menu label:has(input:checked)::after {
  content: '✓';
  margin-left: auto;
}

.zm-pick__menu label:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.zm-search button {
  flex-shrink: 0;
  height: 100%;
  padding: 0 var(--sp-5);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.zm-search button:hover {
  background: var(--accent-hover);
}

.zm-header__tools {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--sp-1);
  margin-left: auto;
}

.zm-rate {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: var(--sp-2);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Zcash coin (public/img/zec.webp) before the price. */
.zm-rate__coin {
  flex: none;
  width: 16px;
  height: 16px;
}

/* Text button or link in the header (messages, orders, log in). */
.zm-headlink {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s;
}

.zm-headlink:hover {
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}

/* Account: "Log in · Sign up" for guests, a menu for signed-in users. */
.zm-account {
  position: relative;
  flex-shrink: 0;
  font-size: var(--fs-md);
}

.zm-account--guest {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.zm-account > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 38px;
  padding: 0 var(--sp-3) 0 4px;
  border-radius: var(--radius-pill);
  list-style: none;
  color: var(--text);
  transition: background 0.15s;
}

.zm-account > summary:hover {
  background: var(--surface-2);
}

.zm-account > summary::-webkit-details-marker {
  display: none;
}

.zm-account > summary b::after {
  content: ' ▾';
  color: var(--muted);
  font-weight: 400;
}

.zm-account__hello {
  color: var(--muted);
}

/* First letter of the username on a gold disc. */
.zm-avatar {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--link);
  font-size: 13px;
  font-weight: 800;
}

.zm-menu {
  position: absolute;
  top: calc(100% + var(--sp-2));
  right: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 16px 32px -12px var(--shadow);
  font-size: var(--fs-md);
}

.zm-menu a,
.zm-menu .zm-linkbtn {
  display: block;
  width: 100%;
  padding: 9px var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-align: left;
}

.zm-menu a:hover,
.zm-menu .zm-linkbtn:hover {
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}

.zm-menu form {
  margin: 0;
}

.zm-header__sell {
  flex-shrink: 0;
  margin-left: var(--sp-2);
}

@media (max-width: 1179px) {
  .zm-rate,
  .zm-account__hello,
  .zm-header__help {
    display: none;
  }
}

@media (max-width: 1023px) {
  .zm-header {
    position: static;
  }

  .zm-header__bar {
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-4);
    height: auto;
    padding: var(--sp-3) 0;
  }

  .zm-search {
    order: 10;
    flex-basis: 100%;
    max-width: none;
  }
}

@media (max-width: 767px) {
  .zm-header__bar {
    gap: var(--sp-3) var(--sp-2);
  }

  .zm-logo {
    font-size: 19px;
  }

  .zm-pick {
    display: none;
  }

  .zm-search button {
    padding: 0 var(--sp-4);
  }

  .zm-headlink {
    height: 44px;
    padding: 0 10px;
  }

  .zm-header__tools {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0;
  }

  .zm-account__signup,
  .zm-account > summary b {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .zm-header__sell {
    margin-left: 0;
    padding-inline: var(--sp-4);
  }

  /* "+ Sell" becomes "+" (the word stays for screen readers). */
  .zm-header__sell-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

/* components/heading.css */
/* Section heading (design/DESIGN.md §5): 22 px bold title, right-aligned link or meta text. */

.zm-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-4);
}

.zm-heading h2 {
  letter-spacing: -0.02em;
}

.zm-heading__link {
  font-size: var(--fs-md);
  font-weight: 600;
}

.zm-heading__meta {
  color: var(--muted);
  font-size: var(--fs-md);
}

.zm-heading--sm h2 {
  font-size: var(--fs-h3);
}

.zm-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.zm-pagehead {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.zm-pagehead h1 {
  font-size: 28px;
}

.zm-pagehead p {
  color: var(--muted);
}

@media (max-width: 767px) {
  .zm-heading h2 {
    font-size: var(--fs-h3);
  }

  .zm-heading__link {
    font-size: 13px;
  }

  .zm-pagehead h1 {
    font-size: var(--fs-h2);
  }
}

/* components/kv.css */
/* Key/value rows (listing specs, order summary): muted label column, bottom borders. */

.zm-kv {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
}

.zm-kv th,
.zm-kv td {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.zm-kv th {
  width: 130px;
  padding-right: var(--sp-3);
  color: var(--muted);
  font-weight: 400;
}

.zm-kv--wide th {
  width: 180px;
}

/* components/note.css */
/*
 * Notices: zm-note (info, --info-soft), zm-warn (irreversible actions, red), flash messages
 * after a POST, and the error summary at the top of a form.
 */

.zm-note,
.zm-warn,
.zm-flash,
.zm-error-summary {
  padding: 10px var(--sp-3);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.5;
}

.zm-note {
  background: var(--info-soft);
}

.zm-note--accent {
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
}

.zm-note--md {
  font-size: var(--fs-md);
}

.zm-warn,
.zm-error-summary {
  border: 1px solid var(--danger);
  background: var(--danger-soft);
}

.zm-warn b,
.zm-error-summary {
  color: var(--danger);
}

.zm-error-summary {
  font-weight: 600;
}

.zm-flash {
  border: 1px solid var(--border);
  background: var(--info-soft);
  font-size: var(--fs-md);
}

.zm-flash--success {
  border-color: var(--success);
  background: var(--success-soft);
}

.zm-flash--error {
  border-color: var(--danger);
  background: var(--danger-soft);
}

/* Destructive action hidden behind a <details>. */
.zm-danger > summary {
  color: var(--danger);
  font-size: 13px;
}

.zm-danger[open] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.zm-note--success {
  border: 1px solid var(--success);
  background: var(--success-soft);
}

/* "Report" links: discreet until opened. */
.zm-report > summary,
.zm-report__login {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.zm-report[open] {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.zm-review__report {
  margin-top: var(--sp-1);
}

/* components/pager.css */
/* Pagination: pill links, the current page in gold. */

.zm-pager ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zm-pager a,
.zm-pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius-pill);
}

.zm-pager a {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}

.zm-pager a:hover {
  background: var(--surface-2);
  text-decoration: none;
}

.zm-pager [aria-current='page'] {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

/* components/panel.css */
/* Panel: bordered white card with an optional title (seller card, buy box, settings sections). */

.zm-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  background: var(--surface);
  box-shadow: 0 1px 3px -1px var(--shadow);
}

.zm-panel__title {
  font-size: var(--fs-h3);
}

.zm-panel--lg {
  gap: 14px;
  padding: 26px;
  border-radius: 14px;
}

.zm-panel--lg .zm-panel__title {
  font-size: var(--fs-h1);
}

/* components/pgp.css */
/* Armored PGP blocks (keys, encrypted challenges and messages). */

.zm-armored {
  max-height: 20rem;
  margin: 0;
  padding: 10px var(--sp-3);
  overflow: auto;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--muted);
  font-size: var(--fs-sm);
  white-space: pre;
}

/* components/prose.css */
/* Rendered Markdown (descriptions) and tag lists. */

.zm-prose {
  color: var(--muted);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.zm-prose > * + * {
  margin-top: var(--sp-3);
}

.zm-prose pre {
  overflow-x: auto;
  padding: 10px var(--sp-3);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.zm-prose blockquote {
  margin-inline: 0;
  padding-left: var(--sp-3);
  border-left: 3px solid var(--border-strong);
}

.zm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.zm-tags a {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
}

/* Site pages (FAQ, about, terms, changelog): a readable column. */
.zm-doc {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  width: 820px;
  max-width: 100%;
  margin-inline: auto;
}

.zm-doc__body {
  color: var(--text);
}

.zm-doc__body h2 {
  margin-top: var(--sp-6);
  font-size: var(--fs-h3);
}

.zm-doc__body h2:first-child {
  margin-top: 0;
}

.zm-doc__body h3 {
  margin-top: var(--sp-4);
  font-size: var(--fs-lg);
}

.zm-doc__body :target {
  scroll-margin-top: var(--sp-4);
}

.zm-doc__body ul,
.zm-doc__body ol {
  padding-left: var(--sp-6);
}

.zm-doc__body li + li {
  margin-top: var(--sp-1);
}

/* components/steps.css */
/*
 * Order stepper (design/DESIGN.md §5): circles on a line. Done = green with ✓, current = gold with
 * a pulsing ring and an orange "awaiting …" note, future = outlined. The completed part of the
 * line is green: each step draws the segment coming from the previous one.
 */

.zm-steps {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 22px var(--sp-4);
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  background: var(--surface);
  box-shadow: 0 1px 3px -1px var(--shadow);
}

.zm-steps__step {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
}

.zm-steps__step:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 14px;
  right: 50%;
  left: -50%;
  height: 3px;
  background: var(--border);
}

.zm-steps__step--done:not(:first-child)::before,
.zm-steps__step--current:not(:first-child)::before {
  background: var(--success);
}

.zm-steps__dot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 700;
}

.zm-steps__step--done .zm-steps__dot {
  border-color: var(--success);
  background: var(--success);
  color: var(--surface);
}

.zm-steps__step--current .zm-steps__dot {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  animation: zm-ring 1.6s ease-out infinite;
}

@keyframes zm-ring {
  from {
    box-shadow: 0 0 0 0 var(--accent);
  }

  to {
    box-shadow: 0 0 0 12px transparent;
  }
}

.zm-steps__label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.zm-steps__step--done .zm-steps__label {
  color: var(--text);
}

.zm-steps__step--current .zm-steps__label {
  color: var(--text);
  font-weight: 700;
}

.zm-steps__note {
  display: block;
  color: var(--link-hover);
  font-weight: 600;
}

@media (max-width: 767px) {
  .zm-steps {
    padding: var(--sp-4) var(--sp-1);
  }

  .zm-steps__label {
    font-size: var(--fs-xs);
  }
}

/* components/table.css */
/*
 * Table list (design/DESIGN.md §5): jobs and wanted ads. Uppercase 12 px header on --surface-2,
 * row hover, the type as a pill; inside a 10 px rounded frame.
 */

.zm-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.zm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
}

.zm-table th {
  padding: 10px 14px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
}

.zm-table td {
  padding: 11px 14px;
  border-top: 1px solid var(--border);
}

.zm-table tbody tr:hover {
  background: var(--surface-2);
}

.zm-table__title {
  color: var(--text);
  font-weight: 600;
}

.zm-table__title:hover {
  color: var(--link);
}

.zm-table__num {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.zm-table .zm-end {
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .zm-table th,
  .zm-table td {
    padding: var(--sp-2) 10px;
  }

  .zm-table__optional {
    display: none;
  }
}

/* pages/account.css */
/* Profile and settings pages. */

.zm-profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}

.zm-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
  align-items: start;
}

.zm-settings .zm-form {
  gap: 14px;
}

.zm-settings textarea {
  font-size: var(--fs-sm);
}

@media (max-width: 1023px) {
  .zm-profile,
  .zm-settings {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* pages/blog.css */
/* Blog (templates/pages/blog-index.njk, blog-post.njk): post list, meta line, call to action. */

.zm-postlist {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zm-postlist__item {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-4);
}

.zm-postlist__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

/* Square thumbnail beside the text (public/img/blog/). */
.zm-postlist__thumb {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-card);
}

.zm-postlist__thumb--sm {
  width: 64px;
  height: 64px;
  border-radius: var(--radius);
}

@media (max-width: 767px) {
  .zm-postlist__thumb {
    width: 64px;
    height: 64px;
    border-radius: var(--radius);
  }
}

.zm-postlist__item h2 {
  font-size: var(--fs-h3);
}

.zm-postlist__item h3 {
  font-size: var(--fs-lg);
}

.zm-postlist__item p {
  color: var(--muted);
}

.zm-postmeta {
  color: var(--faint);
  font-size: var(--fs-md);
}

.zm-postcta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.zm-postcta h2 {
  font-size: var(--fs-h3);
}

.zm-postcta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}

/* Markdown tables in posts: the look of .zm-table, scrolling sideways on narrow screens. */
.zm-doc__body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--fs-md);
}

.zm-doc__body th,
.zm-doc__body td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.zm-doc__body th {
  background: var(--surface-2);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
}

.zm-doc__body td {
  min-width: 8em;
  color: var(--text);
}

/* pages/home.css */
/* Home (design/DESIGN.md §5, v2): hero, listings, wanted ads, how it works. */

.zm-home {
  display: flex;
  flex-direction: column;
  gap: 44px;
  padding-top: var(--sp-4);
}

/* Hero: title and live count, shortcut glyphs, actions, then real figures. Flat, no image. */
.zm-hero {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 36px 40px 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.zm-hero__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.zm-hero h1 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.zm-hero__lead {
  color: var(--muted);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

/* Shortcuts: solid glyph on a tile, label below; one row on wide screens. */
.zm-shortcuts {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zm-shortcuts a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 2px;
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  transition: color 0.15s;
}

.zm-shortcuts__glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  color: var(--text);
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.zm-shortcuts a:hover {
  color: var(--text);
  text-decoration: none;
}

.zm-shortcuts a:hover .zm-shortcuts__glyph {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.zm-hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
}

.zm-hero__note {
  color: var(--muted);
  font-size: 13px;
}

/* How it works: four numbered cards. */
/*
 * How it works: a rail of four numbered steps. Grey nodes are steps on the site; the gold node is
 * the payment, wallet to wallet, with a small route drawing. The legend explains the two colours.
 */
.zm-howto {
  gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
}

.zm-howto__rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zm-howto__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* The rail: from each node to the next one, across the column gap. */
.zm-howto__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 15px;
  left: 40px;
  right: calc(-1 * var(--sp-6) + 8px);
  height: 2px;
  border-radius: 1px;
  background: var(--border-strong);
}

.zm-howto__node {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: var(--sp-3);
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.zm-howto__step--wallet .zm-howto__node {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 0 0 5px var(--accent-soft);
}

.zm-howto__step h3 {
  font-size: var(--fs-lg);
}

.zm-howto__step p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* "Your wallet ━━▶ Seller's wallet": the money path, with nothing in between. */
.zm-howto__route {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  background: var(--accent-soft);
}

.zm-howto .zm-howto__route span {
  color: var(--link);
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
}

.zm-howto .zm-howto__route .zm-howto__arrow {
  position: relative;
  flex: 1;
  min-width: 24px;
  height: 2px;
  background: var(--accent);
}

.zm-howto__arrow::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -1px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--accent);
}

.zm-howto__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  margin: 0;
  padding: var(--sp-4) 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
}

.zm-howto__key {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--muted);
  font-size: 13px;
}

.zm-howto__key::before {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-2);
}

.zm-howto__key--wallet::before {
  border-color: var(--accent);
  background: var(--accent);
}

.zm-home__empty {
  padding: var(--sp-6);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-card);
  color: var(--muted);
  text-align: center;
}

@media (max-width: 1179px) {
  .zm-shortcuts {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    row-gap: var(--sp-3);
  }
}

@media (max-width: 1023px) {
  .zm-hero {
    padding: var(--sp-8);
  }

  .zm-howto__rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--sp-8);
  }

  .zm-howto__step:nth-child(2)::after {
    display: none;
  }
}

@media (max-width: 767px) {
  .zm-home {
    gap: var(--sp-8);
    padding-top: 0;
  }

  .zm-hero {
    gap: var(--sp-5);
    padding: var(--sp-5);
  }

  .zm-hero h1 {
    gap: 10px;
    font-size: 28px;
  }

  .zm-hero__lead {
    font-size: var(--fs-lg);
  }

  .zm-shortcuts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .zm-shortcuts a {
    font-size: var(--fs-sm);
  }

  .zm-shortcuts__glyph {
    width: 54px;
    height: 54px;
  }

  /* Phones: the rail turns vertical, the nodes in a left column. */
  .zm-howto {
    gap: var(--sp-5);
    padding: var(--sp-5) var(--sp-4) var(--sp-4);
  }

  .zm-howto__rail {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--sp-6);
  }

  .zm-howto__step {
    padding-left: 48px;
  }

  .zm-howto__node {
    position: absolute;
    top: -4px;
    left: 0;
    margin: 0;
  }

  .zm-howto__step:not(:last-child)::after,
  .zm-howto__step:nth-child(2)::after {
    display: block;
    top: 36px;
    bottom: calc(-1 * var(--sp-6) + 4px);
    left: 15px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .zm-howto__legend {
    flex-direction: column;
  }
}

/* pages/listing-form.css */
/*
 * Listing form (mockup NewListing). On a new listing, the fields that do not apply to the
 * checked type are hidden: every conditional block has `zm-when` and one `zm-for-<type>` class
 * per type it applies to. Without `:has()` support, everything stays visible (the server
 * ignores fields that do not apply). One rule per listing type of phase 1.
 */

.zm-listing-form:has(#type-sell-product:checked) .zm-when:not(.zm-for-sell-product),
.zm-listing-form:has(#type-buy-product:checked) .zm-when:not(.zm-for-buy-product),
.zm-listing-form:has(#type-sell-service:checked) .zm-when:not(.zm-for-sell-service),
.zm-listing-form:has(#type-buy-service:checked) .zm-when:not(.zm-for-buy-service),
.zm-listing-form:has(#type-accommodation:checked) .zm-when:not(.zm-for-accommodation),
.zm-listing-form:has(#type-list-business:checked) .zm-when:not(.zm-for-list-business),
.zm-listing-form:has(#type-sell-exchange:checked) .zm-when:not(.zm-for-sell-exchange),
.zm-listing-form:has(#type-buy-exchange:checked) .zm-when:not(.zm-for-buy-exchange),
.zm-listing-form:has(#type-sell-digital-download:checked)
  .zm-when:not(.zm-for-sell-digital-download) {
  display: none;
}

/* The amount only matters for a fixed price; the country and city only for a local listing. */
.zm-listing-form:has(input[name='pricing_mode'][value='offer']:checked) .zm-when-fixed,
.zm-listing-form:not(:has(input[name='location_mode'][value='local']:checked)) .zm-when-local {
  display: none;
}

.zm-types__help {
  color: var(--muted);
  font-size: 13px;
}

/* Photo manager, above the form when editing. */
.zm-images__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zm-images__grid li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.zm-images__grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--ph1);
}

.zm-images__upload {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

/* pages/listing.css */
/*
 * Listing page (mockup Listing): gallery 520 px · details · buy box 300 px, collapsing to one
 * column below 1024 px with the buy box right after the price. Then the seller card beside the
 * reviews, then more listings from the seller.
 */

.zm-listing {
  display: grid;
  grid-template-columns: var(--gallery) minmax(0, 1fr) var(--buybox);
  grid-template-areas: 'gallery main buy';
  gap: var(--sp-8);
  align-items: start;
}

.zm-listing__gallery {
  grid-area: gallery;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.zm-listing__cover {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  max-height: 560px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  background: var(--ph1);
  color: var(--ph-ink);
}

.zm-listing__cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.zm-listing__cover--empty {
  flex-direction: column;
  gap: var(--sp-2);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zm-listing__minis {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zm-listing__minis a {
  display: block;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.zm-listing__minis a:hover {
  border: 2px solid var(--accent);
}

.zm-listing__minis img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zm-listing__main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.zm-listing__by {
  font-size: var(--fs-md);
}

.zm-listing__price {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}

.zm-listing__price b {
  font-size: var(--fs-price-lg);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.zm-listing__price span {
  color: var(--muted);
  font-size: var(--fs-lg);
}

.zm-listing__about {
  margin-top: var(--sp-3);
  font-size: var(--fs-h3);
}

/* Buy box. */
.zm-buybox {
  grid-area: buy;
}

@media (min-width: 1024px) {
  .zm-buybox {
    position: sticky;
    top: 84px;
  }
}

.zm-buybox__price {
  color: var(--link);
  font-size: var(--fs-h1);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.zm-buybox__note {
  color: var(--muted);
  font-size: 13px;
}

.zm-buybox__small {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.zm-buybox__small a {
  font-size: var(--fs-sm);
}

.zm-buybox__stock {
  color: var(--success);
  font-size: var(--fs-md);
  font-weight: 700;
}

.zm-buybox__stock--out {
  color: var(--danger);
}

.zm-buybox__form {
  gap: var(--sp-3);
}

.zm-buybox__form select {
  height: 36px;
}

.zm-input--qty {
  width: 90px;
}

.zm-buybox__note-field > summary {
  font-size: 13px;
}

.zm-buybox__note-field[open] {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.zm-listing__side {
  grid-area: buy;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Seller card + reviews. */
.zm-listing__more {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
}

.zm-seller {
  gap: var(--sp-2);
  font-size: 13px;
}

.zm-seller__id {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-md);
}

.zm-avatar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ph2);
  font-weight: 800;
  text-transform: uppercase;
}

.zm-online {
  color: var(--success);
  font-size: var(--fs-sm);
}

.zm-reviews h2 {
  margin-bottom: var(--sp-1);
  font-size: 20px;
}

@media (max-width: 1279px) {
  .zm-listing {
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr) var(--buybox);
    gap: var(--sp-6);
  }

  .zm-listing__cover {
    height: 380px;
  }
}

@media (max-width: 1023px) {
  .zm-listing {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'gallery' 'main' 'buy';
    gap: var(--sp-5);
  }

  .zm-listing__cover {
    height: 320px;
  }

  .zm-listing__more {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
  }
}

/* Reviews (listing page, profile, order page). */
.zm-reviews__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zm-review {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.zm-review:last-child {
  border-bottom: 0;
}

.zm-review__meta {
  color: var(--faint);
  font-size: var(--fs-sm);
}

.zm-reviews__all {
  display: inline-block;
  margin-top: 10px;
}

.zm-reviews__list.zm-panel {
  gap: 0;
  padding-block: var(--sp-1);
}

/* Star picker without JavaScript: radios in reverse order, the checked star and those before it lit. */
.zm-ratepick {
  margin: 0;
  padding: 0;
  border: 0;
}

.zm-ratepick__stars {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 2px;
}

.zm-ratepick__stars input {
  position: absolute;
  opacity: 0;
}

.zm-ratepick__stars label {
  color: var(--border-strong);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.zm-ratepick__stars input:checked ~ label,
.zm-ratepick__stars label:hover,
.zm-ratepick__stars label:hover ~ label {
  color: var(--link-hover);
}

.zm-ratepick__stars input:focus-visible + label {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* pages/messages.css */
/*
 * Messages (mockup Messages): conversations on the left, the thread on the right; the other
 * person's bubbles on the left on --surface-2, one's own on the right on --accent-soft. In manual
 * PGP mode every message is an encrypted block, shown dashed in a mono <pre>.
 */

.zm-chat {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  min-height: 560px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  background: var(--surface);
  box-shadow: 0 1px 3px -1px var(--shadow);
}

.zm-chat__list {
  border-right: 1px solid var(--border);
}

.zm-chat__head {
  padding: 14px;
  border-bottom: 1px solid var(--border);
}

.zm-chat__head h1 {
  font-size: 20px;
}

.zm-chat__head--thread {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  padding: 14px 18px;
}

.zm-chat__head--thread h2 {
  font-size: var(--fs-md);
}

.zm-chat__key {
  max-width: 320px;
  text-align: right;
}

.zm-chat__item {
  display: flex;
  gap: 10px;
  padding: var(--sp-3) 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.zm-chat__item:hover {
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}

.zm-chat__item--active,
.zm-chat__item--active:hover {
  background: var(--accent-soft);
}

.zm-avatar--sm {
  width: 38px;
  height: 38px;
}

.zm-chat__summary {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}

.zm-chat__line {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
}

.zm-chat__empty {
  padding: 18px;
}

.zm-chat__thread {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.zm-chat__messages {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--sp-3);
  margin: 0;
  padding: 18px;
  list-style: none;
  background: var(--bg);
}

.zm-bubble {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  align-self: flex-start;
  max-width: min(560px, 100%);
  padding: 10px 14px;
  border: 1px dashed var(--border-strong);
  border-radius: 14px 14px 14px 4px;
  background: var(--surface-2);
}

.zm-bubble--mine {
  align-self: flex-end;
  border-color: var(--accent-line);
  border-radius: 14px 14px 4px 14px;
  background: var(--accent-soft);
}

.zm-bubble__text {
  margin: 0;
  overflow-x: auto;
  color: var(--muted);
  font-size: var(--fs-sm);
  white-space: pre;
}

.zm-bubble__meta {
  color: var(--faint);
  font-size: var(--fs-xs);
}

.zm-bubble--mine .zm-bubble__meta {
  text-align: right;
}

.zm-chat__compose {
  padding: 14px 18px;
  border-top: 1px solid var(--border);
}

.zm-chat__compose .zm-form {
  gap: var(--sp-2);
}

.zm-chat__send {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

@media (max-width: 767px) {
  .zm-chat {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .zm-chat__list {
    border-right: 0;
  }

  /* One pane at a time: the list, or the open conversation. */
  .zm-chat--thread .zm-chat__list,
  .zm-chat:not(.zm-chat--thread) .zm-chat__thread {
    display: none;
  }

  .zm-chat__messages {
    padding: var(--sp-3);
  }

  .zm-chat__key {
    text-align: left;
  }

  .zm-chat__send {
    flex-direction: column;
    align-items: stretch;
  }
}

/* pages/order.css */
/* Order page (mockup Order) and the orders list. */

.zm-orderhead h1 {
  font-size: var(--fs-h1);
}

.zm-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--sp-6);
  align-items: start;
}

.zm-order__side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.zm-order__address {
  min-height: 4.5em;
  resize: vertical;
  font-size: var(--fs-sm);
}

@media (max-width: 767px) {
  .zm-order__address {
    min-height: 9.5em;
  }
}

.zm-order__more {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
  align-items: start;
}

.zm-order__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.zm-order__thumb {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ph1);
  color: var(--ph-ink);
}

.zm-order__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zm-order__more-action > summary {
  font-size: 13px;
  text-align: center;
}

.zm-order__more-action[open] > summary {
  margin-bottom: 10px;
}

/* Payment block: QR tile on the left, amounts and address on the right (mockup Order). */
.zm-pay {
  display: flex;
  gap: 26px;
}

.zm-pay__qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.zm-qr-tile {
  width: 236px;
  padding: var(--sp-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--qr-bg);
}

.zm-qr {
  display: block;
  width: 100%;
  height: auto;
}

.zm-qr__bg {
  fill: var(--qr-bg);
}

.zm-qr__ink {
  fill: var(--qr-ink);
}

.zm-pay__details {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--sp-3);
  min-width: 0;
}

/* Activity: newest first, a dot per event. */
.zm-activity {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zm-activity__item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-left: 20px;
}

.zm-activity__item::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--success);
}

.zm-activity__item--rejected::before,
.zm-activity__item--cancelled::before,
.zm-activity__item--expired::before,
.zm-activity__item--disputed::before {
  background: var(--danger);
}

/* Purchases / sales switch on /orders/. */
.zm-switch {
  display: flex;
  gap: 6px;
}

.zm-switch a {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
}

.zm-switch a:hover {
  text-decoration: none;
  background: var(--surface-2);
}

.zm-switch a[aria-current='page'] {
  border-color: var(--text);
  font-weight: 700;
}

.zm-table__unread td {
  font-weight: 600;
}

@media (max-width: 1023px) {
  .zm-order,
  .zm-order__more {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .zm-pay {
    flex-direction: column;
    align-items: stretch;
  }

  .zm-qr-tile {
    align-self: center;
  }
}

/* Moderation area. */
.zm-admin-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zm-admin-card {
  color: var(--text);
}

.zm-admin-card:hover {
  border-color: var(--border-strong);
  color: var(--text);
  text-decoration: none;
}

.zm-admin-card__count {
  font-size: var(--fs-price-lg);
  font-weight: 700;
}

@media (max-width: 767px) {
  .zm-admin-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}