/* SkinSeek - the client built from the "simple" demo (apps/web/v2/simplu, chosen 2026-09-29).
   Two pages: the list, with Seeker (the chat) on the left filtering it, and one offer.
   Taken from the demo's stylesheets, keeping only what these two pages use. Direction: the dark
   gunmetal of the game's menus, one amber accent for what can be acted on, green only for money,
   and the game's rarity colours as the colour of an item. */

:root {
  --bg: #0a0d12;
  --bg-2: #0f141b;
  --panel: #131922;
  --panel-2: #19212c;
  --panel-3: #202a37;
  --line: #263140;
  --line-soft: #1c2530;
  --text: #e7ebf0;
  --muted: #8a95a6;
  --faint: #5d6878;
  --accent: #f2a93b;
  --accent-soft: rgba(242, 169, 59, 0.14);
  --accent-ink: #1a1206;
  --profit: #3ddc84;
  --warn: #ffb547;
  --warn-soft: rgba(255, 181, 71, 0.12);
  --danger: #ff5c63;
  --mk-csfloat: #4f8cff;
  --mk-dmarket: #2fd3a7;
  --r-consumer: #b0c3d9;
  --radius: 6px;
  --heading: "Oxanium", "Rajdhani", "Segoe UI", sans-serif;
  --body: "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "Consolas", monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  color: var(--text);
  font: 14px/1.5 var(--body);
  background:
    radial-gradient(1200px 600px at 75% -10%, rgba(242, 169, 59, 0.07), transparent 60%),
    radial-gradient(900px 500px at 0% 110%, rgba(85, 168, 255, 0.05), transparent 60%),
    var(--bg);
  min-height: 100vh;
}
/* A faint map grid under everything, like a minimap overlay. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 80%);
  z-index: 0;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: 12px; }

/* ---- Buttons ---------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 36px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel-2);
  font: 600 13px/1 var(--heading); letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, transform 0.05s;
}
.btn:hover { border-color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: #ffbb55; }
.btn-ghost { background: transparent; }

.segmented {
  display: inline-flex; padding: 3px; gap: 2px;
  border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px); background: var(--bg-2);
}
.segmented button {
  min-height: 30px; padding: 0 12px; border: 0; border-radius: var(--radius);
  background: transparent; color: var(--muted);
  font: 600 12px/1 var(--heading); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
.segmented button[aria-pressed="true"] { background: var(--panel-3); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }

/* ---- Top bar ---------------------------------------------------------------------------- */

/* The bar is drawn inside `#top`, a wrapper exactly its own height, so sticking the bar itself
   stuck it to nothing: it scrolled away with the page (testing, finding #9, 2026-09-30). The
   wrapper is what sticks. `--topbar-h` is where what sticks under it starts. */
:root { --topbar-h: 59px; }
#top { position: sticky; top: 0; z-index: 10; }
.topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 12px 28px;
  background: rgba(10, 13, 18, 0.86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { width: 30px; height: 30px; }
.brand-name { font: 700 20px/1 var(--heading); letter-spacing: 0.08em; }
.brand-name b { color: var(--accent); font-weight: 700; }
.topbar .spacer { flex: 1; }
.lang {
  min-height: 34px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2);
  font: 600 12px/1 var(--heading); letter-spacing: 0.08em;
}

/* ---- Page shell: Seeker left, content right --------------------------------------------- */

.shell {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: var(--seeker-w, 400px) minmax(0, 1fr); gap: 24px;
  max-width: 1560px; margin: 0 auto; padding: 22px 28px 48px;
}
.shell > * { min-width: 0; }
/* The offer popup (finding #4): centred over the whole page, as CSFloat opens an item. */
.offer-modal {
  width: min(1120px, calc(100vw - 48px)); max-height: calc(100vh - 48px); padding: 0;
  color: var(--text); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.85);
}
.offer-modal::backdrop { background: rgba(4, 6, 9, 0.72); backdrop-filter: blur(3px); }
.offer-modal[open] { display: flex; flex-direction: column; }
.offer-modal-body { overflow: auto; padding: 24px 28px 28px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.offer-modal-close {
  position: absolute; top: 12px; right: 14px; z-index: 2; width: 36px; height: 36px;
  border: 1px solid var(--line); border-radius: 50%; background: var(--panel-2); color: var(--text);
  font: 400 22px/1 var(--body); cursor: pointer;
}
.offer-modal-close:hover { border-color: var(--accent); }
.offer-modal .offer { padding-right: 36px; }
/* The popup lays the offer out by its own width, not the window's: at 125% zoom a laptop window is
   "narrow" for the page, but the popup still has room for the picture beside the price. */
.offer-modal-body { container-type: inline-size; }
@container (min-width: 760px) {
  .offer-modal .offer { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .offer-modal .stage { min-height: 360px; }
}
/* Seeker inside the popup: the questions about this offer and their answers. */
.offer-ask { margin-top: 24px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); }
.offer-ask h2 { margin: 0 0 10px; font: 600 13px/1 var(--heading); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.offer-ask-log { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow: auto; }
.offer-ask-log:empty { display: none; }
.offer-ask-suggest { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.offer-ask-suggest button { border: 1px solid rgba(242, 169, 59, 0.45); background: var(--accent-soft); color: var(--text); border-radius: 999px; padding: 6px 11px; font: 500 12.5px var(--body); cursor: pointer; }
.offer-ask-suggest button:hover { background: rgba(242, 169, 59, 0.25); }
.offer-ask-suggest button.asked { background: var(--accent); color: var(--accent-ink); }
.offer-ask-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.offer-ask-form input { min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--text); font: 14px var(--body); outline: none; }
.offer-ask-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sticky-seeker { position: sticky; top: 78px; align-self: start; height: var(--seeker-h, calc(100vh - 100px)); min-height: 360px; }
/* The corner that resizes Seeker (desktop only). */
.seeker-resize {
  position: absolute; right: -6px; bottom: -6px; z-index: 3; width: 18px; height: 18px; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--accent) 50%, var(--accent) 60%, transparent 60%, transparent 70%, var(--accent) 70%, var(--accent) 80%, transparent 80%);
  opacity: 0.55; border-radius: 0 0 var(--radius) 0; touch-action: none;
}
.seeker-resize:hover { opacity: 1; }
.sticky-seeker > .seeker { height: 100%; }

/* ---- Seeker ------------------------------------------------------------------------------ */

.seeker {
  display: flex; flex-direction: column; min-height: 0;
  background: rgba(15, 20, 27, 0.96);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
.seeker-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius) var(--radius) 0 0; }
.seeker-head .mark { width: 22px; height: 22px; }
.seeker-head b { font: 700 20px/1 var(--heading); letter-spacing: 0.16em; text-transform: uppercase; }
.seeker-head .spacer { flex: 1; }
.seeker-head button { background: none; border: 0; color: var(--accent-ink); font: 700 12px var(--heading); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; padding: 0; white-space: nowrap; }
.seeker-toggle { display: none !important; }
.seeker-last { display: none; padding: 10px 14px; border-bottom: 1px solid var(--line); border-left: 3px solid var(--accent); font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seeker-log { flex: 1; min-height: 0; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 92%; padding: 10px 12px; border-radius: var(--radius); font-size: 13.5px; }
.msg-bot { background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--accent); }
.msg-user { align-self: flex-end; background: var(--accent-soft); border: 1px solid rgba(242, 169, 59, 0.35); }
.msg .who { display: block; font: 600 10px/1 var(--heading); letter-spacing: 0.16em; color: var(--accent); text-transform: uppercase; margin-bottom: 6px; }
.msg a { color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); font-size: 12px; }
.chip button { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0; font-size: 14px; line-height: 1; }
.chip button:hover { color: var(--text); }
.chip-warn { border-color: rgba(255, 181, 71, 0.4); color: var(--warn); background: var(--warn-soft); }
/* The order: a preference, not a filter (finding #5). */
.chip-soft { border-style: dashed; background: transparent; color: var(--muted); }
/* An earlier answer's chips: what the list was then, not what it is now. */
.chips.spent { opacity: 0.5; }
.seeker-suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.seeker-suggest:empty { display: none; }
.seeker-suggest button { border: 1px solid rgba(242, 169, 59, 0.45); background: var(--accent-soft); color: var(--text); border-radius: 999px; padding: 6px 11px; font: 500 12.5px var(--body); cursor: pointer; }
.seeker-suggest button:hover { background: rgba(242, 169, 59, 0.25); }
/* Pressed: it looks taken at once, and nothing can be asked while Seeker answers. */
.seeker-suggest button:active, .seeker-suggest button.asked { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.seeker-suggest button:disabled:not(.asked) { opacity: 0.45; cursor: default; }
.why-list { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.why-list .weak { color: var(--warn); }
.seeker-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--line); }
.seeker-form textarea { width: 100%; height: 46px; resize: none; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--text); font: 15px/1.4 var(--body); outline: none; }
.seeker-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.seeker-form .btn { height: 46px; }
.typing { display: inline-flex; gap: 4px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: 0.2s; }
.typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 50% { opacity: 0.25; } }

/* ---- The list: a title, one control, the cards ------------------------------------------- */

/* "What I found", the count and the marketplace buttons stay under the bar while the cards
   scroll (finding #9). */
.list-head {
  display: flex; align-items: end; gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
  position: sticky; top: var(--topbar-h); z-index: 5;
  padding: 10px 0; background: linear-gradient(var(--bg) 85%, transparent);
}
.list-head h1 { margin: 0; font: 700 28px/1.1 var(--heading); }

/* The filter row (findings #12 and #11): one compact line under the head, wrapping when narrow. */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: -4px 0 16px; font-size: 13px; }
.filters label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.filters input, .filters select {
  min-height: 34px; padding: 0 8px; color: var(--text);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); font: 500 13px var(--body);
}
.filters input { width: 76px; }
.filters input:focus, .filters select:focus { outline: none; border-color: var(--accent); }
.f-wear { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.f-wear button, .f-toggle {
  min-height: 34px; padding: 0 10px; border: 0; background: var(--bg-2); color: var(--muted);
  font: 600 12px/1 var(--heading); letter-spacing: 0.06em; cursor: pointer;
}
.f-wear button + button { border-left: 1px solid var(--line); }
.f-toggle { border: 1px solid var(--line); border-radius: var(--radius); }
.f-wear button[aria-pressed="true"], .f-toggle[aria-pressed="true"] { background: var(--panel-3); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.f-sort { margin-left: auto; }
.list-head .count { color: var(--muted); font-size: 13px; margin-top: 4px; }
.list-head .spacer { flex: 1; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.cards.is-loading { opacity: 0.45; transition: opacity 0.15s; }
.empty { padding: 40px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); }
.more { display: flex; justify-content: center; margin-top: 16px; }

/* The card: picture, name, price, discount, confidence. Nothing else. */
.sc { --rarity: var(--r-consumer); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 14px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: inherit; overflow: hidden; }
.sc::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--rarity); box-shadow: 0 0 12px var(--rarity); }
.sc:hover { border-color: color-mix(in srgb, var(--rarity) 60%, var(--line)); background: var(--panel-2); }
.sc-top { display: flex; justify-content: space-between; align-items: center; }
.sc-mk { display: inline-flex; align-items: center; gap: 6px; font: 600 11px var(--heading); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--muted); }
.mk-csfloat .dot { background: var(--mk-csfloat); }
.mk-dmarket .dot { background: var(--mk-dmarket); }
.sc img { height: 110px; width: 100%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.5)); }
.sc .no-image { height: 110px; }
.sc-name { font: 600 16px/1.2 var(--heading); overflow-wrap: anywhere; }
.sc-name small { display: block; color: var(--muted); font: 400 12px var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-price { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sc-price b { font: 700 22px/1 var(--heading); }
.sc-price span { color: var(--profit); font: 700 15px var(--heading); }
.sc-warn { font-size: 12px; color: var(--warn); }
.sc-ref { margin-top: -4px; color: var(--muted); font-size: 12px; }
.sc-top .signal .txt { font-size: 11px; }

/* Confidence as signal bars: filled = supported. Readable without colour - the number of bars
   carries it too. */
.signal { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; }
.signal .bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.signal .bars i { width: 4px; border-radius: 1px; background: var(--panel-3); }
.signal .bars i:nth-child(1) { height: 6px; }
.signal .bars i:nth-child(2) { height: 11px; }
.signal .bars i:nth-child(3) { height: 16px; }
.signal.high .bars i { background: var(--profit); }
.signal.medium .bars i:nth-child(-n+2) { background: var(--warn); }
.signal.low .bars i:nth-child(1) { background: var(--danger); }
.signal.high .txt { color: var(--profit); }
.signal.medium .txt { color: var(--warn); }
.signal.low .txt { color: var(--danger); }

/* ---- The offer: the picture and what decides the purchase ------------------------------- */

.back { display: inline-block; margin-bottom: 12px; color: var(--muted); font-size: 13px; text-decoration: none; }
.back:hover { color: var(--text); }
.offer { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; }
.stage { --rarity: var(--r-consumer); position: relative; min-height: 420px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: radial-gradient(ellipse at 50% 86%, rgba(255, 255, 255, 0.08), transparent 42%), radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--rarity) 30%, transparent), transparent 60%), linear-gradient(180deg, var(--panel-2), var(--bg-2)); }
.stage::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--rarity); box-shadow: 0 0 16px var(--rarity); }
.stage::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 44px; height: 20px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, 0.65), transparent 70%); }
.stage img { position: absolute; left: 50%; top: 45%; z-index: 1; transform: translate(-50%, -50%) rotate(-8deg); max-width: 72%; max-height: 250px; filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.65)); }
.buy { display: grid; gap: 14px; align-content: start; }
/* The attribute block under the offer (finding #3). */
.attrs { margin-top: 24px; padding: 18px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.attrs h2 { margin: 0 0 12px; font: 600 13px/1 var(--heading); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.attrs dl { display: grid; grid-template-columns: minmax(140px, max-content) minmax(0, 1fr); gap: 10px 24px; margin: 0; }
.attrs dt { color: var(--muted); font-size: 13px; }
.attrs dd { margin: 0; font-size: 14px; }
.attrs dd small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.attrs ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.attrs li span { color: var(--muted); font-size: 12px; }
.buy h1 { margin: 0; font: 700 38px/1 var(--heading); overflow-wrap: anywhere; }
.buy h1 small { display: block; font: 600 15px/1.4 var(--heading); letter-spacing: 0.06em; color: var(--muted); }
.buy .price { font: 700 44px/1 var(--heading); }
.buy .was { color: var(--muted); font-size: 14px; }
.buy .was b { color: var(--profit); }
.buy .line { color: var(--muted); font-size: 13.5px; }
.buy .acts { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.buy .acts .btn { min-height: 46px; }
.risk { display: grid; gap: 4px; padding: 8px 10px; border-radius: var(--radius); background: var(--warn-soft); border: 1px solid rgba(255, 181, 71, 0.3); color: var(--warn); font-size: 12.5px; line-height: 1.4; }

/* "Was this useful?" under the latest answer (2026-09-30). */
.feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
.feedback button { padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.feedback button:hover { border-color: var(--accent); }
.feedback button:disabled { opacity: 0.5; cursor: default; }

/* ---- The account (2026-09-29): one column, the same panels and buttons. ---------------------- */

.shell-single { grid-template-columns: minmax(0, 760px); justify-content: center; }
.account h1 { font: 600 26px/1.2 var(--heading); margin: 4px 0 10px; }
.account h2 { font: 600 17px/1.3 var(--heading); margin: 26px 0 10px; }
.account-form { display: grid; gap: 12px; max-width: 420px; margin-top: 16px; }
.account-form label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.account-form input { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text); font: inherit; }
.account-form input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
.account-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.account-steam { margin-top: 14px; }
.account-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.account-tools .spacer { flex: 1; }
.account-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.account-row > div { display: grid; gap: 2px; flex: 1; min-width: 0; }
.account-row a { color: var(--text); text-decoration: none; }
.account-row a:hover strong { color: var(--accent); }
.account-row.unseen { border-color: var(--accent); background: var(--accent-soft); }
.account-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.account-msg { padding: 8px 12px; border-radius: var(--radius); font-size: 13.5px; }
.account-msg.error { background: rgba(255, 92, 99, 0.12); color: var(--danger); border: 1px solid rgba(255, 92, 99, 0.35); }
.account-msg.notice { background: var(--accent-soft); color: var(--text); border: 1px solid rgba(242, 169, 59, 0.35); }

/* ---- Polish (testing, finding #8, 2026-09-30) -------------------------------------------
   "Minimalism is good, but it still feels like an MVP." No new content: depth, focus, and motion
   that says what reacts. Everything that moves stops for prefers-reduced-motion. */

.brand-mark { filter: drop-shadow(0 0 8px rgba(242, 169, 59, 0.35)); }
.topbar { box-shadow: 0 1px 0 rgba(242, 169, 59, 0.06), 0 10px 30px -18px rgba(0, 0, 0, 0.8); }

.seeker { box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(242, 169, 59, 0.06); }
.seeker-head { background: linear-gradient(135deg, #f2a93b 0%, #ffc266 100%); }
.seeker-form textarea { transition: border-color 0.15s, box-shadow 0.15s; }
.seeker-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.seeker-log { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

@keyframes msg-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.msg { animation: msg-in 0.18s ease-out; }

.list-head h1 { letter-spacing: 0.01em; }
.sc {
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 55%);
  transition: transform 0.16s ease-out, box-shadow 0.16s ease-out, border-color 0.16s;
}
.sc:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.8), 0 0 26px -10px var(--rarity);
}
.sc img { transition: transform 0.2s ease-out; }
.sc:hover img { transform: scale(1.05); }
.sc:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sc-price b, .buy .price, .attrs dd { font-variant-numeric: tabular-nums; }
#cards.is-loading { opacity: 0.55; transition: opacity 0.15s; }

.offer-modal[open] { animation: msg-in 0.18s ease-out; }
.stage { box-shadow: inset 0 0 80px -20px var(--rarity); }

@media (prefers-reduced-motion: reduce) {
  .msg, .offer-modal[open] { animation: none; }
  .sc, .sc img, .seeker-form textarea { transition: none; }
  .sc:hover { transform: none; }
  .sc:hover img { transform: none; }
}

/* ---- Narrow screens ----------------------------------------------------------------------- */

@media (max-width: 1100px) {
  /* minmax(0, 1fr), not 1fr: a plain 1fr grows to its widest child and the page scrolls sideways. */
  .shell { grid-template-columns: minmax(0, 1fr); padding: 14px 14px 36px; }
  .sticky-seeker { position: static; height: auto; min-height: 0; }
  .seeker-resize { display: none; }
  /* On a narrow screen the head is a third of the view: only the bar stays. */
  .list-head { position: static; padding: 0; background: none; }
  .f-sort { margin-left: 0; }
  .filters input { width: 64px; }
  .seeker-log { max-height: 50vh; }
  .offer { grid-template-columns: minmax(0, 1fr); }
  .stage { min-height: 280px; }
  .attrs dl { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .attrs dd { margin-bottom: 8px; }
}
/* A phone: Seeker folds to its header, its last answer and the input. */
@media (max-width: 640px) {
  :root { --topbar-h: 57px; }
  .topbar { gap: 10px; padding: 10px 14px; }
  .brand-name { font-size: 17px; }
  .topbar .btn { padding: 0 10px; font-size: 11px; }
  .seeker-toggle { display: inline-block !important; }
  .seeker:not(.open) .seeker-log, .seeker:not(.open) .seeker-suggest { display: none; }
  .seeker:not(.open) .seeker-last { display: block; }
  .msg { max-width: 100%; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sc { padding: 10px; }
  .sc img, .sc .no-image { height: 80px; }
  .sc-name { font-size: 14px; }
  .sc-price b { font-size: 18px; }
  .sc-price span { font-size: 13px; }
  .sc-top .signal .txt { display: none; }
  .offer-modal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: 0; }
  .offer-modal-body { padding: 16px 14px 24px; }
  .offer-modal .offer { padding-right: 0; padding-top: 36px; }
  .list-head h1 { font-size: 22px; }
  .buy h1 { font-size: 30px; }
  .buy .price { font-size: 36px; }
  .buy .acts { grid-template-columns: 1fr; }
}