* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f0f2f5; color: #333; }
header { background: #1a1a2e; color: white; padding: 1rem 2rem; }
header h1 { font-size: 1.5rem; }
main { max-width: 960px; margin: 2rem auto; padding: 0 1rem; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; }
.card { background: white; border-radius: 12px; padding: 1.5rem; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.emoji { font-size: 3rem; margin-bottom: 0.75rem; }
h2 { font-size: 1rem; margin-bottom: 0.5rem; }
.price { font-size: 1.25rem; font-weight: bold; color: #1a1a2e; margin-bottom: 0.75rem; }

.stock { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; margin-bottom: 1rem; }
.stock.in  { background: #d1fae5; color: #065f46; }
.stock.low { background: #fef3c7; color: #92400e; }
.stock.out { background: #fee2e2; color: #991b1b; }

button { width: 100%; padding: 0.6rem; border: none; border-radius: 8px; background: #4f46e5; color: white; font-size: 0.95rem; cursor: pointer; transition: background 0.2s; }
button:hover:not(:disabled) { background: #4338ca; }
button:disabled { background: #d1d5db; cursor: not-allowed; }

.section-title { margin: 2rem 0 1rem; font-size: 1.2rem; font-weight: 600; }
table { width: 100%; border-collapse: collapse; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
th, td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid #f0f0f0; }
th { background: #f8f9fa; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; color: #666; }
.empty { color: #999; font-size: 0.9rem; }