/* ---------- listes */
.item { display:flex; gap:12px; align-items:center; padding:10px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); margin-bottom:10px }
.thumb { width:54px; height:72px; flex:none; border-radius:9px; background:var(--surface2) center/cover;
  box-shadow:0 0 0 2px var(--t); overflow:hidden; cursor:pointer }
.thumb img { width:100%; height:100%; object-fit:cover; display:block }
.item .info { flex:1; min-width:0 }
.item .ttl { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.trade { padding:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:12px }
.trade .sides { display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:start; margin:10px 0 }
.trade .side { display:flex; flex-wrap:wrap; gap:6px }
.trade .arrow { align-self:center; color:var(--muted); font-size:20px }
.status { font-size:12px; font-weight:700; padding:2px 8px; border-radius:6px; background:var(--surface2) }
.status.pending { background:color-mix(in srgb, var(--accent) 20%, transparent); color:var(--accent) }
.status.accepted { background:color-mix(in srgb, var(--good) 20%, transparent); color:var(--good) }
.status.declined, .status.cancelled { color:var(--muted) }
.pick { outline:3px solid var(--accent); outline-offset:2px }
.steps { display:flex; gap:6px; margin:6px 0 14px }
.steps span { flex:1; height:4px; border-radius:2px; background:var(--line) }
.steps span.on { background:var(--accent) }
.stat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px }
.stat b { display:block; font-size:22px; font-variant-numeric:tabular-nums }
.tierbar { display:flex; height:10px; border-radius:5px; overflow:hidden; background:var(--surface2); margin:8px 0 }
.tierbar i { display:block; height:100% }
table.rules { width:100%; border-collapse:collapse; font-size:14px }
table.rules td { padding:6px 0; border-bottom:1px solid var(--line) }
table.rules td:last-child { text-align:right; font-variant-numeric:tabular-nums }

/* Catalogue des effets de cartes */
.effects { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:14px }
.effect { display:flex; flex-direction:column; gap:3px; text-align:left; min-width:0 }
.effect-preview { display:block; width:100%; margin:0 0 6px; padding:0; border:0; background:none; cursor:pointer; text-align:inherit }
.effect-preview:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:14px }
.effect-preview .card { pointer-events:none }
.effect .linkbtn { margin-top:4px }
.chip.ghost { background:transparent; display:inline-flex; align-items:center; gap:5px }
.chip .ico-svg { margin:0; vertical-align:-2px }

/* marché filtré sur une carte : la carte en tête, un × pour revenir à tout le marché */
.mkcard { display:flex; align-items:center; gap:12px; margin:12px 0 16px; padding:10px 12px; border-radius:14px;
  background:var(--surface); border:1px solid var(--line) }
.mkcard .info { flex:1; min-width:0 }
.mkcard .ttl { font-weight:700; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden }
.mkcard .mksell { display:inline-block; margin-top:3px; font-size:13px; font-weight:600; color:var(--accent); text-decoration:none }
.mkcard .mkclear { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:var(--muted);
  border:1px solid var(--line) }
.mkcard .mkclear .ico-svg { margin:0 }