:root{
  --primary:#2563eb;
  --dark:#0f172a;
  --muted:#64748b;
  --bg:#f7f8fb;
  --card:#ffffff;
  --border:#e6e8f0;
  --accent:#22c55e;
}

body.page{
  background: radial-gradient(900px 500px at 15% 0%, rgba(37,99,235,.18), transparent 55%),
              radial-gradient(700px 450px at 85% 10%, rgba(34,197,94,.14), transparent 60%),
              var(--bg);
  color: var(--dark);
}

.topbar{
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.brand{ text-decoration:none; display:flex; align-items:center; gap:10px; }
.brandmark{
  width:40px;height:40px;border-radius:14px;
  display:grid;place-items:center;
  background: linear-gradient(135deg, var(--primary), #60a5fa);
  color:#fff;font-weight:900;
  box-shadow: 0 10px 25px rgba(37,99,235,.25);
}
.brandtext{ font-weight:900; color: var(--dark); font-size:1.05rem; }

.hero{
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.70));
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 18px 60px rgba(15,23,42,.08);
}

.hero-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 14px 35px rgba(15,23,42,.08);
}

.accent{ color: var(--accent); }

.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  font-size: .92rem;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.16);
  color: #1e40af;
}

.listing-card{
  border-radius: 18px;
  overflow:hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.listing-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 50px rgba(15,23,42,.12);
}
.thumb{
  height: 150px;
  background-size: cover;
  background-position: center;
}
.thumb2{
  height: 160px;
  background-size: cover;
  background-position:center;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.list-row{ border-radius: 18px; overflow:hidden; }
.list-row .thumb2{
  height: 100%;
  min-height: 140px;
  border-radius: 0;
}

.price{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(34,197,94,.14);
  border: 1px solid rgba(34,197,94,.25);
  color: #166534;
  font-weight: 900;
  white-space:nowrap;
}
.price.big{ font-size:1.15rem; padding: 10px 12px; }

.cover{
  height: 340px;
  background-size: cover;
  background-position: center;
}

.kv{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.7);
}
.kv .k{ color: var(--muted); font-size: .82rem; }
.kv .v{ font-weight: 700; }

.footer{
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.7);
}