/* 秋招工作台 · sound-mixer.css —— 专注伴奏与白噪音调音台 */
/* ==========================================================================
   6. 专注伴奏与白噪音调音台 (Sound Mixer)
   ========================================================================== */
.sound-mixer-card {
  max-width: 720px; width: 95vw; max-height: 88vh; display: flex; flex-direction: column;
  padding: 24px 26px; border-radius: 20px; background: var(--panel) !important; color: var(--ink);
  border: 1.5px solid var(--line);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.sound-mixer-body {
  overflow-y: auto; flex: 1; min-height: 0; padding-right: 6px; margin-top: 14px;
}
.sound-mixer-top-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 18px; background: var(--panel-sub); border: 1px solid var(--line);
  border-radius: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.sound-playing-status {
  display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 750;
  color: var(--ink);
}
.sound-playing-dot {
  width: 10px; height: 10px; border-radius: 50%; background: #10b981;
  box-shadow: 0 0 10px #10b981; flex: none;
}
.sound-playing-dot.paused {
  background: var(--faint); box-shadow: none;
}
.sound-vol-control {
  display: flex; align-items: center; gap: 10px;
}
.sound-vol-label {
  font-size: 13px; font-weight: 700; color: var(--ink);
}
.sound-vol-slider {
  width: 120px; height: 6px; accent-color: var(--accent); cursor: pointer;
}
.sound-vol-val {
  font-size: 13px; font-weight: 800; font-family: var(--font-mono); width: 38px; text-align: right; color: var(--accent);
}
.sound-sec-title {
  font-size: 13.5px; font-weight: 800; color: var(--ink);
  letter-spacing: .02em; margin: 16px 0 10px; display: flex; align-items: center; gap: 6px;
}
.sound-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px;
}
.sound-card {
  display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px;
  background: var(--panel); border: 1.5px solid var(--line); border-radius: 14px;
  cursor: pointer; transition: all .18s ease; position: relative; user-select: none;
  color: var(--ink);
}
.sound-card:hover {
  border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.sound-card.active {
  border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent);
}
.sound-card-icon {
  font-size: 26px; line-height: 1; flex: none; margin-top: 2px;
}
.sound-card-content { flex: 1; min-width: 0; }
.sound-card-title {
  font-size: 13.5px; font-weight: 800; color: var(--ink); margin-bottom: 4px;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.sound-card.active .sound-card-title {
  color: var(--accent);
}
.sound-card-badge {
  font-size: 11px; font-weight: 750; padding: 2px 8px; border-radius: 6px;
  background: var(--panel-sub); color: var(--accent); border: 1px solid var(--line);
  white-space: nowrap; flex: none;
}
.sound-card.active .sound-card-badge {
  background: var(--accent); color: #ffffff; border-color: var(--accent);
}
.sound-card-desc {
  font-size: 12px; line-height: 1.5; font-weight: 550;
  color: var(--ink); opacity: 0.85;
}
html[data-theme="light"] .sound-card-desc {
  color: #334155; /* 纯正墨黑，在白底与淡蓝底上均极度清晰 */
  opacity: 1;
}
html[data-theme="dark"] .sound-card-desc {
  color: #cbd5e1; /* 象牙浅白，在暗曜石底上极度清晰 */
  opacity: 1;
}
.sound-mixer-footer {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  background: var(--panel);
}
.sound-auto-play-label {
  font-size: 13px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; cursor: pointer;
}
.sound-auto-play-label input[type="checkbox"] {
  width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer;
}