/* Sound error cards */
.error-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; margin-bottom: 40px; overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s;
}
.error-card:hover { box-shadow: var(--shadow-md); }

.error-head {
  padding: 26px 30px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(180deg, #FDFCFA 0%, transparent 100%);
}
.error-num {
  font-family: var(--serif); font-size: .82rem; font-weight: 600;
  color: var(--brand-amber); letter-spacing: .08em;
}
.error-head h2 { font-size: 1.5rem; color: var(--brand-navy); }
.error-freq {
  margin-left: auto; font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 14px;
  background: var(--wrongbg); color: var(--wrong);
}
.error-body { padding: 26px 30px; }

.mistake-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 24px;
}
@media (max-width: 640px) { .mistake-row { grid-template-columns: 1fr; } }
.mistake-box { border-radius: 10px; padding: 16px 18px; font-size: .92rem; }
.mistake-box.wrong { background: var(--wrongbg); border-left: 4px solid var(--wrong); }
.mistake-box.right { background: var(--rightbg); border-left: 4px solid var(--right); }
.mistake-label {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 6px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.mistake-box.wrong .mistake-label { color: var(--wrong); }
.mistake-box.right .mistake-label { color: var(--right); }
.mistake-box b { color: var(--brand-navy); }
.hear-mini {
  border: 1px solid currentColor; background: transparent; color: inherit;
  font-size: .64rem; font-weight: 700; letter-spacing: .05em;
  padding: 3px 10px; border-radius: 12px; cursor: pointer;
  font-family: var(--sans); text-transform: uppercase;
  transition: all .15s;
}
.mistake-box.wrong .hear-mini:hover { background: var(--wrong); color: #fff; }
.mistake-box.right .hear-mini:hover { background: var(--right); color: #fff; }

.diagram-wrap {
  display: grid; grid-template-columns: 340px 1fr; gap: 28px;
  align-items: start; margin-bottom: 22px;
}
@media (max-width: 730px) { .diagram-wrap { grid-template-columns: 1fr; } }

.howto h3 { font-size: 1.02rem; color: var(--brand-navy); margin-bottom: 8px; }
.steps { list-style: none; margin: 10px 0; }
.steps li {
  position: relative; padding-left: 30px; margin-bottom: 10px; font-size: .9rem;
}
.steps li::before {
  content: attr(data-n);
  position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand-navy); color: #fff;
  font-size: .68rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.steps b { color: var(--brand-navy); }

.drill-area { border-top: 1px dashed var(--border); padding-top: 18px; margin-top: 4px; }
.drill-label {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--right); margin-bottom: 10px;
}
.drill-words { display: flex; gap: 9px; flex-wrap: wrap; }
.drill-word {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1.5px solid var(--right); color: var(--right);
  padding: 7px 16px; border-radius: 22px; cursor: pointer;
  font-family: var(--sans); font-size: .88rem; font-weight: 500;
  transition: all .15s;
}
.drill-word:hover, .drill-word.playing { background: var(--right); color: #fff; }
.drill-word svg { width: 13px; height: 13px; fill: currentColor; }

.pair-drills { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.pair-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: #F4F0E8; border-radius: 8px; padding: 7px 14px;
  font-size: .85rem; cursor: pointer; border: 1.5px solid transparent;
  transition: border-color .15s;
}
.pair-chip:hover { border-color: var(--brand-amber); }
.pair-chip .w1 { color: var(--wrong); font-weight: 600; }
.pair-chip .w2 { color: var(--right); font-weight: 600; }
.pair-chip .vs { color: var(--muted); font-size: .72rem; }