:root{
  --bg:#f8fbff;--card:#fff;--text:#182135;--muted:#7b869b;--line:#e5eaf2;--line2:#d8dfeb;
  --accent:#2f68ff;--accentSoft:#edf3ff;--danger:#e54f59;--shadow:0 10px 34px rgba(28,42,73,.07);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
button,input,select{font:inherit}button{touch-action:manipulation}
body{min-height:100vh}
.page{max-width:1320px;margin:auto;padding:14px 12px calc(28px + env(safe-area-inset-bottom))}
.hero{padding:8px 4px 12px}.heroRow{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
h1{font-size:22px;line-height:1.2;margin:0 0 6px;font-weight:780;letter-spacing:-.02em}.subtitle{margin:0;color:var(--muted);font-size:13px}
.iconBtn{width:42px;height:42px;border:1px solid var(--line);background:var(--card);border-radius:13px;display:grid;place-items:center;box-shadow:0 3px 14px rgba(30,45,80,.04)}
.card{background:var(--card);border:1px solid rgba(224,229,238,.95);border-radius:var(--radius);box-shadow:var(--shadow)}
.controlCard{padding:14px}
.modeSwitch{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;background:#eef2f7;border-radius:14px;margin-bottom:14px}
.modeBtn{height:40px;border:0;border-radius:11px;background:transparent;color:var(--muted);font-weight:680}.modeBtn.active{background:#fff;color:var(--text);box-shadow:0 2px 8px rgba(30,45,80,.08)}
.recordWrap{display:grid;place-items:center;padding:8px 0 2px}
.recordBtn{position:relative;width:112px;height:112px;border-radius:50%;border:0;background:#fff;box-shadow:0 0 0 1px var(--line),0 10px 30px rgba(34,49,85,.12);display:grid;place-items:center}
.recordBtn::before{content:"";width:72px;height:72px;border-radius:50%;background:var(--accent);transition:.2s}
.recordBtn.recording::before{width:52px;height:52px;border-radius:15px;background:var(--danger)}
.recordBtn::after{content:"开始录音";position:absolute;inset:auto 0 -28px;font-size:13px;font-weight:680;color:var(--muted)}
.recordBtn.recording::after{content:"停止录音";color:var(--danger)}
.recMeta{height:60px;margin-top:31px;text-align:center}.timer{font-size:28px;font-variant-numeric:tabular-nums;font-weight:730}.status{font-size:12px;color:var(--muted);margin-top:2px}.status.live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--danger);margin-right:6px;vertical-align:1px}
.postRec{display:none;margin-top:10px}.postRec.show{display:block}.fileName{padding:10px 12px;border:1px solid var(--line);border-radius:12px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.playerRow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;margin-top:8px;width:100%}.playerRow audio{width:100%;min-width:0}.primary,.secondary{height:42px;border-radius:12px;padding:0 15px;font-weight:680}.primary{border:0;background:var(--accent);color:#fff}.secondary{border:1px solid var(--line);background:#fff;color:var(--text)}
.filePanel{display:none}.filePanel.show{display:block}.recPanel.hide{display:none}.importedAudioPanel{display:none}.importedAudioPanel.show{display:block}
.dropZone{border:1.5px dashed var(--line2);border-radius:16px;padding:28px 16px;text-align:center;background:#fafbfe}.dropZone strong{display:block;font-size:15px;margin-bottom:5px}.dropZone span{font-size:12px;color:var(--muted)}.dropGap{height:12px}.audioPlayer{width:100%;margin-top:12px}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}.metric{padding:10px}.metricLabel{font-size:11px;color:var(--muted);margin-bottom:4px}.metricValue{font-size:17px;font-weight:730;font-variant-numeric:tabular-nums;white-space:nowrap}.metricValue small{font-size:10px;color:var(--muted);font-weight:600;margin-left:2px}
.mainTabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;background:#eef1f6;padding:4px;border-radius:13px;margin-bottom:10px;position:sticky;top:8px;z-index:5}
.tab{height:38px;border:0;border-radius:10px;background:transparent;color:var(--muted);font-weight:680}.tab.active{background:#fff;color:var(--text);box-shadow:0 2px 7px rgba(30,45,80,.07)}
.plotPane{display:none}.plotPane.active{display:block}.plotCard{padding:12px 12px 10px;overflow:hidden}
.plotHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.plotTitle{font-size:14px;font-weight:740}.plotSub{font-size:11px;color:var(--muted)}
.spectrumModes{display:flex;gap:6px;overflow:auto;padding-bottom:8px}.chip{height:34px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:0 13px;color:var(--muted);font-size:12px;font-weight:670;white-space:nowrap}.chip.active{background:var(--accentSoft);border-color:#cfdbff;color:var(--accent)}
.canvasWrap{position:relative;height:310px;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#fcfdff}
canvas{display:block;width:100%;height:100%;touch-action:none}.cursorTip{position:absolute;display:none;pointer-events:none;padding:6px 8px;background:rgba(23,32,51,.92);color:#fff;border-radius:8px;font-size:11px;line-height:1.45;white-space:nowrap;transform:translate(8px,-50%)}.cursorTip.show{display:block}
.playhead{position:absolute;top:0;bottom:0;width:1px;background:rgba(229,79,89,.95);display:none;pointer-events:none}.playhead.show{display:block}
.miniWaveCard{margin-top:6px}
.miniWaveHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;font-size:11px;color:var(--muted)}
.miniWaveHead>span:first-child{font-weight:700;color:var(--text)}
.miniWaveWrap{position:relative;height:82px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fbfcfe}
.miniWaveWrap canvas{width:100%;height:100%;display:block;touch-action:none}
.miniPlayhead{position:absolute;top:0;bottom:0;width:2px;background:rgba(229,79,89,.9);display:none;pointer-events:none}
.miniPlayhead.show{display:block}
.orderPanel{padding:12px}.orderTop{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;align-items:stretch}.orderStat{padding:11px;border:1px solid var(--line);border-radius:12px}.orderStat .k{font-size:11px;color:var(--muted)}.orderStat .v{font-size:18px;font-weight:730;margin-top:3px}
.settings{margin-top:10px;padding:14px}.settingsTitle{display:flex;justify-content:space-between;align-items:center;font-weight:730;font-size:14px;cursor:pointer}.settingsArrow{width:30px;height:30px;border:1px solid var(--line);border-radius:10px;background:#fff;display:grid;place-items:center;transition:transform .2s,background .2s,border-color .2s;color:#6f7b90;box-shadow:0 1px 3px rgba(30,45,80,.03)}
.settingsTitle:hover .settingsArrow{background:#f7f9fc;border-color:#d8dfeb}
.settings.open .settingsArrow{transform:rotate(180deg)}
.settingsBody{display:none;padding-top:12px}.settings.open .settingsBody{display:grid}.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}label{display:grid;gap:6px;font-size:11px;color:var(--muted)}select,input[type="number"]{height:40px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text);padding:0 10px;outline:none;min-width:0}
.hint{margin:10px 2px 0;color:var(--muted);font-size:11px;line-height:1.55}.analysisState{font-size:11px;color:var(--muted);margin-top:6px}.desktopPlotSpacer{display:none}.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#172033;color:#fff;padding:9px 12px;border-radius:10px;font-size:12px;z-index:20;transition:.2s;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:760px){
 .page{padding:24px}h1{font-size:27px}.topGrid{display:grid;grid-template-columns:440px 1fr;gap:12px;align-items:stretch}.metrics{margin:0;grid-template-columns:repeat(2,1fr)}.metric{display:flex;flex-direction:column;justify-content:center}.mainTabs{position:static}.canvasWrap{height:360px}
}
@media(min-width:1050px){
 .page{max-width:1360px}
 .topGrid{grid-template-columns:minmax(0,1fr) 360px;gap:12px;align-items:stretch}
 .controlCard{min-width:0;height:100%}
 .metrics{margin:0;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;align-self:stretch}
 .metric{min-width:0;padding:10px 12px;box-shadow:none}
 .metricLabel{font-size:10px;margin-bottom:2px}
 .metricValue{font-size:16px}
 .playerRow{grid-template-columns:minmax(0,1fr) 108px;gap:8px;width:100%}
 .playerRow audio{display:block;width:100%;min-width:0;max-width:none}
 .mainTabs{display:none}
 .plots{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:430px 420px;gap:12px;align-items:stretch}
 .plotPane{display:block!important;min-width:0;height:100%}
 .plotPane[data-pane="spectrum"]{grid-column:1;grid-row:1}
 .plotPane[data-pane="spectrogram"]{grid-column:2;grid-row:1}
 .plotPane[data-pane="order"]{grid-column:1 / -1;grid-row:2}
 .plotPane>.plotCard{height:100%;display:flex;flex-direction:column;min-height:0}
 .plotPane .canvasWrap{height:auto!important;min-height:0;flex:1}
 .plotPane[data-pane="spectrum"] .canvasWrap,
 .plotPane[data-pane="spectrogram"] .canvasWrap{min-height:320px}
 .plotPane[data-pane="order"] .canvasWrap{min-height:235px}
 .plotPane[data-pane="order"] .orderTop{grid-template-columns:repeat(4,minmax(0,1fr));align-items:end}
 .plotPane[data-pane="order"] .hint{margin-top:8px;flex:0 0 auto}
 .miniWaveWrap{height:92px}
 .spectrumModes{min-height:42px}
 .desktopPlotSpacer{display:block;height:42px;flex:0 0 42px}
 .settings{margin-top:12px}
 .formGrid{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:1250px){
 .topGrid{grid-template-columns:minmax(0,1fr) 340px}
}
@media(max-width:420px){.metricValue{font-size:15px}.metrics{gap:6px}.metric{padding:9px 8px}.canvasWrap{height:285px}.playerRow{grid-template-columns:1fr}.playerRow .primary{width:100%}}