.audio-player-wrapper{position:relative;margin:0 auto;font-family:Inter,system-ui,sans-serif;color:#333}.main-title{font-size:24px;font-weight:700;color:#555;margin-bottom:12px}.player-box{border:none;border-radius:20px;overflow:hidden;background:#fff;display:flex;flex-direction:column}.section-header{border-bottom:2px dashed #ccc;padding:16px 20px;font-size:22px;font-weight:700;color:#555;display:flex;justify-content:center;align-items:center}.volume-control{display:flex;justify-content:center;align-items:center;gap:8px}.mute-btn{background:transparent;border:none;color:#555;cursor:pointer;padding:0;display:flex;align-items:center;transition:color .2s}.mute-btn:hover{color:#222}.volume-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100px;height:6px;background:#ccc;border-radius:3px;outline:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#555;cursor:pointer}.player-content{padding:10px 10px 20px;border-bottom:2px dashed #ccc;display:flex;flex-direction:column;gap:30px;transition:background .2s}.player-content.dragging-outline{background:rgba(0,0,0,.05)}.song-title{font-size:18px;font-weight:700;color:#555;text-align:center}.playback-controls{display:flex;justify-content:center;align-items:center;gap:24px}.play-pause-btn{width:64px;height:64px;border-radius:18px;background:#555;color:#fff;border:none;display:flex;justify-content:center;align-items:center;cursor:pointer;flex-shrink:0}.play-pause-btn svg{width:32px;height:32px}.play-pause-btn:disabled{opacity:.5;cursor:default}.skip-btn{background:transparent;border:none;color:#555;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;transition:all .2s}.skip-btn svg{width:28px;height:28px}.skip-btn span{font-size:11px;font-weight:700}.skip-btn:hover:not(:disabled){color:#222}.skip-btn:disabled{opacity:.4;cursor:default}.progress-container{display:flex;align-items:center;gap:16px;padding:0}.progress-area{flex-grow:1;display:flex;align-items:center}.progress-bar{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;background:#bbb;outline:none;border-radius:2px}.progress-bar::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#555;cursor:pointer}.time-display{font-size:13px;font-weight:700;color:#555;min-width:40px}.list-area{position:relative;height:max(min(90vw - 300px,90vh) - 300px,100px);display:flex;flex-direction:column;margin:10px 0}.list-header{text-align:center;font-size:28px;font-weight:700;color:#555;margin:40px 0 20px}.track-list{flex-grow:1;overflow-y:auto;padding:0}.track-item{padding:6px 10px;border-bottom:1px solid #f0f0f0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;border-radius:4px;margin-bottom:4px}.track-item:hover{background:#f9f9f9}.track-item.selected{background:#f0f0f0}.track-item.active{font-weight:700;color:#222}.track-name{font-size:15px;color:#444}.track-badge{font-size:11px;padding:3px 8px;background:#ddd;border-radius:12px;color:#555}.action-buttons{padding:20px;display:flex;gap:16px;margin-top:auto}.action-btn{flex:1;padding:12px 0;font-size:16px;font-weight:700;color:#000;border:1.5px solid #333;border-radius:6px;cursor:pointer}.action-btn:hover:not(:disabled){background:#e0e0e0}.action-btn:disabled{opacity:.4;cursor:default}.toast-popup{position:absolute;bottom:90px;left:50%;transform:translate(-50%);background:#333;color:#fff;padding:10px 20px;border-radius:8px;font-size:13px;font-weight:700;z-index:10;box-shadow:0 4px 12px rba(0,0,0,.15);pointer-events:none;animation:popupFade 5s forwards;white-space:nowrap}@keyframes popupFade{0%{opacity:0;transform:translate(-50%,10px)}5%{opacity:1;transform:translate(-50%)}90%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,10px)}}.out{border-radius:2px;width:19px;text-align:center;transition:.5s ease;height:19px}.out:hover{background:#1976d2;color:#fff}.container{position:relative;transition:.3s;display:flex}.container:fullscreen{width:100vw;height:100vh;transform:scale(3)}.container-kiosk{width:640px!important}#defaultCanvas0{max-height:100%;max-width:100%}@keyframes loop_animation_start_logo{0%{transform:scale(1) rotate(-10deg)}to{transform:scale(1.2) rotate(5deg);filter:drop-shadow(0 0 4mm rgb(255,179,0))}}.loop_logo{animation:loop_animation_start_logo 3s ease-in-out infinite;animation-direction:alternate;mix-blend-mode:hard-light}.stripe{background-image:repeating-linear-gradient(45deg,#f0f0f0,#f0f0f0 20px,transparent 20px,transparent 40px)}:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}#root{background-color:#fff;background-size:cover;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;flex-direction:row;z-index:0;position:relative}body{margin:0}:fullscreen,::backdrop{background-color:#fff0}