* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #f2f7f2; color: #1d2b1d; }
header { background: #1e6b34; color: #fff; padding: 1.2rem 1rem; text-align: center; }
header h1 { margin: 0 0 .3rem; font-size: 2rem; }
.tagline { margin: 0 auto; max-width: 42rem; opacity: .92; }
main { max-width: 46rem; margin: 1rem auto; padding: 0 1rem; display: grid; gap: 1rem; }
.card { background: #fff; border-radius: 12px; padding: 1rem 1.2rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.card h2 { margin-top: .2rem; font-size: 1.15rem; }
.stats { display: flex; flex-wrap: wrap; gap: 1rem; }
.stats div { text-align: center; min-width: 5.2rem; }
.stats strong { display: block; font-size: 1.5rem; }
.stats span { font-size: .8rem; color: #555; }
.row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin: .6rem 0; }
button, .file-btn { background: #1e6b34; color: #fff; border: 0; border-radius: 8px;
  padding: .55rem 1rem; font-size: 1rem; cursor: pointer; display: inline-block; }
button:hover, .file-btn:hover { background: #175429; }
button.danger { background: #b03a2e; }
select { font-size: 1rem; padding: .5rem; border-radius: 8px; }
.note { color: #555; font-size: .88rem; }
#preview { max-width: 100%; max-height: 320px; border-radius: 8px; margin-top: .6rem; }
.samples { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.samples figure { margin: 0; text-align: center; font-size: .75rem; color: #555; }
.samples img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px;
  cursor: pointer; border: 2px solid transparent; }
.samples img:hover { border-color: #1e6b34; }
.verdict { border-radius: 10px; padding: .8rem 1rem; margin-top: .8rem; }
.verdict h3 { margin: .1rem 0 .4rem; }
.verdict p { margin: .25rem 0; }
.verdict.recycling { background: #dceeff; border-left: 6px solid #1565c0; }
.verdict.compost   { background: #efe3d5; border-left: 6px solid #6d4c41; }
.verdict.garbage   { background: #e4e4e4; border-left: 6px solid #424242; }
.verdict.ecocentre { background: #ffe8cc; border-left: 6px solid #e65100; }
.verdict.uncertain { background: #fff3cd; border-left: 6px solid #f9a825; }
footer { max-width: 46rem; margin: 0 auto 2rem; padding: 0 1rem; color: #555; font-size: .85rem; }