*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#0f0f0f,#1a1a2e,#0d1117);background-attachment:fixed;min-height:100vh;padding:0;color:#fff;position:relative}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(circle at 20% 50%,rgba(0,255,102,.03) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(0,255,102,.02) 0%,transparent 50%);pointer-events:none;z-index:1}app-root{position:relative;z-index:2}.container{max-width:1400px;margin:0 auto}h1,h2,h3{color:#333}.card{background:#fff;border-radius:12px;padding:20px;margin:20px 0;box-shadow:0 4px 6px #0000001a;transition:transform .2s}.card:hover{transform:translateY(-2px);box-shadow:0 6px 12px #00000026}.header-card{text-align:center;background:linear-gradient(135deg,#fff,#f3f4f6)}.header-card h1{font-size:2rem;color:#1f2937}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin:20px 0}.stat-card{background:#fff;border-radius:12px;padding:20px;display:flex;align-items:center;gap:15px;box-shadow:0 4px 6px #0000001a}.stat-icon{font-size:3rem}.stat-content h3{font-size:1rem;color:#6b7280;margin-bottom:5px}.stat-value{font-size:1.8rem;font-weight:700;color:#1f2937}.stat-label{font-size:.9rem;color:#9ca3af}.filter-bar{background:#fff}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;margin-top:20px}.bin-card{position:relative}.bin-visual{display:flex;justify-content:center;padding:20px 0}.bin-container{position:relative;width:150px;height:200px;background:#f3f4f6;border:3px solid #d1d5db;border-radius:8px 8px 12px 12px;overflow:hidden;display:flex;align-items:flex-end;box-shadow:inset 0 2px 8px #0000001a}.bin-fill{width:100%;transition:height .5s ease,background-color .3s ease;border-radius:0 0 8px 8px;position:relative;animation:fillAnimation .8s ease-out}@keyframes fillAnimation{0%{height:0%!important}}.bin-percentage{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2rem;font-weight:700;color:#1f2937;text-shadow:0 0 10px white,0 0 20px white;z-index:10}.status-badge{display:inline-block;padding:8px 16px;border-radius:20px;font-weight:600;color:#fff;font-size:.95rem}.bin-info{margin:15px 0;padding:15px;background:#f9fafb;border-radius:8px}.bin-info p{margin:8px 0;color:#4b5563;font-size:.95rem;line-height:1.6}.bin-info strong{color:#1f2937}.bin-actions{display:flex;gap:8px;justify-content:space-between}.btn-action{flex:1;padding:10px;border:none;border-radius:6px;cursor:pointer;font-size:.9rem;font-weight:600;transition:all .2s;color:#fff}.btn-add{background-color:#10b981}.btn-add:hover{background-color:#059669}.btn-remove{background-color:#f59e0b}.btn-remove:hover{background-color:#d97706}.btn-empty{background-color:#3b82f6}.btn-empty:hover{background-color:#2563eb}.badge{display:inline-block;padding:4px 12px;border-radius:12px;font-size:.85rem;font-weight:600;margin:4px;color:#fff}.badge-success{background-color:#10b981}.badge-warning{background-color:#f59e0b}.badge-info{background-color:#3b82f6}button{background-color:#667eea;color:#fff;border:none;padding:10px 20px;border-radius:6px;cursor:pointer;font-size:1rem;transition:background-color .2s;font-family:inherit}button:hover{background-color:#5568d3}button:active{transform:scale(.98)}.modal-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .2s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:#fff;border-radius:12px;padding:30px;max-width:500px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 10px 40px #0000004d;animation:slideUp .3s}@keyframes slideUp{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-content h2{margin-bottom:20px;color:#1f2937}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;color:#374151;font-weight:600;font-size:.95rem}.form-group input,.form-group select{width:100%;padding:10px 14px;border:2px solid #e5e7eb;border-radius:6px;font-size:1rem;transition:border-color .2s;font-family:inherit}.form-group input:focus,.form-group select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.form-actions{display:flex;gap:10px;margin-top:30px;justify-content:flex-end}.form-actions button{flex:1}.btn-icon{background-color:#3b82f6;color:#fff;border:none;padding:6px 10px;border-radius:6px;cursor:pointer;font-size:1rem;transition:all .2s;min-width:auto}.btn-icon:hover{background-color:#2563eb;transform:scale(1.1)}.btn-danger{background-color:#ef4444}.btn-danger:hover{background-color:#dc2626}.empty-state{text-align:center;padding:60px 20px;color:#6b7280;background:#fff;border-radius:12px;margin:20px 0}.empty-state h3{font-size:1.5rem;margin-bottom:10px;color:#9ca3af}@media (max-width: 768px){.stats-grid,.grid{grid-template-columns:1fr}.filter-bar>div{flex-direction:column}}