/* UI kit-specific styles. Imports tokens from colors_and_type.css */

* { box-sizing: border-box; }
body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  background: #000;
  position: relative;
  overflow-x: hidden;
}
.app { position: relative; z-index: 1; }
@keyframes bgFloatA {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(160px, 80px) scale(1.10); }
  100% { transform: translate(60px, 220px) scale(0.95); }
}
@keyframes bgFloatB {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-180px, -100px) scale(1.08); }
  100% { transform: translate(-80px, -240px) scale(0.92); }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
}
button { font-family: inherit; }
a { color: inherit; text-decoration: none; }

.app { height: 100vh; display: flex; flex-direction: column; min-height: 0; }

/* ─── Header ─── */
.hdr { position: sticky; top: 0; z-index: 50; background: rgba(0,0,0,0.85); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.container { width: 100%; max-width: 1920px; margin: 0 auto; padding: 0 12px; }
.hdr-inner { display: flex; align-items: center; gap: 18px; height: 60px; padding: 0 16px; }
.hdr-logo { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 900; font-size: 16px; letter-spacing: -0.03em; line-height: 1; }
.hdr-logo .mark { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: linear-gradient(180deg, #14101A 0%, #08060C 100%); border: 1px solid rgba(200,166,255,0.28); }
.hdr-logo .mark img { width: 16px; height: 16px; filter: invert(1) hue-rotate(180deg) drop-shadow(0 0 4px rgba(200,166,255,0.45)); }
.hdr-logo .word { background: linear-gradient(110deg, #FFFFFF 0%, #DCC2FF 45%, #E8C28B 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hdr-logo .tld { color: #E8C28B; font-weight: 800; font-size: 12px; }
.hdr-nav { display: flex; gap: 2px; flex: 1; align-items: center; }
.hdr-nav a {
  padding: 6px 12px;
  font-size: 13px; font-weight: var(--fw-semibold);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.hdr-nav a:hover { color: var(--accent); background: rgba(200,166,255,0.10); }
.hdr-nav a.active { color: var(--accent); background: var(--accent-soft); }
.hdr-nav a.active:hover { background: rgba(200,166,255,0.18); }
.hdr-bal { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 12px; }
.hdr-bal .lbl { color: var(--text-muted); }
.hdr-bal .v { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.hdr-tradeurl { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 11px; cursor: pointer; transition: 0.15s; background: rgba(255,255,255,0.02); font: inherit; }
.hdr-tradeurl:hover { border-color: rgba(200,166,255,0.45); background: rgba(200,166,255,0.06); }
.hdr-tradeurl .lbl { color: var(--text-muted); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; flex-shrink: 0; }
.hdr-tradeurl .v { color: #fff; font-family: var(--font-mono); font-variant-numeric: tabular-nums; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr-tradeurl-input {
  flex: 1; min-width: 0;
  background: none; border: none; outline: none;
  color: #fff; font-family: var(--font-mono); font-size: 11px;
  padding: 4px 0;
}
.hdr-tradeurl-input::placeholder { color: var(--text-muted); }
.hdr-tradeurl-edit {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px 3px 6px; border-radius: 5px;
  background: rgba(200,166,255,0.10);
  color: var(--accent);
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  flex-shrink: 0;
  transition: 140ms;
}
.hdr-tradeurl:hover .hdr-tradeurl-edit { background: var(--accent); color: #1a0e2e; }
.hdr-user { display: flex; align-items: center; gap: 8px; padding: 3px 12px 3px 3px; border: 1px solid var(--border); border-radius: 100px; cursor: pointer; text-decoration: none; color: inherit; }
.hdr-avatar { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg,#C7A6FF,#7ED6FF); }
.hdr-user .name { font-size: 12px; }

/* ─── Workbench layout ─── */
main { flex: 1; min-height: 0; padding: 12px 8px; display: flex; }
.workbench {
  display: grid;
  grid-template-columns: minmax(0, 3fr) 280px minmax(0, 6fr);
  gap: 14px;
  width: 100%;
  min-height: 0;
  align-items: stretch;
}
.workbench > .invp { min-height: 0; }
.workbench > .cp { min-height: 0; height: 100%; }

.invp { max-height: 100%; overflow: hidden; }
.invp-scroll { flex: 1; overflow-y: auto; padding: 2px 12px 14px 2px; min-height: 0; }
.invp-error {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px; padding: 32px 18px;
  border: 1px dashed rgba(232,145,145,0.30);
  background: rgba(232,145,145,0.04);
  border-radius: 10px;
  color: var(--text-secondary);
}
.invp-error-icon { color: #E89191; }
.invp-error-title { font-family: var(--font-display); font-size: 13px; font-weight: 800; color: #fff; letter-spacing: 0.02em; }
.invp-error-msg { font-size: 12px; color: var(--text-muted); line-height: 1.5; max-width: 36ch; }
.invp-error-retry {
  margin-top: 4px; padding: 6px 14px;
  background: rgba(232,145,145,0.10);
  color: #E89191;
  border: 1px solid rgba(232,145,145,0.45);
  border-radius: 6px;
  font: inherit; font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer; transition: 140ms;
}
.invp-error-retry:hover { background: rgba(232,145,145,0.20); border-color: rgba(232,145,145,0.70); color: #fff; }
.invp-empty {
  text-align: center; padding: 28px 18px;
  color: var(--text-muted); font-size: 12px; line-height: 1.5;
  border: 1px dashed var(--border); border-radius: 8px;
  background: rgba(255,255,255,0.015);
}
.invp-scroll::-webkit-scrollbar { width: 6px; }
.invp-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 3px; }
.invp-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }

/* ─── Inventory panel (left & right) ─── */
.invp { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.invp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px; }
.invp-head-l { display: flex; align-items: center; gap: 10px; }
.invp-label { font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: 0.10em; color: var(--text-muted); text-transform: uppercase; }
.invp-balance { padding: 3px 10px; border-radius: 100px; background: rgba(200,166,255,0.10); border: 1px solid rgba(200,166,255,0.32); color: var(--accent); font-family: var(--font-mono); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.invp-head-r { display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }
.invp-count { padding: 3px 10px; border: 1px solid var(--border); border-radius: 100px; background: rgba(255,255,255,0.02); }
.invp-age { color: var(--text-muted); }
.invp-refresh { background: none; border: 1px solid var(--border); border-radius: 100px; padding: 5px; color: var(--text-muted); cursor: pointer; display: flex; transition: 0.15s; }
.invp-refresh:hover { color: var(--accent); border-color: rgba(200,166,255,0.32); }
.invp-refresh svg { width: 12px; height: 12px; }

/* toolbar */
.invp-toolbar { display: flex; flex-direction: column; gap: 8px; }
.search-box { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; flex: 1; }
.search-box svg { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
.search-box input { background: none; border: none; color: #fff; font-size: 12px; flex: 1; outline: none; font-family: inherit; }
.search-box input::placeholder { color: var(--text-muted); }
.invp-sort { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 6px; color: var(--text-secondary); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; width: max-content; }
.invp-sort svg { width: 11px; height: 11px; }
.invp-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.chip { padding: 4px 12px; border-radius: 100px; background: transparent; border: 1px solid transparent; font-size: 11px; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: 0.15s; font-family: inherit; }
.chip:hover { color: var(--text-secondary); }
.chip.active { background: var(--accent-soft); color: var(--accent); border-color: rgba(200,166,255,0.32); }

/* grids — fixed 3-up (yours) / 6-up (bot), same tile size both sides */
.invp-grid { display: grid; gap: 6px; align-content: start; }
/* Column counts are picked so cards render at the same size on both sides:
   the bot panel (6fr) gets twice as many columns as the user panel (3fr). */
.invp-grid--give { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.invp-grid--recv { grid-template-columns: repeat(8, minmax(0, 1fr)); }

/* ─── Item card ─── */
.icard {
  position: relative; isolation: isolate;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 200ms cubic-bezier(.2,.7,.2,1), border-color 200ms, box-shadow 220ms;
}
/* Per-rarity / StatTrak background tints removed — cards are transparent now. */
.icard.is-locked .icard-img { filter: saturate(0.7) brightness(0.92); }
/* Bottom rarity bar removed — keeps cards visually neutral. */
/* corner notch removed per design — rarity color comes from name + bottom bar */
.icard > .icard-corner { display: none; }
.icard:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 14px 32px -10px rgba(0,0,0,0.85), 0 0 0 1px rgba(200,166,255,0.15);
}
.icard:hover .icard-actions { opacity: 1; transform: translateY(0); }
.icard--selected { border-color: rgba(255,255,255,0.20); box-shadow: 0 0 0 1px var(--rarity-solid), 0 12px 28px -10px rgba(0,0,0,0.7); }

.icard-img {
  aspect-ratio: 1.85/1;
  position: relative;
  background: transparent;
  overflow: hidden;
  margin: 18px 0 8px;
}
.icard-img::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 10px 10px;
  mask-image: radial-gradient(60% 60% at 50% 50%, #000 0%, transparent 80%);
}
.icard-img-lbl {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 8px; color: rgba(255,255,255,0.42);
  letter-spacing: 0.06em;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.7));
}
/* Real Steam item image inside the rarity-tinted frame */
.icard-img-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.7));
  pointer-events: none;
  user-select: none;
}

/* sparkline overlay inside image */
.icard-spark {
  position: absolute; left: 4px; right: 4px; bottom: 3px; height: 18px; z-index: 2;
  pointer-events: none;
}
.icard-spark svg { width: 100%; height: 100%; overflow: visible; }
.icard-spark .ln  { fill: none; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.icard-spark .area { opacity: 0.35; }
.icard-spark.up .ln, .icard-spark.up .area-stop-0 { stroke: #8FD4A4; }
.icard-spark.dn .ln, .icard-spark.dn .area-stop-0 { stroke: #E89191; }
.icard-spark .delta-pill {
  position: absolute; right: 0; top: -1px;
  font-family: var(--font-mono); font-size: 8px; font-weight: 800;
  padding: 1px 4px; border-radius: 3px;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
  letter-spacing: 0.02em;
}
.icard-spark.up .delta-pill { color: #8FD4A4; }
.icard-spark.dn .delta-pill { color: #E89191; }

.icard-hd-badge {
  position: absolute; top: 5px; left: 5px; z-index: 4;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px;
  background: linear-gradient(180deg, rgba(220,60,60,0.95), rgba(160,30,30,0.95));
  border: 1px solid rgba(255,140,140,0.55);
  border-radius: 4px;
  color: #fff;
  font-family: var(--font-display); font-size: 7px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: 0 2px 6px -2px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,140,140,0.18);
  pointer-events: none;
}
.icard-hd-badge-lbl { color: #fff; }
.icard-hd-badge-pct { color: #fff; font-family: var(--font-mono); font-weight: 800; padding-left: 4px; border-left: 1px solid rgba(255,255,255,0.30); }

.icard-actions {
  /* Pinned to the very top-left of the card frame (not the image). */
  position: absolute; top: 4px; left: 4px; z-index: 6;
  display: flex; gap: 4px;
  opacity: 0; transform: translateY(-3px);
  transition: opacity 180ms, transform 200ms;
}
.icard-actions button {
  width: 26px; height: 26px; padding: 0;
  border-radius: 6px; cursor: pointer;
  background: linear-gradient(180deg, rgba(20,15,25,0.55), rgba(8,6,12,0.55));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.78);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px -4px rgba(0,0,0,0.6);
  transition: all 150ms;
}
.icard-actions button:hover {
  background: linear-gradient(180deg, rgba(200,166,255,0.32), rgba(200,166,255,0.14));
  border-color: rgba(200,166,255,0.65);
  color: #fff;
  transform: translateY(-1px);
}
.icard-actions button:disabled { opacity: 0.35; cursor: not-allowed; }
.icard-actions svg { width: 13px; height: 13px; stroke-width: 2; }

.icard-tag {
  position: absolute; bottom: 5px; left: 5px; z-index: 2;
  font-family: var(--font-mono); font-size: 7px; font-weight: 800; letter-spacing: 0.04em;
  padding: 1px 4px; border-radius: 2px;
}
.icard-tag.stat { background: rgba(232,194,139,0.22); color: #E8C28B; border: 1px solid rgba(232,194,139,0.45); }

/* Sticker / charm rail — stacked vertically along the right edge of the
   image. Larger dots (18px) so they're readable; on cards with 5+ items the
   wrap-reverse pushes the overflow into a 2nd column to the LEFT inside the
   image area instead of getting clipped by overflow:hidden. */
.icard-rail {
  position: absolute;
  top: 0; right: 3px; bottom: 0;
  display: flex; flex-direction: column;
  flex-wrap: wrap-reverse;
  justify-content: flex-start;
  align-items: flex-end;
  align-content: flex-end;
  gap: 2px;
  padding: 4px 0;
  z-index: 3;
  pointer-events: none;
  max-width: 60%; /* allow up to ~3 columns of stickers on heavy cards */
}
.icard-rail-dot {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 7px; font-weight: 800; letter-spacing: 0.02em;
  color: #F2D27A;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  pointer-events: auto;
}
.icard-rail-dot img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
.icard-rail-dot.charm {
  color: #ff9b9b;
  background: transparent;
  border: 0;
  border-radius: 0;
  margin-top: 2px;
}

.icard-lock-inline {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  color: #E8C28B; letter-spacing: 0.01em;
  margin-top: 2px;
}
.icard-lock-inline svg { width: 9px; height: 9px; opacity: 0.85; }

/* Trade-lock corner badge — pinned to the very top-right of the card frame so
   the icon + countdown sit opposite the action buttons (top-left). */
.icard-lock-corner {
  position: absolute; top: 4px; right: 4px; z-index: 6;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px;
  background: rgba(0,0,0,0.72);
  border: 1px solid var(--accent-hover);
  border-radius: 4px;
  color: var(--accent-hover);
  font-family: var(--font-mono); font-size: 9px; font-weight: 800;
  letter-spacing: 0.04em;
  backdrop-filter: blur(6px);
  pointer-events: none;
  box-shadow: 0 2px 6px -2px rgba(0,0,0,0.7);
}
.icard-lock-corner svg { width: 9px; height: 9px; opacity: 0.95; }
.icard-lock-corner-time { font-variant-numeric: tabular-nums; }

.icard-lock {
  position: absolute; top: 4px; left: 4px; z-index: 2;
  display: none; align-items: center; gap: 2px;
  padding: 1px 4px;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
  border-radius: 3px;
  font-family: var(--font-mono); font-size: 8px; font-weight: 700;
  color: #E8C28B;
}
.icard-lock svg { width: 8px; height: 8px; }

/* card body — pinned to the bottom of the card so the price + wear rating sit
   at the bottom regardless of how many stickers are above. */
.icard-body { padding: 4px 6px 5px; display: flex; flex-direction: column; gap: 1px; margin-top: auto; }
/* Phase chip + skin name share a single line. The phase is always visible;
   the name fades in on hover. */
.icard-name-row { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.icard-name {
  flex: 1; min-width: 0;
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  color: var(--rarity-solid, #fff); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  /* Name is hidden until hover so the card art reads cleanly at-a-glance. */
  opacity: 0; transition: opacity 160ms;
}

/* Doppler phase / gem label — text-only with a gradient that mirrors the
   in-game phase color. Always visible, sits inline before the skin name. */
.icard-phase {
  flex-shrink: 0;
  font-family: var(--font-display); font-size: 10px; font-weight: 800;
  letter-spacing: 0.03em; line-height: 1.2;
  white-space: nowrap;
  /* Background gradient is clipped to the text glyphs. */
  background: linear-gradient(135deg, #cccccc, #888888);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
/* Gradients tuned to the actual blade colors of each Doppler phase / gem.
   Each rule is one Doppler paint index — edit colors here to retune. */
.icard-phase[data-paint="415"] /* Ruby — solid red gem */
  { background: linear-gradient(135deg, #ff4860 0%, #d11030 50%, #6e0014 100%); -webkit-background-clip: text; background-clip: text; }
.icard-phase[data-paint="416"] /* Sapphire — solid blue gem */
  { background: linear-gradient(135deg, #5cb0ff 0%, #1a52e6 50%, #0a1f7a 100%); -webkit-background-clip: text; background-clip: text; }
.icard-phase[data-paint="417"] /* Black Pearl — black with rainbow shimmer */
  { background: linear-gradient(135deg, #ffffff 0%, #b0b8d8 12%, #c890ff 30%, #80c4ff 50%, #4d4d6a 75%, #0a0a0e 100%); -webkit-background-clip: text; background-clip: text; }
.icard-phase[data-paint="418"] /* Phase 1 — pink + teal/cyan accents */
  { background: linear-gradient(135deg, #ff66b8 0%, #ff8acc 25%, #4cd0e8 65%, #2090b0 100%); -webkit-background-clip: text; background-clip: text; }
.icard-phase[data-paint="419"] /* Phase 2 — deep pink/magenta with darker tip */
  { background: linear-gradient(135deg, #ff5874 0%, #b8264a 50%, #5a0a22 100%); -webkit-background-clip: text; background-clip: text; }
.icard-phase[data-paint="420"] /* Phase 3 — dark navy with subtle blue glow */
  { background: linear-gradient(135deg, #5e8acc 0%, #1e3a72 50%, #0a1428 100%); -webkit-background-clip: text; background-clip: text; }
.icard-phase[data-paint="421"] /* Phase 4 — dark teal with pink edge */
  { background: linear-gradient(135deg, #ff70a4 0%, #36707e 55%, #0a1620 100%); -webkit-background-clip: text; background-clip: text; }
.icard-phase[data-paint="568"] /* Emerald — solid bright green gem */
  { background: linear-gradient(135deg, #6cff96 0%, #1ec060 50%, #084c1c 100%); -webkit-background-clip: text; background-clip: text; }
.icard-phase[data-paint="569"] /* Gamma Phase 1 — bright green */
  { background: linear-gradient(135deg, #98ff8a 0%, #38c44e 50%, #0a4218 100%); -webkit-background-clip: text; background-clip: text; }
.icard-phase[data-paint="570"] /* Gamma Phase 2 — dark green + teal */
  { background: linear-gradient(135deg, #58e2a4 0%, #1a8862 50%, #0a3024 100%); -webkit-background-clip: text; background-clip: text; }
.icard-phase[data-paint="571"] /* Gamma Phase 3 — bright lime */
  { background: linear-gradient(135deg, #d4ff5c 0%, #80b020 50%, #2a4014 100%); -webkit-background-clip: text; background-clip: text; }
.icard-phase[data-paint="572"] /* Gamma Phase 4 — yellow-green */
  { background: linear-gradient(135deg, #ffe25c 0%, #a4ac28 50%, #4c5418 100%); -webkit-background-clip: text; background-clip: text; }
.icard:hover .icard-name,
.icard--selected .icard-name { opacity: 1; }

/* Collection label — same hover-only behavior as the name. */
.icard-collection {
  font-family: var(--font-mono); font-size: 8px; font-weight: 700;
  color: var(--text-muted); letter-spacing: 0.04em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  opacity: 0; transition: opacity 160ms;
}
.icard:hover .icard-collection,
.icard--selected .icard-collection { opacity: 1; }

/* Touch devices have no hover — keep the name + collection visible there. */
@media (hover: none) {
  .icard-name,
  .icard-collection { opacity: 1; }
}
/* Meta row: ST/SV badge → wear chip → float → pattern, all left-aligned and
   forced onto a single line so the row stays consistent across cards. Any
   overflow is clipped on the right (truncated) rather than wrapping below,
   which kept some cards' meta showing on two lines next to cards on one. */
.icard-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0;
  white-space: nowrap;
}
.icard-meta > * { flex-shrink: 0; }
/* No background boxes — meta tags are colored text only. */
.icard-wear {
  font-family: var(--font-mono); font-weight: 800;
  font-size: 9px; letter-spacing: 0.04em; line-height: 1.5;
  color: var(--accent-hover);
  background: transparent; padding: 0;
}
.icard-quality {
  font-family: var(--font-mono); font-weight: 800;
  font-size: 9px; letter-spacing: 0.04em; line-height: 1.5;
  background: transparent; padding: 0;
}
.icard-quality--st { color: #ff5555; }
.icard-quality--sv { color: #ffb14a; }
/* All wear tiers share the same darker-purple text color. */
.wear-fn,
.wear-mw,
.wear-ft,
.wear-ww,
.wear-bs { color: var(--accent-hover); background: transparent; }
.icard-float-num { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.icard-pattern-num { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; opacity: 0.95; }

.icard-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 4px; margin-top: 0; }
.icard-price {
  font-family: var(--font-display); font-weight: 900; font-size: 13px;
  color: var(--gold); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1;
}
.icard-price .cents { font-size: 9px; color: var(--gold); font-weight: 800; opacity: 0.85; }
.icard-delta { width: 28px; height: 12px; }
.icard-delta svg { width: 100%; height: 100%; overflow: visible; }
.icard-delta.up { color: #8FD4A4; }
.icard-delta.dn { color: #E89191; }

.icard-floatbar {
  position: relative; height: 2px; border-radius: 100px; margin-top: 2px;
  background: linear-gradient(90deg,
    #4A6F8E 0%, #4A6F8E 7%,
    #5B8E5B 7%,  #5B8E5B 15%,
    #B5A24A 15%, #B5A24A 38%,
    #B57A4A 38%, #B57A4A 45%,
    #8E4A4A 45%, #8E4A4A 100%);
}
.icard-float-marker {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 5px; height: 5px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 1px var(--rarity-strong), 0 0 3px rgba(0,0,0,0.6);
}

/* hide delta-svg block (replaced by spark inside image) */
.icard-delta { display: none; }

/* ─── Center panel header bar ─── */
.cp-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 0 6px; margin-bottom: 2px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cp-bar-title {
  font-family: var(--font-display); font-size: 10px; font-weight: 800;
  letter-spacing: 0.10em; color: var(--accent); text-transform: uppercase;
}
.cp-bar-x {
  width: 22px; height: 22px; padding: 0;
  background: none; border: 1px solid transparent; border-radius: 4px;
  color: var(--text-muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 140ms;
}
.cp-bar-x:hover { color: #fff; background: rgba(255,255,255,0.06); border-color: var(--border); }
.cp-bar-x svg { width: 13px; height: 13px; }

/* ─── Re-open tab when console is closed ─── */
.cp-reopen {
  position: relative;
  width: 32px; min-height: 100%;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 0;
  transition: all 160ms;
}
.cp-reopen:hover { background: rgba(200,166,255,0.08); border-color: rgba(200,166,255,0.40); color: var(--accent); }
.cp-reopen svg { width: 12px; height: 12px; transform: rotate(180deg); }
.cp-reopen-lbl {
  font-family: var(--font-display); font-size: 9px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  writing-mode: vertical-rl; transform: rotate(180deg);
}
.cp-reopen-badge {
  font-family: var(--font-mono); font-size: 9px; font-weight: 800;
  background: var(--accent); color: #1a0e2e;
  padding: 2px 6px; border-radius: 100px;
  min-width: 18px; text-align: center;
}

/* ─── Center panel ─── */
.cp {
  background: #000;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  font-size: 11px;
}
.cp > * { min-width: 0; }
.cp::-webkit-scrollbar { width: 4px; }
.cp::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

.cp-acc { border-bottom: 1px solid var(--border); padding-bottom: 4px; flex-shrink: 0; }
.cp-acc-l {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 4px 0;
  background: none; border: none; color: var(--text-muted);
  font-family: var(--font-display); font-size: 10px; font-weight: 800; letter-spacing: 0.10em;
  text-transform: uppercase; cursor: pointer;
}
.cp-acc-l svg { width: 12px; height: 12px; }
.cp-acc.open .cp-acc-l { color: var(--accent); }
.cp-acc-content { padding: 6px 0 4px; display: flex; flex-direction: column; gap: 6px; }
.cp-acc-sub { display: flex; flex-direction: column; gap: 2px; }
.cp-range { display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--text-muted); }
.cp-range input { flex: 1; padding: 5px 8px; background: #0a070e; border: 1px solid var(--border); border-radius: 5px; color: #fff; font: inherit; font-size: 11px; font-family: var(--font-mono); }
.cp-check { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-secondary); cursor: pointer; padding: 2px 0; }
.cp-check input { width: 13px; height: 13px; accent-color: var(--accent); }

/* Trade-lock max-days slider */
.cp-lock-range { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 2px; }
.cp-lock-range-label { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); }
.cp-lock-range-value { color: var(--accent); font-family: var(--font-mono); font-weight: 700; }
.cp-lock-range input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 100px;
  background: rgba(255,255,255,0.08); cursor: pointer;
}
.cp-lock-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.cp-lock-range input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent);
  cursor: pointer;
}
.cp-lock-range-ticks { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); }

/* tradelock toggle pill */
.cp-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; margin-top: 4px; align-self: flex-start;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border); border-radius: 100px;
  color: var(--text-muted); font: inherit; font-size: 11px; font-weight: 600;
  cursor: pointer; transition: 160ms;
}
.cp-toggle:hover { color: #fff; border-color: rgba(255,255,255,0.18); }
.cp-toggle-dot {
  width: 22px; height: 12px; border-radius: 100px;
  background: rgba(255,255,255,0.10);
  position: relative; flex-shrink: 0;
  transition: 160ms;
}
.cp-toggle-dot::after {
  content: ''; position: absolute; top: 1px; left: 1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff;
  transition: 160ms;
}
.cp-toggle.on { color: var(--accent); border-color: rgba(200,166,255,0.50); background: rgba(200,166,255,0.08); }
.cp-toggle.on .cp-toggle-dot { background: var(--accent); }
.cp-toggle.on .cp-toggle-dot::after { left: 11px; background: #1a0e2e; }

/* price range slider */
.cp-prs { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 6px; }
.cp-prs-vals { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.cp-prs-track { position: relative; height: 18px; }
.cp-prs-track::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  height: 3px; border-radius: 100px; background: rgba(255,255,255,0.08);
}
.cp-prs-fill {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 3px; border-radius: 100px; background: var(--accent);
}
.cp-prs-track input[type="range"] {
  position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 18px;
  background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
  margin: 0;
}
.cp-prs-track input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent);
  cursor: pointer; pointer-events: auto;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.cp-prs-track input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent);
  cursor: pointer; pointer-events: auto;
}
.cp-prs-track input[type="range"]::-webkit-slider-runnable-track { background: none; }
.cp-prs-track input[type="range"]::-moz-range-track { background: none; }

/* recent trades close + reopen */
.cp-recent-head { display: flex; align-items: center; justify-content: space-between; }
.cp-recent-x {
  width: 20px; height: 20px; padding: 0;
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 16px; line-height: 1; border-radius: 4px;
}
.cp-recent-x:hover { color: #fff; background: rgba(255,255,255,0.06); }
.cp-recent-reopen {
  margin-top: 6px; padding: 8px 10px;
  background: rgba(255,255,255,0.02); border: 1px dashed var(--border); border-radius: 6px;
  color: var(--text-muted); font: inherit; font-size: 11px; font-weight: 600;
  cursor: pointer; transition: 140ms;
  flex-shrink: 0;
}
.cp-recent-reopen:hover { color: var(--accent); border-color: rgba(200,166,255,0.40); background: rgba(200,166,255,0.06); }

/* trade rows */
.cp-section { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.cp-section-head { font-family: var(--font-display); font-size: 10px; font-weight: 800; letter-spacing: 0.10em; color: var(--text-muted); text-transform: uppercase; padding: 2px 0 0; }
.cp-empty {
  padding: 10px 10px; text-align: left;
  border: 1px dashed var(--border); border-radius: 6px;
  color: var(--text-muted); font-size: 10px; line-height: 1.4;
}
.cp-section-list { display: flex; flex-direction: column; gap: 4px; }
.cp-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px;
  background: rgba(255,255,255,0.02); border: 1px solid var(--border);
}
.cp-row-th { width: 32px; height: 24px; border-left: 3px solid; border-radius: 2px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cp-row-th img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cp-row-meta { flex: 1; min-width: 0; }
.cp-row-name { font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-row-wear { font-size: 9px; font-family: var(--font-mono); color: var(--text-muted); }
.cp-row-p { font-size: 11px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.cp-row-x { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
.cp-row-x:hover { color: #E89191; }

/* send button */
.cp-send.cp-send--top { margin-top: 0; margin-bottom: 4px; }
.cp-send {
  width: 100%; padding: 10px 14px; margin-top: 2px;
  background: var(--accent); color: #fff;
  border: 1px solid rgba(200,166,255,0.55); border-radius: 6px;
  font: inherit; font-size: 10px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; cursor: pointer;
  transition: background 180ms, transform 180ms;
}
.cp-send:hover:not(:disabled) { background: var(--accent-hover); transform: translateY(-1px); }
.cp-send:disabled { opacity: 0.32; cursor: not-allowed; background: rgba(200,166,255,0.45); }
.cp-fee { text-align: center; font-size: 10px; color: var(--text-muted); margin-top: -2px; }

/* stat lines */
.cp-stats { display: flex; flex-direction: column; gap: 3px; padding: 6px 0; border-top: 1px solid var(--border); flex-shrink: 0; }
.cp-stat-line { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); }
.cp-stat-line .v { color: #fff; font-variant-numeric: tabular-nums; font-weight: 700; }
.cp-stat-line .v.gold { color: var(--gold); }
.cp-stat-line .v.v-low { color: #E89191; }
.cp-stat-after { padding-top: 4px; margin-top: 2px; border-top: 1px dashed rgba(255,255,255,0.06); font-weight: 600; }
.cp-stat-after .v { font-size: 11px; }

/* recent trades — stays inside cp, scrolls only this section */
.cp-recent { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; border-top: 1px solid var(--border); flex: 1 1 auto; min-height: 0; overflow: hidden; }
.cp-recent-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; padding-right: 4px; min-height: 0; }
.cp-recent-list::-webkit-scrollbar { width: 4px; }
.cp-recent-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
.cp-recent-head { font-family: var(--font-display); font-size: 10px; font-weight: 800; letter-spacing: 0.10em; color: var(--text-muted); text-transform: uppercase; flex-shrink: 0; }
.cp-recent-row { padding: 7px 9px; border: 1px solid var(--border); border-radius: 7px; background: rgba(255,255,255,0.015); display: flex; flex-direction: column; gap: 4px; }
.cp-recent-pair { display: flex; flex-direction: column; gap: 8px; padding: 6px 0; border-top: 1px dashed rgba(255,255,255,0.05); border-bottom: 1px dashed rgba(255,255,255,0.05); }
.cp-recent-leg { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; column-gap: 6px; row-gap: 1px; align-items: center; min-width: 0; }
.cp-recent-leg-lbl { grid-column: 2 / 4; font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-muted); text-transform: uppercase; }
.cp-recent-leg-skin { display: contents; }
.cp-recent-leg-thumb { width: 32px; height: 24px; border-radius: 3px; flex-shrink: 0; background: linear-gradient(135deg, var(--leg-color, #2a1a3a) 0%, #0a0612 100%); border: 1px solid rgba(255,255,255,0.06); position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; }
.cp-recent-leg-thumb::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--leg-color, #C7A6FF); z-index: 1; }
.cp-recent-leg-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; position: relative; z-index: 2; }
.cp-recent-leg-name { font-size: 10px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cp-recent-leg-v { font-size: 11px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-recent-meta { display: flex; flex-direction: column; gap: 2px; font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); min-width: 0; }
.cp-recent-meta > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-recent-meta b { color: var(--text-secondary); font-weight: 700; }
.cp-recent-id { font-family: var(--font-mono); font-size: 8px; color: rgba(255,255,255,0.30); letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cp-recent-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.cp-recent-top > * { min-width: 0; }
.cp-recent-when { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.cp-recent-badge { font-family: var(--font-mono); font-size: 8px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; background: rgba(143,212,164,0.12); color: #8FD4A4; border: 1px solid rgba(143,212,164,0.32); }
.cp-recent-line { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-secondary); }
.cp-recent-line .v { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.cp-recent-thumbs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cp-recent-thumb { width: 28px; height: 22px; border-radius: 4px; background: linear-gradient(135deg, #2a1a3a 0%, #0a0612 100%); border: 1px solid rgba(255,255,255,0.06); }
.cp-recent-delta { font-family: var(--font-mono); font-size: 10px; font-weight: 700; padding: 4px 6px; border-radius: 4px; text-align: center; }
.cp-recent-delta.up { background: rgba(143,212,164,0.10); color: #8FD4A4; }
.cp-recent-delta.dn { background: rgba(255,255,255,0.04); color: var(--text-muted); }

/* ─── Buttons (used in modal) ─── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 18px; border-radius: 6px; border: 1px solid transparent; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-ghost { background: transparent; color: var(--text-secondary); border-color: var(--border); }

/* ─── Footer ─── */
.ftr {
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,0.20);
  padding: 18px 0;
  margin-top: 40px;
}
.ftr-inner {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
}
.ftr-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 14px; font-weight: 800;
  color: #fff; letter-spacing: 0.02em;
}
.ftr-brand-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px rgba(200,166,255,0.6);
}
.ftr-meta { font-size: 11px; color: var(--text-muted); letter-spacing: 0.01em; }

/* Contact modal */
.contact-body { display: flex; flex-direction: column; gap: 14px; }
.contact-lede { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.contact-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 14px; border: 1px solid var(--border); border-radius: 8px;
  background: linear-gradient(180deg, rgba(88,101,242,0.10), rgba(88,101,242,0.02));
}
.contact-card-icon {
  width: 40px; height: 40px; border-radius: 8px;
  display: grid; place-items: center;
  background: #5865F2; color: #fff;
}
.contact-card-title { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: #fff; }
.contact-card-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.contact-card-link {
  font-family: var(--font-mono); font-size: 12px; color: var(--accent);
  padding: 6px 10px; border: 1px dashed rgba(200,166,255,0.40); border-radius: 6px;
  background: rgba(200,166,255,0.06);
}
.contact-copy {
  padding: 9px 12px; font: inherit; font-size: 12px; font-weight: 600;
  background: rgba(255,255,255,0.04); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
  transition: 140ms;
}
.contact-copy:hover { color: #fff; border-color: var(--accent); background: rgba(200,166,255,0.06); }
.ftr-links { display: flex; gap: 22px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.ftr-links a { color: var(--text-muted); cursor: pointer; transition: color 140ms; }
.ftr-links a:hover { color: var(--accent); }

/* ─── Modal ─── */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 14px; padding: 22px; max-width: 420px; width: 100%; display: flex; flex-direction: column; gap: 14px; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; }
.modal-head h2 { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.modal-head button { background: none; border: none; color: var(--text-muted); font-size: 22px; cursor: pointer; line-height: 1; }
.modal-body { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 0; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }

/* ─── Error modal (loud, blocking) ─── */
.modal-backdrop--error { background: rgba(60,8,8,0.55); backdrop-filter: blur(10px); z-index: 300; }
.modal-card--error {
  text-align: center;
  background: linear-gradient(180deg, #1d0b10 0%, #0d0608 100%);
  border: 1px solid rgba(232,145,145,0.45);
  box-shadow: 0 24px 60px -12px rgba(0,0,0,0.85), 0 0 0 1px rgba(232,145,145,0.15);
  animation: error-modal-in 220ms cubic-bezier(.2,.8,.25,1);
  max-width: 460px;
  padding: 26px 24px;
}
@keyframes error-modal-in {
  from { transform: translateY(8px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.error-modal-icon {
  width: 64px; height: 64px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(232,145,145,0.25), rgba(232,145,145,0.08) 70%);
  border: 1px solid rgba(232,145,145,0.55);
  color: #E89191;
  box-shadow: 0 0 18px -4px rgba(232,145,145,0.45);
}
.modal-head--error { justify-content: center; padding-top: 4px; }
.modal-head--error h2 { color: #fff; font-size: 22px; }
.modal-body--error { text-align: center; color: rgba(255,255,255,0.82); font-size: 14px; padding: 0 4px; }
.modal-actions--error { justify-content: center; margin-top: 8px; }
.btn-error {
  background: linear-gradient(180deg, #c94a4a 0%, #8e2828 100%);
  border-color: rgba(255,255,255,0.18);
  color: #fff;
  min-width: 120px;
  padding: 10px 20px;
  font-weight: 700;
}
.btn-error:hover { background: linear-gradient(180deg, #d85454 0%, #a02f2f 100%); }

/* ─── Toast ─── */
.toast { position: fixed; bottom: 24px; right: 24px; background: #14111a; border: 1px solid var(--border); border-left: 3px solid #8FD4A4; border-radius: 10px; padding: 12px 16px; display: flex; gap: 10px; align-items: center; z-index: 200; }
.toast .ic { color: #8FD4A4; }
.toast .msg { font-size: 12px; }
.toast .msg b { font-weight: 700; color: #fff; }

/* ─── Trade URL modal body ─── */
.tu-modal { display: flex; flex-direction: column; gap: 14px; }
.tu-modal-desc { margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.55; }
.tu-modal-field { display: flex; flex-direction: column; gap: 6px; }
.tu-modal-field > span {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.10em; color: var(--text-muted); text-transform: uppercase;
}
.tu-modal-input {
  display: flex; align-items: stretch;
  background: #0a070e; border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; transition: border-color 160ms, box-shadow 160ms;
}
.tu-modal-input:focus-within { border-color: rgba(200,166,255,0.55); box-shadow: 0 0 0 3px rgba(200,166,255,0.12); }
.tu-modal-input.is-pasted { border-color: rgba(143,212,164,0.65); box-shadow: 0 0 0 3px rgba(143,212,164,0.16); }
.tu-modal-input input {
  flex: 1; min-width: 0;
  background: none; border: none; outline: none;
  padding: 11px 12px;
  color: #fff; font-family: var(--font-mono); font-size: 12px;
}
.tu-modal-input input::placeholder { color: rgba(255,255,255,0.25); }
.tu-modal-paste {
  padding: 0 14px; flex-shrink: 0;
  background: rgba(255,255,255,0.04); border: none; border-left: 1px solid var(--border);
  color: var(--text-secondary); font: inherit; font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase; cursor: pointer;
  transition: 140ms;
}
.tu-modal-paste:hover { background: rgba(200,166,255,0.10); color: var(--accent); }
.tu-modal-help { font-size: 11px; }
.tu-modal-help a { color: var(--accent); cursor: pointer; }
.tu-modal-help a:hover { text-decoration: underline; }

/* ─── Bottom-bar trade console ─── */
.cp.cp--bottom {
  display: flex; flex-direction: column; gap: 0;
  max-height: none; min-height: 0; height: auto; overflow: visible;
  padding: 0; background: transparent; border: none; border-radius: 0;
  position: relative;
}
.cp-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto auto;
  gap: 12px; align-items: stretch;
  padding: 10px 12px;
  background: rgba(12,10,16,0.85);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-height: 78px;
}
.cp-bar > * { min-width: 0; }
.cp-bar-tools { display: flex; flex-direction: column; gap: 6px; align-self: center; }
.cp-tool {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; background: rgba(255,255,255,0.03);
  border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-secondary); font: inherit; font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer; transition: all 140ms;
}
.cp-tool svg { width: 11px; height: 11px; }
.cp-tool:hover { color: #fff; border-color: rgba(255,255,255,0.18); }
.cp-tool.active { color: var(--accent); border-color: rgba(200,166,255,0.50); background: rgba(200,166,255,0.08); }

/* sides (Bot gives you / You give) */
.cph-side {
  display: flex; flex-direction: column; gap: 4px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.015);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 0; min-height: 0;
}
.cph-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cph-side-label { font-family: var(--font-display); font-size: 9px; font-weight: 800; letter-spacing: 0.10em; color: var(--text-muted); text-transform: uppercase; }
.cph-side-total { font-family: var(--font-mono); font-size: 12px; font-weight: 800; color: #fff; }
.cph-side--recv { border-left: 2px solid rgba(143,212,164,0.40); }
.cph-side--give { border-left: 2px solid rgba(232,194,139,0.40); }
.cph-empty { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); padding: 6px 0; }

.cph-chips {
  display: flex; gap: 6px; overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.cph-chips::-webkit-scrollbar { height: 5px; }
.cph-chips::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 3px; }
.cph-chip {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 4px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  position: relative;
}
.cph-chip-thumb { width: 26px; height: 20px; border-radius: 3px; flex-shrink: 0; border: 1px solid; }
.cph-chip-meta { display: flex; flex-direction: column; gap: 0; min-width: 0; max-width: 130px; }
.cph-chip-name { font-size: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cph-chip-price { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.cph-chip-x {
  width: 16px; height: 16px; padding: 0; flex-shrink: 0;
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 14px; line-height: 1;
}
.cph-chip-x:hover { color: #ff8888; }

.cph-arrow {
  align-self: center; color: var(--accent); opacity: 0.55;
  display: flex; align-items: center; justify-content: center;
}
.cph-arrow svg { width: 14px; height: 14px; }

/* stats (compact, vertical) */
.cp-bar-stats {
  display: flex; flex-direction: column; gap: 2px; justify-content: center;
  padding: 0 8px;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  font-size: 10px;
  min-width: 130px;
}
.cp-bar-stats .cp-stat-line { display: flex; justify-content: space-between; gap: 10px; color: var(--text-muted); font-family: var(--font-mono); }
.cp-bar-stats .cp-stat-line .v { color: var(--text-secondary); font-weight: 700; font-variant-numeric: tabular-nums; }
.cp-bar-stats .cp-stat-line .v.gold { color: var(--gold); }

/* send button group */
.cp-bar-send { display: flex; flex-direction: column; gap: 4px; align-self: center; align-items: stretch; }
.cp-bar-send .cp-send {
  width: auto; min-width: 200px; padding: 12px 22px;
  background: var(--accent); color: #fff;
  border: 1px solid rgba(200,166,255,0.55); border-radius: 8px;
  font: inherit; font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; cursor: pointer;
  margin: 0;
  transition: all 160ms;
}
.cp-bar-send .cp-send:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgba(200,166,255,0.55); }
.cp-bar-send .cp-send:disabled { opacity: 0.40; cursor: not-allowed; }
.cp-bar-send .cp-fee { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); text-align: center; }

/* popovers (filter / recent) */
.cp-pop {
  position: absolute; left: 12px; bottom: calc(100% + 8px);
  width: 360px; max-height: 360px;
  background: #0c0a14; border: 1px solid var(--border); border-radius: 12px;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.85);
  z-index: 30;
  overflow: hidden;
}
.cp-pop-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: 0.10em;
  color: var(--text-muted); text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.cp-pop-head button {
  width: 22px; height: 22px; padding: 0;
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 18px; line-height: 1;
}
.cp-pop-head button:hover { color: #fff; }
.cp-pop-body { padding: 8px 12px; overflow-y: auto; min-height: 0; flex: 1; }
.cp-pop-body--recent { padding: 8px; }
.cp-pop-body--recent .cp-recent-head { display: none; }

/* ─── Mobile tab bar (hidden on desktop) ───────────── */
.mobile-tabs { display: none; }
.mobile-tab {
  flex: 1; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font: inherit; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; transition: 140ms;
}
.mobile-tab:hover { color: var(--text-secondary); border-color: rgba(255,255,255,0.14); }
.mobile-tab.active {
  color: var(--accent);
  background: rgba(200,166,255,0.08);
  border-color: rgba(200,166,255,0.40);
}
.mobile-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 16px; padding: 0 5px;
  background: var(--accent); color: #1a0e2e;
  border-radius: 100px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 800;
}

/* ─── Responsive ────────────────────────────────────── */

/* Wide-but-not-huge: shrink both grids together so cards stay the same size on each side.
   Workbench is 3fr / 6fr (1:2), so bot must always have 2× the columns of user. */
@media (max-width: 1400px) {
  .invp-grid--recv { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .invp-grid--give { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .workbench { grid-template-columns: minmax(0, 3fr) 260px minmax(0, 6fr); }
}
@media (max-width: 1200px) {
  .invp-grid--recv { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .invp-grid--give { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workbench { grid-template-columns: minmax(0, 1fr) 240px minmax(0, 2fr); gap: 10px; }
  .hdr-tradeurl .v { max-width: 120px; }
}

/* Tablet & below: drop the fixed-viewport layout, switch to tab view */
@media (max-width: 1024px) {
  body { height: auto; min-height: 100vh; overflow: auto; }
  .app { height: auto; min-height: 100vh; }
  /* Zero horizontal padding so the bot grid is edge-to-edge on mobile —
     every pixel of width goes to the cards. Tab bar still has a tiny
     inset so the pills aren't kissed up against the screen edge. */
  main { flex: 0 0 auto; padding: 0; display: block; }

  .mobile-tabs {
    display: flex; gap: 6px;
    width: 100%; margin: 6px 0;
    padding: 0 6px;
  }

  /* The workbench itself fills the visible viewport — header (~52px) +
     tab bar (~46px) + tab margins (~12px) ≈ 110px reserved. dvh tracks the
     URL bar / keyboard so nothing is cut off below the fold. The visible
     child panel flexes to fill the workbench. */
  .workbench {
    display: flex;
    flex-direction: column;
    width: 100%; max-width: none; margin: 0; padding: 0;
    min-height: calc(100dvh - 110px);
  }
  .workbench > .invp,
  .workbench > .cp { width: 100%; min-height: 0; max-height: none; display: none; }
  .workbench.mobile-show-you  > .invp--give { display: flex; flex: 1; }
  .workbench.mobile-show-bot  > .invp--recv { display: flex; flex: 1; }
  .workbench.mobile-show-center > .cp        { display: flex; flex: 1; }
  .invp { max-height: none; overflow: visible; }
  .invp-scroll { max-height: none; overflow: visible; padding: 2px 4px 14px 2px; }
  .cp { max-height: none; overflow: visible; }
  /* Tabs are full-width — both grids match so cards are the same size. */
  .invp-grid--recv { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .invp-grid--give { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  /* Header: stacked rows on tablet/mobile.
     Row 1 — logo (left) + balance + user (right).
     Row 2 — full-width Trade URL pill.
     Row 3 — nav (horizontal scroll).                        */
  .hdr-inner {
    flex-wrap: wrap;
    height: auto;
    padding: 8px 12px;
    row-gap: 8px;
    column-gap: 8px;
    align-items: center;
  }
  .hdr-logo     { order: 1; flex-shrink: 0; }
  .hdr-bal      { order: 2; margin-left: auto; flex-shrink: 0; }
  .hdr-user     { order: 3; flex-shrink: 0; }
  .hdr-tradeurl { order: 4; flex-basis: 100%; max-width: 100%; min-width: 0; }
  .hdr-tradeurl .v { max-width: none; flex: 1; overflow: hidden; text-overflow: ellipsis; }
  .hdr-nav { order: 5; flex-basis: 100%; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .hdr-nav a { flex-shrink: 0; }
}

/* Mobile */
@media (max-width: 720px) {
  .invp-grid--recv { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .invp-grid--give { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .container { padding: 0 10px; }
  .hdr-logo { font-size: 14px; }
  .hdr-logo .mark { width: 24px; height: 24px; }
  .hdr-bal { font-size: 11px; padding: 4px 8px; }
  .hdr-tradeurl { padding: 5px 9px; font-size: 10px; }
  .hdr-tradeurl .lbl { display: none; }
  .hdr-tradeurl .v { font-size: 10px; }
  .hdr-user .name { display: none; }
  .modal-card { padding: 18px; border-radius: 12px; max-width: 95vw; }
  .modal-head h2 { font-size: 17px; }
  .toast { left: 12px; right: 12px; bottom: 12px; }

  /* Bottom-bar trade console — collapse to single column on phones */
  .cp-bar {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
    min-height: 0;
  }
  .cph-arrow { display: none; }
  .cp-bar-stats { border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; min-width: 0; }
  .cp-bar-send .cp-send { min-width: 0; width: 100%; padding: 12px 16px; }
}

/* Very narrow: drop inventories to three columns (still matched on both sides) */
@media (max-width: 460px) {
  .invp-grid--recv { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .invp-grid--give { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Touch devices: don't rely on hover for actions */
@media (hover: none) {
  .icard-actions { opacity: 1; transform: none; }
}