/*
 * kycbmarket design system. Plain CSS, no build step, no JavaScript.
 * Layers decide precedence: later layers win regardless of selector weight, so the
 * frame (layout) and page rules can adjust shared components without !important.
 * Tokens and components are documented in docs/DESIGN_SYSTEM.md.
 */
@layer reset, tokens, base, components, layout, pages, utilities;

/* ---------- Reset ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
  img { max-width: 100%; height: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; scroll-behavior: auto !important; }
  }
}

/* ---------- Tokens ---------- */
@layer tokens {
  :root {
    /* Native controls, scrollbars and the canvas follow the visitor's light or dark preference. */
    color-scheme: light dark;
    /* Colour: every text pair meets WCAG AA; control borders and focus meet 3:1.
       --blue and the status colours are for text and lines; --accent, --danger and --success fill
       buttons and badges under --on-accent text. Dark values are below. */
    --bg: #fff;
    --ink: #182b47;
    --muted: #56657c;
    --blue: #2346ad;
    --blue-soft: #eaf0fc;
    --blue-tint: #dce7ff;
    --blue-line: #c9d6ee;
    --blue-line-hover: #a6b9dd;
    --surface: #f0f4fa;
    --surface-soft: #f8faff;
    --panel: #fbfcff;
    --line: #dce3ee;
    --field-border: #7d8aa0;
    --focus: #182b47;
    --accent: #2346ad;
    --accent-hover: #19347f;
    --on-accent: #fff;
    --danger: #a82f3d;
    --danger-hover: #7f1d2b;
    --success: #0d6f5b;
    --disabled-bg: #c4ccd8;
    --disabled-ink: #3d4b60;
    --green: #0d6f5b;
    --green-soft: #e8f4ee;
    --green-line: #b6dbc6;
    --red: #a82f3d;
    --red-ink: #7f1d2b;
    --red-soft: #fcecee;
    --red-line: #efc3c9;
    --amber-ink: #5b400a;
    --amber-soft: #fff6dc;
    --amber-line: #ebd18c;
    --orange-ink: #6b3410;
    --orange-soft: #fde8d7;
    --info-soft: #edf5ff;
    --info-line: #ccdcf5;
    --star: #b7791f;
    /* QR codes stay dark on white in both themes, or phones cannot scan them. */
    --qr-bg: #fff;

    /* Type: 12px floor, 16px body, fluid headings. */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    --font-brand: "Trebuchet MS", system-ui, sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: clamp(1.5rem, 1.25rem + 1vw, 1.75rem);
    --text-3xl: clamp(1.75rem, 1.3rem + 1.8vw, 2.25rem);
    --text-hero: clamp(2rem, 1.3rem + 2.6vw, 2.75rem);
    --leading: 1.6;
    --leading-tight: 1.2;
    --tracking-tight: -0.02em;

    /* Space, shape, depth, touch targets. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --shadow-pop: 0 10px 30px rgba(24, 43, 71, 0.14);
    --target: 24px;
    --page-width: 1320px;
    --gutter: clamp(16px, 4vw, 36px);
  }
  /* Category identity on product cards: a soft background, a lighter decorative icon and a label at AA
     contrast. Blue is the default tone; .tone-blue names it outside .product-art (admin previews). */
  .product-art, .tone-blue { --art-bg: #e3eafa; --art-icon: #9db1df; --art-ink: #2e4973; }
  .tone-green { --art-bg: #e7f1ef; --art-icon: #93c2b5; --art-ink: #1f5246; }
  .tone-violet { --art-bg: #ece8f8; --art-icon: #ab9edb; --art-ink: #47387f; }
  .tone-amber { --art-bg: #fbf0d6; --art-icon: #d9b56a; --art-ink: #5b400a; }
  .tone-rose { --art-bg: #f9e6ea; --art-icon: #dc9fae; --art-ink: #7a2a3d; }
  .tone-slate { --art-bg: #e9edf2; --art-icon: #a7b2c1; --art-ink: #39465a; }

  /* Dark theme: the same pairs, checked with ops/ui_audit.py --color-scheme dark. Text colours get
     lighter, fills stay deep enough for white text, soft backgrounds turn into dark tints. */
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0e1521;
      --ink: #e3e9f2;
      --muted: #a3b1c6;
      --blue: #8fb2ff;
      --blue-soft: #1b2a46;
      --blue-tint: #22355c;
      --blue-line: #34476b;
      --blue-line-hover: #5b76ab;
      --surface: #1b2534;
      --surface-soft: #131c29;
      --panel: #161f2d;
      --line: #2a3749;
      --field-border: #7c8ca4;
      --focus: #e3e9f2;
      --accent: #3b62d4;
      --accent-hover: #2d51bb;
      --danger: #b83a4b;
      --danger-hover: #9c2d3d;
      --success: #167a5f;
      --disabled-bg: #2a3446;
      --disabled-ink: #a3b1c6;
      --green: #62d0a8;
      --green-soft: #10302a;
      --green-line: #245a4b;
      --red: #ff9aa4;
      --red-ink: #ffbac1;
      --red-soft: #3b1820;
      --red-line: #6b2d38;
      --amber-ink: #f2d085;
      --amber-soft: #30260d;
      --amber-line: #6b5521;
      --orange-ink: #ffc7a3;
      --orange-soft: #3a2112;
      --info-soft: #142339;
      --info-line: #2c4164;
      --star: #f0b44c;
      --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.5);
    }
    .product-art, .tone-blue { --art-bg: #1c2b4a; --art-icon: #4d6aa6; --art-ink: #bccff7; }
    .tone-green { --art-bg: #14302b; --art-icon: #3f8a75; --art-ink: #a8e0cf; }
    .tone-violet { --art-bg: #262043; --art-icon: #6f60ae; --art-ink: #d1c7f5; }
    .tone-amber { --art-bg: #32270d; --art-icon: #94762d; --art-ink: #f2d48e; }
    .tone-rose { --art-bg: #3a1b25; --art-icon: #a65b6f; --art-ink: #f6bfcc; }
    .tone-slate { --art-bg: #222a37; --art-icon: #5f6c80; --art-ink: #c6d0dd; }
  }
  @media (pointer: coarse) {
    :root { --target: 44px; }
  }
  /* Scripts with their own typographic needs: no negative tracking, taller lines. */
  :lang(ar) {
    --font-sans: "Segoe UI", "Noto Naskh Arabic", "Noto Sans Arabic", Tahoma, system-ui, sans-serif;
    --leading: 1.8;
    --tracking-tight: 0;
  }
  :lang(hi) {
    --font-sans: "Nirmala UI", "Noto Sans Devanagari", Mangal, system-ui, sans-serif;
    --leading: 1.8;
    --tracking-tight: 0;
  }
  :lang(zh-hans) {
    --font-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", system-ui, sans-serif;
    --leading: 1.75;
    --tracking-tight: 0;
  }
}

/* ---------- Base elements ---------- */
@layer base {
  html { -webkit-text-size-adjust: 100%; }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: var(--leading);
    /* A word longer than its line (pseudo-language, compounds, addresses) wraps instead of widening the page. */
    overflow-wrap: break-word;
  }
  h1, h2, h3, h4 { line-height: var(--leading-tight); font-weight: 700; letter-spacing: var(--tracking-tight); }
  h1 { font-size: var(--text-3xl); margin: var(--space-4) 0 var(--space-5); }
  h2 { font-size: var(--text-xl); margin: var(--space-6) 0 var(--space-4); }
  h3 { font-size: var(--text-lg); margin: 0 0 var(--space-2); }
  p { max-width: 78ch; margin: 0 0 var(--space-4); }
  a { color: var(--blue); text-decoration: none; }
  a:hover { text-decoration: underline; }
  hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-5) 0; }
  small { font-size: var(--text-xs); }
  code { font-family: var(--font-mono); font-size: var(--text-xs); overflow-wrap: anywhere; word-break: break-word; }
  summary { cursor: pointer; font-weight: 600; }
  details[open] > summary { margin-bottom: var(--space-4); }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  label { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-1); }
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    border: 1px solid var(--field-border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--ink);
    padding: 9px 11px;
  }
  input[type=file] { padding: 7px 9px; }
  input[type=file]::file-selector-button {
    margin-inline-end: var(--space-3);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
    color: var(--ink);
    padding: 4px 12px;
    font-weight: 600;
  }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blue); flex-shrink: 0; }
  input[disabled], select[disabled], textarea[disabled] { background: var(--surface); color: var(--muted); }
  textarea { resize: vertical; }
  table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
  th, td { text-align: start; padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
  th { background: var(--surface); font-size: var(--text-xs); color: var(--muted); font-weight: 600; }
  tbody tr:last-child td { border-bottom: 0; }
  /* Codes, prices and the wordmark keep their own direction inside RTL text. */
  .brand, .wallet-chip, .price, .money, code { direction: ltr; unicode-bidi: isolate; }
}

/* ---------- Layout: page frame, header, navigation, footer ---------- */
@layer layout {
  .skip { position: absolute; top: -60px; background: var(--bg); padding: var(--space-3); z-index: 40; }
  .skip:focus { top: 5px; }
  .sandbox { background: var(--amber-soft); color: var(--amber-ink); font-size: var(--text-xs); text-align: center; padding: 6px 14px; }
  .maintenance { background: var(--orange-soft); color: var(--orange-ink); font-size: var(--text-sm); font-weight: 600; text-align: center; padding: 8px 14px; }

  .header {
    position: relative;
    max-width: 1440px;
    margin: auto;
    min-height: 80px;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 4.5%;
    border-bottom: 1px solid var(--line);
  }
  .brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: var(--target);
    font-family: var(--font-brand);
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--ink);
  }
  .brand-name span, footer .brand span { font-weight: 400; color: var(--blue); margin-inline-start: -7px; }
  .brand:hover { text-decoration: none; }
  .main-nav { display: flex; gap: 26px; white-space: nowrap; margin-inline: 28px auto; }
  .main-nav a, .menu-section a { display: flex; align-items: center; min-height: 36px; }
  .main-nav a { color: var(--ink); }
  .main-nav a[aria-current=page], .menu-section a[aria-current=page] {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }
  .header-actions { display: flex; align-items: center; gap: 14px; }
  .sign-in { display: inline-flex; align-items: center; min-height: var(--target); white-space: nowrap; }
  .header-actions .button { white-space: nowrap; }
  .wallet-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; font-weight: 600; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 10px; white-space: nowrap; }
  .wallet-chip small { font-size: var(--text-xs); color: var(--muted); }

  /* Header menus are <details> elements: they open and close without JavaScript. */
  .language-menu, .account-menu { position: relative; }
  .language-menu summary, .account-menu summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    font-size: var(--text-sm);
    color: var(--ink);
  }
  .account-menu summary { padding: 3px 8px 3px 3px; border-radius: 22px; }
  .language-menu summary::-webkit-details-marker, .account-menu summary::-webkit-details-marker { display: none; }
  .language-menu summary::after, .account-menu summary::after { content: "\25BE"; font-size: var(--text-xs); color: var(--muted); }
  .language-menu[open] > summary, .account-menu[open] > summary { margin-bottom: 0; border-color: var(--field-border); }
  .account-menu .avatar { width: 32px; height: 32px; font-size: var(--text-sm); }
  .menu-icon { font-size: 20px; line-height: 1; padding-inline-start: 5px; }
  .count {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--danger);
    color: var(--on-accent);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1;
  }
  .language-menu ul, .menu-panel {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 6px);
    z-index: 30;
    margin: 0;
    padding: 6px;
    min-width: 200px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
  }
  .language-menu ul { list-style: none; }
  .menu-panel { min-width: 250px; padding: 8px 14px; }
  .menu-panel ul { list-style: none; margin: 0; padding: 0; }
  .menu-section { display: grid; padding: 6px 0; border-top: 1px solid var(--line); margin: 0; }
  .menu-user { margin: 4px 0 6px; font-weight: 700; overflow-wrap: anywhere; }
  .menu-heading { margin: 4px 0; font-size: var(--text-xs); color: var(--muted); font-weight: 600; }
  .menu-section a { justify-content: space-between; gap: 12px; color: var(--ink); }
  .menu-section button.quiet { justify-content: flex-start; width: 100%; min-height: 36px; }
  .language-form { margin: 0; }
  .language-form li button {
    width: 100%;
    min-height: 40px;
    justify-content: flex-start;
    margin: 0;
    padding: 8px 12px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink);
    font-weight: 500;
  }
  .language-form li button:hover { background: var(--surface); }
  .language-form li button[aria-current] { background: var(--blue-soft); font-weight: 700; }
  .site-menu, .phone-only { display: none; }

  .notices { max-width: 1248px; margin: 20px auto 0; padding: 0 var(--gutter); }
  .page { max-width: var(--page-width); padding: 36px var(--gutter) 70px; margin: auto; min-height: 65vh; }

  footer {
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 30px 5%;
    gap: 12px 20px;
    font-size: var(--text-sm);
    background: var(--surface-soft);
  }
  footer .brand { font-size: 21px; }
  footer p { color: var(--muted); margin: 0; font-size: var(--text-xs); }
  footer nav { display: flex; flex-wrap: wrap; gap: 0 22px; }
  footer a { display: inline-flex; align-items: center; min-height: var(--target); }
  footer .onion, footer .timezone { flex-basis: 100%; max-width: none; }

  @media (min-width: 1500px) { .page { max-width: 1380px; } }
  @media (max-width: 1100px) {
    .header { padding-inline: 24px; }
    .main-nav { gap: 17px; margin-inline-start: 12px; }
    .main-nav a { font-size: var(--text-sm); }
    .header-actions { gap: 10px; }
  }
  /* Phones: one row with the logo, the balance and a single menu holding everything else. */
  @media (max-width: 780px) {
    .header { min-height: 0; padding: 10px 16px; gap: 10px; }
    .brand { font-size: 21px; }
    .main-nav, .language-menu, .sign-in { display: none; }
    .header-actions { margin-inline-start: auto; gap: 8px; }
    .account-menu, .site-menu { position: static; display: block; }
    .phone-only { display: grid; }
    .menu-panel { inset-inline: 12px; top: calc(100% - 4px); max-height: calc(100vh - 80px); overflow-y: auto; }
    .wallet-chip { font-size: var(--text-sm); }
    .wallet-chip small { display: none; }
    .page { padding-top: 25px; padding-bottom: 45px; }
    footer { padding: 25px 20px; }
  }
  @media (max-width: 420px) {
    .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  }
}

/* ---------- Components ---------- */
@layer components {
  /* Line icons (templates/components/icon.html): stroke only, in the colour of the text around them. */
  .icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.75;
    stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
  /* Buttons: primary by default; .secondary, .quiet and .danger variants; .small and .full sizes. */
  button, .button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--on-accent);
    border-radius: 7px;
    padding: 10px 19px;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.4;
  }
  button:hover, .button:hover { background: var(--accent-hover); text-decoration: none; }
  button:disabled { background: var(--disabled-bg); border-color: var(--disabled-bg); color: var(--disabled-ink); cursor: not-allowed; }
  .secondary { background: var(--bg); color: var(--blue); border-color: var(--blue-line); }
  .secondary:hover { background: var(--blue-soft); }
  .quiet { min-height: var(--target); border: 0; padding: 2px; background: none; color: var(--blue); font-weight: 500; }
  .quiet:hover { background: none; text-decoration: underline; }
  .danger { background: var(--danger); border-color: var(--danger); color: var(--on-accent); }
  .danger:hover { background: var(--danger-hover); }
  .quiet.danger, .danger-text { background: none; color: var(--red); }
  .small { min-height: 36px; padding: 6px 14px; font-size: var(--text-sm); }
  .full { width: 100%; }
  form > button:not(:first-child), form > .button:not(:first-child) { margin-top: var(--space-2); }
  .actions, .form-actions { display: flex; align-items: center; gap: var(--space-3) var(--space-5); flex-wrap: wrap; margin-top: var(--space-4); }
  .actions form, .form-actions form { margin: 0; }
  .actions button, .form-actions button { margin: 0; }

  /* Fields: rendered by templates/forms/field.html for every Django and allauth form. */
  .field { margin: 0 0 var(--space-5); }
  .field-label { display: block; margin-bottom: var(--space-1); font-size: var(--text-sm); font-weight: 600; }
  .optional { font-weight: 400; color: var(--muted); }
  .field-help { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--muted); }
  .field-help ul { margin: var(--space-1) 0 0; padding-inline-start: 18px; }
  .field-errors, .errorlist { margin: var(--space-1) 0 0; padding: 0; list-style: none; color: var(--red); font-size: var(--text-sm); font-weight: 600; }
  .field-invalid input:not([type=checkbox]):not([type=radio]), .field-invalid select, .field-invalid textarea { border: 2px solid var(--red); }
  .field-check { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
  .field-check .check-label { flex: 1; margin: 0; font-weight: 500; }
  .field-check .field-help, .field-check .field-errors { flex-basis: 100%; }
  .field fieldset { border: 0; padding: 0; margin: 0; }
  .field fieldset > div { display: grid; gap: var(--space-2); }
  .field fieldset label { display: flex; align-items: center; gap: var(--space-2); font-weight: 500; }
  .form-errors p { margin: 0; }
  .error { color: var(--red); font-size: var(--text-sm); font-weight: 600; }
  .check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); margin-bottom: var(--space-5); }

  /* Search box. */
  .search { display: flex; border: 1px solid var(--field-border); border-radius: 8px; background: var(--bg); padding: 5px; max-width: 540px; }
  .search input:not([type=hidden]) { border: 0; background: none; flex: 1; min-width: 0; min-height: 40px; padding: 8px 12px; }
  .search button { margin: 0; }
  .search-compact { margin: 0 0 28px; }

  /* Alerts: Django message levels map to .notice-success, -error, -warning, -info. */
  .notice { padding: 13px 18px; background: var(--info-soft); border: 1px solid var(--info-line); border-radius: 7px; margin: 12px 0; }
  .notice p:last-child { margin: 0; }
  .notice-success { background: var(--green-soft); border-color: var(--green-line); }
  .notice-error { background: var(--red-soft); border-color: var(--red-line); color: var(--red-ink); }
  .notice-warning { background: var(--amber-soft); border-color: var(--amber-line); color: var(--amber-ink); }

  /* Badges and status chips. */
  .status { display: inline-block; padding: 4px 8px; background: var(--surface); color: var(--muted); border-radius: 4px; font-size: var(--text-xs); white-space: nowrap; }
  .status-delivered { background: var(--amber-soft); color: var(--amber-ink); }
  .status-disputed { background: var(--red-soft); color: var(--red); }
  .status-released, .status-published { background: var(--green-soft); color: var(--green); }
  .status-pending { background: var(--amber-soft); color: var(--amber-ink); }
  .status-rejected { background: var(--red-soft); color: var(--red); }
  .type-tag { font-size: var(--text-xs); color: var(--muted); background: var(--surface); border-radius: 4px; padding: 3px 7px; white-space: nowrap; }
  .trust-tag { background: var(--green-soft); color: var(--green); padding: 4px 10px; border-radius: 5px; font-size: var(--text-xs); white-space: nowrap; }
  .verified { color: var(--green); font-weight: 700; }
  .rating, .money { white-space: nowrap; }
  .money small { font-size: var(--text-xs); color: var(--muted); font-weight: 400; }

  /* Avatars. */
  .avatar {
    width: 37px;
    height: 37px;
    border-radius: 50%;
    background: var(--blue-soft);
    color: var(--blue);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: var(--text-md);
    font-weight: 700;
    flex-shrink: 0;
  }
  .avatar.large { width: 85px; height: 85px; font-size: 34px; }
  .mini-avatar { background: var(--surface); border-radius: 50%; width: 24px; height: 24px; display: inline-grid; place-items: center; font-size: var(--text-xs); }

  /* Panels, summaries, definition lists. */
  .panel { border: 1px solid var(--line); padding: 22px; border-radius: var(--radius-md); margin: 22px 0; }
  .panel h2, .panel h3 { margin-top: 0; }
  .green-panel { background: var(--green-soft); border-color: var(--green-line); }
  .form-panel { max-width: 760px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; margin: 10px auto; padding: 32px; }
  .form-panel.narrow { max-width: 560px; }
  .form-panel h1 { font-size: var(--text-2xl); margin-top: 0; }
  .summary { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--radius-md); margin: 26px 0 36px; padding: 25px; }
  .summary > div { display: flex; flex-direction: column; gap: var(--space-2); border-inline-end: 1px solid var(--line); padding-inline-start: 25px; min-width: 0; }
  .summary > div:first-child { padding-inline-start: 0; }
  .summary > div:last-child { border: 0; }
  .summary > div > span { font-size: var(--text-xs); color: var(--muted); }
  .summary strong { font-size: var(--text-xl); overflow-wrap: anywhere; }
  .summary small { font-size: var(--text-xs); }
  .details { padding: 0; margin: 25px 0; }
  .details > div { display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); padding: 12px 0; font-size: var(--text-sm); }
  .details dt { color: var(--muted); }
  .details dd { margin: 0; text-align: end; max-width: 65%; overflow-wrap: anywhere; }

  /* Tables scroll on wide screens; .data-table rows become labelled cards on phones. */
  .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 9px; margin-bottom: 25px; }

  /* Row lists: rentals, listings, addresses, conversations. */
  .rental-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 5px; border-bottom: 1px solid var(--line); font-size: var(--text-sm); color: var(--ink); }
  .rental-row p { font-size: var(--text-xs); color: var(--muted); margin: 5px 0 0; }
  a.rental-row:hover { text-decoration: none; background: var(--surface-soft); }
  .rental-row > * { min-width: 0; }
  .rental-row a, .actions a { display: inline-flex; align-items: center; min-height: var(--target); }
  .notification { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm); margin: 0; }
  .notification small { color: var(--muted); margin-inline-start: 12px; }

  /* Empty states, pagination, tabs, back link, section headings. */
  .empty { grid-column: 1 / -1; padding: 47px 35px; background: var(--surface-soft); border: 1px dashed var(--blue-line); border-radius: var(--radius-md); text-align: center; }
  .empty p { margin-inline: auto; }
  .pagination { display: flex; justify-content: center; align-items: center; gap: 25px; margin: 25px 0; }
  .pagination a { display: inline-flex; align-items: center; min-height: var(--target); }
  .tabs { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 28px 0; }
  .tabs a { display: inline-flex; align-items: center; min-height: var(--target); padding: 8px 13px; }
  .tabs .active { background: var(--blue-soft); border-radius: var(--radius-sm); }
  .back { display: inline-flex; align-items: center; min-height: var(--target); margin: 0 0 18px; color: var(--muted); font-size: var(--text-sm); }
  .section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin: 0 0 17px; }
  .section-heading h1, .section-heading h2 { margin: 0; }
  .section-heading > span { font-size: var(--text-xs); }
  .section-heading p { margin-bottom: 0; }
  .muted, .fine { color: var(--muted); }
  .fine { font-size: var(--text-xs); }
  .nowrap { white-space: nowrap; }

  @media (max-width: 780px) {
    .summary { padding: 16px; gap: 12px; }
    .summary > div { padding-inline-start: 12px; }
    .summary strong { font-size: var(--text-lg); }
    .form-panel { padding: 22px; }
    .rental-row { flex-wrap: wrap; gap: 12px; }
    th, td { padding: 12px; }
    .avatar { width: 31px; height: 31px; }
    .avatar.large { width: 65px; height: 65px; font-size: 25px; }
  }
  /* Three figures side by side do not fit long labels (German, pseudo-language) on small phones. */
  @media (max-width: 480px) {
    .summary { grid-template-columns: 1fr; }
    .summary > div { padding: 0 0 12px; border-inline-end: 0; border-bottom: 1px solid var(--line); }
    .summary > div:last-child { padding-bottom: 0; }
    .summary > div > span { overflow-wrap: anywhere; }
  }
  /* Small labels: unread, new, your turn, verification window. */
  .new-tag, .action-tag {
    display: inline-block;
    margin-inline-start: var(--space-2);
    padding: 1px 7px;
    border-radius: 4px;
    font-size: var(--text-xs);
    font-weight: 700;
    white-space: nowrap;
  }
  .new-tag { background: var(--accent); color: var(--on-accent); }
  .action-tag { background: var(--amber-soft); color: var(--amber-ink); border: 1px solid var(--amber-line); }
  .verified { margin: 0; color: var(--green); font-size: var(--text-sm); font-weight: 600; }

  /* Breadcrumb: "/" separators read the same in both directions. */
  .breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); list-style: none; margin: 0 0 var(--space-3); padding: 0; font-size: var(--text-sm); color: var(--muted); }
  .breadcrumb li + li::before { content: "/"; margin-inline-end: var(--space-2); color: var(--muted); }
  .breadcrumb a { display: inline-flex; align-items: center; min-height: var(--target); }
  .breadcrumb [aria-current] { color: var(--ink); max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Two-step confirmation: the first click opens the consequence, the second acts. */
  .confirm { display: inline-block; max-width: 100%; }
  .confirm > summary { list-style: none; }
  .confirm > summary::-webkit-details-marker { display: none; }
  .confirm[open] > summary { margin-bottom: var(--space-3); }
  .confirm-body { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); max-width: 520px; }
  .confirm-body p { font-size: var(--text-sm); }
  .confirm-body form { margin: 0; }
  summary.quiet { display: inline-flex; align-items: center; min-height: var(--target); color: var(--blue); font-weight: 500; }
  summary.quiet.danger-text { color: var(--red); }

  /* Star rating drawn with CSS: inputs come 5 to 1 and the row is reversed. */
  .stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
  .stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .stars label { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0; font-size: 30px; line-height: 1; color: var(--field-border); cursor: pointer; }
  .stars input:checked ~ label, .stars label:hover, .stars label:hover ~ label { color: var(--star); }
  .stars input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }

  /* Radio cards for explicit choices. */
  .choices { border: 0; padding: 0; margin: 0 0 var(--space-5); display: grid; gap: var(--space-2); }
  .choice { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); font-weight: 400; margin: 0; cursor: pointer; }
  .choice span { display: grid; gap: 2px; }
  .choice small { color: var(--muted); }
  .choice:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }

  .details.compact { margin: var(--space-3) 0; }
  .details.compact > div { padding: 8px 0; }
  .details.totals > div:first-child { font-size: var(--text-md); }
  .panel-title { font-size: var(--text-md); margin: 0 0 var(--space-2); }
  .debit { color: var(--red-ink); }
  .credit { color: var(--green); }

  /* Lists of updates and notifications. */
  .update-list { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
  .update { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
  .update p { flex: 1; min-width: 12rem; margin: 0; }
  .update .new-tag { margin: 0; }
  .update time { color: var(--muted); font-size: var(--text-xs); white-space: nowrap; }
  .update.unread p { font-weight: 600; }

  @media (max-width: 640px) {
    .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
    .data-table tr { padding: 10px 14px; border-bottom: 1px solid var(--line); }
    .data-table tbody tr:last-child { border-bottom: 0; }
    .data-table td { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 6px 0; border: 0; text-align: end; }
    .data-table td::before { content: attr(data-label); color: var(--muted); font-weight: 600; text-align: start; }
    .data-table td:first-child, .data-table td[colspan] { display: block; text-align: start; font-weight: 600; }
    .data-table td:first-child::before, .data-table td[colspan]::before { content: none; }
    .data-table td > * { min-width: 0; overflow-wrap: anywhere; }
    .data-table td > a { display: inline-flex; align-items: center; min-height: var(--target); }
  }
}

/* ---------- Pages ---------- */
@layer pages {
  /* Information pages. */
  .info-page { max-width: 820px; margin: auto; }
  .info-page section { margin-top: var(--space-6); }
  .lead { font-size: var(--text-lg); color: var(--muted); }
  .steps { list-style: none; counter-reset: step; margin: var(--space-5) 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .steps li { counter-increment: step; position: relative; padding-block: var(--space-4); padding-inline: 64px var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); }
  .steps li::before { content: counter(step); position: absolute; inset-inline-start: var(--space-4); top: var(--space-4); width: 32px; height: 32px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; font-weight: 700; }
  .steps h2 { font-size: var(--text-lg); margin: 0 0 var(--space-1); }
  .steps p { margin: 0; }
  .faq details { border-bottom: 1px solid var(--line); padding: var(--space-3) 0; }
  .faq summary { display: flex; align-items: center; min-height: var(--target); }
  .faq p { margin: var(--space-3) 0 0; }
  .hints { margin: 0 0 var(--space-4); padding-inline-start: 20px; font-size: var(--text-sm); }

  /* Dashboard checklist and security overview. */
  .checklist ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
  .checklist li { display: flex; align-items: center; gap: var(--space-3); min-height: var(--target); }
  .check-mark { width: 24px; height: 24px; flex-shrink: 0; border: 2px solid var(--field-border); border-radius: 50%; display: grid; place-items: center; font-size: var(--text-xs); font-weight: 700; }
  .checklist .done .check-mark { background: var(--success); border-color: var(--success); color: var(--on-accent); }
  .checklist .done span:not(.check-mark) { color: var(--muted); text-decoration: line-through; }
  .security-list { list-style: none; margin: var(--space-5) 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md); }
  .security-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); }
  .security-list li:last-child { border-bottom: 0; }
  .security-list h2 { font-size: var(--text-md); margin: 0 0 var(--space-1); }
  .security-list p { margin: 0; font-size: var(--text-sm); color: var(--muted); }
  .security-list .button { flex-shrink: 0; }
  .inline-verify { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-4); }
  .inline-verify p { flex-basis: 100%; margin: 0; }
  .inline-verify .field { margin: 0; max-width: 12rem; }

  /* Catalogue. */
  .hero { background: var(--surface); border-radius: 17px; padding: 44px 43px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 55px; margin-bottom: 42px; }
  .hero h1 { font-size: var(--text-hero); max-width: 520px; line-height: 1.12; margin: 0 0 18px; }
  .hero p { color: var(--muted); max-width: 490px; margin: 0 0 24px; }
  .hero-points { display: flex; flex-wrap: wrap; gap: 17px; color: var(--muted); font-size: var(--text-xs); margin-top: 17px; }
  .hero-points span:first-child { color: var(--green); }
  .escrow-illustration { border-inline-start: 1px solid var(--blue-line); padding-inline-start: 43px; text-align: center; align-self: center; }
  .escrow-illustration h2 { margin: 12px 0; font-size: var(--text-xl); }
  .escrow-illustration p { font-size: var(--text-sm); margin: 0 auto 20px; }
  .escrow-illustration small { font-size: var(--text-xs); color: var(--muted); }
  .escrow-icon { margin: auto; width: 55px; height: 55px; display: grid; place-items: center; background: var(--blue-tint); color: var(--blue); font-size: 36px; border-radius: 15px; line-height: 1; }
  .escrow-steps { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: var(--text-xs); margin-bottom: 14px; }
  .escrow-steps span { padding: 8px 13px; border: 1px solid var(--blue-line); border-radius: var(--radius-sm); background: var(--bg); }
  .escrow-steps .escrow-lock { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
  .market-layout { display: grid; grid-template-columns: 200px 1fr; gap: 35px; }
  .sidebar h2 { font-size: var(--text-lg); margin: 0 0 17px; }
  .category { display: flex; justify-content: space-between; align-items: center; min-height: 40px; color: var(--muted); padding: 8px 12px; border-radius: 7px; margin-bottom: 3px; }
  .category.selected { background: var(--blue-soft); color: var(--blue); font-weight: 600; }
  .side-note { border-top: 1px solid var(--line); margin-top: 26px; padding: 12px; }
  .side-note h3 { font-size: var(--text-sm); }
  .side-note p, .side-note a { font-size: var(--text-xs); color: var(--muted); }
  .side-note a { color: var(--blue); }
  .catalogue-form { margin: 0 0 var(--space-4); }
  .filter-panel > summary { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target); padding: 4px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: var(--text-sm); }
  .filter-panel[open] > summary { margin-bottom: var(--space-3); border-color: var(--field-border); }
  .catalogue-form .search { max-width: none; margin-bottom: var(--space-3); }
  .filters { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; margin: 0 0 var(--space-4); }
  .filter label, .filters > label { font-size: var(--text-xs); margin-bottom: 2px; }
  .filters select, .filters input:not([type=hidden]) { font-size: var(--text-sm); min-height: 40px; padding: 6px 10px; width: auto; }
  .filters select { min-width: 120px; }
  .price-filter input:not([type=hidden]) { width: 7.5rem; }
  .filters button { margin: 0; }
  .results-heading { margin-bottom: var(--space-2); }
  .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-4); padding: 0; }
  .chips a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 2px 12px; border: 1px solid var(--blue-line); border-radius: 16px; background: var(--blue-soft); color: var(--ink); font-size: var(--text-sm); }
  .chips a.clear { background: none; border-color: transparent; color: var(--blue); }
  .refine { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--muted); }
  .refine ul { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
  .refine a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 2px 12px; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); }
  .refine a:hover { border-color: var(--blue); text-decoration: none; }
  .refine .count { background: var(--blue-soft); color: var(--ink); }
  .suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4); }
  .suggestions a { display: inline-flex; align-items: center; min-height: var(--target); }
  .product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  /* The title link covers the whole card; the seller link is lifted above it. */
  .product-card { position: relative; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; min-width: 0; transition: border-color 0.15s; }
  .product-card:hover { border-color: var(--blue-line-hover); }
  .product-card:has(.card-link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
  .card-link::after { content: ""; position: absolute; inset: 0; }
  .card-link:focus-visible { outline: none; }
  .product-card .seller-link { position: relative; z-index: 1; }
  .card-meta { font-size: var(--text-xs); color: var(--muted); margin: 0 0 var(--space-2); }
  .card-facts { display: flex; flex-wrap: wrap; gap: 4px 12px; list-style: none; margin: 0 0 var(--space-3); padding: 0; font-size: var(--text-xs); color: var(--muted); }
  .card-facts .instant { position: static; padding: 0; background: none; font-weight: 600; }
  .card-facts .out { color: var(--red); font-weight: 600; }
  /* Category identity: the tone variables (--art-bg, --art-icon, --art-ink) are in the tokens layer. */
  .product-art { height: 130px; background: var(--art-bg); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .product-art:hover { text-decoration: none; }
  .product-symbol { position: absolute; inset-inline-end: 20px; top: 16px; color: var(--art-icon); }
  .product-symbol .icon { width: 76px; height: 76px; stroke-width: 1.5; }
  .art-label { align-self: flex-end; margin-inline-end: auto; padding: 16px 17px; color: var(--art-ink); font-size: var(--text-sm); font-weight: 600; position: relative; }
  .product-art .cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .has-cover .art-label { margin: 10px; padding: 3px 9px; border-radius: var(--radius-sm); background: var(--art-bg); }
  .product-cover, .editor-cover, .queue-cover { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md); background: var(--blue-soft); }
  .product-cover { margin-block-end: var(--space-5); }
  .editor-cover, .queue-cover { max-width: 360px; margin-block-end: var(--space-3); }
  .instant { position: absolute; inset-inline-start: 12px; top: 12px; font-size: var(--text-xs); background: var(--bg); padding: 2px 7px; border-radius: 3px; color: var(--green); }
  .product-body { padding: var(--space-4); }
  .seller-link { display: inline-flex; align-items: center; gap: 8px; min-height: var(--target); color: var(--muted); font-size: var(--text-sm); }
  .product-body h3 { font-size: var(--text-md); line-height: 1.45; margin: 0 0 2px; min-height: 46px; letter-spacing: 0; }
  .product-body h3 a { color: var(--ink); }
  .product-body .card-text { font-size: var(--text-sm); color: var(--muted); line-height: 1.5; min-height: 42px; margin-bottom: var(--space-2); }
  .product-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--line); gap: 5px; }
  .price { font-weight: 700; color: var(--ink); font-size: var(--text-lg); }
  .price small { font-weight: 400; font-size: var(--text-xs); color: var(--muted); }
  .trusted { padding-top: 35px; margin-top: 32px; border-top: 1px solid var(--line); }
  .seller-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
  .seller-row { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); }
  .seller-row:hover { text-decoration: none; background: var(--surface-soft); }
  .seller-row p { font-size: var(--text-xs); color: var(--muted); margin: 3px 0 0; }
  .seller-row { flex-wrap: wrap; }
  .seller-row > div { flex: 1 1 10rem; min-width: 0; }
  .seller-row .trust-tag { margin-inline-start: auto; white-space: normal; }
  .currency-strip { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 30px; display: flex; align-items: center; justify-content: space-between; font-size: var(--text-sm); color: var(--muted); }
  .currency-strip p { margin: 0; }
  .currency-strip ul { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; margin: 0; padding: 0; color: var(--ink); font-weight: 600; }

  /* Product and order detail. */
  .detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 335px; gap: 55px; }
  /* Listing: on phones the purchase panel follows the title, before the long description. */
  .product-layout { display: grid; grid-template-columns: minmax(0, 1fr) 335px; grid-template-areas: "head panel" "main panel"; gap: 0 55px; align-items: start; }
  .product-head { grid-area: head; }
  .product-head h1 { margin-top: 0; }
  .product-layout > .purchase-panel { grid-area: panel; }
  .product-main { grid-area: main; min-width: 0; }
  .trust-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; list-style: none; margin: var(--space-3) 0 0; padding: 0; font-size: var(--text-sm); color: var(--muted); }
  .delivery-explained p { font-size: var(--text-sm); }
  .related .product-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .report { margin-top: var(--space-6); font-size: var(--text-sm); }
  .report summary { display: inline-flex; align-items: center; min-height: var(--target); color: var(--muted); font-weight: 500; }

  /* Order: progress, next step, side summary. */
  .order-heading h1 { margin: 4px 0 0; }
  .order-heading .fine { margin: 0; }
  .timeline { display: flex; list-style: none; margin: var(--space-5) 0 var(--space-6); padding: 0; }
  .timeline li { position: relative; flex: 1; display: grid; gap: 2px; padding-top: 30px; font-size: var(--text-sm); }
  .timeline li::before { content: ""; position: absolute; top: 10px; inset-inline: 0; height: 3px; background: var(--line); }
  .timeline li.done::before { background: var(--green); }
  .timeline .dot { position: absolute; top: 2px; inset-inline-start: 0; width: 19px; height: 19px; border-radius: 50%; background: var(--bg); border: 3px solid var(--line); }
  .timeline .done .dot { background: var(--green); border-color: var(--green); }
  .timeline .current .dot { border-color: var(--blue); }
  .timeline .current strong { color: var(--blue); }
  .timeline time { font-size: var(--text-xs); color: var(--muted); }
  .next-step { background: var(--surface-soft); border-color: var(--blue-line); margin-top: 0; }
  .next-step p { max-width: none; }
  .next-step .confirm { margin-top: var(--space-2); }
  .reveal summary { display: inline-flex; align-items: center; min-height: var(--target); color: var(--blue); }
  .reference code { display: block; margin-top: var(--space-1); }
  .reference summary { display: flex; align-items: center; min-height: var(--target); font-size: var(--text-xs); color: var(--muted); font-weight: 500; }
  .detail-layout h1 { margin-top: 18px; }
  .seller-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
  .seller-summary .muted { font-size: var(--text-sm); }
  .description { margin: 32px 0; }
  .reviews { margin-top: 36px; }
  .review { border-top: 1px solid var(--line); padding: 18px 0; font-size: var(--text-sm); }
  .review small { color: var(--muted); }
  .purchase-panel { border: 1px solid var(--line); border-radius: 12px; padding: 26px; height: fit-content; position: sticky; top: 25px; background: var(--panel); }
  .purchase-panel h3 { font-size: var(--text-md); }
  .purchase-panel p { font-size: var(--text-sm); color: var(--muted); }
  .purchase-panel .big { font-size: 32px; color: var(--ink); margin-top: 0; }
  .purchase-panel .big small { font-size: var(--text-xs); }
  .wallet-link { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 4px; min-height: var(--target); text-align: center; font-size: var(--text-sm); margin-top: 13px; }
  .wallet-link a { display: inline-flex; align-items: center; min-height: var(--target); }
  .balance-check { margin: 0 0 16px; font-size: var(--text-sm); }
  .balance-check div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
  .balance-check dt { color: var(--muted); }
  .balance-check dd { margin: 0; font-weight: 600; }
  .shortfall dd { color: var(--red); }
  .delivery-content { white-space: normal; overflow-wrap: anywhere; background: var(--surface); border-radius: 7px; padding: 17px; margin: 20px 0; }

  /* Seller area and listing editor. */
  .to-do h3 { font-size: var(--text-md); margin: var(--space-4) 0 var(--space-2); }
  .task-list { list-style: none; margin: 0; padding: 0; }
  .task-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-1) var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
  .task-list li:last-child { border-bottom: 0; }
  .task-list a { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 6px; min-height: var(--target); }
  .due { color: var(--muted); }
  .late { color: var(--red-ink); font-weight: 600; }
  .review-note { margin: var(--space-1) 0 0; color: var(--red-ink); font-size: var(--text-xs); }
  .row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-4); }
  .row-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--target); min-width: var(--target); }
  .row-actions form { margin: 0; }
  .row-actions button { padding: 0; line-height: inherit; font-weight: 500; }
  .requirements { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); }
  .requirements li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); min-height: var(--target); }
  .requirements li span { width: 1.2em; color: var(--muted); }
  .requirements .met span { color: var(--green); font-weight: 700; }
  .editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-6); align-items: start; }
  .editor-section { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-5); margin: 0 0 var(--space-5); min-width: 0; }
  .editor-section legend { padding: 0 var(--space-2); font-size: var(--text-lg); font-weight: 700; }
  .translation { border-top: 1px solid var(--line); padding: var(--space-2) 0; }
  .translation > summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--target); }
  /* Summaries laid out with flex lose the browser marker: draw one that also mirrors in RTL. */
  .faq summary::after, .translation > summary::after { content: "+"; margin-inline-start: auto; padding-inline-start: var(--space-3); color: var(--muted); font-weight: 700; }
  .faq details[open] > summary::after, .translation[open] > summary::after { content: "\2212"; }
  .reveal summary::before, .report summary::before { content: "\25B8"; margin-inline-end: 6px; font-size: var(--text-xs); }
  [dir=rtl] .reveal summary::before, [dir=rtl] .report summary::before { content: "\25C2"; }
  .reveal[open] summary::before, .report[open] summary::before { content: "\25BE"; }
  .fee-example { background: var(--surface-soft); border-radius: var(--radius-sm); padding: 0 var(--space-3); }
  .editor-preview { position: sticky; top: 25px; }
  .preview-card { max-width: 320px; }
  .unit-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md); }
  .unit-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); }
  .unit-list li:last-child { border-bottom: 0; }
  .unit-list code { flex: 1; min-width: 8rem; }
  .unit-list .confirm[open] { flex-basis: 100%; }

  /* Operator queues. */
  .queue-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-5) 0; }
  .queue-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); }
  .queue-card:hover { text-decoration: none; background: var(--surface-soft); }
  .queue-card span { font-size: var(--text-sm); color: var(--muted); }
  .queue-card strong { font-size: var(--text-2xl); }
  .queue-card small { color: var(--muted); }
  .queue-card.busy { border-color: var(--amber-line); background: var(--amber-soft); }
  .queue-item { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-3); }
  .queue-item > header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-4); }
  .queue-item > header a { display: inline-flex; align-items: center; min-height: var(--target); }
  .queue-item .actions { margin-top: var(--space-2); }
  .tags { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); }
  .tags .action-tag { margin: 0; }
  .quote { border-inline-start: 3px solid var(--line); padding-inline-start: var(--space-3); color: var(--muted); font-size: var(--text-sm); }
  .resolution-preview { background: var(--surface-soft); border: 1px solid var(--blue-line); border-radius: var(--radius-md); padding: var(--space-4); margin: var(--space-4) 0; }
  .resolution-preview h3 { margin-top: 0; }

  /* Wallet. */
  .balances { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: center; margin: var(--space-5) 0; }
  .balances .balance-panel { margin: 0; }
  .balance-split { margin: 0; font-size: var(--text-sm); }
  .balance-split div { display: flex; justify-content: space-between; gap: var(--space-4); padding: 8px 0; border-bottom: 1px solid var(--line); }
  .balance-split dt { color: var(--muted); }
  .balance-split dd { margin: 0; font-weight: 600; }
  .balance-split .total { border-bottom: 0; }
  .address-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-5); padding: var(--space-4) 5px; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
  .address-row > div { flex: 1 1 18rem; min-width: 0; }
  .address-row p { margin: 4px 0 0; color: var(--muted); font-size: var(--text-xs); }
  .address-row .confirm { flex-basis: 100%; }
  .address-row .confirm:not([open]) { flex-basis: auto; }
  .stepper { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-5); padding: 0; counter-reset: step; font-size: var(--text-xs); }
  .stepper li { counter-increment: step; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 16px; color: var(--muted); }
  .stepper li::before { content: counter(step); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); font-weight: 700; }
  .stepper .done { color: var(--green); border-color: var(--green-line); }
  .stepper .done::before { content: "\2713"; background: var(--success); color: var(--on-accent); }
  .stepper .current { color: var(--blue); border-color: var(--blue); font-weight: 600; }
  .network-warning strong { display: block; }
  .two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
  .balance-panel { background: var(--accent); border-radius: 12px; padding: 26px 30px; color: var(--on-accent); margin: 25px 0; }
  .balance-panel span { display: block; font-size: var(--text-sm); opacity: 0.9; }
  .balance-panel strong { font-size: 40px; letter-spacing: -1px; }
  .balance-panel strong small { font-size: var(--text-sm); letter-spacing: 0; font-weight: 400; }
  .balance-panel p { font-size: var(--text-xs); margin-bottom: 0; opacity: 0.9; }
  .qr { display: block; background: var(--qr-bg); width: 220px; max-width: 100%; height: auto; margin: 25px auto; }
  .address { display: block; border: 1px solid var(--line); padding: 15px; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--text-xs); overflow-wrap: anywhere; word-break: break-word; user-select: all; }

  /* Messages. */
  .inbox-section h2 { font-size: var(--text-lg); }
  .conversation-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md); }
  .conversation-item { position: relative; display: flex; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--line); }
  .conversation-item:last-child { border-bottom: 0; }
  .conversation-item:hover { background: var(--surface-soft); }
  .conversation-item.unread { background: var(--blue-soft); }
  .conversation-item.unread::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--blue); }
  .conversation-text { flex: 1; min-width: 0; }
  .conversation-text p { margin: 0; }
  .conversation-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
  .conversation-top a { display: inline-flex; align-items: center; min-height: var(--target); color: var(--ink); }
  .conversation-top a::after { content: ""; position: absolute; inset: 0; }
  .conversation-top time { font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
  .conversation-context { font-size: var(--text-xs); color: var(--muted); }
  .conversation-preview { font-size: var(--text-sm); color: var(--muted); overflow-wrap: anywhere; }
  .unread .conversation-preview { color: var(--ink); font-weight: 600; }
  .context-card { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); margin-bottom: var(--space-3); }
  .context-card > span { display: grid; min-width: 0; }
  .context-card:hover { text-decoration: none; background: var(--surface-soft); }
  .new-divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0; color: var(--blue); font-size: var(--text-xs); font-weight: 700; max-width: none; }
  .new-divider::before, .new-divider::after { content: ""; flex: 1; height: 1px; background: var(--blue-line); }
  .thread-panel { max-width: 850px; margin: auto; }
  .thread { border-top: 1px solid var(--line); margin-top: 20px; padding: 20px 0; }
  .message { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px; margin: 14px 15% 14px 0; overflow-wrap: anywhere; background: var(--bg); }
  .message.mine { margin: 14px 0 14px 15%; background: var(--blue-soft); border-color: var(--blue-line); }
  .message header { display: flex; justify-content: space-between; gap: 15px; font-size: var(--text-xs); }
  .message time { color: var(--muted); }
  .message p { font-size: var(--text-sm); }

  /* Profiles, policies, status pages. */
  .profile-header { display: flex; gap: 22px; align-items: center; margin-bottom: 25px; }
  .profile-header h1 { margin: 0; }
  .profile-header p { margin: 6px 0; color: var(--muted); }
  .policy { max-width: 800px; margin: auto; }
  .status-page .brand { margin-bottom: 20px; }

  /* Allauth pages: authenticator QR code and recovery codes. */
  .form-panel img[src^="data:"] { display: block; background: var(--qr-bg); width: 200px; margin: var(--space-4) auto; }

  /* Administration (templates/admin/, market/admin_site.py): Django's admin inside the site's frame.
     A sidebar of sections on wide screens, a <details> menu on phones; lists, forms and the dashboard
     reuse the components above (queue cards, details, chips, data tables, fields, notices). */
  .admin-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
  .admin-shell:has(> .admin-sidebar) { grid-template-columns: 228px minmax(0, 1fr); }
  .admin-main { min-width: 0; }
  .admin-nav { padding-inline-end: var(--space-4); border-inline-end: 1px solid var(--line); font-size: var(--text-sm); }
  .admin-menu { display: none; }
  .admin-links { display: grid; gap: 2px; list-style: none; margin: 0 0 var(--space-2); padding: 0; }
  .admin-links a, .admin-links span { display: flex; align-items: center; min-height: max(34px, var(--target)); padding: 4px 10px; border-radius: var(--radius-sm); color: var(--ink); }
  .admin-links a:hover { background: var(--surface); text-decoration: none; }
  .admin-links a[aria-current] { background: var(--blue-soft); color: var(--blue); font-weight: 700; }
  .admin-links-heading { margin: var(--space-4) 0 var(--space-1); padding-inline: 10px; font-size: var(--text-xs); font-weight: 700; color: var(--muted); }

  .admin-main > .breadcrumb ol { margin-bottom: var(--space-2); }
  .admin-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-5); margin: 0 0 var(--space-5); }
  .admin-title { margin: 0; font-size: var(--text-2xl); overflow-wrap: anywhere; }
  .admin-main > .admin-title { margin-bottom: var(--space-5); }
  .admin-subtitle { margin: calc(-1 * var(--space-3)) 0 var(--space-5); color: var(--muted); }
  .admin-eyebrow { margin: 0 0 var(--space-1); font-size: var(--text-xs); font-weight: 700; color: var(--muted); }
  .admin-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); }

  /* Dashboard. */
  .admin-dashboard .queue-cards { margin: 0 0 var(--space-4); }
  .admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; margin: 0 0 var(--space-4); }
  .admin-grid-wide { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .admin-card { min-width: 0; padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); }
  .admin-card h2 { margin: 0 0 var(--space-3); font-size: var(--text-lg); }
  .admin-card > p { font-size: var(--text-sm); color: var(--muted); }
  .admin-card .details { margin: 0; }
  .admin-card .details > div:last-child { border-bottom: 0; }
  .admin-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-3); }
  .admin-card-head h2 { margin: 0; }
  .maintenance-card.is-on { background: var(--amber-soft); border-color: var(--amber-line); }
  .maintenance-card.is-on > p { color: var(--amber-ink); }
  .admin-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--space-4); }
  .admin-model-list { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
  .admin-model-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-3); min-height: max(36px, var(--target)); border-bottom: 1px solid var(--line); }
  .admin-model-list li:last-child { border-bottom: 0; }
  .admin-model-list a { display: inline-flex; align-items: center; min-height: var(--target); }
  .add-link { font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
  .add-link::before { content: "+"; margin-inline-end: 3px; }
  .admin-log { margin: 0; }
  .admin-log .update { flex-wrap: nowrap; align-items: flex-start; }
  .admin-log .update p { overflow-wrap: anywhere; }
  .admin-log small { display: block; }
  .log-mark { flex-shrink: 0; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--blue); }
  .log-added { background: var(--green); }
  .log-deleted { background: var(--red); }

  /* Lists: search, filter menus, actions, results, pages. */
  .admin-toolbar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); }
  .admin-search { flex: 1 1 18rem; max-width: 32rem; }
  .admin-search .search { max-width: none; }
  .admin-search p { margin: var(--space-1) 0 0; }
  .admin-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-height: 52px; }
  .admin-filters .quiet { font-size: var(--text-sm); }
  .filter-menu { position: relative; }
  .filter-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 14px; border: 1px solid var(--line); border-radius: 20px; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
  .filter-menu > summary::-webkit-details-marker { display: none; }
  .filter-menu > summary::after { content: "\25BE"; font-size: var(--text-xs); color: var(--muted); }
  .filter-menu[open] > summary { margin-bottom: 0; border-color: var(--field-border); }
  .filter-menu.is-active > summary { background: var(--blue-soft); border-color: var(--blue-line); }
  .filter-menu ul { position: absolute; inset-inline-start: 0; top: calc(100% + 6px); z-index: 20; min-width: 200px; max-width: min(320px, calc(100vw - 32px)); max-height: 320px; overflow-y: auto; list-style: none; margin: 0; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); }
  .filter-menu li a { display: flex; align-items: center; min-height: max(36px, var(--target)); padding: 6px 10px; border-radius: var(--radius-sm); color: var(--ink); font-size: var(--text-sm); overflow-wrap: anywhere; }
  .filter-menu li a:hover { background: var(--surface); text-decoration: none; }
  .filter-menu li a[aria-current] { background: var(--blue-soft); font-weight: 700; }
  .admin-dates { margin-top: calc(-1 * var(--space-2)); }
  .chips span[aria-current] { display: inline-flex; align-items: center; min-height: 32px; padding: 2px 12px; border-radius: 16px; background: var(--accent); color: var(--on-accent); font-size: var(--text-sm); font-weight: 600; }
  .admin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); font-size: var(--text-sm); }
  .admin-actions label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
  .admin-actions select { width: auto; min-width: 14rem; min-height: 36px; padding: 4px 10px; font-size: var(--text-sm); }
  .admin-actions button { margin: 0; }
  .admin-results thead th { white-space: nowrap; vertical-align: middle; }
  .admin-results thead a { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: var(--target); min-height: var(--target); color: var(--muted); }
  .admin-results th[aria-sort] > a:first-child { color: var(--ink); }
  .admin-results tbody th { background: none; color: var(--ink); font-size: var(--text-sm); }
  .admin-results tbody th, .admin-results td { vertical-align: middle; overflow-wrap: break-word; }
  .admin-results tbody tr:hover { background: var(--surface-soft); }
  .admin-results tbody tr:last-child th { border-bottom: 0; }
  .admin-results .action-checkbox, .admin-results .action-checkbox-column { width: 1%; padding-inline-end: 0; }
  .admin-results .action-select { width: 24px; height: 24px; margin: 0; }
  .admin-results img { width: 16px; height: 16px; vertical-align: middle; }
  .admin-results td input:not([type=checkbox]):not([type=hidden]), .admin-results td select { width: auto; max-width: 9rem; min-height: 36px; padding: 4px 8px; }
  .admin-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: var(--space-4) 0; }
  .admin-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
  .admin-pages a, .admin-pages .this-page { display: inline-grid; place-items: center; min-width: 36px; min-height: 36px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: var(--text-sm); }
  .admin-pages .this-page { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
  .admin-pagination button { margin: 0; }

  /* Forms: sections on the left, the buttons in a side panel that follows the page. */
  .admin-form { display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: var(--space-5); align-items: start; }
  .admin-form-main { min-width: 0; }
  .admin-form-side { position: sticky; top: var(--space-5); }
  .submit-row { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); }
  .submit-row button, .submit-row .button { margin: 0; }
  .delete-link { display: inline-flex; align-items: center; justify-content: center; min-height: var(--target); color: var(--red); font-size: var(--text-sm); font-weight: 600; }
  .admin-fieldset { min-width: 0; margin: 0 0 var(--space-4); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); }
  .fieldset-heading { margin: 0 0 var(--space-4); font-size: var(--text-lg); }
  .admin-fieldset > details > summary { list-style: none; display: flex; align-items: center; min-height: var(--target); }
  .admin-fieldset > details > summary::-webkit-details-marker { display: none; }
  .admin-fieldset > details > summary .fieldset-heading { margin: 0; }
  .admin-fieldset > details > summary::after { content: "+"; margin-inline-start: auto; padding-inline-start: var(--space-3); color: var(--muted); font-size: var(--text-lg); font-weight: 700; }
  .admin-fieldset > details[open] > summary { margin-bottom: var(--space-4); }
  .admin-fieldset > details[open] > summary::after { content: "\2212"; }
  .fieldset-description { font-size: var(--text-sm); color: var(--muted); }
  .admin-fieldset p { overflow-wrap: anywhere; }
  .admin-row-multi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0 var(--space-4); }
  .admin-fieldset .admin-row:last-child > .field:last-child { margin-bottom: 0; }
  .field-readonly .readonly { min-height: 24px; padding: 4px 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
  .field-readonly .readonly img { width: 16px; height: 16px; vertical-align: middle; }
  .admin-form input[type=text], .admin-form input[type=email], .admin-form input[type=url], .admin-form input[type=password] { max-width: 40rem; }
  .admin-form input[type=number], .admin-form input[inputmode=decimal], .admin-form input.vIntegerField, .admin-form input.vBigIntegerField { max-width: 12rem; }
  .admin-form select:not([multiple]) { max-width: 30rem; }
  .admin-form select[multiple] { min-height: 12rem; }
  .admin-form textarea { min-height: 7rem; }
  .datetime-pair, .raw-id { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
  .sub-field { display: grid; gap: 2px; margin: 0; font-size: var(--text-xs); color: var(--muted); }
  .sub-field input:not([type=hidden]) { width: auto; min-width: 10rem; }
  .raw-id input:not([type=hidden]) { max-width: 10rem; }
  .admin-form legend { padding: 0; }
  .field fieldset > .tiles { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .tile { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; margin: 0; padding: 6px 12px 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-md); font-weight: 500; cursor: pointer; }
  .tile:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
  .tile input { margin: 0; }
  .tile .icon { color: var(--muted); }
  .tone-swatch { width: 22px; height: 22px; border: 2px solid var(--art-icon); border-radius: var(--radius-sm); background: var(--art-bg); }
  .category-look { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; border-radius: var(--radius-sm); background: var(--art-bg); color: var(--art-ink); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
  .admin-delete-card { max-width: 760px; }
  .admin-delete-card > p:first-child { font-size: var(--text-md); color: var(--ink); }
  .admin-delete-card h2 { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-md); }
  .admin-objects { margin: 0 0 var(--space-4); padding-inline-start: 20px; font-size: var(--text-sm); overflow-wrap: anywhere; }

  @media (max-width: 1100px) {
    .admin-shell:has(> .admin-sidebar) { grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-5); }
    .admin-form, .admin-grid-wide { grid-template-columns: minmax(0, 1fr); }
    .admin-form-side { position: static; }
  }
  @media (max-width: 900px) {
    .admin-shell:has(> .admin-sidebar) { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
    .admin-nav { display: none; }
    .admin-menu { display: block; padding: 0 var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); }
    .admin-menu > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
    .admin-menu > summary::-webkit-details-marker { display: none; }
    .admin-menu > summary::after { content: "\25BE"; font-size: var(--text-xs); color: var(--muted); }
    .admin-menu[open] > summary { margin-bottom: 0; }
    .admin-menu .admin-links:last-child { margin-bottom: var(--space-3); }
    .admin-grid { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 640px) {
    .admin-card, .admin-fieldset { padding: var(--space-4); }
    .admin-filters { min-height: 0; }
    .filter-menu ul { position: static; margin-top: 6px; box-shadow: none; }
    .admin-actions select { min-width: 0; flex: 1; }
    .admin-results tbody th { display: block; width: 100%; padding: 6px 0; border: 0; text-align: start; }
    .admin-results td.action-checkbox { width: auto; }
  }

  /* Style guide (development only). */
  .swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
  .swatch { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; font-size: var(--text-xs); }
  .swatch span { display: block; height: 48px; }
  .swatch p { margin: 0; padding: var(--space-2); }
  .type-scale p { margin: 0 0 var(--space-2); }
  .swatch-ink span { background: var(--ink); }
  .swatch-muted span { background: var(--muted); }
  .swatch-blue span { background: var(--blue); }
  .swatch-surface span { background: var(--surface); }
  .swatch-line span { background: var(--line); }
  .swatch-field span { background: var(--field-border); }
  .swatch-green span { background: var(--green); }
  .swatch-red span { background: var(--red); }
  .swatch-amber span { background: var(--amber-soft); }
  .swatch-info span { background: var(--info-soft); }

  @media (max-width: 1100px) {
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero { gap: 25px; padding: 32px; }
    .escrow-illustration { padding-inline-start: 25px; }
    .hero-points { gap: 7px; }
    .market-layout { grid-template-columns: 170px 1fr; gap: 25px; }
    .currency-strip { flex-direction: column; align-items: flex-start; gap: 10px; }
    .detail-layout { gap: 30px; grid-template-columns: minmax(0, 1fr) 300px; }
  }
  @media (max-width: 780px) {
    .hero { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; gap: 0; margin-bottom: 24px; }
    .hero h1 { font-size: var(--text-2xl); margin-bottom: 10px; }
    .hero p { margin-bottom: 16px; }
    .hero p { font-size: var(--text-sm); }
    .escrow-illustration { display: none; }
    .hero-points { gap: 10px; }
    .market-layout { grid-template-columns: 1fr; gap: 25px; }
    .sidebar { display: flex; gap: 6px; align-items: center; overflow-x: auto; padding-bottom: 7px; }
    .sidebar h2, .side-note { display: none; }
    .category { flex-shrink: 0; white-space: nowrap; background: var(--surface); font-size: var(--text-sm); margin: 0; padding: 7px 12px; }
    .filters { gap: 10px; }
    .filters button { margin-inline-start: 0; }
    .product-grid { gap: 14px; }
    .product-art { height: 104px; }
    .product-body { padding: 13px; }
    .product-body h3 { font-size: var(--text-sm); min-height: 0; }
    .product-body p { min-height: 0; }
    .product-bottom { align-items: flex-start; flex-direction: column; gap: 8px; }
    .seller-grid { grid-template-columns: 1fr; }
    .trusted .section-heading { align-items: flex-start; }
    .currency-strip div { word-spacing: 9px; }
    .detail-layout { grid-template-columns: 1fr; gap: 25px; }
    .purchase-panel { position: static; }
    .product-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "panel" "main"; gap: var(--space-5); }
    .timeline { flex-direction: column; gap: var(--space-3); }
    .timeline li { padding: 0; padding-inline-start: 32px; }
    .timeline li::before { top: 22px; bottom: -14px; inset-inline: 8px auto; width: 3px; height: auto; }
    .timeline li:last-child::before { content: none; }
    .balances { grid-template-columns: 1fr; }
    .editor-layout { grid-template-columns: minmax(0, 1fr); }
    .editor-preview { position: static; }
    .editor-section { padding: var(--space-4); }
    .queue-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .security-list li { flex-direction: column; align-items: flex-start; padding: var(--space-4); }
    .price-filter input:not([type=hidden]) { width: 6.5rem; }
    .two-column { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .message { margin-inline-end: 4%; }
    .message.mine { margin-inline-start: 4%; }
  }
}

/* ---------- Utilities ---------- */
@layer utilities {
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}