/* =========================
   Círculo das Quintas (escopado a #c5-app)
========================= */
#c5-app, #c5-app * { box-sizing: border-box; }

#c5-app {
  --text:#111; --muted:#666; --border:#e5e7eb; --radius:12px;
  --ring:#f2f2f2; --accent:#4f6fd9; --badge:#f8fafc;

  --majBg:#fde5e5; --majBd:#f3b9b9;

  /* azul suavizado */
  --minBg:#eef3fd;
  --minBd:#cbd8f5;

  --exBg:#fef9c3; --exBd:#fde68a;
  --highlight:#fde047; --highlight-stroke:#f59e0b;

/* ===== TYPE SCALE (ORIGINAL) ===== */
--fs-0: clamp(12px, 0.75vw, 13px);
--fs-1: clamp(13px, 0.85vw, 14px);
--fs-2: clamp(14px, 1vw, 16px);
--fs-3: clamp(16px, 1.2vw, 18px);
--fs-4: clamp(18px, 1.5vw, 22px);
--fs-5: clamp(22px, 2vw, 28px);

  color: var(--text);
  background: #fff;
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;

  width: 1600px;
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;
}

@media (max-width: 980px){
  #c5-app { grid-template-columns: 1fr; }
}

/* Cards & painel */
#c5-app .c5-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
#c5-app .c5-panel{
  padding:16px 16px 6px;  /* 👈 menos espaço em baixo */
  display:grid;
  gap:12px;
	margin-bottom:0;
}

#c5-app h1{
  margin:0;
  font-size:var(--fs-4);
  font-weight:700;
}

#c5-app .c5-sub{
  color:var(--muted);
  font-size:var(--fs-5);
}

/* Chips, toggles */
#c5-app .c5-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

#c5-app .c5-chip{
  border:2px solid var(--border);
  border-radius:var(--radius);
  padding:8px 12px;
  background:#f8fafc;
  cursor:pointer;
  font-size:var(--fs-4);

  box-shadow:0 1px 2px rgba(0,0,0,0.04);
  transition:box-shadow .18s ease, transform .18s ease;
}

#c5-app .c5-chip:hover{
  box-shadow:0 8px 20px rgba(0,0,0,0.10);
  transform:translateY(-1px);
}

#c5-app .c5-mode-major{ background:var(--majBg); border-color:var(--majBd); }
#c5-app .c5-mode-minor{ background:var(--minBg); border-color:var(--minBd); }
#c5-app .c5-mode-exotic{ background:var(--exBg); border-color:var(--exBd); }

#c5-app .c5-chip[data-on]{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:#fff!important;
  outline:none;
  box-shadow:0 2px 10px rgba(37,99,235,.18);
}

#c5-app .c5-toggle{
  appearance:none;
  border:none;
  border-radius:var(--radius);
  background:var(--accent);
  color:#fff;
  font-weight:800;
  padding:8px 14px;
  cursor:pointer;
  box-shadow:0 2px 10px rgba(37,99,235,.25);
  letter-spacing:.3px;
  text-transform:uppercase;
  font-size:var(--fs-1);
}

/* Selector PT/EN */
#c5-app .c5-lang{
  display:flex;
  justify-content:end;
}

#c5-app .c5-lang-pill{
  display:inline-grid;
  grid-template-columns:1fr 1fr;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
}

#c5-app .c5-lang-opt{
  appearance:none;
  border:0;
  background:transparent;
  padding:6px 14px;
  font-weight:800;
  font-size:var(--fs-2);
  cursor:pointer;
  letter-spacing:.3px;
}

#c5-app .c5-lang-opt.active{
  background:#F5C84C;
  color:#111;
}

/* Pentagramas */
#c5-app .c5-staff h3{
  display:inline-block;
  margin:0 0 10px 0;
  font-size:var(--fs-3);
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:6px 10px;

  background:#f8fafc;
}

#c5-app .c5-staff svg{
  width:100%;
  height:auto;
  display:block;
}

/* Círculo */
#c5-app .c5-svg-wrap{
  position:relative;
  padding:12px 6px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:8px;
}

#c5-app #c5-circle{
  display:block;
  width:100%;
  height:auto;
}

#c5-app .wedge{
  cursor:pointer;
  transition:filter .15s, fill .15s, stroke .15s;
  stroke:#d1d5db;
  stroke-width:1;
}

#c5-app .wedge.major{ fill:var(--ring); }
#c5-app .wedge:hover{ filter:brightness(1.06); }

#c5-app .wedge.selected{
  fill:var(--highlight)!important;
  stroke:var(--highlight-stroke)!important;
  filter:none;
}

#c5-app .label{
  font-size:var(--fs-1);
  font-weight:800;
  text-anchor:middle;
  dominant-baseline:middle;
  fill:#111;
  pointer-events:none;
}

#c5-app .label-badge{
  fill:var(--badge);
  stroke:var(--border);
}

#c5-app .quality-arc{ fill:none; stroke-linecap:butt; }
#c5-app .arc-major{ stroke:#f2b3b3; }
#c5-app .arc-minor{ stroke:#bcd7f4; }
#c5-app .arc-dim{ stroke:#c7e9cf; }

#c5-app .c5-top-key{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--accent);
  color:#fff;
  border-radius:var(--radius);
  padding:6px 10px;
  font-weight:800;
  font-size:var(--fs-5);
  letter-spacing:.3px;
}

#c5-app .c5-mode-bottom{
  display:none;
  margin:8px auto 18px;
  width:max-content;
  background:var(--accent);
  color:#fff;
  border-radius:var(--radius);
  padding:6px 10px;
  font-weight:800;
  font-size:var(--fs-5);
  letter-spacing:.3px;
}

/* Acessibilidade */
#c5-app .wedge:focus,
#c5-app .wedge:focus-visible{ outline:none; }

#c5-app svg{ -webkit-tap-highlight-color:transparent; }

/* Forçar as cores do círculo no WP */
#c5-app #c5-circle .wedge.major{ fill: var(--ring) !important; }

#c5-app #c5-circle .wedge.selected{
  fill: var(--highlight) !important;
  stroke: var(--highlight-stroke) !important;
}

/* Caso o tema force fill/stroke em paths/texts */
#c5-app #c5-circle text.label{ fill:#111 !important; }
#c5-app #c5-circle .quality-arc.arc-major{ stroke:#f2b3b3 !important; }
#c5-app #c5-circle .quality-arc.arc-minor{ stroke:#bcd7f4 !important; }
#c5-app #c5-circle .quality-arc.arc-dim{ stroke:#c7e9cf !important; }


#c5-app .c5-section{
  display:flex;
  flex-direction:column;
  gap:14px;
}

#c5-app .c5-controls{
  margin-bottom:6px;
}

#c5-app .c5-output{
  margin-top:20px;
  padding-top:18px;
  border-top:2px solid var(--border);
}
/* =========================================================
   LG VISUAL LANGUAGE — Circle of Fifths
========================================================= */
#c5-app{
  --text:#222222;
  --muted:#6f7479;
  --border:#d9e1e7;
  --border-strong:#c5d0d6;
  --panel:#f7f9fb;
  --surface:#ffffff;
  --teal:#50b2b5;
  --teal-dark:#287f83;
  --teal-soft:rgba(80,178,181,.11);
  --amber:#f6a400;
  --amber-dark:#a96f00;
  --amber-soft:rgba(246,164,0,.10);
  --shadow:0 14px 34px rgba(15,23,42,.075);

  --ring:#f4f7f8;
  --accent:var(--teal);
  --badge:#ffffff;
  --majBg:rgba(246,164,0,.07);
  --majBd:rgba(246,164,0,.32);
  --minBg:rgba(80,178,181,.075);
  --minBd:rgba(80,178,181,.32);
  --exBg:#f7f9fb;
  --exBd:#d5dee3;
  --highlight:#f6a400;
  --highlight-stroke:#c88400;

  width:100%;
  max-width:1440px;
  padding:14px 0 28px;
  gap:16px;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  color:var(--text);
  background:transparent;
  font-family:"IBM Plex Sans",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

#c5-app .c5-card{
  min-width:0;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

#c5-app .c5-panel{
  padding:16px;
  gap:14px;
  margin:0;
}

#c5-app .c5-lang{
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin:0;
}

#c5-app .c5-tool-btn{
  --btn-size:44px;
  --icon-size:22px;
  --icon-inset:25%;
  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 #2f2f2f;
  border-radius:10px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.16),0 1px 2px rgba(0,0,0,.10);
  cursor:pointer;
  appearance:none;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}

#c5-app .c5-tool-btn:hover{
  transform:translateY(-1px);
  background:radial-gradient(circle at 35% 30%,#fff 0%,#f5f5f5 75%);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.13),0 5px 10px rgba(0,0,0,.12);
}

#c5-app .c5-tool-btn:focus-visible{
  outline:3px solid rgba(80,178,181,.35);
  outline-offset:2px;
}

#c5-app .c5-tool-icon{
  position:absolute;
  inset:var(--icon-inset);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

#c5-app .c5-tool-icon svg{ width:100%;height:100%;overflow:visible; }
#c5-app [data-lg-svg]:empty{ visibility:hidden; }

#c5-app .c5-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;
}

#c5-app #c5-titleSettings{
  display:block;
  width:100%;
  margin:0;
  padding:9px 12px;
  color:var(--text);
  background:linear-gradient(90deg,var(--teal-soft),rgba(255,255,255,.45));
  border:0;
  border-left:5px solid var(--amber);
  border-radius:9px;
  box-shadow:none;
  font-size:16px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:.01em;
}

#c5-app .c5-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px;
  margin:0;
}

#c5-app .c5-controls > div{
  min-width:0;
  padding:13px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 4px 12px rgba(15,23,42,.035);
}

#c5-app .c5-controls > div:first-child{ grid-column:1 / -1; }

#c5-app .c5-sub{
  margin:0 0 9px!important;
  color:var(--muted);
  font-size:12px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:.065em;
  text-transform:uppercase;
}

#c5-app .c5-row{ gap:7px; }

#c5-app .c5-chip{
  min-height:38px;
  padding:7px 11px;
  color:var(--text);
  background:#fff;
  border:1px solid var(--border-strong);
  border-radius:10px;
  box-shadow:0 1px 3px rgba(15,23,42,.035);
  font-size:14px;
  line-height:1.15;
  font-weight:650;
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease,background .12s ease;
}

#c5-app .c5-chip:hover{
  transform:translateY(-1px);
  border-color:rgba(80,178,181,.75);
  box-shadow:0 3px 7px rgba(15,23,42,.06);
}

#c5-app .c5-mode-major{ background:var(--majBg);border-color:var(--majBd); }
#c5-app .c5-mode-minor{ background:var(--minBg);border-color:var(--minBd); }
#c5-app .c5-mode-exotic{ background:var(--exBg);border-color:var(--exBd); }

#c5-app .c5-chip[data-on]{
  color:#174f52!important;
  background:rgba(80,178,181,.18)!important;
  border-color:var(--teal)!important;
  box-shadow:0 0 0 1px rgba(80,178,181,.16) inset!important;
}

#c5-app .c5-output{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:12px;
  margin:0;
  padding:0;
  border:0;
}

#c5-app .c5-staff{
  padding:13px 14px 10px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 4px 12px rgba(15,23,42,.03);
}

#c5-app .c5-staff h3{
  display:block;
  width:max-content;
  max-width:100%;
  margin:0 0 10px;
  padding:7px 10px;
  color:var(--text);
  background:linear-gradient(90deg,var(--amber-soft),rgba(255,255,255,.5));
  border:0;
  border-left:4px solid var(--amber);
  border-radius:8px;
  font-size:12px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:.06em;
  text-transform:uppercase;
}

#c5-app .c5-circle-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:var(--panel);
}

#c5-app .c5-svg-wrap{
  min-height:100%;
  padding:16px 16px 10px;
  gap:10px;
}

#c5-app #c5-circle{
  width:min(100%,690px);
  margin:0 auto;
}

#c5-app #c5-badge{
  align-self:flex-start;
  margin:0 0 2px 4px;
  padding:6px 14px;
  color:var(--text);
  background:#fff;
  border:1px solid rgba(246,164,0,.62);
  border-radius:10px;
  box-shadow:0 2px 6px rgba(15,23,42,.05);
  font-size:18px;
  font-weight:800;
  line-height:1.1;
}

#c5-app #c5-circle .wedge.major{
  fill:#f7f9fa!important;
  stroke:#d8e0e4!important;
}

#c5-app #c5-circle .wedge:hover{
  filter:none;
  stroke:rgba(80,178,181,.78)!important;
}

#c5-app #c5-circle .wedge.selected{
  fill:var(--amber)!important;
  stroke:var(--amber-dark)!important;
}

#c5-app #c5-circle .label-badge{
  fill:#fff!important;
  stroke:#d9e1e7!important;
}

#c5-app #c5-circle text.label{
  fill:#222!important;
  font-weight:750;
}

#c5-app #c5-circle .quality-arc.arc-major{ stroke:rgba(246,164,0,.48)!important; }
#c5-app #c5-circle .quality-arc.arc-minor{ stroke:rgba(80,178,181,.50)!important; }
#c5-app #c5-circle .quality-arc.arc-dim{ stroke:#b9c5cb!important; }

#c5-app .c5-mode-bottom{
  margin:4px auto 16px;
  padding:6px 12px;
  color:var(--teal-dark);
  background:var(--teal-soft);
  border:1px solid rgba(80,178,181,.30);
  border-radius:9px;
  box-shadow:none;
  font-size:12px;
  font-weight:800;
  letter-spacing:.07em;
}

@media (max-width:1100px){
  #c5-app{
    grid-template-columns:minmax(0,1fr);
    max-width:920px;
  }
  #c5-app .c5-circle-card{ order:-1; }
}

@media (max-width:700px){
  #c5-app{ padding:8px 0 20px;gap:12px; }
  #c5-app .c5-panel{ padding:12px; }
  #c5-app .c5-controls{ grid-template-columns:minmax(0,1fr); }
  #c5-app .c5-controls > div:first-child{ grid-column:auto; }
  #c5-app .c5-chip{ min-height:36px;padding:7px 9px;font-size:13px; }
  #c5-app .c5-svg-wrap{ padding:12px 8px 8px; }
}


/* =========================================================
   VEXFLOW ENGRAVING — scale + diatonic chords
========================================================= */
#c5-app #c5-staff-scale,
#c5-app #c5-staff-chords{
  width:100%;
  min-width:0;
  overflow:hidden;
}

#c5-app #c5-staff-scale svg,
#c5-app #c5-staff-chords svg{
  display:block;
  width:100%!important;
  height:auto!important;
  max-width:100%;
  overflow:visible;
}

#c5-app .c5-vf-label-top,
#c5-app .c5-vf-label-bottom{
  font-family:"IBM Plex Sans",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  text-anchor:middle;
  fill:#222;
  pointer-events:none;
}

#c5-app .c5-vf-label-top{
  font-size:14px;
  font-weight:700;
}

#c5-app .c5-vf-label-bottom{
  font-size:13px;
  font-weight:700;
  fill:#4f595f;
}

@media (max-width:700px){
  #c5-app .c5-vf-label-top{ font-size:12px; }
  #c5-app .c5-vf-label-bottom{ font-size:11.5px; }
}


/* =========================================================
   TOP TOOLBAR — lang | view | chords
========================================================= */
#c5-app .c5-toolbar{
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
  flex-wrap:wrap;
  margin:0;
  padding:0;
}

#c5-app .c5-tool-group{
  display:inline-flex;
  align-items:center;
  gap:7px;
}

#c5-app .c5-tool-divider{
  width:1px;
  height:28px;
  margin:0 3px;
  background:var(--border);
  flex:0 0 auto;
}

#c5-app .c5-state-tool[data-on]{
  color:var(--teal-dark);
  background:rgba(80,178,181,.14);
  border-color:var(--teal);
  box-shadow:0 0 0 1px rgba(80,178,181,.16) inset,0 1px 3px rgba(15,23,42,.05);
}

#c5-app .c5-state-tool[data-on]:hover{
  background:rgba(80,178,181,.18);
  border-color:var(--teal);
}

/* Only the Modes module remains below Settings. */
#c5-app .c5-controls{
  display:block;
}

#c5-app .c5-controls > div{
  width:100%;
}

#c5-app .c5-controls > div:first-child{
  grid-column:auto;
}

/* Pull circle and mode description to the top of the right card. */
#c5-app .c5-circle-card{
  justify-content:flex-start;
  align-self:start;
}

#c5-app .c5-svg-wrap{
  min-height:0;
  padding:8px 14px 0;
  gap:4px;
}

#c5-app #c5-badge{
  margin:0 0 0 2px;
}

#c5-app #c5-circle{
  margin:-2px auto 0;
}

#c5-app .c5-mode-bottom{
  display:block;
  margin:-2px auto 12px;
}

/* Obsolete old language selector is no longer part of the layout. */
#c5-app .c5-lang,
#c5-app .c5-lang-pill,
#c5-app .c5-lang-opt{
  display:none!important;
}

@media (max-width:700px){
  #c5-app .c5-toolbar{
    gap:6px;
  }

  #c5-app .c5-tool-group{
    gap:6px;
  }

  #c5-app .c5-tool-divider{
    height:25px;
    margin:0 1px;
  }

  #c5-app .c5-toolbar .c5-tool-btn{
    --btn-size:40px;
    --icon-size:20px;
  }

  #c5-app .c5-svg-wrap{
    padding:6px 8px 0;
  }
}


/* =========================================================
   LG SVG LIBRARY — CANONICAL BUTTON / ICON SCALE
   Preserve Library geometry; consumer controls only placement.
========================================================= */
#c5-app .c5-tool-btn,
#c5-app .c5-toolbar .c5-tool-btn{
  --btn-size:54px;
  --icon-inset:27.907%;
  width:var(--btn-size);
  height:var(--btn-size);
}

#c5-app .c5-tool-icon{
  inset:var(--icon-inset);
}

/* Active state: no teal/green surface behind LG SVGs. */
#c5-app .c5-state-tool[data-on],
#c5-app .c5-state-tool[data-on]:hover{
  color:#222;
  background:radial-gradient(circle at 35% 30%,#fff 0%,#f1f1f1 75%);
  border-color:var(--teal);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.13),
    0 0 0 1px rgba(80,178,181,.12),
    0 3px 8px rgba(15,23,42,.08);
}

/* Do not shrink the canonical LG controls on mobile. */
@media (max-width:700px){
  #c5-app .c5-toolbar .c5-tool-btn{
    --btn-size:54px;
    --icon-inset:27.907%;
  }
}


/* =========================================================
   DESKTOP VERTICAL COMPACTION
   Keep the left card at or below the circle card height.
========================================================= */
@media (min-width:1101px){
  #c5-app{
    align-items:start;
  }

  #c5-app .c5-panel{
    padding:12px 14px 12px;
    gap:10px;
  }

  #c5-app .c5-toolbar{
    min-height:54px;
    margin:0;
  }

  #c5-app #c5-titleSettings{
    padding:7px 11px;
  }

  #c5-app .c5-controls > div{
    padding:10px 12px;
  }

  #c5-app .c5-sub{
    margin-bottom:7px!important;
  }

  #c5-app .c5-row{
    gap:6px;
  }

  #c5-app .c5-chip{
    min-height:34px;
    padding:6px 10px;
    font-size:13px;
  }

  #c5-app .c5-output{
    gap:10px;
  }

  #c5-app .c5-staff{
    padding:10px 12px 7px;
  }

  #c5-app .c5-staff h3{
    margin-bottom:5px;
    padding:6px 9px;
  }
}


/* =========================================================
   DESKTOP — EQUAL HEIGHT COLUMNS
   Both primary cards always share the grid row height.
========================================================= */
@media (min-width:1101px){
  #c5-app{
    align-items:stretch;
  }

  #c5-app > .c5-card{
    height:100%;
    align-self:stretch;
  }

  #c5-app .c5-circle-card{
    align-self:stretch;
    height:100%;
  }
}


#c5-app .c5-mode-bottom{
  max-width:calc(100% - 24px);
  text-align:center;
  white-space:normal;
}


/* =========================================================
   SINGLE CIRCLE VIEW
   Toolbar: language | triads / sevenths.
========================================================= */
#c5-app .c5-toolbar{
  justify-content:flex-start;
}


/* =========================================================
   CHORD NOTATION — synced with Harmonic Analysis
========================================================= */
#c5-app .c5-notation-sup{
  font-family:Georgia,"Times New Roman",serif;
  font-size:62%;
  font-weight:700;
  baseline-shift:super;
}

#c5-app .c5-chord-notation,
#c5-app .c5-roman-notation{
  overflow:visible;
}

#c5-app .c5-roman-notation{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:700;
}


/* =========================================================
   CHORD LABELS — SIZE + VERTICAL BALANCE
========================================================= */
#c5-app .c5-vf-label-top.c5-chord-notation{
  font-size:16.5px;
  font-weight:750;
}

#c5-app .c5-vf-label-bottom.c5-roman-notation{
  font-size:15px;
  font-weight:700;
}

#c5-app #c5-circle .c5-roman-notation{
  font-size:17px;
  font-weight:700;
}

/* Keep superscripts readable at the larger base size. */
#c5-app .c5-chord-notation .c5-notation-sup,
#c5-app .c5-roman-notation .c5-notation-sup{
  font-size:64%;
}

@media (max-width:700px){
  #c5-app .c5-vf-label-top.c5-chord-notation{
    font-size:14.5px;
  }

  #c5-app .c5-vf-label-bottom.c5-roman-notation{
    font-size:13.5px;
  }

  #c5-app #c5-circle .c5-roman-notation{
    font-size:15.5px;
  }
}


/* =========================================================
   LAYOUT REVISION
   Circle rises to the top; diatonic chords occupy full width below.
========================================================= */
#c5-app{
  align-items:start;
}

#c5-app .c5-circle-card{
  align-self:start;
  justify-content:flex-start;
}

#c5-app .c5-chords-card{
  grid-column:1 / -1;
}

#c5-app .c5-panel-wide{
  padding:14px 16px 14px;
}

#c5-app .c5-staff-wide{
  padding:13px 14px 10px;
}

#c5-app .c5-output{
  margin-top:20px;
  padding-top:18px;
  border-top:2px solid var(--border);
}

/* =========================================================
   CIRCLE TYPOGRAPHY — significantly reduced
========================================================= */
#c5-app #c5-circle .label{
  font-size:12.5px;
  font-weight:800;
}

#c5-app #c5-circle .c5-roman-notation{
  font-size:13px;
  font-weight:700;
}

#c5-app .c5-top-key{
  font-size:16px;
}

#c5-app .c5-mode-bottom{
  font-size:12.5px;
}

@media (max-width:980px){
  #c5-app .c5-chords-card{
    grid-column:auto;
  }
}

@media (max-width:700px){
  #c5-app #c5-circle .label{
    font-size:11.5px;
  }

  #c5-app #c5-circle .c5-roman-notation{
    font-size:12px;
  }
}


/* =========================================================
   RESPONSIVE LAYOUT — 35 / 65 DESKTOP
========================================================= */
@media (min-width:1101px){
  #c5-app{
    grid-template-columns:minmax(0,35fr) minmax(0,65fr);
    max-width:1440px;
    width:100%;
  }

  #c5-app .c5-circle-card{
    align-self:start;
    height:auto;
  }

  #c5-app .c5-chords-card{
    grid-column:1 / -1;
  }
}

/* =========================================================
   MOBILE / TABLET — REMOVE ARTIFICIAL 920px CAP
========================================================= */
@media (max-width:1100px){
  #c5-app{
    grid-template-columns:minmax(0,1fr);
    width:100%;
    max-width:none;
  }

  #c5-app .c5-circle-card{
    order:-1;
    height:auto;
    align-self:start;
  }

  #c5-app .c5-chords-card{
    grid-column:auto;
  }
}

/* =========================================================
   MOBILE CHORDS — TRUE HORIZONTAL SCROLL
========================================================= */
@media (max-width:700px){
  #c5-app #c5-staff-chords{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    touch-action:pan-x;
    scrollbar-width:auto;
  }

  /*
   * Do not compress the VexFlow score to the card width.
   * JS renders it at >=780px; the host becomes the viewport.
   */
  #c5-app #c5-staff-chords svg{
    width:auto!important;
    min-width:780px;
    max-width:none!important;
    height:auto!important;
    display:block;
    overflow:visible;
  }
}

/* =========================================================
   MOBILE LANDSCAPE — USE THE WHOLE VIEWPORT
========================================================= */
@media (max-width:1100px) and (orientation:landscape){
  #c5-app{
    width:100vw;
    max-width:none;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding-left:max(12px,env(safe-area-inset-left));
    padding-right:max(12px,env(safe-area-inset-right));
  }

  #c5-app .c5-card{
    width:100%;
    max-width:none;
  }
}


/* =========================================================
   FINAL DESKTOP BALANCE — COMPACT CIRCLE
========================================================= */
@media (min-width:1101px){
  #c5-app .c5-circle-card{
    justify-content:flex-start;
  }

  #c5-app .c5-svg-wrap{
    padding:10px 14px 2px;
    min-height:0;
  }

  #c5-app #c5-circle{
    width:min(100%,610px);
    margin:-4px auto 0;
  }

  #c5-app .c5-mode-bottom{
    margin:0 auto 10px;
  }
}

/* =========================================================
   MOBILE CHORD STAFF — REAL HORIZONTAL SCROLL
========================================================= */
@media (max-width:700px){
  /*
   * The outer cards must not clip the scrollable child.
   */
  #c5-app .c5-chords-card,
  #c5-app .c5-panel-wide,
  #c5-app .c5-staff-wide{
    overflow:visible!important;
    min-width:0;
  }

  #c5-app .c5-staff-wide{
    padding-left:10px;
    padding-right:10px;
  }

  /*
   * This element is the actual horizontal viewport.
   */
  #c5-app #c5-staff-chords{
    position:relative;
    display:block;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:scroll!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    touch-action:pan-x;
  }

  /*
   * Never let previous responsive SVG rules compress it.
   * JS renders the notation at at least 920px.
   */
  #c5-app #c5-staff-chords > svg{
    display:block!important;
    width:920px!important;
    min-width:920px!important;
    max-width:none!important;
    height:auto!important;
    flex:none!important;
    overflow:visible!important;
  }

  /*
   * Give the scrollbar/touch surface a little breathing room.
   */
  #c5-app #c5-staff-chords{
    padding-bottom:8px;
  }
}

/* Landscape phones/tablets: use the full available viewport. */
@media (max-width:1100px) and (orientation:landscape){
  #c5-app{
    width:100vw!important;
    max-width:none!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
  }
}


/* =========================================================
   FINAL CIRCLE POSITION
========================================================= */
@media (min-width:1101px){
  #c5-app .c5-svg-wrap{
    padding-top:4px;
  }

  #c5-app #c5-circle{
    width:min(100%,575px);
    margin:-12px auto 0;
  }

  #c5-app .c5-mode-bottom{
    margin:-2px auto 8px;
  }
}


/* =========================================================
   LG GRAPHIC LANGUAGE — FINAL CONSOLIDATION
   Visual-only pass. No layout or functional changes.
========================================================= */

#c5-app{
  --text:#222222;
  --muted:#6f7479;
  --border:#d9e1e7;
  --border-strong:#c5d0d6;
  --panel:#f7f9fb;
  --surface:#ffffff;

  --teal:#50b2b5;
  --teal-dark:#287f83;
  --teal-soft:rgba(80,178,181,.11);

  --amber:#f6a400;
  --amber-dark:#a96f00;
  --amber-soft:rgba(246,164,0,.10);

  --shadow:0 12px 28px rgba(15,23,42,.065);

  color:var(--text);
  background:transparent;
  font-family:"IBM Plex Sans",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* Main surfaces */
#c5-app .c5-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
}

#c5-app .c5-controls > div,
#c5-app .c5-staff{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 4px 12px rgba(15,23,42,.03);
}

/* Editorial section headings */
#c5-app #c5-titleSettings,
#c5-app .c5-staff h3{
  color:var(--text);
  background:linear-gradient(90deg,var(--amber-soft),rgba(255,255,255,.55));
  border:0;
  border-left:5px solid var(--amber);
  border-radius:9px;
  box-shadow:none;
  font-weight:800;
}

/* Secondary labels */
#c5-app .c5-sub{
  color:var(--muted);
  font-weight:800;
  letter-spacing:.065em;
  text-transform:uppercase;
}

/* Mode chips */
#c5-app .c5-chip{
  color:var(--text);
  border:1px solid var(--border);
  background:#f8fafb;
  box-shadow:none;
}

#c5-app .c5-chip:hover{
  border-color:var(--border-strong);
  box-shadow:0 3px 9px rgba(15,23,42,.045);
  transform:none;
}

#c5-app .c5-mode-major{
  background:rgba(246,164,0,.07);
  border-color:rgba(246,164,0,.30);
}

#c5-app .c5-mode-minor{
  background:rgba(80,178,181,.075);
  border-color:rgba(80,178,181,.30);
}

#c5-app .c5-mode-exotic{
  background:#f7f9fb;
  border-color:#d5dee3;
}

#c5-app .c5-chip[data-on]{
  color:#174f52!important;
  background:rgba(80,178,181,.17)!important;
  border-color:var(--teal)!important;
  box-shadow:0 0 0 1px rgba(80,178,181,.13) inset!important;
}

/* LG SVG controls: neutral surfaces, teal only as state accent */
#c5-app .c5-tool-btn{
  color:var(--text);
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 2px 6px rgba(15,23,42,.045);
}

#c5-app .c5-tool-btn:hover{
  background:#fff;
  border-color:var(--border-strong);
  box-shadow:0 4px 10px rgba(15,23,42,.06);
}

#c5-app .c5-tool-btn[data-on]{
  color:var(--text)!important;
  background:#fff!important;
  border-color:var(--teal)!important;
  box-shadow:0 0 0 1px rgba(80,178,181,.15) inset!important;
}

/* Circle */
#c5-app .c5-circle-card{
  background:var(--panel);
}

#c5-app #c5-badge{
  color:var(--text);
  background:#fff;
  border:1px solid rgba(246,164,0,.62);
  box-shadow:0 2px 6px rgba(15,23,42,.04);
}

#c5-app #c5-circle .wedge.major{
  fill:#f7f9fa!important;
  stroke:#d8e0e4!important;
}

#c5-app #c5-circle .wedge:hover{
  filter:none;
  stroke:rgba(80,178,181,.72)!important;
}

#c5-app #c5-circle .wedge.selected{
  fill:var(--amber)!important;
  stroke:var(--amber-dark)!important;
}

#c5-app #c5-circle .label-badge{
  fill:#fff!important;
  stroke:#d9e1e7!important;
}

#c5-app #c5-circle text.label{
  fill:var(--text)!important;
}

#c5-app #c5-circle .quality-arc.arc-major{
  stroke:rgba(246,164,0,.46)!important;
}

#c5-app #c5-circle .quality-arc.arc-minor{
  stroke:rgba(80,178,181,.48)!important;
}

#c5-app #c5-circle .quality-arc.arc-dim{
  stroke:#b9c5cb!important;
}

/* Mode badge */
#c5-app .c5-mode-bottom{
  color:var(--teal-dark);
  background:var(--teal-soft);
  border:1px solid rgba(80,178,181,.30);
  box-shadow:none;
}

/* VexFlow editorial text */
#c5-app .c5-vf-label-top{
  fill:var(--text);
  font-family:"IBM Plex Sans",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:700;
}

#c5-app .c5-vf-label-bottom{
  fill:#4f595f;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:700;
}

/* Keep focus visible but discreet */
#c5-app button:focus-visible{
  outline:2px solid rgba(80,178,181,.58);
  outline-offset:2px;
}


/* =========================================================
   CHORD TYPE — INDEPENDENT MODULE
   After Settings, before Scale.
========================================================= */
#c5-app .c5-chord-tools{
  margin:0;
}

#c5-app .c5-chord-tools-card{
  min-width:0;
  padding:13px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 4px 12px rgba(15,23,42,.03);
}

#c5-app .c5-chord-tools-card .c5-sub{
  margin:0 0 9px!important;
}

#c5-app .c5-chord-tool-group{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
}

/* The top toolbar now contains only language. */
#c5-app .c5-toolbar{
  min-height:54px;
}

@media (max-width:700px){
  #c5-app .c5-chord-tools-card{
    padding:11px;
  }

  #c5-app .c5-chord-tool-group{
    gap:7px;
  }
}


/* =========================================================
   CHORD STAFF — LARGER SYMBOLS + ROMAN NUMERALS
   Staff only; circle typography remains unchanged.
========================================================= */
#c5-app #c5-staff-chords .c5-vf-label-top.c5-chord-notation{
  font-size:18.5px;
}

#c5-app #c5-staff-chords .c5-vf-label-bottom.c5-roman-notation{
  font-size:17px;
}

@media (max-width:700px){
  #c5-app #c5-staff-chords .c5-vf-label-top.c5-chord-notation{
    font-size:18.5px;
  }

  #c5-app #c5-staff-chords .c5-vf-label-bottom.c5-roman-notation{
    font-size:17px;
  }
}


/* =========================================================
   CIRCLE MODULE — BADGE REMOVED / CIRCLE EXPANDED
========================================================= */
#c5-app .c5-svg-wrap{
  padding:2px 12px 2px;
  gap:0;
}

#c5-app #c5-circle{
  width:min(100%,660px);
  margin:-18px auto 0;
}

/* Defensive: if an older badge node still exists for any reason,
   keep it hidden. */
#c5-app #c5-badge{
  display:none!important;
}

#c5-app .c5-mode-bottom{
  margin:0 auto 8px;
}

@media (max-width:700px){
  #c5-app .c5-svg-wrap{
    padding:4px 8px 2px;
  }

  #c5-app #c5-circle{
    width:min(100%,620px);
    margin:-8px auto 0;
  }
}


/* =========================================================
   CIRCLE — REBALANCED SIZE / TRUE CENTER
   Moderate enlargement over the original version.
========================================================= */
#c5-app .c5-circle-card{
  align-items:stretch;
}

#c5-app .c5-svg-wrap{
  width:100%;
  min-width:0;
  padding:4px 14px 2px;
  gap:0;
  align-items:center;
  justify-content:flex-start;
}

#c5-app #c5-circle{
  display:block;
  width:min(100%,600px);
  max-width:600px;
  height:auto;
  margin:0 auto;
  align-self:center;
  flex:0 0 auto;
}

#c5-app .c5-mode-bottom{
  margin:2px auto 8px;
}

@media (max-width:700px){
  #c5-app .c5-svg-wrap{
    padding:6px 8px 2px;
  }

  #c5-app #c5-circle{
    width:min(100%,570px);
    max-width:570px;
    margin:0 auto;
  }
}


/* =========================================================
   CIRCLE ROMAN NUMERALS — inward + slightly smaller
========================================================= */
#c5-app #c5-circle .c5-roman-notation{
  font-size:15.5px;
  font-weight:700;
}

#c5-app #c5-circle .c5-roman-notation .c5-notation-sup{
  font-size:61%;
}


/* =========================================================
   CIRCLE ROMAN NUMERALS — stronger inward / smaller tuning
========================================================= */
#c5-app #c5-circle .c5-roman-notation{
  font-size:14px;
  font-weight:700;
}

#c5-app #c5-circle .c5-roman-notation .c5-notation-sup{
  font-size:58%;
}