body { margin: 0; font-family: system-ui, sans-serif; background: #fff; color: #111; text-align: center; }
main { padding: 2rem 1rem; }
.logo { max-width: 360px; width: 80%; height: auto; }
h1 { font-size: 2.5rem; margin: 1rem 0 .25rem; }
.muted { color: #666; }

.search { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; align-items: flex-end; margin: 1.5rem auto; max-width: 960px; }
.search label { display: flex; flex-direction: column; text-align: left; font-size: .85rem; color: #444; }
.search input, .search select { padding: .5rem; border: 1px solid #bbb; border-radius: 4px; font-size: 1rem; width: 9rem; box-sizing: border-box; }
.search select { width: 12rem; }
.search button { padding: .6rem 1.5rem; font-size: 1rem; border: 0; border-radius: 4px; background: #1a4d8f; color: #fff; cursor: pointer; }
.error { color: #b00020; font-weight: 600; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; max-width: 1100px; margin: 1rem auto; text-align: left; }
.card { border: 1px solid #ddd; border-radius: 8px; padding: .75rem; background: #fff; }
.card h2 { font-size: 1.05rem; margin: .5rem 0 .25rem; }
.card .photo { width: 100%; height: 180px; object-fit: cover; border-radius: 4px; background: #eee; display: block; }
.card .placeholder { display: flex; align-items: center; justify-content: center; color: #888; }
.card .price { font-size: 1.25rem; font-weight: 700; margin: .25rem 0; }
.card ul { list-style: none; padding: 0; margin: 0; font-size: .9rem; color: #333; }
.small { font-size: .8rem; }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } .search input, .search select { width: 100%; } .search label { width: 100%; } }
.hint { margin-top: .25rem; font-size: .75rem; color: #b00020; max-width: 12rem; }
.search select:disabled { background: #f2f2f2; color: #888; }
.card .original { margin: .5rem 0 0; font-size: .9rem; }
.card .original a { color: #1a4d8f; }