/* Harmonic Analysis — linguagem visual LG, isolada do tema. */
#harm-analysis-app,
#harm-analysis-app *,
#harm-analysis-app *::before,
#harm-analysis-app *::after { box-sizing:border-box; }

#harm-analysis-app {
  --ink:#222222;
  --muted:#6f7479;
  --line:#d9e1e7;
  --line-strong:#2f2f2f;
  --panel:#f7f9fb;
  --surface:#ffffff;
  --score:#f1f6f9;
  --teal:#50b2b5;
  --teal-dark:#287f83;
  --teal-soft:rgba(80,178,181,.16);
  --amber:#f6a400;
  --amber-soft:rgba(246,164,0,.14);
  --danger:#d85252;
  --shadow:0 14px 34px rgba(15,23,42,.08);
  width:100%;
  max-width:100%;
  margin:0 auto;
  padding:18px 14px 34px;
  color:var(--ink);
  background:transparent;
  font-family:"IBM Plex Sans",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px;
  line-height:1.45;
}

#harm-analysis-app button { font:inherit; }
#harm-analysis-app svg,
#harm-analysis-app canvas { display:block;max-width:100%;height:auto; }
#harm-analysis-app .sr-only {
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}

#harm-analysis-app .ha-toolbar {
  width:min(1120px,100%);
  min-height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:0 auto 20px;
  padding:12px 14px;
  background:rgba(255,255,255,.97);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
}

/* Contrato canónico LG SVG Library. */
#harm-analysis-app .tb-btn {
  --btn-size:54px;--icon-size:24px;--icon-inset:27.907%;
  position:relative;width:var(--btn-size);height:var(--btn-size);display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;padding:0;color:#222;background:radial-gradient(circle at 35% 30%,#fff 0%,#f1f1f1 75%);
  border:1px solid var(--line-strong);border-radius:9.302%;box-shadow:inset 0 1px 2px rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.12);
  cursor:pointer;appearance:none;transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
#harm-analysis-app .tb-btn:hover:not(:disabled) { transform:translateY(-2px);background:radial-gradient(circle at 35% 30%,#fff 0%,#f3f3f3 75%);box-shadow:inset 0 1px 2px rgba(0,0,0,.15),0 6px 10px rgba(0,0,0,.16); }
#harm-analysis-app .tb-btn:active:not(:disabled) { transform:translateY(1px);box-shadow:inset 0 4px 7px rgba(0,0,0,.32); }
#harm-analysis-app .tb-btn:disabled { opacity:.42;cursor:not-allowed; }
#harm-analysis-app #accPrefToggle[data-pref="flat"] { box-shadow:inset 0 2px 4px rgba(0,0,0,.2),0 0 0 3px var(--amber-soft); }
#harm-analysis-app #accPrefToggle[data-pref="sharp"] { box-shadow:inset 0 2px 4px rgba(0,0,0,.2),0 0 0 3px var(--teal-soft); }
#harm-analysis-app button:focus-visible { outline:3px solid rgba(80,178,181,.35);outline-offset:2px; }
#harm-analysis-app .tb-icon { width:var(--icon-size,24px);height:var(--icon-size,24px);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto; }
#harm-analysis-app .tb-btn > .tb-icon { position:absolute;inset:var(--icon-inset,27.907%);width:auto;height:auto; }
#harm-analysis-app .tb-icon svg { width:100%;height:100%;overflow:visible; }
#harm-analysis-app .tb-icon:empty { visibility:hidden; }
#harm-analysis-app .ha-shell {
  width:min(1120px,100%);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:20px;
  align-items:start;
  margin:0 auto;
}
#harm-analysis-app .ha-card { min-width:0;padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow); }
#harm-analysis-app .ha-card-head,
#harm-analysis-app .ha-result-head {
  min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 18px;padding:10px 12px 10px 16px;
  background:linear-gradient(90deg,rgba(80,178,181,.13),rgba(255,255,255,.82));border-left:5px solid var(--amber);border-radius:10px;
}
#harm-analysis-app .ha-result-head { background:linear-gradient(90deg,rgba(246,164,0,.12),rgba(255,255,255,.82));border-left-color:var(--teal); }
#harm-analysis-app .ha-card-head h2,
#harm-analysis-app .ha-result-head h2 { margin:0;font-size:clamp(1.08rem,2.1vw,1.34rem);font-weight:800;letter-spacing:.01em; }
#harm-analysis-app .ha-key-status {
  min-width:118px;display:flex;align-items:center;justify-content:center;padding:8px 12px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-bottom:3px solid var(--teal);border-radius:10px;box-shadow:0 3px 10px rgba(15,23,42,.05);
  font-size:14px;font-weight:800;text-align:center;
}

#harm-analysis-app .panel { display:grid;gap:14px; }
#harm-analysis-app .keys-block { display:grid;gap:8px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:14px; }
#harm-analysis-app .keys-title { margin:0 0 2px;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; }
#harm-analysis-app .keys-line,
#harm-analysis-app .row { display:grid;gap:8px;min-width:0; }
#harm-analysis-app .keys-line { grid-template-columns:repeat(6,minmax(0,1fr)); }
#harm-analysis-app .row { padding:12px;background:#fff;border:1px solid var(--line);border-radius:14px; }
#harm-analysis-app #modeRow { grid-template-columns:repeat(4,minmax(0,1fr)); }
#harm-analysis-app #minorTypeRow { display:none; }
#harm-analysis-app #minorTypeRow.is-visible { display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); }
#harm-analysis-app #kindRow { grid-template-columns:repeat(3,minmax(0,1fr)); }
#harm-analysis-app #romanRow { grid-template-columns:repeat(7,minmax(0,1fr)); }
#harm-analysis-app #invRow { display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); }
#harm-analysis-app .inv-placeholder { visibility:hidden; }

#harm-analysis-app .chip,
#harm-analysis-app .small-toggle {
  width:100%;min-width:0;min-height:42px;display:inline-flex;align-items:center;justify-content:center;padding:8px 10px;color:var(--ink);background:#fff;
  border:1px solid #aab3ba;border-radius:9px;box-shadow:inset 0 1px 1px rgba(0,0,0,.06),0 2px 5px rgba(15,23,42,.04);
  font-size:14px;font-weight:760;text-align:center;cursor:pointer;appearance:none;transition:transform .1s ease,box-shadow .12s ease,border-color .12s ease,background .12s ease;
}
#harm-analysis-app .chip:hover:not(:disabled),
#harm-analysis-app .small-toggle:hover:not(:disabled) { transform:translateY(-2px);border-color:var(--teal);box-shadow:0 6px 11px rgba(15,23,42,.11); }
#harm-analysis-app .chip.is-on,
#harm-analysis-app .small-toggle.is-on { color:#175f62;background:var(--teal-soft);border-color:var(--teal);box-shadow:0 0 0 2px rgba(80,178,181,.08); }
#harm-analysis-app .chip.small { min-height:38px;padding:7px 10px;font-size:13px; }

#harm-analysis-app .staff-wrap {
  min-height:320px;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--score);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
}
#harm-analysis-app .staff { width:100%; }
#harm-analysis-app #staffChord { width:100%;display:flex;align-items:center;justify-content:center; }
#harm-analysis-app #staffChord canvas { display:block;width:100%!important;height:auto!important;margin:0 auto; }

#harm-analysis-app .accordes-block { display:grid;gap:10px;margin-top:16px; }
#harm-analysis-app .accordes-block .line {
  position:relative;min-width:0;display:grid;grid-template-columns:minmax(118px,.72fr) minmax(0,1.28fr);align-items:center;gap:12px;
  min-height:62px;padding:11px 14px 11px 18px;background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:0 4px 12px rgba(15,23,42,.04);
}
#harm-analysis-app .accordes-block .line::before { content:"";position:absolute;left:0;top:16%;bottom:16%;width:5px;background:linear-gradient(var(--teal),var(--amber));border-radius:0 4px 4px 0; }
#harm-analysis-app .accordes-block .lbl { color:var(--muted);font-family:"IBM Plex Sans",Inter,sans-serif;font-size:12px;font-weight:800;letter-spacing:.045em;text-transform:uppercase; }
#harm-analysis-app .accordes-block .line > span {
  min-width:0;color:var(--ink);font-family:"IBM Plex Sans",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(1.16rem,2.4vw,1.55rem);font-weight:760;
  line-height:1.15;text-align:right;overflow-wrap:anywhere;
}
#harm-analysis-app #accRoman,
#harm-analysis-app #accRomanLetter { font-family:Georgia,"Times New Roman",serif;font-weight:700; }
#harm-analysis-app .ha-accidental {
  display:inline-block;margin-inline:.035em;font-family:"Bravura Text","Noto Music","Segoe UI Symbol","Apple Symbols",serif;
  font-size:.92em;font-weight:600;line-height:1;vertical-align:.02em;
}
#harm-analysis-app .nowrap { white-space:nowrap; }
#harm-analysis-app .roman-figured { display:inline-block;white-space:nowrap; }
#harm-analysis-app .ha-notation-sup {
  display:inline-block;font-size:.62em;line-height:1;vertical-align:.58em;
}
#harm-analysis-app .roman-figured .fig-single { margin-left:.03em; }
#harm-analysis-app .roman-figured .fig-stack {
  display:inline-flex;flex-direction:column;align-items:center;margin-left:.04em;
  font-size:.52em;line-height:.72;vertical-align:middle;transform:translateY(-.04em);
}
#harm-analysis-app .roman-figured .fig-digit { display:block; }
#harm-analysis-app .ha-quality-symbol {
  margin-left:.13em;font-family:Georgia,"Times New Roman",serif;font-weight:700;
}
#harm-analysis-app .ha-extension { margin-left:.025em;font-family:Georgia,"Times New Roman",serif;font-weight:700; }
#harm-analysis-app .qual { margin-left:.025em; }
#harm-analysis-app .inv {
  position:relative;top:.08em;display:inline-block;margin-left:.07em;font-size:.66em;line-height:1;vertical-align:baseline;
}
#harm-analysis-app .blink-once { animation:ha-blink .62s ease; }
@keyframes ha-blink { 42% { box-shadow:0 0 0 5px rgba(246,164,0,.3); } }

@media (max-width:900px) {
  #harm-analysis-app { padding:12px 14px 28px; }
  #harm-analysis-app .ha-toolbar { min-height:78px;margin-bottom:16px; }
  #harm-analysis-app .ha-shell { grid-template-columns:1fr; }
  #harm-analysis-app .ha-card { padding:16px; }
  #harm-analysis-app .staff-wrap { min-height:270px; }
}

@media (max-width:560px) {
  #harm-analysis-app .ha-card { padding:13px; }
  #harm-analysis-app .ha-card-head { align-items:flex-start;flex-direction:column;padding:12px 14px; }
  #harm-analysis-app .ha-key-status { width:100%; }
  #harm-analysis-app .keys-block,
  #harm-analysis-app .row { padding:10px;gap:6px; }
  #harm-analysis-app .keys-line { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #harm-analysis-app #modeRow { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #harm-analysis-app #romanRow { grid-template-columns:repeat(4,minmax(0,1fr)); }
  #harm-analysis-app .chip,
  #harm-analysis-app .small-toggle { min-height:40px;padding:7px 9px;font-size:12px; }
  #harm-analysis-app .staff-wrap { min-height:235px;padding:10px; }
  #harm-analysis-app .accordes-block .line { grid-template-columns:1fr;gap:4px;padding:11px 12px 11px 17px; }
  #harm-analysis-app .accordes-block .line > span { text-align:left;font-size:1.25rem; }
  #harm-analysis-app #invRow { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
  #harm-analysis-app *,#harm-analysis-app *::before,#harm-analysis-app *::after { animation-duration:.01ms!important;transition-duration:.01ms!important; }
}
/* Module containment; the SVG artwork remains owned by the Library. */
#harm-analysis-app{min-width:0;box-sizing:border-box}
#harm-analysis-app .ha-shell,#harm-analysis-app .ha-card,#harm-analysis-app .panel{min-width:0;max-width:100%}
#harm-analysis-app .ha-card-head,#harm-analysis-app .ha-result-head{min-width:0}
#harm-analysis-app .ha-card-head h2{min-width:0;overflow-wrap:anywhere}
#harm-analysis-app .ha-key-status{min-width:0;overflow-wrap:anywhere}
#harm-analysis-app .staff-wrap,#harm-analysis-app #staffChord{min-width:0;max-width:100%}
#harm-analysis-app .ha-dependency-warning{margin:10px 0;padding:10px 12px;border-left:3px solid #f6a400;background:#fff8e7;font-size:13px}
@media(max-width:360px){#harm-analysis-app .ha-shell{gap:12px}#harm-analysis-app .ha-card{padding:10px}#harm-analysis-app .ha-toolbar{padding:10px;gap:8px}#harm-analysis-app .tb-btn{--btn-size:48px}#harm-analysis-app .keys-block,#harm-analysis-app .row{padding:7px;gap:5px}#harm-analysis-app .chip{padding:6px 4px}#harm-analysis-app .accordes-block .line{padding-right:8px}}