:root {
  color: #183628;
  background: #f5f3eb;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; }

main { width: min(100% - 32px, 760px); margin: 0 auto; padding: 72px 0 42px; }

.hero { background: #1d5b3b; color: #fff; border-radius: 28px; padding: clamp(32px, 7vw, 64px); box-shadow: 0 18px 50px #163b2933; }

.eyebrow { margin: 0 0 12px; color: #d5ed5d; letter-spacing: .12em; font-size: .74rem; font-weight: 800; }
h1 { margin: 0; max-width: 520px; font-size: clamp(2.4rem, 8vw, 4.75rem); line-height: .98; letter-spacing: -.055em; }
.intro { margin: 20px 0 38px; color: #e4efe8; font-size: 1.12rem; }

label { display: block; margin: 15px 0 8px; font-weight: 700; }
select { width: 100%; border: 2px solid transparent; border-radius: 12px; padding: 12px 16px; font: inherit; color: #183628; }
.search-row { display: flex; gap: 10px; }
input { min-width: 0; flex: 1; border: 2px solid transparent; border-radius: 12px; padding: 15px 16px; font: inherit; color: #183628; }
input:focus { outline: none; border-color: #d5ed5d; }
button { border: 0; border-radius: 12px; padding: 0 20px; color: #173727; background: #d5ed5d; font: inherit; font-weight: 800; cursor: pointer; }
button:disabled { opacity: .7; cursor: wait; }
.hint { margin: 11px 0 0; color: #d7e8db; font-size: .86rem; }
.hint span { white-space: nowrap; }

.result { margin-top: 26px; padding: 32px; background: #fff; border-radius: 24px; box-shadow: 0 12px 34px #1e3e2b12; }
.result .eyebrow { color: #477d59; }
.collection-summary { display: flex; justify-content: space-between; gap: 28px; align-items: end; }
.date-label { margin: 0; color: #607268; font-size: .9rem; font-weight: 700; }
.collection-date { margin: 5px 0; font-size: clamp(1.55rem, 5vw, 2.35rem); font-weight: 850; letter-spacing: -.04em; }
.collection-day { margin: 0; color: #607268; }
.bins { display: flex; flex-wrap: wrap; justify-content: end; gap: 8px; }
.bin-chip { padding: 10px 12px; border-radius: 999px; font-size: .88rem; font-weight: 750; white-space: nowrap; }
.general { color: #fff; background: #4f5652; }.recycling { color: #322a00; background: #ffd542; }.green { color: #fff; background: #338c52; }
.result-note { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid #e6ece6; color: #607268; }
.error { margin: 24px 0; padding: 16px; border-radius: 12px; color: #842d21; background: #fce5e0; }
.disclaimer { margin: 24px 8px 0; color: #718177; font-size: .78rem; text-align: center; }

@media (max-width: 600px) { main { width: min(100% - 20px, 760px); padding-top: 20px; } .hero { border-radius: 20px; } .search-row { display: grid; } button { min-height: 52px; } .collection-summary { display: grid; align-items: start; } .bins { justify-content: start; } }