/* Marketplace design system (M7-B). Uses semantic tokens from tokens.css only — no raw colours below.
   Layers: base → shell → layout → components → legacy (pre-M7 class names) → identity (F6.23 visual identity, page
   compositions) → utilities. */
@layer base, shell, layout, components, legacy, identity, utilities;

/* =============================================================================================== base */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body {
    margin: 0; min-height: 100vh; display: flex; flex-direction: column;
    background: var(--color-bg); color: var(--color-text);
    font: var(--weight-normal) var(--text-base)/var(--leading) var(--font-sans);
  }
  main { flex: 1 0 auto; }
  h1, h2, h3, h4 { line-height: var(--leading-tight); margin: 0 0 var(--space-3); font-weight: var(--weight-semibold); }
  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); margin-top: var(--space-6); }
  h3 { font-size: var(--text-lg); margin-top: var(--space-4); }
  h4 { font-size: var(--text-base); }
  p { margin: 0 0 var(--space-3); }
  a { color: var(--color-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
  a:hover { text-decoration-thickness: 2px; }
  img, svg, video { max-width: 100%; height: auto; }
  hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-6) 0; }
  code, pre, kbd { font-family: var(--font-mono); font-size: .92em; }
  pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--color-surface-2); border: 1px solid var(--color-border);
        border-radius: var(--radius); padding: var(--space-3); margin: 0 0 var(--space-3); }
  kbd { border: 1px solid var(--color-border-strong); border-bottom-width: 2px; border-radius: var(--radius-sm); padding: 0 4px;
        font-size: var(--text-xs); color: var(--color-text-muted); }
  ::selection { background: var(--brand-700); color: var(--color-on-tile); }
  :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
  [hidden] { display: none !important; }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

  /* form elements — every native control gets the design system look */
  button, input, select, textarea { font: inherit; color: inherit; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]), select, textarea {
    min-height: var(--control-h); padding: 6px 10px; max-width: 100%;
    background: var(--color-surface-2); color: var(--color-text);
    border: 1px solid var(--color-input-border); border-radius: var(--radius);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  }
  textarea { min-height: 84px; resize: vertical; line-height: var(--leading); }
  select { padding-right: 28px; }
  input::placeholder, textarea::placeholder { color: var(--color-text-subtle); }
  input:hover, select:hover, textarea:hover { border-color: var(--color-text-subtle); }
  input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--color-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 35%, transparent); }
  input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--tone-danger-fg); }
  input:disabled, select:disabled, textarea:disabled, button:disabled { opacity: .55; cursor: not-allowed; }
  input[type=checkbox], input[type=radio] { width: 18px; height: 18px; margin: 0 6px 0 0; vertical-align: -3px; accent-color: var(--color-primary); }
  input[type=file] { max-width: 100%; color: var(--color-text-muted); }
  input[type=file]::file-selector-button { margin-right: var(--space-2); }
  fieldset { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-3); min-width: 0; }
  legend { padding: 0 var(--space-1); font-weight: var(--weight-semibold); font-size: var(--text-md); }
  label { cursor: default; }

  /* buttons — plain <button> is a secondary button; .btn--primary etc. for emphasis */
  button, .btn, .button, input[type=submit], input::file-selector-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: var(--control-h); padding: 0 14px; border-radius: var(--radius);
    background: var(--color-surface-3); color: var(--color-text); border: 1px solid var(--color-border-strong);
    font-weight: var(--weight-medium); font-size: var(--text-md); line-height: 1.1; text-decoration: none; white-space: nowrap;
    cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }
  button:hover, .btn:hover, .button:hover { background: var(--color-surface-2); border-color: var(--color-text-subtle); text-decoration: none; }

  /* tables */
  table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
  th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
  thead th { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-muted); background: var(--color-surface-2);
             border-bottom-color: var(--color-border-strong); white-space: nowrap; }
  tbody tr:hover { background: color-mix(in srgb, var(--color-surface-2) 70%, transparent); }
  caption { text-align: left; color: var(--color-text-muted); padding: var(--space-2) 0; }

  dl { margin: 0 0 var(--space-3); }
  ul, ol { padding-left: 1.25em; margin: 0 0 var(--space-3); }
  details > summary { cursor: pointer; }
}

/* ============================================================================================== shell */
@layer shell {
  .skip-link { position: absolute; left: var(--space-2); top: -60px; z-index: 100; padding: 8px 14px; border-radius: var(--radius);
               background: var(--color-primary); color: var(--color-on-primary); font-weight: var(--weight-semibold); }
  .skip-link:focus { top: var(--space-2); }

  /* no backdrop-filter/transform here: it would become the containing block of the fixed mobile drawer */
  .app-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
  .app-header__inner { max-width: var(--content-max); margin: 0 auto; height: var(--header-h); padding: 0 var(--space-4);
                       display: flex; align-items: center; gap: var(--space-3); }
  .brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text); text-decoration: none;
           font-weight: var(--weight-bold); font-size: var(--text-lg); letter-spacing: -.01em; flex: none; }
  .brand:hover { text-decoration: none; }
  .brand__mark { width: 28px; height: 28px; flex: none; }
  .brand__mark-bg { fill: var(--color-primary); }
  .icon { width: 18px; height: 18px; flex: none; }
  .env-pill { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px;
              border-radius: var(--radius-pill); background: var(--tone-warning-bg); color: var(--tone-warning-fg); border: 1px solid var(--tone-warning-bd); flex: none; }
  .nav-link { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: var(--radius);
              color: var(--color-text-muted); text-decoration: none; font-weight: var(--weight-medium); font-size: var(--text-md); white-space: nowrap; position: relative; }
  .nav-link:hover { color: var(--color-text); background: var(--color-surface-2); text-decoration: none; }
  .nav-link[aria-current="page"], .nav-link.is-active { color: var(--color-text); background: var(--color-surface-3); }
  .nav-link svg { width: 18px; height: 18px; flex: none; }
  .app-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
  .nav-balance { font-variant-numeric: tabular-nums; color: var(--color-text); }
  .badge-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--tone-danger-fg); color: var(--color-on-badge);
                 font-size: 11px; font-weight: var(--weight-bold); line-height: 18px; text-align: center; }
  .nav-link .badge-count { margin-left: 2px; }
  .nav-link .badge-count[hidden] { display: none; }

  /* header search (combobox) */
  .site-search { position: relative; flex: 1 1 360px; max-width: 520px; }
  .site-search__input { width: 100%; padding-left: 34px !important; padding-right: 44px !important; background: var(--color-surface-2) !important; }
  .site-search__icon { position: absolute; left: 10px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--color-text-subtle); pointer-events: none; }
  .site-search__hint { position: absolute; right: 8px; top: 50%; translate: 0 -50%; pointer-events: none; }
  .site-search__list { position: absolute; left: 0; right: 0; min-width: min(420px, calc(100vw - 24px)); top: calc(100% + 4px); z-index: var(--z-dropdown); margin: 0; padding: 4px; list-style: none;
                       background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
                       max-height: min(70vh, 460px); overflow-y: auto; }
  .site-search__group { padding: 6px 10px 2px; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-subtle); }
  .site-search__option { display: flex; align-items: baseline; gap: var(--space-2); padding: 7px 10px; border-radius: var(--radius); cursor: pointer; color: var(--color-text); }
  .site-search__option[aria-selected="true"], .site-search__option:hover { background: var(--color-surface-3); }
  .site-search__option small { color: var(--color-text-subtle); margin-left: auto; white-space: nowrap; }
  .site-search__empty { padding: 10px; color: var(--color-text-muted); }

  /* dropdown menu (details/summary — works without JS; JS adds outside-click / Escape) */
  .menu { position: relative; }
  .menu > summary { list-style: none; }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu__panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-dropdown); min-width: 230px; padding: 6px;
                 background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
  .menu__panel a, .menu__panel button { display: flex; width: 100%; justify-content: flex-start; gap: 8px; padding: 8px 10px; min-height: 36px;
                 border-radius: var(--radius); border: 0; background: none; color: var(--color-text); text-decoration: none; font-weight: var(--weight-normal); }
  .menu__panel a:hover, .menu__panel button:hover { background: var(--color-surface-3); }
  .menu__panel hr { margin: 6px 0; }
  .menu__label { padding: 6px 10px 2px; font-size: var(--text-xs); color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: .05em; }
  .avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--brand-700); color: var(--color-on-tile);
            font-weight: var(--weight-bold); font-size: var(--text-sm); flex: none; }

  /* mobile: compact single row + drawer */
  .nav-toggle, .search-toggle { display: none; }
  .drawer { position: fixed; inset: 0; z-index: var(--z-drawer); }
  .drawer__backdrop { position: absolute; inset: 0; background: var(--color-overlay); }
  .drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(86vw, 340px); overflow-y: auto; padding: var(--space-3);
                   background: var(--color-surface); border-left: 1px solid var(--color-border-strong); box-shadow: var(--shadow-2); }
  .drawer__panel nav a, .drawer__panel nav button { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: var(--control-h-touch);
                   padding: 0 10px; border-radius: var(--radius); color: var(--color-text); text-decoration: none; border: 0; background: none;
                   font-weight: var(--weight-medium); font-size: var(--text-base); }
  .drawer__panel nav a:hover, .drawer__panel nav button:hover { background: var(--color-surface-3); }
  .drawer__panel nav form { margin: 0; }
  .drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }

  @media (max-width: 1023px) {
    .nav-link__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .nav-link { padding: 0 9px; }
    .nav-link .badge-count { position: absolute; top: 1px; right: -1px; margin: 0; }
    .site-search__hint { display: none; }
  }
  @media (max-width: 767px) {
    .app-header__inner { gap: var(--space-2); padding: 0 var(--space-3); height: 52px; }
    .app-nav .nav-link:not(.keep-mobile), .app-nav .menu { display: none; }
    .nav-toggle, .search-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: var(--control-h-touch); min-height: var(--control-h-touch);
                                  padding: 0; border: 0; border-radius: var(--radius); background: none; color: var(--color-text); cursor: pointer; list-style: none; }
    .nav-toggle::-webkit-details-marker { display: none; }
    .nav-toggle .icon, .search-toggle .icon { width: 22px; height: 22px; }
    details.nav-drawer { display: flex; }
    .site-search { display: none; position: absolute; left: 0; right: 0; top: 100%; max-width: none; padding: var(--space-2) var(--space-3);
                   background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
    .app-header.search-open .site-search { display: block; }
    .site-search__icon { left: calc(var(--space-3) + 10px); }
    .brand__name { font-size: var(--text-base); }
    .env-pill { padding: 1px 6px; }
    .app-nav .nav-link.keep-mobile { min-width: var(--control-h-touch); min-height: var(--control-h-touch); justify-content: center; }
  }

  .app-footer { margin-top: var(--space-10); border-top: 1px solid var(--color-border); color: var(--color-text-subtle); font-size: var(--text-sm); }
  .app-footer__inner { max-width: var(--content-max); margin: 0 auto; padding: var(--space-5) var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
  .app-footer a { color: var(--color-text-muted); }
}

/* ============================================================================================= layout */
@layer layout {
  .container { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-8); }
  .container--narrow { max-width: 760px; }
  .container--auth { max-width: 440px; }
  .with-sidebar { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
  .sidenav { position: sticky; top: calc(var(--header-h) + var(--space-4)); display: flex; flex-direction: column; gap: 2px; }
  .sidenav__title { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-subtle); padding: var(--space-3) 10px var(--space-1); }
  .sidenav__title:first-child { padding-top: 0; }
  .sidenav a { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: var(--radius);
               color: var(--color-text-muted); text-decoration: none; font-weight: var(--weight-medium); font-size: var(--text-md); }
  .sidenav a:hover { color: var(--color-text); background: var(--color-surface-2); }
  .sidenav a[aria-current="page"] { color: var(--color-text); background: var(--color-surface-3); box-shadow: inset 2px 0 0 var(--color-primary); }
  .sidenav a .badge-count { margin-left: auto; }
  .area-label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-subtle); margin-bottom: var(--space-2); }
  .page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
  .page-head h1 { margin: 0; }
  .page-head__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--space-3); padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-text-subtle); }
  .breadcrumbs li + li::before { content: "/"; margin-right: 6px; color: var(--color-border-strong); }
  .breadcrumbs a { color: var(--color-text-muted); }
  .grid { display: grid; gap: var(--space-4); }
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--auto { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-6); align-items: start; }
  .stack-sm > * + * { margin-top: var(--space-2); }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

  .with-sidebar > * { min-width: 0; }
  @media (max-width: 1279px) {
    /* wide data tables scroll inside the workspace column instead of stretching the page */
    .with-sidebar :not(.table-wrap) > table:not(.summary) { display: block; overflow-x: auto; }
  }
  @media (max-width: 1023px) {
    .with-sidebar { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
    .sidenav { position: static; flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: var(--space-1); border-bottom: 1px solid var(--color-border);
               scrollbar-width: thin; }
    .sidenav__title { display: none; }
    .sidenav a { white-space: nowrap; flex: none; }
    .sidenav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--color-primary); }
    .split { grid-template-columns: 1fr; }
    .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 767px) {
    .container { padding: var(--space-3) var(--space-3) var(--space-6); }
    .grid--2, .grid--3 { grid-template-columns: 1fr; }
    h1 { font-size: var(--text-xl); }
    h2 { font-size: var(--text-lg); margin-top: var(--space-5); }
  }
}

/* ========================================================================================= components */
@layer components {
  /* ---- buttons ---- */
  .btn--primary, button.primary, .button.primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
  .btn--primary:hover, button.primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
  .btn--ghost, button.secondary, .btn--secondary { background: transparent; }
  .btn--danger, button.danger { background: var(--tone-danger-bg); border-color: var(--tone-danger-bd); color: var(--tone-danger-fg); }
  .btn--sm { min-height: 28px; padding: 0 10px; font-size: var(--text-sm); }
  .btn--lg { min-height: 44px; padding: 0 20px; font-size: var(--text-base); }
  .btn--block { width: 100%; }
  .btn--icon { padding: 0; width: var(--control-h); }
  button.linkish, .btn--link { min-height: 0; padding: 0; border: 0; background: none; color: var(--color-link); text-decoration: underline; font-weight: var(--weight-normal); }
  [aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
  button[aria-busy="true"]::after, .btn[aria-busy="true"]::after {
    content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid var(--color-text-muted); border-top-color: transparent; animation: spin .7s linear infinite; }
  @keyframes spin { to { rotate: 360deg; } }

  /* ---- form fields ---- */
  .field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 var(--space-3); }
  .field__label { font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--color-text); }
  .field__label .req { color: var(--tone-danger-fg); margin-left: 2px; }
  .field__help { font-size: var(--text-sm); color: var(--color-text-subtle); }
  .field__error { font-size: var(--text-sm); color: var(--tone-danger-fg); }
  .field--inline { flex-direction: row; align-items: center; gap: var(--space-2); }
  .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 var(--space-4); }
  .check { display: flex; align-items: center; gap: 2px; min-height: 30px; }
  .form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-3); }

  /* ---- tabs (links or buttons) ---- */
  .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--color-border); margin: 0 0 var(--space-4); overflow-x: auto; scrollbar-width: thin; }
  .tabs a, .tabs [role=tab] { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border: 0; border-radius: 0; background: none;
         color: var(--color-text-muted); text-decoration: none; font-weight: var(--weight-medium); white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; }
  .tabs a:hover, .tabs [role=tab]:hover { color: var(--color-text); background: none; }
  .tabs a[aria-current="page"], .tabs [role=tab][aria-selected="true"] { color: var(--color-text); box-shadow: inset 0 -2px 0 var(--color-primary); }
  .tabs .count-pill { font-size: var(--text-xs); color: var(--color-text-subtle); }

  /* ---- cards ---- */
  .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); }
  .card--flush { padding: 0; overflow: hidden; }
  a.card { color: var(--color-text); text-decoration: none; transition: border-color var(--dur-fast) var(--ease); }
  a.card:hover { border-color: var(--color-border-strong); background: var(--color-surface-2); }
  .grid > .card + .card { margin-top: 0; }
  .card__title { font-size: var(--text-base); font-weight: var(--weight-semibold); margin: 0 0 var(--space-2); }
  .card + .card { margin-top: var(--space-3); }
  .stat { display: flex; flex-direction: column; gap: 2px; }
  .stat__value { font-size: var(--text-xl); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
  .stat__label { font-size: var(--text-sm); color: var(--color-text-muted); }

  /* product (game/category) cards — compact tiles */
  .tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-3); }
  .product-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); background: var(--color-surface);
                  border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
  .product-card:hover { border-color: var(--color-border-strong); }
  .product-card__head { display: flex; align-items: center; gap: var(--space-2); }
  .product-card__mono { width: 34px; height: 34px; border-radius: var(--radius); display: grid; place-items: center; flex: none;
                        background: var(--color-surface-3); color: var(--color-text); font-weight: var(--weight-bold); font-size: var(--text-sm); }
  .product-card__title { font-weight: var(--weight-semibold); color: var(--color-text); text-decoration: none; }
  .product-card__title:hover { text-decoration: underline; }
  .product-card__meta { font-size: var(--text-sm); color: var(--color-text-subtle); }
  .chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
  .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: var(--radius-pill);
          background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text); text-decoration: none; font-size: var(--text-sm); }
  .chip:hover { border-color: var(--color-border-strong); background: var(--color-surface-3); text-decoration: none; }
  .chip__count { color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }

  /* compact listing rows (offer lists) */
  .listing { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); }
  .listing__head, .listing-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 200px) 110px 150px; gap: var(--space-3); align-items: center; padding: 10px var(--space-4); }
  .listing__head { background: var(--color-surface-2); font-size: var(--text-sm); color: var(--color-text-muted); font-weight: var(--weight-semibold); border-bottom: 1px solid var(--color-border-strong); }
  .listing-row { border-bottom: 1px solid var(--color-border); position: relative; }
  .listing-row:last-child { border-bottom: 0; }
  .listing-row:hover { background: var(--color-surface-2); }
  .listing-row__title { font-weight: var(--weight-medium); color: var(--color-text); text-decoration: none; }
  .listing-row__title::after { content: ""; position: absolute; inset: 0; }            /* whole row clickable */
  .listing-row__title:hover { text-decoration: underline; }
  .listing-row__meta { font-size: var(--text-sm); color: var(--color-text-subtle); margin-top: 2px; }
  .listing-row__seller { position: relative; z-index: 1; font-size: var(--text-md); }
  .listing-row__stock { font-variant-numeric: tabular-nums; color: var(--color-text-muted); font-size: var(--text-md); }
  .listing-row__price { text-align: right; font-variant-numeric: tabular-nums; }
  .price { color: var(--color-price); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
  .price__unit, .price__alt { display: block; font-size: var(--text-xs); color: var(--color-text-subtle); font-weight: var(--weight-normal); }
  @media (max-width: 767px) {
    .listing__head { display: none; }
    .listing-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title price" "seller stock"; gap: 4px var(--space-3); padding: 10px var(--space-3); }
    .listing-row > :nth-child(1) { grid-area: title; }
    .listing-row > :nth-child(2) { grid-area: seller; }
    .listing-row > :nth-child(3) { grid-area: stock; text-align: right; }
    .listing-row > :nth-child(4) { grid-area: price; }
  }

  /* ---- status badges ---- */
  .status { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); font-size: var(--text-xs);
            font-weight: var(--weight-semibold); white-space: nowrap; border: 1px solid var(--tone-neutral-bd); background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); vertical-align: middle; }
  .status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
  .status--plain::before { display: none; }
  .status--info    { background: var(--tone-info-bg);    color: var(--tone-info-fg);    border-color: var(--tone-info-bd); }
  .status--success { background: var(--tone-success-bg); color: var(--tone-success-fg); border-color: var(--tone-success-bd); }
  .status--warning { background: var(--tone-warning-bg); color: var(--tone-warning-fg); border-color: var(--tone-warning-bd); }
  .status--danger  { background: var(--tone-danger-bg);  color: var(--tone-danger-fg);  border-color: var(--tone-danger-bd); }
  .status--accent  { background: var(--tone-accent-bg);  color: var(--tone-accent-fg);  border-color: var(--tone-accent-bd); }

  /* ---- alerts, notices, toasts ---- */
  .alert { display: flex; gap: var(--space-2); align-items: flex-start; padding: 10px 14px; margin: 0 0 var(--space-3); border-radius: var(--radius);
           border: 1px solid var(--tone-info-bd); background: var(--tone-info-bg); color: var(--color-text); }
  .alert > :last-child { margin-bottom: 0; }
  .alert ul { margin: 0; padding-left: 1.1em; }
  .alert--success { border-color: var(--tone-success-bd); background: var(--tone-success-bg); }
  .alert--warning { border-color: var(--tone-warning-bd); background: var(--tone-warning-bg); }
  .alert--danger  { border-color: var(--tone-danger-bd);  background: var(--tone-danger-bg); }
  .alert__icon { flex: none; width: 18px; height: 18px; margin-top: 1px; }
  .toast-region { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2); max-width: min(380px, calc(100vw - 32px)); }
  .toast { padding: 10px 14px; border-radius: var(--radius); background: var(--color-surface-3); border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-2); }

  /* ---- states ---- */
  .empty-state { text-align: center; padding: var(--space-8) var(--space-4); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); color: var(--color-text-muted); }
  .empty-state__title { color: var(--color-text); font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }
  .empty-state .btn, .empty-state button { margin-top: var(--space-3); }
  .spinner { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--color-border-strong); border-top-color: var(--color-focus); animation: spin .7s linear infinite; vertical-align: middle; }
  .skeleton { background: linear-gradient(90deg, var(--color-surface-2), var(--color-surface-3), var(--color-surface-2)); background-size: 200% 100%;
              animation: shimmer 1.2s ease-in-out infinite; border-radius: var(--radius); min-height: 14px; }
  @keyframes shimmer { to { background-position: -200% 0; } }
  .error-page { text-align: center; padding: var(--space-10) var(--space-4); }
  .error-page__code { font-size: 3rem; font-weight: var(--weight-bold); color: var(--color-text-subtle); line-height: 1; margin-bottom: var(--space-3); font-variant-numeric: tabular-nums; }

  /* ---- tables ---- */
  .table-wrap { position: relative; width: 100%; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); margin: 0 0 var(--space-4); }
  .table-wrap table { margin: 0; }
  .table-wrap tbody tr:last-child td { border-bottom: 0; }
  td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

  /* ---- pagination ---- */
  .pagination, nav.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-4) 0; color: var(--color-text-muted); font-size: var(--text-md); }
  .pagination a, nav.pager a { display: inline-flex; align-items: center; min-height: var(--control-h); padding: 0 12px; border: 1px solid var(--color-border-strong);
         border-radius: var(--radius); text-decoration: none; color: var(--color-text); }
  .pagination a:hover, nav.pager a:hover { background: var(--color-surface-2); }

  /* ---- modal dialog (native <dialog>) ---- */
  dialog.modal { padding: 0; border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text);
                 width: min(520px, calc(100vw - 24px)); box-shadow: var(--shadow-2); }
  dialog.modal::backdrop { background: var(--color-overlay); }
  .modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
  .modal__head h2 { margin: 0; font-size: var(--text-lg); }
  .modal__body { padding: var(--space-4); }
  .modal__foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); }

  /* ---- tooltip (CSS-only, keyboard focus too; text also in aria-describedby target) ---- */
  .tip { position: relative; display: inline-flex; }
  .tip__bubble { position: absolute; bottom: calc(100% + 6px); left: 50%; translate: -50% 0; z-index: var(--z-dropdown); width: max-content; max-width: 260px;
                 padding: 6px 9px; border-radius: var(--radius); background: var(--color-surface-3); border: 1px solid var(--color-border-strong); color: var(--color-text);
                 font-size: var(--text-sm); font-weight: var(--weight-normal); box-shadow: var(--shadow-2); opacity: 0; visibility: hidden; transition: opacity var(--dur-fast); pointer-events: none; }
  .tip:hover .tip__bubble, .tip:focus-within .tip__bubble { opacity: 1; visibility: visible; }
  .tip__trigger { min-height: 0; width: 18px; height: 18px; padding: 0; border-radius: 50%; font-size: 11px; color: var(--color-text-muted); }

  /* ---- key/value lists ---- */
  .kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--space-4); margin: 0 0 var(--space-3); }
  .kv dt { color: var(--color-text-muted); }
  .kv dd { margin: 0; overflow-wrap: anywhere; }
  @media (max-width: 480px) { .kv { grid-template-columns: 1fr; gap: 0; } .kv dd { margin-bottom: var(--space-2); } }

  /* ---- directory (A–Z) ---- */
  .az { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 var(--space-4); padding: 0; list-style: none; }
  .az a, .az span { display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: var(--radius); font-weight: var(--weight-semibold); font-size: var(--text-sm); text-decoration: none; }
  .az a { background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text); }
  .az a:hover { border-color: var(--color-border-strong); }
  .az span { color: var(--color-border-strong); }
  .letter-group { scroll-margin-top: calc(var(--header-h) + 12px); }
  .letter-group__letter { font-size: var(--text-sm); color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: .08em; margin: var(--space-5) 0 var(--space-2); }
  .hero-search { padding: var(--space-6) 0 var(--space-4); }
  .hero-search h1 { font-size: var(--text-3xl); letter-spacing: -.02em; margin-bottom: var(--space-2); }
  .hero-search p { color: var(--color-text-muted); }
  .search-big { display: flex; gap: var(--space-2); max-width: 640px; position: relative; }
  .search-big input[type=search] { flex: 1; min-height: 44px !important; font-size: var(--text-lg); }
  @media (max-width: 767px) { .hero-search { padding-top: var(--space-2); } .hero-search h1 { font-size: var(--text-2xl); } }

  /* ---- filter panel (category page) ---- */
  .filter-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); align-items: end;
                padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--space-3); }
  .filter-bar fieldset { margin: 0; padding: var(--space-2) var(--space-3); }
  .filter-bar .field { margin: 0; }
  .filter-bar .checks { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); }
  .filter-bar__actions { display: flex; gap: var(--space-2); align-items: center; }
  .filters-toggle { display: none; }
  @media (max-width: 767px) {
    .filters-toggle { display: flex; justify-content: space-between; width: 100%; min-height: var(--control-h-touch); }
    .filter-panel:not([open]) .filter-bar { display: none; }
    .filter-panel > summary { list-style: none; }
    .filter-panel > summary::-webkit-details-marker { display: none; }
    .filter-bar { grid-template-columns: 1fr 1fr; margin-top: var(--space-2); }
  }
  /* ---- offer page (R-A): offer + purchase in the main column | seller chat docked on the right ---- */
  .offer-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto 1fr; grid-template-areas: "head side" "main side"; gap: 0 var(--space-6); align-items: start; }
  .offer-layout__head { grid-area: head; }
  .offer-layout__main { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
  .offer-layout__side { grid-area: side; position: sticky; top: calc(var(--header-h) + var(--space-3)); min-width: 0; }
  @media (max-width: 1023px) {
    .offer-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "head" "main" "side"; }
    .offer-layout__side { position: static; margin-top: var(--space-6); }
  }
  .result-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); color: var(--color-text-muted); font-size: var(--text-md); }
}

/* ===================================================== legacy (class names used by pre-M7 templates) */
@layer legacy {
  .muted { color: var(--color-text-muted); }
  .small { font-size: var(--text-sm); }
  .stack label { display: block; margin: 0 0 var(--space-3); font-weight: var(--weight-medium); font-size: var(--text-md); }
  .stack label > input:not([type=checkbox]):not([type=radio]), .stack label > select, .stack label > textarea { display: block; width: 100%; max-width: 560px; margin-top: 4px; font-weight: var(--weight-normal); }
  .stack label.inline { display: inline-block; margin-right: var(--space-3); }
  .stack label.inline > input, .stack label.inline > select { display: inline-block; width: auto; }
  .stack textarea { max-width: 760px !important; }
  .stack > button, .stack > .form-actions { margin-top: var(--space-1); }
  .inline-form { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; vertical-align: middle; margin: 2px 4px 2px 0; }
  .inline-form label { display: inline-flex; align-items: center; gap: 6px; }
  .notice { padding: 10px 14px; margin: 0 0 var(--space-3); border-radius: var(--radius); border: 1px solid var(--tone-warning-bd); background: var(--tone-warning-bg); color: var(--color-text); }
  .flash { padding: 10px 14px; margin: 0 0 var(--space-3); border-radius: var(--radius); border: 1px solid var(--tone-success-bd); background: var(--tone-success-bg); color: var(--color-text); }
  .errors { padding: 10px 14px; margin: 0 0 var(--space-3); border-radius: var(--radius); border: 1px solid var(--tone-danger-bd); background: var(--tone-danger-bg); }
  .errors ul { margin: 0; padding-left: 1.1em; }
  .warn { color: var(--tone-warning-fg); }
  .badge { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-semibold);
           background: var(--tone-accent-bg); color: var(--tone-accent-fg); border: 1px solid var(--tone-accent-bd); vertical-align: middle; }
  .tag { display: inline-block; padding: 0 6px; border-radius: var(--radius-sm); font-size: var(--text-xs); border: 1px solid var(--color-border-strong); color: var(--color-text-muted); }
  .count { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--tone-danger-fg); color: var(--color-on-badge); font-size: 11px; font-weight: var(--weight-bold); line-height: 18px; text-align: center; }
  .count[hidden] { display: none; }
  .actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-start; margin-bottom: var(--space-3); }
  .actions > form.stack { flex: 1 1 100%; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
  .actions > form { margin: 0; }
  .attrs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--space-4); }
  .attrs dt { color: var(--color-text-muted); }
  .attrs dd { margin: 0; }
  ul.inline { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px var(--space-3); }
  ul.history { list-style: none; padding: 0; font-size: var(--text-md); }
  ul.history li { padding: 6px 0; border-bottom: 1px solid var(--color-border); color: var(--color-text-muted); }
  table.summary { max-width: 720px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); border-collapse: separate; border-spacing: 0; overflow: hidden; }
  table.summary th { width: 36%; font-weight: var(--weight-normal); color: var(--color-text-muted); background: none; }
  table.summary tr:last-child > * { border-bottom: 0; }
  tr.total td, tr.total th { border-top: 2px solid var(--color-border-strong); font-weight: var(--weight-semibold); color: var(--color-text); }
  .images { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
  .images img { border-radius: var(--radius); border: 1px solid var(--color-border); object-fit: cover; }
  .images figure { margin: 0; }
  .empty { padding: var(--space-6); text-align: center; color: var(--color-text-muted); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); }
  .sandbox { border: 1px dashed var(--tone-warning-bd); background: var(--tone-warning-bg); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); }
  .description { white-space: pre-wrap; }
  .chatlink { padding: 10px 14px; border-radius: var(--radius); background: var(--color-surface); border: 1px solid var(--color-border); }
  .adminnav { display: none; }                                  /* replaced by the admin sidebar (layouts/staff.html) */
  .sr, .sr-only, .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .contact { margin: 0 0 var(--space-3); }
  .filters { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: end; margin: 0 0 var(--space-3); }
  .filters label { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; }
  .mapping-table textarea { width: 100%; min-width: 0; }
  .mapping-table td { min-width: 9rem; }
  .attr { display: block; }
  .stack fieldset.attr { max-width: 760px; }

  /* messaging (M4) — only shared helpers remain; the messenger is in the components layer (R-A) */
  .panel { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); padding: var(--space-3); }
  .thumb { max-width: 220px; max-height: 220px; display: block; border-radius: var(--radius); }
  .team-list { list-style: none; padding: 0; margin: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); }
  .team-list li a { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; padding: 10px var(--space-3); border-bottom: 1px solid var(--color-border); text-decoration: none; color: inherit; }
  .team-list li:last-child a { border-bottom: 0; }
  .team-list li a:hover { background: var(--color-surface-2); }
  .team-list li.unread .who { font-weight: var(--weight-bold); color: var(--color-text); }
  .team-list .preview { flex: 1 1 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-muted); font-size: var(--text-md); }

  /* custom-offer cards (P2) */
  .offer-card { border: 1px solid var(--tone-info-bd); border-radius: var(--radius-lg); padding: var(--space-3); margin: 4px 0; max-width: 34rem; background: var(--tone-info-bg); }
  .offer-card.outdated, .offer-card.status-expired, .offer-card.status-cancelled, .offer-card.status-declined, .offer-card.status-superseded { border-color: var(--color-border); background: var(--color-surface-2); opacity: .85; }
  .offer-card.status-paid, .offer-card.status-accepted { border-color: var(--tone-success-bd); background: var(--tone-success-bg); }
  .offer-card h3 { margin: 4px 0; font-size: var(--text-base); }
  .offer-card .offer-price strong { font-size: var(--text-lg); }
  .offer-card .offer-desc { white-space: pre-wrap; }
  .offer-card dl.offer-facts { display: grid; grid-template-columns: max-content 1fr; gap: 2px var(--space-3); margin: var(--space-2) 0; }
  .offer-card dl.offer-facts dt { font-weight: var(--weight-semibold); }
  .offer-card dl.offer-facts dd { margin: 0; }
  .offer-card .offer-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
  .offer-card .button { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
  @media (max-width: 600px) { .offer-card { max-width: 100%; } .offer-card dl.offer-facts { grid-template-columns: 1fr; } }

  /* purchase forms (offer page) */
  form.purchase fieldset label { display: flex; align-items: center; gap: 2px; min-height: 30px; font-weight: var(--weight-normal); }
  .currency-calc { background: var(--color-surface); }
  .quote-request { margin-top: var(--space-4); }
}

/* ========================================================================================== utilities */
@layer utilities {
  .num { font-variant-numeric: tabular-nums; }
  .nowrap { white-space: nowrap; }
  .text-muted { color: var(--color-text-muted); }
  .text-subtle { color: var(--color-text-subtle); }
  .text-sm { font-size: var(--text-sm); }
  .mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; }
  .mt-4 { margin-top: var(--space-4); } .mb-4 { margin-bottom: var(--space-4); }
  .w-full { width: 100%; }
  @media (max-width: 767px) {
    .hide-sm { display: none !important; }
    .stack label > input:not([type=checkbox]):not([type=radio]), .stack label > select { max-width: 100%; }
    table:not(.summary) { display: block; overflow-x: auto; }
  }
  @media (max-width: 1023px) {
    /* touch targets on phones and tablets (WCAG 2.5.8 minimum 24 px; we aim for 44 px on primary controls) */
    button, .btn, .button, input[type=submit], select,
    input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]) { min-height: var(--control-h-touch); }
    .btn--sm, .chip, .az a { min-height: 36px; }
    .az a { min-width: 36px; }
    input[type=checkbox], input[type=radio] { width: 22px; height: 22px; }
    .check, form.purchase fieldset label, .filters label, .stack label:has(> input[type=checkbox]), .stack label:has(> input[type=radio]) { min-height: 44px; display: flex; align-items: center; }
    .sidenav a { min-height: 40px; }
  }
  @media (min-width: 768px) { .show-sm { display: none !important; } }
}

/* ================================================================== M7-C discovery components (same layer) */
@layer components {
  /* game artwork / monograms */
  .game-art { display: inline-grid; place-items: center; flex: none; border-radius: var(--radius); object-fit: cover;
              color: var(--color-on-tile); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: .02em; }
  .game-art--md { width: 40px; height: 40px; font-size: var(--text-sm); }
  .game-art--lg { width: 64px; height: 64px; font-size: var(--text-xl); border-radius: var(--radius-lg); }
  .tone-0 { background: var(--tile-0); } .tone-1 { background: var(--tile-1); } .tone-2 { background: var(--tile-2); }
  .tone-3 { background: var(--tile-3); } .tone-4 { background: var(--tile-4); } .tone-5 { background: var(--tile-5); }
  .tone-6 { background: var(--tile-6); } .tone-7 { background: var(--tile-7); }

  /* compact game tiles */
  .game-tile { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); background: var(--color-surface);
               border: 1px solid var(--color-border); border-radius: var(--radius-lg); min-width: 0; }
  .game-tile:hover { border-color: var(--color-border-strong); }
  .game-tile__link { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text); text-decoration: none; min-width: 0; }
  .game-tile__link:hover .game-tile__name { text-decoration: underline; }
  .game-tile__text { display: flex; flex-direction: column; min-width: 0; }
  .game-tile__name { font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .game-tile__meta { font-size: var(--text-sm); color: var(--color-text-subtle); }
  .chip--sm { min-height: 26px; padding: 0 8px; font-size: var(--text-xs); }
  .tile-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

  /* service-type tiles (home) */
  .service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
  .service-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px var(--space-3); border-radius: var(--radius-lg);
                  background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); text-decoration: none; }
  .service-tile:hover { border-color: var(--color-border-strong); background: var(--color-surface-2); }
  .service-tile__name { font-weight: var(--weight-semibold); }
  .service-tile__meta { font-size: var(--text-sm); color: var(--color-text-subtle); }

  /* game / category header */
  .game-hero { display: flex; align-items: center; gap: var(--space-4); margin: 0 0 var(--space-4); }
  .game-hero--compact { gap: var(--space-3); }
  .game-hero--compact h1 { font-size: var(--text-xl); }

  /* game page: category groups */
  .region-section { scroll-margin-top: calc(var(--header-h) + 12px); }
  .category-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); }
  .category-group { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-2); }
  .category-group__title { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-subtle); margin: var(--space-1) var(--space-2) var(--space-2); }
  .category-list { list-style: none; margin: 0; padding: 0; }
  .category-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: 8px var(--space-2);
                  border-radius: var(--radius); color: var(--color-text); text-decoration: none; }
  .category-row:hover { background: var(--color-surface-2); }
  .category-row__name { font-weight: var(--weight-medium); }
  .category-row__meta { font-size: var(--text-sm); color: var(--color-text-subtle); white-space: nowrap; }

  /* seller facts & presence (verified data only) */
  .seller-facts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  .presence { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-online); }
  .presence::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-online); }

  /* category listing: filter sidebar + results */
  .listing-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
  .filter-side { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); background: var(--color-surface);
                 border: 1px solid var(--color-border); border-radius: var(--radius-lg); position: sticky; top: calc(var(--header-h) + var(--space-3));
                 max-height: calc(100vh - var(--header-h) - var(--space-6)); overflow-y: auto; }
  .filter-side fieldset { margin: 0; padding: var(--space-2) var(--space-3); }
  .filter-side .field { margin: 0; }
  .filter-side input[type=search], .filter-side select { width: 100%; }
  .filter-side .cluster input { width: calc(50% - var(--space-1)); min-width: 0; }
  .checks--column { display: flex; flex-direction: column; }
  .results { min-width: 0; transition: opacity var(--dur) var(--ease); }
  .results.is-loading { opacity: .55; }
  @media (min-width: 768px) {          /* wider seller/availability columns (they now carry trust facts) */
    .listing__head, .listing-row { grid-template-columns: minmax(0, 1fr) minmax(150px, 210px) minmax(110px, 150px) 150px; }
  }
  .directory-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
  .directory-tools input[type=search] { flex: 1 1 260px; max-width: 360px; }
  .directory-tools .az { margin: 0; }
  @media (max-width: 1023px) {
    .listing-layout { grid-template-columns: minmax(0, 1fr); }
    .filter-side { position: static; max-height: none; overflow: visible; }
    .listing-layout .filters-toggle { display: flex; justify-content: space-between; width: 100%; min-height: var(--control-h-touch); }
    .listing-layout .filter-panel > summary { list-style: none; }
    .listing-layout .filter-panel > summary::-webkit-details-marker { display: none; }
    .listing-layout .filter-panel[open] .filter-side { margin-top: var(--space-2); }
  }
  @media (min-width: 768px) and (max-width: 1023px) {
    .filter-side { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  }
  @media (max-width: 767px) {
    .listing-layout .filter-panel:not([open]) .filter-side { display: none; }
    .game-hero { gap: var(--space-3); }
    .game-art--lg { width: 48px; height: 48px; font-size: var(--text-lg); }
    .category-groups { grid-template-columns: minmax(0, 1fr); }
  }
}

/* ================================================================== R-A messenger, chat bubbles, offer-page chat */
@layer components {
  /* height of the sticky header including its 1px bottom border (full-height views subtract it) */
  :root { --chrome-h: calc(var(--header-h) + 1px); }
  @media (max-width: 767px) { :root { --chrome-h: 53px; } }          /* 52px mobile header + 1px border */
  body.app-full .app-footer { display: none; }

  /* avatars (monogram until profile photos exist — R-C) */
  .avatar-chip { position: relative; flex: none; display: inline-grid; place-items: center; border-radius: 50%; color: var(--color-on-tile); font-weight: var(--weight-bold); }
  .avatar-chip--md { width: 40px; height: 40px; font-size: var(--text-sm); }
  .avatar-chip--sm { width: 30px; height: 30px; font-size: var(--text-xs); }
  .avatar-chip__dot { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-border-strong); border: 2px solid var(--color-surface); }
  .avatar-chip__dot.is-online { background: var(--color-online); }

  /* identity block (thread header, offer panel) */
  .chat-id { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
  .chat-id__text { min-width: 0; }
  .chat-id__name { margin: 0; font-size: var(--text-base); line-height: var(--leading-tight); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .chat-id__name a { color: var(--color-text); text-decoration: none; }
  .chat-id__name a:hover { text-decoration: underline; }
  .chat-id__sub { margin: 2px 0 0; font-size: var(--text-sm); color: var(--color-text-subtle); display: flex; flex-wrap: wrap; gap: 2px 10px; }
  .presence-text.is-online { color: var(--color-online); font-weight: var(--weight-semibold); }

  /* messenger: list · thread · details */
  .messenger { display: grid; grid-template-columns: 340px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: calc(var(--vvh, 100dvh) - var(--chrome-h)); max-width: var(--content-max); margin: 0 auto;
               border-inline: 1px solid var(--color-border); background: var(--color-bg); overflow: hidden; }
  .conv-pane { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--color-border); background: var(--color-surface); }
  .conv-pane__head { padding: var(--space-3) var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-border); display: flex; flex-direction: column; gap: var(--space-2); }
  .conv-pane__title { margin: 0; font-size: var(--text-lg); }
  .conv-search { position: relative; }
  .conv-search input { width: 100%; padding-left: 34px; }
  .conv-search__icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--color-text-subtle); pointer-events: none; }
  .conv-filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .conv-filters .chip { text-decoration: none; white-space: nowrap; }
  .conv-filters .chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
  .conv-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
  .conv__link { display: flex; gap: var(--space-3); align-items: center; padding: 10px var(--space-3); text-decoration: none; color: inherit; border-bottom: 1px solid var(--color-border); }
  .conv__link:hover { background: var(--color-surface-2); }
  .conv.is-active .conv__link { background: var(--color-surface-3); box-shadow: inset 3px 0 0 var(--color-primary); }
  .conv__main { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
  .conv__top, .conv__bottom { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); min-width: 0; }
  .conv__name { font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .conv__time { flex: none; font-size: var(--text-xs); color: var(--color-text-subtle); }
  .conv__ctx { font-size: var(--text-xs); color: var(--color-text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .conv__preview { font-size: var(--text-md); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .conv--unread .conv__name, .conv--unread .conv__preview { color: var(--color-text); font-weight: var(--weight-semibold); }
  .conv__count { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-on-primary); font-size: var(--text-xs); font-weight: var(--weight-bold); display: inline-grid; place-items: center; }
  .conv-empty { padding: var(--space-6) var(--space-4); color: var(--color-text-muted); text-align: center; font-size: var(--text-md); }
  .conv-pane__foot { margin: 0; padding: var(--space-2) var(--space-3); border-top: 1px solid var(--color-border); font-size: var(--text-sm); }

  .thread-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
  .thread-placeholder { margin: auto; text-align: center; color: var(--color-text-muted); padding: var(--space-6); }
  .thread-placeholder .icon { width: 40px; height: 40px; color: var(--color-text-subtle); }
  .thread { display: flex; flex-direction: column; min-height: 0; flex: 1; position: relative; }
  .thread__head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
  .thread__head .chat-id { flex: 1; }
  .thread__back { display: none; }
  .thread__actions { display: flex; align-items: center; gap: var(--space-1); }
  .thread__context { margin: 0; padding: 6px var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
  .thread__context .icon { width: 14px; height: 14px; }
  .thread__notice { margin: var(--space-2) var(--space-3) 0; }
  .thread__scroller { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-3) var(--space-3) var(--space-2); }
  .thread__scroller:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
  .thread__older { text-align: center; margin: 0 0 var(--space-2); }
  .thread__empty { text-align: center; color: var(--color-text-muted); padding: var(--space-6) var(--space-3); }
  .thread__empty p { margin: 0 0 var(--space-1); }
  .thread__prompts { justify-content: center; margin-top: var(--space-3); }
  .thread__status { margin: 0; padding: 0 var(--space-3); font-size: var(--text-xs); color: var(--tone-warning-fg); min-height: 0; }
  .thread__status:empty { display: none; }

  /* bubbles */
  .msgs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
  .msg { display: flex; flex-direction: column; max-width: min(78%, 560px); }
  .msg--in { align-self: flex-start; align-items: flex-start; }
  .msg--out { align-self: flex-end; align-items: flex-end; }
  .msg__bubble { padding: 7px 10px 5px; border-radius: 16px; background: var(--color-surface-2); border: 1px solid var(--color-border); overflow-wrap: anywhere; min-width: 64px; }
  .msg--in .msg__bubble { border-bottom-left-radius: 6px; }
  .msg--out .msg__bubble { border-bottom-right-radius: 6px; background: color-mix(in srgb, var(--color-primary) 26%, var(--color-surface)); border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); }
  .msg--note .msg__bubble { background: var(--tone-warning-bg); border-color: var(--tone-warning-bd); }
  .msg--auto .msg__bubble { border-style: dashed; }
  .msg--card { max-width: min(92%, 560px); }
  .msg__sender { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-muted); margin-bottom: 2px; }
  .msg__tag { font-weight: var(--weight-normal); padding: 0 6px; border-radius: var(--radius-pill); background: var(--color-surface-3); color: var(--color-text-muted); }
  .msg__tag--note { background: var(--tone-warning-bg); color: var(--tone-warning-fg); }
  .msg__body { margin: 0; white-space: pre-wrap; line-height: var(--leading); }
  .msg__body--removed { font-style: italic; color: var(--color-text-subtle); }
  .msg__file { margin: 2px 0 0; }
  .msg__img { display: block; max-width: min(260px, 100%); max-height: 260px; border-radius: 10px; }
  .msg__meta { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 2px; font-size: 11px; color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }
  .msg__state[data-state="seen"] { color: var(--color-link); }
  .msg__state[data-state="failed"] { color: var(--tone-danger-fg); font-weight: var(--weight-bold); }
  .msg__retry { min-height: 0; padding: 0 6px; font-size: 11px; border-radius: var(--radius-pill); border-color: var(--tone-danger-bd); color: var(--tone-danger-fg); background: var(--tone-danger-bg); }
  .msg__warn { margin: 4px 0 0; font-size: var(--text-xs); color: var(--tone-warning-fg); max-width: 420px; }
  .msg--system { align-self: center; max-width: 92%; }
  .msg__system { margin: 4px 0; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--color-surface-2); color: var(--color-text-muted); font-size: var(--text-sm); text-align: center; }
  .msg__system time { margin-left: 4px; font-size: 11px; color: var(--color-text-subtle); }
  .day-sep { align-self: center; margin: var(--space-2) 0; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-subtle); }
  .day-sep span { padding: 2px 10px; border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid var(--color-border); }
  .jump-latest { position: absolute; right: var(--space-4); bottom: 92px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: var(--radius-pill);
                 background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-2); font-size: var(--text-sm); }
  .jump-latest .icon { width: 16px; height: 16px; }

  /* composer: anchored at the bottom of the thread */
  .composer { flex: none; padding: var(--space-2) var(--space-3) max(var(--space-2), env(safe-area-inset-bottom)); border-top: 1px solid var(--color-border); background: var(--color-surface); }
  .composer__row { display: flex; align-items: flex-end; gap: var(--space-2); }
  .composer textarea { flex: 1; min-height: 40px; max-height: 160px; resize: none; padding: 9px 12px; border-radius: 20px; line-height: 1.35; }
  .composer__send { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; min-width: 40px; padding: 0 14px; border-radius: 20px;
                    background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); font-weight: var(--weight-semibold); }
  .composer__send:hover { background: var(--color-primary-hover); }
  .composer.is-empty .composer__send { opacity: .6; }
  .composer__send .icon { width: 18px; height: 18px; }
  .composer__attach { flex: none; min-height: 40px; width: 40px; border-radius: 50%; cursor: pointer; }
  .composer__note { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--tone-warning-fg); margin-bottom: 6px; }
  .composer__hint { margin: 4px 0 0; font-size: 11px; color: var(--color-text-subtle); }
  .composer__error { margin: 4px 0 0; font-size: var(--text-sm); color: var(--tone-danger-fg); }
  .composer__error:empty { display: none; }
  .attach-form { padding: 0 var(--space-3); }
  .attach-form p { margin: 0 0 var(--space-2); }
  @media (pointer: coarse) { .composer__send-text { display: none; } .composer__send { padding: 0; width: 44px; min-height: 44px; border-radius: 50%; } .composer textarea { min-height: 44px; } }
  @media (pointer: fine) { .composer__send-text { display: none; } }

  /* details panel */
  .ctx-pane { overflow-y: auto; padding: var(--space-3); background: var(--color-surface); border-left: 1px solid var(--color-border); font-size: var(--text-md); }
  .ctx-pane h3 { font-size: var(--text-md); margin: var(--space-4) 0 var(--space-2); }
  .ctx-pane__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); }
  .ctx-pane form.stack { margin-bottom: var(--space-2); }
  .ctx-pane select, .ctx-pane input, .ctx-pane textarea { width: 100%; }
  .messenger:not(.messenger--thread) .ctx-pane { display: none; }
  /* docked on wide screens for team conversations; otherwise a slide-over */
  @media (min-width: 1280px) {
    .messenger--team { grid-template-columns: 320px minmax(0, 1fr) 300px; }
    .messenger--team .ctx-pane__head button, .messenger--team [data-ctx-toggle] { display: none; }
  }
  @media (max-width: 1279px) {
    html.js .ctx-pane { position: fixed; z-index: var(--z-drawer); top: var(--chrome-h); right: 0; bottom: 0; width: min(360px, 92vw); box-shadow: var(--shadow-2); transform: translateX(105%); transition: transform var(--dur) var(--ease); visibility: hidden; }
    html.js .messenger.ctx-open .ctx-pane { transform: none; visibility: visible; }
  }
  @media (min-width: 1280px) { html.js .messenger:not(.messenger--team) .ctx-pane { position: fixed; z-index: var(--z-drawer); top: var(--chrome-h); right: 0; bottom: 0; width: 360px; box-shadow: var(--shadow-2); transform: translateX(105%); visibility: hidden; transition: transform var(--dur) var(--ease); }
                               html.js .messenger:not(.messenger--team).ctx-open .ctx-pane { transform: none; visibility: visible; } }
  html:not(.js) .messenger { height: auto; overflow: visible; grid-template-columns: 1fr; }
  html:not(.js) [data-ctx-toggle], html:not(.js) [data-ctx-close] { display: none; }   /* no JS: details shown inline */
  @media (prefers-reduced-motion: reduce) { .ctx-pane { transition: none !important; } }

  /* tablets and phones: one pane at a time */
  @media (max-width: 1023px) { .messenger { grid-template-columns: 300px minmax(0, 1fr); } }
  @media (max-width: 767px) {
    .messenger { grid-template-columns: minmax(0, 1fr); border-inline: 0; }
    .messenger--thread .conv-pane { display: none; }
    .messenger:not(.messenger--thread) .thread-pane { display: none; }
    .thread__back { display: inline-flex; }
    .msg { max-width: 86%; }
    .jump-latest { bottom: 84px; right: var(--space-3); }
  }

  /* offer page chat panel (docked ≥ 1024 px, sheet below) */
  .offer-chat { display: flex; flex-direction: column; height: calc(100vh - var(--header-h) - 140px); max-height: 760px; min-height: 420px;   /* 140px: room for the footer on short pages, so the sticky panel never slides under the header */
                border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; }
  .offer-chat:focus { outline: none; }
  .offer-chat__head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border-bottom: 1px solid var(--color-border); }
  .offer-chat__head .chat-id { flex: 1; }
  .offer-chat__close { display: none; }
  .offer-chat .thread { background: var(--color-bg); }
  .offer-chat__prompt { padding: var(--space-6) var(--space-4); text-align: center; margin: auto 0; }
  .offer-chat__prompt p { margin: 0 0 var(--space-2); }
  .offer-chat__prompt .cluster { justify-content: center; margin-top: var(--space-3); }
  .offer-chat__more { margin: 0; padding: 0 var(--space-3) var(--space-2); background: var(--color-surface); }
  .offer-chat-bar { display: none; }
  @media (max-width: 1023px) {
    html.js .offer-layout__side { margin: 0; }
    html.js .offer-chat:not(.offer-chat--inline) { position: fixed; inset: 0; z-index: var(--z-modal); height: var(--vvh, 100dvh); max-height: none; min-height: 0; border: 0; border-radius: 0; display: none; }
    html.js .offer-chat.is-open:not(.offer-chat--inline) { display: flex; }
    html.js .offer-chat__close { display: inline-flex; }
    html.js .offer-chat__head { padding-top: max(var(--space-2), env(safe-area-inset-top)); }
    html.js .offer-chat-bar { display: block; position: sticky; bottom: 0; z-index: var(--z-header); padding: var(--space-2) var(--space-4) max(var(--space-2), env(safe-area-inset-bottom));
                              background: var(--color-surface); border-top: 1px solid var(--color-border); margin: var(--space-6) calc(-1 * var(--space-4)) 0; }
    @media (max-width: 767px) { html.js .offer-chat-bar { margin-inline: calc(-1 * var(--space-3)); padding-inline: var(--space-3); } }   /* = .container padding on phones */
    html.js .offer-chat-bar .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
    html.chat-sheet-open body { overflow: hidden; }
    html:not(.js) .offer-chat { height: 70vh; }
    .offer-chat--inline { margin-top: var(--space-6); }
  }
}

/* ================================================================== R-C chat refinement, avatars, ratings, reviews, profiles */
@layer components {
  /* avatars with pictures */
  .avatar-chip { overflow: visible; }
  .avatar-chip img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
  .avatar-chip--xl { width: 96px; height: 96px; font-size: var(--text-2xl); }
  .avatar-chip--xl .avatar-chip__dot { width: 18px; height: 18px; right: 4px; bottom: 4px; border-width: 3px; }
  .avatar--img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: block; }

  /* ratings */
  .rating { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
  .rating__star { color: var(--color-star); }
  .rating__avg { color: var(--color-text); font-weight: var(--weight-bold); }
  .rating__count { color: var(--color-text-subtle); font-size: .95em; }
  .rating--none { color: var(--color-text-subtle); }
  .stars { display: inline-flex; gap: 1px; line-height: 1; }
  .stars__s { color: var(--color-star-empty); }
  .stars__s--full { color: var(--color-star); }
  .stars__s--half { background: linear-gradient(90deg, var(--color-star) 50%, var(--color-star-empty) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .stars--sm { font-size: 14px; } .stars--md { font-size: 18px; } .stars--lg { font-size: 24px; }
  .seller-facts { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
  .seller-facts__seen { font-size: var(--text-xs); }
  .listing-row__seller { display: flex; align-items: center; gap: var(--space-2); }
  .listing-row__seller-text { min-width: 0; }

  /* chat bubbles: soft asymmetric corners, grouped runs, brand-coloured outgoing */
  .msgs { gap: 0; }
  .msg { margin-top: 10px; }
  .msg:first-child, .msg.msg--cont-prev { margin-top: 2px; }
  .msg__bubble { padding: 7px 12px 6px; border-radius: 18px; border: 1px solid var(--chat-in-bd); background: var(--chat-in-bg); color: var(--chat-in-fg); min-width: 72px; box-shadow: none; }
  .msg--in .msg__bubble { border-bottom-left-radius: 6px; }
  .msg--in.msg--cont-prev .msg__bubble { border-top-left-radius: 6px; }
  .msg--out .msg__bubble { background: var(--chat-out-bg); border-color: var(--chat-out-bg); color: var(--chat-out-fg); border-bottom-right-radius: 6px; }
  .msg--out.msg--cont-prev .msg__bubble { border-top-right-radius: 6px; }
  .msg--cont-prev .msg__sender > span:first-child { display: none; }
  .msg--note .msg__bubble { background: var(--chat-note-bg); border-color: var(--tone-warning-bd); color: var(--color-text); }
  .msg__body { font-size: var(--text-base); line-height: 1.42; }
  .msg__meta { margin-top: 1px; gap: 3px; font-size: 11px; line-height: 1; opacity: .9; }
  .msg--out .msg__meta { color: color-mix(in srgb, var(--chat-out-fg) 78%, transparent); }
  .msg--out .msg__state[data-state="seen"] { color: var(--chat-out-fg); }
  .msg__state > span:first-child { letter-spacing: -3px; padding-right: 3px; }
  .msg--out .msg__sender { color: color-mix(in srgb, var(--chat-out-fg) 80%, transparent); }
  .msg--out .msg__tag { background: color-mix(in srgb, var(--chat-out-fg) 18%, transparent); color: var(--chat-out-fg); }
  .msg--out .msg__file a { color: var(--chat-out-fg); }
  .msg__state[data-state="failed"] ~ .msg__retry, .msg__retry { margin-left: 4px; }
  .msg--out:has(.msg__state[data-state="failed"]) .msg__bubble { background: transparent; color: var(--color-text); border: 1px dashed var(--tone-danger-bd); }
  .msg--out:has(.msg__state[data-state="failed"]) .msg__meta { color: var(--tone-danger-fg); }
  .msg--out:has(.msg__state[data-state="pending"]) .msg__bubble { opacity: .75; }
  /* system/order events: compact neutral timeline notes */
  .msg--system { align-self: stretch; max-width: none; margin: 8px 0; }
  .msg__system { display: block; margin: 0 auto; max-width: 520px; padding: 2px 8px; background: none; border-radius: 0;
                 color: var(--chat-system-fg); font-size: var(--text-sm); line-height: 1.45; text-align: center; }
  .msg__system::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--color-border-strong); vertical-align: 2px; }
  .msg__system time { white-space: nowrap; margin-left: 6px; }
  /* separators */
  .day-sep, .unread-sep { display: flex; align-items: center; gap: var(--space-3); align-self: stretch; margin: 14px 0 6px; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-subtle); }
  .day-sep::before, .day-sep::after, .unread-sep::before, .unread-sep::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
  .day-sep span { padding: 0; border: 0; background: none; }
  .unread-sep { color: var(--color-link); }
  .unread-sep::before, .unread-sep::after { background: color-mix(in srgb, var(--color-link) 45%, transparent); }
  /* composer: one rounded field with attach + send */
  .composer { padding: 10px var(--space-3) max(10px, env(safe-area-inset-bottom)); }
  .composer__row { align-items: flex-end; gap: 6px; padding: 4px; border: 1px solid var(--color-input-border); border-radius: 24px; background: var(--color-bg); }
  .composer__row:focus-within { border-color: var(--color-focus); box-shadow: 0 0 0 1px var(--color-focus); }
  .composer textarea { border: 0; background: transparent; box-shadow: none; padding: 8px 6px; min-height: 36px; border-radius: 0; }
  .composer textarea:focus, .composer textarea:focus-visible { outline: none; box-shadow: none; }
  .composer__attach { min-height: 36px; width: 36px; border: 0; color: var(--color-text-muted); }
  .composer__attach:hover { color: var(--color-text); background: var(--color-surface-2); }
  .composer__attach:focus-within { box-shadow: var(--focus-ring); }
  .composer__send { min-height: 36px; min-width: 36px; width: 36px; padding: 0; border-radius: 50%; }
  .composer.is-empty .composer__send { opacity: .45; }
  .composer__hint { padding-left: 14px; }
  @media (pointer: coarse) { .composer__send, .composer__attach { width: 42px; min-height: 42px; } .composer textarea { min-height: 42px; } }
  .thread__status:not(:empty) { align-self: center; margin: 6px auto; padding: 3px 12px; border-radius: var(--radius-pill); background: var(--tone-warning-bg); border: 1px solid var(--tone-warning-bd); display: inline-flex; align-items: center; gap: 6px; }
  .thread__status:not(:empty)::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tone-warning-fg); animation: pulse 1.2s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: .3; } }
  @media (prefers-reduced-motion: reduce) { .thread__status::before { animation: none; } }
  .thread__empty { padding: var(--space-8) var(--space-4); }
  .conv__link:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }

  /* order page with the order conversation */
  .order-layout--chat { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-6); align-items: start; }
  .order-layout__main { min-width: 0; }
  .order-layout__chat { position: sticky; top: calc(var(--header-h) + var(--space-3)); }
  .offer-chat--inline { height: min(640px, calc(100vh - var(--header-h) - 140px)); }
  @media (max-width: 1279px) { .order-layout--chat { grid-template-columns: minmax(0, 1fr); } .order-layout__chat { position: static; } .offer-chat--inline { height: 560px; } }

  /* reviews */
  .review-block { margin-top: var(--space-6); }
  .review-form { max-width: 640px; }
  .star-input { border: 0; padding: 0; margin: 0; }
  .star-input legend { font-weight: var(--weight-semibold); margin-bottom: 4px; }
  .star-input__stars { display: flex; align-items: center; gap: 2px; }
  .star-input__stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .star-input__stars label { cursor: pointer; font-size: 34px; line-height: 1; padding: 2px; color: var(--color-star-empty); border-radius: var(--radius); transition: transform var(--dur-fast) var(--ease); }
  .star-input__stars label:hover { transform: scale(1.08); }
  .star-input__stars input:focus-visible + label { box-shadow: var(--focus-ring); }
  .star-input__stars:has(input[value="1"]:checked) label:nth-of-type(-n+1),
  .star-input__stars:has(input[value="2"]:checked) label:nth-of-type(-n+2),
  .star-input__stars:has(input[value="3"]:checked) label:nth-of-type(-n+3),
  .star-input__stars:has(input[value="4"]:checked) label:nth-of-type(-n+4),
  .star-input__stars:has(input[value="5"]:checked) label:nth-of-type(-n+5),
  .star-input__stars:has(label:nth-of-type(1):hover) label:nth-of-type(-n+1),
  .star-input__stars:has(label:nth-of-type(2):hover) label:nth-of-type(-n+2),
  .star-input__stars:has(label:nth-of-type(3):hover) label:nth-of-type(-n+3),
  .star-input__stars:has(label:nth-of-type(4):hover) label:nth-of-type(-n+4),
  .star-input__stars:has(label:nth-of-type(5):hover) label:nth-of-type(-n+5) { color: var(--color-star); }
  .star-input__name { margin-left: var(--space-2); font-weight: var(--weight-semibold); color: var(--color-text-muted); }
  .star-input__name span { display: none; }
  .star-input__stars:has(input[value="1"]:checked) [data-for="1"], .star-input__stars:has(input[value="2"]:checked) [data-for="2"],
  .star-input__stars:has(input[value="3"]:checked) [data-for="3"], .star-input__stars:has(input[value="4"]:checked) [data-for="4"],
  .star-input__stars:has(input[value="5"]:checked) [data-for="5"] { display: inline; }
  @media (prefers-reduced-motion: reduce) { .star-input__stars label { transition: none; } .star-input__stars label:hover { transform: none; } }
  .review-list { list-style: none; margin: var(--space-3) 0; padding: 0; }
  .review { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
  .review--own { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
  .review__head { display: flex; align-items: center; gap: var(--space-3); }
  .review__who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .review__name { font-weight: var(--weight-semibold); }
  .review__meta { font-size: var(--text-sm); color: var(--color-text-subtle); }
  .verified { color: var(--tone-success-fg); font-weight: var(--weight-semibold); }
  .review__body { margin: var(--space-2) 0 0; white-space: pre-wrap; }
  .review__note { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--tone-warning-fg); }
  .review__reply { margin: var(--space-3) 0 0 var(--space-6); padding: var(--space-2) var(--space-3); border-left: 3px solid var(--color-primary); background: var(--color-surface-2); border-radius: 0 var(--radius) var(--radius) 0; }
  .review__reply p { margin: 2px 0 0; white-space: pre-wrap; }
  .review__reply-who { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
  .review__report { margin-top: var(--space-2); font-size: var(--text-sm); }
  .review__report summary { color: var(--color-text-subtle); cursor: pointer; }
  .review-edit { margin-top: var(--space-3); }
  .review-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-6); align-items: center; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
  .review-summary__score { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  .review-summary__avg { font-size: 44px; font-weight: var(--weight-bold); line-height: 1; }
  .review-summary__avg--none { color: var(--color-text-subtle); }
  .review-dist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .review-dist li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 40px; gap: var(--space-2); align-items: center; font-size: var(--text-sm); }
  .review-dist meter { width: 100%; height: 8px; }
  .review-dist__n { text-align: right; color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }
  @media (max-width: 639px) { .review-summary { grid-template-columns: 1fr; } }

  /* profiles */
  .profile-hero { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-bottom: var(--space-3); }
  .profile-hero__text { flex: 1 1 260px; min-width: 0; }
  .profile-hero__name { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .profile-hero__sub { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--text-sm); color: var(--color-text-subtle); }
  .profile-hero__tagline { margin: 6px 0 0; color: var(--color-text-muted); }
  .profile-hero__rating { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
                          background: var(--color-surface); color: var(--color-text); text-decoration: none; }
  .profile-hero__rating:hover { border-color: var(--color-border-strong); }
  .profile-hero__avg { font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: 1; }
  .profile-hero__new { font-weight: var(--weight-bold); }
  .profile-bio { color: var(--color-text-muted); }
  .reviews-section { margin-top: var(--space-8); scroll-margin-top: calc(var(--header-h) + 12px); }
  .profile-card { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
  .profile-card__text { flex: 1 1 240px; min-width: 0; }
  .profile-card__name { margin: 0; }
  .profile-card__bio { margin: var(--space-2) 0 0; white-space: pre-wrap; }
  .avatar-form input[type=file] { max-width: 100%; }
}

/* R-C: star input inside legacy .stack forms (the legacy layer outranks components, so the override lives here) */
@layer legacy {
  .stack .star-input__stars label { display: inline-block; margin: 0; font-size: 34px; font-weight: var(--weight-normal); line-height: 1; }
  .stack .star-input legend { font-size: var(--text-md); }
}

@layer components {
  @media (pointer: coarse), (max-width: 767px) {
    .chat-id__name a { display: inline-block; padding: 12px 4px; margin: -12px -4px; }   /* ≥ 44 px tap target */
  }
}

/* scroll containers contain their absolutely positioned descendants (e.g. .sr-only text in unread counts), so hidden
   text inside a scrolled list can never extend the page itself */
@layer components {
  .messenger, .conv-list, .thread__scroller { position: relative; }
}

/* ============================================================ R-B direct checkout (offer page purchase box) */
@layer components {
  .buy-card { padding: var(--space-5); }
  .buy-card__title { margin: 0 0 var(--space-3); font-size: var(--text-lg); }
  .buy-form { display: flex; flex-direction: column; gap: var(--space-4); }
  .buy-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
  .buy-form legend { padding: 0; margin: 0 0 var(--space-2); font-weight: var(--weight-semibold); font-size: var(--text-md); }
  .buy-form .req { color: var(--tone-danger-fg); }
  .buy-config { display: flex; flex-direction: column; gap: var(--space-4); }
  .buy-facts { margin: 0; }
  .buy-field { display: block; margin: 0; font-weight: var(--weight-medium); font-size: var(--text-md); }
  .buy-field > input, .buy-field > select { display: block; width: 100%; margin-top: 4px; font-weight: var(--weight-normal); }
  .buy-field--qty > input { max-width: 160px; }
  .buy-field[hidden] { display: none; }

  /* segmented control (currency: receive / spend) */
  .seg-field { display: flex; flex-direction: column; gap: var(--space-3); }
  .seg { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; gap: 3px; border-radius: var(--radius); background: var(--color-surface-2); border: 1px solid var(--color-border); }
  .seg__opt { position: relative; display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 var(--space-2); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--color-text-muted); text-align: center; }
  .seg__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .seg__opt:has(input:checked) { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-1); }
  .seg__opt:has(input:focus-visible) { outline: var(--focus-ring); }

  /* option rows: name left, price right */
  .choice-list { display: flex; flex-direction: column; gap: 6px; }
  .choice-list > p { margin: 0 0 4px; }
  .choice { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; margin: 0; padding: 6px var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); cursor: pointer; font-weight: var(--weight-normal); background: var(--color-surface); }
  .choice:has(input:checked) { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
  .choice:has(input:disabled) { opacity: .55; cursor: not-allowed; }
  .choice input { flex: none; margin: 0; }
  .choice__name { flex: 1; min-width: 0; }
  .choice__price { flex: none; font-variant-numeric: tabular-nums; color: var(--color-text-muted); }

  /* chips for short axes (rank, mode …) */
  .buy-form .axes { display: flex; flex-direction: column; gap: var(--space-3); }
  .choice-chips > legend { margin-bottom: var(--space-2); }
  .choice-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .chip-opt { position: relative; display: inline-flex; margin: 0; }
  .chip-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .chip-opt span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); font-size: var(--text-md); cursor: pointer; }
  .chip-opt input:checked + span { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-on-primary); }
  .chip-opt input:disabled + span { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
  .chip-opt input:focus-visible + span { outline: var(--focus-ring); }

  .buy-form details.extras { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0 var(--space-3); }
  .buy-form details.extras > summary { min-height: 44px; display: flex; align-items: center; gap: 6px; font-weight: var(--weight-medium); }
  .buy-form details.extras[open] { padding-bottom: var(--space-3); }
  .buy-form details.extras fieldset + fieldset { margin-top: var(--space-3); }

  /* total */
  .buy-summary { padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--color-surface-2); transition: opacity .15s var(--ease); }
  .buy-summary[aria-busy=true] { opacity: .6; }
  .price-lines { margin: 0; display: flex; flex-direction: column; gap: 4px; }
  .price-line { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-md); }
  .price-line dt { color: var(--color-text-muted); min-width: 0; }
  .price-line dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .price-line--strong dt, .price-line--strong dd { color: var(--color-text); font-weight: var(--weight-semibold); }
  .price-line--sub { font-size: var(--text-sm); }
  .price-line--sub:first-of-type, .price-line:not(.price-line--sub) + .price-line--sub { margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--color-border); }
  .buy-total { display: flex; justify-content: space-between; align-items: baseline; margin: var(--space-2) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--color-border); font-weight: var(--weight-semibold); }
  .buy-total strong { font-size: var(--text-xl, 22px); color: var(--color-price); font-variant-numeric: tabular-nums; }
  .buy-note { margin: var(--space-2) 0 0; }
  .buy-error { margin: 0; }
  .buy-error__quote { display: inline-block; margin-left: 4px; font-weight: var(--weight-semibold); }

  /* payment */
  .buy-details { display: flex; flex-direction: column; gap: var(--space-3); }
  .pay { display: flex; flex-direction: column; gap: 6px; }
  .pay-methods { display: flex; flex-direction: column; gap: 6px; }
  .pay-methods[hidden] { display: none; }
  .pay-opt { display: flex; align-items: center; gap: var(--space-2); min-height: 48px; margin: 0; padding: 6px var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); cursor: pointer; font-weight: var(--weight-normal); }
  .pay-opt:has(input:checked) { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
  .pay-opt:has(input:disabled) { cursor: not-allowed; color: var(--color-text-subtle); background: var(--color-surface-2); }
  .pay-opt input { flex: none; margin: 0; }
  .pay-opt__main { flex: 1; display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
  .pay-opt__main .icon { width: 18px; height: 18px; flex: none; color: var(--color-text-muted); }
  .pay-opt__sub { display: block; font-size: var(--text-sm); color: var(--color-text-subtle); }
  .pay-opt__amt { flex: none; font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }
  .pay-note { margin: 2px 0 0; }
  .buy-submit { min-height: 48px; gap: 8px; font-size: var(--text-base); }
  .buy-submit .icon { width: 18px; height: 18px; }
  .buy-submit[aria-busy=true] { cursor: progress; }
  .buy-msg { margin: 0; padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--tone-danger-bd); background: var(--tone-danger-bg); }
  .buy-msg--changed { border-color: var(--tone-warning-bd); background: var(--tone-warning-bg); }
  .buy-fineprint { margin: 0; color: var(--color-text-subtle); font-size: var(--text-sm); }
  .buy-fineprint > .icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; }

  /* mobile bar: chat + jump to the purchase box (hidden while the box is on screen) */
  @media (max-width: 1023px) {
    html.js .offer-chat-bar { display: flex; gap: var(--space-2); }
    html.js .offer-chat-bar > .btn { flex: 1; }
    html.js .offer-chat-bar > .btn[hidden] { display: none; }
    .offer-chat-bar__total { margin-left: 6px; font-variant-numeric: tabular-nums; }
    .offer-chat-bar__total::before { content: "· "; }
    /* never cover the on-screen keyboard, a focused field or its validation message */
    html.js body:has(.offer-layout :is(input, select, textarea):focus) .offer-chat-bar,
    html.js body.is-typing .offer-chat-bar { display: none; }
    html:has(.offer-chat-bar) { scroll-padding-bottom: 72px; }
  }

  /* payment result page */
  .result { max-width: 720px; margin: var(--space-4) auto; padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
  .result__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; margin-bottom: var(--space-3); }
  .result__icon .icon { width: 26px; height: 26px; }
  .result--ok .result__icon { background: var(--tone-success-bg); color: var(--tone-success-fg); }
  .result--wait .result__icon { background: var(--tone-info-bg); color: var(--tone-info-fg); }
  .result--stop .result__icon { background: var(--tone-warning-bg); color: var(--tone-warning-fg); }
  .result h1 { margin: 0 0 var(--space-2); }
  .result__lead { margin: 0 0 var(--space-4); color: var(--color-text-muted); }
  .result__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--color-surface-2); }
  .result__facts dt { font-size: var(--text-sm); color: var(--color-text-subtle); }
  .result__facts dd { margin: 2px 0 0; overflow-wrap: anywhere; }
  .result__next h2 { font-size: var(--text-base); margin: 0 0 var(--space-2); }
  .steps { margin: 0 0 var(--space-4); padding-left: 1.4em; display: flex; flex-direction: column; gap: 6px; }
  .steps__done { color: var(--color-text-muted); }
  .steps__done::marker { color: var(--tone-success-fg); }
  .result__msg { padding: var(--space-3); border-radius: var(--radius); background: var(--color-surface-2); }
  .result__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
  .result__actions .inline-form { margin: 0; }
  @media (max-width: 639px) { .result { padding: var(--space-4); } .result__actions > .btn { flex: 1 1 100%; } }
}

/* ============================================================ R-D1 seller workspace (Today, inventory, editor) */
@layer components {
  .pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap; }
  .pill--info { border-color: var(--tone-info-bd, var(--color-border)); background: var(--tone-info-bg); color: var(--tone-info-fg); }

  /* Today */
  .ws-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); margin: 0 0 var(--space-4); }
  .ws-stat { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text); text-decoration: none; }
  .ws-stat:hover { border-color: var(--color-border-strong); text-decoration: none; }
  .ws-stat__n { font-size: var(--text-xl, 22px); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; line-height: 1.1; }
  .ws-stat__l { font-size: var(--text-sm); color: var(--color-text-muted); }
  .ws-stat--hot { border-color: var(--color-primary); }
  .ws-stat--hot .ws-stat__n { color: var(--color-primary); }
  .ws-stat--alert { border-color: var(--tone-danger-bd); background: var(--tone-danger-bg); }
  .ws-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .ws-panel { min-width: 0; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
  .ws-panel--wide { grid-column: 1 / -1; }
  .ws-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
  .ws-panel__head h2 { margin: 0; font-size: var(--text-base); }
  .ws-list { list-style: none; margin: 0; padding: 0; }
  .ws-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--color-border); min-height: 52px; }
  .ws-item:first-child { border-top: 0; }
  .ws-item__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .ws-item__title { font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ws-item__meta { font-size: var(--text-sm); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ws-item__amt { flex: none; font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }
  .ws-item > .btn { flex: none; }
  .ws-list--orders { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); padding: 0 var(--space-4); }
  .ws-empty { margin: 0; color: var(--color-text-subtle); font-size: var(--text-md); }
  .ws-flag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-semibold); white-space: nowrap; }
  .ws-flag--out { background: var(--tone-danger-bg); color: var(--tone-danger-fg); }
  .ws-flag--low { background: var(--tone-warning-bg); color: var(--tone-warning-fg); }
  .ws-money { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0 0 var(--space-2); }
  .ws-money dt { font-size: var(--text-sm); color: var(--color-text-muted); }
  .ws-money dd { margin: 0; font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
  @media (max-width: 1100px) { .ws-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (max-width: 767px) {
    .ws-grid { grid-template-columns: minmax(0, 1fr); }
    .ws-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ws-item { flex-wrap: wrap; }
    .ws-item__main { flex-basis: 100%; }
    .ws-item__amt { margin-right: auto; }
  }

  /* inventory */
  .inv-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
  .inv-filters label { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); font-weight: var(--weight-medium); margin: 0; }
  .inv-filters label.check { flex-direction: row; align-items: center; min-height: 36px; }
  .inv-filters__q { flex: 1 1 220px; }
  .inv-filters__q input { width: 100%; }
  .inv-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); }
  .inv-bulk label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
  .inv-table td { vertical-align: top; }
  .inv-table__sel { width: 36px; }
  .inv-table__title a { font-weight: var(--weight-medium); }
  .inv-meta { display: block; font-size: var(--text-sm); color: var(--color-text-muted); }
  .inv-flags { margin-top: 4px; gap: 4px; }
  .inv-quick { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; margin: 0; }
  .inv-quick label { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
  .inv-quick input { width: 110px; }
  .inv-table__act { white-space: nowrap; text-align: right; }
  @media (max-width: 767px) {
    .inv-table, .inv-table tbody { display: block; }
    .inv-table thead { display: none; }
    .inv-table tr { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px var(--space-2); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
    .inv-table td { display: block; border: 0; padding: 0; }
    .inv-table td:not(.inv-table__sel) { grid-column: 2; }
    .inv-table__act { text-align: left; }
    .inv-quick input { width: 100%; }
    .inv-quick label { flex: 1 1 120px; }
  }

  /* category picker */
  .pick-search { display: flex; gap: var(--space-2); margin: 0 0 var(--space-2); max-width: 560px; }
  .pick-search input { flex: 1; min-width: 0; }
  .pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-3); }
  .pick-game { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
  .pick-game__name { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--text-base); }
  .pick-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
  .pick-cat { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius); color: var(--color-text); text-decoration: none; }
  .pick-cat:hover { background: var(--color-surface-2); text-decoration: none; }
  .pick-cat__name { min-width: 0; }

  /* listing editor */
  .ed-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
  .ed-layout--edit { grid-template-columns: 180px minmax(0, 1fr) 280px; }
  .ed-nav { position: sticky; top: calc(var(--header-h) + var(--space-3)); display: flex; flex-direction: column; gap: 2px; }
  .ed-nav a { display: block; padding: 8px 10px; border-radius: var(--radius); color: var(--color-text-muted); font-size: var(--text-md); text-decoration: none; }
  .ed-nav a:hover { background: var(--color-surface-2); color: var(--color-text); }
  .ed-main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
  .ed-form { display: flex; flex-direction: column; gap: var(--space-4); }
  .ed-side { position: sticky; top: calc(var(--header-h) + var(--space-3)); min-width: 0; }
  .ed-section { padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); scroll-margin-top: calc(var(--header-h) + var(--space-3)); }
  .ed-section__title { margin: 0 0 var(--space-3); font-size: var(--text-lg); display: flex; align-items: baseline; gap: var(--space-2); }
  .ed-subtitle { font-size: var(--text-base); margin: var(--space-4) 0 var(--space-2); }
  .ed-optional { font-size: var(--text-sm); font-weight: var(--weight-normal); color: var(--color-text-subtle); }
  .ed-field { display: block; margin: 0 0 var(--space-3); font-weight: var(--weight-medium); font-size: var(--text-md); min-width: 0; }
  .ed-field > input, .ed-field > select, .ed-field > textarea { display: block; width: 100%; margin-top: 4px; font-weight: var(--weight-normal); }
  .ed-field > .ed-inline { margin: 4px 0 0; }
  .ed-field--short { max-width: 220px; }
  .ed-hint { display: block; margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-normal); color: var(--color-text-subtle); }
  .ed-field > .ed-hint { margin: 0; }
  .ed-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 var(--space-3); align-items: start; }
  .ed-row--4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .ed-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); }
  .ed-inline label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
  .ed-num { width: 110px; }
  .ed-more { margin: var(--space-2) 0; border-top: 1px solid var(--color-border); padding-top: var(--space-2); }
  .ed-more > summary { min-height: 36px; display: flex; align-items: center; gap: 6px; font-weight: var(--weight-medium); }
  .ed-attrs { margin-top: var(--space-2); }
  .ed-grid { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--space-2); }
  .ed-grid__head, .ed-grid__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); }
  .ed-grid__head { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: var(--weight-medium); }
  .ed-grid__row input, .ed-grid__row select { width: 100%; min-width: 0; }
  .ed-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
  .ed-actions > .ed-hint { margin-right: auto; }
  .ed-main > .ed-actions, form.ed-main > .ed-actions { position: sticky; bottom: 0; z-index: 2; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-2); }
  .ed-table td { vertical-align: middle; }
  .ed-table input:not([type=checkbox]) { width: 100%; min-width: 80px; }
  .ed-table__sel { width: 36px; }
  .ed-table tr.is-off td { color: var(--color-text-subtle); }
  .opt-group { padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
  .opt-group:first-of-type { border-top: 0; }
  .opt-group__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
  .opt-group__head .inline-form { margin-left: auto; }
  .opt-list { list-style: none; margin: 0 0 var(--space-2); padding: 0; }
  .opt-list li { display: flex; align-items: center; gap: var(--space-2); min-height: 36px; }
  .opt-list li > span:first-child { flex: 1; min-width: 0; }
  .opt-list__price { font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
  .opt-list .inline-form { margin: 0; }
  .ed-group-form { margin-top: var(--space-2); }
  .ed-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
  .ed-card { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface-2); }
  .ed-card h3 { margin: 0 0 var(--space-2); font-size: var(--text-base); }
  .ed-stack { display: flex; flex-direction: column; gap: var(--space-2); }
  .ed-stack label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: var(--text-sm); }
  .ed-images { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }
  .ed-images figure { margin: 0; }
  .ed-images img { display: block; border-radius: var(--radius); border: 1px solid var(--color-border); height: auto; }
  .ed-images figcaption { margin-top: 4px; gap: 4px; }
  .ed-history { margin: 0; padding-left: 1.2em; font-size: var(--text-sm); color: var(--color-text-muted); }
  .ed-preview__list { margin: 0 0 var(--space-3); display: flex; flex-direction: column; gap: 6px; }
  .ed-preview__list > div { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-md); }
  .ed-preview__list dt { color: var(--color-text-muted); min-width: 0; overflow-wrap: anywhere; }
  .ed-preview__list dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); white-space: nowrap; }
  .ed-preview__list .is-off dd, .ed-preview__list .is-off dt { color: var(--color-text-subtle); }
  @media (max-width: 1279px) {
    .ed-layout--edit { grid-template-columns: 180px minmax(0, 1fr); }
    .ed-layout--edit .ed-side { grid-column: 2; position: static; }
  }
  @media (max-width: 1023px) {
    .ed-layout, .ed-layout--edit { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
    .ed-layout--edit .ed-side { grid-column: auto; }
    .ed-nav { position: sticky; top: var(--header-h); z-index: 3; flex-direction: row; overflow-x: auto; gap: 4px; margin: 0 calc(-1 * var(--space-3)); padding: var(--space-2) var(--space-3); background: var(--color-bg); border-bottom: 1px solid var(--color-border); scrollbar-width: none; }
    .ed-nav a { white-space: nowrap; border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 6px 12px; }
    .ed-section { padding: var(--space-4); }
  }
  @media (max-width: 639px) {
    .ed-grid__head { display: none; }
    .ed-grid__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-bottom: var(--space-2); border-bottom: 1px dashed var(--color-border); }
    .ed-grid__row > :first-child { grid-column: 1 / -1; }
    .ed-grid--req .ed-grid__row > :first-child { grid-column: 1 / -1; }
  }
}

@layer components {
  /* R-D1: seller's next step on an order */
  .next-step { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-primary); border-radius: var(--radius-lg); background: var(--color-surface); }
  .next-step__text { flex: 1 1 260px; font-weight: var(--weight-medium); }
  .next-step .inline-form { margin: 0; }
  @media (min-width: 640px) { .ed-grid--req .ed-grid__head, .ed-grid--req .ed-grid__row { grid-template-columns: minmax(0, 2fr) minmax(120px, 1fr) minmax(80px, 0.7fr); } }
}

@layer components {
  /* R-D1 inventory filters: search always visible, the rest in a disclosure */
  .inv-filters__go { align-self: flex-end; }
  .inv-filters__more { flex-basis: 100%; }
  .inv-filters__more > summary { min-height: 36px; display: inline-flex; align-items: center; gap: 6px; font-weight: var(--weight-medium); }
  .inv-filters__body { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); margin-top: var(--space-2); }
}

@layer components {
  @media (max-width: 639px) {   /* R-D1 server rows as two-line cards on phones */
    .ed-rows-form .ed-table, .ed-rows-form .ed-table tbody { display: block; }
    .ed-rows-form .ed-table thead { display: none; }
    .ed-rows-form .ed-table tr { display: grid; grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr) 56px; gap: 4px var(--space-2); align-items: end; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); }
    .ed-rows-form .ed-table td { display: block; border: 0; padding: 0; }
    .ed-rows-form .ed-table td:nth-child(2) { grid-column: 2 / -1; align-self: center; font-weight: var(--weight-medium); }
    .ed-rows-form .ed-table td:nth-child(3) { grid-column: 1 / 3; }
    .ed-rows-form .ed-table td[data-label]::before { content: attr(data-label); display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: 2px; }
    .ed-rows-form .ed-table input:not([type=checkbox]) { min-width: 0; }
  }
}

@layer components {
  @media (max-width: 1023px) { .ws-panel__head a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-2); margin-right: calc(-1 * var(--space-2)); } }
}

@layer components {
  .ed-field > .ed-inline { flex-wrap: nowrap; }
  .ed-field > .ed-inline > .ed-num { width: auto; flex: 1 1 70px; min-width: 0; }
  .ed-field > .ed-inline > select { flex: 1 1 100px; min-width: 0; }
}

/* ============================================================ S1 order cards inside the buyer–seller conversation */
@layer components {
  .msg--order { list-style: none; display: flex; justify-content: center; margin: var(--space-3) 0; }
  .order-card { width: min(100%, 420px); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary); border-radius: var(--radius-lg); background: var(--color-surface); display: grid; gap: 4px; }
  .order-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--text-sm); }
  .order-card__code { font-weight: var(--weight-semibold); letter-spacing: .02em; }
  .order-card__status { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--color-surface-2); color: var(--color-text-muted); font-size: var(--text-xs); white-space: nowrap; }
  .order-card__status[data-status=paid], .order-card__status[data-status=in_progress] { background: var(--tone-info-bg); color: var(--tone-info-fg); }
  .order-card__status[data-status=delivered] { background: var(--tone-warning-bg); color: var(--tone-warning-fg); }
  .order-card__status[data-status=completed] { background: var(--tone-success-bg); color: var(--tone-success-fg); }
  .order-card__status[data-status=disputed], .order-card__status[data-status=refunded] { background: var(--tone-danger-bg); color: var(--tone-danger-fg); }
  .order-card__title { margin: 0; font-weight: var(--weight-medium); overflow-wrap: anywhere; }
  .order-card__choices { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
  .order-card__note { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
  .order-card__note time { margin-left: 4px; color: var(--color-text-subtle); }
  .order-card__open { font-size: var(--text-sm); }
  /* S2: live card footer — the viewer's one action (or waiting text), View order, time */
  .order-card__code { color: inherit; text-decoration: none; }
  .order-card__code:hover { text-decoration: underline; }
  .order-card__status[data-hold] { background: var(--tone-danger-bg); color: var(--tone-danger-fg); }
  .order-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-2); margin-top: 2px; }
  .order-card__form { display: inline; margin: 0; }
  .order-card__step { font-size: var(--text-sm); color: var(--color-text-muted); }
  .order-card__time { margin-left: auto; font-size: var(--text-xs); color: var(--color-text-subtle); }
  .order-card__msg { margin: 0; font-size: var(--text-sm); color: var(--tone-danger-fg); }
  .order-card[data-status=completed], .order-card[data-status=refunded], .order-card[data-status=cancelled] { border-left-color: var(--color-border-strong); }
  .msg--order.is-current .order-card { box-shadow: 0 0 0 2px var(--color-focus); }
  .msg__order { display: inline-block; margin: 0 0 4px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--color-surface-2); color: var(--color-text-muted); font-size: var(--text-xs); text-decoration: none; }
  .msg--out .msg__order { background: transparent; border: 1px solid currentColor; color: inherit; opacity: .85; }
  .msg__system a { color: inherit; text-decoration: underline; }
  .ctx-orders { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--text-md); }
  .ctx-orders li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
  .offer-chat__context { margin: 0; padding: 4px var(--space-3); color: var(--color-text-muted); background: var(--color-surface); }
}
/* ============================================================ compact purchase box (simplification pass) */
@layer components {
  .offer-layout__head h1 { font-size: var(--text-xl, 22px); margin: 0 0 4px; line-height: var(--leading-tight, 1.25); }
  .offer-meta { margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--text-md); }
  .buy-card.bx { padding: var(--space-4); }
  .bx-form { display: flex; flex-direction: column; gap: var(--space-3); }
  .bx-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
  .bx-label { display: block; padding: 0; margin: 0 0 6px; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-muted); }
  .bx-field { display: block; margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-muted); }
  .bx-field > input, .bx-field > select { display: block; width: 100%; margin-top: 4px; font-weight: var(--weight-normal); color: var(--color-text); }
  .bx-fields--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); }
  .bx-fields { display: grid; gap: var(--space-2); }
  .bx-amount { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .seg--sm { flex: none; padding: 2px; }
  .seg--sm .seg__opt { min-height: 32px; padding: 0 12px; font-size: var(--text-sm); }
  .bx-qty { position: relative; flex: 1 1 160px; margin: 0; }
  .bx-qty[hidden] { display: none; }
  .bx-qty input { width: 100%; padding-right: 64px; font-variant-numeric: tabular-nums; }
  .bx-unit { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--color-text-subtle); font-size: var(--text-sm); pointer-events: none; }
  /* C4: quantity add-ons (quantity × unit price, server-priced) */
  .bx-qty-addon__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .bx-qty-addon__row input { flex: 0 1 140px; min-width: 0; font-variant-numeric: tabular-nums; }
  .bx-qty-addon__price { font-size: var(--text-sm); }
  .bx-field--grow { flex: 1 1 180px; min-width: 0; }   /* C5 preset currency amount */
  .bx-fixed { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .bx-fixed .bx-label { margin: 0; }
  .pill-opt.is-fixed { cursor: default; border-color: var(--color-border-strong); }
  .bx-counter { flex: none; font-weight: var(--weight-semibold); white-space: nowrap; }
  .bx-facts { margin: -4px 0 0; font-size: var(--text-sm); color: var(--color-text-subtle); }
  .bx-axes { display: flex; flex-direction: column; gap: var(--space-2); }
  .bx-pills { display: flex; flex-wrap: wrap; gap: 6px; }
  .pill-opt { position: relative; display: inline-flex; margin: 0; }
  .pill-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .pill-opt > span { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); font-size: var(--text-md); cursor: pointer; white-space: nowrap; }
  .pill-opt > span small { color: var(--color-text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
  .pill-opt > span .icon { width: 16px; height: 16px; }
  .pill-opt input:checked + span { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
  .pill-opt input:focus-visible + span { outline: var(--focus-ring); }
  .pill-opt input:disabled + span { opacity: .45; cursor: not-allowed; }
  .pill-opt.is-empty > span { opacity: .6; }
  .bx-methods { display: contents; }
  .bx-methods[hidden] { display: none; }
  .bx-inline { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-muted); }
  .bx-num { width: 96px; }
  .bx-more > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; font-size: var(--text-sm); color: var(--color-text-muted); cursor: pointer; }
  .bx-more > summary .icon { width: 14px; height: 14px; }
  .bx-more[open] > summary { margin-bottom: 6px; }
  .bx-more .bx-group + .bx-group { margin-top: var(--space-2); }
  .bx-more--fine p { margin: 0; font-size: var(--text-sm); color: var(--color-text-subtle); }
  .bx-total { padding: var(--space-2) var(--space-3); border-radius: var(--radius); background: var(--color-surface-2); }
  .bx-total[aria-busy=true] { opacity: .6; }
  .bx-total__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); font-weight: var(--weight-semibold); }
  .bx-total__row strong { font-size: var(--text-xl, 22px); color: var(--color-price); }
  .bx-total__meta { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
  .bx-total__meta:not(:has(span:not([hidden]))) { display: none; }
  .bx-total .price-lines { margin-top: 4px; }
  .bx-paynote { margin: 6px 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
  .bx-fine { margin: 0; font-size: var(--text-sm); color: var(--color-text-subtle); }
  .linklike { display: inline; min-height: 0; padding: 0; border: 0; background: none; color: var(--color-link); text-decoration: underline; font: inherit; cursor: pointer; }
  @media (max-width: 639px) { .bx-fields--2 { grid-template-columns: minmax(0, 1fr); } .bx-counter { flex-basis: 100%; } }
}
@layer components {
  .offer-chat .composer__hint { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .offer-chat .thread__empty p { margin: 0 0 var(--space-2); }
}

@layer components {
  .conv__tag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--tone-info-bg); color: var(--tone-info-fg); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
}

@layer components {
  /* S3: Selling / Buying switch in Messages (shop members) */
  .conv-scope { margin: var(--space-2) 0; }
  .conv-scope .seg__opt { text-decoration: none; }
  .conv-scope .seg__opt.is-active { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-1); }
  /* S3: simple listing editor */
  .sx-form { display: grid; gap: var(--space-3); max-width: 640px; }
  .sx-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); }
  .sx-money { display: flex; gap: var(--space-2); }
  .sx-money input { flex: 1; min-width: 0; }
  .sx-money select { flex: none; width: auto; }
  .sx-attrs, .sx-rows { margin: 0; padding: 0; border: 0; display: grid; gap: var(--space-2); }
  .sx-attrs > legend, .sx-rows > legend { font-weight: var(--weight-semibold); margin-bottom: var(--space-1); padding: 0; }
  .sx-more[open] { display: grid; gap: var(--space-3); }
  .sx-more > summary { cursor: pointer; font-weight: var(--weight-medium); }
  .sx-actions { position: static; }
}

@layer components {
  /* S3: "Create offer" drawer above the composer (team side of a conversation) */
  .qo { margin: 0 var(--space-3) var(--space-2); }
  .qo > summary { list-style: none; display: inline-flex; cursor: pointer; }
  .qo > summary::-webkit-details-marker { display: none; }
  .qo[open] > summary { margin-bottom: var(--space-2); }
  .qo__form { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); max-height: 60vh; overflow: auto; }
  .qo__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-2); }
  .qo__more[open] { display: grid; gap: var(--space-2); }
  .qo__preview { border-top: 1px dashed var(--color-border); padding-top: var(--space-2); }
  .qo__msg { margin: 0; color: var(--tone-danger-fg); font-size: var(--text-sm); }
}

@layer legacy {
  /* S3 simple editor: category details as a compact row of labelled selects (no nested boxes) */
  .sx-attrs { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .sx-attrs > legend { grid-column: 1 / -1; }
  .sx-attrs fieldset.attr { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 4px; }
  .sx-attrs fieldset.attr > legend { padding: 0; font-weight: var(--weight-medium); font-size: var(--text-sm); }
  .sx-attrs fieldset.attr select, .sx-attrs fieldset.attr input[type=text], .sx-attrs fieldset.attr input[type=number] { width: 100%; }
}

/* ================================================================================ F6.23 identity (Graphite & Ember)
   One layer above the M7 components: typography, quieter links, the shell, discovery compositions (home, games,
   game, category, listings), editorial content, the image system and family artwork, seller/admin emphasis.
   Tokens only (tokens.css); every animation is disabled under prefers-reduced-motion. */
@layer identity {
  /* ---- typography ---- */
  body { font-feature-settings: "cv11", "ss01", "ss03"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  h1, h2, h3, .display { font-family: var(--font-display); letter-spacing: var(--tracking-display); }
  h1 { font-size: var(--text-3xl); font-weight: var(--weight-bold); }
  h2 { font-size: var(--text-xl); font-weight: var(--weight-semibold); }
  h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
  h4, h5 { font-family: var(--font-sans); }
  .eyebrow { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold);
             text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--color-accent-text); }
  .lead { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text-muted); max-width: 62ch; }
  .price, .stat__value, .error-page__code, .nav-balance { font-family: var(--font-display); letter-spacing: -.01em; }
  @media (max-width: 767px) { h1 { font-size: var(--text-2xl); } }

  /* links: underlined in running text (WCAG 1.4.1) but quiet; navigation-like links have no underline */
  a { text-decoration-color: color-mix(in srgb, currentColor 38%, transparent); text-underline-offset: 3px; }
  a:hover { text-decoration-color: currentColor; text-decoration-thickness: 1px; }
  .breadcrumbs a, .sidenav a, .tabs a, .chip, .pagination a, nav.pager a, .menu__panel a, .app-footer a,
  .category-row, .service-tile, .game-tile__link, .listing-row__title, .card-link, .gcard, .ccard, .fam-card, .result-link { text-decoration: none; }

  /* ---- buttons ---- */
  button, .btn, .button, input[type=submit] { font-weight: var(--weight-semibold); letter-spacing: .005em; }
  .btn--primary, button.primary, .button.primary { box-shadow: 0 1px 0 color-mix(in srgb, var(--color-primary) 60%, transparent); }
  .btn--primary:active, button.primary:active { transform: translateY(1px); }
  .btn--quiet { background: transparent; border-color: transparent; color: var(--color-text-muted); }
  .btn--quiet:hover { color: var(--color-text); background: var(--color-surface-2); }
  .btn--outline { background: transparent; border-color: var(--color-border-strong); }
  .link-arrow { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--weight-semibold); font-size: var(--text-md); text-decoration: none; color: var(--color-link); white-space: nowrap; }
  .link-arrow .icon { width: 16px; height: 16px; transition: translate var(--dur-fast) var(--ease); }
  .link-arrow:hover .icon { translate: 3px 0; }

  /* ---- shell ---- */
  .app-header { background: color-mix(in srgb, var(--color-surface) 94%, transparent); }
  .brand { font-family: var(--font-display); font-weight: var(--weight-bold); letter-spacing: -.02em; }
  .brand__mark-fg { stroke: var(--color-on-primary); }
  .site-search__input { border-radius: var(--radius-pill) !important; }
  .nav-browse > summary { cursor: pointer; }
  .browse-panel { width: min(720px, calc(100vw - 32px)); right: auto; left: 0; padding: var(--space-3); display: grid;
                  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-3); }
  .browse-panel__col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .browse-panel .menu__label { padding-left: 10px; }
  .browse-panel a { align-items: center; }
  .browse-panel a .fam { width: 28px; height: 28px; }
  .browse-panel__all { margin-top: auto; padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
  @media (max-width: 1023px) { .nav-browse { display: none; } }

  .app-footer { margin-top: var(--space-16); background: var(--color-surface); color: var(--color-text-muted); }
  .app-footer__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--space-6); padding: var(--space-10) var(--space-4) var(--space-6); }
  .app-footer h2 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--color-text-subtle); margin: 0 0 var(--space-3); font-family: var(--font-sans); }
  .app-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
  .app-footer a { color: var(--color-text-muted); }
  .app-footer a:hover { color: var(--color-text); }
  .app-footer__brand p { margin-top: var(--space-3); max-width: 36ch; font-size: var(--text-md); }
  .app-footer__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-4);
                       border-top: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-subtle); }
  @media (max-width: 767px) {
    .app-footer__inner { grid-template-columns: 1fr 1fr; padding: var(--space-8) var(--space-4) var(--space-5); gap: var(--space-5); }
    .app-footer__brand { grid-column: 1 / -1; }
  }

  /* ---- section rhythm ---- */
  .section { margin-top: var(--space-12); }
  .section:first-child { margin-top: 0; }
  .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-4); }
  .section-head h2 { margin: 0; }
  .section-head p { margin: 4px 0 0; color: var(--color-text-subtle); font-size: var(--text-md); }
  @media (max-width: 767px) { .section { margin-top: var(--space-10); } }

  /* ---- family marks (icon in a tinted square) ---- */
  .fam { --fam: var(--family-other); display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--radius);
         color: var(--fam); background: color-mix(in srgb, var(--fam) 14%, var(--color-surface-2)); border: 1px solid color-mix(in srgb, var(--fam) 28%, transparent); }
  .fam .icon { width: 55%; height: 55%; }
  .fam--currency { --fam: var(--family-currency); } .fam--topup { --fam: var(--family-topup); } .fam--keys { --fam: var(--family-keys); }
  .fam--accounts { --fam: var(--family-accounts); } .fam--items { --fam: var(--family-items); } .fam--services { --fam: var(--family-services); }
  .fam--lg { width: 52px; height: 52px; border-radius: var(--radius-lg); }
  .fam--sm { width: 30px; height: 30px; border-radius: var(--radius-sm); }

  /* ---- home ---- */
  .home-hero { position: relative; isolation: isolate; padding: var(--space-16) 0 var(--space-12);
               border-bottom: 1px solid var(--color-border); overflow: hidden;
               background: radial-gradient(60% 90% at 85% 0%, var(--color-hero-glow), transparent 70%),
                           radial-gradient(50% 80% at 0% 100%, var(--color-hero-glow-2), transparent 70%); }
  .home-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none;
                      background-image: linear-gradient(var(--color-border) 1px, transparent 1px), linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
                      background-size: 48px 48px; mask-image: radial-gradient(70% 80% at 60% 20%, black, transparent 75%); }
  .home-hero__inner { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-4); }
  .home-hero__inner > * { max-width: 820px; }
  .home-hero h1 { font-size: var(--text-5xl); line-height: 1.05; margin: 0 0 var(--space-4); text-wrap: balance; }
  .home-hero h1 em { font-style: normal; color: var(--color-accent-text); }
  .home-hero .search-big { margin-top: var(--space-6); max-width: 680px; }
  .search-big input[type=search] { min-height: 52px !important; padding-left: 18px !important; border-radius: var(--radius-pill); font-size: var(--text-lg); background: var(--color-surface) !important; }
  .search-big .btn--lg { min-height: 52px; border-radius: var(--radius-pill); padding: 0 26px; }
  .quick-picks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-subtle); }
  .hero-stats { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: var(--space-8) 0 0; padding: 0; list-style: none; }
  .hero-stats li { display: flex; flex-direction: column; }
  .hero-stats strong { font-family: var(--font-display); font-size: var(--text-2xl); font-variant-numeric: tabular-nums; color: var(--color-text); }
  .hero-stats span { font-size: var(--text-sm); color: var(--color-text-subtle); }
  @media (max-width: 767px) {
    .home-hero { padding: var(--space-10) 0 var(--space-8); }
    .home-hero__inner { padding: 0 var(--space-3); }
    .home-hero h1 { font-size: var(--text-4xl); }
    .search-big { flex-direction: column; }
    .search-big .btn--lg { width: 100%; }
  }
  @media (max-width: 400px) { .home-hero h1 { font-size: var(--text-3xl); } }

  /* family cards (browse by what you need) */
  .fam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
  .fam-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); min-height: 76px; border-radius: var(--radius-lg);
              background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text);
              transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
  .fam-card:hover { border-color: var(--color-border-strong); background: var(--color-surface-2); transform: translateY(-1px); }
  .fam-card__text { display: flex; flex-direction: column; min-width: 0; }
  .fam-card__name { font-weight: var(--weight-semibold); }
  .fam-card__meta { font-size: var(--text-sm); color: var(--color-text-subtle); }

  /* how buying works (factual, from the actual order flow) */
  .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; counter-reset: step; }
  .steps li { position: relative; padding: var(--space-5); padding-top: var(--space-12); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); counter-increment: step; }
  .steps li::before { content: counter(step, decimal-leading-zero); position: absolute; top: var(--space-4); left: var(--space-5); font-family: var(--font-display);
                      font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-accent-text); letter-spacing: .04em; }
  .steps h3 { margin: 0 0 var(--space-2); font-size: var(--text-base); }
  .steps p { margin: 0; color: var(--color-text-muted); font-size: var(--text-md); }
  @media (max-width: 767px) { .steps { grid-template-columns: 1fr; } }

  /* ---- game cards with artwork (home, directory, related) ---- */
  .gcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
  .gcard { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--radius-lg); overflow: hidden;
           background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text);
           transition: border-color var(--dur-fast) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
  .gcard:hover { border-color: var(--color-border-strong); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
  .gcard__art { aspect-ratio: var(--ratio-card); }
  .gcard__body { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4) var(--space-4); }
  .gcard__name { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-base); letter-spacing: -.01em;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gcard__meta { font-size: var(--text-sm); color: var(--color-text-subtle); }
  .gcard--empty .gcard__art { filter: saturate(.35); opacity: .75; }
  .gcard__link::after { content: ""; position: absolute; inset: 0; }
  .gcard__link { color: inherit; text-decoration: none; }
  .gcard__link:focus-visible { box-shadow: none; }
  .gcard:has(.gcard__link:focus-visible) { box-shadow: var(--focus-ring); }

  /* artwork: staff image (licensed) or the original generated fallback (tone + monogram + facet pattern) */
  .art { position: relative; display: block; width: 100%; overflow: hidden; background: var(--color-surface-3); }
  .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .art--fallback { display: grid; place-items: center; color: var(--color-on-tile); }
  .art--fallback::before { content: ""; position: absolute; inset: 0; opacity: .18; pointer-events: none;
     background-image: linear-gradient(135deg, currentColor 0 1px, transparent 1px 100%), linear-gradient(45deg, currentColor 0 1px, transparent 1px 100%);
     background-size: 28px 28px; mask-image: linear-gradient(to bottom right, black, transparent 80%); }
  .art--fallback::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgb(0 0 0 / .28)); pointer-events: none; }
  .art__mono { position: relative; z-index: 1; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: clamp(1.6rem, 6vw, 2.6rem);
               letter-spacing: -.03em; text-transform: uppercase; opacity: .95; }
  .art--sm .art__mono { font-size: var(--text-lg); }

  /* ---- games directory ---- */
  .dir-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
  .dir-head h1 { margin: 0; }
  .seg-links { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-pill); background: var(--color-surface-2); border: 1px solid var(--color-border); }
  .seg-links a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: var(--radius-pill); color: var(--color-text-muted);
                 text-decoration: none; font-size: var(--text-md); font-weight: var(--weight-medium); }
  .seg-links a[aria-current="page"] { background: var(--color-surface-3); color: var(--color-text); box-shadow: var(--shadow-1); }
  .az a .az__n { display: none; }
  .game-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px var(--space-4); margin: 0; padding: 0; list-style: none; }
  .game-list a { display: flex; align-items: center; gap: var(--space-3); padding: 6px var(--space-2); border-radius: var(--radius); color: var(--color-text); text-decoration: none; min-width: 0; }
  .game-list a:hover { background: var(--color-surface-2); }
  .game-list .art { width: 44px; height: 44px; flex: none; border-radius: var(--radius-sm); }
  .game-list__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-medium); }
  .game-list__count { font-size: var(--text-sm); color: var(--color-text-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .game-list .is-empty .game-list__name { color: var(--color-text-subtle); font-weight: var(--weight-normal); }
  .game-list .is-empty .art { opacity: .5; }

  /* ---- game page ---- */
  .ghero { position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5); align-items: end;
           margin: 0 0 var(--space-6); padding: var(--space-8) var(--space-6) var(--space-6); border-radius: var(--radius-xl); overflow: hidden;
           border: 1px solid var(--color-border); background: var(--color-surface); min-height: 240px; }
  .ghero__bg { position: absolute; inset: 0; z-index: -2; }
  .ghero__bg .art { height: 100%; }
  .ghero::before { content: ""; position: absolute; inset: 0; z-index: -1;
                   background: linear-gradient(90deg, var(--color-bg) 0%, color-mix(in srgb, var(--color-bg) 82%, transparent) 45%, color-mix(in srgb, var(--color-bg) 35%, transparent) 100%),
                               linear-gradient(0deg, var(--color-bg) 0%, transparent 60%); }
  .ghero__thumb { width: 112px; aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-2); }
  .ghero__thumb .art { height: 100%; }
  .ghero h1 { margin: 0 0 var(--space-2); font-size: var(--text-4xl); line-height: 1.08; text-wrap: balance; }
  .ghero .lead { margin: 0; font-size: var(--text-base); }
  .facts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
  .facts li { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: var(--radius-pill); font-size: var(--text-sm);
              background: color-mix(in srgb, var(--color-surface-3) 80%, transparent); border: 1px solid var(--color-border); color: var(--color-text-muted); }
  .facts strong { color: var(--color-text); font-variant-numeric: tabular-nums; }
  .facts .icon { width: 15px; height: 15px; }
  @media (max-width: 767px) {
    .ghero { grid-template-columns: 1fr; padding: var(--space-6) var(--space-4) var(--space-5); min-height: 0; gap: var(--space-3); }
    .ghero__thumb { width: 72px; }
    .ghero h1 { font-size: var(--text-2xl); }
    .ghero::before { background: linear-gradient(0deg, var(--color-bg) 10%, color-mix(in srgb, var(--color-bg) 70%, transparent)); }
  }

  .group-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-caps);
                 color: var(--color-text-subtle); font-family: var(--font-sans); font-weight: var(--weight-semibold); margin: var(--space-6) 0 var(--space-3); }
  .group-title::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
  .ccard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
  .ccard { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); min-height: 72px; border-radius: var(--radius-lg);
           background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text);
           transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
  .ccard:hover { border-color: var(--color-border-strong); background: var(--color-surface-2); }
  .ccard__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
  .ccard__name { font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
  .ccard__meta { font-size: var(--text-sm); color: var(--color-text-subtle); }
  .ccard__meta strong { color: var(--color-text-muted); font-weight: var(--weight-semibold); }
  .ccard > .icon { color: var(--color-text-subtle); transition: translate var(--dur-fast) var(--ease); }
  .ccard:hover > .icon { translate: 3px 0; color: var(--color-text); }
  .ccard--empty { background: transparent; border-style: dashed; }
  .ccard--empty .fam { filter: saturate(.3); opacity: .7; }
  .ccard img.ccard__icon { width: 40px; height: 40px; border-radius: var(--radius); object-fit: cover; flex: none; }

  /* ---- editorial content (facts vs editorial are visibly separated) ---- */
  .editorial { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--space-8); align-items: start; }
  .editorial__aside { position: sticky; top: calc(var(--header-h) + var(--space-4)); display: flex; flex-direction: column; gap: var(--space-3); }
  @media (max-width: 1023px) { .editorial { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } .editorial__aside { position: static; } }
  .prose { max-width: 72ch; line-height: var(--leading-relaxed); color: var(--color-text); }
  .prose h2 { font-size: var(--text-xl); margin: var(--space-8) 0 var(--space-3); scroll-margin-top: calc(var(--header-h) + 16px); }
  .prose h3 { font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-2); }
  .prose p, .prose ul { margin: 0 0 var(--space-4); }
  .prose li { margin-bottom: var(--space-1); }
  .prose > :first-child { margin-top: 0; }
  .intro { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text-muted); max-width: 72ch; }
  .intro p:last-child { margin-bottom: 0; }
  .editorial-note { font-size: var(--text-xs); color: var(--color-text-subtle); margin-top: var(--space-2); }
  .toc { padding: var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-surface); }
  .toc ol { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; font-size: var(--text-md); }
  .faq { display: flex; flex-direction: column; gap: var(--space-2); max-width: 820px; }
  .faq details { border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-surface); }
  .faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); min-height: 52px;
                 font-weight: var(--weight-semibold); list-style: none; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary .icon { transition: rotate var(--dur) var(--ease); color: var(--color-text-subtle); }
  .faq details[open] summary .icon { rotate: 180deg; }
  .faq__a { padding: 0 var(--space-4) var(--space-4); color: var(--color-text-muted); line-height: var(--leading-relaxed); }
  .faq__a p:last-child { margin-bottom: 0; }
  .article-card { display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); text-decoration: none; }
  .article-card:hover { border-color: var(--color-border-strong); }
  .article-card .art { aspect-ratio: var(--ratio-article); }
  .article-card__body { padding: var(--space-4); }
  .article-card__body h3 { margin: 0 0 var(--space-2); font-size: var(--text-base); }
  .article-card__body p { margin: 0; font-size: var(--text-md); color: var(--color-text-muted); }
  .article-hero { aspect-ratio: var(--ratio-article); border-radius: var(--radius-xl); overflow: hidden; margin: 0 0 var(--space-6); }
  .credit { font-size: var(--text-xs); color: var(--color-text-subtle); margin-top: var(--space-1); }

  /* ---- category page ---- */
  .chead { display: flex; align-items: center; gap: var(--space-4); margin: 0 0 var(--space-4); }
  .chead h1 { margin: 0; font-size: var(--text-3xl); }
  .chead__sub { margin: 4px 0 0; color: var(--color-text-muted); }
  .chead .facts { margin-top: var(--space-3); }
  @media (max-width: 767px) { .chead { align-items: flex-start; } .chead h1 { font-size: var(--text-2xl); } .chead .fam--lg { width: 44px; height: 44px; } }
  .subnav { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding: 2px 0 var(--space-2); margin: 0 0 var(--space-4); list-style: none; }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav li { flex: none; }
  .subnav .chip[aria-current="page"] { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }

  /* listing rows: one product per row — product facts first, seller as one compact line, price + availability right */
  .listing { border-radius: var(--radius-xl); }
  .listing__head { display: none !important; }
  .listing-row { grid-template-columns: 40px minmax(0, 1fr) minmax(150px, 190px) minmax(120px, 170px) !important; grid-template-areas: none !important;
                 gap: var(--space-4) !important; padding: var(--space-4) var(--space-5) !important; align-items: center; }
  .listing-row > * { grid-area: auto !important; }
  .listing-row:hover { background: color-mix(in srgb, var(--color-surface-2) 85%, transparent); }
  .listing-row__title { font-weight: var(--weight-semibold); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .listing-row:hover .listing-row__title { color: var(--color-text); text-decoration: none; }
  .attr-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; }
  .attr-chips li { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-height: 22px; padding: 0 8px; border-radius: var(--radius-sm); font-size: var(--text-xs);
                   background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .attr-chips b { font-weight: var(--weight-medium); color: var(--color-text-subtle); }
  .seller-line { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; font-size: var(--text-sm); color: var(--color-text-subtle); }
  .seller-line .avatar-chip--sm { width: 20px; height: 20px; font-size: 9px; }
  .seller-line a { color: var(--color-text-muted); font-weight: var(--weight-medium); text-decoration: none; }
  .seller-line a:hover { color: var(--color-text); text-decoration: underline; }
  .seller-line .seller-facts { gap: 4px 8px; }
  .avail { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); }
  .avail__stock { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text); font-variant-numeric: tabular-nums; }
  .avail__stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-online); flex: none; }
  .avail__stock--out { color: var(--color-text-subtle); }
  .avail__stock--out::before { background: var(--color-text-subtle); }
  .avail__stock--unknown::before { background: var(--tone-info-fg); }
  .avail__delivery { display: inline-flex; align-items: center; gap: 5px; color: var(--color-text-subtle); }
  .avail__delivery .icon { width: 14px; height: 14px; }
  .avail .avail-state { align-self: flex-start; }          /* F6.32: buy · on request · catalogue only */
  .avail__delivery--auto { color: var(--tone-success-fg); }
  .listing-row__price { text-align: right; }
  .listing-row__price .price { font-size: var(--text-lg); }
  .listing-row__price .price__unit, .listing-row__price .price__alt { font-family: var(--font-sans); }
  @media (max-width: 767px) {
    .listing { border-radius: var(--radius-lg); }
    .listing-row { grid-template-columns: minmax(0, 1fr) auto !important; gap: var(--space-2) var(--space-3) !important; padding: var(--space-3) var(--space-4) !important; align-items: start; }
    .listing-row > .fam { display: none; }
    .listing-row > :nth-child(2) { grid-column: 1 / -1 !important; }
    .listing-row > .avail { grid-column: 1 !important; flex-direction: row; flex-wrap: wrap; gap: 4px 12px; align-self: center; }
    .listing-row > .listing-row__price { grid-column: 2 !important; }
  }

  /* ---- offer page ---- */
  .spec { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1px; margin: 0; border-radius: var(--radius-lg); overflow: hidden;
          border: 1px solid var(--color-border); background: var(--color-border); }
  .spec > div { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); background: var(--color-surface); min-width: 0; }
  .spec dt { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-subtle); font-weight: var(--weight-semibold); }
  .spec dd { margin: 0; font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
  .offer-head { display: flex; align-items: flex-start; gap: var(--space-4); margin: 0 0 var(--space-4); }
  .offer-head h1 { margin: 0; font-size: var(--text-2xl); line-height: 1.25; overflow-wrap: anywhere; }
  .offer-head .facts { margin-top: var(--space-3); }
  .assurance { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
  .assurance li { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg);
                  background: var(--color-surface); border: 1px solid var(--color-border); font-size: var(--text-md); color: var(--color-text-muted); }
  .assurance li .icon { color: var(--color-accent-text); margin-top: 2px; }
  .assurance strong { display: block; color: var(--color-text); }
  @media (max-width: 767px) { .offer-head h1 { font-size: var(--text-xl); } .offer-head .fam { display: none; } }

  /* ---- search (grouped) ---- */
  .result-groups { display: flex; flex-direction: column; gap: var(--space-8); }
  .result-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
  .result-link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); min-width: 0;
                 background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); }
  .result-link:hover { border-color: var(--color-border-strong); background: var(--color-surface-2); }
  .result-link .art { width: 44px; height: 44px; flex: none; border-radius: var(--radius-sm); }
  .result-link__text { display: flex; flex-direction: column; min-width: 0; }
  .result-link__name { font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .result-link__text .avail-state { align-self: flex-start; margin-top: 4px; }   /* F6.32: buyer state under the name */
  .result-link__meta { font-size: var(--text-sm); color: var(--color-text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ---- cards, stats, tables (all areas) ---- */
  .card { border-radius: var(--radius-lg); }
  .card__title { font-family: var(--font-display); letter-spacing: -.01em; }
  .stat__value { font-size: var(--text-2xl); font-weight: var(--weight-bold); }
  .stat--attention { border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border)); background: linear-gradient(180deg, var(--tone-accent-bg), var(--color-surface) 70%); }
  .stat--attention .stat__value { color: var(--color-accent-text); }
  .stat--quiet .stat__value { color: var(--color-text-muted); }
  thead th { text-transform: uppercase; letter-spacing: .05em; font-size: var(--text-xs); }
  .table-wrap { border-radius: var(--radius-lg); }
  td a:not(.btn):not(.button) { text-decoration: none; font-weight: var(--weight-medium); }
  td a:not(.btn):not(.button):hover { text-decoration: underline; }
  .sidenav a[aria-current="page"] { background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface-3)); }
  .sidenav__title { font-weight: var(--weight-semibold); }
  .area-label { color: var(--color-accent-text); font-weight: var(--weight-semibold); }
  .health { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
  .health li { padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-top: 3px solid var(--tone-neutral-bd); }
  .health li.is-ok { border-top-color: var(--tone-success-fg); } .health li.is-warn { border-top-color: var(--tone-warning-fg); } .health li.is-bad { border-top-color: var(--tone-danger-fg); }
  .health strong { display: block; font-family: var(--font-display); font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
  .health span { font-size: var(--text-sm); color: var(--color-text-muted); }

  /* ---- auth ---- */
  .container--auth .card, .auth-card { padding: var(--space-6); border-radius: var(--radius-xl); box-shadow: var(--shadow-2); }

  /* ---- admin content editor ---- */
  .asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
  .asset-grid figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface); }
  .asset-grid img { display: block; width: 100%; aspect-ratio: var(--ratio-card); object-fit: cover; background: var(--color-surface-3); }
  .asset-grid figcaption { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
  .faq-editor { display: flex; flex-direction: column; gap: var(--space-2); }
  .faq-editor fieldset { margin: 0; }
  .char-hint { font-size: var(--text-xs); color: var(--color-text-subtle); }

  /* ---- error pages ---- */
  .error-page__code { font-size: var(--text-5xl); color: var(--color-accent-text); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .gcard:hover, .fam-card:hover { transform: none; }
}
@layer identity {
  .browse-panel__n { margin-left: auto; font-size: var(--text-xs); color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }
  @media (min-width: 1024px) { .nav-games { display: none; } }
}
@layer identity {
  .ghero__bg .art__mono { display: none; }
  .ghero__bg .art--fallback::before { opacity: .12; }
}
@layer identity {
  .article-hero .art { height: 100%; }
  .article-hero { margin-left: 0; margin-right: 0; }
  .article-card__body h2 { margin: 0 0 var(--space-2); font-size: var(--text-base); }
  .chead > img.ccard__icon { width: 52px; height: 52px; border-radius: var(--radius-lg); object-fit: cover; flex: none; }
  .card-link { color: var(--color-text); }
  .card-link:hover { border-color: var(--color-border-strong); background: var(--color-surface-2); }
  .card__title .icon { vertical-align: -3px; margin-right: 4px; color: var(--color-accent-text); }
}
@layer identity {
  /* seller workspace & staff: the urgent number stands out, quiet ones recede */
  .ws-stat { position: relative; overflow: hidden; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
  .ws-stat__n { font-family: var(--font-display); font-size: var(--text-2xl); letter-spacing: -.01em; }
  .ws-stat:not(.ws-stat--hot):not(.ws-stat--alert) .ws-stat__n { color: var(--color-text-muted); }
  .ws-stat--hot { background: linear-gradient(180deg, var(--tone-accent-bg), var(--color-surface) 80%); }
  .ws-stat--hot .ws-stat__n { color: var(--color-accent-text); }
  .ws-stat--hot::before, .ws-stat--alert::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-primary); }
  .ws-stat--alert::before { background: var(--tone-danger-fg); }
  .ws-stat--alert .ws-stat__n { color: var(--tone-danger-fg); }
  .ws-panel__head h2 { font-family: var(--font-display); }
  .ws-panel__head a { font-size: var(--text-sm); font-weight: var(--weight-semibold); text-decoration: none; }
  .ws-item__title { color: var(--color-text); text-decoration: none; }
  .ws-item__title:hover { text-decoration: underline; }
  .ws-item__amt { font-family: var(--font-display); }
}
@layer identity {
  /* the pre-sale chat panel is compact until the first message (the empty thread no longer fills the column) */
  @media (min-width: 1024px) {
    .offer-chat:not(.offer-chat--inline):has(.thread__empty:not([hidden])) { height: auto; min-height: 0; }
    .offer-chat:not(.offer-chat--inline):has(.thread__empty:not([hidden])) .thread__scroller { min-height: 170px; flex: none; }
  }
  .thread__empty strong { font-family: var(--font-display); }
}
@layer identity {
  /* generated fallback artwork: the tile tone as a soft diagonal gradient (tone classes set --tile) */
  .tone-0 { --tile: var(--tile-0); } .tone-1 { --tile: var(--tile-1); } .tone-2 { --tile: var(--tile-2); } .tone-3 { --tile: var(--tile-3); }
  .tone-4 { --tile: var(--tile-4); } .tone-5 { --tile: var(--tile-5); } .tone-6 { --tile: var(--tile-6); } .tone-7 { --tile: var(--tile-7); }
  .art--fallback { background: radial-gradient(120% 90% at 20% 10%, color-mix(in srgb, var(--tile, var(--color-surface-3)) 92%, white 8%), color-mix(in srgb, var(--tile, var(--color-surface-3)) 55%, var(--color-bg)) 85%); }
  .gcard--empty .gcard__art { filter: saturate(.25); opacity: .6; }
}
@layer identity {
  .section .prose h2 { font-size: var(--text-lg); margin-top: var(--space-6); }
  .section .prose > h2:first-child { margin-top: 0; }
}
@layer identity {
  @media (min-width: 1024px) { .offer-chat:not(.offer-chat--inline):not(:has(.thread)) { height: auto; min-height: 0; } }
}

/* ============================================================== F6.24 interactive components (identity layer) */
@layer identity {
  /* ---- shared form controls ---- */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]), select, textarea {
    background-color: var(--color-surface-2); border-radius: var(--radius); }
  select { appearance: none; -webkit-appearance: none; padding-right: 34px;
           background-image: linear-gradient(45deg, transparent 50%, var(--color-text-subtle) 50%), linear-gradient(135deg, var(--color-text-subtle) 50%, transparent 50%);
           background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
  select:hover { border-color: var(--color-text-subtle); }
  select[multiple] { background-image: none; padding-right: 10px; }
  input[type=checkbox], input[type=radio] { appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center; flex: none;
    width: 18px; height: 18px; margin: 0 8px 0 0; border: 1.5px solid var(--color-input-border); background: var(--color-surface-2); cursor: pointer;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); vertical-align: -4px; }
  input[type=checkbox] { border-radius: 5px; }
  input[type=radio] { border-radius: 50%; }
  input[type=checkbox]::before { content: ""; width: 10px; height: 10px; clip-path: polygon(14% 44%, 0 59%, 40% 100%, 100% 21%, 86% 7%, 39% 71%); background: var(--color-on-primary); transform: scale(0); transition: transform var(--dur-fast) var(--ease); }
  input[type=radio]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-on-primary); transform: scale(0); transition: transform var(--dur-fast) var(--ease); }
  input[type=checkbox]:checked, input[type=radio]:checked { background: var(--color-primary); border-color: var(--color-primary); }
  input[type=checkbox]:checked::before, input[type=radio]:checked::before { transform: scale(1); }
  input[type=checkbox]:hover:not(:disabled), input[type=radio]:hover:not(:disabled) { border-color: var(--color-text-muted); }
  input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { box-shadow: var(--focus-ring); outline: none; }
  input[type=checkbox]:disabled, input[type=radio]:disabled { opacity: .45; cursor: not-allowed; }
  @media (max-width: 1023px) { input[type=checkbox], input[type=radio] { width: 22px; height: 22px; } }
  input[type=number] { font-variant-numeric: tabular-nums; }
  input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--tone-danger-fg); }
  .field__error, .form-error { display: flex; align-items: center; gap: 6px; }
  .req { color: var(--tone-danger-fg); }
  button:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }
  .btn--danger:hover, button.danger:hover { background: color-mix(in srgb, var(--tone-danger-bg) 70%, var(--tone-danger-fg) 15%); }
  .toast { display: flex; gap: var(--space-2); align-items: flex-start; border-left: 3px solid var(--tone-info-fg); }
  .toast--success { border-left-color: var(--tone-success-fg); } .toast--error { border-left-color: var(--tone-danger-fg); }
  .flash { display: flex; gap: var(--space-2); align-items: center; border-left: 3px solid var(--tone-success-fg); }
  .errors { border-left: 3px solid var(--tone-danger-fg); }
  .notice { border-left: 3px solid var(--tone-warning-fg); }
  dialog.modal { border-radius: var(--radius-xl); box-shadow: var(--shadow-2); }
  dialog.modal[open] { animation: modal-in var(--dur) var(--ease); }
  @keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
  .modal__head h2 { font-family: var(--font-display); }
  .tip__bubble { border-radius: var(--radius); }

  /* ---- purchase box ---- */
  .buy-card.bx { padding: var(--space-5); border-radius: var(--radius-xl); }
  .bx-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-subtle); margin-bottom: 8px; }
  .pick__count { margin-left: 4px; text-transform: none; letter-spacing: 0; font-weight: var(--weight-medium); color: var(--color-text-subtle); }
  .pick__search { position: relative; margin-bottom: 8px; }
  .pick__search input { width: 100%; padding-left: 34px; }
  .pick__search-icon { position: absolute; left: 11px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--color-text-subtle); pointer-events: none; }
  .pick__list { display: flex; flex-direction: column; gap: 4px; }
  .pick__list--scroll { max-height: 312px; overflow-y: auto; padding: 4px; margin: -4px; scrollbar-width: thin; }
  .pick__group { position: sticky; top: -4px; z-index: 1; padding: 8px 6px 4px; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .06em;
                 text-transform: uppercase; color: var(--color-accent-text); background: var(--color-surface); }
  .pick__group[hidden] { display: none; }
  .pick__opt { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "meta price"; align-items: center;
               column-gap: var(--space-3); min-height: 48px; padding: 8px 12px 8px 40px; border-radius: var(--radius); border: 1px solid var(--color-border);
               background: var(--color-surface-2); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
  .pick__opt[hidden] { display: none; }
  .pick__opt:hover { border-color: var(--color-border-strong); background: var(--color-surface-3); }
  .pick__opt input { position: absolute; left: 12px; top: 50%; translate: 0 -50%; margin: 0; }
  .pick__name { grid-area: name; font-weight: var(--weight-medium); color: var(--color-text); overflow-wrap: anywhere; line-height: 1.3; }
  .pick__price { grid-area: price; font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-md); color: var(--color-price); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .pick__meta { grid-area: meta; font-size: var(--text-xs); color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }
  .pick__opt:has(input:checked) { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface-2)); box-shadow: inset 0 0 0 1px var(--color-primary); }
  .pick__opt:has(input:focus-visible) { box-shadow: var(--focus-ring); }
  .pick__opt:has(input:disabled), .pick__opt.is-disabled { opacity: .5; cursor: not-allowed; }
  .pick__opt:has(input:disabled) .pick__name { text-decoration: line-through; text-decoration-color: var(--color-text-subtle); }
  .pick__empty { margin: 6px 0 0; font-size: var(--text-sm); }

  /* top-up packages / option cards */
  .pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
  .pack-grid--wide { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .pack-card { position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 64px; padding: 10px 12px; border-radius: var(--radius-lg);
               border: 1px solid var(--color-border); background: var(--color-surface-2); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
  .pack-card input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
  .pack-card:hover { border-color: var(--color-border-strong); }
  .pack-card__amount { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-base); line-height: 1.25; overflow-wrap: anywhere; }
  .pack-card__price { font-size: var(--text-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
  .pack-card--row { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: var(--space-3); min-height: 52px; }
  .pack-card--row .pack-card__amount { font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-medium); }
  .pack-card--row .pack-card__price { font-family: var(--font-display); color: var(--color-price); font-weight: var(--weight-semibold); }
  .pack-card:has(input:checked) { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface-2)); box-shadow: inset 0 0 0 1px var(--color-primary); }
  .pack-card:has(input:checked) .pack-card__price { color: var(--color-text); }
  .pack-card:has(input:checked)::after { content: ""; position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); }
  .pack-card:has(input:focus-visible) { box-shadow: var(--focus-ring); }
  .pack-card__na { display: none; font-size: var(--text-xs); color: var(--color-text-subtle); }
  .pack-card__na--on, .pack-card:has(input:disabled) .pack-card__na { display: block; }
  .pack-card:has(input:disabled) { opacity: .5; cursor: not-allowed; border-style: dashed; }
  .choice-chips .chip-opt input:disabled + span { opacity: .4; text-decoration: line-through; cursor: not-allowed; }

  /* stepper + quick amounts */
  .stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--color-input-border); border-radius: var(--radius); overflow: hidden; background: var(--color-surface-2); }
  .stepper input { border: 0 !important; border-radius: 0 !important; width: 72px; text-align: center; background: transparent !important; -moz-appearance: textfield; }
  .stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  .stepper:focus-within { border-color: var(--color-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 35%, transparent); }
  .stepper__btn { min-height: var(--control-h); width: 38px; padding: 0; border: 0; border-radius: 0; background: var(--color-surface-3); font-size: var(--text-lg); font-weight: var(--weight-semibold); }
  .stepper__btn:hover { background: var(--color-border); }
  .quick-qty { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
  .quick-qty[hidden] { display: none; }
  .quick-qty .chip[aria-pressed="true"] { border-color: var(--color-primary); color: var(--color-text); background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface-2)); }
  .bx-qty input { min-height: 46px; font-size: var(--text-lg); font-family: var(--font-display); }

  /* order summary */
  .bx-total { padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface-2); border: 1px solid var(--color-border); }
  .bx-summary-head { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-subtle); font-weight: var(--weight-semibold); margin-bottom: 6px; }
  .bx-total .price-lines { margin: 0 0 var(--space-2); }
  .bx-total__row { padding-top: var(--space-2); border-top: 1px solid var(--color-border); align-items: center; }
  .bx-total__row strong { font-family: var(--font-display); font-size: var(--text-2xl); }
  .bx-total[aria-busy=true] .bx-total__row strong { opacity: .5; }
  .buy-submit { min-height: 50px; font-size: var(--text-base); border-radius: var(--radius-lg); }
}
@layer identity {
  /* the Browse panel is centred under the header (never pushed off-screen by a crowded signed-in navigation) */
  .browse-panel { position: fixed; top: calc(var(--header-h) - 4px); left: 50%; right: auto; transform: translateX(-50%); }
}
@layer identity {
  .pill-opt input, .chip-opt input, .pack-card input, .seg__opt input, .star-input__stars input { opacity: 0 !important; }
}
@layer identity {
  .bx-specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1px; margin: 0; border-radius: var(--radius-lg); overflow: hidden;
              border: 1px solid var(--color-border); background: var(--color-border); }
  .bx-specs > div { padding: 8px 12px; background: var(--color-surface-2); min-width: 0; }
  .bx-specs dt { font-size: var(--text-xs); color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: .05em; }
  .bx-specs dd { margin: 0; font-weight: var(--weight-semibold); font-size: var(--text-md); overflow-wrap: anywhere; }
}
@layer identity {
  .bx-state { display: flex; flex-wrap: wrap; gap: 6px; }
  .bx-state .status .icon { width: 14px; height: 14px; }
  .bx-title { margin: 0; font-size: var(--text-lg); }
  .mini-steps { list-style: none; counter-reset: ms; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .mini-steps li { position: relative; padding-left: 34px; counter-increment: ms; font-size: var(--text-md); color: var(--color-text-muted); line-height: 1.4; }
  .mini-steps li::before { content: counter(ms); position: absolute; left: 0; top: -1px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
                           font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-accent-text);
                           background: var(--tone-accent-bg); border: 1px solid var(--tone-accent-bd); }
  .mini-steps strong { display: block; color: var(--color-text); }
  .char-count { float: right; font-variant-numeric: tabular-nums; }
  .char-count.is-near { color: var(--tone-warning-fg); }
}
@layer identity {
  .buy-card.bx { display: flex; flex-direction: column; gap: var(--space-4); }
  .buy-card.bx > .bx-form { gap: var(--space-4); }
  .bx-field > textarea { display: block; width: 100%; margin-top: 6px; font-weight: var(--weight-normal); color: var(--color-text); }
  .bx-field > .field__help { display: block; margin-top: 6px; font-weight: var(--weight-normal); }
  .bx-specs { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .bx-field { font-size: var(--text-sm); }
}

/* ============================================================== F6.24 messaging presentation (identity layer)
   Presentation only: the markup of messages/_msg.html ↔ static/js/messenger.js is unchanged, so live and server
   rendered messages look identical. No read/delivery state is invented — only the existing sent/seen marks. */
@layer identity {
  /* conversation list */
  .conv-pane__title { font-family: var(--font-display); letter-spacing: var(--tracking-display); }
  .conv__link { border-radius: var(--radius-lg); margin: 2px 6px; padding-left: 10px !important; transition: background var(--dur-fast) var(--ease); text-decoration: none; }
  .conv__link:hover { background: var(--color-surface-2); }
  .conv__link[aria-current="page"], .conv--active .conv__link { background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface-2)); box-shadow: inset 3px 0 0 var(--color-primary); }
  .conv__name { font-weight: var(--weight-semibold); }
  .conv--unread .conv__preview { color: var(--color-text); }
  .conv__count { background: var(--color-primary); color: var(--color-on-primary); }
  .conv__time { font-variant-numeric: tabular-nums; }
  .conv-search input { border-radius: var(--radius-pill); }

  /* thread */
  .thread__head .ident__name, .thread__head h1, .thread__head h2 { font-family: var(--font-display); }
  .msgs { gap: 2px; }
  .msg { max-width: min(76%, 640px); }
  .msg--out { margin-left: auto; }
  .msg__bubble { border-radius: 18px; padding: 9px 14px 7px; line-height: 1.45; box-shadow: var(--shadow-1); }
  .msg--in .msg__bubble { background: var(--chat-in-bg); border: 1px solid var(--chat-in-bd); border-bottom-left-radius: 6px; }
  .msg--out .msg__bubble { background: var(--chat-out-bg); color: var(--chat-out-fg); border: 1px solid transparent; border-bottom-right-radius: 6px; }
  .msg--in.msg--cont-prev .msg__bubble { border-top-left-radius: 6px; }
  .msg--out.msg--cont-prev .msg__bubble { border-top-right-radius: 6px; }
  .msg:not(.msg--cont-prev) { margin-top: 10px; }
  .msg__body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
  .msg__sender { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 3px; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-accent-text); }
  .msg--out .msg__sender { color: color-mix(in srgb, var(--chat-out-fg) 80%, transparent); }
  .msg__tag { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: var(--radius-pill); font-size: 11px; font-weight: var(--weight-semibold);
              background: color-mix(in srgb, currentColor 14%, transparent); color: var(--color-text-muted); }
  .msg--out .msg__tag { color: var(--chat-out-fg); }
  .msg--auto .msg__bubble { background: var(--color-surface-2); border: 1px dashed var(--color-border-strong); }
  .msg--note .msg__bubble { background: var(--chat-note-bg); border: 1px solid var(--tone-warning-bd); color: var(--color-text); }
  .msg__meta { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 2px; font-size: 11px; opacity: .72; font-variant-numeric: tabular-nums; }
  .msg__state[data-state="seen"] { color: var(--glacier-300); opacity: 1; }
  .msg--out .msg__state[data-state="seen"] { color: var(--chat-out-fg); }
  .msg__order { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 4px; padding: 1px 8px; border-radius: var(--radius-pill); font-size: var(--text-xs);
                font-weight: var(--weight-semibold); text-decoration: none; background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; }
  .msg__img { border-radius: 12px; max-width: min(320px, 100%); }
  .msg__file a { font-weight: var(--weight-semibold); }
  .msg__warn { margin: 4px 0 0; padding: 6px 10px; border-radius: var(--radius); font-size: var(--text-xs); background: var(--tone-warning-bg); color: var(--tone-warning-fg); border: 1px solid var(--tone-warning-bd); }
  .msg__body--removed { font-style: italic; opacity: .7; }

  /* system events: compact centred timeline notes */
  .msg--system { max-width: 100%; margin: 10px auto !important; display: flex; justify-content: center; }
  .msg__system { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; max-width: 560px; margin: 0; padding: 6px 14px;
                 border-radius: var(--radius-pill); background: var(--color-surface-2); border: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; }
  .msg__system::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--glacier-300); flex: none; }
  .msg__system a { font-weight: var(--weight-semibold); text-decoration: none; color: var(--color-link); }
  .msg__system a:hover { text-decoration: underline; }
  .msg__system time { font-size: 11px; color: var(--color-text-subtle); }
  .day-sep span { font-family: var(--font-display); letter-spacing: .01em; }
  .unread-sep { color: var(--color-accent-text) !important; }
  .unread-sep::before, .unread-sep::after { background: color-mix(in srgb, var(--color-primary) 55%, transparent) !important; }

  /* order cards inside the conversation */
  .msg--order { max-width: min(92%, 520px); }
  .order-card { position: relative; padding: 14px 16px 12px 18px !important; border-radius: var(--radius-lg) !important; background: var(--color-surface) !important;
                border: 1px solid var(--color-border) !important; box-shadow: var(--shadow-1); overflow: hidden; }
  .order-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tone-info-fg); }
  .order-card[data-status="delivered"]::before { background: var(--tone-warning-fg); }
  .order-card[data-status="completed"]::before { background: var(--tone-success-fg); }
  .order-card[data-status="refunded"]::before, .order-card[data-status="cancelled"]::before, .order-card[data-status="disputed"]::before { background: var(--tone-danger-fg); }
  .order-card__code { font-family: var(--font-display); font-weight: var(--weight-bold); text-decoration: none; color: var(--color-text); }
  .order-card__title { font-weight: var(--weight-semibold); margin: 6px 0 2px; overflow-wrap: anywhere; }
  .order-card__choices { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }
  .order-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
  .order-card__open { font-size: var(--text-sm); font-weight: var(--weight-semibold); text-decoration: none; }
  .order-card__time { margin-left: auto; font-size: 11px; color: var(--color-text-subtle); }

  /* custom-offer cards (quotes) — a ticket: no bubble around it */
  .msg--card .msg__bubble { padding: 0; background: none !important; border: 0 !important; box-shadow: none; }
  .msg--card .msg__meta { padding: 0 6px; }
  .msg--card { max-width: min(92%, 520px); }
  .offer-card { position: relative; max-width: 100% !important; margin: 0 !important; padding: 16px 18px !important; border-radius: var(--radius-xl) !important;
                background: var(--color-surface) !important; border: 1px solid var(--color-border-strong) !important; box-shadow: var(--shadow-2); color: var(--color-text); }
  .offer-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: var(--color-primary); }
  .offer-card.status-paid::before, .offer-card.status-accepted::before { background: var(--tone-success-fg); }
  .offer-card.outdated::before, .offer-card.status-expired::before, .offer-card.status-cancelled::before, .offer-card.status-declined::before, .offer-card.status-superseded::before { background: var(--color-border-strong); }
  .offer-card.outdated, .offer-card.status-expired, .offer-card.status-cancelled, .offer-card.status-declined, .offer-card.status-superseded { opacity: .78; }
  .offer-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-subtle); }
  .offer-card-head strong { color: var(--color-accent-text); }
  .offer-card .offer-title { margin: 8px 0 4px; font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.3; }
  .offer-card .offer-price { margin: 0 0 8px; }
  .offer-card .offer-price strong { font-family: var(--font-display); font-size: var(--text-2xl) !important; color: var(--color-price); }
  .offer-card .offer-desc { margin: 0 0 10px; color: var(--color-text-muted); font-size: var(--text-md); }
  .offer-card dl.offer-facts { gap: 4px 14px !important; padding: 10px 12px; border-radius: var(--radius); background: var(--color-surface-2); font-size: var(--text-sm); }
  .offer-card dl.offer-facts dt { color: var(--color-text-subtle); font-weight: var(--weight-medium) !important; }
  .offer-card dl.offer-facts a { text-decoration: none; font-weight: var(--weight-semibold); }
  .offer-card .offer-actions { margin-top: 12px; }
  .offer-card .offer-actions a:not(.button) { font-size: var(--text-sm); font-weight: var(--weight-semibold); text-decoration: none; }
  .offer-card .button { min-height: 40px; font-weight: var(--weight-semibold); }

  /* composer */
  .composer { background: var(--color-surface); }
  .composer textarea { background: var(--color-surface-2) !important; }
  .composer:has(textarea:placeholder-shown) .composer__send { opacity: .55; }
  .composer__send { transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
  .composer__send:active { transform: scale(.94); }
  .composer__hint { font-size: 11px; color: var(--color-text-subtle); }
  .thread__status:not(:empty) { margin: 0 auto; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--tone-warning-bg); color: var(--tone-warning-fg); font-size: var(--text-xs); }
  .thread__empty { text-align: center; }
  .thread__prompts { justify-content: center; }
  @media (max-width: 767px) { .msg { max-width: 88%; } .msg--order, .msg--card { max-width: 100%; } }
}
@layer identity {
  .msg__system { position: relative; display: block; border-radius: 14px; padding: 6px 16px 6px 26px; text-align: left; }
  .msg__system::before { position: absolute; left: 12px; top: 13px; }
  .composer textarea { background: transparent !important; }
}
@layer identity {
  .chat-id__name { font-family: var(--font-display); letter-spacing: -.01em; }
  .chat-id__name a { color: inherit; text-decoration: none; }
  .chat-id__name a:hover { text-decoration: underline; }
  @media (max-width: 767px) {
    /* one compact header line on phones: name (+ badge) and one ellipsised status line */
    .thread__head .chat-id__name { font-size: var(--text-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .thread__head .chat-id__name .status { display: none; }
    .thread__head .chat-id__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-xs); }
    .thread__head .chat-id__facts { display: none; }
    .thread__head .chat-id__text { min-width: 0; }
  }
}
@layer identity {
  /* a message the server refused: clearly marked, never looks delivered */
  .msg:has(.msg__state[data-state="failed"]) .msg__bubble { background: var(--tone-danger-bg); color: var(--color-text); border: 1px dashed var(--tone-danger-bd); }
  .msg__state[data-state="failed"] { color: var(--tone-danger-fg); font-weight: var(--weight-semibold); opacity: 1; }
  .msg__state[data-state="pending"] { opacity: .7; }
  .msg__retry { min-height: 0; padding: 0 6px; margin-left: 4px; font-size: 11px; border-radius: var(--radius-pill); background: transparent; border-color: var(--tone-danger-bd); color: var(--tone-danger-fg); }
  .composer__error:not(:empty) { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 0; padding: 8px 12px; border-radius: var(--radius);
                                 background: var(--tone-danger-bg); border: 1px solid var(--tone-danger-bd); color: var(--tone-danger-fg); }
}
@layer identity {
  /* sign-in, registration, password reset */
  .auth-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: var(--space-12); align-items: center; max-width: 1040px;
                min-height: calc(100vh - var(--header-h) - 160px); padding-top: var(--space-10); }
  .auth-aside__title { font-size: var(--text-3xl); line-height: 1.15; margin: 0 0 var(--space-5); text-wrap: balance; }
  .auth-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
  .auth-points li { display: flex; gap: var(--space-3); color: var(--color-text-muted); }
  .auth-points .icon { flex: none; margin-top: 2px; color: var(--color-accent-text); }
  .auth-card { padding: var(--space-8) !important; border-radius: var(--radius-xl); box-shadow: var(--shadow-2); }
  .auth-card h1 { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
  .auth-form label { max-width: none; }
  .auth-form label > input, .auth-form .pw-field input { max-width: none !important; }
  .auth-form .field__help { display: block; margin-top: 4px; font-weight: var(--weight-normal); }
  .auth-form__aside { margin: -4px 0 var(--space-1); text-align: right; font-size: var(--text-sm); }
  .auth-switch { margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--color-border); text-align: center; color: var(--color-text-muted); }
  .pw-field { position: relative; display: block; margin-top: 4px; }
  .pw-field input { width: 100%; padding-right: 64px !important; }
  .pw-reveal { position: absolute; right: 4px; top: 50%; translate: 0 -50%; min-height: 30px !important; padding: 0 10px; font-size: var(--text-xs); background: transparent; border-color: transparent; color: var(--color-link); }
  @media (max-width: 860px) {
    .auth-shell { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding-top: var(--space-4); min-height: 0; }
    .auth-aside { order: 2; }
    .auth-aside__title { font-size: var(--text-xl); }
    .auth-card { padding: var(--space-5) !important; }
  }
}
@layer identity {
  /* generated artwork fills its box like a photo */
  .art--gen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* category banner: the category's own scene behind the header, with a readable overlay */
  .chead--banner { position: relative; isolation: isolate; min-height: 196px; padding: var(--space-8) var(--space-6) var(--space-6); border-radius: var(--radius-xl);
                   overflow: hidden; border: 1px solid var(--color-border); align-items: flex-end; }
  .chead__bg { position: absolute; inset: 0; z-index: -2; }
  .chead__bg .art { height: 100%; }
  .chead--banner::before { content: ""; position: absolute; inset: 0; z-index: -1;
     background: linear-gradient(90deg, var(--color-bg) 0%, color-mix(in srgb, var(--color-bg) 80%, transparent) 45%, color-mix(in srgb, var(--color-bg) 20%, transparent) 100%),
                 linear-gradient(0deg, color-mix(in srgb, var(--color-bg) 85%, transparent), transparent 70%); }
  .chead--banner .fam--lg { box-shadow: var(--shadow-2); background: color-mix(in srgb, var(--fam) 24%, var(--color-surface)); }
  .chead--banner .facts li { background: color-mix(in srgb, var(--color-bg) 55%, transparent); backdrop-filter: blur(6px); }
  @media (max-width: 767px) {
    .chead--banner { min-height: 0; padding: var(--space-6) var(--space-4) var(--space-4); }
    .chead--banner::before { background: linear-gradient(0deg, var(--color-bg) 15%, color-mix(in srgb, var(--color-bg) 60%, transparent)); }
  }
}
@layer identity {
  .home-hero__fan { position: absolute; z-index: 0; right: max(var(--space-6), calc((100vw - var(--content-max)) / 2)); top: 50%; width: 420px; height: 360px; translate: 0 -50%; pointer-events: none; }
  .home-hero__card { position: absolute; width: 300px; aspect-ratio: 16 / 10; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-2); }
  .home-hero__card .art { height: 100%; }
  .home-hero__card span { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 14px 10px; font-family: var(--font-display); font-weight: var(--weight-semibold);
                          color: var(--color-on-tile); background: linear-gradient(transparent, rgb(0 0 0 / .7)); }
  .home-hero__card--1 { right: 0; top: 0; rotate: 4deg; z-index: 1; }
  .home-hero__card--2 { right: 90px; top: 110px; rotate: -5deg; z-index: 2; }
  .home-hero__card--3 { right: 10px; top: 190px; rotate: 2deg; z-index: 3; width: 260px; }
  .home-hero__inner { position: relative; z-index: 1; }
  @media (max-width: 1340px) { .home-hero__fan { display: none; } }
}
@layer identity {
  /* admin visual image picker */
  .img-pick { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-2); margin-bottom: var(--space-3); }
  .img-pick__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
  .img-pick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 360px; overflow-y: auto; padding: 4px; margin: -4px; }
  .img-pick__opt.pick__opt { display: flex; flex-direction: column; gap: 6px; padding: 6px; min-height: 0; grid-template-columns: none; }
  .img-pick__opt input { position: absolute; left: 12px; top: 12px; translate: none; z-index: 1; }
  .img-pick__thumb { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface-3); }
  .img-pick__thumb--hero { aspect-ratio: 21 / 9; } .img-pick__thumb--icon { aspect-ratio: 1; width: 64px; }
  .img-pick__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .img-pick__cap { font-size: var(--text-xs); color: var(--color-text-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .asset-edit summary { font-size: var(--text-sm); color: var(--color-link); cursor: pointer; margin-top: 6px; }
  .asset-edit form { margin-top: 6px; }
}
@layer identity {
  .modal--confirm { width: min(440px, calc(100vw - 24px)); }
  .modal--confirm .modal__head { border-bottom: 0; padding-bottom: 0; }
  .modal--confirm .modal__body p { margin: 0; color: var(--color-text-muted); }
  .modal--confirm .modal__foot { border-top: 0; }
}
@layer identity {
  /* service-type directory rows */
  .svc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .svc-row { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: 10px var(--space-4);
             border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); }
  .svc-row--empty { opacity: .7; }
  .svc-row__game { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text); text-decoration: none; min-width: 0; }
  .svc-row__game .art { width: 56px; height: 56px; flex: none; border-radius: var(--radius); }
  .svc-row__game > span { display: flex; flex-direction: column; min-width: 0; font-size: var(--text-sm); }
  .svc-row__game strong { font-size: var(--text-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .svc-row__game:hover strong { text-decoration: underline; }
  @media (max-width: 767px) { .svc-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); } }
  /* guide links */
  .guide-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-3); }
  .guide-link { display: flex; gap: var(--space-3); align-items: center; padding: 10px; border-radius: var(--radius-lg); background: var(--color-surface);
                border: 1px solid var(--color-border); color: var(--color-text); text-decoration: none; }
  .guide-link:hover { border-color: var(--color-border-strong); }
  .guide-link__art { width: 120px; flex: none; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; }
  .guide-link__art .art { height: 100%; }
  .guide-link__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
  .guide-link__text strong { color: var(--color-text); font-size: var(--text-base); }
  .article-card .art { aspect-ratio: var(--ratio-article); }
}
@layer identity {
  /* editorial prose: designed, not a wall of text */
  .prose > p:first-child, .prose > h2:first-child + p { font-size: var(--text-lg); color: var(--color-text); }
  .prose h2 { position: relative; padding-left: 16px; }
  .prose h2::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 4px; border-radius: 2px; background: var(--color-primary); }
  .prose ul { list-style: none; padding: 0; }
  .prose ul li { position: relative; padding-left: 26px; margin-bottom: 8px; }
  .prose ul li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 8px; height: 8px; border-radius: 2px; rotate: 45deg; background: var(--color-accent-text); }
  .prose strong { color: var(--color-text); }
  .prose a { font-weight: var(--weight-semibold); }
  .editorial .prose { padding: var(--space-6); border-radius: var(--radius-xl); background: var(--color-surface); border: 1px solid var(--color-border); }

  /* responsive tables: stacked cards on phones (ui.js copies each column header into data-label) */
  @media (max-width: 640px) {
    .table-wrap { border: 0; background: none; overflow: visible; }
    table.is-stackable, table.is-stackable tbody, table.is-stackable tr, table.is-stackable td { display: block; width: 100%; }
    table.is-stackable thead { display: none; }
    table.is-stackable tr { margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
    table.is-stackable td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: 6px 0; border-bottom: 1px dashed var(--color-border); text-align: right; }
    table.is-stackable td:last-child { border-bottom: 0; }
    table.is-stackable td::before { content: attr(data-label); flex: none; max-width: 45%; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold);
                                    text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-subtle); }
    table.is-stackable td[data-label=""]::before { content: none; }
    table.is-stackable td:first-child { display: block; text-align: left; font-weight: var(--weight-semibold); }
    table.is-stackable td:first-child::before { display: block; max-width: none; margin-bottom: 2px; }
    table.is-stackable td.num { white-space: normal; }
  }
}
@layer identity {
  .pick-game__name { font-size: var(--text-lg) !important; display: flex; align-items: center; gap: 10px; }
  .pick-cat { display: flex !important; align-items: center; gap: 10px; text-decoration: none; }
  .pick-cat__name { flex: 1; min-width: 0; }
  .pick-cat .fam--sm { width: 26px; height: 26px; }
}
@layer identity {
  /* settings pages: one card per topic, compact grids */
  .settings-card { max-width: 920px; padding: var(--space-5) var(--space-6); }
  .settings-card + .settings-card { margin-top: var(--space-4); }
  .settings-card__title { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--space-4); font-size: var(--text-lg); }
  .settings-card__title .icon { color: var(--color-accent-text); }
  .settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-2) var(--space-4); }
  .settings-grid .field { margin: 0; }
  .settings-grid input, .settings-grid select { width: 100%; }
}
@layer identity {
  .ghero, .chead--banner { color: var(--hero-text); }
  .ghero h1, .chead--banner h1 { color: var(--hero-text); }
  .ghero .lead, .ghero .lead p, .chead--banner .text-muted { color: var(--hero-muted); }
  .ghero::before { background: linear-gradient(90deg, var(--hero-ink) 0%, color-mix(in srgb, var(--hero-ink) 82%, transparent) 45%, color-mix(in srgb, var(--hero-ink) 35%, transparent) 100%),
                               linear-gradient(0deg, var(--hero-ink) 0%, transparent 60%); }
  .chead--banner::before { background: linear-gradient(90deg, var(--hero-ink) 0%, color-mix(in srgb, var(--hero-ink) 80%, transparent) 45%, color-mix(in srgb, var(--hero-ink) 20%, transparent) 100%),
                                       linear-gradient(0deg, color-mix(in srgb, var(--hero-ink) 85%, transparent), transparent 70%); }
  .ghero .facts li, .chead--banner .facts li { background: rgb(10 12 16 / .55); border-color: rgb(255 255 255 / .14); color: var(--hero-muted); }
  .ghero .facts strong, .chead--banner .facts strong { color: var(--hero-text); }
  .ghero .eyebrow { color: var(--brand-400); }
  @media (max-width: 767px) {
    .ghero::before { background: linear-gradient(0deg, var(--hero-ink) 10%, color-mix(in srgb, var(--hero-ink) 70%, transparent)); }
    .chead--banner::before { background: linear-gradient(0deg, var(--hero-ink) 15%, color-mix(in srgb, var(--hero-ink) 60%, transparent)); }
  }
}
@layer identity {
  thead th { white-space: normal; min-width: 64px; line-height: 1.25; vertical-align: bottom; }
  .with-sidebar :not(.table-wrap) > table:not(.summary):not(.is-stackable) { display: block; overflow-x: auto; }
  @media (min-width: 641px) { .with-sidebar :not(.table-wrap) > table.is-stackable { display: block; overflow-x: auto; } }
}
@layer identity {
  /* F6.25 search suggestions with artwork / family icons, recent searches */
  .site-search__list { padding: 6px; border-radius: var(--radius-xl); }
  .site-search__group { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 4px; font-weight: var(--weight-semibold); }
  .site-search__option { align-items: center !important; gap: 10px !important; padding: 6px 10px !important; min-height: 44px; }
  .sug__visual { flex: none; width: 40px; height: 28px; border-radius: 6px; overflow: hidden; display: grid; place-items: center; background: var(--color-surface-3); }
  .sug__visual img { width: 100%; height: 100%; object-fit: cover; }
  .sug__visual.fam { width: 28px; height: 28px; margin: 0 6px; }
  .sug__visual .icon { width: 16px; height: 16px; }
  .sug__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .site-search__all { border-top: 1px solid var(--color-border); margin-top: 4px; color: var(--color-link) !important; }
  .sug__clear { min-height: 0 !important; padding: 0 8px; font-size: var(--text-xs); background: none; border: 0; color: var(--color-link); text-transform: none; letter-spacing: 0; }
}
@layer identity {
  .cat-finder { display: flex; flex-direction: column; gap: 10px; margin: 0 0 var(--space-4); padding: var(--space-3); border-radius: var(--radius-lg);
                background: var(--color-surface); border: 1px solid var(--color-border); }
  .cat-finder .pick__search { margin: 0; }
  .cat-finder__chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .cat-finder__chips .chip { min-height: 34px; gap: 6px; padding: 0 12px 0 6px; }
  .cat-finder__chips .chip:first-child { padding-left: 12px; }
  .cat-finder__chips .chip[aria-pressed="true"] { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
  .cat-finder__chips .fam--sm { width: 22px; height: 22px; border-radius: 6px; }
  .cat-finder p { margin: 0; }
}
@layer identity {
  .active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--space-3); padding: 0; list-style: none; }
  .active-filter { background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface-2)); border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); }
  .active-filter span[aria-hidden] { font-size: var(--text-base); line-height: 1; color: var(--color-text-muted); }
  .active-filter:hover span[aria-hidden] { color: var(--color-text); }
  .active-filters__clear { font-size: var(--text-sm); font-weight: var(--weight-semibold); text-decoration: none; margin-left: 4px; }
}
@layer identity {
  /* F6.25 seller storefront */
  .store-hero { position: relative; isolation: isolate; overflow: hidden; padding: var(--space-8) var(--space-6) var(--space-6); border-radius: var(--radius-xl);
                border: 1px solid var(--color-border); color: var(--hero-text); min-height: 180px; align-items: flex-end; }
  .store-hero__bg { position: absolute; inset: 0; z-index: -2; }
  .store-hero__bg .art { height: 100%; }
  .store-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
                        background: linear-gradient(90deg, var(--hero-ink) 10%, color-mix(in srgb, var(--hero-ink) 70%, transparent) 60%, color-mix(in srgb, var(--hero-ink) 35%, transparent)); }
  .store-hero h1, .store-hero .profile-hero__name { color: var(--hero-text); }
  .store-hero .profile-hero__sub, .store-hero .profile-hero__tagline { color: var(--hero-muted); }
  .store-hero .eyebrow { color: var(--brand-400); margin: 0; }
  .store-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: var(--space-3) 0 0; padding: 0; list-style: none;
                 border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-border); }
  .store-stats li { background: var(--color-surface); }
  .store-stats li > *, .store-stats a { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); color: inherit; text-decoration: none; }
  .store-stats li > strong { padding-bottom: 0; }
  .store-stats strong { font-family: var(--font-display); font-size: var(--text-xl); }
  .store-stats span { font-size: var(--text-sm); color: var(--color-text-subtle); }
  .store-stats li:not(:has(a)) { display: flex; flex-direction: column; padding: var(--space-3) var(--space-4); gap: 2px; }
  .store-stats li:not(:has(a)) > * { padding: 0; }
  @media (max-width: 767px) { .store-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .store-hero { padding: var(--space-6) var(--space-4) var(--space-4); } }
  .store-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin: 0 0 var(--space-3); padding: 0; list-style: none; }
  .store-game { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border);
                color: var(--color-text); text-decoration: none; min-width: 0; }
  .store-game:hover { border-color: var(--color-border-strong); }
  .store-game.is-active { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
  .store-game .art { width: 64px; height: 40px; flex: none; border-radius: var(--radius-sm); }
  .store-game > span { display: flex; flex-direction: column; min-width: 0; }
  .store-game strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-md); }
  .store-game small { color: var(--color-text-subtle); }
  .store-games__more { align-self: center; font-size: var(--text-sm); padding: 8px; }
  .store-search { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--space-3); }
  .store-search input { flex: 1 1 240px; }
  .store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
  .store-card { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-lg);
                background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); text-decoration: none; height: 100%; }
  .store-card:hover { border-color: var(--color-border-strong); background: var(--color-surface-2); }
  .store-card__text { display: flex; flex-direction: column; min-width: 0; }
  .store-card__title { font-weight: var(--weight-semibold); font-size: var(--text-md); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .store-card__meta { font-size: var(--text-xs); color: var(--color-text-subtle); }
  .store-card__price { text-align: right; white-space: nowrap; font-size: var(--text-md); display: flex; flex-direction: column; align-items: flex-end; }
  @media (max-width: 480px) { .store-grid { grid-template-columns: minmax(0, 1fr); } }
}
@layer identity {
  .id-picker { position: relative; margin-bottom: var(--space-3); }
  .id-picker__chips { margin: 6px 0 8px; }
  .id-picker__chips .chip { padding-right: 4px; }
  .id-picker__remove { min-height: 22px !important; width: 22px; padding: 0; margin-left: 4px; border-radius: 50%; border: 0; background: transparent; font-size: var(--text-base); line-height: 1; }
  .id-picker__remove:hover { background: var(--color-surface-3); }
  .id-picker__results { position: absolute; left: 0; right: 0; z-index: var(--z-dropdown); max-height: 280px; overflow-y: auto; margin: 4px 0 0; padding: 4px; list-style: none;
                        background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
  .id-picker__option { padding: 8px 10px; border-radius: var(--radius); cursor: pointer; font-size: var(--text-md); }
  .id-picker__option:hover, .id-picker__option:focus { background: var(--color-surface-3); outline: none; }
}
@layer identity { .id-picker [hidden], .cat-finder [hidden], [data-pick] [hidden] { display: none !important; } }
@layer identity {
  .ed-nav a[aria-current] { color: var(--color-text); background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface-2)); box-shadow: inset 2px 0 0 var(--color-primary); }
  @media (max-width: 1023px) { .ed-nav a[aria-current] { box-shadow: none; border-color: var(--color-primary); } }
  .ed-section { border-radius: var(--radius-xl); }
  .ed-section__title { font-family: var(--font-display); }
}
@layer identity {
  .art-plan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .art-plan__row { display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: 10px; border-radius: var(--radius-lg);
                   background: var(--color-surface); border: 1px solid var(--color-border); }
  .art-plan__row--category { margin-left: var(--space-8); grid-template-columns: 120px minmax(0, 1fr) auto; background: var(--color-surface-2); }
  .art-plan__thumb { display: block; aspect-ratio: 21 / 9; border-radius: var(--radius); overflow: hidden; background: var(--color-surface-3); }
  .art-plan__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .art-plan__name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 4px; }
  .art-plan__brief { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
  .art-plan__actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
  @media (max-width: 767px) { .art-plan__row, .art-plan__row--category { grid-template-columns: minmax(0, 1fr); margin-left: 0; } }
}
@layer identity {
  /* staff state filters (import items and similar link rows) as chips with touch-size targets */
  .state-filter { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 var(--space-3); color: transparent; font-size: 0; }
  .state-filter a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: var(--radius-pill); font-size: var(--text-sm);
                    background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text); text-decoration: none; }
  .state-filter a[aria-current] { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
  @media (max-width: 1023px) { .state-filter a { min-height: 40px; } }
  .tpl-save { border: 0; padding: 0; margin: 0 0 var(--space-3); }
}
@layer identity {
  /* F6.25 buyer overview + order rows */
  .dash-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
  .dash-stats a { position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--space-4); border-radius: var(--radius-lg); overflow: hidden;
                  background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); text-decoration: none; height: 100%; }
  .dash-stats a:hover { border-color: var(--color-border-strong); }
  .dash-stats strong { font-family: var(--font-display); font-size: var(--text-2xl); }
  .dash-stats span { font-size: var(--text-sm); color: var(--color-text-subtle); }
  .dash-stats .is-hot a { background: linear-gradient(180deg, var(--tone-accent-bg), var(--color-surface) 80%); }
  .dash-stats .is-hot a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-primary); }
  .dash-stats .is-hot strong { color: var(--color-accent-text); }
  @media (max-width: 767px) { .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .order-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .order-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-4); align-items: center; padding: 12px var(--space-4);
               border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); text-decoration: none; }
  .order-row:hover { border-color: var(--color-border-strong); background: var(--color-surface-2); }
  .order-row__main { display: flex; flex-direction: column; min-width: 0; }
  .order-row__title { font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .order-row__meta { font-size: var(--text-sm); color: var(--color-text-subtle); }
  .order-row__state { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  .order-row__next { font-size: var(--text-xs); color: var(--color-accent-text); font-weight: var(--weight-semibold); }
  .order-row__total { font-family: var(--font-display); font-weight: var(--weight-semibold); min-width: 80px; text-align: right; }
  @media (max-width: 640px) {
    .order-row { grid-template-columns: minmax(0, 1fr) auto; }
    .order-row__state { grid-column: 1; grid-row: 2; align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
    .order-row__total { grid-column: 2; grid-row: 1 / span 2; }
  }
  .error-page .search-big { margin-left: auto; margin-right: auto; }
  /* F6.25 notification centre: one card row per notification, kind icon, unread accent; the row is the mark-read form */
  .form-narrow { max-width: 560px; }
  .help-links { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
  .help-links a { display: flex; gap: var(--space-3); align-items: flex-start; height: 100%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg);
                  background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); text-decoration: none; }
  .help-links a:hover { border-color: var(--color-border-strong); background: var(--color-surface-2); }
  .help-links a > .icon { flex: none; margin-top: 2px; color: var(--color-accent-text); }
  .help-links a > span { display: flex; flex-direction: column; gap: 2px; }
  .help-links a > span > span { font-size: var(--text-sm); color: var(--color-text-muted); }
  .note-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .note form { margin: 0; }
  .note__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; width: 100%;
               padding: 12px var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border);
               color: var(--color-text); text-align: left; font: inherit; min-height: 0; cursor: default; }
  button.note__row { cursor: pointer; }
  button.note__row:hover { border-color: var(--color-border-strong); background: var(--color-surface-2); }
  .note__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius); background: var(--color-surface-2); color: var(--color-text-subtle); }
  .note.is-unread .note__row { background: linear-gradient(90deg, var(--tone-accent-bg), var(--color-surface) 60%); border-color: var(--color-border-strong); }
  .note.is-unread .note__icon { color: var(--color-accent-text); }
  .note__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .note__title { font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
  .note:not(.is-unread) .note__title { font-weight: var(--weight-medium); color: var(--color-text-muted); }
  .note__body { font-size: var(--text-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
  .note__time { font-size: var(--text-xs); color: var(--color-text-subtle); }
  .note__dot { width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--color-primary); }
}

@layer identity {
  /* ---- F6.26 scroll containers: thin, themed, thumb only — the track no longer cuts through the chat. Scrolling,
     wheel, touch, keyboard (the scroller is focusable) and the visible thumb all stay; nothing is hidden or disabled. */
  .thread__scroller, .conv-list, .ctx-pane, .offer-chat .thread__scroller, .pick__list--scroll, .composer textarea,
  .composer__files, .table-wrap, .tabs, .sidenav {
    scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent;
  }
  .thread__scroller:hover, .conv-list:hover, .ctx-pane:hover, .thread__scroller:focus-visible, .conv-list:focus-within {
    scrollbar-color: var(--scroll-thumb-hover) transparent;
  }
  /* the history keeps its width whether or not it overflows (no jump when the first long message arrives) and the
     browser's own anchoring keeps the reader's line in place while content above changes */
  .thread__scroller { scrollbar-gutter: stable; overflow-anchor: auto; overscroll-behavior: contain; }
  .msgs { overflow-anchor: none; }
  .msgs > li:last-child { overflow-anchor: auto; }

  /* ---- unified inbox: context of each conversation */
  .conv__ctx { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 1px 0 2px; }
  .conv__tag { flex: none; height: 18px; padding: 0 7px; font-size: 11px; letter-spacing: .01em; }
  .conv__tag--buying { background: var(--tone-info-bg); color: var(--tone-info-fg); }
  .conv__tag--selling { background: var(--tone-accent-bg); color: var(--tone-accent-fg); }
  .conv__tag--support { background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); }
  .conv__about { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-subtle); font-size: var(--text-xs); }
  .thread__actions .conv__tag { height: 22px; padding: 0 9px; font-size: var(--text-xs); }
  .conv-empty strong { display: block; color: var(--color-text); margin-bottom: 4px; }
  .conv-empty a { display: inline-block; margin-top: 6px; }

  /* ---- shared composer: file tray, chips, drop target */
  .composer__files { list-style: none; margin: 0 0 8px; padding: 0; display: flex; gap: 8px; overflow-x: auto; }
  .composer__files[hidden] { display: none; }
  .composer__limits { margin: 4px 0 0; padding-left: 14px; font-size: 11px; color: var(--color-text-subtle); }
  .composer__limits[hidden] { display: none; }
  .file-chip { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 8px 6px 6px;
               border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-2); color: var(--color-text); }
  .composer__files .file-chip { flex: none; width: 236px; padding-right: 34px; overflow: hidden; }
  .file-chip__thumb { flex: none; width: 40px; height: 40px; object-fit: cover; border-radius: 8px; background: var(--color-surface-3); }
  .file-chip__icon { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 8px; background: var(--color-surface-3); color: var(--color-text-muted); }
  .file-chip__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
  .file-chip__name { font-size: var(--text-sm); font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .file-chip__meta, .file-chip__status { font-size: 11px; color: var(--color-text-subtle); }
  .file-chip__status:empty { display: none; }
  .file-chip[data-state="error"] { border-color: var(--tone-danger-bd); background: var(--tone-danger-bg); }
  .file-chip[data-state="error"] .file-chip__status { color: var(--tone-danger-fg); white-space: normal; }
  .file-chip__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
  .file-chip__bar > span { display: block; height: 100%; width: 0; background: var(--color-primary); transition: width var(--dur-fast) linear; }
  .file-chip:not([data-state="uploading"]) .file-chip__bar { display: none; }
  .file-chip__remove { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
                       border: 0; border-radius: 50%; background: transparent; color: var(--color-text-muted); min-height: 0; }
  .file-chip__remove:hover { background: var(--color-surface-3); color: var(--color-text); }
  .file-chip__remove .icon { width: 14px; height: 14px; }
  .file-chip__retry { align-self: flex-start; margin-top: 2px; padding: 0 8px; min-height: 22px; font-size: 11px; border-radius: var(--radius-pill); }
  .file-chip--link { text-decoration: none; max-width: 300px; margin: 2px 0; }
  .file-chip--link:hover { border-color: var(--color-border-strong); }
  .msg--out .file-chip--link { background: color-mix(in srgb, var(--chat-out-fg) 12%, transparent); border-color: color-mix(in srgb, var(--chat-out-fg) 25%, transparent); color: var(--chat-out-fg); }
  .msg--out .file-chip--link .file-chip__meta { color: inherit; opacity: .8; }
  .msg__media { display: block; margin: 2px 0; border-radius: 12px; overflow: hidden; width: fit-content; max-width: 100%; }
  .msg__img { height: auto; max-height: 320px; width: auto; object-fit: contain; background: var(--color-surface-3); }
  .attach-fallback { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 var(--space-3) var(--space-2); }
  .attach-fallback[hidden] { display: none; }
  [data-thread].is-dropping { outline: 2px dashed var(--color-primary); outline-offset: -6px; }
  [data-thread].is-dropping .thread__scroller { opacity: .55; }
  .composer.has-files .composer__send { opacity: 1 !important; }

  /* ---- long text and pasted content inside bubbles */
  .msg__body { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
}

@layer identity {
  /* ---- F6.26 art banners: library illustrations shown full-bleed (subject composed on the right, calm left for text) */
  .ghero--art { min-height: 420px; align-items: end; grid-template-columns: minmax(0, 1fr); }
  .chead--art { min-height: 340px; align-items: flex-end; }
  .ghero--art .ghero__bg img { object-position: 78% 30%; }
  .chead--art .chead__bg img { object-position: 78% 64%; }        /* category subjects sit lower in the frame */
  .ghero--art > div:not(.ghero__bg), .chead--art > div:not(.chead__bg) { max-width: 46rem; }
  .ghero--art::before, .chead--art::before {
    background: linear-gradient(90deg, var(--hero-ink) 0%, color-mix(in srgb, var(--hero-ink) 78%, transparent) 30%,
                color-mix(in srgb, var(--hero-ink) 18%, transparent) 58%, transparent 72%),
                linear-gradient(0deg, color-mix(in srgb, var(--hero-ink) 70%, transparent) 0%, transparent 40%) !important;
  }
  @media (max-width: 767px) {
    /* phones: the art is a band across the top (not stretched behind the text), the text sits on plain ink below */
    .ghero--art, .chead--art { min-height: 0; padding-top: calc(48vw + var(--space-3)); background: var(--hero-ink); }
    .ghero--art .ghero__bg, .chead--art .chead__bg { bottom: auto; height: calc(48vw + 48px); }
    .ghero--art .ghero__bg img { object-position: 82% 28%; }
    .chead--art .chead__bg img { object-position: 82% 62%; }
    .ghero--art::before, .chead--art::before {
      inset: auto 0 0 0; height: calc(100% - 48vw + 48px);
      background: linear-gradient(180deg, transparent 0, var(--hero-ink) 56px) !important;
    }
  }
}

@layer identity {
  .ccard__thumb { flex: none; width: 72px; height: 44px; object-fit: cover; object-position: 75% 40%; border-radius: var(--radius); border: 1px solid var(--color-border); }
  @media (max-width: 480px) { .ccard__thumb { width: 56px; height: 40px; } }
}

@layer identity {
  /* F6.26 team inbox / support rows use the conversation-row design */
  .team-list .conv__link { flex-wrap: nowrap; align-items: center; gap: var(--space-3); padding: 10px var(--space-3); margin: 0; border-radius: 0; }
  .team-list .conv__link .badge, .team-list .conv__ctx .status { flex: none; }
}

@layer identity {
  /* F6.26: stacked (phone) table cells holding several elements — e.g. listing title + meta + tag — show the label
     above the content instead of squeezing the elements side by side */
  @media (max-width: 640px) {
    table.is-stackable td:has(> * + *) { display: block; text-align: left; }
    table.is-stackable td:has(> * + *)::before { display: block; max-width: none; margin-bottom: 4px; }
    table.is-stackable td:has(> * + *) > * { max-width: 100%; }
  }
}

@layer identity {
  /* F6.26 guide cards without an assigned image: a calm icon panel (no unrelated generated scene) */
  .article-card__icon { display: grid; place-items: center; aspect-ratio: 16 / 9; width: 100%;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 22%, var(--color-surface-2)), var(--color-surface-2) 70%);
    color: var(--color-accent-text); border-bottom: 1px solid var(--color-border); }
  .article-card__icon .icon { width: 44px; height: 44px; opacity: .9; }
  pre.code-block { margin: var(--space-2) 0 0; padding: var(--space-3); max-height: 320px; overflow: auto; font-size: var(--text-xs);
    background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius); white-space: pre-wrap; overflow-wrap: anywhere; }
}

@layer identity {
  /* F6.26: fact lists on the account-delivery pages (previously unstyled) */
  dl.dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--space-4); margin: 0 0 var(--space-4);
          padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); max-width: 40rem; }
  dl.dl dt { color: var(--color-text-muted); font-size: var(--text-sm); }
  dl.dl dd { margin: 0; font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
}

@layer identity {
  /* F6.27 purchase-box choice controls: numeric ranges as compact dropdowns side by side (current → desired level),
     long lists collapsed to the chosen value + "Change" (ui.js collapsible) */
  .bx-selects { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-3); }
  .bx-select .bx-label { display: block; margin-bottom: 0; }
  .bx-select select { font-variant-numeric: tabular-nums; min-height: 44px; }
  .bx-select select option:disabled { color: var(--color-text-subtle); }
  .pick.is-collapsed .pick__search, .pick.is-collapsed .pick__list, .pick.is-collapsed .pick__empty { display: none; }
  .pick__current { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3); width: 100%;
    min-height: 48px; padding: 10px 14px; margin-bottom: 8px; text-align: left; cursor: pointer;
    background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface-2)); color: var(--color-text);
    border: 1px solid var(--color-primary); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--color-primary); font: inherit; }
  .pick__current:hover { background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface-2)); }
  .pick__current:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--color-primary), var(--focus-ring); }
  .pick__current-name { font-weight: var(--weight-semibold); overflow-wrap: anywhere; line-height: 1.3; }
  .pick__current-price { font-family: var(--font-display); font-weight: var(--weight-semibold); color: var(--color-price); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .pick__current-change { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-accent-text); white-space: nowrap; }
  .pick__current-change::after { content: " ▾"; }
  .pick__current[aria-expanded="true"] .pick__current-change::after { content: " ▴"; }
  .pick:not(.is-collapsed) .pick__current { box-shadow: none; border-color: var(--color-border-strong); background: var(--color-surface-2); }
  @media (max-width: 480px) { .pick__current { grid-template-columns: minmax(0, 1fr) auto; } .pick__current-price { grid-column: 1; grid-row: 2; } .pick__current-change { grid-row: 1 / span 2; grid-column: 2; } }
}

@layer identity {
  /* F6.27: disclosures in the purchase box read as controls (chevron + accent), not as plain text */
  .bx-more:not(.bx-more--fine) > summary { min-height: 44px; padding: 0 12px; border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius); color: var(--color-text); font-weight: var(--weight-semibold); list-style: none; }
  .bx-more:not(.bx-more--fine) > summary::-webkit-details-marker { display: none; }
  .bx-more:not(.bx-more--fine) > summary::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px;
    border-radius: 50%; background: var(--color-surface-3); color: var(--color-accent-text); font-weight: var(--weight-bold); }
  .bx-more:not(.bx-more--fine)[open] > summary::before { content: "−"; }
  .bx-more:not(.bx-more--fine) > summary:hover { border-color: var(--color-primary); }
}

@layer identity {
  /* F6.27: ONE selected state for every choice control (chips, pills, list rows, the collapsed list): tinted fill + accent
     ring; checkboxes (multi-select) add a check mark so "pick several" reads differently from "pick one" */
  .chip-opt input:checked + span, .pill-opt input:checked + span {
    border-color: var(--color-primary); color: var(--color-text);
    background: color-mix(in srgb, var(--color-primary) 16%, var(--color-surface-2)); box-shadow: inset 0 0 0 1px var(--color-primary); }
  .chip-opt input[type=checkbox]:checked + span::before, .pill-opt input[type=checkbox]:checked + span::before {
    content: "✓"; margin-right: 6px; color: var(--color-accent-text); font-weight: var(--weight-bold); }
  .chip-opt input:checked + span small, .pill-opt input:checked + span small { color: var(--color-text-muted); }
}

@layer identity {
  /* F6.27 category filters: long choice lists in two columns, the rest behind "Show all" */
  .checks--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--space-3); }
  .checks--grid .check { min-width: 0; overflow-wrap: anywhere; }
  .checks-more { margin-top: 4px; }
  .checks-more > summary { cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-accent-text); padding: 6px 0; }
  .checks-more[open] > summary { margin-bottom: 2px; }
}

@layer identity {
  /* F6.27 form building blocks: a responsive field row and a joined input + unit select */
  .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3) var(--space-4); }
  .form-row > .field, .form-row > label { margin: 0; min-width: 0; }
  .form-row input, .form-row select { width: 100%; }
  .input-group { display: flex; min-width: 0; }
  .input-group > input { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
  .input-group > select { flex: 0 0 auto; width: auto; border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
  .lang-pick .pick__list--scroll { max-height: 220px; }
  .lang-pick .pick__opt { min-height: 40px; padding: 8px 12px 8px 40px; }
}

@layer identity {
  /* F6.27: the in-house banners are a temporary fallback, not premium art — they no longer push listings below the fold:
     game hero 420 → 300 px, category header 340 → 200 px, and a slimmer band on phones */
  .ghero--art { min-height: 300px; }
  .chead--art { min-height: 200px; }
  @media (max-width: 767px) {
    .chead--art { padding-top: calc(30vw + var(--space-3)); }
    .chead--art .chead__bg { height: calc(30vw + 48px); }
    .chead--art::before { height: calc(100% - 30vw + 48px); }
    .ghero--art { padding-top: calc(38vw + var(--space-3)); }
    .ghero--art .ghero__bg { height: calc(38vw + 48px); }
    .ghero--art::before { height: calc(100% - 38vw + 48px); }
  }
}

@layer identity {
  /* F6.27 language picker: same width as the other profile fields, compact rows */
  .lang-pick { max-width: 560px; }
  .lang-pick .pick__opt { min-height: 36px; padding: 6px 12px 6px 40px; }
}

@layer identity {
  /* F6.27: the search results page keeps ONE search box (its own, prefilled) — the header field and its toggle step aside */
  body.page-search .site-search, body.page-search .search-toggle { display: none !important; }
}

@layer identity {
  /* ===== F6.28 category offer filters: compact discovery panel + results toolbar + phone sheet ===================== */
  .listing-layout--fp { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: var(--space-5, 24px); align-items: start; }
  .fpanel { min-width: 0; }
  .fpanel__form { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); }
  .fpanel__head { display: flex; align-items: center; gap: var(--space-2); padding: 14px 16px 10px; }
  .fpanel__title { display: flex; align-items: center; gap: 8px; margin: 0; flex: 1; font-size: var(--text-md); font-weight: var(--weight-semibold); }
  .fpanel__title .icon { width: 18px; height: 18px; color: var(--color-text-subtle); }
  .fpanel__reset { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-accent-text); text-decoration: none; }
  .fpanel__reset:hover { text-decoration: underline; }
  .fpanel__reset[hidden], .fpanel__close[hidden] { display: none; }
  .fpanel__close { display: grid; place-items: center; width: 40px; height: 40px; margin: -6px -8px -6px 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--color-text-muted); cursor: pointer; }
  .fpanel__close:hover { background: var(--color-surface-2); color: var(--color-text); }
  .fpanel__close .icon { width: 20px; height: 20px; }
  .fpanel__body { padding: 0 16px 6px; }
  .fpanel__foot { display: flex; gap: var(--space-2); padding: 12px 16px; border-top: 1px solid var(--color-border); }
  .fpanel__foot .btn--primary { flex: 1; }
  /* sections: one hairline between them, no nested cards or fieldset boxes */
  .fsec { margin: 0; padding: 14px 0; border: 0; border-top: 1px solid var(--color-border); min-width: 0; }
  .fsec:first-child { border-top: 0; padding-top: 4px; }
  .fsec__label { display: block; float: none; width: 100%; padding: 0; margin: 0 0 8px; font-size: var(--text-sm);
    font-weight: var(--weight-semibold); color: var(--color-text); }
  .fsec__hint { font-weight: var(--weight-normal); color: var(--color-text-subtle); font-size: var(--text-xs); margin-left: 4px; }
  .fsec select { width: 100%; }
  /* search inputs with icon and clear button */
  .finput { position: relative; }
  .finput__icon { position: absolute; left: 11px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--color-text-subtle); pointer-events: none; }
  .finput input { width: 100%; padding-left: 34px; padding-right: 36px; }
  .finput input::-webkit-search-cancel-button { display: none; }
  .finput__clear { position: absolute; right: 4px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 32px; height: 32px;
    border: 0; border-radius: 50%; background: transparent; color: var(--color-text-subtle); cursor: pointer; }
  .finput__clear:hover { background: var(--color-surface-3); color: var(--color-text); }
  .finput__clear .icon { width: 14px; height: 14px; }
  .finput__clear[hidden] { display: none; }
  /* choice chips (checkboxes) with the shared selected style */
  .fchips { display: flex; flex-wrap: wrap; gap: 6px; }
  .fchip { position: relative; display: inline-flex; margin: 0; min-width: 0; }
  .fchip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .fchip span { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill); background: var(--color-surface-2); color: var(--color-text-muted); font-size: var(--text-sm);
    line-height: 1.25; overflow-wrap: anywhere; cursor: pointer; transition: border-color .12s, background .12s; }
  .fchip:hover span { border-color: var(--color-primary); color: var(--color-text); }
  .fchip input:checked + span { border-color: var(--color-primary); color: var(--color-text);
    background: color-mix(in srgb, var(--color-primary) 16%, var(--color-surface-2)); box-shadow: inset 0 0 0 1px var(--color-primary); }
  .fchip input:checked + span::before { content: "\2713"; margin-right: 6px; color: var(--color-accent-text); font-weight: var(--weight-bold); }
  .fchip input:focus-visible + span { box-shadow: var(--focus-ring); }
  .fmore { margin-top: 8px; }
  .fmore > summary { cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-accent-text); width: fit-content; }
  .fmore[open] > summary { margin-bottom: 8px; }
  /* min to max */
  .frange { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
  .frange input { width: 100%; min-width: 0; font-variant-numeric: tabular-nums; }
  .frange__sep { color: var(--color-text-subtle); }
  /* availability switches */
  .fswitch { position: relative; display: flex; align-items: center; gap: 10px; min-height: 36px; margin: 0; cursor: pointer;
    font-size: var(--text-sm); color: var(--color-text); }
  .fswitch input { position: absolute; opacity: 0; width: 36px; height: 20px; margin: 0; cursor: pointer; }
  .fswitch__track { position: relative; flex: none; width: 36px; height: 20px; border-radius: var(--radius-pill); background: var(--color-surface-3);
    border: 1px solid var(--color-border-strong); transition: background .15s, border-color .15s; }
  .fswitch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
    background: var(--color-text-subtle); transition: transform .15s, background .15s; }
  .fswitch input:checked + .fswitch__track { background: var(--color-primary); border-color: var(--color-primary); }
  .fswitch input:checked + .fswitch__track::after { transform: translateX(16px); background: var(--color-on-primary); }
  .fswitch input:focus-visible + .fswitch__track { box-shadow: var(--focus-ring); }
  @media (prefers-reduced-motion: reduce) { .fswitch__track, .fswitch__track::after { transition: none; } }
  /* results toolbar: count, sort and currency next to the prices */
  .results-col { min-width: 0; }
  .rtoolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px var(--space-3); margin: 0 0 var(--space-2); }
  .rtoolbar__count { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-text); }
  .rtoolbar__ctl { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
  .rtoolbar__sel { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
  .rtoolbar__sel select { width: auto; min-height: 36px; padding-top: 4px; padding-bottom: 4px; font-size: var(--text-sm); }
  .rtoolbar__filters { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: var(--radius-pill);
    border: 1px solid var(--color-border-strong); background: var(--color-surface-2); color: var(--color-text); font: inherit;
    font-weight: var(--weight-semibold); cursor: pointer; }
  .rtoolbar__filters .icon { width: 16px; height: 16px; }
  .rtoolbar__filters[hidden] { display: none; }
  .rtoolbar__badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill);
    background: var(--color-primary); color: var(--color-on-primary); font-size: var(--text-xs); font-weight: var(--weight-bold); }
  .rtoolbar__badge[hidden] { display: none; }
  .listing-layout--fp .result-bar { justify-content: flex-start; min-height: 0; margin: 0 0 6px; }
  .listing-layout--fp .result-bar:empty { display: none; }
  /* loading: a thin progress line and a dimmed list; errors inline with Retry */
  .listing-layout--fp .results { position: relative; transition: opacity .15s; }
  .listing-layout--fp .results.is-loading { opacity: .5; }
  .listing-layout--fp .results.is-loading::before { content: ""; position: absolute; z-index: 2; top: -6px; left: 0; height: 2px; width: 100%;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent); background-size: 40% 100%; background-repeat: no-repeat;
    animation: fp-progress 1s linear infinite; }
  @keyframes fp-progress { from { background-position: -40% 0; } to { background-position: 140% 0; } }
  @media (prefers-reduced-motion: reduce) { .listing-layout--fp .results.is-loading::before { animation: none; background-size: 100% 100%; } }
  .results-error { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
  /* desktop with JS: results update live, so the submit button is not needed */
  @media (min-width: 1024px) { html.fp-js .fpanel__foot { display: none; } html.fp-js .fpanel__close { display: none; } }
  /* tablet and phone */
  @media (max-width: 1023px) {
    .listing-layout--fp { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
    .rtoolbar__count { flex-basis: 100%; order: 3; font-size: var(--text-sm); color: var(--color-text-muted); font-weight: var(--weight-medium); }
    .rtoolbar__sel .rtoolbar__lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    /* with JS the panel is a sheet opened by the Filters button; without JS it stays inline above the results */
    html.fp-js .fpanel { display: none; }
    html.fp-js .fpanel.is-open { display: flex; position: fixed; inset: 0; z-index: var(--z-modal); align-items: flex-end; justify-content: center;
      background: var(--color-overlay); }
    html.fp-js .fpanel.is-open .fpanel__form { width: 100%; max-width: 640px; max-height: 92dvh; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
      border-bottom: 0; box-shadow: var(--shadow-2); animation: fp-sheet .18s ease-out; }
    html.fp-js .fpanel.is-open .fpanel__head { border-bottom: 1px solid var(--color-border); }
    html.fp-js .fpanel.is-open .fpanel__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-top: 4px; }
    html.fp-js .fpanel.is-open .fpanel__foot { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
    html.fp-js .fpanel.is-open .fpanel__head [data-filter-reset] { display: none; }
    html.fp-sheet-open, html.fp-sheet-open body { overflow: hidden; }
  }
  @keyframes fp-sheet { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { html.fp-js .fpanel.is-open .fpanel__form { animation: none; } }
}

@layer identity {
  /* F6.28 refinements: legends sit inside their section (no fieldset border gap); the sheet button is phone/tablet only;
     the phone toolbar is ONE row (Filters · Sort · Currency) with the count below */
  .fsec > legend.fsec__label { float: left; }
  .fsec > legend.fsec__label + * { clear: both; }
  @media (min-width: 1024px) { .rtoolbar__filters { display: none !important; } }
  @media (max-width: 1023px) {
    .rtoolbar { flex-wrap: wrap; }
    .rtoolbar__ctl { flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-end; min-width: 0; }
    .rtoolbar__sel { min-width: 0; }
    .rtoolbar__sel select { min-width: 0; max-width: 100%; min-height: 40px; }
    .rtoolbar__sel:first-child select { max-width: 11rem; }
    .listing-layout--fp .result-bar { margin-top: -4px; }
  }
}

@layer identity {
  @media (max-width: 1023px) {
    .rtoolbar { gap: 8px 6px; }
    .rtoolbar__ctl { gap: 6px; }
    .rtoolbar__filters { padding: 0 12px; }
    .rtoolbar__sel:first-child select { max-width: 9rem; }
  }
}

@layer identity { .listing-layout--fp .result-bar:not(:has(*)) { display: none; } }

@layer identity {
  @media (max-width: 1023px) {
    .rtoolbar__sel select { padding-left: 10px; }
    .rtoolbar__sel:first-child select { max-width: 8.5rem; }
    .rtoolbar__filters { padding: 0 10px; gap: 6px; }
  }
}

@layer identity {
  /* F6.28 phone toolbar: row 1 Filters + Sort, row 2 the count with the currency at its right (next to the prices) */
  @media (max-width: 1023px) {
    .rtoolbar { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "filters sort" "count cur"; align-items: center; gap: 8px; }
    html:not(.fp-js) .rtoolbar { grid-template-areas: "count sort" "count cur"; }
    .rtoolbar__filters { grid-area: filters; }
    .rtoolbar__ctl { display: contents; }
    .rtoolbar__sel:first-child { grid-area: sort; justify-self: end; }
    .rtoolbar__sel:last-child { grid-area: cur; justify-self: end; }
    .rtoolbar__sel:first-child select { max-width: none; }
    .rtoolbar__count { grid-area: count; flex-basis: auto; order: 0; }
  }
}

@layer identity { .fpanel__reset { display: inline-flex; align-items: center; min-height: 32px; padding: 0 6px; margin-right: -6px; border-radius: var(--radius-sm); } }

@layer identity {
  /* F6.29 custom-offer review and order checkout: the item on the left, the one payment box on the right */
  .co-review { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr); gap: var(--space-4); align-items: start; }
  .co-review__pay { position: sticky; top: calc(var(--header-h, 64px) + 12px); }
  .co-review__pay .bx-total__row { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--text-lg); }
  .co-review__decline { margin-top: var(--space-3); }
  .co-review__decline > summary { cursor: pointer; color: var(--color-text-muted); font-size: var(--text-sm); }
  @media (max-width: 860px) { .co-review { grid-template-columns: minmax(0, 1fr); } .co-review__pay { position: static; } }
}

@layer identity {
  /* F6.29: Buy again next to finished order rows; the calm problem disclosure on the order page */
  .order-list > li { display: flex; align-items: center; gap: var(--space-2); }
  .order-list > li > .order-row { flex: 1; min-width: 0; }
  .order-row__again { flex: none; }
  @media (max-width: 640px) { .order-list > li { flex-wrap: wrap; } .order-row__again { margin-left: auto; } }
  .problem-box { margin-top: var(--space-2); }
  .problem-box > summary { cursor: pointer; color: var(--color-text-muted); font-size: var(--text-sm); }
  .problem-box[open] > summary { margin-bottom: var(--space-2); color: var(--color-text); }
  .order-again { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-3) 0; }
  .bx-remembered { margin-bottom: 6px; }
}

@layer identity { .recent-offers { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .recent-offers a { display: block; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); text-decoration: none; color: var(--color-text); overflow-wrap: anywhere; } .recent-offers a:hover { border-color: var(--color-primary); } }

@layer identity {
  /* F6.29: review stars are real touch targets (the audit flagged them below 32 px on phones) */
  .star-input__stars label { display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; }
}