/* TONE MATRIX (PT/EN) :: CSS */
#tone-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);
  --tag-p:var(--amber);
  --tag-i:var(--teal);
  --tag-r:#d68900;
  --tag-ri:var(--teal-dark);
  --diag:#f4f6f7;
  --hit:rgba(246,164,0,.16);
  --line-glow:rgba(80,178,181,.14);
  --line-glow-strong:rgba(246,164,0,.18);
  position:relative;
  z-index:0;
  isolation:isolate;
}
#tone-app, #tone-app *{ box-sizing:border-box }
#tone-app{
  width:100%;
  max-width:100%;
  color:var(--ink);
  background:transparent;
  font-family:"IBM Plex Sans",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
#tone-app .wrap{ max-width:1180px;margin:0 auto;padding:18px 14px 34px; }
#tone-app .card{
  position:relative;
  padding:20px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
}

/* Botão PT/EN centrado (acima do teclado) */
#tone-app .lang-centered{
  min-height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0 14px;
  padding:7px 12px;
  background:rgba(255,255,255,.97);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 5px 14px rgba(15,23,42,.04);
}
#tone-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;
}
#tone-app .tb-btn{
  --btn-size:46px;
  --icon-size:22px;
  --icon-inset:26%;
  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;
}
#tone-app .tb-btn:hover{
  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);
}
#tone-app .tb-btn:active{
  transform:translateY(1px);
  box-shadow:inset 0 4px 7px rgba(0,0,0,.32);
}
#tone-app .tb-btn:focus-visible{
  outline:3px solid rgba(80,178,181,.35);
  outline-offset:2px;
}
#tone-app .tb-icon{
  width:var(--icon-size);
  height:var(--icon-size);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
#tone-app .tb-btn > .tb-icon{
  position:absolute;
  inset:var(--icon-inset);
  width:auto;
  height:auto;
}
#tone-app .tb-icon svg{
  width:100%;
  height:100%;
  overflow:visible;
}
#tone-app [data-lg-svg]:empty{ visibility:hidden; }

#tone-app .center{ display:flex; justify-content:center }
#tone-app .row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:center }

/* ====== CONTENTOR DO TECLADO (chips agrupados) ====== */
#tone-app .kb-container{
  max-width:100%;
  margin:0 auto 16px;
  padding:18px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 5px 14px rgba(15,23,42,.04);
}
#tone-app .kb-header{ display:flex;align-items:center;justify-content:flex-start;margin-bottom:14px; }
#tone-app .kb-title{
  margin:0;
  padding:9px 12px;
  color:var(--ink);
  background:linear-gradient(90deg,var(--teal-soft),rgba(255,255,255,.45));
  border-left:5px solid var(--amber);
  border-radius:9px;
  font-size:1rem;
  font-weight:800;
  letter-spacing:.01em;
}

/* teclado (chips de inserção em BOLD) */
#tone-app .kb-wrap{ margin:0 } /* já temos padding no contentor */
#tone-app .kb{ display:grid; grid-template-columns:repeat(12, minmax(42px,1fr)); gap:8px; max-width:100% }
#tone-app .keypair{ display:flex; flex-direction:column; gap:6px; align-items:stretch }
#tone-app .key{
  min-height:40px;
  padding:8px 10px;
  color:var(--ink);
  background:#fff;
  border:1px solid #cbd5da;
  border-radius:10px;
  box-shadow:0 1px 3px rgba(15,23,42,.035);
  cursor:pointer;
  font-weight:740;
  font-size:14px;
  line-height:1.1;
  touch-action:manipulation;
  transition:transform .12s ease,background .12s ease,border-color .12s ease,box-shadow .12s ease;
}
#tone-app .key[disabled]{ opacity:.4;cursor:not-allowed;box-shadow:none; }
#tone-app .key:hover:not([disabled]){ transform:translateY(-1px);border-color:rgba(80,178,181,.8);box-shadow:0 2px 5px rgba(15,23,42,.055); }
#tone-app .key.active{ color:#624900;background:rgba(246,164,0,.075);border-color:rgba(246,164,0,.68);box-shadow:0 1px 4px rgba(246,164,0,.10); }

/* matriz */
#tone-app .matrix-host{
  max-width:100%;
  overflow:auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 5px 14px rgba(15,23,42,.04);
  -webkit-overflow-scrolling:touch;
}
#tone-app table.matrix{ border-collapse:collapse;width:100%;min-width:720px;font-variant-numeric:tabular-nums; }
#tone-app .matrix th{
  padding:8px 7px;
  text-align:center;
  white-space:nowrap;
  color:var(--muted);
  background:#fff;
  border:1px solid #dde5e9;
  font-size:11px;
  font-weight:700;
  position:sticky;
  top:0;
  z-index:1;
}
#tone-app .matrix td{
  padding:9px 10px;
  text-align:center;
  white-space:nowrap;
  color:var(--ink);
  background:#fcfdfe;
  border:1px solid #dde5e9;
  font-size:14.5px;
  font-weight:700;
  position:relative;
}
#tone-app .matrix td.diag{ background:var(--diag); color:#3f525b; }
#tone-app .matrix td.hit{ background:var(--hit); box-shadow:inset 0 0 0 1px rgba(246,164,0,.24); }
#tone-app .matrix td.line::after{ content:""; position:absolute; inset:0; background:var(--line-glow); box-shadow:inset 0 0 0 1px rgba(80,178,181,.10); pointer-events:none; }
#tone-app .matrix td.line-strong::after{ background:var(--line-glow-strong); box-shadow:inset 0 0 0 1px rgba(246,164,0,.22); }
#tone-app .placeholder{ color:var(--muted); font-size:13px }

/* etiquetas e setas */
#tone-app .hdr-btn{ cursor:pointer; user-select:none; border-radius:12px; padding:3px; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:none; }
#tone-app .hdr-btn:focus-visible{ outline:3px solid rgba(80,178,181,.35);outline-offset:2px; }
#tone-app .hdr-btn.active{ background:transparent; box-shadow:none; }
#tone-app .hdr-pill{ min-width:56px; min-height:30px; padding:4px 8px; display:inline-flex; align-items:center; justify-content:center; gap:5px; background:#fff; border:1px solid #cfd9de; border-radius:999px; box-shadow:none; }
#tone-app .hdr-svg{ width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
#tone-app .hdr-svg svg{ width:100%; height:100%; overflow:visible; }
#tone-app .hdr-index{ color:var(--ink); font-size:12px; font-weight:800; line-height:1; letter-spacing:0; }
#tone-app .hdr-btn-p .hdr-pill,
#tone-app .hdr-btn-r .hdr-pill{ border-color:rgba(246,164,0,.55); background:rgba(246,164,0,.08); }
#tone-app .hdr-btn-i .hdr-pill,
#tone-app .hdr-btn-ri .hdr-pill{ border-color:rgba(80,178,181,.55); background:rgba(80,178,181,.08); }
#tone-app .hdr-btn.active .hdr-pill{ background:#fff; border-color:var(--amber); box-shadow:0 0 0 1px rgba(246,164,0,.48) inset; }

/* botões e barras */
#tone-app .btn{
  min-height:40px;
  min-width:0;
  padding:8px 14px;
  color:var(--ink);
  background:#fff;
  border:1px solid #cbd5da;
  border-radius:10px;
  box-shadow:0 1px 3px rgba(15,23,42,.035);
  cursor:pointer;
  font-weight:740;
  touch-action:manipulation;
  transition:transform .12s ease,background .12s ease,border-color .12s ease,box-shadow .12s ease;
}
#tone-app .btn:hover{ transform:translateY(-1px);border-color:rgba(80,178,181,.75);box-shadow:0 2px 5px rgba(15,23,42,.055); }
#tone-app .btn:active{ transform:translateY(0);box-shadow:none; }
#tone-app .btn:focus-visible{ outline:3px solid rgba(80,178,181,.35);outline-offset:2px; }
#tone-app .series-bar{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px;
  align-items:stretch;
  justify-items:stretch;
  margin-top:14px;
  padding:16px 18px 18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 5px 14px rgba(15,23,42,.04);
}
#tone-app .select{
  flex:1 1 420px;
  max-width:740px;
  min-width:320px;
  min-height:44px;
  padding:9px 13px;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  border-radius:11px;
  box-shadow:0 2px 6px rgba(15,23,42,.04);
  font-size:14px;
  font-weight:500;
  line-height:1.2;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
  cursor:pointer;
}

/* ======== 4 BOTÕES COLORIDOS SUAVES ======== */

/* Desfazer → azul claro */
#tone-app #undoBtn{ background:#fff;border-color:#cbd5da; }
#tone-app #undoBtn:hover{ background:#f7fafb;border-color:var(--teal); }

/* Limpar série → dourado suave */
#tone-app #resetBtn{ background:#fff;border-color:#cbd5da; }
#tone-app #resetBtn:hover{ background:var(--amber-soft);border-color:var(--amber); }

/* Limpar linhas → verde-água (usa o accent2) */
/* Limpar notas → rosa pastel */
/* hover/focus com subtileza */
#tone-app .select:hover{ border-color:var(--teal); }
#tone-app .select:focus{ outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft); }

#tone-app .label{
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
#tone-app .series-label{
  display:inline-flex;
  align-items:center;
  justify-self:start;
  gap:8px;
  min-height:0;
  padding:0;
  color:var(--ink);
  background:transparent;
  border:0;
  border-radius:0;
}
#tone-app .series-label-icon{ width:29px; height:29px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
#tone-app .series-label-icon svg{ width:100%; height:100%; overflow:visible; }
#tone-app .series-label-text{ display:inline-block;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; }


/* barra de notas (baixo) — menos ênfase */
#tone-app .notes-bar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  margin:16px 0;
  padding:14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 5px 14px rgba(15,23,42,.04);
}
#tone-app .note-btn{
  min-height:38px;
  padding:7px 11px;
  color:var(--ink);
  background:#fff;
  border:1px solid #d2dce1;
  border-radius:10px;
  box-shadow:none;
  cursor:pointer;
  font-weight:700;
  font-size:14px;
  line-height:1.2;
  transition:transform .12s ease,border-color .12s ease,background .12s ease;
  touch-action:manipulation;
}

#tone-app .note-btn:hover{ transform:translateY(-1px);border-color:var(--teal); }

#tone-app .note-btn.active{ color:var(--teal-dark);background:rgba(80,178,181,.18);border-color:rgba(80,178,181,.82); box-shadow:0 2px 6px rgba(80,178,181,.16); }

/* título “NOTAS” */
#tone-app .notes-title{
  margin-right:12px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  letter-spacing:.07em;
}

/* opcional — ligeiro ajuste no mobile */
@media (max-width:560px){
  #tone-app .note-btn{
    font-size:15px;
    padding:7px 12px;
  }
  #tone-app .notes-title{
    font-size:15px;
  }
}


/* ações acima do dropdown */
#tone-app .actions-over-dropdown{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:center; margin:8px 0 2px }

/* responsivo */
@media (max-width:900px){
  #tone-app .kb{ grid-template-columns:repeat(6, minmax(42px,1fr)); }
  #tone-app .kb-container{ padding:14px; }
  #tone-app .select{ min-width:260px; }
  #tone-app table.matrix{ min-width:640px; }
  #tone-app .matrix th{ font-size:10px; }
  #tone-app .matrix td{ font-size:13px;padding:7px 8px; }
}
@media (max-width:560px){
  #tone-app .wrap{ padding:12px 8px 28px; }
  #tone-app .kb{ grid-template-columns:repeat(4, minmax(44px,1fr)); gap:6px; }
  #tone-app .key{ min-height:39px;padding:7px 8px;font-size:12px; }
  #tone-app .select{ min-width:220px }
}

@media (max-width:560px){
  #tone-app .card{ padding:14px; }
  #tone-app .lang-centered{ min-height:58px;margin-bottom:12px;padding:7px 10px; }
  #tone-app .kb-title{ width:100%;text-align:left; }
  #tone-app .series-bar{ padding:14px;gap:9px; }
  #tone-app .select{ width:100%;min-width:0; }
  #tone-app .actions-over-dropdown{ display:grid;grid-template-columns:1fr 1fr; }
  #tone-app .actions-over-dropdown .btn{ width:100%; }
}

/* =========================================================
   MODO EMBED — apenas matriz (iframe)
   Ativo com ?mode=embed
========================================================= */

/* =========================================================
   1) Esconder UI da APP (controlos, títulos, inputs)
========================================================= */
body.embed #tone-app header,
body.embed #tone-app h1,
body.embed #tone-app .app-title,
body.embed #tone-app .lang-centered,
body.embed #tone-app .kb-container,
body.embed #tone-app .row,
body.embed #tone-app .series-bar,
body.embed #tone-app .actions-over-dropdown,
body.embed #tone-app .notes-bar,
body.embed #tone-app #keyboard,
body.embed #tone-app #notesBar,
body.embed #tone-app #seriesSelect,
body.embed #tone-app #undoBtn,
body.embed #tone-app #resetBtn,
body.embed #tone-app #clearSeriesHighlightsBtn,
body.embed #tone-app #clearNotesBtn,
body.embed #tone-app #langBtn {
  display:none!important;
}

/* =========================================================
   2) Esconder CABEÇALHO e RODAPÉ do tema WordPress
========================================================= */
body.embed header,
body.embed #masthead,
body.embed .site-header,
body.embed footer,
body.embed .site-footer {
  display: none !important;
}

/* =========================================================
   2b) Garantia total: menus, navegação, breadcrumbs
========================================================= */
body.embed nav,
body.embed .nav,
body.embed .navigation,
body.embed .menu,
body.embed .breadcrumbs,
body.embed .breadcrumb,
body.embed .wp-block-navigation {
  display: none !important;
}

/* =========================================================
   2c) Remover overlays flutuantes (Subscribe / WP Coder)
========================================================= */
body.embed a[href*="subscribe"],
body.embed button[class*="subscribe"],
body.embed div[class*="subscribe"],
body.embed .subscribe,
body.embed .subscription,
body.embed .newsletter,
body.embed .floating-button,
body.embed .floating-action,
body.embed .floating-widget,
body.embed .wp-coder-floating,
body.embed .wpcoder-floating,
body.embed .wpcoder-fab,
body.embed [class*="floating"],
body.embed [id*="floating"] {
  display: none !important;
}

/* =========================================================
   3) Remover espaçamentos estruturais do tema
========================================================= */
body.embed {
  margin: 0 !important;
  padding: 0 !important;
}

body.embed #page,
body.embed #content,
body.embed #primary,
body.embed main {
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   4) Ajuste fino do espaço interno da matriz
========================================================= */
body.embed #tone-app .wrap {
  padding: 8px;
}

body.embed #tone-app .card {
  padding: 8px;
  border-radius: 10px;
}

#tone-app .series-bar .select{
  width:100%;
  max-width:none;
  min-width:0;
  justify-self:stretch;
}


/* =========================================================
   TWO-PANEL LAYOUT — COMMANDS + MATRIX
========================================================= */
#tone-app .app-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:16px;
}

#tone-app .controls-panel,
#tone-app .matrix-panel{
  min-width:0;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
}

#tone-app .controls-panel{
  padding:18px;
}

#tone-app .matrix-panel{
  padding:10px;
  background:#fff;
}

#tone-app .controls-toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-height:46px;
  margin:0 0 14px;
  padding:0;
}

#tone-app .controls-toolbar .tb-btn{
  --btn-size:46px;
  --icon-size:22px;
  --icon-inset:26%;
}

#tone-app .controls-panel .kb-container,
#tone-app .controls-panel .notes-bar,
#tone-app .controls-panel .series-bar{
  width:100%;
  max-width:none;
}

#tone-app .controls-panel .primary-actions{
  margin:12px 0 0!important;
}

#tone-app .controls-panel .notes-bar{
  margin:14px 0;
}

#tone-app .controls-panel .actions-over-dropdown{
  margin:0 0 14px;
}

#tone-app .controls-panel .series-bar{
  margin-top:0;
}

#tone-app .matrix-panel .matrix-host{
  border:0;
  border-radius:12px;
  box-shadow:none;
}

/* Remove the former standalone language-card treatment. */
#tone-app .controls-panel .lang-centered{
  min-height:0;
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}

/* =========================================================
   FULL MATRIX VIEW
========================================================= */
body.tone-matrix-modal-open{
  overflow:hidden!important;
}

#tone-app .matrix-modal{
  width:calc(100vw - 24px);
  height:calc(100dvh - 24px);
  max-width:none;
  max-height:none;
  margin:auto;
  padding:0;
  overflow:hidden;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 24px 70px rgba(15,23,42,.24);
}

#tone-app .matrix-modal::backdrop{
  background:rgba(15,23,42,.64);
  backdrop-filter:blur(2px);
}

#tone-app .modal-matrix-stage{
  width:100%;
  height:100%;
  padding:14px;
  overflow:hidden;
  background:#fff;
}

#tone-app .matrix-modal .matrix-host{
  width:100%;
  height:100%;
  max-width:none;
  overflow:auto;
  background:#fff;
  border:0;
  border-radius:0;
  box-shadow:none;
}

#tone-app .matrix-modal table.matrix{
  width:100%;
  min-width:900px;
  height:100%;
  table-layout:fixed;
}

#tone-app .matrix-modal .matrix th{
  padding:9px 6px;
}

#tone-app .matrix-modal .matrix td{
  padding:10px 7px;
  font-size:clamp(14px,1.15vw,18px);
}

#tone-app .matrix-modal .hdr-pill{
  min-width:58px;
  min-height:32px;
}

#tone-app .matrix-modal .hdr-svg{
  width:21px;
  height:21px;
}

#tone-app .matrix-modal .hdr-index{
  font-size:12px;
}

#tone-app .matrix-modal-close{
  position:absolute;
  top:10px;
  right:10px;
  z-index:10;
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  color:#222;
  background:rgba(255,255,255,.94);
  border:1px solid #cbd5da;
  border-radius:50%;
  box-shadow:0 2px 8px rgba(15,23,42,.10);
  cursor:pointer;
  font:500 25px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
}

#tone-app .matrix-modal-close:hover{
  border-color:var(--teal);
}

#tone-app .matrix-modal-close:focus-visible{
  outline:3px solid rgba(80,178,181,.35);
  outline-offset:2px;
}

@media (max-width:900px){
  #tone-app .controls-panel{ padding:14px; }
  #tone-app .matrix-panel{ padding:8px; }
  #tone-app .modal-matrix-stage{ padding:8px; }
}

@media (max-width:560px){
  #tone-app .app-layout{ gap:12px; }
  #tone-app .controls-panel{ padding:12px; }
  #tone-app .controls-toolbar{ margin-bottom:12px; }
  #tone-app .matrix-modal{
    width:calc(100vw - 8px);
    height:calc(100dvh - 8px);
    border-radius:10px;
  }
  #tone-app .modal-matrix-stage{ padding:5px; }
}


/* =========================================================
   COMPACT COMMANDS LAYOUT
========================================================= */
#tone-app .controls-panel{
  padding:14px;
}

#tone-app .controls-panel .kb-container{
  margin:0;
  padding:14px 16px 16px;
}

#tone-app .controls-panel .kb-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}

#tone-app .controls-panel .kb-title{
  flex:0 0 auto;
  margin:0;
}

#tone-app .kb-header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:wrap;
}

#tone-app .kb-header-actions .tb-btn{
  --btn-size:42px;
  --icon-size:21px;
  --icon-inset:25%;
}

#tone-app .compact-btn{
  min-height:38px;
  padding:7px 12px;
  font-size:13px;
}

#tone-app .notes-command-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  margin-top:10px;
}

#tone-app .controls-panel .notes-bar{
  margin:0;
  min-height:58px;
  padding:10px 12px;
  box-shadow:none;
}

#tone-app .compact-clear-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  margin:0;
}

#tone-app .controls-panel .series-bar{
  margin-top:10px;
  padding:11px 14px 13px;
  gap:7px;
  box-shadow:none;
}

#tone-app .controls-panel .series-label{
  min-height:0;
}

#tone-app .controls-panel .series-label-icon{
  width:26px;
  height:26px;
}

#tone-app .controls-toolbar,
#tone-app .primary-actions{
  display:none!important;
}

/* =========================================================
   MODAL CLOSE — LG SVG delete
========================================================= */
#tone-app .matrix-modal-close{
  width:42px;
  height:42px;
  padding:8px;
  border-radius:10px;
  font:inherit;
}

#tone-app .matrix-modal-close-icon{
  width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

#tone-app .matrix-modal-close-icon svg{
  width:100%;
  height:100%;
  overflow:visible;
}

body.embed #tone-app .controls-panel{
  display:none!important;
}

@media (max-width:780px){
  #tone-app .controls-panel .kb-header{
    align-items:flex-start;
    flex-direction:column;
  }

  #tone-app .kb-header-actions{
    width:100%;
    justify-content:flex-start;
  }

  #tone-app .notes-command-row{
    grid-template-columns:minmax(0,1fr);
  }

  #tone-app .compact-clear-actions{
    justify-content:center;
  }
}

@media (max-width:560px){
  #tone-app .controls-panel{
    padding:10px;
  }

  #tone-app .controls-panel .kb-container{
    padding:12px;
  }

  #tone-app .kb-header-actions{
    gap:6px;
  }

  #tone-app .compact-btn{
    min-height:36px;
    padding:6px 10px;
    font-size:12px;
  }
}


/* =========================================================
   LOGICAL COMMAND HIERARCHY
========================================================= */
#tone-app .controls-panel{
  padding:14px;
}

#tone-app .global-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 12px;
  padding:0 2px;
}

#tone-app .global-icon-tools{
  display:flex;
  align-items:center;
  gap:7px;
}

#tone-app .global-icon-tools .tb-btn{
  --btn-size:42px;
  --icon-size:21px;
  --icon-inset:25%;
}

#tone-app .global-reset-btn{
  min-height:38px;
  padding:7px 13px;
  background:#fff;
}

#tone-app .command-section{
  padding:14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
}

#tone-app .command-section + .command-section{
  margin-top:12px;
}

#tone-app .command-section-title,
#tone-app .matrix-section-title{
  margin:0 0 12px;
  padding:8px 11px;
  color:var(--ink);
  background:linear-gradient(90deg,var(--teal-soft),rgba(255,255,255,.35));
  border-left:4px solid var(--amber);
  border-radius:8px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
}

#tone-app .command-subsection + .command-subsection{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}

#tone-app .subsection-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

#tone-app .subsection-title{
  margin:0;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  letter-spacing:.045em;
}

#tone-app .build-series .kb{
  margin-top:2px;
}

#tone-app .known-series{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:8px;
}

#tone-app .known-series-title{
  display:inline-flex;
  align-items:center;
  justify-self:start;
  gap:7px;
}

#tone-app .known-series-icon{
  width:25px;
  height:25px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

#tone-app .known-series-icon svg{
  width:100%;
  height:100%;
  overflow:visible;
}

#tone-app .known-series .select{
  width:100%;
  max-width:none;
  min-width:0;
}

#tone-app .highlights-section .notes-bar{
  margin:0;
  padding:10px 12px;
  min-height:58px;
  box-shadow:none;
}

#tone-app .highlight-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  margin-top:10px;
}

#tone-app .compact-btn{
  min-height:38px;
  padding:7px 12px;
  font-size:13px;
}

#tone-app .matrix-panel{
  padding:14px;
}

#tone-app .matrix-section-title{
  margin-bottom:10px;
}

#tone-app .matrix-panel .matrix-host{
  border:1px solid var(--line);
}

/* Previous experimental command layouts are no longer used. */
#tone-app .controls-toolbar,
#tone-app .primary-actions,
#tone-app .kb-header-actions,
#tone-app .notes-command-row,
#tone-app .compact-clear-actions,
#tone-app .series-bar{
  display:none!important;
}

/* Modal close is a neutral close control, not a destructive Delete action. */
#tone-app .matrix-modal-close{
  width:40px;
  height:40px;
  padding:0;
  border-radius:10px;
  color:#222;
  font:400 27px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* Embed means matrix only. */
body.embed #tone-app .controls-panel,
body.embed #tone-app .matrix-section-title{
  display:none!important;
}

@media (max-width:700px){
  #tone-app .global-toolbar{
    align-items:flex-start;
  }

  #tone-app .subsection-head{
    align-items:flex-start;
    flex-direction:column;
  }

  #tone-app .highlight-actions{
    justify-content:center;
    flex-wrap:wrap;
  }
}

@media (max-width:560px){
  #tone-app .controls-panel,
  #tone-app .matrix-panel{
    padding:10px;
  }

  #tone-app .command-section{
    padding:11px;
  }

  #tone-app .global-reset-btn,
  #tone-app .compact-btn{
    min-height:36px;
    padding:6px 10px;
    font-size:12px;
  }
}


/* =========================================================
   FINAL MATRIX-DRIVEN HIGHLIGHTS
========================================================= */
#tone-app .global-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

#tone-app .global-icon-tools{
  display:flex;
  align-items:center;
  gap:7px;
}

#tone-app .global-icon-tools .tb-btn,
#tone-app .reset-icon-btn,
#tone-app .inline-tool-btn{
  --btn-size:42px;
  --icon-size:21px;
  --icon-inset:25%;
}

#tone-app .reset-icon-btn,
#tone-app .inline-tool-btn{
  flex:0 0 auto;
}

#tone-app .subsection-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

#tone-app .known-series{
  gap:10px;
}

#tone-app .known-series-title{
  gap:14px;
}

#tone-app .known-series-icon{
  width:26px;
  height:26px;
}

#tone-app .known-series .select{
  width:min(100%,680px);
  max-width:680px;
  min-width:0;
  justify-self:start;
}

#tone-app .matrix-section-head{
  margin:0 0 10px;
}

#tone-app .matrix-section-title{
  margin-bottom:7px;
}

#tone-app .matrix-hint{
  margin:0 2px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}

#tone-app .matrix td[data-pc]{
  cursor:pointer;
  transition:background .12s ease,box-shadow .12s ease;
}

#tone-app .matrix td[data-pc]:hover{
  box-shadow:inset 0 0 0 2px rgba(80,178,181,.32);
}

#tone-app .matrix td[data-pc]:focus-visible{
  outline:3px solid rgba(80,178,181,.35);
  outline-offset:-3px;
}

#tone-app .matrix td.hit{
  background:rgba(246,164,0,.20);
  box-shadow:inset 0 0 0 1px rgba(246,164,0,.34);
}

#tone-app .highlights-section,
#tone-app .notes-bar,
#tone-app .highlight-actions{
  display:none!important;
}

#tone-app .matrix-modal-close{
  width:42px;
  height:42px;
  padding:8px;
  border-radius:10px;
  font:inherit;
}

#tone-app .matrix-modal-close-icon{
  width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

#tone-app .matrix-modal-close-icon svg{
  width:100%;
  height:100%;
  overflow:visible;
}

body.embed #tone-app .controls-panel,
body.embed #tone-app .matrix-section-head{
  display:none!important;
}

@media (max-width:700px){
  #tone-app .known-series .select{
    width:100%;
    max-width:none;
  }

  #tone-app .matrix-hint{
    font-size:11.5px;
  }
}


/* =========================================================
   SERIES — TWO EQUAL COLUMNS ON DESKTOP
========================================================= */
@media (min-width:781px){
  #tone-app .series-section{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:20px;
    row-gap:0;
    align-items:start;
  }

  #tone-app .series-section > .command-section-title{
    grid-column:1 / -1;
    margin-bottom:14px;
  }

  #tone-app .series-section > .build-series,
  #tone-app .series-section > .known-series{
    min-width:0;
    margin:0;
    padding-top:0;
    border-top:0;
  }

  #tone-app .series-section > .build-series{
    padding-right:20px;
  }

  #tone-app .series-section > .known-series{
    padding-left:20px;
    border-left:1px solid var(--line);
  }

  #tone-app .series-section .known-series .select{
    width:100%;
    max-width:none;
  }
}

/* Mobile/tablet: return to one clear vertical sequence. */
@media (max-width:780px){
  #tone-app .series-section{
    display:block;
  }

  #tone-app .series-section > .known-series{
    margin-top:14px;
    padding-top:14px;
    padding-left:0;
    border-left:0;
    border-top:1px solid var(--line);
  }

  #tone-app .series-section .known-series .select{
    width:100%;
    max-width:none;
  }
}


/* =========================================================
   SERIES COLUMNS — SPACING + REFINED SELECT
========================================================= */
@media (min-width:781px){
  #tone-app .series-section{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:0;
  }

  #tone-app .series-section > .build-series{
    min-width:0;
    padding-right:34px;
  }

  #tone-app .series-section > .known-series{
    min-width:0;
    padding-left:34px;
    border-left:1px solid var(--line);
  }

  #tone-app .build-series .subsection-head{
    padding-right:4px;
  }

  #tone-app .build-series .inline-tool-btn{
    margin-left:18px;
    flex:0 0 auto;
  }
}

/* A dedicated shell gives the native select a coherent LG surface. */
#tone-app .series-select-shell{
  position:relative;
  width:min(100%,560px);
  max-width:560px;
}

#tone-app .series-select-shell::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:3px;
  z-index:2;
  background:var(--amber);
  border-radius:999px;
  pointer-events:none;
}

#tone-app .series-select-shell .select{
  width:100%;
  max-width:none;
  min-height:44px;
  padding:9px 44px 9px 18px;
  color:var(--ink);
  background:
    linear-gradient(90deg,rgba(80,178,181,.055),rgba(255,255,255,.96) 26%),
    #fff;
  border:1px solid #cbd7dc;
  border-radius:11px;
  box-shadow:0 1px 3px rgba(15,23,42,.045);
  font-size:14px;
  font-weight:520;
  line-height:1.2;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}

#tone-app .series-select-shell .select:hover{
  border-color:rgba(80,178,181,.78);
  background:
    linear-gradient(90deg,rgba(80,178,181,.075),rgba(255,255,255,.98) 28%),
    #fff;
}

#tone-app .series-select-shell .select:focus{
  outline:none;
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(80,178,181,.14);
}

/* CSS chevron: decorative only; native select semantics remain intact. */
#tone-app .series-select-arrow{
  position:absolute;
  top:50%;
  right:16px;
  width:8px;
  height:8px;
  margin-top:-5px;
  border-right:1.7px solid #56636a;
  border-bottom:1.7px solid #56636a;
  transform:rotate(45deg);
  pointer-events:none;
}

@media (max-width:780px){
  #tone-app .series-section > .build-series{
    padding-right:0;
  }

  #tone-app .series-section > .known-series{
    padding-left:0;
  }

  #tone-app .series-select-shell{
    width:100%;
    max-width:none;
  }
}


/* =========================================================
   SERIES — FINAL 75 / 25 DESKTOP PROPORTION
========================================================= */
@media (min-width:781px){
  #tone-app .series-section{
    grid-template-columns:minmax(0,3fr) minmax(240px,1fr);
    column-gap:0;
  }

  #tone-app .series-section > .build-series{
    min-width:0;
    padding-right:28px;
  }

  #tone-app .series-section > .known-series{
    min-width:0;
    padding-left:28px;
    border-left:1px solid var(--line);
  }

  #tone-app .build-series .inline-tool-btn{
    margin-left:14px;
  }

  #tone-app .known-series-title{
    display:block;
    margin-bottom:9px;
  }

  #tone-app .series-select-shell{
    width:100%;
    max-width:none;
  }

  #tone-app .series-select-shell .select{
    width:100%;
    max-width:none;
  }
}

/* All Series was removed from the interface. */
#tone-app .known-series-icon{
  display:none!important;
}