:root{--primary-color: rgb(170, 128, 234);--primary-color-dark: rgb(144, 102, 210);--heading-color: rgb(170, 128, 234);--post-button-color: rgb(255, 137, 203);--post-button-color-dark: rgb(245, 115, 187);--text-color: #4a4a4a;--background-gradient-start: rgb(135, 158, 209);--background-gradient-middle: rgb(238, 188, 162);--background-gradient-end: rgb(249, 229, 200);font-family:Helvetica Neue,Arial,Hiragino Kaku Gothic ProN,Hiragino Sans,Meiryo,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:var(--text-color);background:linear-gradient(to bottom,var(--background-gradient-start),var(--background-gradient-middle),var(--background-gradient-end));font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:var(--primary-color);text-decoration:inherit}a:hover{color:var(--primary-color-dark)}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:2.5em;line-height:1.2;font-weight:500;color:var(--heading-color);text-shadow:0 2px 4px rgba(0,0,0,.2)}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--primary-color);color:#fff;cursor:pointer;transition:all .25s;box-shadow:0 2px 4px #0000001a}button:hover{background-color:var(--primary-color-dark);box-shadow:0 4px 8px #00000026}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}body{margin:0;color-scheme:light}#root{margin:auto}a{cursor:pointer}.app-container{display:flex;flex-direction:row;width:1220px;box-sizing:border-box;padding:20px;gap:20px;background-color:transparent}.info-panel{width:250px;background-color:#fff9;padding:20px;border-radius:12px;box-shadow:0 4px 12px #0000001a;border:1px solid rgba(255,255,255,.2)}.left-panel{height:100%;min-height:800px;flex:1;background-color:#fff9;border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:20px;overflow-y:auto;box-shadow:0 4px 12px #0000001a}.right-panel{display:flex;flex-direction:column;margin:0 20px;position:fixed;top:10px;right:max(0px,50vw - 680px);align-items:flex-end}.tracks-panel{width:300px;height:calc(80vh - 60px);background-color:#fff9;border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:10px;display:flex;flex-direction:column;overflow-y:scroll;overscroll-behavior:contain;transition:height .3s ease;box-shadow:0 4px 12px #0000001a}.track-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid transparent;border-radius:8px;margin-bottom:8px;background-color:#ffffffb3;cursor:grab;-webkit-user-select:none;user-select:none;transition:background-color .2s,box-shadow .2s}.track-item:hover{background-color:#ffffffe6;box-shadow:0 2px 6px #0000001a}.drag-handle{display:none;touch-action:none;flex-shrink:0;padding:8px;margin:-8px}.track-item.disabled{background-color:#f5f5f5;cursor:not-allowed;opacity:.7;color:#888}.shrink-button{margin-top:10px;width:100%;padding:10px;border:1px solid #e0e0e0;background-color:#f8f9fa;display:none;justify-content:center;align-items:center}.shrink-button svg{margin:0}.setlist-item{display:flex;align-items:center;gap:12px;margin-bottom:10px;padding:10px 12px;border:1px solid transparent;border-radius:8px;background-color:#fffc;cursor:grab;-webkit-user-select:none;user-select:none;transition:background-color .2s,box-shadow .2s}.setlist-item:hover{background-color:#fff;box-shadow:0 2px 6px #00000014}.setlist-item-view{cursor:default}.setlist-index{font-weight:700;width:35px;text-align:center;color:var(--primary-color-dark)}.setlist-title{width:240px;font-weight:500}.setlist-reason{flex:1;padding:8px;border:1px solid #ddd;border-radius:4px;font-size:.9em;background-color:#ffffff80}.trash-container{width:calc(100% - 4px);height:calc(10vh - 20px);margin-top:10px;background-color:#ffdcdcb3;border:2px dashed rgba(211,47,47,.8);border-radius:8px;display:flex;justify-content:center;align-items:center;font-weight:700;color:#d32f2f;transition:background-color .2s}.trash-container.is-over{background-color:#ffcdd2e6}.trash-container svg{fill:#d32f2f;width:24px;height:24px}.search-box{margin-bottom:15px;padding:10px;border:1px solid #ccc;border-radius:6px;font-size:1em;background-color:#ffffffb3}.utility-panel{display:flex;flex-direction:column;width:calc(100% - 22px);gap:10px;margin-top:10px;padding:10px;background-color:#fff9;border:1px solid rgba(255,255,255,.2);border-radius:8px;box-shadow:0 2px 4px #0000000d}.utility-item{display:flex;height:40px;flex:1;align-items:center;justify-content:center;gap:8px;padding:6px 8px;border:1px solid #e0e0e0;border-radius:6px;background-color:#fff;cursor:grab;-webkit-user-select:none;user-select:none;transition:background-color .2s}.utility-item:hover{background-color:#f0f0f0}.action-button{width:100%;padding:12px 15px;font-size:1em;font-weight:700;color:#fff;border:none;border-radius:8px;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:background-color .2s,box-shadow .2s;text-shadow:0 1px 2px rgba(0,0,0,.2)}.create-new-button{background-color:#28a745}.create-new-button:hover{background-color:#218838}.post-button{background-color:var(--post-button-color)}.post-button:hover{background-color:var(--post-button-color-dark)}.reset-button{background-color:#dc3545}.reset-button:hover{background-color:#c82333}.share-button{background-color:#17a2b8}.share-button:hover{background-color:#138496}.twitter-button{background-color:#1da1f2}.twitter-button:hover{background-color:#0d95e8}@media all and (max-width: 768px){.app-container{flex-direction:column;width:100%}.tracks-panel{height:60vh}.setlist-item{flex-wrap:wrap}.drag-handle{display:block}.shrink-button{display:flex}button:hover{background-color:#fff}}