:root {
  --bg: #0e1018;
  --panel: #171a26;
  --panel-2: #1e2230;
  --text: #e6e8ee;
  --muted: #8b90a0;
  --accent: #d9a441;
  --green: #3ddc84;
  --yellow: #f5c542;
  --red: #ff5b5b;
  --blue: #4a9eff;
  --radius: 14px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

.app { max-width: 860px; margin: 0 auto; padding: 20px 16px 40px; }

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: 0.5px; }
h1 .emoji { font-size: 1.7rem; }

.tabs { display: flex; gap: 6px; background: var(--panel); padding: 4px; border-radius: 12px; }
.tab {
  background: none; border: none; color: var(--muted);
  padding: 8px 20px; border-radius: 9px; cursor: pointer;
  font-size: 0.95rem; font-weight: 600; transition: all 0.2s;
}
.tab.active { background: var(--accent); color: #1a1205; }
.tab:hover:not(.active) { color: var(--text); }

/* Start overlay */
#startOverlay {
  position: fixed; inset: 0; background: rgba(14,16,24,0.96);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; z-index: 100;
}
#startOverlay.hidden { display: none; }
#startBtn {
  background: var(--accent); color: #1a1205; border: none;
  padding: 14px 36px; border-radius: 12px; font-size: 1.1rem; font-weight: 700;
  cursor: pointer; transition: transform 0.15s;
}
#startBtn:hover { transform: scale(1.04); }
#startHint { color: var(--muted); font-size: 0.85rem; max-width: 360px; text-align: center; line-height: 1.6; }

.tab-content { display: none; }
.tab-content.active { display: block; }

/* === Tuning === */
.strings {
  display: flex; justify-content: space-around; align-items: flex-end;
  gap: 8px; height: 240px; background: var(--panel);
  border-radius: var(--radius); padding: 16px; margin-bottom: 20px;
}
.string-col { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; flex: 1; }
.string-line {
  flex: 1; width: 3px; background: #3a3f50; border-radius: 2px;
  transition: all 0.2s; position: relative;
}
.string-col.active .string-line { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.string-col.active .string-line::after {
  content: ""; position: absolute; inset: 0; background: var(--accent);
  border-radius: 2px; animation: vibrate 0.4s ease-in-out infinite alternate;
}
@keyframes vibrate { from { opacity: 0.5; transform: scaleX(1); } to { opacity: 1; transform: scaleX(2.5); } }
.string-label { font-weight: 700; font-size: 1.1rem; }
.string-note { font-size: 0.72rem; color: var(--muted); }
.string-traj { width: 100%; height: 38px; margin-top: 2px; display: block; }
.string-col.active .string-label { color: var(--accent); }

.freq-display {
  text-align: center; margin-bottom: 20px; min-height: 96px;
}
#currentFreq { font-size: 3.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.freq-unit { font-size: 1.2rem; color: var(--muted); }
#freqStatus { font-size: 0.85rem; color: var(--muted); margin-top: 4px; }
#nearestInfo { font-size: 1.05rem; margin-top: 8px; font-weight: 600; }

/* color block meter */
.meter-wrap { background: var(--panel); border-radius: var(--radius); padding: 18px; margin-bottom: 20px; }
.meter-label { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--muted); margin-bottom: 10px; }
.blocks { display: flex; gap: 3px; height: 36px; }
.block { flex: 1; border-radius: 4px; background: #252937; transition: background 0.15s; }
.block.center { background: #2a3a2a; }
.deviation-text { text-align: center; margin-top: 12px; font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* threshold */
.threshold-control { background: var(--panel); border-radius: var(--radius); padding: 18px; }
.threshold-control label { font-size: 0.9rem; display: flex; justify-content: space-between; margin-bottom: 10px; }
.threshold-control label span { color: var(--accent); font-weight: 600; }
#thresholdSlider { width: 100%; accent-color: var(--accent); }
.volume-meter { height: 8px; background: #252937; border-radius: 4px; margin-top: 14px; overflow: hidden; }
#volumeBar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--green), var(--yellow), var(--red)); border-radius: 4px; transition: width 0.08s; }
.volume-labels { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--muted); margin-top: 4px; }

/* === Resonance === */
.resonance-info {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin-bottom: 18px;
}
.info-card { background: var(--panel); border-radius: 12px; padding: 14px; text-align: center; }
.info-card .label { font-size: 0.75rem; color: var(--muted); margin-bottom: 6px; }
.info-card .value { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }

canvas { width: 100%; background: var(--panel); border-radius: var(--radius); margin-bottom: 16px; display: block; }

.peaks-table { background: var(--panel); border-radius: var(--radius); padding: 16px; overflow-x: auto; }
.peaks-table h3 { font-size: 0.9rem; margin-bottom: 10px; color: var(--muted); }
.peaks-table table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.peaks-table th, .peaks-table td { padding: 6px 10px; text-align: left; }
.peaks-table th { color: var(--muted); font-weight: 600; border-bottom: 1px solid #2a2e3c; }
.peaks-table td { font-variant-numeric: tabular-nums; }
.tag { font-size: 0.7rem; padding: 2px 8px; border-radius: 6px; font-weight: 600; }
.tag-main { background: rgba(217,164,65,0.2); color: var(--accent); }
.tag-2nd { background: rgba(74,158,255,0.2); color: var(--blue); }
.tag-harm { background: rgba(61,220,132,0.15); color: var(--green); }

.tone-detail { background: var(--panel); border-radius: var(--radius); padding: 16px; margin-top: 16px; }
.tone-detail h3 { font-size: 0.9rem; margin-bottom: 10px; color: var(--muted); }
.tone-detail p { font-size: 0.85rem; line-height: 1.7; color: var(--text); }