
:root{
  --bg:#0b0b0d;
  --panel:#111216;
  --panel-2:#171922;
  --text:#f5f7fb;
  --muted:#a9b0c0;
  --line:#262a35;
  --accent:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:radial-gradient(circle at top, #181b23 0%, #0b0b0d 55%);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:28px 18px 48px}
.hero{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid var(--line);
  border-radius:28px;
  padding:30px;
  box-shadow:0 20px 50px rgba(0,0,0,.28);
}
.eyebrow{margin:0 0 10px;color:#cbd3e1;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem}
.hero h1{margin:0;font-size:clamp(2rem,5vw,4rem);line-height:1}
.sub{margin:14px 0 0;color:var(--muted);max-width:760px;font-size:1.04rem}
.stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.stats span{
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  padding:10px 12px;
  border-radius:999px;
  color:#dde3ee;
  font-size:.95rem;
}
.hero-actions,.pagination{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;align-items:center}
.button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 16px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--text);font-weight:600
}
.button:hover{background:rgba(255,255,255,.06)}
.button-solid{
  background:var(--accent);color:#0b0b0d;border-color:#fff;
}
.button-solid:hover{background:#eceff4}
.full{width:100%}
.controls{
  margin-top:20px;background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:18px;
}
.controls-grid{
  display:grid;grid-template-columns:minmax(0,1.5fr) 190px 190px 120px;gap:12px;
}
.controls input,.controls select{
  width:100%;min-height:46px;border-radius:14px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--text);padding:0 14px;font-size:.98rem
}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.chip{
  padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.04);
  border:1px solid var(--line);color:#d7dfed
}
.chip.active{background:#fff;color:#0b0b0d;border-color:#fff}
.meta-row{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:18px 2px;color:var(--muted)
}
.grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px
}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:24px;overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.22)
}
.thumb{
  min-height:120px;padding:18px;
  background:linear-gradient(135deg,#191d28,#0f1015 70%);
  display:flex;justify-content:space-between;gap:10px;align-items:flex-start
}
.thumb-tag,.thumb-type{
  display:inline-flex;align-items:center;padding:8px 10px;border-radius:999px;
  font-size:.82rem;font-weight:700;border:1px solid rgba(255,255,255,.14)
}
.thumb-tag{background:rgba(255,255,255,.06)}
.thumb-type.buy{background:#ffffff;color:#0b0b0d;border-color:#fff}
.thumb-type.auction{background:#2c3448;color:#fff}
.card-body{padding:18px}
.card h2{margin:0 0 14px;font-size:1.05rem;line-height:1.45;min-height:4.4em}
.price{margin:0;color:#fff;font-size:1.35rem;font-weight:800}
.subtitle{margin:8px 0 18px;color:var(--muted);min-height:1.4em}
.empty,.debug,.footer{
  margin-top:18px;background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:22px
}
.empty h2,.debug h2{margin-top:0}
.debug pre{
  white-space:pre-wrap;
  background:#0d0f14;border:1px solid var(--line);padding:16px;border-radius:16px;color:#dbe3f4
}
.footer{color:var(--muted)}
.footer p{margin:.35rem 0}
.footer a{color:#fff;text-decoration:underline}
@media (max-width: 980px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .controls-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 680px){
  .wrap{padding:18px 14px 40px}
  .hero{padding:22px}
  .grid{grid-template-columns:1fr}
  .controls-grid{grid-template-columns:1fr}
  .meta-row{flex-direction:column}
}
