/*
 * components.css: shared UI built to traded.gg's measurements
 * (reference/spec/chrome.md 3.14 to 3.18, home.md 3.6 to 3.11, market.md 3.5 to 3.6).
 * Green replaces traded's white or blue for SELECTED states only; primary CTAs stay
 * traded's white .btn-fill. Every component shrinks to 320 px: labels truncate,
 * rows wrap, nothing is allowed to push past its parent.
 */

/* ───────────── buttons ───────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  max-width: 100%; min-width: 0; flex-shrink: 0;
  height: 40px; padding: 0 16px;
  border-radius: var(--radius-control);
  font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap;
  color: var(--fg); user-select: none; -webkit-user-select: none;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.btn > svg { width: 16px; height: 16px; flex-shrink: 0; pointer-events: none; }
.btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; pointer-events: none; }
.btn[aria-disabled="true"], .btn.is-disabled { opacity: 0.5; cursor: not-allowed; }
.btn[aria-disabled="true"]:active, .btn.is-disabled:active { transform: none; }
.btn-sm { height: 36px; padding: 0 12px; }
.btn-lg { height: 44px; padding: 0 32px; }
.btn-xs { height: 32px; padding: 0 16px; gap: 6px; font-size: 12px; line-height: 16px; }
.btn-xs > svg { width: 12px; height: 12px; }
.btn-icon { width: 40px; padding: 0; }
.btn-sm.btn-icon { width: 36px; }
.btn-block { width: 100%; }
.btn-pill { border-radius: var(--radius-pill); }

/* white primary (traded's btn-fill; stays white in PONPACK) */
.btn-fill {
  color: #0b0b0b;
  background-image: linear-gradient(#fff, #e9e9ec);
  box-shadow: var(--shadow-fill);
}
.btn-fill:hover { transform: translateY(-1px); box-shadow: var(--shadow-fill-hover); }
.btn-fill:active { transform: scale(0.98); }
.btn-fill[aria-disabled="true"]:hover, .btn-fill.is-disabled:hover { transform: none; box-shadow: var(--shadow-fill); }
.btn-secondary {
  color: var(--fg);
  background-image: linear-gradient(180deg, #202020, #171717);
  box-shadow: var(--shadow-secondary);
}
.btn-secondary:hover { transform: translateY(-1px); }
.btn-outline { color: var(--fg); box-shadow: var(--shadow-outline); }
.btn-outline:hover { background-color: var(--fg-3); box-shadow: var(--shadow-outline-hover); }
.btn-outline[aria-disabled="true"]:hover, .btn-outline.is-disabled:hover { background-color: transparent; box-shadow: var(--shadow-outline); }
.btn-ghost { color: var(--muted); }
.btn-ghost:hover { background-color: var(--fg-5); color: var(--fg); }
.btn-link { height: auto; min-height: 24px; padding: 0; color: var(--primary); text-underline-offset: 4px; }
.btn-link:hover { text-decoration: underline; }
.btn-link:active { transform: none; }
.btn-danger-ghost { color: var(--muted); }
.btn-danger-ghost:hover { background-color: var(--destructive-10); color: var(--destructive); }
@media (prefers-reduced-motion: reduce) {
  .btn-fill:hover, .btn-secondary:hover { transform: none; }
}

/* square icon buttons */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: var(--radius-md); color: var(--fg);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.icon-btn:hover { background-color: var(--secondary); }
.icon-btn > svg { width: 20px; height: 20px; }
.icon-btn-lg { width: 40px; height: 40px; }
.icon-btn-lg:hover { background-color: var(--accent-hover); }
.icon-btn-lg > svg { width: 16px; height: 16px; }
.icon-btn.is-muted { color: var(--muted); }
.icon-btn.is-muted:hover { color: var(--fg); }
.icon-btn:disabled { opacity: 0.4; pointer-events: none; }

/* glass icon button on card images */
.btn-glass {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: var(--radius-lg);
  border: 1px solid var(--fg-25); background: var(--fg-10); color: #fff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: all var(--dur-fast) var(--ease);
}
.btn-glass:hover { border-color: var(--fg-40); background: var(--fg-20); }
.btn-glass:active { transform: scale(0.94); }
.btn-glass > svg { width: 16px; height: 16px; }
.btn-glass.is-flash { border-color: var(--fg-70); background: var(--fg-30); }
.btn-glass.is-on { border-color: var(--fg-40); background: #fff; color: #000; }
.btn-glass.is-on:hover { background: rgba(255, 255, 255, 0.9); }

/* toolbar toggle (Filters button and friends) */
.toggle {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  padding: 6px 10px; border-radius: var(--radius-md);
  font-size: 14px; line-height: 20px; font-weight: 500; color: var(--muted);
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.toggle:hover { color: var(--fg); background: var(--secondary); }
.toggle[aria-pressed="true"], .toggle.is-on { background: var(--accent-soft); color: var(--accent-bright); }
.toggle > svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ───────────── pills, chips, segmented, view toggle ───────────── */
.chip-group { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.pill, .chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  max-width: 100%; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  font-size: 12px; line-height: 16px; font-weight: 500; color: var(--muted); white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.pill { padding: 6px 10px; }
.chip { padding: 4px 12px; }
.pill > span, .chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pill > img, .pill > svg, .chip > img, .chip > svg { width: 14px; height: 14px; flex-shrink: 0; object-fit: contain; }
button.pill:hover, button.chip:hover, a.pill:hover, a.chip:hover { border-color: var(--fg-30); color: var(--fg); }
.pill[aria-pressed="true"], .chip[aria-pressed="true"], .pill.is-on, .chip.is-on,
.pill[aria-checked="true"], .chip[aria-checked="true"] {
  background: var(--accent-strong); border-color: var(--accent); color: #fff;
}
.pill[aria-pressed="true"]:hover, .chip[aria-pressed="true"]:hover, .pill.is-on:hover, .chip.is-on:hover { border-color: var(--accent-bright); color: #fff; }
.chip-static { padding: 4px 10px; color: var(--muted); }

.tag-soon {
  display: inline-flex; align-items: center; border-radius: var(--radius-pill);
  background: var(--fg-10); padding: 2px 8px;
  font-size: 10px; line-height: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); white-space: nowrap;
}

.seg {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 100%;
  padding: 2px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg);
}
.seg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; max-width: 100%;
  height: 24px; padding: 4px 10px; border-radius: var(--radius-md);
  font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.seg-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.seg-btn:hover { color: var(--fg); }
.seg-btn[aria-selected="true"], .seg-btn[aria-pressed="true"], .seg-btn.is-on { background: var(--accent-strong); color: #fff; }

.view-toggle {
  display: inline-flex; align-items: stretch; height: 36px; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
}
.view-toggle > button {
  display: inline-flex; align-items: center; padding: 0 10px; color: var(--muted);
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.view-toggle > button > svg { width: 16px; height: 16px; }
.view-toggle > button:hover { color: var(--fg); background: var(--secondary); }
.view-toggle > button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-bright); }

/* ───────────── media chips: deal badge, Est, time, grade ───────────── */
.chip-media {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0;
  max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis;
  border-radius: var(--radius-md); background: rgba(0, 0, 0, 0.8); padding: 4px 8px;
  font-size: 12px; line-height: 16px; color: #fff; white-space: nowrap;
}
.chip-media > .truncate { min-width: 0; }
.pos-tr { position: absolute; top: 8px; right: 8px; }
.pos-tl { position: absolute; top: 8px; left: 8px; }
.pos-br { position: absolute; bottom: 8px; right: 8px; }
.pos-bl { position: absolute; bottom: 8px; left: 8px; }

.badge-deal .tri { display: inline-flex; align-items: center; justify-content: center; width: 9.2px; height: 16px; flex-shrink: 0; }
.badge-deal .tri svg { width: 8px; height: 7px; fill: currentColor; }
.badge-deal .pct { font-weight: 700; }
.badge-deal.is-below { color: var(--emerald-400); }
.badge-deal.is-above { color: var(--muted); }
.badge-deal.is-fair { color: var(--sky-400); font-weight: 700; }
.chip-est { font-weight: 600; }
.chip-time { font-size: 11px; line-height: 16.5px; font-weight: 500; color: var(--fg-70); }

.grade {
  display: inline-flex; align-items: baseline; gap: 4px; flex-shrink: 0; max-width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 2px 8px; white-space: nowrap;
}
.grade-by { font-size: 10px; line-height: 15px; color: var(--muted); }
.grade-num { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--fg); }
.grade-lg { padding: 4px 10px; }
.grade-lg .grade-num { font-size: 14px; line-height: 20px; }

/* ───────────── form controls ───────────── */
.field-label {
  display: block; margin-bottom: 8px;
  font-size: 12px; line-height: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
}
.input {
  display: block; width: 100%; min-width: 0; height: 38px;
  border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--secondary);
  padding: 8px 12px; font-size: 14px; line-height: 20px; color: var(--fg);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input:focus, .input:focus-visible { outline: none; border-color: var(--fg-30); }
.input:disabled { opacity: 0.5; cursor: not-allowed; }
.input-number { -moz-appearance: textfield; appearance: textfield; font-variant-numeric: tabular-nums; }
.input-number::-webkit-outer-spin-button, .input-number::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.input-pair { display: flex; gap: 8px; min-width: 0; }
.input-pair > .input { flex: 1 1 0; }

/* search: the box is the wrapper, so the icon and clear button sit beside the input
   instead of on top of it (traded's pl-9 geometry: text starts 36 px in) */
.search {
  position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; height: 32px;
  padding: 0 6px 0 12px; border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--secondary);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(42, 158, 101, 0.35); }
.search > svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); pointer-events: none; }
.search-input {
  flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: transparent; padding: 0 6px 0 0;
  font-size: 14px; line-height: 20px; color: var(--fg);
}
.search-input:focus, .search-input:focus-visible { outline: none; }
.search > .search-clear {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px;
  border-radius: var(--radius-md); color: var(--muted);
}
.search > .search-clear:hover { color: var(--fg); background: var(--accent-hover); }
.search > .search-clear > svg { width: 14px; height: 14px; }

.range {
  display: block; width: 100%; height: 24px; accent-color: var(--accent-bright); cursor: pointer; background: transparent;
}
.range:disabled { cursor: not-allowed; }

.checkbox, .radio {
  -webkit-appearance: none; appearance: none; flex-shrink: 0;
  width: 16px; height: 16px; margin: 0;
  border: 1px solid var(--muted-40); background: transparent;
  display: inline-grid; place-content: center; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.checkbox { border-radius: var(--radius-control); }
.checkbox:checked {
  background-color: var(--accent-strong); border-color: var(--accent-bright);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 12px 12px; background-position: center; background-repeat: no-repeat;
}
.radio { border-radius: 50%; }
.radio:checked { border-color: var(--accent-bright); background: radial-gradient(circle, var(--accent-bright) 0 4px, transparent 4.5px); }
.checkbox:disabled, .radio:disabled { opacity: 0.5; cursor: not-allowed; }
.check-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0;
  padding: 4px 6px; border-radius: var(--radius-md);
  font-size: 14px; line-height: 20px; color: var(--fg-80); cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.check-row:hover { color: var(--fg); background: var(--secondary-60); }
.check-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ───────────── dropdown menus ───────────── */
.select-trigger {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--secondary);
  padding: 6px 10px; font-size: 12px; line-height: 16px; color: var(--fg); white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease);
}
.select-trigger:hover { background: var(--accent-hover); }
.select-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.select-trigger > svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--muted); transition: transform var(--dur-fast) var(--ease); }
.select-trigger[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
.menu-trigger {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; min-width: 8.5rem; max-width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card);
  padding: 0 10px; font-size: 12px; font-weight: 600; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease);
}
.menu-trigger:hover { background: var(--secondary); }
.menu-trigger > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.menu-trigger > svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--muted); transition: transform var(--dur-fast) var(--ease); }
.menu-trigger[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
@media (min-width: 640px) { .menu-trigger { min-width: 9.75rem; } }

.menu-wrap { position: relative; display: inline-flex; min-width: 0; max-width: 100%; }
.menu {
  position: absolute; top: 100%; right: 0; z-index: var(--z-menu);
  margin-top: 4px; min-width: 180px; max-width: calc(100vw - 16px);
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card);
  padding: 4px; box-shadow: var(--shadow-xl);
  transform-origin: top right;
  animation: popper-in var(--dur-menu-in) var(--ease-spring);
}
.menu.menu-left { right: auto; left: 0; transform-origin: top left; }
.menu.is-closing { animation: popper-out var(--dur-menu-out) ease-in forwards; }
.menu.is-measuring { animation: none !important; }
.menu.is-static { position: relative; top: auto; right: auto; z-index: auto; margin-top: 0; animation: none; }
.menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0;
  padding: 6px 12px; border-radius: var(--radius-md);
  font-size: 12px; line-height: 16px; text-align: left; color: var(--fg-70); white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.menu-item > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.menu-item > svg { width: 14px; height: 14px; flex-shrink: 0; }
.menu-item:hover { background: var(--secondary); color: var(--fg); }
.menu-item[aria-checked="true"], .menu-item.is-on { background: var(--accent-soft); color: var(--fg); font-weight: 500; }
.menu-item[aria-checked="true"] > svg, .menu-item.is-on > svg { color: var(--accent-bright); }
.menu-item.is-danger { color: var(--red-400); }
.menu-item.is-danger:hover { background: var(--destructive-10); color: var(--red-400); }
.menu-sep { height: 1px; margin: 4px -4px; background: var(--border); }
.menu-head { padding: 8px 12px 6px; min-width: 0; }
.menu-head .menu-head-label { font-size: 10px; line-height: 15px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.menu-head .menu-head-value { font-size: 12px; line-height: 16px; color: var(--fg); overflow-wrap: anywhere; }

.menu-rich {
  display: flex; flex-direction: column; gap: 6px; width: 288px; min-width: 0; max-width: calc(100vw - 16px);
  border-radius: var(--radius-surface); padding: 6px; box-shadow: var(--shadow-2xl); margin-top: 6px;
}
.menu-rich-item {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 10px 12px; border-radius: var(--radius-control); text-align: left;
  transition: background-color var(--dur-fast) var(--ease);
}
.menu-rich-item:hover { background: var(--secondary); }
.menu-rich-item .mri-icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: var(--radius-lg);
  border: 1px solid var(--fg-15); background: var(--fg-6); color: var(--fg);
}
.menu-rich-item .mri-icon > svg { width: 16px; height: 16px; }
.menu-rich-item .mri-text { flex: 1; min-width: 0; }
.menu-rich-item .mri-title { display: block; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-rich-item .mri-sub { display: block; margin-top: 2px; font-size: 10px; line-height: 15px; color: var(--muted); overflow-wrap: anywhere; }
.menu-rich-item .mri-check { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent-bright); visibility: hidden; }
.menu-rich-item[aria-checked="true"] { background: rgba(42, 158, 101, 0.1); }
.menu-rich-item[aria-checked="true"] .mri-icon { border-color: rgba(47, 191, 115, 0.35); color: var(--accent-bright); }
.menu-rich-item[aria-checked="true"] .mri-check { visibility: visible; }

/* ───────────── tooltip (positioned and clamped by js/ui.js) ───────────── */
.tip {
  position: fixed; top: 0; left: 0; z-index: var(--z-tooltip);
  width: max-content; max-width: min(256px, calc(100vw - 16px));
  padding: 12px; border: 1px solid var(--fg-10); border-radius: var(--radius-lg); background: var(--tooltip-bg);
  font-size: 11px; line-height: 17.875px; color: var(--fg-65); overflow-wrap: anywhere;
  box-shadow: var(--shadow-xl); pointer-events: none;
  opacity: 0; transition: opacity var(--dur-fast) var(--ease);
}
.tip[data-state="open"] { opacity: 1; }
.tip.is-static { position: relative; opacity: 1; z-index: auto; }

/* ───────────── toasts ───────────── */
.toast-host {
  position: fixed; right: 16px; top: calc(var(--header-h) + 8px); z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: 8px;
  width: min(360px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; min-width: 0;
  border: 1px solid rgba(0, 210, 148, 0.25); border-radius: var(--radius-2xl);
  background: var(--toast-bg); padding: 14px 16px;
  box-shadow: var(--shadow-toast); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  animation: slide-in-right 0.22s var(--ease-spring);
}
.toast.is-static { animation: none; }
.toast.is-leaving { opacity: 0; transform: translateX(16px); transition: opacity 0.2s ease-out, transform 0.2s ease-out; }
.toast-error { border-color: rgba(248, 113, 113, 0.3); background: rgba(24, 14, 14, 0.98); }
.toast-info { border-color: var(--border); background: rgba(20, 20, 20, 0.98); }
.toast-icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: var(--radius-lg); background: rgba(47, 191, 115, 0.12); color: var(--accent-bright);
}
.toast-icon > svg { width: 16px; height: 16px; }
.toast-error .toast-icon { background: rgba(248, 113, 113, 0.12); color: var(--red-400); }
.toast-info .toast-icon { background: var(--fg-10); color: var(--fg); }
.toast-body { flex: 1; min-width: 0; }
.toast-title { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--fg); overflow-wrap: anywhere; }
.toast-text { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--muted); overflow-wrap: anywhere; }
.toast-text a { display: inline-flex; align-items: center; min-height: 24px; color: var(--accent-bright); text-decoration: underline; text-underline-offset: 2px; }
.toast-close {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: var(--radius-md); color: var(--muted);
}
.toast-close:hover { background: var(--fg-10); color: var(--fg); }
.toast-close > svg { width: 14px; height: 14px; }

/* ───────────── skeletons ───────────── */
.skeleton { background: var(--secondary); border-radius: var(--radius-md); animation: pulse 2s var(--ease-pulse) infinite; }
.sk-card {
  aspect-ratio: 3 / 4; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card);
  animation: pulse 2s var(--ease-pulse) infinite;
}
.sk-line { height: 12px; border-radius: 6px; background: var(--secondary-40); animation: pulse 2s var(--ease-pulse) infinite; }
.spinner { width: 16px; height: 16px; animation: spin 1s linear infinite; }

/* ───────────── drawer: right panel at 1024+, bottom sheet below ───────────── */
.drawer-root { position: fixed; inset: 0; z-index: var(--z-drawer); }
.drawer-root[data-state="closed"] { pointer-events: none; }
.drawer-overlay {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: var(--black-50); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 1; visibility: visible;
  transition: opacity var(--dur-basket-overlay) ease-out, visibility 0s;
}
.drawer-root[data-state="closed"] .drawer-overlay {
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-basket-overlay) ease-out, visibility 0s linear var(--dur-basket-overlay);
}
.drawer-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; max-height: 85dvh; min-width: 0;
  border: 1px solid var(--border); border-radius: 16px 16px 0 0; background: var(--card);
  box-shadow: var(--shadow-2xl);
  transform: translate3d(0, 0, 0); visibility: visible;
  transition: transform var(--dur-basket) var(--ease-spring), visibility 0s;
}
.drawer-root[data-state="closed"] .drawer-panel {
  transform: translate3d(0, 100%, 0); visibility: hidden;
  transition: transform var(--dur-basket) var(--ease-spring), visibility 0s linear var(--dur-basket);
}
@media (min-width: 1024px) {
  .drawer-panel {
    left: auto; top: 0; right: 0; bottom: 0; height: 100%; max-height: none;
    width: var(--basket-w); border-radius: 16px 0 0 16px;
  }
  .drawer-root[data-state="closed"] .drawer-panel { transform: translate3d(100%, 0, 0); }
}
.drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0;
  border-bottom: 1px solid var(--border); padding: 16px 20px;
}
.drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 20px; }
.drawer-foot { border-top: 1px solid var(--border); background: var(--bg-40); padding: 16px 20px; }

/* ───────────── modal ───────────── */
.modal-root {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal-overlay {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: fade-in-plain var(--dur-overlay) ease-out;
}
.modal-panel {
  position: relative; width: 360px; max-width: 100%; max-height: calc(100dvh - 32px); overflow-y: auto; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--radius-modal); background: var(--card);
  box-shadow: var(--shadow-modal);
  animation: modal-panel-in var(--dur-modal) var(--ease-spring);
}
.modal-close {
  position: absolute; top: 16px; right: 16px; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--secondary); color: #f8f8f8;
  transition: background-color var(--dur-fast) var(--ease);
}
.modal-close:hover { background: var(--accent-hover); }
.modal-close > svg { width: 16px; height: 16px; }
@media (max-width: 639.98px) {
  .modal-root.is-sheet { align-items: flex-end; padding: 0; }
  .modal-root.is-sheet .modal-panel { width: 100%; max-height: 88dvh; border-radius: 24px 24px 0 0; }
}

/* ───────────── table ───────────── */
.table-wrap {
  position: relative; max-width: 100%; overflow-x: auto; overflow-y: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-xl);
}
.table-wrap.is-scroll-y { overflow-y: auto; max-height: var(--table-max-h, 340px); scrollbar-gutter: stable; }
.table { width: 100%; min-width: var(--table-min-w, 560px); border-collapse: separate; border-spacing: 0; font-size: 12px; line-height: 16px; }
.table th {
  position: sticky; top: 0; z-index: 1; background: var(--card);
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  font-size: 10px; line-height: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); text-align: left; white-space: nowrap;
}
.table td { padding: 10px 12px; border-bottom: 1px solid rgba(38, 38, 38, 0.6); color: var(--fg); vertical-align: middle; }
.table tbody tr:nth-child(odd) td { background: rgba(20, 20, 20, 0.5); }
.table tbody tr:nth-child(even) td { background: var(--card); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .cell-muted { color: var(--muted); }
.table .cell-truncate { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ───────────── empty states ───────────── */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 16px; text-align: center; min-width: 0; }
.empty-icon {
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
  width: 56px; height: 56px; border-radius: var(--radius-2xl); background: var(--fg-6); color: var(--muted);
}
.empty-icon > svg { width: 24px; height: 24px; }
.empty-title { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--fg); overflow-wrap: anywhere; }
.empty-text { margin-top: 4px; max-width: 240px; font-size: 12px; line-height: 16px; color: var(--muted); overflow-wrap: anywhere; }
.empty-box {
  border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card);
  padding: 32px 16px; text-align: center; font-size: 14px; line-height: 20px; color: var(--muted); overflow-wrap: anywhere;
}
.empty-box.is-compact { padding: 16px; font-size: 12px; line-height: 16px; }
.notice {
  display: flex; align-items: flex-start; gap: 8px; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card);
  padding: 12px 16px; font-size: 14px; line-height: 20px; color: var(--muted);
}
.notice > svg { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; }

/* ───────────── section header with wordmark ───────────── */
.section-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  column-gap: 12px; row-gap: 8px; margin-bottom: 16px; min-width: 0;
}
.section-head-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.section-wordmark { height: 24px; width: auto; object-fit: contain; flex-shrink: 0; }
@media (min-width: 640px) { .section-wordmark { height: 28px; } }
.section-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 18px; line-height: 28px; font-weight: 700; letter-spacing: -0.025em; }
@media (min-width: 640px) { .section-title { font-size: 20px; } }
.view-more {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0; min-height: 24px;
  font-size: 12px; line-height: 16px; font-weight: 500; color: var(--muted);
  transition: color var(--dur-fast) var(--ease);
}
.view-more > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-more > svg { width: 12px; height: 12px; flex-shrink: 0; transition: transform var(--dur-fast) var(--ease); }
.view-more:hover { color: var(--fg); }
.view-more:hover > svg { transform: translate(2px, -2px); }

/* ───────────── listing card (home.md 3.8, 3.9; market 7.3 basket colours) ───────────── */
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 768px) { .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.lc {
  position: relative; display: block; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card);
  overflow: hidden; contain: layout paint; container-type: inline-size;
  transition: all var(--dur-fast) var(--ease);
  animation: fade-in var(--dur-fade) ease-out;
}
/* the card's one link is a text-less stretched layer UNDER the content (a backdrop for the layout gate);
   the image well and the body above it ignore the pointer, so clicks and hovers land on the link */
.lc-link { position: absolute; inset: 0; z-index: 0; display: block; color: inherit; border-radius: inherit; }
.lc-link:focus-visible { outline: none; }
.lc:has(> .lc-link:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.lc-media, .lc-body { pointer-events: none; }
.lc-media { position: relative; z-index: 1; width: 100%; aspect-ratio: 3 / 4; background: var(--secondary); overflow: hidden; }
.lc-img { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform var(--dur-fast) var(--ease); }
.lc-img.fit-contain { object-fit: contain; padding: 12px; }
.lc-img.fit-cover { object-fit: cover; }
.lc-fail {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 8px; text-align: center; font-size: 12px; line-height: 16px; color: var(--muted);
}
.lc-fail > svg { width: 32px; height: 32px; color: var(--muted-50); }
.lc-media .chip-time { max-width: calc(50% - 12px); }
.lc-media:has(.chip-time) .badge-deal { max-width: calc(50% - 12px); }
.lc-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; padding: 12px; min-width: 0; }
.lc-title { font-size: 14px; line-height: 17.5px; font-weight: 500; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-meta { height: 16px; font-size: 11px; line-height: 16px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-price-row { display: flex; align-items: baseline; gap: 6px; min-width: 0; overflow: hidden; }
/* ETH is what you pay: it keeps its width and the secondary ~$ truncates first (requests/market.md 2) */
.lc-price { flex: 0 0 auto; max-width: 100%; min-width: 0; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lc-sub { flex: 0 20 auto; min-width: 0; max-width: 45%; font-size: 11px; line-height: 16.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
@container (max-width: 150px) { .lc-sub { display: none; } }
.lc-sub.is-struck { text-decoration: line-through; }
.lc-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; min-height: 22px; }
.lc-source { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lc-source > img, .lc-source > svg { width: 16px; height: 16px; flex-shrink: 0; object-fit: contain; color: var(--muted); }
.lc-source > span { display: none; min-width: 0; font-size: 10px; line-height: 15px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 640px) { .lc-source > span { display: inline; } }

/* the bar lives beside the link, in a clip box laid over the 3:4 image area */
.lc-bar-clip { position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: calc(100cqw * 4 / 3); overflow: hidden; pointer-events: none; }
.lc-bar {
  position: absolute; left: 0; right: 0; bottom: 0; pointer-events: auto;
  display: flex; align-items: center; gap: 8px; padding: 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100%);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transform: translateY(100%); visibility: hidden;
  transition: transform var(--dur-buybar) var(--ease-spring), visibility 0s linear var(--dur-buybar);
}
.lc-bar .btn { flex: 1 1 auto; min-width: 0; gap: 6px; box-shadow: var(--shadow-fill), var(--shadow-lg-black); }
.lc-bar .btn[aria-disabled="true"] { opacity: 1; color: var(--muted); background: var(--card-80); background-image: none; box-shadow: inset 0 0 0 1px var(--fg-15); }
.lc.is-revealed .lc-bar, .lc:focus-within .lc-bar {
  transform: none; visibility: visible;
  transition: transform var(--dur-buybar) var(--ease-spring), visibility 0s;
}
.lc.is-revealed .chip-est, .lc:focus-within .chip-est { opacity: 0; }
@media (hover: hover) {
  .lc:hover { background: var(--card-80); border-color: var(--fg-25); box-shadow: var(--shadow-card-hover); }
  .lc:hover .lc-img { transform: scale(1.05); }
}
@media (hover: hover) and (min-width: 640px) {
  .lc.has-bar:hover .lc-bar { transform: none; visibility: visible; transition: transform var(--dur-buybar) var(--ease-spring), visibility 0s; }
  .lc.has-bar:hover .chip-est { opacity: 0; }
}
.chip-est { transition: opacity var(--dur-fast) var(--ease); }
@container (max-width: 180px) {
  .lc-bar { gap: 6px; padding: 6px; }
  .lc-bar .btn { padding: 0 8px; }
  .lc-bar .btn > svg { display: none; }
}
/* compact cards under 132 px: the Buy Now label becomes its icon (the name stays for screen readers) */
@container (max-width: 132px) {
  .lc-bar .btn:not([aria-disabled="true"]) { padding: 0; }
  .lc-bar .btn:not([aria-disabled="true"]) > svg { display: block; }
  .lc-bar .btn:not([aria-disabled="true"]) > span {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

.lc.is-in-basket { outline: 2px solid var(--accent-bright); outline-offset: 0; }
@media (hover: hover) {
  .lc.is-in-basket:hover { border-color: var(--border); box-shadow: none; }
}
.lc-check {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-bright); color: var(--on-accent-bright); box-shadow: var(--shadow-lg-black);
  animation: cart-bounce var(--dur-badge) var(--ease-spring);
}
.lc-check > svg { width: 14px; height: 14px; }
.lc.is-in-basket .chip-time { display: none; }