:root {
  --bg:#0f172a;
  --card:#1e293b;
  --text:#f8fafc;
}

.light {
  --bg:#f8fafc;
  --card:#e5e7eb;
  --text:#020617;
}

body {
  margin:0;
  font-family:Arial;
  background:var(--bg);
  color:var(--text);
}

header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px;
}

.logo { width:40px }

#products {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px,1fr));
  gap:15px;
  padding:15px;
}

.card {
  background:var(--card);
  border-radius:12px;
  padding:10px;
  text-align:center;
  cursor:pointer;
  transition:.2s;
}

.card:hover { transform:scale(1.05); }

.card img { width:100% }

.modal {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
}

.box {
  background:var(--card);
  padding:20px;
  width:300px;
  margin:10% auto;
  border-radius:12px;
  text-align:center;
}

input,button {
  width:100%;
  margin-top:10px;
  padding:10px;
}

.qr { width:180px; margin:10px 0 }