/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
  --sidebar-width: 220px;
  --sidebar-collapsed-width: 56px;
  --context-panel-width: 240px;
  --active-sidebar-width: var(--sidebar-width);


  --bg:        #060608;
  --surface:   rgba(19, 19, 26, 0.6);
  --surface-2: rgba(26, 26, 36, 0.4);
  --surface-3: rgba(34, 34, 47, 0.6);
  --surface-4: rgba(42, 42, 58, 0.8);
  --border:    rgba(255, 255, 255, 0.08);
  --border-2:  rgba(255, 255, 255, 0.15);
  --text:      #f0f0f5;
  --muted:     #8a8aab;
  --faint:     #4a4a65;
  --teal:      #00f0cc;
  --teal-dim:  #00b399;
  --teal-glow: rgba(0, 240, 204, 0.25);
  --teal-glow2:rgba(0, 240, 204, 0.12);
  --purple:    #b89dfa;
  --gold:      #fcd34d;
  --red:       #fca5a5;
  --blue:      #93c5fd;
  --green:     #86efac;
  --orange:    #fdba74;
  --pink:      #f9a8d4;
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px;
  --mono: 'JetBrains Mono', monospace;
  --body: 'Inter', sans-serif;
  --ease: cubic-bezier(0.16,1,0.3,1);
  --ease-out: cubic-bezier(0.4,0,0.2,1);
  --fh-panel-padding: 16px;
  --fh-panel-padding-wide: 24px;
  --fh-section-gap: 16px;
  --fh-control-height: 34px;
  --fh-control-padding-y: 6px;
  --fh-header-control-height: 28px;
  --fh-autogen-control-height: 24px;
  --fh-card-radius: 10px;
  --fh-toolbar-gap: 8px;
  --fh-composer-gap: 8px;
  --fh-settings-page-padding: 40px 32px 64px;
  --fh-settings-card-padding: 20px 24px;
  --fh-settings-card-gap: 24px;
}

/* ── RESET ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-font-smoothing:antialiased; }
body {
  font-family: var(--body);
  background: radial-gradient(circle at 50% -20%, #171724 0%, var(--bg) 70%);
  color: var(--text);
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}

body[data-density="comfortable"] {
  --fh-panel-padding: 16px;
  --fh-panel-padding-wide: 24px;
  --fh-section-gap: 16px;
  --fh-control-height: 34px;
  --fh-control-padding-y: 6px;
  --fh-header-control-height: 28px;
  --fh-autogen-control-height: 24px;
  --fh-card-radius: 10px;
  --fh-toolbar-gap: 8px;
  --fh-composer-gap: 8px;
  --fh-settings-page-padding: 40px 32px 64px;
  --fh-settings-card-padding: 20px 24px;
  --fh-settings-card-gap: 24px;
}

body[data-density="compact"] {
  --fh-panel-padding: 8px;
  --fh-panel-padding-wide: 14px;
  --fh-section-gap: 8px;
  --fh-control-height: 30px;
  --fh-control-padding-y: 4px;
  --fh-header-control-height: 26px;
  --fh-autogen-control-height: 22px;
  --fh-card-radius: 8px;
  --fh-toolbar-gap: 5px;
  --fh-composer-gap: 5px;
  --fh-settings-page-padding: 20px 20px 32px;
  --fh-settings-card-padding: 12px 16px;
  --fh-settings-card-gap: 12px;
}

button { cursor:pointer; background:none; border:none; font:inherit; color:inherit; }

/* ── HEADER ─────────────────────────────────────────────────── */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
  z-index: 10;
}
.logo {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-weight: 700; font-size: 0.9rem;
  letter-spacing: 0.05em; color: var(--teal); flex-shrink:0;
}
.logo svg { flex-shrink:0; }
.header-controls {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ctrl-group {
  display: flex; align-items: center; gap: 6px;
}
.ctrl-label {
  font-family: var(--mono); font-size: 0.64rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
}
select, .pill-btn {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.0));
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--fh-card-radius);
  padding: var(--fh-control-padding-y) 12px;
  font-size: 0.75rem;
  font-family: var(--body);
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms var(--ease);
  appearance: none; -webkit-appearance: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
}
select:hover, .pill-btn:hover { 
  border-color: var(--teal-dim); 
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); 
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
}
select:focus-visible, .pill-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.pill-btn:disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }
#styleSelect { min-width: 120px; }
#styleSelect:not([value="none"]) { border-color: rgba(167,139,250,0.4); color: var(--purple); }
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--faint);
  transition: background 400ms, box-shadow 400ms;
  flex-shrink:0;
}
.status-dot.connected { background: var(--green); box-shadow: 0 0 8px var(--green); }
.status-dot.error { background: var(--red); box-shadow: 0 0 8px var(--red); }
.status-text { font-family: var(--mono); font-size: 0.65rem; color: var(--muted); }

/* ── LAYOUT ─────────────────────────────────────────────────── */
main {
  display: grid;
  grid-template-columns: 1fr 360px;
  overflow: hidden;
  height: 100%;
}

/* ── CENTER PANEL ───────────────────────────────────────────── */
.center-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 20px 32px;
  position: relative;
  overflow: hidden;
}
.center-panel::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--teal-glow2) 0%, transparent 60%);
  top:50%; left:50%;
  transform: translate(-50%,-50%);
  pointer-events:none;
  transition: background 600ms var(--ease), transform 600ms var(--ease-out);
}
.center-panel.active::before {
  background: radial-gradient(circle, var(--teal-glow) 0%, transparent 70%);
  transform: translate(-50%,-50%) scale(1.05);
}
.center-panel::after {
  content:'';
  position:absolute; width:350px; height:350px; border-radius:50%;
  border: 1px solid rgba(0, 240, 204, 0.05);
  box-shadow: 0 0 80px rgba(0, 240, 204, 0.05) inset;
  top:50%; left:50%; transform:translate(-50%,-50%);
  pointer-events:none;
  transition: border-color 600ms var(--ease), box-shadow 600ms var(--ease);
}
.center-panel.active::after { 
  border-color: rgba(0, 240, 204, 0.2); 
  box-shadow: 0 0 120px rgba(0, 240, 204, 0.1) inset;
}

/* ── CHORD DISPLAY ──────────────────────────────────────────── */
.chord-container { text-align:center; position:relative; z-index:1; }
.chord-label {
  font-size: 0.65rem; font-family: var(--mono);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.chord-name {
  font-family: var(--mono);
  font-size: clamp(2.6rem, 8vw, 6.5rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--text);
  letter-spacing: -0.02em;
  transition: color 200ms var(--ease), text-shadow 200ms var(--ease);
  min-height: 1em;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  width: 100%;
}
.selected-chord-panel .chord-name {
  font-size: clamp(1.8rem, 3.5vw, 3rem) !important;
  line-height: 0.95;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  text-align: center;
}
/* symbol >7 chars (e.g. Abmaj7, G7sus4) */
.chord-name--long {
  font-size: clamp(1.9rem, 5.5vw, 4rem) !important;
  letter-spacing: -0.03em;
}
/* symbol >10 chars (e.g. Cmaj7(#11)) */
.chord-name--xlong {
  font-size: clamp(1.4rem, 4vw, 2.8rem) !important;
  letter-spacing: -0.04em;
}
@keyframes chordFlash {
  0%   { color: var(--teal); text-shadow: 0 0 80px var(--teal-glow), 0 0 30px var(--teal); transform: scale(1.08); }
  40%  { color: var(--teal); text-shadow: 0 0 50px var(--teal-glow); transform: scale(1.03); }
  100% { color: var(--text); text-shadow: 0 0 15px rgba(255,255,255,0.1); transform: scale(1); }
}
.chord-name.flash {
  animation: chordFlash 600ms var(--ease-out) both;
}
.chord-meta { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:12px; flex-wrap:wrap; }
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding: 3px 9px; border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  border: 1px solid transparent;
}
.badge-degree { background:rgba(167,139,250,0.12); border-color:rgba(167,139,250,0.25); color:var(--purple); }
.badge-confidence { background:rgba(0,212,180,0.08); border-color:rgba(0,212,180,0.2); color:var(--teal); }
.badge-chromatic { background:rgba(251,191,36,0.1); border-color:rgba(251,191,36,0.25); color:var(--gold); }

/* ── PIANO (7 octavas) ──────────────────────────────────────── */
.harmony-compass-panel {
  position: relative;
  min-height: 130px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text);
}
.harmony-compass-panel.is-empty {
  visibility: hidden;
}
.harmony-compass-title {
  color: var(--teal);
  font-weight: 600;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.harmony-compass-detail,
.harmony-compass-summary {
  position: absolute;
  left: 0;
  right: 0;
  top: 38px;
}
.harmony-compass-detail {
  display: none;
}
.harmony-compass-panel.is-detail .harmony-compass-detail {
  display: block;
}
.harmony-compass-panel.is-detail .harmony-compass-summary {
  display: none;
}
.harmony-compass-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  color: var(--muted);
}
.harmony-compass-summary span {
  color: #fff;
  font-weight: 600;
}
.hc-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin-bottom: 4px;
}
.hc-row > span:first-child {
  flex: 0 0 auto;
  color: var(--faint);
}
.hc-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hc-relationship-row .badge {
  margin-left: 4px;
  padding: 2px 6px;
}
.hc-description {
  min-height: 34px;
  margin-bottom: 4px;
  color: var(--muted);
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.hc-qualifier {
  color: var(--faint);
  font-size: 0.65rem;
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.piano-wrap {
  position: relative; z-index: 1;
  width: 100%;
  display: flex; flex-direction: column; align-items: flex-start;
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 4px;
}
.piano-wrap::-webkit-scrollbar { height: 3px; }
.piano-wrap::-webkit-scrollbar-track { background: transparent; }
.piano-wrap::-webkit-scrollbar-thumb { background: var(--faint); border-radius: 2px; }
.piano-label { align-self:center; font-family:var(--mono); font-size:0.6rem; color:var(--muted); text-align:center; margin-bottom:6px; letter-spacing:0.1em; }
.piano {
  display: flex;
  position: relative;
  height: 110px;
  user-select: none;
  flex-shrink: 0;
}
.key-white {
  width: 24px; height: 110px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  margin-right: 1px;
  transition: background 150ms, box-shadow 150ms;
  position: relative;
  flex-shrink:0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 6px rgba(0,0,0,0.3);
}
.key-black {
  width: 14px; height: 68px;
  background: linear-gradient(180deg, rgba(20,20,25,0.9) 0%, rgba(30,30,40,0.9) 100%);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 0 0 4px 4px;
  position: absolute; top:0; z-index:2;
  transition: background 150ms, box-shadow 150ms;
  flex-shrink:0;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 4px 8px rgba(0,0,0,0.5);
}
.key-white.lit { 
  background: var(--teal) !important; 
  box-shadow: 0 0 20px rgba(0,240,204,0.5), inset 0 0 12px rgba(255,255,255,0.5); 
  border-color: var(--teal);
}
.key-black.lit { 
  background: var(--teal-dim) !important; 
  box-shadow: 0 0 16px rgba(0,240,204,0.4), inset 0 0 10px rgba(255,255,255,0.3); 
  border-color: var(--teal);
}
.key-label {
  position:absolute; bottom:3px; left:50%; transform:translateX(-50%);
  font-size: 0.48rem; font-family: var(--mono); color: var(--muted);
  pointer-events:none; white-space:nowrap;
}
/* Resaltado de notas en escala */
.key-white.in-scale::after {
  content: ''; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; background: var(--teal); border-radius: 50%; opacity: 0.3;
}
.key-black.in-scale::after {
  content: ''; position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 3px; background: var(--teal); border-radius: 50%; opacity: 0.4;
}

/* ── EMOTION BUTTONS ────────────────────────────────────────── */
.emotion-bar {
  display: flex; gap: 8px; position:relative; z-index:1;
  flex-wrap: wrap; justify-content: center;
}
.emotion-btn {
  padding: 8px 16px; border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.0));
  color: var(--muted);
  font-size: 0.75rem; font-family: var(--body); font-weight: 500;
  cursor: pointer;
  transition: all 200ms var(--ease);
  display: flex; align-items: center; gap: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
}
.emotion-btn:hover { 
  border-color: var(--teal-dim); color: var(--text); 
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
}
.emotion-btn.active {
  background: var(--teal-glow2); border-color: var(--teal); color: var(--teal);
  box-shadow: 0 0 20px rgba(0,240,204,0.15), inset 0 0 8px rgba(0,240,204,0.1);
}
.emotion-btn:active { transform: scale(0.96); box-shadow: none; }

/* Emotion specific colors when active */
.emotion-btn[data-emotion="happy"].active  { color:#fbbf24; border-color:#fbbf24; background:rgba(251,191,36,0.08); }
.emotion-btn[data-emotion="sad"].active    { color:#60a5fa; border-color:#60a5fa; background:rgba(96,165,250,0.08); }
.emotion-btn[data-emotion="tense"].active  { color:#f87171; border-color:#f87171; background:rgba(248,113,113,0.08); }
.emotion-btn[data-emotion="jazzy"].active  { color:#a78bfa; border-color:#a78bfa; background:rgba(167,139,250,0.08); }
.emotion-btn[data-emotion="calm"].active   { color:#4ade80; border-color:#4ade80; background:rgba(74,222,128,0.08); }

/* ── RIGHT PANEL ────────────────────────────────────────────── */
.suggestions-panel {
  border-left: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex; flex-direction: column;
  overflow: hidden;
  z-index: 5;
}
.panel-header {
  padding: var(--fh-panel-padding) var(--fh-panel-padding-wide);
  border-bottom: 1px solid var(--border);
  font-size: 0.65rem; font-family: var(--mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  display: flex; align-items: center; justify-content: space-between;
}
.panel-header-title { display:flex; align-items:center; gap:8px; }
#emotionLabel { color: var(--teal); }
.suggestions-list { flex:1; padding:10px; display:flex; flex-direction:column; gap:7px; overflow-y:auto; }
.suggestions-list::-webkit-scrollbar { width:3px; }
.suggestions-list::-webkit-scrollbar-track { background:transparent; }
.suggestions-list::-webkit-scrollbar-thumb { background:var(--faint); border-radius:2px; }

.suggestion-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 16px;
  cursor: pointer;
  transition: all 250ms var(--ease-out);
  display: flex;
  flex-direction: row; /* Default */
  align-items: center; 
  gap: 12px;
  position: relative; 
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
}
.suggestion-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background: var(--teal); opacity:0; transition: opacity 250ms;
  box-shadow: 0 0 12px var(--teal);
}
.suggestion-card:hover { 
  border-color: rgba(0,240,204,0.4); 
  background: var(--surface-3); 
  transform: translateX(4px) translateY(-1px); 
  box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 16px var(--teal-glow2), inset 0 1px 0 rgba(255,255,255,0.08);
}
.suggestion-card:hover::before { opacity:1; }
.suggestion-card:active { transform: translateX(2px) scale(0.98); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
@keyframes slideIn {
  from { opacity:0; transform:translateX(20px); }
  to   { opacity:1; transform:translateX(0); }
}
.suggestion-card.entering { animation: slideIn 320ms var(--ease) both; }
.sug-rank { font-family:var(--mono); font-size:0.62rem; color:var(--faint); width:14px; text-align:center; flex-shrink:0; }
.sug-info { flex:1; min-width:0; }
.sug-name { font-family:var(--mono); font-size:1.05rem; font-weight:600; color:var(--text); line-height: 1.25; padding-bottom: 2px; }
.sug-degree { font-family:var(--mono); font-size:0.68rem; color:var(--purple); }
.sug-bar-col { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.sug-pct { font-family:var(--mono); font-size:0.6rem; color:var(--muted); width:26px; text-align:right; }
.sug-bar-track { width:36px; height:4px; background:var(--surface-4); border-radius:2px; overflow:hidden; }
.sug-bar-fill {
  height:100%; background: linear-gradient(90deg, var(--teal-dim), var(--teal));
  border-radius:2px;
  transition: width 500ms var(--ease-out);
  min-width:4px;
  box-shadow: 0 0 8px var(--teal-glow);
}

/* ── RICH SUGGESTIONS (Continue Mode) ───────────────────────── */
.suggestion-card.sug-rich {
  flex-direction: column !important; 
  align-items: stretch !important;
  gap: 12px;
  padding: 16px;
}
.sug-rich .sug-header {
  display: flex; align-items: center; justify-content: space-between;
}
.sug-rich .sug-rank {
  font-family: var(--mono); font-size: 0.65rem; color: var(--faint); font-weight: 600; text-align: left; width: auto;
}
.sug-category-badge {
  font-family: var(--mono); font-size: 0.55rem; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px; letter-spacing: 0.08em; font-weight: 600;
  background: rgba(255,255,255,0.05); color: var(--muted); border: 1px solid transparent;
}
.category-warm .sug-category-badge { background: rgba(251,191,36,0.1); color: var(--gold); border-color: rgba(251,191,36,0.2); }
.category-tension .sug-category-badge { background: rgba(248,113,113,0.1); color: var(--red); border-color: rgba(248,113,113,0.2); }
.category-surprise .sug-category-badge { background: rgba(167,139,250,0.1); color: var(--purple); border-color: rgba(167,139,250,0.2); }
.category-dark .sug-category-badge { background: rgba(96,165,250,0.1); color: var(--blue); border-color: rgba(96,165,250,0.2); }
.category-natural .sug-category-badge { background: rgba(74,222,128,0.1); color: var(--green); border-color: rgba(74,222,128,0.2); }

/* category hover glows */
.category-warm.suggestion-card:hover { border-color: rgba(251,191,36,0.3); box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 16px rgba(251,191,36,0.08), inset 0 1px 0 rgba(255,255,255,0.05); }
.category-tension.suggestion-card:hover { border-color: rgba(248,113,113,0.3); box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 16px rgba(248,113,113,0.08), inset 0 1px 0 rgba(255,255,255,0.05); }
.category-surprise.suggestion-card:hover { border-color: rgba(167,139,250,0.3); box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 16px rgba(167,139,250,0.08), inset 0 1px 0 rgba(255,255,255,0.05); }
.category-dark.suggestion-card:hover { border-color: rgba(96,165,250,0.3); box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 16px rgba(96,165,250,0.08), inset 0 1px 0 rgba(255,255,255,0.05); }
.category-natural.suggestion-card:hover { border-color: rgba(74,222,128,0.3); box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 16px rgba(74,222,128,0.08), inset 0 1px 0 rgba(255,255,255,0.05); }

/* specific bar colors based on category */
.category-warm .sug-bar-fill { background: linear-gradient(90deg, rgba(251,191,36,0.6), var(--gold)); box-shadow: 0 0 8px rgba(251,191,36,0.3); }
.category-tension .sug-bar-fill { background: linear-gradient(90deg, rgba(248,113,113,0.6), var(--red)); box-shadow: 0 0 8px rgba(248,113,113,0.3); }
.category-surprise .sug-bar-fill { background: linear-gradient(90deg, rgba(167,139,250,0.6), var(--purple)); box-shadow: 0 0 8px rgba(167,139,250,0.3); }
.category-dark .sug-bar-fill { background: linear-gradient(90deg, rgba(96,165,250,0.6), var(--blue)); box-shadow: 0 0 8px rgba(96,165,250,0.3); }
.category-natural .sug-bar-fill { background: linear-gradient(90deg, rgba(74,222,128,0.6), var(--green)); box-shadow: 0 0 8px rgba(74,222,128,0.3); }

/* Before pseudo element colors */
.category-warm.suggestion-card::before { background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.category-tension.suggestion-card::before { background: var(--red); box-shadow: 0 0 12px var(--red); }
.category-surprise.suggestion-card::before { background: var(--purple); box-shadow: 0 0 12px var(--purple); }
.category-dark.suggestion-card::before { background: var(--blue); box-shadow: 0 0 12px var(--blue); }
.category-natural.suggestion-card::before { background: var(--green); box-shadow: 0 0 12px var(--green); }


.sug-rich .sug-body { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.sug-rich .sug-chord-group { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.sug-rich .sug-name { 
  font-family: var(--mono); 
  font-size: 1.8rem; /* Hacer el acorde más grande y visible */
  font-weight: 700; 
  color: var(--text); 
  line-height: 1; 
  padding-bottom: 0;
}
.sug-rich .sug-degree { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
.sug-rich .sug-score-group { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; width: 45%; }
.sug-score-text { font-family: var(--mono); font-size: 0.6rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.sug-tension-wrap { display: flex; align-items: center; gap: 5px; margin-top: 4px; }
.sug-tension-indicator { width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); }
.sug-tension-label { font-family: var(--mono); font-size: 0.55rem; color: var(--faint); text-transform: uppercase; }

.sug-reason {
  font-family: var(--body); font-size: 0.75rem; color: rgba(255,255,255,0.7);
  line-height: 1.35; background: rgba(0,0,0,0.2); padding: 8px 10px;
  border-radius: var(--r-sm); border-left: 2px solid rgba(255,255,255,0.08);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.category-warm .sug-reason { border-left-color: rgba(251,191,36,0.3); }
.category-tension .sug-reason { border-left-color: rgba(248,113,113,0.3); }
.category-surprise .sug-reason { border-left-color: rgba(167,139,250,0.3); }
.category-dark .sug-reason { border-left-color: rgba(96,165,250,0.3); }
.category-natural .sug-reason { border-left-color: rgba(74,222,128,0.3); }

/* ── CHORD MODAL ────────────────────────────────────────────── */
.chord-modal-overlay {
  position: fixed; inset:0; z-index:100;
  background: rgba(6,6,8,0.6); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  opacity:0; pointer-events:none;
  transition: opacity 300ms var(--ease);
}
.chord-modal-overlay.open { opacity:1; pointer-events:all; }
.chord-modal {
  background: var(--surface-4);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  padding: 32px 36px;
  min-width: 360px; max-width: 90vw;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.1);
  position: relative;
  transform: scale(0.92) translateY(20px);
  transition: transform 300ms var(--ease-out);
}
.chord-modal-overlay.open .chord-modal { transform: scale(1) translateY(0); }
.modal-close {
  position:absolute; top:14px; right:14px;
  font-size:1.1rem; color:var(--muted); cursor:pointer; line-height:1;
  width:28px; height:28px; border-radius:50%; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  transition: all 180ms var(--ease);
}
.modal-close:hover { color:var(--text); border-color:var(--teal-dim); }
.modal-chord-name {
  font-family:var(--mono); font-size: 2.4rem; font-weight:700;
  color: var(--teal); margin-bottom:4px;
}
.modal-chord-type { font-family:var(--mono); font-size:0.75rem; color:var(--muted); margin-bottom:20px; }
.modal-piano-label { font-family:var(--mono); font-size:0.62rem; color:var(--muted); margin-bottom:8px; letter-spacing:0.1em; }
.modal-notes-list { display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }
.modal-note-badge {
  font-family:var(--mono); font-size:0.7rem; font-weight:600;
  padding: 4px 10px; border-radius:var(--r-sm);
  background: rgba(0,212,180,0.12); border:1px solid rgba(0,212,180,0.25); color:var(--teal);
}

/* ── COMPOSER PATH STRIP ────────────────────────────────────── */
.composer-chip {
  --duration-beats: 8;
  --beat-unit: 60px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6px 4px; border-radius: var(--r-sm);
  background: var(--surface-3);
  border: 1px solid var(--border);
  min-width: 56px; flex-shrink: 0;
  width: calc(var(--duration-beats) * var(--beat-unit) - 4px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
  animation: slideIn 250ms var(--ease) both;
  transition: width 120ms var(--ease);
}
.composer-chip.is-resizing { transition: none; }
.cc-chord { font-family: var(--mono); font-size: 1rem; font-weight: 700; color: var(--text); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cc-roman { font-family: var(--mono); font-size: 0.6rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cc-voicing-badge { font-size: 0.52rem; font-family: var(--mono); font-weight: 600; padding: 1px 4px; border-radius: 3px; background: rgba(0,240,204,0.1); color: var(--teal); border: 1px solid rgba(0,240,204,0.22); line-height: 1.4; display: inline-block; margin-top: 2px; letter-spacing: 0.04em; text-transform: uppercase; }

/* Phase 6: Add Voicing Mode toggle */
.fh-voicing-toggle-btn { background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 4px; color: var(--muted); font-family: var(--mono); font-size: 0.62rem; font-weight: 600; padding: 2px 8px; cursor: pointer; transition: all 0.15s; letter-spacing: 0.05em; text-transform: uppercase; }
.fh-voicing-toggle-btn:hover { border-color: var(--teal-dim); color: var(--text); }
.fh-voicing-toggle-btn.is-active { border-color: rgba(0,240,204,0.4); color: var(--teal); background: rgba(0,240,204,0.1); }

.composer-chip.category-warm { border-color: rgba(251,191,36,0.3); box-shadow: 0 0 12px rgba(251,191,36,0.1), inset 0 1px 0 rgba(255,255,255,0.05); }
.composer-chip.category-warm .cc-chord { color: var(--gold); }

.composer-chip.category-tension { border-color: rgba(248,113,113,0.3); box-shadow: 0 0 12px rgba(248,113,113,0.1), inset 0 1px 0 rgba(255,255,255,0.05); }
.composer-chip.category-tension .cc-chord { color: var(--red); }

.composer-chip.category-surprise { border-color: rgba(167,139,250,0.3); box-shadow: 0 0 12px rgba(167,139,250,0.1), inset 0 1px 0 rgba(255,255,255,0.05); }
.composer-chip.category-surprise .cc-chord { color: var(--purple); }

.composer-chip.category-dark { border-color: rgba(96,165,250,0.3); box-shadow: 0 0 12px rgba(96,165,250,0.1), inset 0 1px 0 rgba(255,255,255,0.05); }
.composer-chip.category-dark .cc-chord { color: var(--blue); }

.composer-chip.category-natural { border-color: rgba(74,222,128,0.3); box-shadow: 0 0 12px rgba(74,222,128,0.1), inset 0 1px 0 rgba(255,255,255,0.05); }
.composer-chip.category-natural .cc-chord { color: var(--green); }

.add-to-composer-btn { transition: all 150ms var(--ease); }
.add-to-composer-btn:hover { background: rgba(255,255,255,0.1) !important; border-color: rgba(255,255,255,0.3) !important; transform: scale(1.05); color: #fff; }

/* Botones del Composer Path en estado deshabilitado */
#undoComposerBtn:disabled,
#exportComposerBtn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}


/* Chip activo durante reproducción */
@keyframes chipPulse {
  0%   { box-shadow: 0 0 8px rgba(0,240,204,0.2), inset 0 1px 0 rgba(255,255,255,0.05); }
  50%  { box-shadow: 0 0 20px rgba(0,240,204,0.5), inset 0 1px 0 rgba(255,255,255,0.1); }
  100% { box-shadow: 0 0 8px rgba(0,240,204,0.2), inset 0 1px 0 rgba(255,255,255,0.05); }
}
.composer-chip.is-playing {
  border-color: var(--teal) !important;
  background: rgba(0,240,204,0.1) !important;
  animation: chipPulse 800ms ease-in-out infinite;
}
.composer-chip.is-playing .cc-chord { color: var(--teal) !important; }
.composer-chip.is-playing .cc-roman { color: rgba(0,240,204,0.7) !important; }

/* ── MINI PIANO MODAL ───────────────────────────────────────── */
.modal-piano-wrap { position:relative; overflow-x:auto; }
.modal-piano {
  display:flex; position:relative;
  height: 70px; width:max-content;
}
.mpw { width:22px; height:70px; background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.1); border-radius:0 0 var(--r-sm) var(--r-sm); margin-right:1px; position:relative; flex-shrink:0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); }
.mpb { width:13px; height:44px; background:rgba(20,20,25,0.9); border:1px solid rgba(255,255,255,0.15); border-radius:0 0 3px 3px; position:absolute; top:0; z-index:2; flex-shrink:0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); }
.mpw.lit { background: var(--teal) !important; box-shadow: 0 0 16px rgba(0,240,204,0.5), inset 0 0 10px rgba(255,255,255,0.4); border-color: var(--teal); }
.mpb.lit { background: var(--teal-dim) !important; box-shadow: 0 0 12px rgba(0,240,204,0.4), inset 0 0 8px rgba(255,255,255,0.3); border-color: var(--teal); }

/* ── HISTORY STRIP ──────────────────────────────────────────── */
.history-panel {
  border-top: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 12px 20px;
  min-height: 64px; max-height: 74px;
  overflow-x: auto; overflow-y: hidden;
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
  grid-column: 1 / -1;
  z-index: 10;
}
.history-panel::-webkit-scrollbar { height:2px; }
.history-panel::-webkit-scrollbar-track { background:transparent; }
.history-panel::-webkit-scrollbar-thumb { background:var(--faint); border-radius:2px; }
.history-chip {
  display:inline-flex; flex-direction:column; align-items:center; gap:2px;
  padding: 5px 10px; border-radius:var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  font-family: var(--mono); flex-shrink:0;
  opacity:0.5; transition: opacity 300ms;
  position: relative;
}
.history-chip:last-child { opacity:1; border-color: rgba(0,212,180,0.4); }
.history-chip:last-child::after {
  content:''; position:absolute; inset:-1px; border-radius:var(--r-sm);
  box-shadow: 0 0 12px rgba(0,212,180,0.15);
  pointer-events:none;
}
@keyframes chipEnter {
  from { opacity:0; transform:translateX(-12px); }
  to   { opacity:0.5; transform:translateX(0); }
}
.history-chip.new-chip { animation: chipEnter 300ms var(--ease) both; }
.hc-name { font-size:0.8rem; font-weight:600; color:var(--text); }
.hc-deg  { font-size:0.57rem; color:var(--muted); }
.history-arrow {
  font-family:var(--mono); font-size:0.75rem; color:var(--faint); flex-shrink:0;
}
.history-empty { font-family:var(--mono); font-size:0.7rem; color:var(--faint); }

/* ── EMPTY STATE ────────────────────────────────────────────── */
.empty-state {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--faint); font-family:var(--mono); font-size:0.75rem;
  text-align:center; padding:32px 16px;
}
.empty-state svg { opacity:0.3; }

/* ── FOOTER ─────────────────────────────────────────────────── */
footer {
  display: flex; align-items:center; justify-content:space-between;
  padding: 8px 24px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size:0.62rem; font-family:var(--mono); color:var(--muted);
  flex-shrink:0; grid-column: 1/-1;
  z-index: 10;
}

/* ── RECONNECT BANNER ───────────────────────────────────────── */
#reconnectBanner {
  position: fixed; bottom:80px; left:50%; transform:translateX(-50%);
  background: var(--surface-3); border:1px solid rgba(251,191,36,0.3);
  color: var(--gold); font-family:var(--mono); font-size:0.7rem;
  padding:7px 16px; border-radius:var(--r-xl);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  z-index:99; display:none; align-items:center; gap:8px;
  transition: opacity 300ms;
}
#reconnectBanner.visible { display:flex; }
@keyframes spin { to { transform: rotate(360deg); } }
.spin-icon { animation: spin 1s linear infinite; display:inline-block; }

/* ── SCROLLBARS ─────────────────────────────────────────────── */
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--faint); border-radius:2px; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  main { grid-template-columns:1fr; grid-template-rows:1fr auto; }
  .suggestions-panel { border-left:none; border-top:1px solid var(--border); max-height:220px; }
  .chord-name { font-size:3.5rem; }
  .piano-wrap { display:none; }
}

/* ── SUGGESTION REASON TRUNCATION ── */
.sug-reason {
  font-size: 0.65rem;
  color: var(--muted);
  font-family: var(--body);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.7;
  margin-top: 4px;
}/* -- V2-A UI SHELL STYLES ------------------------------------------ */

.app-layout {
  display: flex;
  height: calc(100vh - 76px);
  margin-top: 76px;
  overflow: hidden;
}

/* SIDEBAR */
.sidebar {
  width: var(--active-sidebar-width);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 0 0 var(--fh-panel-padding) 0;
  flex-shrink: 0;
  transition: width 0.3s var(--ease);
  overflow: hidden;
}
/* sidebar.collapsed handled by --active-sidebar-width in body.sidebar-collapsed */
.sidebar.collapsed .nav-section,
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .nav-item kbd,
.sidebar.collapsed .badge-soon {
  display: none !important;
}
.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 12px 0;
}
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: calc(var(--fh-toolbar-gap) / 2);
}
.nav-item {
  padding: 10px var(--fh-panel-padding-wide);
  text-decoration: none;
  color: var(--muted);
  font-family: var(--body);
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 200ms var(--ease);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-item:hover {
  background: rgba(255,255,255,0.03);
  color: var(--text);
}
.nav-item.is-disabled,
.nav-item.is-disabled:hover,
.nav-item[aria-disabled="true"],
.nav-item[aria-disabled="true"]:hover {
  color: var(--faint);
  background: transparent;
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
.nav-item.active {
  color: var(--teal);
  background: rgba(0, 240, 204, 0.05);
  border-left: 3px solid var(--teal);
}
.badge-soon {
  font-family: var(--mono);
  font-size: 0.5rem;
  text-transform: uppercase;
  background: rgba(255,255,255,0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

/* MAIN WRAPPER */
.main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.workspace-grid {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
}

/* CHORD UNIVERSE PANEL */
.chord-universe-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  border-right: 1px solid var(--border);
  background: radial-gradient(circle at 50% 50%, rgba(26,26,36,0.3) 0%, transparent 80%);
}
.universe-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--fh-panel-padding) var(--fh-panel-padding) 0;
}
.u-tools {
  display: flex;
  align-items: center;
  gap: var(--fh-section-gap);
}
.u-select {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  min-height: var(--fh-control-height);
  padding: 0 12px;
  font-family: var(--body);
  font-size: 0.75rem;
  opacity: 0.6;
}
.u-search {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  min-height: var(--fh-control-height);
  padding: 0 12px;
}
.u-search input {
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--body);
  font-size: 0.75rem;
  outline: none;
  width: 140px;
}

.universe-tabs {
  display: flex;
  gap: var(--fh-section-gap);
  margin-top: var(--fh-toolbar-gap);
  padding: 0 var(--fh-panel-padding);
}
.tab-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 4px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.tab-btn.active {
  color: var(--text);
  border-bottom-color: var(--teal);
}

.universe-grid-layout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--fh-section-gap);
  width: 100%;
}
.universe-group {
  display: flex;
  flex-direction: column;
  gap: var(--fh-section-gap);
}
.group-title {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  display: flex;
  align-items: baseline;
  gap: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding-bottom: 8px;
}
.group-sub {
  font-size: 0.55rem;
  opacity: 0.6;
  text-transform: none;
  letter-spacing: 0;
}

.group-stable .group-title { color: var(--teal); border-bottom-color: rgba(0, 240, 204, 0.2); }
.group-predominant .group-title { color: var(--blue); border-bottom-color: rgba(96, 165, 250, 0.2); }
.group-dominant .group-title { color: var(--pink); border-bottom-color: rgba(249, 168, 212, 0.2); }
.group-color .group-title { color: var(--purple); border-bottom-color: rgba(184, 157, 250, 0.2); }

.u-cards {
  display: flex;
  flex-direction: column;
  gap: var(--fh-toolbar-gap);
}
.u-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--fh-card-radius);
  padding: calc(var(--fh-panel-padding) * 0.75) var(--fh-panel-padding);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 200ms var(--ease);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.03);
}
.u-card:hover {
  transform: translateY(-2px);
  background: var(--surface-3);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.06);
}
.u-card.shell {
  opacity: 0.7;
}

.group-stable .u-card:hover { border-color: rgba(0, 240, 204, 0.4); box-shadow: 0 4px 16px rgba(0,240,204,0.1); }
.group-predominant .u-card:hover { border-color: rgba(96, 165, 250, 0.4); box-shadow: 0 4px 16px rgba(96,165,250,0.1); }
.group-dominant .u-card:hover { border-color: rgba(249, 168, 212, 0.4); box-shadow: 0 4px 16px rgba(249,168,212,0.1); }
.group-color .u-card:hover { border-color: rgba(184, 157, 250, 0.4); box-shadow: 0 4px 16px rgba(184,157,250,0.1); }

.uc-sym {
  font-family: var(--mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}
.uc-rom {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted);
}

/* SELECTED CHORD PANEL */
.selected-chord-panel {
  display: flex;
  flex-direction: column;
  width: 340px;
  flex-shrink: 0;
  transition: width 0.3s var(--ease);
  overflow: hidden;
  border-left: 1px solid rgba(0,0,0,0); /* placeholder for animation */
}
.selected-chord-panel {
  background: var(--surface-2);
}
.selected-chord-panel.collapsed {
  width: 0;
  border-left: none;
}
.selected-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--fh-panel-padding-wide) + 8px);
}
.selected-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  opacity: 0.5;
}
.selected-chord-panel.active .selected-empty {
  display: none;
}
.selected-active {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--fh-section-gap) * 2);
  width: 100%;
}
.selected-chord-panel.active .selected-active {
  display: flex;
}

.empty-icon {
  font-size: 2rem;
  color: var(--faint);
  margin-bottom: 8px;
}
.empty-text {
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--muted);
}
.empty-sub {
  font-size: 0.75rem;
  color: var(--faint);
  max-width: 200px;
}

/* COMPOSER PANEL OVERRIDE */
#composerPanel {
  grid-column: auto;
  border-top: 1px solid var(--border);
  background: var(--surface);
  min-height: 100px;
}
.composer-header-title {
  font-size: 0.65rem;
  font-family: var(--mono);
  color: var(--teal);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}
.composer-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  opacity: 0.5;
  height: 100%;
  padding-left: 8px;
}
.ce-title {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text);
}
.ce-sub {
  font-family: var(--body);
  font-size: 0.65rem;
  color: var(--muted);
}

/* VOICING VIEW PLACEHOLDER */
.voicing-view-placeholder {
  height: 80px;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.7rem;
  position: relative;
  overflow: hidden;
}
.placeholder-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 20px 20px;
  z-index: 1;
}
.placeholder-text {
  z-index: 2;
  background: rgba(0,0,0,0.6);
  padding: 4px 12px;
  border-radius: 4px;
}
.placeholder-text span {
  color: var(--teal);
  font-size: 0.6rem;
  text-transform: uppercase;
}

/* Remove old layout classes that conflict if any */
body {
  grid-template-rows: auto 1fr auto;
}

/* Update suggestions list for Chord Universe */
.suggestions-list {
  padding: 16px;
  flex: 0 0 auto;
  max-height: 240px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  align-items: start;
  align-content: start;
  border-bottom: 1px solid var(--border);
  background: rgba(6, 6, 8, 0.22);
  position: relative;
  z-index: 1;
}
.suggestions-list:not(:has(.suggestion-card)) {
  display: block;
}


/* ── V2-B.1.2: Universe Grid Layout (4-column fix) ────────────── */
/* This block reinforces the 4-column grid. The earlier definition
   at ~line 807 sets the base; this section adds overflow + responsive. */
.universe-grid-layout {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  align-items: start;
  align-content: start;
}

/* Responsive: Tablet → 2 cols, Mobile → 1 col */
@media (max-width: 1100px) {
  .universe-grid-layout { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .universe-grid-layout { grid-template-columns: 1fr; }
}

/* ── Universe Group (each column) ─────────────────────────────── */
.universe-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.group-title {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  gap: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding-bottom: 6px;
  margin-bottom: 2px;
}
.group-sub {
  font-weight: 400;
  opacity: 0.5;
  font-size: 0.55rem;
  text-transform: none;
  letter-spacing: 0;
}

/* ── V2-B.2.3: Compact Card Sub-grid (14 chords/group) ──────── */
.u-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.u-card {
  min-height: auto;
  padding: 6px 5px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}
.uc-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.uc-sym {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.uc-rom {
  font-family: var(--mono);
  font-size: 0.55rem;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0.04em;
  line-height: 1;
}
.uc-context {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  margin-top: 2px;
  overflow: hidden;
}
.uc-badges {
  display: flex;
  justify-content: center;
  gap: 2px;
  max-width: 100%;
  overflow: hidden;
}
.uc-badge {
  max-width: 58px;
  padding: 1px 3px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.44rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uc-target-hint {
  max-width: 100%;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.48rem;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.u-icon {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 0.6rem;
  color: var(--muted);
  opacity: 0.35;
}
.u-card.active-mock {
  border-color: var(--teal);
  box-shadow: 0 0 16px rgba(0,240,204,0.15), inset 0 0 8px rgba(0,240,204,0.1);
  background: rgba(0,240,204,0.05);
}
.u-card.active-mock2 {
  border-color: var(--blue);
  box-shadow: 0 0 16px rgba(96,165,250,0.15), inset 0 0 8px rgba(96,165,250,0.1);
  background: rgba(96,165,250,0.05);
}
.active-mock .u-icon, .active-mock2 .u-icon {
  opacity: 1;
  color: inherit;
}

/* ── V2-B.2: Card interactivity + selected state ─────────────── */
.u-card {
  cursor: pointer;
  outline: none;
}
.u-card:focus-visible {
  box-shadow: 0 0 0 2px var(--teal);
}

/* Selected state: colored glow by function group */
.group-stable    .u-card.uc-selected {
  border-color: var(--teal);
  background: rgba(0, 240, 204, 0.08);
  box-shadow: 0 0 14px rgba(0,240,204,0.2), inset 0 0 6px rgba(0,240,204,0.08);
}
.group-predominant .u-card.uc-selected {
  border-color: var(--blue);
  background: rgba(96,165,250,0.08);
  box-shadow: 0 0 14px rgba(96,165,250,0.2), inset 0 0 6px rgba(96,165,250,0.08);
}
.group-dominant  .u-card.uc-selected {
  border-color: var(--pink);
  background: rgba(249,168,212,0.08);
  box-shadow: 0 0 14px rgba(249,168,212,0.2), inset 0 0 6px rgba(249,168,212,0.08);
}
.group-color     .u-card.uc-selected {
  border-color: var(--purple);
  background: rgba(184,157,250,0.08);
  box-shadow: 0 0 14px rgba(184,157,250,0.2), inset 0 0 6px rgba(184,157,250,0.08);
}

/* Selected: show star icon fully */
.u-card.uc-selected .u-icon { opacity: 0.85; color: var(--teal); }
.group-predominant .u-card.uc-selected .u-icon { color: var(--blue); }
.group-dominant    .u-card.uc-selected .u-icon { color: var(--pink); }
.group-color       .u-card.uc-selected .u-icon { color: var(--purple); }

/* Selected: symbol brighter */
.u-card.uc-selected .uc-sym { color: var(--text); opacity: 1; }

/* Tag badges in Selected Chord Panel */
.badge.uc-tag {
  font-size: 0.55rem;
  padding: 2px 6px;
  background: rgba(255,255,255,0.05);
  color: var(--muted);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 3px;
  text-transform: capitalize;
  letter-spacing: 0.03em;
}

/* Selected Mock */
.mock-selected {
  opacity: 1 !important;
  align-items: center;
  gap: 32px !important;
  width: 100%;
}
.mock-cc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Voicing Controls */
.voicing-controls-mock {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
}
.lower-controls-sidebar .voicing-controls-mock {
  max-width: none;
  gap: 10px;
  margin-top: 0;
}
.vc-title {
  font-size: 0.65rem;
  color: var(--muted);
  font-family: var(--mono);
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding-bottom: 8px;
}
.vc-preview-note {
  font-size: 0.6rem;
  color: var(--muted);
  font-style: italic;
  opacity: 0.65;
  margin-top: -4px;
  line-height: 1.3;
}
.lower-controls-sidebar .vc-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  line-height: 1.2;
}
.vc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.lower-controls-sidebar .vc-grid {
  gap: 8px;
}
.vc-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.vc-full {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.vc-label {
  font-size: 0.65rem;
  color: var(--faint);
  font-family: var(--mono);
}
.vc-val-box {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  font-size: 0.75rem;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lower-controls-sidebar .vc-val-box {
  min-height: 28px;
  padding: 5px 7px;
  font-size: 0.68rem;
  gap: 4px;
  min-width: 0;
  line-height: 1.2;
}
.vc-val-box span {
  color: var(--muted);
  flex: 0 0 auto;
}
.vc-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  gap: 2px;
}
.vc-step-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 0 3px;
  line-height: 1;
  transition: color 0.12s;
  flex-shrink: 0;
}
.vc-step-btn:hover:not(:disabled) {
  color: var(--text, #fff);
}
.vc-step-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.vc-step-val {
  flex: 1;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text, #e8e8e8);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vc-static {
  justify-content: center;
  font-size: 0.72rem;
  color: var(--muted);
}
.vc-select-wrap {
  padding: 0 4px;
}
.vc-bass-select {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text, #e8e8e8);
  font-family: var(--mono);
  font-size: 0.72rem;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  text-align: center;
}
.vc-bass-select:disabled {
  opacity: 0.35;
  cursor: default;
  color: var(--muted);
}
.vc-bass-select.is-muted {
  opacity: 0.45;
}
.vc-bass-select option {
  background: #222;
  color: #e8e8e8;
}
#vcControlsGrid.vc-no-selection .vc-stepper {
  opacity: 0.35;
  pointer-events: none;
}
.vc-context-label {
  font-size: 0.62rem;
  font-family: var(--mono);
  color: var(--faint);
  line-height: 1.4;
  font-style: italic;
  padding: 2px 0 6px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  margin-bottom: 4px;
}
.vc-context-label.has-selection {
  color: var(--accent, #7eb8f7);
  font-style: normal;
  font-weight: 600;
}
.composer-chip.is-selected {
  outline: 1px solid var(--accent, #7eb8f7);
  box-shadow: 0 0 0 3px rgba(126,184,247,0.12);
}
.composer-chip-delete {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 3;
  width: 18px;
  height: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  background: rgba(8,10,14,0.82);
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
}
.composer-chip.is-selected .composer-chip-delete {
  display: flex;
}
.composer-chip-delete:hover {
  border-color: rgba(248,113,113,0.65);
  color: var(--red);
}
.vc-slider {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}
.vc-slider-track {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  position: relative;
}
.vc-slider-fill {
  position: absolute;
  top: 0; left: 0; height: 100%;
  background: var(--teal);
  border-radius: 2px;
}
.vc-slider-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px; height: 12px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0,0,0,0.5);
}
.vc-slider span {
  font-size: 0.7rem;
  color: var(--text);
  font-family: var(--mono);
}
.vc-pill {
  background: transparent;
  border: 1px solid var(--teal);
  color: var(--teal);
  border-radius: 12px;
  padding: 2px 12px;
  font-size: 0.7rem;
}

/* Timeline Mock */
.timeline-mock {
  opacity: 1 !important;
  width: 100%;
  padding-right: 16px;
}
.timeline-ruler {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 4px;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--faint);
  width: 100%;
}
.timeline-ruler span {
  flex: 1;
}
.timeline-track {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0;
}
.composer-cards-row {
  width: max-content;
}
.composer-grid-row {
  width: max-content;
}
.tl-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tls-name {
  font-family: var(--mono);
  font-size: 0.65rem;
  padding-left: 2px;
}
.tl-blocks {
  display: flex;
  gap: 4px;
  height: 70px;
}
.cc-dur {
  font-size: 0.5rem;
  color: rgba(255,255,255,0.4);
  margin-top: 4px;
}

/* -- V2 Phase 3: Resize handle ---------------------------------------- */
.cc-resize-handle {
  position: absolute;
  top: 0; right: -1px; bottom: 0;
  width: 7px;
  cursor: ew-resize;
  background: transparent;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  z-index: 5;
  transition: background 150ms var(--ease);
}
.cc-resize-handle::after {
  content: "";
  position: absolute;
  top: 50%; right: 1px;
  transform: translateY(-50%);
  width: 3px; height: 18px;
  border-radius: 2px;
  background: rgba(255,255,255,0.12);
  transition: background 150ms var(--ease), height 150ms var(--ease);
}
.composer-chip:hover .cc-resize-handle::after {
  background: rgba(0,240,204,0.35);
  height: 24px;
}
.composer-chip.is-resizing {
  border-color: var(--teal) !important;
  box-shadow: 0 0 12px rgba(0,240,204,0.15), inset 0 1px 0 rgba(255,255,255,0.05);
}
.composer-chip.is-resizing .cc-resize-handle::after {
  background: var(--teal);
  height: 28px;
}

/* -- V2 Phase 4: Section / Bar Guide Overlay ----------------------------- */
.composer-bar-guide {
  position: relative;
  height: 18px;
  margin-top: 2px;
  pointer-events: none;
  user-select: none;
}
.composer-bar-guide-track {
  position: relative;
  height: 100%;
}
.composer-bar-tick {
  position: absolute;
  top: 0;
  width: 1px;
  height: 10px;
  background: rgba(255,255,255,0.15);
}
.composer-bar-tick.is-first {
  height: 12px;
  background: rgba(255,255,255,0.25);
}
.composer-bar-label {
  position: absolute;
  top: 10px;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.45rem;
  color: rgba(255,255,255,0.25);
  line-height: 1;
  white-space: nowrap;
}
.composer-section-summary {
  font-family: var(--mono);
  font-size: 0.5rem;
  color: rgba(0,240,204,0.35);
  margin-top: 1px;
  letter-spacing: 0.03em;
}

.composer-section-line {
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  background: rgba(255,255,255,0.08);
  pointer-events: none;
}

.composer-bar-tick.sub-tick {
  height: 5px;
  background: rgba(255,255,255,0.08);
}

/* Voicing View Roll Mock */
.voicing-view-placeholder {
  height: var(--bottom-panel-height, 250px);
  max-height: min(46vh, 500px);
  min-height: 150px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  transition: height 0.3s var(--ease);
  overflow: hidden;
  min-width: 0;
}
.voicing-view-placeholder.collapsed {
  min-height: 40px;
  height: 40px !important;
  overflow: hidden;
}
.voicing-view-placeholder.resizing {
  transition: none; /* disable transition while dragging */
}
.panel-resizer.horizontal {
  height: 8px;
  cursor: row-resize;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.2s;
  flex-shrink: 0;
}
.panel-resizer.horizontal:hover, .panel-resizer.horizontal:active {
  background: rgba(255,255,255,0.02);
}
.resizer-handle {
  width: 40px;
  height: 2px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
}
.vv-header {
  border-bottom: 1px solid var(--border);
  display: flex;
  flex: 0 0 auto;
}
.vv-tabs {
  display: flex;
  gap: 24px;
  padding: 0 24px;
}
.vvt {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  padding: 12px 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.vvt.active {
  color: var(--text);
  border-bottom-color: var(--teal);
}
.vv-body {
  flex: 1;
  display: flex;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.vv-sidebar {
  width: 160px;
  flex: 0 0 160px;
  border-right: 1px solid var(--border);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lower-controls-sidebar {
  width: 220px;
  flex: 0 0 220px;
  gap: 14px;
  padding: 14px;
  justify-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
}
.lower-control-section {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
.lower-section-title {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--muted);
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding-bottom: 8px;
  line-height: 1.2;
}
.piano-roll-options {
  gap: 10px;
}
.vv-control {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vv-label {
  font-size: 0.6rem;
  font-family: var(--mono);
  color: var(--faint);
}
.vv-select {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  min-height: 28px;
  padding: 4px 6px;
  font-size: 0.75rem;
}
.piano-roll-zoom-control {
  gap: 5px;
}
.piano-roll-zoom-stepper,
.piano-roll-zoom-actions {
  display: grid;
  grid-template-columns: 28px minmax(46px, 1fr) 28px;
  gap: 5px;
  align-items: center;
}
.piano-roll-zoom-actions {
  grid-template-columns: 1fr 1fr;
}
.piano-roll-zoom-btn,
.piano-roll-action-btn {
  min-height: 26px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.7rem;
  cursor: pointer;
}
.piano-roll-zoom-btn:hover,
.piano-roll-action-btn:hover {
  border-color: rgba(0, 240, 204, 0.4);
  color: var(--teal);
}
.piano-roll-zoom-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.piano-roll-zoom-value {
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 4px;
  background: rgba(0,0,0,0.18);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.68rem;
}
.vv-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.25;
}
.lower-controls-sidebar .vv-check label {
  min-width: 0;
  overflow-wrap: anywhere;
}
.vv-main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
}
.vv-labels-row {
  display: flex;
  height: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.vv-lbl {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-family: var(--mono);
  border-right: 1px dashed rgba(255,255,255,0.05);
}
.vv-lbl span { font-size: 0.55rem; opacity: 0.6; }
.lbl-teal { color: var(--teal); }
.lbl-blue { color: var(--blue); }
.lbl-pink { color: var(--pink); }
.lbl-purple { color: var(--purple); }

.vv-roll-content {
  flex: 1;
  flex-basis: 0;
  min-height: 0;
  min-width: 0;
  display: flex;
  background: rgba(0,0,0,0.3);
  overflow: hidden;
}
.vv-piano-keys {
  width: 40px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
}
.vv-k { height: 12px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.vv-k.w { background: rgba(255,255,255,0.05); }
.vv-k.b { background: rgba(0,0,0,0.6); }
.vv-piano-roll {
  flex: 1;
  position: relative;
}
.vv-grid-lines {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 100% 12px, 11% 100%;
}
.vv-bar {
  position: absolute;
  height: 8px;
  border-radius: 4px;
  opacity: 0.8;
}
.b-teal { background: var(--teal); }
.b-blue { background: var(--blue); }
.b-pink { background: var(--pink); }
.b-purple { background: var(--purple); }

.vv-velocity {
  width: 80px;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 8px;
}
.vv-v-title { font-size: 0.5rem; color: var(--faint); font-family: var(--mono); text-align: center; margin-bottom: 8px; }
.vv-v-bars { flex: 1; display: flex; justify-content: space-between; align-items: flex-end; }
.vv-v-bar { width: 4px; background: var(--teal); opacity: 0.5; border-radius: 2px 2px 0 0; }

/* Loop button active state */
.composer-loop-btn.is-loop-active {
  border-color: rgba(74, 222, 128, 0.5) !important;
  color: var(--green) !important;
  background: rgba(74, 222, 128, 0.1) !important;
}

/* Editable Piano Roll MVP */
.piano-roll-mode-pill {
  color: var(--teal);
  border-color: rgba(0, 240, 204, 0.28);
  background: rgba(0, 240, 204, 0.08);
}

.piano-roll-sidebar {
  opacity: 1;
}

body[data-density="compact"] .lower-controls-sidebar {
  width: 204px;
  flex-basis: 204px;
  gap: 10px;
  padding: 10px;
}

body[data-density="compact"] .lower-control-section {
  gap: 7px;
}

body[data-density="compact"] .lower-controls-sidebar .vc-grid {
  gap: 5px;
}

body[data-density="compact"] .lower-controls-sidebar .vc-val-box {
  min-height: 26px;
  padding: 4px 5px;
  font-size: 0.64rem;
}

body[data-density="compact"] .lower-section-title,
body[data-density="compact"] .lower-controls-sidebar .vc-title {
  padding-bottom: 6px;
  font-size: 0.6rem;
}

body[data-density="compact"] .piano-roll-options {
  gap: 7px;
}

body[data-density="compact"] .lower-controls-sidebar .vv-select {
  min-height: 26px;
  font-size: 0.68rem;
}

body[data-density="compact"] .piano-roll-zoom-btn,
body[data-density="compact"] .piano-roll-action-btn,
body[data-density="compact"] .piano-roll-zoom-value {
  min-height: 24px;
  font-size: 0.64rem;
}

body[data-density="compact"] .lower-controls-sidebar .vv-check {
  font-size: 0.68rem;
}

.piano-roll-header-row {
  display: flex;
  height: 54px;
  flex: 0 0 54px;
  min-width: 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: rgba(0,0,0,0.16);
  overflow: hidden;
}

.piano-roll-header-spacer {
  width: 54px;
  flex: 0 0 54px;
  border-right: 1px solid var(--border);
}

.piano-roll-scroll {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.piano-roll-scroll::-webkit-scrollbar { height: 4px; }
.piano-roll-scroll::-webkit-scrollbar-track { background: transparent; }
.piano-roll-scroll::-webkit-scrollbar-thumb { background: var(--faint); border-radius: 2px; }

.piano-roll-header-scroll {
  flex: 1;
  min-width: 0;
  scrollbar-width: none;
}
.piano-roll-header-scroll::-webkit-scrollbar { display: none; }

.piano-roll-chord-header {
  display: flex;
  height: 54px;
  border-bottom: none;
}

.piano-roll-chord-block {
  flex: 0 0 auto;
  min-width: 36px;
  border-right: 1px solid rgba(255,255,255,0.1);
  border-top: 2px solid var(--teal-dim);
  overflow: hidden;
  padding: 8px 6px 4px;
  transition: background 120ms;
}
.piano-roll-chord-block.category-chromatic { border-top-color: var(--gold); }
.piano-roll-chord-block.category-borrowed  { border-top-color: var(--purple); }
.piano-roll-chord-block.category-secondary { border-top-color: var(--blue); }
.piano-roll-chord-block.category-pivot     { border-top-color: var(--blue); }
.piano-roll-chord-block.is-hovered {
  background: rgba(0, 240, 204, 0.09);
}
.piano-roll-chord-block strong,
.piano-roll-chord-block span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
}
.piano-roll-chord-block strong {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
}
.piano-roll-chord-block span {
  font-size: 0.58rem;
  color: var(--muted);
  margin-top: 1px;
}

.piano-roll-body-scroll {
  flex: 1;
  flex-basis: 0;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  max-height: 100%;
  background: rgba(0,0,0,0.25);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--faint) transparent;
}
.piano-roll-body-scroll::-webkit-scrollbar { width: 4px; height: 4px; }
.piano-roll-body-scroll::-webkit-scrollbar-track { background: transparent; }
.piano-roll-body-scroll::-webkit-scrollbar-thumb { background: var(--faint); border-radius: 2px; }

.piano-roll-pitch-labels {
  width: 54px;
  flex: 0 0 54px;
  display: block;
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-width: none;
  min-height: 0;
  max-height: 100%;
  align-self: stretch;
  overscroll-behavior: contain;
}
.piano-roll-pitch-labels::-webkit-scrollbar { display: none; }
.piano-roll-pitch-labels .vv-k {
  position: relative;
  box-sizing: border-box;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
  font-family: var(--mono);
  font-size: 0.54rem;
  color: var(--faint);
}
.piano-roll-pitch-labels .vv-k.w { background: rgba(255,255,255,0.05); color: var(--muted); }
.piano-roll-pitch-labels .vv-k.b { background: rgba(0,0,0,0.52); color: rgba(255,255,255,0.28); }

.editable-piano-roll {
  min-width: 100%;
  flex: 0 0 auto;
  position: relative;
  background: rgba(4,4,8,0.72);
  cursor: crosshair;
  user-select: none;
  outline: none;
}
.editable-piano-roll:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(0, 240, 204, 0.35);
}

.piano-roll-scale-rows,
.piano-roll-vertical-grid,
.piano-roll-notes {
  position: absolute;
  inset: 0;
}
.piano-roll-notes {
  z-index: 4;
}
.piano-roll-notes.is-hidden {
  display: none;
}
.piano-roll-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--teal);
  box-shadow: 0 0 8px var(--teal-glow);
  pointer-events: none;
  z-index: 20;
  display: none;
}

.piano-roll-row {
  position: absolute;
  left: 0;
  right: 0;
  border-bottom: 1px solid rgba(255,255,255,0.035);
  background: rgba(255,255,255,0.01);
}
.piano-roll-row.in-scale {
  background: rgba(0, 240, 204, 0.035);
}

.piano-roll-grid-line,
.piano-roll-chord-start {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,0.045);
  pointer-events: none;
}
.piano-roll-grid-line.strong {
  background: rgba(255,255,255,0.16);
}
.piano-roll-chord-start {
  z-index: 2;
  background: rgba(0, 240, 204, 0.2);
}

.piano-roll-note {
  position: absolute;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(0,240,204,0.82), rgba(0,179,153,0.74));
  border: 1px solid rgba(185,255,244,0.55);
  box-shadow: 0 0 10px rgba(0,240,204,0.18);
  cursor: grab;
  z-index: 5;
}
.piano-roll-note.is-generated {
  opacity: 0.7;
}
.piano-roll-note.is-user,
.piano-roll-note.is-edited {
  opacity: 0.95;
}
.piano-roll-note.chord-tone {
  box-shadow: 0 0 14px rgba(0,240,204,0.35);
  border-color: rgba(255,255,255,0.7);
}
.piano-roll-note.outside-scale {
  background: linear-gradient(180deg, rgba(252,211,77,0.8), rgba(253,186,116,0.64));
  border-color: rgba(252,211,77,0.6);
  box-shadow: 0 0 10px rgba(252,211,77,0.18);
}
.piano-roll-note.selected {
  outline: 2px solid rgba(255,255,255,0.9);
  outline-offset: 1px;
  z-index: 7;
}
.piano-roll-note:active {
  cursor: grabbing;
}
.piano-roll-note-resize {
  position: absolute;
  top: -1px;
  right: -2px;
  bottom: -1px;
  width: 8px;
  cursor: ew-resize;
  border-radius: 0 4px 4px 0;
}
.piano-roll-note-resize::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 2px;
  bottom: 2px;
  width: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,0.55);
}

.piano-roll-empty {
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--faint);
  pointer-events: none;
  z-index: 8;
}

/* Chord column hover overlays */
.piano-roll-chord-cols {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.piano-roll-chord-col {
  position: absolute;
  top: 0;
  bottom: 0;
  transition: background 120ms;
}
.piano-roll-chord-col.is-hovered {
  background: rgba(0, 240, 204, 0.045);
}

/* Pitch rail — C notes */
.piano-roll-pitch-labels .vv-k.is-c {
  background: rgba(0,240,204,0.07);
  border-top: 1px solid rgba(0,240,204,0.22);
  color: var(--teal-dim);
}

/* C-note separator in grid */
.piano-roll-row.is-c {
  border-top: 1px solid rgba(0,240,204,0.1);
}

/* Mock Piano visual */
.mock-piano-keys {
  display: flex;
  align-items: flex-start;
  height: 80px;
  margin-top: 24px;
}
.mp-key {
  height: 100%;
  border-radius: 0 0 2px 2px;
}
.mp-key.w {
  width: 20px;
  background: rgba(255,255,255,0.8);
  margin-right: 1px;
}
.mp-key.b {
  width: 14px;
  height: 60%;
  background: #111;
  margin-left: -7px;
  margin-right: -7px;
  z-index: 1;
}
.mp-key.highlight-d, .mp-key.highlight-f, .mp-key.highlight-a, .mp-key.highlight-c {
  background: var(--blue);
}

/* Category borders for timeline */
.category-tension { border-top: 2px solid var(--pink); }
.category-surprise { border-top: 2px solid var(--purple); }

/* V2-A.3 Polish */
.nav-section {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--faint);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  padding-left: 12px;
}
.shortcut-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shortcut-item kbd {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--muted);
}
.add-mock:hover {
  background: rgba(255,255,255,0.05) !important;
  color: var(--text) !important;
}

/* V2-A.4 Header Polish */
.app-header {
  height: 76px;
  display: flex;
  align-items: center;
  background: rgba(11, 13, 20, 0.9);
  border-bottom: 1px solid var(--border);
  padding: 0;
  backdrop-filter: blur(10px);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}
.header-logo-block {
  width: 200px;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 20px;
  border-right: 1px solid var(--border);
}
.header-logo-block .logo {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--teal);
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-controls-wrapper {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 var(--fh-panel-padding-wide);
  gap: calc(var(--fh-section-gap) + 4px);
  overflow-x: auto;
}
.hc-group {
  display: flex;
  align-items: center;
  gap: var(--fh-section-gap);
}
.hc-divider-vert {
  width: 1px;
  height: 32px;
  background: var(--border);
  margin: 0 8px;
}
.ctrl-group {
  display: flex;
  flex-direction: column;
  gap: var(--fh-toolbar-gap);
}
.ctrl-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--muted);
  letter-spacing: 0.05em;
  padding-left: 2px;
}
.compound-ctrl .compound-select {
  display: flex;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 4px 8px;
}
.h-divider {
  width: 1px;
  height: 16px;
  background: var(--border);
  margin: 0 4px;
}
.h-select {
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--body);
  font-size: 0.8rem;
  outline: none;
  cursor: pointer;
}
.h-select.secondary { color: var(--muted); }
.mock-dropdown {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 6px 14px;
  font-size: 0.85rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 12px;
}
.mock-dropdown span { color: var(--muted); font-size: 0.6rem; }
.overlay-select {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
  background: transparent !important;
  border: none !important;
}
.bpm-control {
  display: flex;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  min-height: var(--fh-header-control-height);
  padding: 0 6px;
}
.bpm-btn {
  color: var(--muted);
  padding: 0 6px;
  cursor: pointer;
  opacity: 0.7;
  background: transparent;
  border: none;
  font-size: 1rem;
  line-height: 1;
  border-radius: var(--r-sm);
  transition: opacity 120ms, color 120ms, background 120ms;
  user-select: none;
}
.tempo-step-btn {
  cursor: pointer;
  user-select: none;
}
.bpm-btn:hover  { opacity: 1; color: var(--teal); background: rgba(0,240,204,0.08); }
.bpm-btn:active { opacity: 1; background: rgba(0,240,204,0.16); }
.bpm-control input {
  width: 44px;
  background: transparent;
  border: none;
  color: var(--text);
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: var(--mono);
  outline: none;
  appearance: textfield;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  transition: color 120ms;
}
.bpm-control input:focus { color: var(--teal); }
.bpm-control input::-webkit-inner-spin-button,
.bpm-control input::-webkit-outer-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

/* Default Chord Length Control */
.default-chord-length-control {
  margin-top: 10px;
}
.default-chord-length-control select.default-length-select {
  width: 100%;
  margin-top: 4px;
}
.style-mock { width: 140px; justify-content: space-between; }
.emotion-dropdown-mock {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  min-height: var(--fh-header-control-height);
  padding: 0 14px;
  font-size: 0.85rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  width: 170px;
}
.btn-generate {
  background: rgba(0, 240, 204, 0.1);
  border: 1px solid var(--teal);
  color: var(--teal);
  border-radius: var(--r-md);
  min-height: var(--fh-header-control-height);
  padding: 0 16px;
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-generate:hover { background: rgba(0, 240, 204, 0.2); }
.btn-reset {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: var(--r-md);
  min-height: var(--fh-header-control-height);
  padding: 0 16px;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.btn-reset:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.audio-midi-group { gap: var(--fh-section-gap); }
.btn-audio {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: var(--r-md);
  min-height: var(--fh-header-control-height);
  padding: 0 12px;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.midi-status-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  min-height: var(--fh-header-control-height);
  padding: 0 12px;
}
.midi-status-pill .status-text {
  font-size: 0.75rem;
  color: var(--muted);
}

/* ── V2-A.6 Panel Docking & Layout Polish ──────────────────── */

/* Panel toggle buttons */
.panel-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--fh-header-control-height);
  height: var(--fh-header-control-height);
  border-radius: var(--r-sm);
  transition: all 200ms var(--ease);
}
.panel-toggle:hover {
  background: rgba(255,255,255,0.06) !important;
  color: var(--text) !important;
}

/* Sidebar icon alignment */
.sidebar .nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar .nav-item svg {
  flex-shrink: 0;
  opacity: 0.7;
}
.sidebar .nav-item:hover svg {
  opacity: 1;
}
.sidebar .nav-item.active svg {
  opacity: 1;
  stroke: var(--teal);
}

/* Sidebar collapsed toggle visible */
.sidebar.collapsed .sidebar-header {
  justify-content: center !important;
  padding: 12px 0 0 0 !important;
}
.sidebar.collapsed .panel-toggle {
  margin: 0 auto;
}

/* Separator reinforcements */
.chord-universe-panel {
  border-right: 2px solid rgba(255,255,255,0.05);
}
.sidebar {
  border-right: 2px solid rgba(255,255,255,0.05);
}
.composer-panel {
  border-top: 2px solid rgba(255,255,255,0.05);
}

/* Right panel re-open tab (shows when collapsed) */
.right-panel-tab {
  display: none;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: var(--r-md) 0 0 var(--r-md);
  padding: 12px 6px;
  color: var(--muted);
  font-size: 0.65rem;
  font-family: var(--mono);
  cursor: pointer;
  z-index: 10;
  letter-spacing: 0.05em;
  transition: all 200ms var(--ease);
}
.right-panel-tab:hover {
  background: var(--surface-3);
  color: var(--text);
}
.workspace-grid {
  position: relative;
}

/* Resizer hover feedback */
.panel-resizer.horizontal:hover .resizer-handle {
  background: var(--teal);
  width: 60px;
}

/* Bottom panel collapsed - keep header visible */
.voicing-view-placeholder.collapsed .vv-body {
  display: none;
}

/* Smooth nav section separators */
.nav-section {
  border-top: 1px solid rgba(255,255,255,0.04);
  padding-top: 16px;
}
.nav-section:first-child {
  border-top: none;
  padding-top: 0;
}

/* ── V2-B.4 Composer Lane Drag & Drop ──────────────────────── */
.composer-chip[draggable="true"] {
  cursor: grab;
  user-select: none;
}
.composer-chip[draggable="true"]:active {
  cursor: grabbing;
}
.composer-chip.is-dragging {
  opacity: 0.35;
}
.composer-chip.drag-over {
  border-color: var(--teal) !important;
  background: rgba(0, 240, 204, 0.08) !important;
  box-shadow: 0 0 0 2px rgba(0, 240, 204, 0.25), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  transform: scale(1.04);
}
.cc-drag-handle {
  font-size: 0.65rem;
  color: var(--faint);
  line-height: 1;
  cursor: grab;
  user-select: none;
  letter-spacing: 0.05em;
  opacity: 0.4;
  transition: opacity 150ms var(--ease);
  margin-bottom: 2px;
}
.composer-chip[draggable="true"]:hover .cc-drag-handle {
  opacity: 0.85;
}

/* ── V2-B.5 Interaction Polish ──────────────────────────────── */

/* Toast notification */
.fh-toast {
  position: fixed;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--surface-4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.68rem;
  padding: 6px 18px;
  border-radius: var(--r-xl);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
  z-index: 300;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.fh-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── SoundBank loading overlay ───────────────────────────────── */
/* Small centered card, non-blocking, only shown for warm_piano_wav */
.sb-loading-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 250;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
}
.sb-loading-overlay.visible { opacity: 1; }
.sb-loading-card {
  background: var(--surface-4);
  border: 1px solid rgba(0, 240, 204, 0.28);
  border-radius: 10px;
  padding: 12px 22px;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text);
  white-space: nowrap;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.02em;
}

/* Chip just-added glow */
@keyframes chipJustAdded {
  0%   { box-shadow: 0 0 0 2px var(--teal), 0 0 18px rgba(0, 240, 204, 0.5); }
  55%  { box-shadow: 0 0 0 2px rgba(0, 240, 204, 0.35), 0 0 10px rgba(0, 240, 204, 0.2); }
  100% { box-shadow: none; }
}
.composer-chip.just-added {
  animation: chipJustAdded 950ms var(--ease-out) both;
}

/* + Add to Lane button disabled state */
#addUniverseChordBtn:disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}
#addUniverseChordBtn:not(:disabled) {
  cursor: pointer;
}

/* ── V2-B.6 UI Truthfulness ─────────────────────────────────── */
.mock-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.47rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--faint);
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
  cursor: default;
  user-select: none;
}
.ui-mock-section {
  opacity: 0.42;
  pointer-events: none;
}

/* Native Header Selects (KEY / SCALE / MODE) */
.control-select-wrap {
  width: 100%;
  min-width: 0;
  position: relative;
  overflow: visible;
  z-index: 5;
}

.header-select {
  width: 100%;
  height: var(--fh-header-control-height);
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #121931;
  color: var(--text);
  padding: 0 26px 0 12px;
  font-size: 0.72rem;
  font-family: var(--mono);
  outline: none;
  appearance: auto;
}

.header-select:focus {
  border-color: rgba(0, 212, 180, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 212, 180, 0.25);
}

.header-select option {
  background: #121931;
  color: #f3f6ff;
}

.uc-content {
  overflow: hidden;
  max-width: 100%;
}
.uc-sym, .uc-rom {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
}

/* ── V2-C.5: Compact Suggestion Strip ────────────────────────── */
.suggestions-list {
  padding: 8px 16px !important;
  flex: 0 0 auto !important;
  min-height: 78px;
  max-height: 92px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  border-bottom: 1px solid var(--border);
  background: rgba(12, 12, 24, 0.72) !important;
  grid-template-columns: unset !important;
  align-items: stretch !important;
}
.suggestions-list:empty,
.suggestions-list[style*="display: none"],
.suggestions-list[style*="display:none"] {
  display: none !important;
}

.suggestions-strip-header {
  flex: 0 0 auto;
  min-width: 130px;
}
.suggestions-strip-header span {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}
.suggestions-strip-header small {
  display: block;
  font-size: 0.58rem;
  color: var(--muted);
  white-space: nowrap;
}

.suggestions-strip-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.suggestions-strip-scroll::-webkit-scrollbar { height: 3px; }
.suggestions-strip-scroll::-webkit-scrollbar-track { background: transparent; }
.suggestions-strip-scroll::-webkit-scrollbar-thumb { background: var(--faint); border-radius: 2px; }

.suggestion-chip {
  flex: 0 0 auto;
  min-width: 96px;
  max-width: 160px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.035);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  cursor: pointer;
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.suggestion-chip:hover {
  border-color: rgba(0, 212, 180, 0.45);
  background: rgba(0, 212, 180, 0.06);
}
.suggestion-chip-main {
  min-width: 0;
}
.suggestion-chip-main strong {
  display: block;
  font-family: var(--mono);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.suggestion-chip-main span {
  display: block;
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
}
.suggestion-chip-add {
  flex: 0 0 auto;
  border: 1px solid rgba(0,212,180,0.35);
  color: var(--teal);
  background: rgba(0,212,180,0.08);
  border-radius: 999px;
  width: 22px;
  height: 22px;
  cursor: pointer;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms;
}
.suggestion-chip-add:hover {
  background: rgba(0,212,180,0.2);
}

/* ── V2-C.5.1: Auto-Gen Controls ──────────────────────────── */
.autogen-strip {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}
.autogen-label {
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted);
  white-space: nowrap;
  margin-right: 2px;
}
.autogen-select {
  height: var(--fh-autogen-control-height);
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #121931;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.62rem;
  padding: 0 6px;
  outline: none;
  appearance: auto;
  cursor: pointer;
}
.autogen-select option {
  background: #121931;
  color: #f3f6ff;
}
.autogen-select:focus {
  border-color: rgba(0, 212, 180, 0.55);
}

/* ── V2-C.5.1: Suggestions strip top row ──────────────────── */
.suggestions-strip-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 22px;
}
.generated-add-all-btn {
  flex: 0 0 auto;
  border: 1px solid rgba(0,212,180,0.35);
  color: var(--teal);
  background: rgba(0,212,180,0.08);
  border-radius: 999px;
  padding: 3px 10px;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms;
  white-space: nowrap;
}
.generated-add-all-btn:hover {
  background: rgba(0,212,180,0.2);
}

.suggestions-list[hidden],
.suggestions-strip[hidden],
.suggestions-strip-wrap[hidden],
.suggestions-panel[hidden],
.history-status[hidden],
.onboarding-hint[hidden],
.is-hidden {
  display: none !important;
  min-height: 0 !important;
  max-height: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* ── HARMONY COMPASS STATES ──────────────────────────── */
.u-card {
  position: relative;
}

.u-card.relation-selected {
  border-color: var(--teal) !important;
  box-shadow: 0 0 20px rgba(0,240,204,0.5), inset 0 0 15px rgba(0,240,204,0.15) !important;
  opacity: 1 !important;
  background: rgba(0,240,204,0.12) !important;
  z-index: 10;
}

.u-card.relation-close {
  border-color: rgba(0,240,204,0.6) !important;
  box-shadow: 0 0 10px rgba(0,240,204,0.25) !important;
  opacity: 1 !important;
  background: rgba(0,240,204,0.05) !important;
}

.u-card.relation-smooth {
  border-color: rgba(96,165,250,0.4) !important;
  box-shadow: 0 0 4px rgba(96,165,250,0.1) !important;
  opacity: 0.9 !important;
  background: rgba(96,165,250,0.02) !important;
}

.u-card.relation-tension {
  border-color: rgba(249,168,212,0.6) !important;
  box-shadow: 0 0 6px rgba(249,168,212,0.15) !important;
  opacity: 1 !important;
  background: rgba(249,168,212,0.06) !important;
  transition: all 200ms var(--ease);
}
.u-card.relation-tension:hover {
  border-color: rgba(249,168,212,0.9) !important;
  box-shadow: 0 0 14px rgba(249,168,212,0.4) !important;
  background: rgba(249,168,212,0.12) !important;
}

.u-card.relation-outside {
  border-color: rgba(255,255,255,0.1) !important;
  border-style: dashed !important;
  opacity: 0.5 !important;
}

/* Pseudo-element badges for Harmony Compass */
.u-card[class*="relation-"]::after {
  position: absolute;
  top: -8px;
  right: 8px;
  font-size: 0.55rem;
  font-family: var(--mono);
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
}

.u-card.relation-selected::after {
  content: 'Selected';
  color: #fff;
  background: var(--teal);
  border: 1px solid rgba(255,255,255,0.3);
}

.u-card.relation-close::after {
  content: 'Close';
  color: var(--teal);
  background: rgba(0, 240, 204, 0.15);
  border: 1px solid rgba(0, 240, 204, 0.3);
}

.u-card.relation-smooth::after {
  content: 'Smooth';
  color: var(--blue);
  background: rgba(96, 165, 250, 0.1);
  border: 1px solid rgba(96, 165, 250, 0.2);
  font-size: 0.5rem;
  padding: 1px 4px;
  opacity: 0.85;
}

.u-card.relation-tension::after {
  content: 'Tension';
  color: var(--pink);
  background: rgba(249, 168, 212, 0.15);
  border: 1px solid rgba(249, 168, 212, 0.3);
}

.u-card.relation-outside::after {
  content: 'Outside';
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.5rem;
  padding: 1px 4px;
  opacity: 0.7;
}

/* ── DEGREE VIEW — V2-B.5 ──────────────────────────────────────────────── */

/* 8-column outer grid when degree layout is active */
.universe-grid-layout.dv-active {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}

/* Single-column card stack inside each degree column */
.dv-active .u-cards {
  grid-template-columns: 1fr;
  gap: 3px;
}

/* Degree column header */
.dv-col-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 4px;
  min-height: 40px;
  text-transform: none;
}

.dv-lbl {
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: none;
}

.dv-root {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--teal);
  font-weight: 600;
  line-height: 1;
}

.dv-count {
  font-family: var(--mono);
  font-size: 0.5rem;
  color: var(--muted);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 3px;
  padding: 0 4px;
  line-height: 1.6;
}

/* Outside column: dimmer header */
.dv-outside .dv-lbl {
  color: var(--faint);
  font-size: 0.65rem;
  font-weight: 500;
}
.dv-outside .dv-col-header {
  border-bottom-style: dashed;
}

/* Selected state in degree view (generic teal — no group parent) */
.dv-active .u-card.uc-selected {
  border-color: var(--teal);
  background: rgba(0,240,204,0.08);
  box-shadow: 0 0 14px rgba(0,240,204,0.2), inset 0 0 6px rgba(0,240,204,0.08);
}
.dv-active .u-card.uc-selected .u-icon { opacity: 0.85; color: var(--teal); }
.dv-active .u-card.uc-selected .uc-sym { opacity: 1; }

/* Mini metadata badges (function_group + tier) shown in degree view only */
.dv-badges {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 3px;
}

.dv-badge {
  font-family: var(--mono);
  font-size: 0.4rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 3px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--faint);
  line-height: 1.3;
  white-space: nowrap;
}

/* function_group badge tints */
.dv-fg-stable      { color: var(--teal);   border-color: rgba(0,240,204,0.2);   background: rgba(0,240,204,0.06);   }
.dv-fg-predominant { color: var(--blue);   border-color: rgba(96,165,250,0.2);  background: rgba(96,165,250,0.06);  }
.dv-fg-dominant    { color: var(--pink);   border-color: rgba(249,168,212,0.2); background: rgba(249,168,212,0.06); }
.dv-fg-color       { color: var(--purple); border-color: rgba(184,157,250,0.2); background: rgba(184,157,250,0.06); }

/* tier badge tints */
.dv-tier-core     { color: rgba(0,240,204,0.7);   border-color: rgba(0,240,204,0.15);   }
.dv-tier-color    { color: rgba(96,165,250,0.7);  border-color: rgba(96,165,250,0.15);  }
.dv-tier-advanced { color: rgba(249,168,212,0.7); border-color: rgba(249,168,212,0.15); }
.dv-tier-outside  { color: var(--faint); }

/* Separator dot between Chords/Romans and Function/Degree tabs */
.tab-sep {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.12);
  align-self: center;
  flex-shrink: 0;
  margin: 0 2px;
}

/* Responsive: 4 cols on medium, 2 on small */
@media (max-width: 1200px) {
  .universe-grid-layout.dv-active { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .universe-grid-layout.dv-active { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Settings MVP */
/* =====================================================
   SETTINGS PANEL — Full-page view
   ===================================================== */

/* Panel fills remaining vertical space inside main-wrapper flex column */
/* display: none by default — CSS/JS activate it only in settings-mode */
.settings-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: var(--bg);
  display: none;
  flex-direction: column;
}

/* Scrollable inner container, centered */
.settings-page {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: var(--fh-settings-page-padding);
  display: flex;
  flex-direction: column;
  gap: var(--fh-section-gap);
}

/* Page header */
.settings-header {
  margin-bottom: var(--fh-toolbar-gap);
  padding-bottom: var(--fh-section-gap);
  border-bottom: 1px solid var(--border);
}

.settings-header h1 {
  margin: 0 0 6px;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.settings-header p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.45;
}

/* Card */
.settings-card {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.028);
  border-radius: var(--fh-card-radius);
  padding: var(--fh-settings-card-padding);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--fh-settings-card-gap);
  transition: border-color 0.2s;
}

.settings-card:hover {
  border-color: rgba(255,255,255,0.13);
}

/* Left column: title + description */
.settings-card-main {
  flex: 1 1 auto;
  min-width: 0;
}

.settings-card-main h2 {
  margin: 0;
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0;
}

.settings-card-main p {
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.45;
}

/* Right column: controls */
.settings-card-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

/* Language buttons row */
.settings-language-options {
  display: flex;
  gap: var(--fh-toolbar-gap);
  flex-wrap: wrap;
}

/* MIDI controls row */
.settings-midi-controls {
  display: flex;
  align-items: flex-end;
  gap: var(--fh-section-gap);
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Density options row */
.settings-density-options {
  display: flex;
  align-items: center;
  gap: var(--fh-section-gap);
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Form field with label on top */
.settings-field {
  display: flex;
  flex-direction: column;
  gap: var(--fh-toolbar-gap);
  min-width: 200px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.68rem;
}

.settings-select {
  min-height: var(--fh-control-height);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--fh-card-radius);
  font-size: 0.75rem;
  padding: 0 10px;
}

/* MIDI status column */
.settings-midi-status {
  display: flex;
  flex-direction: column;
  gap: var(--fh-toolbar-gap);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.68rem;
}

/* Compact topbar MIDI status pill */
.midi-status-compact {
  max-width: 132px;
  cursor: default;
}

.midi-status-compact .status-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Density label */
.settings-density-label {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.68rem;
  align-self: center;
}

/* Pill-style buttons (Language / Refresh) */
.settings-language-btn {
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.18);
  color: var(--muted);
  border-radius: var(--fh-card-radius);
  min-height: var(--fh-control-height);
  padding: 0 14px;
  font-family: var(--mono);
  font-size: 0.72rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.settings-language-btn:hover,
.settings-language-btn:focus-visible {
  outline: none;
  border-color: rgba(0,240,204,0.28);
  background: rgba(255,255,255,0.055);
}

.settings-language-btn.is-active {
  color: var(--teal);
  border-color: rgba(0,240,204,0.36);
  background: rgba(0,240,204,0.09);
}

/* ---- body.settings-mode guardrails ---- */
/* Ensure workspace-grid & composer don't bleed through */
body.settings-mode .workspace-grid,
body.settings-mode .composer-panel,
body.settings-mode #bottomPanel,
body.settings-mode #resizerBottom {
  display: none !important;
}

/* Settings panel fills full height when active */
body.settings-mode .settings-panel {
  display: flex;
  flex: 1 1 auto;
}

/* Responsive */
@media (max-width: 760px) {
  .settings-page {
    padding: 24px 16px 48px;
  }

  .settings-card {
    flex-direction: column;
    gap: 16px;
  }

  .settings-card-controls {
    width: 100%;
    justify-content: flex-start;
  }

  .settings-midi-controls,
  .settings-density-options {
    justify-content: flex-start;
  }
}

/* Density final overrides: scoped to safe chrome/layout surfaces only. */
body[data-density="compact"] .settings-page {
  padding: var(--fh-settings-page-padding);
  gap: var(--fh-section-gap);
}

body[data-density="compact"] .settings-card {
  padding: var(--fh-settings-card-padding);
  gap: var(--fh-settings-card-gap);
}

body[data-density="compact"] .settings-header {
  margin-bottom: var(--fh-toolbar-gap);
  padding-bottom: var(--fh-section-gap);
}

body[data-density="compact"] .settings-language-btn,
body[data-density="compact"] .settings-select {
  min-height: var(--fh-control-height);
}

body[data-density="compact"] .header-controls-wrapper {
  padding-inline: var(--fh-panel-padding-wide);
  gap: var(--fh-section-gap);
}

body[data-density="compact"] .hc-group,
body[data-density="compact"] .audio-midi-group {
  gap: var(--fh-section-gap);
}

body[data-density="compact"] .ctrl-group {
  gap: var(--fh-toolbar-gap);
}

body[data-density="compact"] .sidebar {
  padding-bottom: var(--fh-panel-padding);
}

body[data-density="compact"] .sidebar .nav-item {
  padding: 8px var(--fh-panel-padding-wide);
}

body[data-density="compact"] .panel-header {
  padding: var(--fh-panel-padding) var(--fh-panel-padding-wide);
}

body[data-density="compact"] .universe-toolbar {
  padding: var(--fh-panel-padding) var(--fh-panel-padding) 0;
}

body[data-density="compact"] .universe-tabs {
  gap: var(--fh-section-gap);
  margin-top: var(--fh-toolbar-gap);
  padding-inline: var(--fh-panel-padding);
}

body[data-density="compact"] .universe-grid-layout {
  gap: var(--fh-section-gap) !important;
}

body[data-density="compact"] #chordUniverseGrid {
  padding: var(--fh-panel-padding) !important;
}

body[data-density="compact"] .u-cards {
  gap: var(--fh-toolbar-gap) !important;
}

body[data-density="compact"] .u-card {
  padding: 5px 5px !important;
  border-radius: var(--fh-card-radius);
}

body[data-density="compact"] .selected-content {
  padding: var(--fh-panel-padding-wide);
}

body[data-density="compact"] .selected-active {
  gap: var(--fh-section-gap) !important;
}

body[data-density="compact"] .suggestions-list {
  padding: var(--fh-panel-padding) var(--fh-panel-padding-wide) !important;
  min-height: 64px;
  max-height: 76px !important;
  gap: var(--fh-toolbar-gap) !important;
}

/* Phase B1 — Generate Mode frozen / hidden (2026-05-06)
   Code is preserved in app.js and backend. UI hidden until a future redesign
   that repositions Generate as a complement to Chord Universe flow.
   To restore: remove or comment out these two rules. */
.autogen-strip { display: none !important; }
#generateBtn   { display: none !important; }

/* Phase B2 — Suggestions as Collapsed Support (2026-05-06)
   Suggestions panel collapses by default. Toggle via #suggestionsToggle.
   Chord Universe occupies primary visual space. */
.suggestions-section {
  border-bottom: 1px solid var(--border);
}
.suggestions-toggle-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 5px 16px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 0.6rem;
  font-family: var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.suggestions-toggle-btn:hover {
  color: var(--text);
  background: rgba(255,255,255,0.03);
}
.suggestions-toggle-chevron {
  font-size: 0.55rem;
  display: inline-block;
  transition: transform 0.15s ease;
}
.suggestions-section:not(.collapsed) .suggestions-toggle-chevron {
  transform: rotate(90deg);
}
/* Collapsed state: hide list and adaptive/emotion indicators */
.suggestions-section.collapsed .suggestions-list,
.suggestions-section.collapsed #adaptiveLabel,
.suggestions-section.collapsed #emotionLabel {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   GESTURE JAM — Experimental Extra
   Phase 1: click pads only, no webcam, no MediaPipe, no Tone.js
   ═══════════════════════════════════════════════════════════════ */

.gj-panel {
  background: rgba(8, 10, 20, 0.85);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-family: var(--mono);
  flex-shrink: 0;
}

.gj-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  gap: 12px;
}
.gj-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gj-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.gj-title {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
}
.gj-badge-experimental {
  font-family: var(--mono);
  font-size: 0.52rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: rgba(249, 168, 212, 0.12);
  border: 1px solid rgba(249, 168, 212, 0.3);
  color: var(--pink, #f9a8d4);
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
}
.gj-desc {
  font-size: 0.62rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.gj-toggle-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.55rem;
  padding: 3px 8px;
  transition: color 150ms, border-color 150ms, background 150ms;
  flex-shrink: 0;
}
.gj-toggle-btn:hover {
  color: var(--text);
  border-color: rgba(0,240,204,0.35);
  background: rgba(0,240,204,0.05);
}

.gj-body {
  overflow: hidden;
  max-height: 520px;
  transition: max-height 280ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 220ms ease,
              padding 220ms ease;
  padding: 0 16px 12px;
  opacity: 1;
}
.gj-body.gj-collapsed {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}

.gj-instrument-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(230px, 1.35fr) minmax(150px, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 190px;
  padding: 8px 0 10px;
}
.gj-wheel-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.gj-wheel-label {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.gj-wheel {
  position: relative;
  width: 144px;
  height: 144px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(8,10,20,0.92) 0 34%, transparent 35%),
    conic-gradient(from -90deg, rgba(0,240,204,0.18), rgba(184,157,250,0.2), rgba(96,165,250,0.16), rgba(0,240,204,0.18));
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 0 28px rgba(0,0,0,0.45), 0 12px 36px rgba(0,0,0,0.26);
}
.gj-wheel::after {
  content: "";
  position: absolute;
  inset: 43px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(5,8,16,0.72);
}
.gj-wheel-segment {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 40px;
  height: 25px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(12,15,28,0.88);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 800;
  cursor: pointer;
  transform:
    rotate(var(--gj-angle))
    translate(var(--gj-radius))
    rotate(calc(-1 * var(--gj-angle)))
    translate(-50%, -50%);
  transition: color 130ms, border-color 130ms, background 130ms, box-shadow 130ms;
}
.gj-wheel-segment:hover {
  color: var(--text);
  border-color: rgba(255,255,255,0.28);
}
.gj-wheel-segment.is-active {
  color: #071016;
  background: var(--teal);
  border-color: rgba(0,240,204,0.85);
  box-shadow: 0 0 18px rgba(0,240,204,0.34);
}
.gj-wheel-segment.is-hand-hover {
  color: var(--text);
  border-color: rgba(184,157,250,0.82);
  box-shadow: 0 0 0 2px rgba(184,157,250,0.32), 0 0 18px rgba(184,157,250,0.28);
}
.gj-wheel-segment--quality {
  width: 48px;
}
.gj-hand-cursor {
  position: absolute;
  z-index: 6;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(184,157,250,0.95);
  background: rgba(184,157,250,0.14);
  box-shadow: 0 0 18px rgba(184,157,250,0.42), inset 0 0 10px rgba(255,255,255,0.12);
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.gj-hand-cursor::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: inherit;
  background: var(--teal);
  opacity: 0.9;
}
.gj-hand-cursor[hidden] {
  display: none !important;
}
.gj-wheel-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--faint);
  font-size: 0.62rem;
  z-index: 2;
}
.gj-center-orb {
  min-height: 180px;
  border-radius: 999px;
  border: 1px solid rgba(0,240,204,0.16);
  background:
    radial-gradient(circle at 50% 22%, rgba(0,240,204,0.18), transparent 32%),
    radial-gradient(circle at 50% 78%, rgba(184,157,250,0.16), transparent 34%),
    rgba(8, 10, 20, 0.84);
  box-shadow: inset 0 0 38px rgba(0,0,0,0.38), 0 12px 38px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 18px;
  text-align: center;
}
.gj-orb-eyebrow {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.gj-center-orb strong {
  color: var(--teal);
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1.1;
}
.gj-center-orb > span:last-of-type {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.63rem;
  min-height: 16px;
}
.gj-status-strip {
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 600;
}
.gj-status-strip--ready {
  color: var(--teal);
  border-color: rgba(0,240,204,0.22);
  background: rgba(0,240,204,0.06);
}
.gj-status-strip--missing {
  color: #fca5a5;
  border-color: rgba(248,113,113,0.24);
  background: rgba(248,113,113,0.05);
}
.gj-status-strip--added {
  color: #4ade80;
  border-color: rgba(74,222,128,0.25);
  background: rgba(74,222,128,0.06);
}
.gj-status-strip--hand {
  color: #c4b5fd;
  border-color: rgba(184,157,250,0.28);
  background: rgba(184,157,250,0.07);
}
.gj-pad-fallback {
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 8px;
}

.gj-pads {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.gj-empty {
  font-size: 0.68rem;
  color: var(--faint);
  padding: 8px 0;
  text-align: center;
}

.gj-pad {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--gj-border, rgba(255,255,255,0.15));
  background: var(--gj-bg, rgba(255,255,255,0.04));
  color: var(--text);
  cursor: pointer;
  gap: 2px;
  transition: border-color 140ms, background 140ms, transform 80ms, box-shadow 140ms;
  user-select: none;
}
.gj-pad:hover:not(:disabled) {
  border-color: var(--gj-accent, var(--teal));
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.gj-pad:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
}
.gj-pad--active {
  border-color: var(--gj-accent, var(--teal)) !important;
  box-shadow: 0 0 0 2px var(--gj-accent, var(--teal)), 0 4px 18px rgba(0,0,0,0.4) !important;
}
.gj-pad--disabled,
.gj-pad:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.gj-pad-symbol {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.01em;
}
.gj-pad-roman {
  font-family: var(--mono);
  font-size: 0.52rem;
  color: var(--gj-accent, var(--muted));
  opacity: 0.8;
  line-height: 1;
}

.gj-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.gj-selected-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.gj-selected-label-prefix {
  font-size: 0.58rem;
  color: var(--faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gj-selected-label {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  transition: color 160ms;
}
.gj-selected-label.gj-label--active {
  color: var(--teal);
}
.gj-btn-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.gj-btn {
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.63rem;
  font-weight: 600;
  padding: 0 10px;
  cursor: pointer;
  transition: border-color 130ms, background 130ms, color 130ms;
  white-space: nowrap;
}
.gj-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}
.gj-btn--preview {
  border-color: rgba(74, 222, 128, 0.3);
  color: #4ade80;
  background: rgba(74, 222, 128, 0.05);
}
.gj-btn--preview:hover:not(:disabled) {
  background: rgba(74, 222, 128, 0.12);
  border-color: rgba(74, 222, 128, 0.55);
}
.gj-btn--send {
  border-color: rgba(0, 240, 204, 0.35);
  color: var(--teal);
  background: rgba(0, 240, 204, 0.06);
}
.gj-btn--send:hover:not(:disabled) {
  background: rgba(0, 240, 204, 0.14);
  border-color: rgba(0, 240, 204, 0.6);
}
.gj-btn--clear {
  border-color: rgba(248, 113, 113, 0.25);
  color: #f87171;
  background: rgba(248, 113, 113, 0.04);
}
.gj-btn--clear:hover:not(:disabled) {
  background: rgba(248, 113, 113, 0.1);
  border-color: rgba(248, 113, 113, 0.5);
}

.gj-camera-control {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gj-center-orb .gj-camera-control {
  width: min(100%, 330px);
  margin-top: 6px;
  padding-top: 7px;
}
.gj-center-orb .gj-camera-topline,
.gj-center-orb .gj-camera-preview-row {
  justify-content: center;
}
.gj-camera-topline,
.gj-camera-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.gj-camera-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.gj-btn--camera {
  border-color: rgba(96, 165, 250, 0.34);
  color: #93c5fd;
  background: rgba(96, 165, 250, 0.06);
}
.gj-btn--camera:hover:not(:disabled) {
  background: rgba(96, 165, 250, 0.13);
  border-color: rgba(96, 165, 250, 0.58);
}
.gj-btn--camera-off {
  border-color: rgba(248, 113, 113, 0.24);
  color: #fca5a5;
  background: rgba(248, 113, 113, 0.04);
}
.gj-btn--camera-off:hover:not(:disabled) {
  background: rgba(248, 113, 113, 0.1);
  border-color: rgba(248, 113, 113, 0.48);
}
.gj-camera-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 6px;
  background: rgba(255,255,255,0.035);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
}
.gj-camera-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--faint);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05);
  flex: 0 0 auto;
}
.gj-camera-dot--active,
.gj-camera-dot--face {
  background: #60a5fa;
}
.gj-camera-dot--ready,
.gj-camera-dot--added {
  background: var(--teal);
  box-shadow: 0 0 12px rgba(0,240,204,0.35);
}
.gj-camera-dot--open {
  background: #4ade80;
  box-shadow: 0 0 12px rgba(74,222,128,0.32);
}
.gj-camera-dot--denied {
  background: #f87171;
}
.gj-camera-dot--off {
  background: var(--faint);
}
.gj-camera-video {
  width: 144px;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.32);
  transform: scaleX(-1);
}
.gj-camera-video[hidden] {
  display: none !important;
}
.gj-camera-privacy {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.58rem;
  line-height: 1.35;
  margin-left: auto;
}

@media (max-width: 760px) {
  .gj-body {
    max-height: 760px;
  }
  .gj-instrument-stage {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .gj-center-orb {
    order: -1;
    min-height: 170px;
    border-radius: 14px;
  }
  .gj-camera-status,
  .gj-camera-privacy {
    width: 100%;
  }
  .gj-camera-video {
    width: 132px;
    height: 88px;
  }
}

/* Gesture Jam Stage View: occupies the central workspace instead of the old compact panel. */
.workspace-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  margin-right: auto;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(4, 7, 15, 0.52);
}
.workspace-view-btn {
  min-height: 26px;
  border: 0;
  border-radius: 6px;
  padding: 0 10px;
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.workspace-view-btn:hover,
.workspace-view-btn.is-active {
  color: var(--text);
  background: rgba(0,240,204,0.11);
}
.workspace-view-btn.is-active {
  color: var(--teal);
  box-shadow: inset 0 0 0 1px rgba(0,240,204,0.24);
}
.chord-universe-panel.gj-stage-active {
  background:
    radial-gradient(circle at 18% 46%, rgba(0,240,204,0.08), transparent 34%),
    radial-gradient(circle at 82% 52%, rgba(184,157,250,0.1), transparent 32%),
    rgba(5, 8, 16, 0.96);
}
.chord-universe-panel.gj-stage-active .universe-tabs,
.chord-universe-panel.gj-stage-active .universe-relationship-strip,
.chord-universe-panel.gj-stage-active #suggestionsSection,
.chord-universe-panel.gj-stage-active #chordUniverseGrid,
.chord-universe-panel.gj-stage-active #harmonyCompassExplore {
  display: none !important;
}
.gj-panel[hidden],
.gj-legacy-panel[hidden] {
  display: none !important;
}
.gj-stage-view {
  flex: 1 1 auto;
  min-height: 0;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 16px;
}
.gj-stage-view .gj-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 0;
  overflow: visible;
  opacity: 1;
}
.gj-stage-view .gj-instrument-stage {
  position: relative;
  display: block;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 34%, rgba(0,240,204,0.14), transparent 30%),
    linear-gradient(135deg, rgba(7, 12, 24, 0.98), rgba(15, 11, 28, 0.98));
  box-shadow: inset 0 0 80px rgba(0,0,0,0.48), 0 24px 48px rgba(0,0,0,0.22);
}
.gj-stage-view .gj-camera-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  background: #050815;
  transform: scaleX(-1);
}
.gj-stage-view .gj-camera-video:not([hidden]) ~ .gj-stage-placeholder {
  opacity: 0;
}
.gj-stage-placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.gj-stage-placeholder-title {
  color: rgba(0,240,204,0.48);
  font-family: var(--mono);
  font-size: clamp(2rem, 8vw, 6.4rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.gj-stage-placeholder-copy {
  max-width: 420px;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.45;
}
.gj-stage-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(3,6,14,0.78), transparent 28%, transparent 72%, rgba(3,6,14,0.78)),
    linear-gradient(180deg, rgba(3,6,14,0.54), transparent 36%, rgba(3,6,14,0.72));
  pointer-events: none;
}
.gj-stage-view .gj-wheel-wrap {
  position: absolute;
  z-index: 3;
  top: 43%;
  transform: translateY(-50%);
  gap: 10px;
}
.gj-stage-view .gj-wheel-wrap--root {
  left: clamp(22px, 4vw, 52px);
}
.gj-stage-view .gj-wheel-wrap--quality {
  right: clamp(22px, 4vw, 52px);
}
.gj-stage-view .gj-wheel-label {
  color: rgba(255,255,255,0.68);
  text-shadow: 0 2px 12px rgba(0,0,0,0.9);
}
.gj-stage-view .gj-wheel {
  width: clamp(238px, 25vw, 318px);
  height: clamp(238px, 25vw, 318px);
  background:
    radial-gradient(circle at center, rgba(6,9,18,0.95) 0 31%, transparent 32%),
    conic-gradient(from -90deg, rgba(0,240,204,0.24), rgba(184,157,250,0.28), rgba(96,165,250,0.22), rgba(0,240,204,0.24));
  border-color: rgba(255,255,255,0.18);
  box-shadow: inset 0 0 42px rgba(0,0,0,0.55), 0 18px 42px rgba(0,0,0,0.4);
}
.gj-stage-view .gj-wheel::after {
  inset: 36%;
  background: rgba(5,8,16,0.82);
}
.gj-stage-view .gj-wheel-segment {
  width: 54px;
  height: 34px;
  border-radius: 10px;
  background: rgba(8, 12, 24, 0.88);
  color: rgba(230,235,245,0.82);
  font-size: 0.73rem;
  backdrop-filter: blur(8px);
}
.gj-stage-view .gj-wheel-segment--quality {
  width: 62px;
}
.gj-stage-view .gj-center-orb {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: clamp(42px, 13vh, 118px);
  width: min(310px, 30vw);
  min-height: 150px;
  transform: translateX(-50%);
  padding: 20px 22px;
  background: rgba(5, 8, 16, 0.72);
  border-color: rgba(0,240,204,0.24);
  backdrop-filter: blur(14px);
}
.gj-stage-view .gj-center-orb strong {
  font-size: clamp(1.1rem, 2.1vw, 1.55rem);
}
.gj-stage-view .gj-hand-cursor {
  z-index: 7;
}
.gj-stage-view .gj-status-strip {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 96px;
  width: min(520px, calc(100% - 420px));
  margin: 0;
  transform: translateX(-50%);
  background: rgba(5,8,16,0.62);
  backdrop-filter: blur(12px);
}
.gj-stage-bottom {
  position: absolute;
  z-index: 4;
  left: 16px;
  right: 16px;
  bottom: 14px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  background: rgba(4, 7, 15, 0.74);
  backdrop-filter: blur(16px);
}
.gj-stage-view .gj-camera-control,
.gj-stage-view .gj-controls {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.gj-stage-view .gj-camera-control {
  flex: 1 1 auto;
  min-width: 260px;
}
.gj-stage-view .gj-controls {
  flex: 1 1 auto;
  justify-content: flex-end;
}
.gj-stage-view .gj-camera-topline {
  justify-content: flex-start;
}
.gj-stage-view .gj-camera-privacy {
  margin: 0;
  max-width: 360px;
}
.gj-stage-view .gj-pad-fallback {
  display: none;
}

@media (max-width: 980px) {
  .workspace-view-toggle {
    order: 3;
    width: 100%;
    margin: 2px 0 0;
  }
  .workspace-view-btn {
    flex: 1;
  }
  .gj-stage-view {
    padding: 10px;
  }
  .gj-stage-view .gj-instrument-stage {
    min-height: 640px;
  }
  .gj-stage-view .gj-wheel-wrap {
    top: auto;
    transform: none;
  }
  .gj-stage-view .gj-wheel-wrap--root {
    left: 16px;
    bottom: 180px;
  }
  .gj-stage-view .gj-wheel-wrap--quality {
    right: 16px;
    bottom: 180px;
  }
  .gj-stage-view .gj-wheel {
    width: 218px;
    height: 218px;
  }
  .gj-stage-view .gj-center-orb {
    width: min(300px, calc(100% - 32px));
    top: 28px;
  }
  .gj-stage-view .gj-status-strip {
    width: calc(100% - 32px);
    bottom: 128px;
  }
  .gj-stage-bottom {
    flex-direction: column;
  }
  .gj-stage-view .gj-controls {
    justify-content: space-between;
  }
}

/* ── Gesture Jam Phase 5 additions ─────────────────────────── */

/* Two-hand cursors */
.gj-hand-cursor-root {
  border-color: rgba(0,240,204,0.95);
  background: rgba(0,240,204,0.14);
  box-shadow: 0 0 18px rgba(0,240,204,0.42), inset 0 0 10px rgba(255,255,255,0.10);
}
.gj-hand-cursor-root::after {
  background: rgba(0,240,204,0.85);
}
.gj-hand-cursor-quality {
  border-color: rgba(184,157,250,0.95);
  background: rgba(184,157,250,0.14);
  box-shadow: 0 0 18px rgba(184,157,250,0.42), inset 0 0 10px rgba(255,255,255,0.10);
}
.gj-hand-cursor-quality::after {
  background: rgba(184,157,250,0.85);
}
.gj-cursor-label {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.44rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
.gj-hand-cursor-root .gj-cursor-label {
  color: var(--teal);
}
.gj-hand-cursor-quality .gj-cursor-label {
  color: #c4b5fd;
}

/* Hand label tags on wheel labels */
.gj-hand-label-tag {
  display: inline-block;
  font-size: 0.46rem;
  letter-spacing: 0.07em;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid transparent;
  vertical-align: middle;
  margin-left: 4px;
}
.gj-hand-label-tag--root {
  color: var(--teal);
  border-color: rgba(0,240,204,0.28);
  background: rgba(0,240,204,0.09);
}
.gj-hand-label-tag--quality {
  color: #c4b5fd;
  border-color: rgba(184,157,250,0.28);
  background: rgba(184,157,250,0.09);
}

/* Advanced quality strip */
.gj-advanced-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  max-width: 100%;
}
.gj-advanced-toggle-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: var(--faint);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.53rem;
  font-weight: 600;
  padding: 3px 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color 130ms, border-color 130ms, background 130ms;
  white-space: nowrap;
}
.gj-advanced-toggle-btn:hover {
  color: var(--muted);
  border-color: rgba(184,157,250,0.35);
  background: rgba(184,157,250,0.05);
}
.gj-advanced-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 280px;
  justify-content: center;
  padding: 4px 0;
}
.gj-advanced-quality-btn {
  background: rgba(184,157,250,0.07);
  border: 1px solid rgba(184,157,250,0.2);
  border-radius: 6px;
  color: #c4b5fd;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.57rem;
  font-weight: 600;
  padding: 2px 8px;
  transition: color 120ms, border-color 120ms, background 120ms, box-shadow 120ms;
  white-space: nowrap;
}
.gj-advanced-quality-btn:hover,
.gj-advanced-quality-btn.is-hand-hover {
  background: rgba(184,157,250,0.15);
  border-color: rgba(184,157,250,0.48);
  color: #e9d5ff;
}
.gj-advanced-quality-btn.is-active {
  background: rgba(184,157,250,0.22);
  border-color: rgba(184,157,250,0.7);
  color: #ede9fe;
  box-shadow: 0 0 10px rgba(184,157,250,0.24);
}

/* Center orb — improved status lines */
.gj-orb-meta {
  color: #c4b5fd;
  font-family: var(--mono);
  font-size: 0.68rem;
  min-height: 16px;
  text-align: center;
}
.gj-orb-status {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.57rem;
  min-height: 14px;
  text-align: center;
  margin-top: 2px;
  transition: color 160ms;
}
.gj-orb-status--ready {
  color: var(--teal);
}
.gj-orb-status--missing {
  color: #fca5a5;
}
.gj-orb-status--added {
  color: #4ade80;
}
.gj-orb-status--open {
  color: #86efac;
}

/* Fallback pads — collapsible */
.gj-pad-fallback-section {
  border-top: 1px solid rgba(255,255,255,0.05);
}
.gj-toggle-pads-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: none;
  color: var(--faint);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  transition: color 130ms, background 130ms;
}
.gj-toggle-pads-btn:hover {
  color: var(--muted);
  background: rgba(255,255,255,0.02);
}
.gj-pad-fallback {
  max-height: 0;
  overflow: hidden;
  transition: max-height 250ms ease, padding 250ms ease;
  padding: 0;
  border-top: none;
}
.gj-pad-fallback.is-open {
  max-height: 180px;
  overflow-y: auto;
  padding: 8px 0;
}
/* In stage view the section sits below the stage; keep it small */
.gj-stage-view .gj-pad-fallback-section {
  background: rgba(4,7,15,0.76);
  backdrop-filter: blur(10px);
  border-radius: 0 0 10px 10px;
}
.gj-stage-view .gj-pad-fallback {
  display: block !important; /* override old display:none rule */
}
.gj-stage-view .gj-pad-fallback .gj-pads {
  flex-wrap: wrap;
  gap: 5px;
  padding: 0 8px 4px;
}

/* Camera-off/on status dot modifiers */
.gj-camera-dot--idle {
  background: var(--muted);
}

/* ═══════════════════════════════════════════════════════════════
   GESTURE JAM — SOUNDGO ALIGNMENT (Phase 6 / Structure)
   ═══════════════════════════════════════════════════════════════ */

/* Fix status-strip bottom to sit above new instrument-bar */
.gj-stage-view .gj-status-strip {
  bottom: 58px !important;
}

/* Hide universe search bar + tabs when GJ stage is active */
.chord-universe-panel.gj-stage-active .panel-search-row,
.chord-universe-panel.gj-stage-active .universe-tabs {
  display: none !important;
}

/* ── HUD (top-left compact metrics) ── */
.gj-hud {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: rgba(4, 7, 15, 0.68);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  backdrop-filter: blur(12px);
  min-width: 110px;
}
.gj-hud-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.gj-hud-label {
  font-family: var(--mono);
  font-size: 0.54rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
  min-width: 46px;
}
.gj-hud-val {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}

/* ── Center Display (replaces heavy center-orb card) ── */
.gj-center-display {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  text-align: center;
  /* no background — text floats over video */
}
.gj-center-display strong {
  font-family: var(--mono);
  font-size: clamp(1.6rem, 4.5vw, 3rem);
  font-weight: 800;
  color: #f0f0f8;
  text-shadow: 0 2px 18px rgba(0,0,0,0.85), 0 0 40px rgba(0,240,204,0.18);
  letter-spacing: -0.02em;
  line-height: 1;
}
.gj-center-display .gj-orb-meta {
  font-size: 0.72rem;
  text-shadow: 0 1px 8px rgba(0,0,0,0.8);
}
.gj-center-display .gj-orb-status {
  font-size: 0.6rem;
  text-shadow: 0 1px 8px rgba(0,0,0,0.8);
}

/* ── Instrument Bar (replaces gj-stage-bottom) ── */
.gj-instrument-bar {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 14px;
  height: 52px;
  background: rgba(4, 7, 15, 0.82);
  border-top: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(18px);
}
.gj-ibar-left,
.gj-ibar-center,
.gj-ibar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.gj-ibar-left  { flex: 0 0 auto; }
.gj-ibar-center { flex: 1 1 auto; justify-content: center; overflow: hidden; }
.gj-ibar-right { flex: 0 0 auto; }

.gj-ibar-cam-status {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--faint);
  white-space: nowrap;
}

/* ── Instrument-Bar Buttons ── */
.gj-ibar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms, border-color 120ms, color 120ms, box-shadow 120ms;
}
.gj-ibar-btn:disabled {
  opacity: 0.38;
  cursor: default;
}
.gj-ibar-btn--camera {
  border-color: rgba(0,240,204,0.3);
  color: var(--teal);
}
.gj-ibar-btn--camera:hover:not(:disabled) {
  background: rgba(0,240,204,0.1);
  border-color: rgba(0,240,204,0.55);
}
.gj-ibar-btn--camera-off {
  border-color: rgba(255,255,255,0.1);
  color: var(--muted);
}
.gj-ibar-btn--camera-off:hover:not(:disabled) {
  background: rgba(255,100,100,0.08);
  border-color: rgba(255,120,120,0.35);
  color: #fca5a5;
}
.gj-ibar-btn--preview {
  border-color: rgba(0,240,204,0.22);
  color: var(--teal);
}
.gj-ibar-btn--preview:hover:not(:disabled) {
  background: rgba(0,240,204,0.08);
  border-color: rgba(0,240,204,0.5);
  box-shadow: 0 0 8px rgba(0,240,204,0.15);
}
.gj-ibar-btn--send {
  border-color: rgba(0,240,204,0.45);
  background: rgba(0,240,204,0.1);
  color: var(--teal);
  font-size: 0.65rem;
}
.gj-ibar-btn--send:hover:not(:disabled) {
  background: rgba(0,240,204,0.18);
  border-color: rgba(0,240,204,0.7);
  box-shadow: 0 0 12px rgba(0,240,204,0.22);
}
.gj-ibar-btn--clear {
  border-color: rgba(255,255,255,0.08);
  color: var(--faint);
}
.gj-ibar-btn--clear:hover:not(:disabled) {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.18);
  color: var(--muted);
}

/* Selected-chord label inside instrument bar center */
.gj-selected-label {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.gj-selected-label.has-chord {
  color: var(--teal);
}

/* Privacy note in ibar */
.gj-instrument-bar .gj-camera-privacy {
  font-size: 0.52rem;
  color: var(--faint);
  margin: 0;
  white-space: nowrap;
  display: none; /* hide on small bars; show on wide */
}
@media (min-width: 860px) {
  .gj-instrument-bar .gj-camera-privacy {
    display: inline;
  }
}

/* Separator inside ibar */
.gj-ibar-sep {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.07);
  flex-shrink: 0;
}

/* Responsive: tighter wheels on small heights */
@media (max-height: 620px) {
  .gj-instrument-bar { height: 44px; padding: 0 10px; }
  .gj-ibar-btn { height: 26px; font-size: 0.58rem; padding: 0 9px; }
  .gj-stage-view .gj-status-strip { bottom: 50px !important; }
}

/* Clean Explore Mode UI */
body.explore-mode #chordUniversePanel .panel-header,
body.explore-mode #chordUniversePanel #suggestionsSection {
  display: none !important;
}

/* Sound Go Mode - isolated standalone instrument */
body.soundgo-active #chordUniversePanel .panel-header,
body.soundgo-active #chordUniversePanel .universe-tabs,
body.soundgo-active #chordUniversePanel .universe-relationship-strip,
body.soundgo-active #chordUniversePanel #suggestionsSection,
body.soundgo-active #chordUniverseGrid,
body.soundgo-active #harmonyCompassExplore,
body.soundgo-active #gestureJamPanel,
body.soundgo-active #centerPanel,
body.soundgo-active #rightPanelTab,
body.soundgo-active #settingsPanel,
body.soundgo-mode #chordUniversePanel .panel-header,
body.soundgo-mode #chordUniversePanel #suggestionsSection {
  display: none !important;
}

body.soundgo-active #soundGoPanel {
  display: flex !important;
}

body.soundgo-mode #gestureJamPanel,
body.soundgo-mode .gj-pad-fallback-section {
  display: none !important;
}

body.soundgo-active #composerPanel,
body.soundgo-active #resizerBottom,
body.soundgo-active #bottomPanel,
body.soundgo-mode #composerPanel,
body.soundgo-mode #resizerBottom,
body.soundgo-mode #bottomPanel {
  display: none !important;
}

.soundgo-standalone-panel {
  position: relative;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  height: 100%;
  background: #050507;
  overflow: hidden;
}

.soundgo-standalone-panel[hidden] {
  display: none !important;
}

.soundgo-standalone-note {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  max-width: min(420px, calc(100% - 24px));
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(5,5,7,0.72);
  color: rgba(255,255,255,0.72);
  font-family: var(--mono);
  font-size: 0.64rem;
  line-height: 1.35;
  pointer-events: none;
}

.soundgo-standalone-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: #050507;
}

body.soundgo-active #chordUniversePanel,
body.soundgo-mode #chordUniversePanel {
  border-right: 0;
  background: #050507;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

body.soundgo-active .workspace-grid,
body.soundgo-mode .workspace-grid {
  min-height: 0;
}


/* ============================================================
   CONTEXT PANEL � App Shell Restructure
   Converts the fixed horizontal header into a vertical
   context panel visible only in Compose/Learn sections.
   ============================================================ */

/* --- When body has .has-context-panel: convert header to sidebar panel --- */
body.has-context-panel .app-header {
  position: fixed;
  top: 0;
  left: var(--active-sidebar-width);
  width: var(--context-panel-width);
  height: 100vh;
  flex-direction: column;
  align-items: stretch;
  overflow-y: auto;
  overflow-x: hidden;
  border-bottom: none;
  border-right: 1px solid var(--border);
  padding: 16px 14px;
  gap: 18px;
  z-index: 999;
}

body.has-context-panel .header-logo-block {
  width: 100%;
  height: auto;
  padding: 0 0 12px 0;
  border-right: none;
  border-bottom: 1px solid var(--border);
}

body.has-context-panel .header-controls-wrapper {
  flex-direction: column;
  align-items: stretch;
  height: auto;
  padding: 0;
  gap: 16px;
  overflow-x: visible;
  overflow-y: visible;
}

body.has-context-panel .hc-group {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

body.has-context-panel .hc-divider-vert {
  width: 100%;
  height: 1px;
  margin: 4px 0;
}

body.has-context-panel .ctrl-group {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

body.has-context-panel .ctrl-group .header-select,
body.has-context-panel .ctrl-group .control-select-wrap,
body.has-context-panel .ctrl-group select {
  width: 100%;
  max-width: none;
}

body.has-context-panel .bpm-control {
  width: 100%;
  justify-content: center;
}

body.has-context-panel .autogen-strip {
  flex-wrap: wrap;
  gap: 6px;
}

body.has-context-panel .autogen-strip .autogen-select {
  flex: 1;
  min-width: 70px;
}

body.has-context-panel .btn-generate {
  width: 100%;
}

body.has-context-panel .btn-reset {
  width: 100%;
}

body.has-context-panel .audio-midi-group {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

body.has-context-panel .audio-midi-group select {
  width: 100%;
  max-width: none;
}

body.has-context-panel .actions-group {
  flex-direction: column;
  align-items: stretch;
}

/* Adjust app-layout when context panel is open */
body.has-context-panel .app-layout {
  margin-top: 0;
  height: 100vh;
}

body.has-context-panel .main-wrapper {
  margin-left: var(--context-panel-width);
}

/* --- When body does NOT have .has-context-panel: hide header entirely --- */
body:not(.has-context-panel) .app-header {
  display: none !important;
}

body:not(.has-context-panel) .app-layout {
  margin-top: 0;
  height: 100vh;
}

/* --- Learn mode: hide irrelevant controls --- */
body.section-learn .actions-group,
body.section-learn .emotion-block,
body.section-learn .autogen-strip,
body.section-learn .btn-generate,
body.section-learn .chord-universe-panel .compose-universe-workspace,
body.section-learn .chord-universe-panel .universe-tabs,
body.section-learn .chord-universe-panel .universe-relationship-strip {
  display: none !important;
}

body.section-learn .chord-universe-panel .learn-workspace {
  display: block;
}

/* --- Responsive: collapse context panel on small screens --- */
@media (max-width: 1200px) {
  body.has-context-panel .app-header {
    width: 200px;
  }
  body.has-context-panel .main-wrapper {
    margin-left: 200px;
  }
}

@media (max-width: 900px) {
  body.has-context-panel .app-header {
    width: 180px;
    padding: 12px 10px;
  }
  body.has-context-panel .main-wrapper {
    margin-left: 180px;
  }
}

/* --- Dynamic Headers for Context Panel --- */
body.has-context-panel .context-panel-header {
  display: block;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 4px;
}

body:not(.has-context-panel) .context-panel-header {
  display: none !important;
}

.cp-header-compose, .cp-header-learn {
  display: none;
}

body.section-compose .cp-header-compose {
  display: block;
}

body.section-learn .cp-header-learn {
  display: block;
}

.cp-title {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text);
  margin: 0 0 4px 0;
}

.cp-subtitle {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.3;
}

.context-panel-section-title {
  font-size: 0.65rem;
  font-family: var(--mono);
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
  margin-top: 8px;
  display: none; /* Hidden horizontally */
}

body.has-context-panel .context-panel-section-title {
  display: block;
}

/* --- Learn Mode Overrides --- */
body.section-learn .cp-group-compose-only,
body.section-learn .cp-section-compose,
body.section-learn .cp-ctrl-compose-only {
  display: none !important;
}

/* Remove horizontal dividers when in context panel mode */
body.has-context-panel .hc-divider-vert {
  display: none !important;
}





.sidebar-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  gap: 8px;
}

.sidebar-brand-text {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

body.sidebar-collapsed .sidebar-brand-text {
  display: none;
}

body.sidebar-collapsed .sidebar-header {
  justify-content: center !important;
}

body.sidebar-collapsed {
  --active-sidebar-width: var(--sidebar-collapsed-width);
}

/* Learn Phase 2A - Harmony Compass metadata upgrade */
.learn-function-badge {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--blue);
  border: 1px solid rgba(147,197,253,0.24);
  background: rgba(147,197,253,0.08);
  border-radius: 999px;
  padding: 5px 8px;
}

.learn-feeling-line {
  margin-top: 10px;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
}

.learn-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.learn-meter {
  min-width: 0;
}

.learn-meter-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.62rem;
}

.learn-meter-top strong {
  color: var(--text);
  font-weight: 800;
}

.learn-meter-track {
  height: 6px;
  margin-top: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
}

.learn-meter-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(0,240,204,0.78), rgba(147,197,253,0.82));
}

.learn-meter-tension .learn-meter-fill {
  background: linear-gradient(90deg, rgba(249,168,212,0.72), rgba(252,165,165,0.84));
}

.learn-meter-color .learn-meter-fill {
  background: linear-gradient(90deg, rgba(184,157,250,0.72), rgba(249,168,212,0.78));
}

.learn-meter-pull .learn-meter-fill {
  background: linear-gradient(90deg, rgba(252,211,77,0.78), rgba(253,186,116,0.84));
}

.learn-explanation-short {
  margin: 13px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.learn-why-card {
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(0,0,0,0.14);
  padding: 10px;
}

.learn-why-card span,
.learn-next-moves > span {
  display: block;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.learn-why-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.learn-next-moves {
  margin-top: 12px;
}

.learn-next-moves div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.learn-next-chip {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid rgba(0,240,204,0.16);
  background: rgba(0,240,204,0.055);
  color: var(--text);
  border-radius: 999px;
  padding: 4px 8px;
  font-family: var(--mono);
  font-size: 0.62rem;
}

.learn-suggestion-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.61rem;
}

.learn-suggestion-line span:first-child {
  color: var(--blue);
}

.learn-suggestion-line span + span::before {
  content: "·";
  color: var(--faint);
  margin-right: 6px;
}

.learn-suggestion-meta {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.learn-suggestion-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.learn-suggestion-meters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-top: 7px;
}

.learn-suggestion-meters span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 5px;
  background: rgba(255,255,255,0.045);
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.54rem;
  text-align: center;
  padding: 3px 2px;
}

@media (max-width: 760px) {
  .learn-meta-grid,
  .learn-suggestion-meters {
    grid-template-columns: 1fr 1fr;
  }
}

/* Learn Phase 2A.2 - Guided Intent Steps + Empty Outside State */
.learn-intent-intro {
  margin: 0 0 10px;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.67rem;
  line-height: 1.4;
}

.learn-intent-intro em {
  font-style: normal;
  color: var(--muted);
}

.learn-intent-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.learn-intent-step {
  min-width: 0;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.2);
  color: var(--muted);
  border-radius: 7px;
  padding: 8px 5px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--mono);
  font-size: 0.61rem;
  text-align: center;
  transition: border-color 0.14s, background 0.14s, opacity 0.14s;
}

.learn-intent-step:hover,
.learn-intent-step:focus-visible {
  outline: none;
  border-color: rgba(0,240,204,0.22);
  background: rgba(255,255,255,0.05);
}

.learn-intent-step-index {
  color: var(--faint);
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.learn-intent-step-label {
  color: inherit;
  font-weight: 700;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

.learn-intent-step-count {
  color: var(--faint);
  font-size: 0.58rem;
}

.learn-intent-step.is-active {
  color: var(--text);
  border-color: rgba(0,240,204,0.28);
  background: rgba(0,240,204,0.08);
}

.learn-intent-step.is-active .learn-intent-step-index {
  color: var(--teal);
}

.learn-intent-step.is-empty {
  opacity: 0.48;
}

.learn-intent-step.is-empty.is-active {
  opacity: 1;
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
}

.learn-intent-step.is-empty.is-active .learn-intent-step-index {
  color: var(--faint);
}

.learn-intent-context {
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(0,0,0,0.1);
  border-radius: 7px;
}

.learn-intent-context-title {
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.learn-intent-context-description {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.learn-empty-intent {
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 20px 16px;
  text-align: center;
}

.learn-empty-intent-title {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.learn-empty-intent-text {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: pre-line;
}

@media (max-width: 1280px) {
  .learn-intent-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .learn-intent-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}