/* === toooalll FM === */

.fm-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:24px;border-bottom:1px solid var(--border);padding-bottom:16px}
.fm-header-title{font-size:22px;font-weight:600;letter-spacing:1px;color:var(--text-primary)}
.fm-header-count{font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono);letter-spacing:0.05em}
.fm-header-count strong{color:var(--text-secondary);font-weight:500}

/* Now playing */
.fm-now{background:var(--bg-panel);border:1px solid var(--border);border-radius:4px;padding:18px 20px;margin-bottom:14px}
.fm-now-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.fm-now-index{font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono);letter-spacing:0.05em}
.fm-now-mode{font-size:10px;color:var(--accent-purple);font-family:var(--font-mono);letter-spacing:0.1em;text-transform:uppercase}
.fm-now-title{font-size:16px;color:var(--text-primary);font-weight:500;margin-bottom:14px;word-wrap:break-word;line-height:1.4}
.fm-viz{height:48px;background:rgba(0,0,0,0.2);border-radius:2px;position:relative;overflow:hidden;margin-bottom:10px}
.fm-viz canvas{width:100%;height:100%;display:block}
.fm-progress-bar{height:3px;background:var(--border);border-radius:2px;overflow:hidden;position:relative;margin-bottom:6px}
.fm-progress{height:100%;width:0;background:var(--accent-purple);transition:width 0.1s linear}
.fm-times{display:flex;justify-content:space-between;font-size:10px;color:var(--text-tertiary);font-family:var(--font-mono)}

/* Transport */
.fm-transport{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 0 4px}
.fm-btn{background:none;border:1px solid var(--border);color:var(--text-secondary);font-size:11px;padding:8px 14px;border-radius:4px;cursor:pointer;font-family:var(--font-mono);letter-spacing:0.05em;transition:all 0.1s ease-out}
.fm-btn:hover{border-color:var(--text-tertiary);color:var(--text-primary)}
.fm-btn.active{background:var(--accent-purple);border-color:var(--accent-purple);color:#fff}
.fm-btn-play{width:48px;height:48px;border-radius:50%;font-size:14px;display:flex;align-items:center;justify-content:center;padding:0;color:var(--text-primary);border-color:var(--text-tertiary)}
.fm-btn-play:hover{background:var(--accent-purple);border-color:var(--accent-purple);color:#fff}

/* Controls */
.fm-controls{background:var(--bg-panel);border:1px solid var(--border);border-radius:4px;padding:16px 20px;margin-bottom:20px}
.fm-controls-title{font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono);letter-spacing:0.05em;text-transform:uppercase;margin-bottom:14px}
.fm-knob{display:grid;grid-template-columns:80px 1fr 70px;align-items:center;gap:12px;margin-bottom:12px}
.fm-knob:last-child{margin-bottom:0}
.fm-knob-label{font-size:11px;color:var(--text-secondary);font-family:var(--font-mono);text-transform:lowercase;letter-spacing:0.05em}
.fm-knob-val{font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono);text-align:right}
.fm-slider{-webkit-appearance:none;appearance:none;width:100%;height:3px;background:var(--border);outline:none;border-radius:2px;cursor:pointer}
.fm-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent-purple);cursor:pointer;transition:transform 0.1s}
.fm-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}
.fm-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--accent-purple);cursor:pointer;border:none}

/* Track list */
.fm-list-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.fm-list-title{font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono);letter-spacing:0.05em;text-transform:uppercase}
.fm-list-hint{font-size:10px;color:var(--text-tertiary)}
.fm-track-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2px;max-height:480px;overflow-y:auto;border:1px solid var(--border);border-radius:4px;padding:6px}
.fm-track-item{display:flex;align-items:center;gap:10px;padding:7px 10px;background:none;border:none;color:var(--text-secondary);font-family:var(--font-sans);font-size:12px;cursor:pointer;text-align:left;border-radius:3px;transition:background 0.1s ease-out}
.fm-track-item:hover{background:var(--bg-modal);color:var(--text-primary)}
.fm-track-item.playing{background:rgba(124,106,247,0.1);color:var(--text-primary)}
.fm-track-item.playing .fm-track-num{color:var(--accent-purple)}
.fm-track-num{font-family:var(--font-mono);font-size:10px;color:var(--text-tertiary);width:34px;flex-shrink:0;letter-spacing:0.05em}
.fm-track-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media(max-width:768px){
  .fm-knob{grid-template-columns:70px 1fr 60px;gap:8px}
  .fm-track-list{grid-template-columns:1fr;max-height:360px}
}