:root{
  --blue:#1e57c9;
  --muted:#6b7280;
  --bg:#f8fafc;
  --card:#fff;
  --shadow:0 10px 30px rgba(32,41,61,0.06);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  background:var(--bg);
  color:#0f172a;
}
.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:20px;
}
header{
  background:#fff;
  border-bottom:1px solid #e6eefb;
}
.brand{
  display:flex;
  gap:12px;
  align-items:center;
}
.logo{
  width:46px;
  height:46px;
  border-radius:8px;
  background:var(--blue);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
}
nav{
  display:flex;
  gap:12px;
  align-items:center;
}
.btn{
  display:inline-block;
  padding:10px 14px;
  background:var(--blue);
  color:#fff;
  border-radius:8px;
  text-decoration:none;
  border:none;
  font-size:14px;
  cursor:pointer;
}
.btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}
a.btn{text-align:center}
h1{font-size:26px;margin:6px 0 6px}
h2{font-size:20px;margin:8px 0}
.muted{color:var(--muted)}
.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.grid-2{
  display:grid;
  grid-template-columns:2fr 1.3fr;
  gap:16px;
}
.grid-4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.card{
  background:var(--card);
  border-radius:10px;
  padding:12px;
  box-shadow:var(--shadow);
  border:1px solid #f1f5f9;
}
.imgbox{
  height:100px;
  background:#f1f5f9;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  color:var(--muted);
  text-align:center;
  padding:0 6px;
}
.price{
  font-weight:800;
  color:#0f172a;
}
.pill{
  padding:6px 9px;
  border-radius:999px;
  background:#eef2ff;
  color:#1e293b;
  font-weight:600;
  border:1px solid #dbeafe;
  font-size:13px;
  cursor:pointer;
}
footer{
  margin-top:30px;
  padding:18px 0;
  background:#fff;
  border-top:1px solid #eef2f8;
}
.row{
  display:flex;
  gap:12px;
  align-items:center;
}
input,textarea,select{
  padding:8px;
  border-radius:6px;
  border:1px solid #e6eefb;
  width:100%;
  box-sizing:border-box;
  font:inherit;
}
.small{font-size:13px;color:var(--muted)}
.badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  background:#f1f5f9;
  font-size:11px;
  color:#334155;
}
.chip{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid #e2e8f0;
  font-size:12px;
  cursor:pointer;
}
.chip.active{
  background:#1e293b;
  color:#e5e7eb;
  border-color:#1e293b;
}
@media(max-width:880px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
  .row{flex-direction:column;align-items:stretch}
}
@media(max-width:520px){
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr}
  nav{display:none}
}