/* ===== Treino de ouvido (sub-aba Ouvido da aba Treino) ===== */
.ouv-ico{width:14px;height:14px;flex:none}

/* início: continuar, exercícios e pontos fracos */
.ouv-next{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px}
.ouv-next h3{font-family:var(--f-display);font-weight:800;font-size:28px;line-height:1;text-transform:uppercase;letter-spacing:.01em}
.ouv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.ouv-card{text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-lg);padding:16px;display:grid;gap:8px;align-content:start;color:var(--ink);font:inherit}
.ouv-card:hover{border-color:var(--ink-2)}
.ouv-card .k{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.ouv-card .t{font-size:17px;font-weight:700;line-height:1.2}
.ouv-card .d{font-size:13px;color:var(--ink-2)}
.ouv-card .s{font-size:12px;color:var(--muted);font-weight:600}
.ouv-tag{font-family:var(--f-body);font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.ouv-tag.tocar{background:var(--accent-soft);color:var(--accent-strong)}
.ouv-steps{display:flex;gap:3px}
.ouv-steps i{flex:1;height:6px;border-radius:99px;background:var(--surface-3)}
.ouv-steps i.ok{background:var(--good)}
.ouv-steps i.cur{background:var(--accent)}
.ouv-weak{display:grid}
.ouv-wrow{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr) 140px;gap:12px;align-items:center;text-align:left;border:0;border-top:1px solid var(--line);background:none;padding:10px 0;font-size:14px;color:var(--ink);width:100%}
.ouv-wrow:first-child{border-top:0}
.ouv-wrow:hover .w2{color:var(--accent-strong)}
.ouv-wrow .w1{color:var(--muted);font-size:13px}
.ouv-wrow .w2{font-weight:600}
.ouv-wrow .w3{display:flex;gap:8px;align-items:center}
.ouv-wrow .meter{flex:1;background:var(--surface-2)}
.ouv-wrow .meter>i{background:var(--warn)}
.ouv-wrow b{font-variant-numeric:tabular-nums;min-width:38px;text-align:right;font-size:13px}
@media (max-width:560px){.ouv-wrow{grid-template-columns:minmax(0,1fr) 110px;gap:2px 12px}.ouv-wrow .w1{grid-column:1/-1}}

/* rodada */
.ouv-run{display:grid;gap:16px}
.ouv-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ouv-top .btn{margin-left:-8px}
.ouv-lvs{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ouv-lvs>span{margin-right:2px}
.ouv-lvs .chip{min-width:38px;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:5px 10px;font-variant-numeric:tabular-nums}
.ouv-lvs .chip.passed:not([aria-pressed="true"]){border-color:color-mix(in srgb,var(--good) 55%,var(--line));color:var(--good)}
.ouv-lvs .chip:disabled{opacity:.5;cursor:not-allowed}
.ouv-lvs .chip svg{width:11px;height:11px}
.ouv-dots{display:flex;gap:6px;align-items:center}
.ouv-dots i{width:10px;height:10px;border-radius:50%;background:var(--surface-3)}
.ouv-dots i.ok{background:var(--good)}
.ouv-dots i.part{background:var(--warn)}
.ouv-dots i.bad{background:var(--crit)}
.ouv-dots i.cur{background:var(--surface);box-shadow:0 0 0 2px var(--accent) inset}
.ouv-body{display:grid;gap:14px}
.ouv-prompt{font-size:16px;line-height:1.45}
.ouv-ctl{display:flex;gap:8px;flex-wrap:wrap}
.ouv-tog{font-size:13px;justify-self:start}

/* botões de resposta */
.ouv-ans{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px}
.ouv-ans.short{grid-template-columns:repeat(auto-fit,minmax(68px,1fr))}
.ouv-ans.wide{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.ouv-a{position:relative;display:grid;place-content:center;justify-items:center;gap:2px;min-height:60px;padding:12px 10px;border:1px solid var(--line);background:var(--surface);border-radius:12px;font-size:16px;font-weight:700;line-height:1.2;color:var(--ink);text-align:center;transition:background .12s,border-color .12s}
.ouv-a:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)}
.ouv-a:active:not(:disabled){transform:translateY(1px)}
.ouv-a small{font-size:12px;font-weight:600;color:var(--muted)}
.ouv-a kbd{position:absolute;top:5px;left:8px;font:600 10px var(--f-mono);color:var(--muted)}
.ouv-a:disabled{cursor:default}
.ouv-a:disabled:not(.ok):not(.bad){opacity:.5}
.ouv-a.ok{border-color:var(--good);background:color-mix(in srgb,var(--good) 15%,var(--surface));color:var(--good)}
.ouv-a.bad{border-color:var(--crit);background:color-mix(in srgb,var(--crit) 12%,var(--surface));color:var(--crit)}
.ouv-a.ok small,.ouv-a.bad small{color:inherit;opacity:.8}

/* retorno */
.ouv-fb{font-size:15px;padding:10px 14px;border-radius:0 var(--r) var(--r) 0;border-left:3px solid var(--muted);background:var(--surface-2)}
.ouv-fb.ok{border-color:var(--good);background:color-mix(in srgb,var(--good) 10%,var(--surface))}
.ouv-fb.bad{border-color:var(--crit);background:color-mix(in srgb,var(--crit) 9%,var(--surface))}
.ouv-fb.part{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 11%,var(--surface))}
.ouv-fb.info{border-color:var(--accent);background:var(--accent-soft)}
.ouv-tip{display:block;margin-top:4px;font-size:14px;color:var(--ink-2)}
.ouv-after{display:flex;gap:8px;flex-wrap:wrap}

/* quadros dos acordes (progressões) e notas do ditado */
.ouv-slots,.ouv-notes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ouv-slots{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
.ouv-notes{grid-template-columns:repeat(auto-fill,minmax(56px,1fr))}
.ouv-slots li,.ouv-notes li{display:grid;justify-items:center;align-content:center;gap:3px;min-height:66px;padding:8px 4px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-align:center;transition:background .15s,border-color .15s}
.ouv-slots li>button{display:grid;justify-items:center;align-content:center;gap:3px;width:100%;height:100%;border:0;background:none;padding:0;color:inherit;font:inherit;cursor:pointer}
.ouv-slots span,.ouv-notes span{font:600 11px var(--f-mono);color:var(--muted)}
.ouv-slots b{font:800 26px/1 var(--f-display)}
.ouv-notes b{font-size:16px;font-weight:700;line-height:1.1}
.ouv-slots small,.ouv-notes small{font-size:11.5px;line-height:1.2;color:var(--muted);font-weight:600}
.ouv-slots li.cur,.ouv-notes li.cur{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.ouv-slots li.play{background:var(--accent-soft);border-color:var(--accent)}
.ouv-slots li.ok,.ouv-notes li.ok{border-color:var(--good)}
.ouv-slots li.ok b,.ouv-notes li.ok b{color:var(--good)}
.ouv-slots li.bad,.ouv-notes li.bad{border-color:var(--crit)}
.ouv-slots li.bad b,.ouv-notes li.bad b{color:var(--crit)}
.ouv-notes li.miss{border-style:dashed}
.ouv-notes li.miss b{color:var(--muted)}
.ouv-notes li.given{background:var(--surface-2)}

/* teclado */
.ouv-kb{--kbh:150px}
.ouv-kbhint{display:flex;gap:6px 12px;align-items:center;flex-wrap:wrap;margin-top:-6px}

/* resultado */
.ouv-res{align-items:center}
.ouv-rh{font-size:20px;font-weight:700}
.ouv-unlock{font-weight:700;color:var(--good)}
.ouv-weakbox:empty{display:none}
.ouv-wchips{display:flex;gap:6px;flex-wrap:wrap}
.ouv-wchips .pill{white-space:normal}
.ouv-keys{text-align:center}

@media (hover:none){.ouv-keys,.ouv-a kbd,.ouv-pc{display:none}}
@media (max-width:520px){
  .ouv-run.card{padding:16px 14px}
  .ouv-prompt{font-size:15px}
  .ouv-next h3{font-size:24px}
  .ouv-kb{--kbh:124px}
  .ouv-a{min-height:54px;font-size:15px;padding:10px 6px}
  .ouv-ans{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
  .ouv-ans.short{grid-template-columns:repeat(auto-fit,minmax(60px,1fr))}
  .ouv-ans.wide{grid-template-columns:minmax(0,1fr)}
}