body { font-family: Arial, sans-serif; margin: 0; background: #f7f7f7; }
header { background: #111; color: #fff; padding: 16px; }
nav a { color: #fff; margin-right: 12px; text-decoration: none; }
.container { max-width: 960px; margin: 0 auto; padding: 16px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 12px; }
.card { background: #fff; border-radius: 10px; padding: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.card img { width: 100%; height: 170px; object-fit: cover; border-radius: 8px; background: #eee; }
.badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; background: #eee; }
.badge.ok { background: #d7f7d7; }
.badge.out { background: #ffd7d7; }

button { padding: 10px 12px; border: 0; border-radius: 8px; cursor: pointer; }
button.primary { background: #111; color: white; }
input, textarea { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid #ddd; margin: 6px 0 12px; }

.notice { background: #fff; border-left: 4px solid #111; padding: 12px; border-radius: 8px; }
.small { color: #666; font-size: 13px; }
hr { border: 0; border-top: 1px solid #e5e5e5; margin: 18px 0; }