/* =====================================================================
   GuitarTunerOnline — тональность, темп, BPM
   Дополняет tuner.css и tools.css. Та же тёмная карточка .tool.
   ===================================================================== */

.pitch { position: relative; }

/* ---- загрузка ---- */
.pitch-drop {
  margin: 14px 16px 0; padding: 22px 16px; border-radius: 12px; text-align: center; cursor: pointer;
  background: var(--panel-2); border: 2px dashed var(--line-dark); transition: border-color .15s, background .15s;
}
.pitch-drop.is-over { border-color: var(--accent); background: var(--panel-3); }
.pitch-drop b { display: block; font-size: 17px; margin-bottom: 4px; }
.pitch-drop small { color: var(--on-dim); font-size: 13px; }
.pitch-drop input { display: none; }
.pitch-drop .drop-btn {
  display: inline-block; margin-top: 10px; padding: 11px 20px; font-weight: 600; font-size: 15px; line-height: 1; font-family: inherit;
  color: #fff; background: var(--accent); border: 0; border-radius: 10px; cursor: pointer;
}
.has-file .pitch-drop { padding: 10px 14px; margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; }
.has-file .pitch-drop b, .has-file .pitch-drop small { display: none; }
.has-file .pitch-drop .drop-btn { margin: 0; padding: 8px 14px; font-size: 13px; background: var(--panel-3); border: 1px solid var(--line-dark); }
.pitch-file { font-size: 13px; color: var(--on-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pitch-file:empty { display: none; }
.pitch-status { margin: 8px 16px 0; font-size: 13px; color: var(--on-dim); }
.pitch-status:empty { display: none; }
.pitch-status.is-err { color: var(--off); }
.pitch-status.is-warn { color: var(--warn); }
.is-loading .pitch-drop { opacity: .6; pointer-events: none; }

/* ---- анализ ---- */
.pitch-analysis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 12px 16px 0; }
.pitch-analysis:empty { display: none; }
.an-wait { color: var(--on-dim); font-size: 13px; }
.an-card { position: relative; background: var(--panel-2); border: 1px solid var(--line-dark); border-radius: 10px; padding: 10px 12px; }
.an-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--on-dim); }
.an-card b { font-size: 28px; font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.an-card small { margin-left: 6px; color: var(--on-dim); font-size: 13px; }
.an-after, .an-note { display: block; font-size: 12px; color: var(--on-dim); margin-top: 2px; }
.an-after { color: var(--ok); }
.an-mul { position: absolute; right: 10px; top: 10px; display: flex; gap: 4px; }
.an-mul button { width: 30px; height: 24px; font-size: 12px; font-family: inherit; color: var(--on-dark); background: var(--panel-3); border: 1px solid var(--line-dark); border-radius: 6px; cursor: pointer; }
.an-mul button:hover { background: var(--panel); }

/* ---- волна и транспорт ---- */
.pitch-wave-box { margin: 12px 16px 0; display: none; }
.has-file .pitch-wave-box { display: block; }
.pitch-wave { display: block; width: 100%; height: 72px; border-radius: 8px; background: var(--panel-2); cursor: pointer; }
.pitch-transport { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pitch-play {
  display: inline-flex; align-items: center; gap: 8px; min-width: 128px; justify-content: center;
  padding: 12px 18px; font-weight: 600; font-size: 15px; line-height: 1; font-family: inherit; color: #fff;
  background: var(--accent); border: 0; border-radius: 10px; cursor: pointer;
}
.pitch-play:hover { background: #1c9350; }
.is-playing .pitch-play { background: var(--panel-3); border: 1px solid var(--line-dark); }
.pitch-ab {
  padding: 11px 14px; font-weight: 600; font-size: 14px; line-height: 1; font-family: inherit; color: var(--on-dark);
  background: var(--panel-2); border: 1px solid var(--line-dark); border-radius: 10px; cursor: pointer; min-width: 104px;
}
.pitch-ab.is-orig { color: var(--warn); border-color: var(--warn); }
.pitch-time { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--on-dim); margin-left: auto; }
.pitch-stop { width: 40px; height: 40px; border-radius: 10px; font-family: inherit; color: var(--on-dark); background: var(--panel-2); border: 1px solid var(--line-dark); cursor: pointer; font-size: 14px; }
.pitch-vol { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--on-dim); }
.pitch-vol input { width: 80px; accent-color: var(--accent); }

/* ---- ручки ---- */
.pitch-controls { padding: 14px 16px 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pitch-ctl { background: var(--panel-2); border: 1px solid var(--line-dark); border-radius: 12px; padding: 12px; }
.pitch-ctl h3 { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--on-dim); margin-bottom: 6px; }
.pitch-ctl h3 b { font-size: 24px; color: var(--on-dark); font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.pitch-ctl input[type=range] { width: 100%; accent-color: var(--accent); height: 28px; }
.ctl-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; font-size: 13px; color: var(--on-dim); }
.ctl-row label { color: var(--on-dim); }
.step-btn {
  min-width: 40px; height: 32px; padding: 0 10px; font-weight: 600; font-size: 13px; line-height: 1; font-family: inherit; color: var(--on-dark);
  background: var(--panel-3); border: 1px solid var(--line-dark); border-radius: 8px; cursor: pointer;
}
.step-btn:hover { background: var(--panel); }
.ctl-row select, .ctl-row input[type=number] {
  padding: 6px 8px; font-size: 14px; font-family: inherit; color: var(--on-dark);
  background: var(--panel-3); border: 1px solid var(--line-dark); border-radius: 6px; min-width: 0;
}
.ctl-row input[type=number] { width: 72px; }
.ctl-row select { max-width: 100%; }
.ctl-row .switch { margin-left: auto; }
.ctl-sep { width: 100%; height: 0; }

/* пресеты */
.pitch-presets { padding: 8px 16px 12px; }
.pitch-presets .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pitch-presets .chip {
  padding: 8px 12px; font-size: 13px; font-family: inherit; color: var(--on-dark);
  background: var(--panel-2); border: 1px solid var(--line-dark); border-radius: 999px; cursor: pointer;
}
.pitch-presets .chip:hover { background: var(--panel-3); }

/* петля и тренажёр (полный режим) */
.pitch-loop { border-top: 1px solid var(--line-dark); padding: 12px 16px; }
.pitch-loop .panel-title { margin-bottom: 8px; }
.loop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.loop-card { background: var(--panel-2); border: 1px solid var(--line-dark); border-radius: 10px; padding: 10px 12px; }
.loop-card h4 { font-size: 14px; font-weight: 600; margin-bottom: 4px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.loop-card p { font-size: 12px; color: var(--on-dim); margin-bottom: 6px; line-height: 1.4; }
.tr-status { font-size: 12px; color: var(--ok); margin-top: 4px; min-height: 16px; }
.is-trainer #tr-start { display: none; }
#tr-stop { display: none; }
.is-trainer #tr-stop { display: inline-block; }

/* экспорт */
.pitch-export { border-top: 1px solid var(--line-dark); padding: 14px 16px 16px; }
.pitch-export .panel-title { margin-bottom: 8px; }
.exp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.exp-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; font-weight: 600; font-size: 15px; line-height: 1; font-family: inherit;
  color: #fff; background: var(--accent); border: 0; border-radius: 10px; cursor: pointer;
}
.exp-btn:hover { background: #1c9350; }
.exp-btn.is-ghost { color: var(--on-dark); background: var(--panel-2); border: 1px solid var(--line-dark); }
.exp-btn.is-ghost:hover { background: var(--panel-3); }
.exp-row select { padding: 8px 10px; font-size: 14px; font-family: inherit; color: var(--on-dark); background: var(--panel-2); border: 1px solid var(--line-dark); border-radius: 8px; }
.exp-opts { margin-top: 8px; font-size: 13px; color: var(--on-dim); display: flex; gap: 14px; flex-wrap: wrap; }
.exp-opts label { display: inline-flex; align-items: center; gap: 6px; }
.exp-bar { height: 6px; margin-top: 10px; border-radius: 3px; background: var(--panel-2); overflow: hidden; display: none; }
.exp-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.exp-label { font-size: 12px; color: var(--on-dim); margin-top: 4px; display: none; }
.is-exporting .exp-bar, .is-exporting .exp-label { display: block; }
.is-exporting .exp-btn { opacity: .5; pointer-events: none; }
.pitch:not(.has-file) .pitch-export, .pitch:not(.has-file) .pitch-controls, .pitch:not(.has-file) .pitch-presets, .pitch:not(.has-file) .pitch-loop { opacity: .45; pointer-events: none; }
.pitch-share { display: flex; gap: 6px; margin-top: 10px; }
.pitch-share input { flex: 1 1 auto; min-width: 0; padding: 8px 10px; font-size: 13px; font-family: inherit; color: var(--on-dim); background: var(--panel-2); border: 1px solid var(--line-dark); border-radius: 8px; }
.pitch-share button { padding: 8px 12px; font-size: 13px; font-family: inherit; color: var(--on-dark); background: var(--panel-3); border: 1px solid var(--line-dark); border-radius: 8px; cursor: pointer; white-space: nowrap; }
.pitch-share small { display: block; font-size: 12px; color: var(--on-dim); margin-top: 4px; }

/* гитарный блок и оффер — под карточкой, на светлом фоне */
.pitch-guitar { margin-top: 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.pitch-guitar:empty { display: none; }
.pitch-guitar h3 { font-size: 15px; margin-bottom: 6px; }
.pitch-guitar p { font-size: 15px; margin-bottom: 6px; }
.pitch-guitar-links { font-size: 14px; }
#pitch-guitar:empty { display: none; }
#pitch-offer .tuned-offer { margin-top: 14px; }

/* пакетный анализ */
.bpm-batch { margin: 12px 16px 0; }
.bpm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.bpm-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--on-dim); padding: 6px 8px; border-bottom: 1px solid var(--line-dark); }
.bpm-table td { padding: 8px; border-bottom: 1px solid var(--line-dark); vertical-align: top; }
.bpm-table tr[data-i] { cursor: pointer; }
.bpm-table tr[data-i]:hover td { background: var(--panel-2); }
.bpm-name { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bpm-table b { font-size: 18px; font-variant-numeric: tabular-nums; }
.bpm-table small { color: var(--on-dim); }
.bpm-wait { color: var(--on-dim); }
.bpm-batch-actions { margin-top: 10px; display: flex; gap: 8px; }

/* простой / полный режим */
.pitch[data-mode="simple"] .only-full { display: none !important; }
.pitch[data-mode="full"] .only-simple { display: none !important; }

@media (max-width: 640px) {
  .pitch-controls { grid-template-columns: 1fr; }
  .loop-grid { grid-template-columns: 1fr; }
  .pitch-time { width: 100%; margin-left: 0; text-align: right; order: 9; }
  .an-card b { font-size: 24px; }
  .pitch-ctl h3 b { font-size: 20px; }
  .bpm-name { max-width: 120px; }
}

/* оффер под карточкой стоит на светлом фоне — делаем его тёмной карточкой */
#pitch-offer .tuned-offer { background: var(--panel); color: var(--on-dark); max-width: none; }
#pitch-offer .tuned-offer-text { color: var(--on-dim); }

/* шапка карточки на телефоне — одна строка */
@media (max-width: 640px) {
  .pitch .tool-settings { padding: 10px 12px; }
  .pitch .tool-settings .field div { display: none; }
  .pitch .tool-settings .field label { font-size: 12px; }
}