*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,sans-serif;background-color:#1e1e1e;color:#fff;min-height:100vh}.app{display:flex;flex-direction:column;align-items:center;padding:1rem;gap:1rem}header{width:100%;max-width:700px;display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}header h1{font-size:1.4rem}.add-btn{background:#22c55e;border:none;padding:.5rem 1rem;border-radius:8px;color:#fff;font-size:1rem;cursor:pointer;transition:background .2s ease}.add-btn:hover{background:#16a34a}main{width:100%;max-width:700px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;padding:10px}.button-tile{position:relative;border-radius:12px;overflow:hidden;cursor:pointer;transition:transform .1s ease,box-shadow .1s ease,outline .2s ease;aspect-ratio:1 / 1;display:flex;flex-direction:column;justify-content:space-between;touch-action:manipulation;background-color:#4b5563}.button-tile:hover,.button-tile:active{transform:scale(1.03);box-shadow:0 0 10px #fff6}.button-tile.playing{outline:3px solid limegreen;box-shadow:0 0 15px #32cd32}.overlay{display:flex;flex-direction:column;justify-content:space-between;padding:6px;height:100%;background:#00000040}.label-row{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;background:#0006;color:#fff;border-radius:6px;padding:2px 4px}.label{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.controls{display:flex;justify-content:space-between;align-items:center;background:#0000004d;border-radius:6px;padding:4px;font-size:1.2rem}.edit-btn,.remove-img-btn,.delete-btn{background:none;border:none;color:#fff;font-size:1rem;cursor:pointer;padding:2px}.edit-btn:hover,.remove-img-btn:hover,.delete-btn:hover{color:#22c55e}input[type=color]{border:none;background:transparent;cursor:pointer;width:28px;height:28px;border-radius:6px}.edit-input{width:100%;border-radius:6px;border:1px solid #ccc;padding:2px 4px;font-size:.9rem;color:#000}@media (max-width: 600px){header h1{font-size:1.1rem}.add-btn{font-size:.9rem;padding:.4rem .8rem}.grid{gap:10px}.button-tile{aspect-ratio:1 / 1;border-radius:10px}.controls{font-size:1rem}.label-row{font-size:.75rem}}@keyframes pulseGlow{0%{box-shadow:0 0 6px #32cd32}50%{box-shadow:0 0 16px #32cd32}to{box-shadow:0 0 6px #32cd32}}.button-tile.playing{animation:pulseGlow 1s infinite}