:root{--blue:#2f80ed;--green:#27ae60;--gray:#7f8c8d;--red:#eb5757;--bg:#f7f8fa;--text:#333}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans",sans-serif}
#app{max-width:1000px;margin:0 auto;padding:20px;min-height:100vh}
.top{text-align:center;margin-bottom:8px}
.top h1{font-size:22px;margin:0}
.top .subtitle{margin:6px 0 12px 0;color:#666}
#playground{background:#fff;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.06);padding:16px;display:flex;flex-direction:column;min-height:70vh}
.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:auto;gap:12px;justify-items:center;align-items:center;padding:10px 10px 20px 10px}
.trash-item.sorted{display:none}
.trash-item{display:flex;flex-direction:column;align-items:center;gap:6px}
.trash-item img{width:64px;height:64px;object-fit:contain;user-select:none;cursor:grab;border-radius:8px;transition:transform .15s ease,box-shadow .15s ease}
.trash-item img:active{cursor:grabbing;transform:scale(.96)}
.trash-item .label{font-size:12px;color:#444}
.buckets{display:flex;justify-content:space-between;align-items:flex-end;padding:18px 8px;gap:10px;margin-top:auto}
.bucket{flex:1;max-width:220px;height:160px;border-radius:14px;background:#f1f3f5;position:relative;display:flex;align-items:flex-end;justify-content:center;border:2px solid rgba(0,0,0,.08);transition:border-color .2s ease,transform .2s ease}
.bucket::before{content:"";position:absolute;top:-8px;left:16px;right:16px;height:16px;border-radius:10px;background:rgba(0,0,0,.12)}
.bucket::after{content:"";position:absolute;top:24px;left:18px;right:18px;bottom:40px;border-radius:12px;background:rgba(255,255,255,.6);box-shadow:inset 0 8px 20px rgba(0,0,0,.06)}
.bucket.dragover{border-color:#bbb;transform:translateY(-2px)}
.bucket .mouth{position:absolute;top:8px;left:12px;right:12px;height:18px;border-radius:10px;background:rgba(0,0,0,.08)}
.bucket .label{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);text-align:center;font-size:14px;font-weight:700;letter-spacing:.5px}
.bucket.recyclable{background:linear-gradient(180deg,rgba(47,128,237,.10),rgba(47,128,237,.04))}
.bucket.wet{background:linear-gradient(180deg,rgba(39,174,96,.10),rgba(39,174,96,.04))}
.bucket.dry{background:linear-gradient(180deg,rgba(127,140,141,.12),rgba(127,140,141,.06))}
.bucket.hazardous{background:linear-gradient(180deg,rgba(235,87,87,.10),rgba(235,87,87,.04))}
.bucket.success{animation:pop .35s ease}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}
#toast-container{position:fixed;left:50%;top:18%;transform:translate(-50%,-50%);pointer-events:none}
.toast{min-width:220px;max-width:420px;padding:12px 16px;border-radius:10px;background:#222;color:#fff;text-align:center;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.2);opacity:.95;animation:fadeOut 2s forwards}
.toast.error{background:var(--red)}
.toast.success{background:var(--green)}
@keyframes fadeOut{0%{opacity:.95;transform:translate(-50%,-50%) scale(1)}80%{opacity:.3}100%{opacity:0;transform:translate(-50%,-50%) scale(.98)}}
.flying{position:fixed;width:64px;height:64px;z-index:10;pointer-events:none;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .6s ease}
.hidden{visibility:hidden}
@media (max-width:720px){#app{padding:14px}.grid{grid-template-columns:repeat(5,64px);gap:10px}.buckets{gap:8px}.bucket{height:140px}}