/* ============================================================
   波形切段编辑器
   ============================================================ */
.le-panel {
  margin-top: 12px;
  background: var(--bg-deep, #0A0B1A);
  border: 1px solid var(--border, #2a2d3e);
  border-radius: var(--radius-md, 12px);
  padding: 14px 16px 16px;
  animation: leIn .24s ease-out;
}
@keyframes leIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.le-loading { color: var(--text-3, #8b8fa3); font-size: 14px; padding: 18px 4px; display: flex; align-items: center; gap: 8px; }
.le-loading.le-err { color: var(--danger, #f53f3f); }

.le-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.le-title { font-weight: 700; color: var(--text-1, #fff); font-size: 15px; }
.le-hint { color: var(--text-3, #8b8fa3); font-size: 12px; flex: 1; }
.le-fmt-wrap {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-2, #c7c9d9);
}
.le-fmt {
  background: var(--bg-card, #1a1d2e); color: var(--text-1, #fff);
  border: 1px solid var(--border, #2a2d3e); border-radius: 6px;
  padding: 4px 8px; font-size: 13px; cursor: pointer;
}
.le-close {
  border: 0; background: transparent; color: var(--text-3, #8b8fa3);
  font-size: 22px; line-height: 1; cursor: pointer; width: 28px; height: 28px; border-radius: 6px;
}
.le-close:hover { background: rgba(255,255,255,.08); color: var(--text-1, #fff); }

/* 波形区 */
.le-wave-wrap { position: relative; height: 150px; width: 100%; user-select: none; }
.le-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.le-overlay { position: absolute; inset: 0; }

.le-zone { position: absolute; top: 0; bottom: 0; display: flex; align-items: flex-start; pointer-events: none; }
.le-zone span {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; margin: 6px; border-radius: 5px; color: #fff;
}
.le-zone-intro { background: rgba(74,158,255,.10); }
.le-zone-intro span { background: rgba(74,158,255,.85); }
.le-zone-loop  { background: rgba(233,30,99,.12); }
.le-zone-loop span { background: rgba(233,30,99,.9); }
.le-zone-outro { background: rgba(184,51,255,.10); }
.le-zone-outro span { background: rgba(184,51,255,.85); }

/* 重音点刻度 */
.le-onsets { position: absolute; inset: 0; pointer-events: none; }
.le-onsets i { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.16); }

/* 分隔线 */
.le-divider {
  position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: #fff; cursor: ew-resize; z-index: 5;
  box-shadow: 0 0 8px rgba(255,255,255,.5);
}
.le-divider i {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 14px; height: 28px; border-radius: 5px; background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.le-divider i::after {
  content: ''; position: absolute; inset: 0; margin: 6px 5px;
  border-left: 2px solid rgba(0,0,0,.35); border-right: 2px solid rgba(0,0,0,.35);
}
.le-d1 { background: var(--secondary, #4a9eff); box-shadow: 0 0 8px var(--secondary, #4a9eff); }
.le-d1 i { background: var(--secondary, #4a9eff); }
.le-d2 { background: var(--accent, #B833FF); box-shadow: 0 0 8px var(--accent, #B833FF); }
.le-d2 i { background: var(--accent, #B833FF); }

.le-cursor {
  position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: var(--gold, #ffd700); opacity: 0; pointer-events: none; z-index: 4;
  transition: opacity .15s;
}

/* 分段卡 */
.le-segs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; align-items: stretch; }
.le-seg {
  flex: 1; min-width: 200px;
  background: var(--bg-card, #1a1d2e); border: 1px solid var(--border, #2a2d3e);
  border-radius: var(--radius-sm, 8px); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.le-seg-intro { border-top: 2px solid var(--secondary, #4a9eff); }
.le-seg-loop  { border-top: 2px solid var(--primary, #E91E63); }
.le-seg-outro { border-top: 2px solid var(--accent, #B833FF); }
.le-seg-name { display: flex; align-items: baseline; gap: 8px; }
.le-seg-name b { font-size: 14px; color: var(--text-1, #fff); }
.le-range { font-size: 12px; color: var(--text-3, #8b8fa3); font-variant-numeric: tabular-nums; }
.le-seg-btns { display: flex; gap: 8px; margin-top: auto; }
.le-seg-btns .btn { flex: 1; justify-content: center; padding: 7px 10px; font-size: 13px; }

.le-fade { display: flex; flex-direction: column; gap: 4px; }
.le-fade label { font-size: 12px; color: var(--text-2, #c7c9d9); }
.le-fade label b { color: var(--primary, #E91E63); }
.le-fade-slider { width: 100%; accent-color: var(--primary, #E91E63); }

.le-stop { align-self: center; padding: 7px 16px; font-size: 13px; }

@media (max-width: 720px) {
  .le-seg { min-width: 100%; }
}

/* ---- 开发者中心 ---- */
.section-sub { color: var(--text-3, #8b8fa3); font-size: 14px; margin-top: 6px; }
.dev-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 8px 0 32px; }
.dev-step { display: flex; gap: 12px; background: var(--bg-card, #1a1d2e); border: 1px solid var(--border, #2a2d3e); border-radius: var(--radius-md, 12px); padding: 16px; }
.dev-step-n { flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--primary, #E91E63), var(--accent, #B833FF)); color: #fff; font-weight: 700; }
.dev-step b { color: var(--text-1, #fff); }
.dev-step p { color: var(--text-3, #8b8fa3); font-size: 13px; margin: 6px 0 10px; }
.dev-h3 { color: var(--text-1, #fff); font-size: 18px; margin: 24px 0 14px; }
.dev-plugins { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.dev-plugin { background: var(--bg-card, #1a1d2e); border: 1px solid var(--border, #2a2d3e); border-radius: var(--radius-md, 12px); padding: 16px; display: flex; flex-direction: column; }
.dev-plugin-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.dev-plugin-icon { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--radius-sm, 8px); background: var(--bg-card-2, #252640); color: var(--secondary, #4a9eff); font-weight: 700; font-size: 14px; }
.dev-plugin-head b { color: var(--text-1, #fff); display: block; }
.dev-plugin-meta { font-size: 12px; color: var(--text-3, #8b8fa3); }
.dev-plugin-steps { font-size: 13px; color: var(--text-2, #c7c9d9); line-height: 1.6; flex: 1; margin: 0 0 12px; }
.dev-tester { background: var(--bg-card, #1a1d2e); border: 1px solid var(--border, #2a2d3e); border-radius: var(--radius-md, 12px); padding: 16px; }
.dev-tester-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.dev-tester-row select, .dev-tester-row input { background: var(--bg-deep, #0A0B1A); border: 1px solid var(--border, #2a2d3e); border-radius: var(--radius-sm, 8px); color: var(--text-1, #fff); padding: 9px 12px; font-size: 13px; }
.dev-tester-row select { flex: 2; min-width: 220px; }
.dev-tester-row input { flex: 2; min-width: 200px; }
.dev-tester textarea { width: 100%; box-sizing: border-box; background: var(--bg-deep, #0A0B1A); border: 1px solid var(--border, #2a2d3e); border-radius: var(--radius-sm, 8px); color: var(--text-1, #fff); padding: 10px 12px; font-size: 13px; font-family: ui-monospace, monospace; margin-bottom: 10px; }
.dev-tester-out { background: var(--bg-deep, #0A0B1A); border: 1px solid var(--border, #2a2d3e); border-radius: var(--radius-sm, 8px); color: var(--text-2, #c7c9d9); padding: 12px; font-size: 12px; font-family: ui-monospace, monospace; max-height: 280px; overflow: auto; white-space: pre-wrap; word-break: break-all; }
.dev-note { color: var(--text-3, #8b8fa3); font-size: 13px; margin-top: 16px; }
.dev-note code { background: rgba(255,255,255,.08); padding: 1px 6px; border-radius: 4px; }

/* ---- API 密钥弹窗 ---- */
.api-key-card { width: min(560px, calc(100vw - 32px)); text-align: left; }
.api-key-hint { font-size: 12px; color: var(--text-3, #8b8fa3); line-height: 1.6; margin: 0 0 14px; }
.api-key-hint code { background: rgba(255,255,255,.08); padding: 1px 5px; border-radius: 4px; color: var(--text-2, #c7c9d9); }
.api-key-new { background: rgba(74,158,255,.1); border: 1px solid rgba(74,158,255,.3); border-radius: var(--radius-sm, 8px); padding: 10px 12px; margin-bottom: 14px; }
.api-key-new-label { font-size: 12px; color: var(--secondary, #4a9eff); margin-bottom: 6px; }
.api-key-new-row { display: flex; gap: 8px; align-items: center; }
.api-key-new-row code { flex: 1; font-size: 13px; color: var(--text-1, #fff); word-break: break-all; background: rgba(0,0,0,.25); padding: 6px 8px; border-radius: 6px; }
.api-key-form { display: flex; gap: 8px; margin-bottom: 14px; }
.api-key-form input { flex: 1; padding: 9px 12px; background: var(--bg-deep, #0A0B1A); border: 1px solid var(--border, #2a2d3e); border-radius: var(--radius-sm, 8px); color: var(--text-1, #fff); font-size: 14px; }
.api-key-form input:focus { outline: none; border-color: var(--primary, #E91E63); }
.api-key-list { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; }
.api-key-empty { font-size: 13px; color: var(--text-4, #5a5e75); padding: 8px 0; }
.api-key-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--bg-card, #1a1d2e); border: 1px solid var(--border, #2a2d3e); border-radius: var(--radius-sm, 8px); }
.aki-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aki-info code { font-size: 13px; color: var(--text-1, #fff); }
.aki-info span { font-size: 11px; color: var(--text-3, #8b8fa3); }
.aki-revoke { padding: 5px 12px; font-size: 12px; font-family: inherit; color: var(--danger, #f53f3f); background: transparent; border: 1px solid rgba(245,63,63,.4); border-radius: 8px; cursor: pointer; }
.aki-revoke:hover { background: rgba(245,63,63,.12); }

/* 音轨卡片：导出格式选择 */
.dl-group { display: inline-flex; align-items: stretch; }
.dl-group .dl-fmt {
  background: var(--bg-card, #1a1d2e); color: var(--text-2, #c7c9d9);
  border: 1px solid var(--border, #2a2d3e); border-right: 0;
  border-radius: var(--radius-sm, 8px) 0 0 var(--radius-sm, 8px);
  padding: 0 8px; font-size: 13px; cursor: pointer;
}
.dl-group [data-dl] { border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0; }

/* 波形点击/拖动跳转：允许点击落到 canvas，播放参考点常显 */
.le-canvas { cursor: crosshair; }
.le-overlay { pointer-events: none; }
.le-cursor.active { opacity: 1; }