/* sfx.css —— 「复古音效生成」独立页
 * 跟 matte.css / splitter.css 同一套规矩：
 *   ① 容器上显式声明 color —— body 在 data-theme 作用域外，不写会继承成浅色字；
 *   ② 颜色一律走令牌变量，不写死（写死必踩深浅主题陷阱）。 */

.sfx-tool{margin-top:26px}

.sfx-step{display:flex;gap:14px;margin-bottom:16px}
.sfx-step-n{
  flex:none;width:28px;height:28px;border-radius:50%;
  background:var(--primary);color:#fff;font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:2px;
}
.sfx-step-b{
  flex:1;min-width:0;background:var(--bg-panel);border:1px solid var(--border);
  border-radius:12px;padding:16px;color:var(--text-1);
}
.sfx-step-b .sec-title{color:var(--text-1)}
.sfx-step-b .hint{color:var(--muted)}

/* ---- ① 音效类型按钮 ---- */
.sfx-keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));gap:10px}
.sfx-key{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  background:var(--bg-inset);border:1px solid var(--border);border-radius:10px;
  padding:12px 8px;cursor:pointer;color:var(--text-1);font-family:inherit;
  font-size:13px;transition:border-color .15s,background .15s;
}
.sfx-key:hover{border-color:var(--primary)}
.sfx-key.on{border-color:var(--primary);background:var(--primary-soft);color:var(--text-1)}
[data-theme="dark"] .sfx-key.on{background:rgba(124,92,255,.18)}
.sfx-key-i{font-size:20px;line-height:1.2}
.sfx-key-d{font-size:11.5px;color:var(--muted)}

/* ---- ② 参数区 ---- */
.sfx-ctrl{
  display:flex;flex-direction:column;gap:10px;
  background:var(--bg-inset);border:1px solid var(--border);
  border-radius:10px;padding:12px 14px;
}
.sfx-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sfx-lab{font-size:12.5px;color:var(--text-2);min-width:68px}
.sfx-row input[type=range]{width:168px;max-width:44vw}
.sfx-row select{
  background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;
  color:var(--text-1);font-size:13px;padding:5px 8px;font-family:inherit;
}
.sfx-val{font-size:12.5px;color:var(--text-2);min-width:44px}
.sfx-status{font-size:12.5px;color:var(--text-2)}
.sfx-status.sfx-ok{color:var(--accent);font-weight:600}
.sfx-status.sfx-warn{color:#f5a524;font-weight:600}

/* 波形预览 */
.sfx-wave{
  position:relative;border:1px solid var(--border);border-radius:10px;
  background:var(--bg-panel);overflow:hidden;margin-top:12px;line-height:0;
}
.sfx-wave canvas{display:block;width:100%;height:120px}
.sfx-wave-empty{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--muted);line-height:1.6;
}
.sfx-meter{
  display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12.5px;color:var(--text-2);
}
.sfx-meter-bar{
  flex:1;max-width:260px;height:8px;border-radius:5px;background:var(--bg-inset);
  border:1px solid var(--border);overflow:hidden;
}
.sfx-meter-fill{height:100%;background:var(--primary);width:0}
.sfx-meter-fill.hot{background:#e5484d}

/* ---- ③ 全部预设列表 ---- */
.sfx-list{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.sfx-item{
  display:flex;align-items:center;gap:10px;
  background:var(--bg-inset);border:1px solid var(--border);border-radius:9px;padding:7px 10px;
}
.sfx-item.on{border-color:var(--primary)}
.sfx-item-play{
  flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--border);
  background:var(--bg-panel);color:var(--text-1);cursor:pointer;font-size:12px;
  display:flex;align-items:center;justify-content:center;
}
.sfx-item-play:hover{border-color:var(--primary);color:var(--primary)}
.sfx-item-name{flex:1;min-width:0;font-size:13px;color:var(--text-1)}
.sfx-item-dur{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.sfx-item label{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--text-2)}

/* ---- ④ 导出 ---- */
.sfx-opt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0}
.sfx-txt{
  background:var(--bg-inset);border:1px solid var(--border);border-radius:8px;
  color:var(--text-1);font-size:13px;padding:5px 8px;width:150px;
}
.sfx-txt:focus{outline:none;border-color:var(--primary)}
.sfx-note{
  font-size:12.5px;line-height:1.6;color:var(--text-2);
  background:var(--primary-soft);border-radius:9px;padding:7px 10px;margin-top:10px;
}
[data-theme="dark"] .sfx-note{background:rgba(124,92,255,.18);color:var(--text-1)}

@media (max-width:760px){
  .sfx-step-n{width:24px;height:24px;font-size:12px}
  .sfx-step-b{padding:13px}
  .sfx-row input[type=range]{width:130px}
  .sfx-lab{min-width:56px}
  .sfx-keys{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
}