:root{
  --gap:16px;--muted:#6b7280;--border:#e5e7eb;--bg:#fff;
  --accent:#111; --accent-weak:#374151; --pill:#f3f4f6;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#fafafa;color:#111}
.container{max-width:980px;margin:0 auto;padding:24px 18px}
h1{font-size:clamp(1.4rem,3.2vw,1.8rem);margin:0 0 .75rem;font-weight:700;color:var(--accent)}
.note{color:var(--muted);margin-bottom:1.25rem}
.category{margin:26px 0}
.category>h2{
  font-size:clamp(1.05rem,2.6vw,1.2rem); margin:0 0 .6rem; font-weight:700; color:var(--accent-weak);
  padding-left:.6rem; border-left:3px solid #1112;
}
.group{
  border:1px solid var(--border); background:var(--bg);
  border-radius:14px; overflow:hidden; margin-bottom:var(--gap);
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.group-title{
  padding:14px 16px; font-weight:600; background:var(--pill);
  color:#111; border-bottom:1px solid var(--border);
}
.item{
  display:grid; grid-template-columns: 1fr auto; gap:8px 12px;
  padding:12px 16px; border-top:1px solid var(--border);
}
.item:first-child{border-top:none}
.title{font-weight:600}
.meta{color:var(--muted);font-size:.95rem}
.price{text-align:right;white-space:nowrap}
.old{text-decoration:line-through;opacity:.6;margin-right:.5rem}
.now{font-weight:800}
@media (max-width:640px){
  .container{padding:20px 14px}
  .item{grid-template-columns:1fr}
  .price{text-align:left}
}