/* 导播模式样式 */
/* 统一深色滚动条 */
.guide-mode-container *::-webkit-scrollbar {width: 8px;height: 8px;}
.guide-mode-container *::-webkit-scrollbar-track {background: transparent;}
.guide-mode-container *::-webkit-scrollbar-corner {background: transparent;}
.guide-mode-container *::-webkit-scrollbar-thumb {background: #4a4a4a;border-radius: 4px;}
.guide-mode-container *::-webkit-scrollbar-thumb:hover {background: #616161;}
.guide-mode-container * {scrollbar-width: thin;scrollbar-color: #4a4a4a transparent;}
.guide-mode-container {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: #1a1a1a;color: white;display: flex;flex-direction: column;z-index: 2000;}
.guide-header {display: flex;justify-content: space-between;align-items: center;padding: 15px 20px;background: #2d2d2d;border-bottom: 1px solid #444;}
.guide-header h1 {margin: 0;font-size: 1.5rem;}
.guide-header .guide-controls{display: flex;gap: 10px;}
.exit-btn {background: #3498db;color: white;border: none;padding: 8px 16px;border-radius: 4px;cursor: pointer;}
.exit-btn:hover {background: #1671ae;}
/* 顶栏"全部暂停"：保底立即静音所有组 */
.pause-all-btn {background: #e74c3c;color: white;border: none;padding: 8px 16px;border-radius: 4px;cursor: pointer;display: inline-flex;align-items: center;gap: 6px;}
.pause-all-btn:hover {background: #c0392b;}
.pause-all-btn:active {transform: scale(0.97);}
.guide-main {display: flex;flex: 1;overflow: hidden;}
/* 左侧音轨面板 */
.guide-tracks-panel {flex: 1;overflow-y: auto;padding: 20px;background: #222;}
.track-groups {display: flex;flex-direction: column;gap: 20px;}
.track-group {background: #333;border-radius: 8px;overflow: hidden;border: 1px solid #444;}
.track-group.active {border-color: #3498db;box-shadow: 0 0 10px rgba(52, 152, 219, 0.3);}
/* 音乐列表拖入时可放置的组高亮 */
.track-group.drop-target {border-color: #4aa3ff;box-shadow: 0 0 0 2px rgba(74, 163, 255, 0.4), 0 0 14px rgba(74, 163, 255, 0.25);}
.track-group.drop-target .tracks-list {background: rgba(74, 163, 255, 0.07);}
/* 拖入时的空位指示：在插入位置撑开一个缺口 + 蓝色插入线 */
.track-item {transition: margin-top 0.12s ease, margin-bottom 0.12s ease;}
.track-item.drop-before {margin-top: 30px;position: relative;}
.track-item.drop-before::before {content: "";position: absolute;top: -17px;left: 0;right: 0;height: 4px;background: #4aa3ff;border-radius: 2px;}
.track-item.drop-after {margin-bottom: 45px;position: relative;}
.track-item.drop-after::after {content: "";position: absolute;bottom: -17px;left: 0;right: 0;height: 4px;background: #4aa3ff;border-radius: 2px;}
.group-header {display: flex;justify-content: space-between;align-items: center;padding: 15px;background: #2d2d2d;cursor: pointer;}
.group-header h3 {margin: 0;font-size: 1.2rem;}
.group-controls {display: flex;gap: 10px;align-items: center;}
.group-controls button {background: #444;color: white;border: none;padding: 5px 10px;border-radius: 4px;cursor: pointer;display: flex;align-items: center;gap: 5px;}
.group-controls button span{font-size: 0.8rem;}
.group-controls button:hover {background: #555;}
/* 组删除按钮的二次确认态 */
.group-controls button.confirm-delete {background: #e74c3c;animation: guideConfirmBlink 1s infinite;}
@keyframes guideConfirmBlink {50% {opacity: 0.55;}}
/* .group-settings {display: flex;gap: 15px;padding: 10px 15px;background: #2a2a2a;flex-wrap: wrap;align-items: center;} */
.group-controls select,
.group-controls input {padding: 5px;border-radius: 4px;border: 1px solid #555;background: #333;color: white;}
.group-controls .volume-slider {width: 70px;padding: 0;}
.group-controls .volume-slider.group-volume-slider {width: 80px;}
.group-controls label {display: flex;align-items: center;gap: 5px;font-size: 0.9rem;}
.tracks-list {/* min-height: 200px; */padding: 15px;transition: background 0.2s ease;}
/* 空组提示：容器为空时由 CSS 生成，不再需要独立元素 */
.tracks-list:empty::after {content: "拖拽音乐到这里添加音轨";display: block;text-align: center;padding: 30px;color: #777;border: 2px dashed #555;border-radius: 8px;margin: 10px 0;}
/* 拖拽排序中的占位/选中样式（Sortable） */
.track-item.sortable-ghost {opacity: 0.35;background: #2f2f2f;}
.track-item.sortable-chosen {cursor: grabbing;}
.track-item {background: #3a3a3a;border-radius: 6px;padding: 15px;margin-bottom: 15px;border: 1px solid #444;}
.track-item.active {border-color: #3498db;}
/* 音轨状态边框：播放中=绿色强光（正在出声），纯选中（暂停后高亮、接下来会播的那条）=蓝，
   加载/淡出中=黄，淡入中=绿（fading-in 放最后，与 playing 同时存在时以淡入色优先） */
.track-item.playing {border-color: #2ecc71;box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.45), 0 0 14px rgba(46, 204, 113, 0.35);background: #31473a;}
.track-item.selected {border-color: #3498db;box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.3), 0 0 12px rgba(52, 152, 219, 0.25);background: #313c46;}
/* 准备开始（加载中）/ 准备关闭（淡出中）：黄色提示 */
.track-item.pending {border-color: rgba(245, 166, 35, 0.55);box-shadow: none;background: #443e2f;}
/* 淡入中：绿色提示 */
.track-item.fading-in {border-color: #2ecc71;box-shadow: none;background: #31473a;}
.track-info {display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;}
.track-info .track-title {margin-right: 0.5em;}
.track-info .track-artist {flex: 1;}
.track-info button {background: #444;color: white;border: none;width: 26px;height: 26px;border-radius: 4px;cursor: pointer;display: flex;align-items: center;justify-content: center;font-size: 0.8rem;flex-shrink: 0;}
.track-info button:hover {background: #e74c3c;}
.track-title {font-weight: bold;font-size: 1.1rem;}
.track-artist {color: #bbb;}
.track-times {display: flex;gap: 15px;margin-bottom: 10px;flex-wrap: wrap;}
.track-times label {flex-direction: column;font-size: 0.85rem;}
.track-times input {padding: 4px;border-radius: 4px;border: 1px solid #555;background: #333;color: white;width: 80px;}
.track-controls {display: flex;gap: 10px;align-items: center;}
.track-controls button {background: #444;color: white;border: none;padding: 6px 12px;border-radius: 4px;cursor: pointer;}
.track-controls button:hover {background: #555;}
.track-progress {margin-bottom: 10px;}
.track-progress .time {font-size: 0.8rem;color: #bbb;display: block;margin-bottom: 5px;}
.progress-slider {width: 100%;height: 6px;border-radius: 3px;}
.track-volume {display: flex;align-items: center;gap: 10px;}
.volume-slider {/* flex: 1; */height: 6px;/* border-radius: 3px; */}
.volume-value {font-size: 0.9rem;min-width: 40px;text-align: right;}
.add-group-btn {background: #3498db;color: white;border: none;padding: 12px 20px;border-radius: 6px;cursor: pointer;font-size: 1rem;align-self: flex-start;}
.add-group-btn:hover {background: #2980b9;}
/* 右侧音乐列表 */
.guide-music-list {width: 350px;background: #252525;border-left: 1px solid #444;display: flex;flex-direction: column;overflow: hidden;}
.list-header {padding: 15px;background: #2d2d2d;border-bottom: 1px solid #444;}
.list-header h3 {margin: 0;font-size: 1.2rem;}
.list-hint {margin: 4px 0 0;font-size: 0.75rem;color: #888;}
.music-list-content {flex: 1;overflow-y: auto;padding: 10px;}
.section-title {padding: 10px;background: #333;border-radius: 4px;cursor: pointer;display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;}
.section-title .section-tools {display: flex;align-items: center;gap: 8px;}
.section-title .section-cache-btn {cursor: pointer;color: rgba(255, 255, 255, 0.55);transition: color 0.2s ease;}
.section-title .section-tools i{width: 16px;height: 16px;text-align: center;}
.section-title .section-cache-btn:hover {color: #fff;}
/* 整栏已缓存变绿；缓存中蓝色 */
.section-title .section-cache-btn.cached {color: #42b983;}
.section-title .section-cache-btn.cached:hover {transform: none;cursor: not-allowed;}
.section-title .section-cache-btn.caching {color: #4aa3ff;}

/* 清理缓存按钮（二次确认态变红） */
.clear-cache-btn {width: 100%;background: #333;color: #bbb;border: 1px solid #444;border-radius: 4px 4px 0 0;padding: 6px;cursor: pointer;font-size: 0.8rem;transition: all 0.2s ease;}
.clear-cache-btn:hover {color: #fff;border-color: #666;}
.clear-cache-btn.confirm {background: #e74c3c;color: #fff;border-color: #e74c3c;}

/* 缓存进度弹窗：固定角落、可拖动、可收起为胶囊 */
.cache-popup {position: fixed;right: 20px;bottom: 20px;width: 300px;background: rgba(28, 28, 28, 0.97);border: 1px solid #555;border-radius: 8px;box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);z-index: 4000;font-size: 0.85rem;user-select: none;}
.cache-popup-header {display: flex;align-items: center;gap: 8px;padding: 8px 12px;background: #2d2d2d;border-radius: 8px 8px 0 0;cursor: move;color: #ddd;}
.cache-popup.minimized .cache-popup-header {border-radius: 8px;padding: 6px 12px;}
.cache-popup-header .fa-cloud-arrow-down {color: #4aa3ff;}
.cache-popup-header .title {flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;min-width: 0;}
.cache-popup-header .paused-badge {font-size: 0.7rem;color: #4aa3ff;border: 1px solid rgba(74, 163, 255, 0.5);border-radius: 3px;padding: 1px 6px;flex-shrink: 0;}
.cache-popup-header button {background: transparent;border: none;color: #aaa;cursor: pointer;padding: 2px 6px;font-size: 0.8rem;display: inline-flex;align-items: center;justify-content: center;height: 20px;box-sizing: border-box;}
.cache-popup-header button:hover {color: #fff;}
.cache-popup-body {padding: 10px 12px;display: flex;flex-direction: column;gap: 6px;}
.cache-line {font-size: 0.75rem;color: #bbb;display: flex;justify-content: space-between;gap: 10px;}
.cache-line .current-title {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.cache-bar {height: 6px;background: #444;border-radius: 3px;overflow: hidden;}
.cache-bar > div {height: 100%;width: 0;background: #3498db;border-radius: 3px;transition: width 0.2s ease;}
/* 缓存队列列表：下载中绿色箭头，等待中灰色 */
.cache-queue {max-height: 200px;overflow-y: auto;display: flex;flex-direction: column;gap: 4px;}
.cache-item {display: flex;align-items: center;gap: 8px;padding: 4px 6px;border-radius: 4px;background: rgba(255, 255, 255, 0.04);}
.cache-item .st {width: 14px;text-align: center;font-size: 0.7rem;flex-shrink: 0;}
.cache-item .st.done {color: #42b983;}
.cache-item .st.active {color: #2ecc71;}
.cache-item .st.wait {color: #777;}
.cache-item .item-main {flex: 1;min-width: 0;}
.cache-item .item-line {display: flex;justify-content: space-between;gap: 8px;font-size: 0.75rem;color: #ccc;}
.cache-item .item-line .t {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.cache-item .item-line .s {color: #888;flex-shrink: 0;}
.cache-item .item-line .s.ok {color: #42b983;}
.cache-item .item-bar {height: 3px;background: #444;border-radius: 2px;margin-top: 3px;overflow: hidden;}
.cache-item .item-bar > div {height: 100%;background: #2ecc71;transition: width 0.15s ease;}
.cache-item .pin {background: transparent;border: none;color: #888;cursor: pointer;padding: 2px 4px;font-size: 0.7rem;flex-shrink: 0;}
.cache-item .pin:hover {color: #fff;}
.section-title.active {background: #3498db;border-radius: 4px 4px 0 0;}
.music-items {list-style: none;padding: 10px;margin: -10px 0 10px;background: #333;display: flex;flex-direction: column;gap: 10px;border-radius: 0 0 6px 6px;}
.music-item {display: flex;align-items: center;gap: 10px;padding: 8px 2px 8px 10px;background: #3a3a3a;border-radius: 4px;/* margin-bottom: 8px; */cursor: grab;border: 1px solid #444;}
.music-item:hover {background: #444;}
.music-item.dragging {opacity: 0.5;}
/* 三块布局:序号 | 标题+演唱者(上下) | 操作按钮 */
.music-item > .number {color: #777;font-size: 0.85rem;flex-shrink: 0;min-width: 1.4em;text-align: center;}
.music-info {flex: 1;display: flex;flex-direction: column;gap: 2px;min-width: 0;}
.music-info .title {font-weight: bold;font-size: 0.9rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.music-info .artist {color: #bbb;font-size: 0.75rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.music-info .cached-flag {color: #42b983;font-size: 0.85em;margin: 0 0 0 0.4em;}
.music-actions {display: flex;gap: 8px;align-items: center;padding: 8px;cursor: auto;}
.music-actions .love {cursor: pointer;font-size: 0.85rem;color: #fff;}
.music-actions .love.red {color: #e74c3c;}
.music-actions .music-cache {cursor: pointer;color: #4aa3ff;font-size: 0.85rem;transition: color 0.2s ease;}
.music-actions .music-cache:hover {color: #7cc0ff;}
.music-actions .music-cache.cached {color: #42b983;}
.music-actions .music-cache.cached:hover {transform: none;cursor: not-allowed;}
.music-actions .add {cursor: pointer;color: #4aa3ff;font-size: 1rem;}
.music-actions span:hover {transform: scale(1.15);}
.empty-list {text-align: center;color: #777;padding: 20px;}
.time{margin-left: auto;}
/* 渐变进行中：播放/暂停按钮半透明脉冲（提示"再点一下立即暂停"），徽标显示渐变倒计时 */
.track-controls .fading, .group-controls .fading { animation: fadePulse 1s ease-in-out infinite; }
@keyframes fadePulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.fade-badge {font-size: 0.7rem;color: #f5a623;border: 1px solid rgba(245, 166, 35, 0.5);border-radius: 3px;padding: 1px 6px;margin-right: 8px;white-space: nowrap;flex-shrink: 0;}
.fade-badge.fade-badge-in {color: #2ecc71;border-color: rgba(46, 204, 113, 0.5);}
.fade-badge.fade-badge-out {color: #f5a623;border-color: rgba(245, 166, 35, 0.5);}
.group-header .fade-badge {margin-right: 0;}
.group-name-input {background: #333;border: 1px solid #4aa3ff;border-radius: 4px;color: #eee;font-size: 1.1rem;font-weight: bold;padding: 2px 8px;width: 150px;outline: none;}
.track-info .cached-flag {color: #42b983;font-size: 0.85em;margin: 0 0.4em 0 0;}
.track-info .no-cache-flag {color: #f5a623;font-size: 0.85em;margin: 0 0.4em 0 0;}