/* ============================================================
   BASE E VARIÁVEIS
   ============================================================ */
/* Variáveis no escopo do editor: não vazam para o tema. */
.be-editor-container {

  --be-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --be-mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --be-fs-micro: 8px;
  --be-fs-label: 9px;
  --be-fs-body: 11px;
  --be-fs-title: 12px;
  --be-fs-value: 14px;
  --be-bg: #0b0d12;
  --be-panel-bg: linear-gradient(165deg, #1a1d24 0%, #101318 60%, #0c0e13 100%);
  --be-border: #363c48;
  --be-text: #c9cdd6;
  --be-text-bright: #ffffff;
  --be-accent: #7ec8ff;
  --be-warning: #eab308;
  --be-danger: #ef4444;
  --be-success: #22c55e;
  --be-gold: #f0c65e;
  --be-gold-soft: #f7dd94;
  --be-cyan: #4fd7e0;
  --be-glass-border: rgba(255,255,255,0.07);
  --be-radius-lg: 14px;
  --be-radius-md: 10px;
  --be-radius-sm: 6px;
  --be-shadow-soft: 0 1px 0 rgba(255,255,255,0.05) inset, 0 10px 24px rgba(0,0,0,0.35);
  --be-transition: 180ms cubic-bezier(.4,0,.2,1);
}

.be-editor-container {
  container: be-editor / inline-size;
  font-family: var(--be-font);
  background:
    radial-gradient(1100px 420px at 15% -10%, rgba(80,130,220,0.10), transparent 60%),
    radial-gradient(900px 380px at 100% 0%, rgba(240,198,94,0.06), transparent 55%),
    var(--be-bg);
  color: var(--be-text);
  padding: 20px;
  border-radius: 18px;
  border: 1px solid var(--be-glass-border);
  max-width: 1280px;
  margin: 0 auto;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.04) inset;
  box-sizing: border-box;
  position: relative;
  letter-spacing: 0.1px;
}
.be-editor-container * { box-sizing: border-box; }
.be-editor-container:focus { outline: none; }
.be-editor-container ::selection { background: rgba(126,200,255,0.35); }

.be-fatal {
  background: rgba(239,68,68,0.12);
  border: 1px solid #ef4444;
  color: #fecaca;
  border-radius: var(--be-radius-md);
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: var(--be-fs-title);
  line-height: 1.5;
}

.be-icon { width: 14px; height: 14px; fill: currentColor; display: inline-block; vertical-align: middle; flex-shrink: 0; }

.be-btn {
  background: linear-gradient(180deg, #2a2e37 0%, #1b1e24 100%);
  border: 1px solid var(--be-border);
  color: var(--be-text-bright);
  padding: 7px 14px;
  font-size: var(--be-fs-body);
  font-weight: 600;
  border-radius: var(--be-radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.2px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 1px 2px rgba(0,0,0,0.3);
  transition: transform var(--be-transition), box-shadow var(--be-transition), background var(--be-transition), border-color var(--be-transition);
}
.be-btn:hover { background: linear-gradient(180deg, #363b44 0%, #22262d 100%); border-color: #565e6c; transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 6px 14px rgba(0,0,0,0.35); }
.be-btn:active { transform: translateY(0); }
.be-btn-sm { padding: 5px 10px; font-size: var(--be-fs-body); }
.be-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; }

.be-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--be-glass-border);
  padding-bottom: 8px;
  padding-left: 10px;
  position: relative;
}
.be-section-header::before {
  content: "";
  position: absolute;
  left: 0; top: 1px; bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--be-accent), var(--be-cyan));
}
.be-drum-grid-wrapper > .be-section-header { flex-wrap: wrap; gap: 4px 14px; justify-content: flex-start; align-items: center; }
.be-section-header h3 { margin: 0; font-size: var(--be-fs-body); font-weight: 800; letter-spacing: 1.2px; color: var(--be-text-bright); }

/* ============================================================
   COMMAND BAR
   ============================================================ */
.be-command-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 7px 10px;
  margin-bottom: 14px;
  background: linear-gradient(180deg, #30343b 0%, #262a30 100%);
  border: 1px solid #14171b;
  border-radius: var(--be-radius-md);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 -1px 0 rgba(0,0,0,0.35), 0 8px 22px rgba(0,0,0,0.4);
  font-family: var(--be-font);
}
.be-cb-zone { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.be-cb-left { flex: 0 1 auto; justify-content: flex-start; }
.be-cb-center { flex: 1 1 auto; justify-content: center; }
.be-cb-right { flex: 0 1 auto; justify-content: flex-end; margin-left: auto; }

.be-cb-group {
  display: inline-flex;
  align-items: stretch;
  gap: 2px;
  padding: 2px;
  background: #1a1d22;
  border: 1px solid #111214;
  border-radius: 7px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.06);
  flex-shrink: 0;
  border-color: #101216;
}
.be-cb-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  min-width: 28px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 5px;
  background: linear-gradient(180deg, #4a4e56 0%, #3a3d44 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  color: #dcdde0;
  font-family: inherit;
  font-size: var(--be-fs-body);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--be-transition), color var(--be-transition), box-shadow var(--be-transition);
}
.be-cb-btn .be-icon { width: 15px; height: 15px; }
.be-cb-btn.be-cb-icon { padding: 0; width: 32px; }
.be-cb-btn:hover { background: linear-gradient(180deg, #5c5e66 0%, #46484f 100%); color: #fff; }
.be-cb-btn:active { background: #2a2b30; box-shadow: inset 0 1px 3px rgba(0,0,0,0.6); }
.be-cb-btn:focus:not(:focus-visible) { outline: none; }
.be-cb-btn:focus-visible { outline: 2px solid var(--be-accent); outline-offset: 1px; }
.be-cb-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.be-cb-btn.be-on,
.be-cb-btn.be-tool-active { background: #232428; box-shadow: inset 0 1px 3px rgba(0,0,0,0.65); }
.be-cb-btn.be-on { color: var(--be-accent); }
.be-cb-btn.be-play.be-on { color: #fff; background: linear-gradient(180deg, #2fb45a 0%, #1f8a43 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 0 10px rgba(52,199,89,0.45); }
.be-cb-btn.be-cycle.be-on { color: #ffd54a; background: linear-gradient(180deg, #5b4a14 0%, #43370f 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); }
.be-cb-btn.be-tool-active { color: var(--be-gold); }
.be-cb-btn.be-pause.be-on { color: #ff9f0a; }
.be-cb-btn.be-metro.be-on { color: #c4b5fd; background: linear-gradient(180deg, #43356f 0%, #33285a 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); }

.be-cb-btn.be-audio-btn { position: relative; }
.be-audio-led {
  position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%;
  background: #565e6c; box-shadow: 0 0 0 1px rgba(0,0,0,0.6);
}
.be-audio-btn[data-state="running"] .be-audio-led { background: #34c759; box-shadow: 0 0 6px rgba(52,199,89,0.8); }
.be-audio-btn[data-state="idle"] .be-audio-led { background: #2f6b3d; box-shadow: none; }
.be-audio-btn[data-state="suspended"] .be-audio-led,
.be-audio-btn[data-state="interrupted"] .be-audio-led { background: #ff9f0a; box-shadow: 0 0 6px rgba(255,159,10,0.8); animation: be-clip-blink 0.8s ease-in-out infinite alternate; }
.be-audio-btn[data-state="recovering"] .be-audio-led { background: #0a84ff; box-shadow: 0 0 6px rgba(10,132,255,0.9); animation: be-clip-blink 0.4s ease-in-out infinite alternate; }
.be-audio-btn[data-state="closed"] .be-audio-led { background: #ff3b30; box-shadow: 0 0 6px rgba(255,59,48,0.9); }
.be-audio-btn[data-state="suspended"], .be-audio-btn[data-state="interrupted"] { color: #ff9f0a; }
.be-audio-btn[data-state="closed"] { color: #ff453a; }

.be-cb-btn.be-mixer-btn {
  flex-direction: column;
  gap: 2px;
  width: 42px;
  height: 36px;
  padding: 0;
  color: var(--be-accent);
  background: linear-gradient(180deg, #2f4668 0%, #22334d 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 0 0 1px rgba(126,200,255,0.25);
}
.be-cb-btn.be-mixer-btn .be-icon { width: 17px; height: 17px; }
.be-mixer-btn-label { font-size: var(--be-fs-micro); font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; line-height: 1; }
.be-cb-btn.be-mixer-btn:hover { color: #fff; background: linear-gradient(180deg, #3a5883 0%, #2a3f5e 100%); }
.be-cb-btn.be-mixer-btn.be-on {
  color: #fff;
  background: linear-gradient(180deg, #3d8bff 0%, #1f5fd1 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 0 12px rgba(61,139,255,0.55);
}

.be-cb-library { display: flex; align-items: flex-end; gap: 8px; min-width: 0; }
.be-cb-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.be-cb-field-label {
  display: flex; align-items: center; gap: 6px; overflow: hidden;
  width: 0; min-width: 100%;
  font-size: var(--be-fs-label); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #8d9098;
}
.be-cb-field-name { flex-shrink: 0; white-space: nowrap; }
.be-cb-select {
  height: 26px;
  min-width: 96px;
  max-width: 132px;
  padding: 0 8px;
  background: #1b1c1f;
  border: 1px solid #111214;
  border-radius: 5px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.55);
  color: #e4e5e7;
  font-family: inherit;
  font-size: var(--be-fs-body);
  outline: none;
}
.be-cb-select:focus { border-color: var(--be-accent); }

.be-lcd {
  display: flex; align-items: stretch;
  min-height: 36px; padding: 0 2px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, #16181c 0%, #0f1013 100%);
  border: 1px solid #08090b; border-radius: 7px;
  box-shadow: inset 0 2px 7px rgba(0,0,0,0.85), 0 1px 0 rgba(255,255,255,0.07);
}
.be-lcd-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; gap: 2px; padding: 0 9px; border-radius: 5px;
  transition: background var(--be-transition);
}
.be-lcd-cell:hover { background: rgba(255,255,255,0.03); }
.be-lcd-cell + .be-lcd-cell::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.12) 30%, rgba(255,255,255,0.12) 70%, transparent);
}
.be-lcd-value {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  font-family: var(--be-mono);
  font-size: var(--be-fs-value); font-weight: 600; line-height: 1.05; letter-spacing: 0.4px;
  color: #e4e5e7; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.be-lcd-label { font-size: var(--be-fs-micro); font-weight: 700; letter-spacing: 1px; line-height: 1; text-transform: uppercase; color: #8d9098; white-space: nowrap; }
.be-lcd-num { min-width: 3ch; text-align: right; }
.be-cb-displays { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; min-width: 0; }

.be-lcd-cell.be-lcd-metro { padding: 0 5px 0 7px; }
.be-lcd-cell.be-lcd-metro:hover { background: transparent; }

.be-lcd-spin { display: inline-flex; flex-direction: column; gap: 1px; margin-left: 3px; }
.be-lcd-step {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 9px; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 2px;
  color: #8d9098; cursor: pointer; transition: color var(--be-transition), background var(--be-transition);
}
.be-lcd-step svg { width: 8px; height: 5px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.be-lcd-step:hover { color: #fff; background: rgba(255,255,255,0.10); }
.be-lcd-step:focus-visible { outline: 1px solid var(--be-accent); color: #fff; }
.be-lcd-step:disabled { color: #3a3d44; background: transparent; cursor: default; }
.be-lcd-input {
  padding: 0; margin: 0; border: 0; background: transparent;
  color: inherit; font: inherit; text-align: center; outline: none; -moz-appearance: textfield;
}
.be-lcd-input::-webkit-inner-spin-button,
.be-lcd-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.be-lcd-input:focus { color: var(--be-accent); }
.be-lcd-select {
  padding: 0; margin: 0; border: 0; background: transparent;
  color: inherit; font: inherit; text-align: center; text-align-last: center; cursor: pointer; outline: none;
}
.be-lcd-select option { background: #1a1b1f; color: #e4e5e7; }

.be-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.be-kit-status {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0; flex: 1 1 auto; max-width: 100%;
  font-size: var(--be-fs-label); font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 12px; color: #7d8592;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.be-kit-status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: #565e6c; box-shadow: 0 0 0 2px rgba(255,255,255,0.04);
  transition: background var(--be-transition), box-shadow var(--be-transition);
}
.be-kit-status:empty::before { display: none; }
.be-kit-status.be-ok { color: var(--be-success); }
.be-kit-status.be-ok::before { background: var(--be-success); box-shadow: 0 0 6px rgba(34,197,94,0.75); }
.be-kit-status.be-warn { color: var(--be-warning); }
.be-kit-status.be-warn::before { background: var(--be-warning); box-shadow: 0 0 6px rgba(234,179,8,0.75); }
.be-kit-status.be-err { color: var(--be-danger); }
.be-kit-status.be-err::before { background: var(--be-danger); box-shadow: 0 0 6px rgba(239,68,68,0.75); animation: be-clip-blink 0.6s ease-in-out infinite alternate; }

.be-editor-container.be-is-fullscreen {
  max-width: none;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  border: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.be-editor-container.be-fs-fallback { position: fixed; inset: 0; z-index: 99990; }
.be-editor-container:fullscreen { background-color: var(--be-bg); }
.be-editor-container:-webkit-full-screen { background-color: var(--be-bg); }

/* ============================================================
   DRUM GRID
   ============================================================ */
.be-drum-grid-wrapper {
  margin-bottom: 18px;
  background: radial-gradient(1200px 200px at 50% 0%, rgba(255,255,255,0.03), transparent 60%), #05060a;
  border-radius: var(--be-radius-lg);
  padding: 14px;
  border: 1px solid var(--be-glass-border);
  box-shadow: inset 0 3px 14px rgba(0, 0, 0, 0.85), var(--be-shadow-soft);
}

.be-drum-grid-scroll {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-color: #3a4150 transparent;
  padding-bottom: 14px;
}
.be-drum-grid { --be-beat-w: 100px; --be-grid-bg: #05060a; display: grid; gap: 2px; width: max-content; margin: 0 auto; -webkit-user-select: none; user-select: none; }

.be-grid-sticky {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--be-grid-bg);
  box-shadow: 8px 0 10px -6px rgba(0,0,0,0.9);
}
.be-grid-measure-bar {
  position: relative; display: flex; align-items: center; gap: 4px;
  height: 18px; padding: 0 6px 3px; box-sizing: border-box;
  background: linear-gradient(180deg, #11151c 0%, #0b0e13 100%);
  border-radius: 4px 4px 2px 2px; cursor: pointer;
  font: 700 var(--be-fs-label)/1 var(--be-mono); color: #8d9098; letter-spacing: 0.3px;
  transition: background var(--be-transition), color var(--be-transition);
}

.be-grid-measure-bar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--be-accent), var(--be-cyan)); box-shadow: 0 0 8px rgba(79, 215, 224, 0.4);
}
.be-grid-measure-bar:hover { background: #18202b; color: #e4e5e7; }
.be-grid-measure-bar.be-msel { background: #17324d; color: #fff; box-shadow: inset 0 0 0 1px rgba(126,200,255,0.7); }

.be-grid-measure-bar.be-mcycle { background: rgba(245,197,66,0.16); color: #f5c542; }
.be-grid-measure-bar.be-mcycle.be-mcycle-on { background: rgba(245,197,66,0.30); color: #ffe08a; }
.be-grid-measure-bar.be-mcycle.be-msel { box-shadow: inset 0 0 0 1px rgba(126,200,255,0.7); }
.be-mflag {
  display: none; width: 9px; height: 10px; flex-shrink: 0;
  background: #34c759;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h2v18H5zM8 4h11l-2.5 4L19 12H8z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h2v18H5zM8 4h11l-2.5 4L19 12H8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.be-grid-measure-bar.be-mstart .be-mflag { display: inline-block; }

.be-mlayer { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 1; }
.be-mhit {
  position: absolute; left: 0; top: 0; border-radius: 6px; cursor: pointer;
  transition: background var(--be-transition), box-shadow var(--be-transition);
}
.be-mhit:hover { background: rgba(255,255,255,0.035); }
.be-mhit.be-mcycle { background: rgba(245,197,66,0.06); box-shadow: inset 0 3px 0 rgba(245,197,66,0.45); }
.be-mhit.be-mcycle.be-mcycle-on { background: rgba(245,197,66,0.10); box-shadow: inset 0 3px 0 #f5c542; }
.be-mhit.be-msel { background: rgba(120,196,255,0.10); box-shadow: inset 0 0 0 1px rgba(120,196,255,0.55); }
.be-mhit.be-msel.be-mcycle-on { box-shadow: inset 0 3px 0 #f5c542, inset 0 0 0 1px rgba(120,196,255,0.55); }
.be-mhit > .be-mflag { position: absolute; left: 3px; top: 4px; width: 11px; height: 12px; }
.be-mhit.be-mstart > .be-mflag { display: block; }
.be-sheet-render-box.theme-light .be-mhit:hover { background: rgba(0,0,0,0.035); }

.be-ibar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.be-editor-container button.be-btn.be-ibtn {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 0;
  width: 34px !important; height: 26px !important; padding: 0 !important; flex: 0 0 auto;
}
.be-editor-container button.be-btn.be-ibtn:disabled { pointer-events: none; }
.be-ibtn .be-icon { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }
.be-sr {
  position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important;
  margin: -1px !important; padding: 0 !important; border: 0 !important;
}
.be-tip {
  position: fixed; left: 0; top: 0; z-index: 2147483000; pointer-events: none; box-sizing: border-box;
  max-width: min(280px, calc(100vw - 12px)); width: max-content; padding: 5px 8px;
  background: #1b1f26; border: 1px solid #3a414d; border-radius: 6px; box-shadow: 0 8px 22px rgba(0,0,0,0.55);
  font: 500 var(--be-fs-body)/1.35 var(--be-font); color: #d7dee7; letter-spacing: 0.1px; text-align: left;
}
.be-tip[hidden] { display: none; }
.be-mts { margin-left: 6px; padding: 0 4px; border-radius: 3px; background: #2a2314; color: var(--be-gold-soft); font-size: var(--be-fs-micro); letter-spacing: 0.3px; }
.be-editor-container button.be-mtool-meter.be-on { color: var(--be-gold); border-color: rgba(240,198,94,0.6); background: linear-gradient(180deg, #2f2a1c 0%, #1e1a10 100%); }
.be-tool-sep { width: 1px; height: 18px; background: rgba(255,255,255,0.12); margin: 0 2px; }
.be-drum-grid-wrapper > .be-section-header > .be-clear-bar { margin-left: auto; }
.be-editor-container button.be-pickup-btn.be-on { color: var(--be-gold); border-color: rgba(240,198,94,0.6); background: linear-gradient(180deg, #2f2a1c 0%, #1e1a10 100%); }
.be-editor-container button.be-mtool-start.be-on { color: #34c759; border-color: rgba(52,199,89,0.55); background: #18241b; }
.be-editor-container button.be-mtool-loop.be-on { color: #ffd54a; border-color: rgba(245,197,66,0.6); background: linear-gradient(180deg, #5b4a14 0%, #43370f 100%); }
.be-editor-container button.be-mtool-del:hover:not(:disabled), .be-editor-container button.be-clear-btn:hover { color: #ff8a80; }

@container be-editor (max-width: 600px) {
  .be-drum-grid-wrapper > .be-section-header > .be-clear-bar { order: 1; }
  .be-grid-toolbar { order: 2; flex: 1 1 100%; }
  .be-ibar, .be-grid-toolbar .be-grid-clip { gap: 4px; }
  .be-tool-sep { margin: 0; }
  .be-editor-container button.be-btn.be-ibtn { width: 30px !important; }
}
@container be-editor (max-width: 340px) {
  .be-tool-sep { display: none; }
  .be-ibar, .be-grid-toolbar .be-grid-clip { gap: 3px; }
  .be-editor-container button.be-btn.be-ibtn { width: 28px !important; }
}
.be-grid-beat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 0 2px 0 3px;
  min-height: 19px;
  background: #0c1017;
  border-radius: 3px;
}
.be-grid-beat-num {
  font-weight: 800; font-size: var(--be-fs-label); color: var(--be-accent);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  min-width: 18px; height: 15px; padding: 0 3px; border-radius: 3px; box-sizing: border-box;
  background: #131a24; border: 1px solid #243042; cursor: pointer;
  touch-action: none;
}
.be-grid-beat-num:hover { border-color: var(--be-accent); background: #18263a; }
.be-grid-beat-head.be-sel .be-grid-beat-num { background: var(--be-accent); color: #08111c; border-color: var(--be-accent); }
.be-beat-select {
  background: #14161b;
  border: 1px solid #2a313c;
  color: #c9cdd6;
  font-size: var(--be-fs-label);
  font-weight: 600;
  border-radius: 3px;
  padding: 0 1px;
  max-width: 68px;
  outline: none;
  cursor: pointer;
}
.be-beat-select:focus { border-color: var(--be-accent); }
.be-beat-select:disabled { opacity: 0.55; cursor: default; }
.be-beat-select.be-beat-custom { border-color: var(--be-gold); color: var(--be-gold-soft); }
.be-grid-label {
  min-height: 18px;
  font-weight: 700;
  font-size: var(--be-fs-body);
  display: flex;
  align-items: center;
  color: #92a0b4;
  padding-right: 10px;
  white-space: nowrap;
}
.be-grid-beat-cell { display: flex; gap: 2px; padding-left: 3px; border-left: 1px solid #2b3546; min-width: 0; }

.be-grid-measure-bar.be-simile-bar::after { background: repeating-linear-gradient(90deg, var(--be-gold) 0 10px, rgba(240,198,94,0.35) 10px 14px); box-shadow: 0 0 8px rgba(240,198,94,0.35); }
.be-grid-beat-cell.be-simile-cell { background: rgba(240,198,94,0.06); }
.be-grid-beat-cell.be-simile-cell .be-grid-step { opacity: 0.72; }
.be-grid-beat-cell.be-simile-cell .be-grid-step:hover { opacity: 1; }
.be-grid-beat-cell.be-measure-marker { border-left: 2px solid var(--be-accent); }
.be-grid-beat-cell.be-tuplet { border-left-color: var(--be-gold); }
.be-grid-step {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  font-family: inherit;
  line-height: 1;
  color: inherit;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 18px;
  border: 1px solid #1a2029;
  border-radius: 3px;
  cursor: pointer;
  background: linear-gradient(180deg, #12161d 0%, #0a0d12 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--be-fs-label);
  font-weight: bold;
  transition: transform 0.1s ease, background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.be-grid-step:focus:not(:focus-visible) { outline: none; }
.be-grid-step:focus-visible { outline: 2px solid var(--be-accent); outline-offset: 1px; z-index: 1; }
/* Fora da anacruse ou do compasso que a completa: guardado, mas não toca nem aparece. */
.be-grid-step[data-cut] {
  cursor: not-allowed; opacity: 0.28; box-shadow: none; transform: none;
  background: repeating-linear-gradient(135deg, #0d1016 0 3px, #161b24 3px 6px);
  border-color: #1a2029;
}
.be-grid-step[data-cut]:hover { transform: none; border-color: #1a2029; }
.be-grid-measure-bar.be-pickup-bar-m { color: var(--be-gold-soft); }
.be-grid-measure-bar.be-pickup-bar-m::after { background: repeating-linear-gradient(90deg, var(--be-gold) 0 6px, transparent 6px 9px); box-shadow: none; }
.be-grid-beat-cell.be-tuplet .be-grid-step { border-color: #2e2914; }
.be-grid-step:hover { background: linear-gradient(180deg, #1c2330 0%, #12161d 100%); border-color: var(--be-accent); transform: translateY(-1px) scale(1.04); }
.be-grid-step.be-active-normal { background: linear-gradient(180deg, #4c9dff 0%, #1f62c7 100%); border-color: #7ec8ff; color: #ffffff; box-shadow: 0 0 8px rgba(79,157,255,0.5), 0 1px 0 rgba(255,255,255,0.25) inset; }
.be-grid-step.be-active-accent { background: linear-gradient(180deg, #22c55e 0%, #0f7a3a 100%); border-color: #6ee7a8; color: #ffffff; box-shadow: 0 0 10px rgba(34,197,94,0.55), 0 1px 0 rgba(255,255,255,0.25) inset; }
.be-grid-step.be-active-ghost { background: linear-gradient(180deg, #445269 0%, #2a3444 100%); border-color: #6b7994; color: #e2e8f0; }
.be-grid-step.be-active-open { background: linear-gradient(180deg, #22c1d6 0%, #0a7c8f 100%); border-color: #7fe6f2; color: #ffffff; box-shadow: 0 0 10px rgba(34,193,214,0.5), 0 1px 0 rgba(255,255,255,0.25) inset; }
.be-grid-step.be-active-rim { background: linear-gradient(180deg, #c084fc 0%, #7e22ce 100%); border-color: #e2b8ff; color: #ffffff; box-shadow: 0 0 10px rgba(192,132,252,0.55), 0 1px 0 rgba(255,255,255,0.25) inset; }
.be-grid-step.be-active-foot { background: linear-gradient(180deg, #fb923c 0%, #b45309 100%); border-color: #fdba74; color: #201603; box-shadow: 0 0 10px rgba(251,146,60,0.5), 0 1px 0 rgba(255,255,255,0.25) inset; }
.be-grid-step[data-grace]::after {
  content: attr(data-grace);
  position: absolute;
  top: -5px;
  right: -3px;
  padding: 0 3px;
  font-size: var(--be-fs-micro);
  font-weight: 800;
  line-height: 1.35;
  color: #201603;
  background: var(--be-gold);
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  pointer-events: none;
}
.be-grid-step[data-roll]::before {
  content: attr(data-roll);
  position: absolute;
  bottom: -5px;
  left: -3px;
  padding: 0 3px;
  font-size: var(--be-fs-micro);
  font-weight: 800;
  line-height: 1.35;
  color: #0b1220;
  background: #7ec8ff;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  pointer-events: none;
}
.be-editor-container.be-orn-active .be-grid-step { cursor: crosshair; }

.be-btn-tool.be-tool-active {
  background: linear-gradient(180deg, var(--be-gold-soft) 0%, #d29c1f 100%);
  color: #201603;
  border-color: #ffe08a;
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 4px 14px rgba(240,198,94,0.3);
}

/* ============================================================
   PARTITURA E EXPORTAÇÃO
   ============================================================ */
.be-sheet-wrapper-outer {
  background: var(--be-panel-bg);
  border: 1px solid var(--be-glass-border);
  border-radius: var(--be-radius-lg);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--be-shadow-soft);
  position: relative;
}
.be-sheet-header { flex-wrap: wrap; gap: 8px 14px; }
@container be-editor (max-width: 600px) {
  .be-meta-label { min-width: 44px; }
}

.be-editor-container button.be-btn {
  text-transform: none !important; letter-spacing: 0.2px !important; min-height: 0 !important;
  line-height: 1.2 !important; margin: 0 !important; height: auto !important; width: auto !important;
}
.be-editor-container button.be-btn.be-btn-sm { padding: 5px 10px !important; font-size: var(--be-fs-body) !important; }
.be-meta-field { display: flex; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0; margin: 0; }
.be-meta-label { font-size: var(--be-fs-label); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #6f8fa3; white-space: nowrap; }
.be-editor-container input.be-meta-input {
  -webkit-appearance: none !important; appearance: none !important; box-sizing: border-box !important;
  width: 100% !important; min-width: 0 !important; height: 28px !important; min-height: 0 !important; margin: 0 !important;
  padding: 0 9px !important; border: 1px solid #2a313c !important; border-radius: 6px !important;
  background: #0f1217 !important; color: #e8edf3 !important; box-shadow: inset 0 1px 2px rgba(0,0,0,0.6) !important;
  font: 500 var(--be-fs-title)/1 var(--be-font)!important;
  letter-spacing: 0.1px !important; text-transform: none !important; outline: none !important;
}
.be-editor-container input.be-meta-input::placeholder { color: #566170; }
.be-editor-container input.be-meta-input:focus { border-color: var(--be-accent) !important; box-shadow: 0 0 0 3px rgba(126,200,255,0.15), inset 0 1px 2px rgba(0,0,0,0.6) !important; }

.be-editor-container button.be-btn.be-btn-tool.be-tool-active { border-color: var(--be-gold) !important; color: var(--be-gold) !important; background: linear-gradient(180deg, #2f2a1c 0%, #1e1a10 100%) !important; box-shadow: inset 0 1px 3px rgba(0,0,0,0.6) !important; }
.be-cb-io .be-cb-select { min-width: 104px; }
.be-import-note { margin: 0 0 14px; font-size: var(--be-fs-body); line-height: 1.45; color: #9aa6b3; text-align: left; }
.be-import-pick { position: relative; display: block; margin: 0; padding: 9px 12px; border: 1px solid var(--be-accent); border-radius: 8px; background: linear-gradient(180deg, #1e3a5c 0%, #142a44 100%); color: #fff; font-size: var(--be-fs-title); font-weight: 700; cursor: pointer; }
.be-import-pick:hover, .be-import-pick:focus-within { background: #24476f; }
.be-import-pick:focus-within { box-shadow: 0 0 0 3px rgba(126,200,255,0.25); }

.be-grid-beat-cell.be-sel { background: rgba(126,200,255,0.11); box-shadow: inset 0 1px 0 rgba(126,200,255,0.55), inset 0 -1px 0 rgba(126,200,255,0.55); }
.be-grid-beat-cell.be-sel.be-sel-first { box-shadow: inset 0 1px 0 rgba(126,200,255,0.55), inset 0 -1px 0 rgba(126,200,255,0.55), inset 2px 0 0 rgba(126,200,255,0.85); }
.be-grid-beat-cell.be-sel.be-sel-last { box-shadow: inset 0 1px 0 rgba(126,200,255,0.55), inset 0 -1px 0 rgba(126,200,255,0.55), inset -2px 0 0 rgba(126,200,255,0.85); }
.be-grid-beat-cell.be-sel.be-sel-first.be-sel-last { box-shadow: inset 0 0 0 1px rgba(126,200,255,0.55), inset 2px 0 0 rgba(126,200,255,0.85), inset -2px 0 0 rgba(126,200,255,0.85); }
.be-grid-beat-head.be-sel { background: #17324d; box-shadow: inset 0 0 0 1px rgba(126,200,255,0.7); }
.be-grid-clip { display: inline-flex; gap: 6px; }
.be-touch-hint { display: none; }
@media (hover: none) and (pointer: coarse) {
  .be-kbd-hint { display: none; }
  .be-touch-hint { display: list-item; }
}

.be-help { position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: help; outline: none; border-radius: 4px; }
.be-help:focus-visible { box-shadow: 0 0 0 2px rgba(126,200,255,0.55); }
.be-help-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%;
  font-size: var(--be-fs-label); font-weight: 800; color: #08111c; background: #5d7896; line-height: 1;
}
.be-help:hover .be-help-icon, .be-help:focus .be-help-icon { background: var(--be-accent); }
.be-help-pop {
  display: none; position: absolute; top: calc(100% + 8px); left: -10px; z-index: 40;
  width: max-content; max-width: min(440px, calc(100vw - 88px)); box-sizing: border-box;
  padding: 10px 14px; background: #10151d; border: 1px solid #2c3644; border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.6);
  font-size: var(--be-fs-body); font-weight: 400; line-height: 1.5; color: #b9c3cf; letter-spacing: 0; text-transform: none; cursor: default;
}
@supports (width: 1cqw) { .be-help-pop { max-width: min(440px, calc(100cqw - 64px)); } }
.be-help-pop ul { margin: 0; padding: 0 0 0 16px; }
.be-help-pop li { margin: 0 0 3px; }
.be-help-pop b { color: #e6edf5; font-weight: 700; }
.be-help:hover .be-help-pop, .be-help:focus .be-help-pop, .be-help:focus-within .be-help-pop { display: block; }
.be-editor-container button.be-btn:disabled { opacity: 0.45 !important; cursor: default !important; }

.be-editor-container button.be-btn.be-repeat-btn[aria-pressed="true"] { border-color: var(--be-gold) !important; color: var(--be-gold-soft) !important; background: linear-gradient(180deg, #2f2a1c 0%, #1e1a10 100%) !important; }
.be-repeat-btn .be-icon { fill: currentColor; }
.be-repeat-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 10px; padding: 8px 12px; border: 1px solid #3a3320; border-radius: 8px; background: linear-gradient(180deg, rgba(212,175,55,0.07), rgba(212,175,55,0.02)); }
.be-repeat-bar[hidden] { display: none !important; }
.be-repeat-field { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.be-editor-container select.be-repeat-select {
  -webkit-appearance: menulist !important; appearance: auto !important; box-sizing: border-box !important;
  height: 26px !important; min-height: 0 !important; width: auto !important; margin: 0 !important; padding: 0 6px !important;
  border: 1px solid #2a313c !important; border-radius: 6px !important; background: #0f1217 !important; color: #e8edf3 !important;
  font: 600 var(--be-fs-body)/1 var(--be-font)!important; outline: none !important; cursor: pointer;
}
.be-editor-container select.be-repeat-select:focus { border-color: var(--be-gold) !important; }
.be-repeat-hint { flex: 1 1 200px; min-width: 0; font-size: var(--be-fs-body); color: var(--be-gold-soft); }
.be-repeat-hint:empty { display: none; }
@container be-editor (max-width: 600px) {
  .be-repeat-bar { gap: 8px 10px; }
  .be-repeat-hint { flex-basis: 100%; }
}

.be-export-dialog { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; background: rgba(6,8,12,0.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.be-export-dialog[hidden] { display: none; }
.be-toast { position: absolute; left: 50%; bottom: 18px; transform: translate(-50%, 12px); z-index: 30; max-width: calc(100% - 32px);
  padding: 9px 14px; border-radius: 8px; background: #2a1416; border: 1px solid #7f2a2a; color: #ffd9d6; font-size: var(--be-fs-title); font-weight: 600;
  box-shadow: 0 10px 26px rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; }
.be-toast.be-toast-on { opacity: 1; transform: translate(-50%, 0); }
.be-export-card { background: linear-gradient(180deg, #232830 0%, #191d23 100%); border: 1px solid #343c48; border-radius: 12px; padding: 18px; box-shadow: 0 18px 40px rgba(0,0,0,0.6); text-align: center; width: 100%; max-width: 380px; max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box; font-family: var(--be-font); }
.be-export-meta { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; text-align: left; }
.be-export-meta .be-meta-label { min-width: 46px; }
.be-export-orients[hidden] { display: none; }
.be-export-sub { font-size: var(--be-fs-label); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #6f8fa3; margin: 0 0 8px; }
.be-editor-container button.be-export-go { display: block; width: 100%; margin: 2px 0 0; padding: 9px 12px; min-height: 0; border: 1px solid var(--be-accent); border-radius: 8px; background: linear-gradient(180deg, #1e3a5c 0%, #142a44 100%); color: #fff; font-size: var(--be-fs-title); font-weight: 700; cursor: pointer; text-transform: none; letter-spacing: 0.2px; }
.be-editor-container button.be-export-go[hidden] { display: none; }
.be-editor-container button.be-export-go:hover, .be-editor-container button.be-export-go:focus-visible { background: #24476f; outline: none; }
.be-export-title { font-size: var(--be-fs-body); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #dfe6ee; margin-bottom: 12px; }
.be-export-options { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.be-editor-container button.be-export-opt {
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 150px; min-height: 0; margin: 0; padding: 12px 10px;
  background: #11151b; border: 1px solid #2c3440; border-radius: 10px; color: #e8edf3; cursor: pointer; text-transform: none; letter-spacing: 0;
  font: 700 var(--be-fs-title)/1.2 var(--be-font); transition: border-color var(--be-transition), background var(--be-transition);
}
.be-editor-container button.be-export-opt:hover, .be-editor-container button.be-export-opt:focus-visible { border-color: var(--be-accent); background: #152030; outline: none; }
.be-export-opt svg { width: 40px; height: 40px; fill: #f4f6f8; stroke: #8aa4b8; stroke-width: 1.6; }
.be-export-opt svg path { fill: none; }
.be-export-opt small { font-size: var(--be-fs-label); font-weight: 500; color: #7f8b98; }
.be-editor-container button.be-export-cancel { margin: 12px 0 0; padding: 4px 10px; min-height: 0; background: transparent; border: 0; color: #8b96a3; font-size: var(--be-fs-body); cursor: pointer; text-transform: none; letter-spacing: 0; }
.be-editor-container button.be-export-cancel:hover { color: #fff; }
.be-export-options.be-export-aspects { gap: 8px; flex-wrap: nowrap; }
.be-editor-container .be-export-aspects button.be-export-opt { width: 96px; flex: 1 1 0; min-width: 0; padding: 10px 6px; }
.be-export-aspects .be-export-opt svg { width: 34px; height: 34px; }
.be-export-note { margin: 12px 0 0; font-size: var(--be-fs-label); line-height: 1.45; color: #8b96a3; text-align: left; }
.be-export-note[hidden] { display: none; }
.be-media-bar { height: 8px; margin: 4px 0 10px; border-radius: 4px; background: #11151b; border: 1px solid #2c3440; overflow: hidden; }
.be-media-fill { height: 100%; width: 0; background: var(--be-accent); transition: width 0.2s linear; }
.be-media-bar.be-indeterminate .be-media-fill { width: 30%; animation: be-media-slide 1.1s ease-in-out infinite alternate; }
@keyframes be-media-slide { from { margin-left: 0; } to { margin-left: 70%; } }
.be-media-status { margin: 0; min-height: 1.4em; font-size: var(--be-fs-body); color: #c9d3de; }
@media (prefers-reduced-motion: reduce) { .be-media-fill { transition: none; } .be-media-bar.be-indeterminate .be-media-fill { animation: none; width: 100%; opacity: 0.5; } }
.be-sheet-render-box {
  background: #ffffff;
  border-radius: var(--be-radius-md);
  padding: 16px;
  min-height: 140px;
  max-height: 70vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 6px 18px rgba(0,0,0,0.25);
  position: relative;
}
.be-sheet-render-box.theme-dark { background: linear-gradient(180deg, #1c2028 0%, #14171d 100%); }
.be-sheet-render-box.theme-light { background: #fbfaf6; }


.be-sheet-render-box > svg { flex: 0 1 auto; min-width: 0; max-width: 100%; height: auto !important; }
.be-play-cursor {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  border-radius: 4px; background: rgba(120, 196, 255, 0.25);
  pointer-events: none; opacity: 0; will-change: transform; z-index: 2;
}
.be-play-cursor.be-on { opacity: 1; }

/* ============================================================
   MIXER
   ============================================================ */
.be-mixer-section {
  background: var(--be-panel-bg);
  border: 1px solid var(--be-glass-border);
  border-radius: var(--be-radius-lg);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--be-shadow-soft);
}
.be-mixer-channels-container { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 2px; margin-bottom: 0; }
.be-mixer-body-inner { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 14px; }
.be-mixer-body-inner > div:first-child { flex: 0 0 auto; }

.be-channel-strip {
  background: #353434;
  color: rgba(255,255,255,0.9);
  border-radius: 2px;
  width: 62px;
  padding: 8px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  box-shadow: inset 0 0 4px 0 rgba(0,0,0,0.75);
  flex-shrink: 0;
  font-family: var(--be-font);
}
.be-ch-name {
  font-size: var(--be-fs-body);
  font-weight: 700;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.9);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  padding: 0 4px;
}
.be-ch-buttons { display: flex; flex-flow: row nowrap; justify-content: center; gap: 3px; width: 100%; padding: 0 6px; box-sizing: border-box; }
.be-ch-btn {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 1 22px;
  min-width: 0;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: linear-gradient(to bottom, rgba(79,79,79,1) 0%, rgba(14,14,14,1) 100%);
  box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
  color: rgba(255,255,255,0.9);
  font-family: inherit;
  font-size: var(--be-fs-body);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  cursor: pointer;
  transition: filter var(--be-transition);
}
.be-ch-btn:hover { filter: brightness(1.25); }
.be-ch-btn:active { background: linear-gradient(to top, rgba(79,79,79,1) 0%, rgba(14,14,14,1) 100%); }
.be-ch-btn.mute-active { background: linear-gradient(to bottom, #ff6259 0%, #a3211b 100%); color: #fff; box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5), 0 0 8px rgba(239,68,68,0.55); }
.be-ch-btn.solo-active { background: linear-gradient(to bottom, var(--be-gold-soft) 0%, #c48f17 100%); color: #201603; box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5), 0 0 8px rgba(240,198,94,0.55); }

.be-ch-pan-wrap label, .be-ch-fader-wrap label, .be-fader-wrap label { font-size: var(--be-fs-micro); color: #8f8f8f; font-weight: bold; letter-spacing: 0.4px; }

.be-ch-pan-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.be-knob-wrap { position: relative; width: 42px; height: 42px; }
.be-pan-slider {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.be-knob { position: absolute; inset: 0; border-radius: 50%; cursor: ns-resize; touch-action: none; user-select: none; -webkit-user-select: none; }
.be-knob::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  background: repeating-conic-gradient(from -136.5deg, #808080 0deg 3deg, transparent 3deg 27deg);
  -webkit-mask-image: conic-gradient(from -138deg, #000 0deg 276deg, transparent 276deg 360deg);
          mask-image: conic-gradient(from -138deg, #000 0deg 276deg, transparent 276deg 360deg);
  pointer-events: none;
}
.be-knob__cap {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #6b6b6b 0%, #4f4f4f 32%, #1c1c1c 100%);
  box-shadow: 0 0 1px 1px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.12);
  transform: rotate(var(--be-knob-angle, 0deg));
  pointer-events: none;
}
.be-knob__cap::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 3px;
  width: 2px;
  height: 8px;
  margin-left: -1px;
  border-radius: 1px;
  background: #f2f2f2;
  box-shadow: 0 0 2px rgba(255,255,255,0.35);
}
.be-knob--drag { cursor: grabbing; }
.be-knob-wrap > input:focus-visible + .be-knob { box-shadow: 0 0 0 2px rgba(126,200,255,0.55); }

.be-val-disp {
  display: inline-block;
  min-width: 24px;
  padding: 2px 4px;
  border-radius: 2px;
  color: #1fcc1f;
  background: #333;
  box-shadow: inset 0 0 3px 3px rgba(0,0,0,0.50);
  font-family: var(--be-mono);
  font-size: var(--be-fs-value);
  line-height: 1;
  letter-spacing: 0.3px;
  text-align: center;
  white-space: nowrap;
}

/* ============================================================
   FADERS E MEDIDORES
   ============================================================ */
.be-fader-row {
  --be-fader-hit-w: 26px;
  --be-fader-h: 100px;
  --be-cap-h: 34px;
  --be-cap-half: 17px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
}
.be-fader-track {
  position: relative;
  width: var(--be-fader-hit-w);
  height: var(--be-fader-h);
  flex-shrink: 0;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.be-fader-track--drag { cursor: grabbing; }

.be-fader-track::before {
  content: "";
  position: absolute;
  left: 50%;
  top: var(--be-cap-half);
  bottom: var(--be-cap-half);
  width: 4px;
  transform: translateX(-50%);
  background: #0a0a0b;
  border-radius: 2px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.95), 0 0 0 1px rgba(0,0,0,0.35), 1px 0 0 rgba(255,255,255,0.06);
}

.be-fader-ticks {
  position: absolute;
  top: var(--be-cap-half);
  bottom: var(--be-cap-half);
  left: 0;
  right: 0;
  pointer-events: none;
}
.be-fader-ticks span {
  position: absolute;
  left: 1px;
  width: 6px;
  height: 1px;
  bottom: calc(100% * var(--be-p, 0));
  background: #8a8a8a;
}
.be-fader-ticks span.be-tick-minor { width: 3px; left: 4px; background: #666; }
.be-fader-ticks span.be-tick-unity { width: 8px; left: 0; background: #ffffff; }

.be-fader-cap {
  position: absolute;
  left: 50%;
  bottom: calc(var(--be-cap-half) + (100% - var(--be-cap-h)) * var(--be-cap-p, 0));
  width: 24px;
  height: var(--be-cap-h);
  transform: translate(-50%, 50%);
  border: 1px solid #2c2c2e;
  border-radius: 3px;
  background:
    linear-gradient(180deg, transparent calc(50% - 1px), #ffffff calc(50% - 1px), #ffffff calc(50% + 1px), transparent calc(50% + 1px)),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.20) 0 1px, rgba(0,0,0,0.10) 1px 3px),
    linear-gradient(180deg, #f4f4f4 0%, #d3d3d3 18%, #a3a3a3 44%, #8d8d8d 50%, #a3a3a3 56%, #c9c9c9 82%, #ececec 100%);
  box-shadow: 0 3px 6px rgba(0,0,0,0.65), 0 1px 1px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(0,0,0,0.25);
  pointer-events: none;
  z-index: 1;
  transition: filter var(--be-transition);
}
.be-fader-track:hover .be-fader-cap { filter: brightness(1.06); }
.be-fader-track--drag .be-fader-cap { filter: brightness(1.12); }
.be-fader-vertical {
  -webkit-appearance: none !important;
  appearance: none !important;
  writing-mode: vertical-lr;
  direction: rtl;
  -moz-orient: vertical;
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  outline: none;
  pointer-events: none;
  z-index: 2;
}
.be-fader-vertical::-webkit-slider-runnable-track,
.be-fader-vertical::-webkit-slider-thumb { -webkit-appearance: none; background: transparent; border: 0; }
.be-fader-vertical::-moz-range-track,
.be-fader-vertical::-moz-range-thumb,
.be-fader-vertical::-moz-range-progress { background: transparent; border: 0; }
.be-fader-vertical:focus-visible ~ .be-fader-cap { box-shadow: 0 0 0 2px rgba(126,200,255,0.7), 0 3px 6px rgba(0,0,0,0.65); }

.be-fader-scale {
  position: relative;
  width: 18px;
  align-self: stretch;
  flex-shrink: 0;
  font-family: var(--be-font);
}
.be-fader-scale span {
  position: absolute;
  right: 0;
  bottom: calc(var(--be-cap-half, 0px) + (100% - var(--be-cap-h, 0px)) * var(--be-p, 0));
  transform: translateY(50%);
  font-size: var(--be-fs-micro);
  line-height: 1;
  color: #8f8f8f;
  white-space: nowrap;
  text-align: right;
}
.be-fader-scale span.be-scale-zero { color: #d2d2d2; font-weight: 700; }

.be-fader-scale span.be-scale-clip { color: #ff5a52; font-weight: 800; }
.be-fader-scale span.be-scale-zero-clip { color: #ffffff; font-weight: 800; }

.be-ch-fader-wrap {

  --be-vca-gradient: linear-gradient(to top, #1f9d3a 0%, #34c759 46%, #c8d62b 55.5%, #f2c230 66%, #f5902a 72%, #ff3b30 78%, #ff2d2d 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: auto;
  padding-bottom: 16px;
}
.be-ch-fader-wrap .be-fader-row {
  --be-fader-hit-w: 26px;
  --be-fader-h: var(--be-ch-fader-h, 308px);
  gap: 4px;
  margin-top: 6px;
}
.be-ch-fader-wrap .be-fader-scale span { font-size: var(--be-fs-micro); }

.be-vca { display: flex; flex-flow: row nowrap; align-items: stretch; height: var(--be-fader-h); }

.be-vca-stereo { gap: 0; }
.be-meter-col { position: relative; display: flex; align-self: stretch; }
.be-meter-col .be-ch-meter-area { margin-left: 1px; margin-right: 1px; }
.be-meter-lr { position: absolute; top: 100%; left: 0; right: 0; margin-top: 2px; text-align: center; font-size: var(--be-fs-micro); font-weight: 700; color: #9db7d3; line-height: 1; }

.be-vca .be-fader-scale { order: 0; }
.be-ch-meter-area {
  order: 1; position: relative; width: 8px; height: auto; align-self: stretch;
  margin: var(--be-cap-half, 0px) 2px var(--be-cap-half, 0px) 2px;
  flex-shrink: 0; overflow: hidden; background: #131313; border-radius: 1px;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.9);
}
.be-ch-meter-area::before { content: ""; position: absolute; inset: 0; background: var(--be-vca-gradient); opacity: 0.22; }

.be-vu-hold {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; margin-bottom: -1px;
  background: #e8ffe8; opacity: 0; z-index: 2; pointer-events: none;
  box-shadow: 0 0 3px rgba(255,255,255,0.6);
}
.be-vu-hold.be-hold-clip { background: #ff3b30; box-shadow: 0 0 4px rgba(255,59,48,0.9); }
.be-vu-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: var(--be-vca-gradient);
  background-repeat: no-repeat;
  background-size: 100% var(--be-fader-h);
  background-position: bottom;

  -webkit-clip-path: inset(100% 0 0 0);
  clip-path: inset(100% 0 0 0);
  will-change: clip-path;
}

/* ============================================================
   FX RACK
   ============================================================ */
.be-mix-fx-rack {
  background: linear-gradient(180deg, #171a20 0%, #101318 100%);
  border: 1px solid #333a45;
  border-radius: var(--be-radius-md);
  padding: 10px;
  margin-top: 0;

  flex: 0 1 380px;
  min-width: 270px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.be-fx-rack-header {
  font-size: var(--be-fs-body);
  font-weight: 800;
  color: var(--be-accent);
  letter-spacing: 1.4px;
  margin-bottom: 10px;
  border-bottom: 1px solid #272d37;
  padding-bottom: 6px;
}
.be-fx-modules-grid { display: grid; grid-template-columns: 1fr; grid-auto-rows: auto; flex: 1 1 auto; gap: 8px; align-content: space-between; }

.be-fx-module {
  background: linear-gradient(180deg, #1e222a 0%, #171a20 100%);
  border: 1px solid #2a313c;
  border-radius: var(--be-radius-md);
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 4px 12px rgba(0,0,0,0.25);
  transition: border-color var(--be-transition);
}
.be-fx-module:hover { border-color: #3c4655; }

.be-fx-eq { --be-fx-color: #34d399; --be-fx-tint: rgba(52,211,153,0.08); }
.be-fx-comp { --be-fx-color: #fbbf24; --be-fx-tint: rgba(251,191,36,0.08); }
.be-fx-reverb { --be-fx-color: #f472b6; --be-fx-tint: rgba(244,114,182,0.08); }
.be-fx-module.be-fx-eq, .be-fx-module.be-fx-comp, .be-fx-module.be-fx-reverb {
  border-top: 2px solid var(--be-fx-color);
  background: linear-gradient(180deg, var(--be-fx-tint) 0%, rgba(0,0,0,0) 55%), linear-gradient(180deg, #1e222a 0%, #171a20 100%);
}
.be-fx-module .be-fx-title > span { color: var(--be-fx-color, #a0a8b4); letter-spacing: 1px; }
.be-fx-module .be-val-disp { color: var(--be-fx-color, #39ff14); text-shadow: 0 0 6px var(--be-fx-tint, transparent); }
.be-fx-title { font-size: var(--be-fs-label); font-weight: bold; color: #a0a8b4; letter-spacing: 0.5px; margin-bottom: 2px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.be-fx-controls-row { display: flex; flex-wrap: wrap; gap: 4px; justify-content: space-around; }
.be-fader-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; min-width: 30px; }
.be-fader-wrap > label { order: -2; font-size: var(--be-fs-micro); text-transform: uppercase; letter-spacing: 0.5px; }
.be-fader-wrap > .be-val-disp { order: -1; font-size: var(--be-fs-title); padding: 1px 3px; min-width: 20px; }
.be-fader-wrap.be-knob-ctl { gap: 5px; justify-content: flex-start; }
.be-fader-wrap.be-knob-ctl > .be-val-disp { order: 1; }
.be-knob-ctl .be-knob-wrap { width: 42px; height: 42px; }
.be-knob-ctl .be-fader-scale { display: none; }
.be-knob--fx .be-knob__cap::after { background: var(--be-knob-color, #f2f2f2); box-shadow: 0 0 4px var(--be-knob-color, rgba(255,255,255,0.35)); }

.be-fx-master-group { display: flex; align-items: flex-start; gap: 10px; flex: 0 1 auto; min-width: 0; }
.be-master-strip-wrap { flex: 0 0 auto; }
.be-master-strip {
  position: relative;
  width: 96px;
  background: linear-gradient(180deg, #2a3a55 0%, #1c2638 100%);
  border: 1px solid #4c9dff;
  border-radius: 4px;
  box-shadow: inset 0 0 6px 0 rgba(0,0,0,0.6), 0 0 0 1px rgba(76,157,255,0.35), 0 8px 26px rgba(43,125,233,0.3);
}
.be-master-strip .be-fader-row { --be-fader-h: var(--be-master-fader-h, 308px); }

.be-master-strip .be-fader-cap {
  border-color: #6b4d06;
  background:
    linear-gradient(180deg, transparent calc(50% - 1px), #3a2a02 calc(50% - 1px), #3a2a02 calc(50% + 1px), transparent calc(50% + 1px)),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.22) 0 1px, rgba(0,0,0,0.08) 1px 3px),
    linear-gradient(to bottom, var(--be-gold-soft) 0%, #c48f17 100%);
  box-shadow: 0 3px 6px rgba(0,0,0,0.65), 0 0 8px rgba(240,198,94,0.45), inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -1px 0 rgba(0,0,0,0.25);
}
.be-master-strip .be-ch-name { font-size: var(--be-fs-title); font-weight: 800; letter-spacing: 1.2px; color: var(--be-accent); text-shadow: 0 0 8px rgba(126,200,255,0.5); }
.be-master-strip .be-vu-clip-label { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); }
.be-vu-clip-label {
  font-size: var(--be-fs-micro);
  font-weight: 800;
  color: #ef4444;
  border: 1px solid #ef4444;
  border-radius: 2px;
  padding: 0 4px;
  letter-spacing: 0.5px;
  animation: be-clip-blink 0.4s ease-in-out infinite alternate;
}
@keyframes be-clip-blink {
  from { opacity: 1; box-shadow: 0 0 6px rgba(239,68,68,0.8); }
  to   { opacity: 0.55; box-shadow: 0 0 2px rgba(239,68,68,0.4); }
}

/* ============================================================
   BYPASS, MASTER E TOGGLES
   ============================================================ */
.be-fx-bypass {
  padding: 2px 7px;
  font-family: inherit;
  font-size: var(--be-fs-micro);
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #8b93a1;
  background: linear-gradient(180deg, #2a2e37 0%, #1b1e24 100%);
  border: 1px solid var(--be-border);
  border-radius: 3px;
  cursor: pointer;
  transition: color var(--be-transition), background var(--be-transition), box-shadow var(--be-transition);
}
.be-fx-bypass:hover { color: #fff; border-color: #565e6c; }

.be-editor-container button.be-fx-bypass {
  height: auto !important; min-height: 0 !important; min-width: 0 !important; width: auto !important;
  margin: 0 !important; padding: 2px 7px !important; line-height: 1.3 !important;
  font-size: var(--be-fs-micro) !important; letter-spacing: 0.6px !important; text-transform: none !important; box-sizing: border-box;
}
.be-fx-bypass.be-bypass-on {
  color: #201603;
  background: linear-gradient(180deg, var(--be-gold-soft) 0%, #d29c1f 100%);
  border-color: #ffe08a;
  box-shadow: 0 0 8px rgba(240,198,94,0.45);
}
.be-fx-module.be-bypassed .be-fx-controls-row { opacity: 0.4; }
.be-fx-module.be-bypassed .be-gr-meter { opacity: 0.4; }

.be-fx-controls-row.be-fx-grid { display: grid; gap: 4px 2px; justify-items: center; align-items: start; }
.be-fx-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.be-fx-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.be-fx-grid .be-fader-wrap { min-width: 0; width: 100%; }
.be-editor-container .be-fx-module .be-knob-ctl > label {
  display: block !important; max-width: 100%; margin: 0 !important; padding: 0 !important;
  font-size: var(--be-fs-micro) !important; line-height: 1.2 !important; letter-spacing: 0.3px !important;
  text-transform: uppercase !important; white-space: nowrap !important; overflow: hidden; text-overflow: clip;
  text-align: center; font-weight: 700 !important;
}
.be-fx-grid-5 .be-knob-ctl .be-knob-wrap { width: 42px; height: 42px; }
.be-fx-grid .be-fader-wrap > .be-val-disp { font-size: var(--be-fs-body); padding: 1px 0; }

.be-fx-module .be-fader-wrap.be-knob-ctl > .be-val-disp {
  width: 0; min-width: 100%; box-sizing: border-box;
  white-space: nowrap; overflow: visible; text-align: center;
}
.be-eq-freq-row { margin-top: 0; padding-top: 4px; border-top: 1px dashed #2a313c; }

.be-fx-eq .be-fx-grid-3 .be-knob-ctl .be-knob-wrap { width: 36px; height: 36px; }

.be-editor-container .be-fx-module .be-knob-freq > label { text-transform: none !important; }

.be-comp-io-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px 2px; align-items: center; justify-items: center; margin-top: 10px; }
.be-comp-io-row > .be-gr-col { grid-column: 2 / span 3; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.be-gr-col > .be-gr-meter { width: 100%; box-sizing: border-box; margin-top: 0; }
.be-comp-io-row .be-fader-wrap { min-width: 0; width: 100%; }
.be-comp-io-row .be-knob-ctl .be-knob-wrap { width: 42px; height: 42px; }
.be-comp-io-row .be-fader-wrap > .be-val-disp { font-size: var(--be-fs-body); padding: 1px 0; }
.be-gr-meter { margin-top: 4px; padding: 5px 4px 3px; background: #0d0f13; border: 1px solid #22262e; border-radius: 6px; box-shadow: inset 0 1px 4px rgba(0,0,0,0.7); }
.be-gr-leds, .be-gr-scale { display: grid; grid-template-columns: repeat(10, 1fr); gap: 1px; justify-items: center; }
.be-gr-led {

  --be-gr-color: hsl(calc(52 - (var(--be-gr-i) - 1) * 2.9), 100%, 54%);
  width: 7px; height: 7px; border-radius: 50%; background: #1b1d22;
  background: color-mix(in srgb, var(--be-gr-color) 14%, #15171b);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.7);
  transition: background 60ms linear, box-shadow 60ms linear;
}
.be-gr-led.be-on { background: var(--be-gr-color); box-shadow: 0 0 6px var(--be-gr-color), inset 0 1px 0 rgba(255,255,255,0.35); }
.be-gr-scale span { font-size: var(--be-fs-micro); line-height: 1; color: #707783; text-align: center; font-weight: 700; margin-top: 3px; }
.be-gr-title { font-size: var(--be-fs-micro); letter-spacing: 0.6px; color: #5d6470; text-align: center; margin-top: 3px; font-weight: 800; }


.be-mixer-section:not(.be-open) { display: none; }

/* ============================================================
   COMMAND BAR COMPACTA
   ============================================================ */
.be-cb-btn:not(.be-cb-icon):not(.be-mixer-btn) { padding: 0 8px; }
.be-transport .be-cb-btn.be-cb-icon { width: 28px; }
.be-cb-btn.be-play:not(.be-on) { color: #7fdc9a; }


.be-cb-select.be-rud-select { max-width: 188px; }

.be-lcd-value .be-lcd-input { cursor: ns-resize; touch-action: none; }
.be-lcd-value .be-lcd-input:focus { cursor: text; }

/* ============================================================
   PROTEÇÃO CONTRA O CSS DO TEMA
   ============================================================ */
.be-editor-container input.be-lcd-input,
.be-editor-container input.be-lcd-input:hover,
.be-editor-container input.be-lcd-input:focus {
  -webkit-appearance: none !important;
  appearance: none !important;
  -moz-appearance: textfield !important;
  display: inline-block !important;
  box-sizing: content-box !important;
  width: 3.2ch !important;
  min-width: 3.2ch !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #e4e5e7 !important;
  text-shadow: none !important;
  font-family: var(--be-mono)!important;
  font-size: var(--be-fs-value) !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.4px !important;
  text-align: center !important;
  text-indent: 0 !important;
  overflow: visible !important;
}
.be-editor-container input.be-lcd-input:focus { color: var(--be-accent) !important; }
.be-editor-container select.be-lcd-select,
.be-editor-container select.be-lcd-select:focus {
  -webkit-appearance: none; appearance: none;
  width: auto; height: auto; min-height: 0; margin: 0; padding: 0 14px 0 0;
  border: 0; border-radius: 0; box-shadow: none; outline: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238d9098' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right center;
  color: #e4e5e7; font-family: var(--be-mono);
  font-size: var(--be-fs-value); font-weight: 600; line-height: 1.05; letter-spacing: 0.4px;
}
.be-editor-container select.be-cb-select,
.be-editor-container select.be-cb-select:focus {
  height: 26px; min-height: 0; margin: 0; padding: 0 8px; line-height: normal;
  background-color: #1b1c1f; color: #e4e5e7; border: 1px solid #111214; border-radius: 5px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.55); font-size: var(--be-fs-body); font-family: inherit;
}
.be-editor-container select.be-cb-select:focus { border-color: var(--be-accent); }
.be-editor-container button.be-cb-btn,
.be-editor-container button.be-lcd-step {
  text-transform: none; text-decoration: none; letter-spacing: 0.2px; margin: 0; min-height: 0;
}
.be-editor-container button.be-lcd-step { padding: 0; width: 13px; height: 9px; line-height: 0; }

.be-command-bar.be-cb-stacked .be-cb-center { order: -1; flex: 1 1 100%; }

.be-command-bar.be-cb-measure, .be-command-bar.be-cb-fit,
.be-command-bar.be-cb-measure .be-cb-displays, .be-command-bar.be-cb-fit .be-cb-displays { flex-wrap: nowrap; }
.be-command-bar.be-cb-measure > .be-cb-zone, .be-command-bar.be-cb-fit > .be-cb-zone { flex: 0 0 auto; flex-wrap: nowrap; margin-left: 0; }
.be-command-bar.be-cb-fit > .be-cb-zone { zoom: var(--be-cb-zoom, 1); }
.be-command-bar.be-cb-stacked .be-cb-left { flex: 1 1 auto; }

.be-command-bar.be-cb-stacked .be-cb-left .be-cb-library { flex: 1 1 auto; }
.be-command-bar.be-cb-stacked .be-cb-left .be-cb-field { flex: 1 1 0; }
.be-editor-container .be-command-bar.be-cb-stacked .be-cb-left select.be-cb-select { max-width: none; width: 100%; min-width: 0; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@container be-editor (max-width: 760px) {
  .be-command-bar { gap: 10px; }
  .be-cb-left, .be-cb-right { flex: 1 1 100%; justify-content: center; }
  .be-cb-left, .be-cb-right { flex-wrap: nowrap; align-items: flex-end; }
  .be-cb-library { flex: 1 1 auto; }
  .be-cb-field { flex: 1 1 0; }
  .be-editor-container select.be-cb-select { max-width: none; width: 100%; min-width: 0; }
  .be-fx-modules-grid { grid-template-columns: 1fr; }
  .be-mixer-body-inner { flex-direction: column; }
  .be-mixer-body-inner > div:first-child { width: 100%; }
  .be-mix-fx-rack { width: 100%; flex-basis: auto; min-width: 0; max-width: none; }
  .be-fx-master-group { flex-basis: 100%; flex-wrap: wrap; }
  .be-mixer-channels-container { flex-wrap: wrap; justify-content: center; max-height: none; }
  .be-channel-strip { width: 62px; }
  .be-fx-controls-row { flex-wrap: wrap; }
  .be-drum-grid { gap: 1px; --be-beat-w: 84px; }
  .be-grid-step { height: 16px; font-size: var(--be-fs-micro); }
  .be-sheet-wrapper-outer .be-section-header { flex-wrap: wrap; gap: 8px; }
}

@container be-editor (max-width: 380px) {
  .be-cb-left .be-cb-library { flex-wrap: wrap; }
  .be-cb-left .be-cb-library .be-cb-field:last-child { flex: 1 1 100%; }
}

@container be-editor (max-width: 280px) {
  .be-cb-right { flex-wrap: wrap; justify-content: flex-end; }
  .be-cb-io { flex: 1 1 100%; }
}

@container be-editor (max-width: 360px) {
  .be-fx-grid-5 .be-knob-ctl .be-knob-wrap, .be-comp-io-row .be-knob-ctl .be-knob-wrap,
  .be-fx-eq .be-fx-grid-3 .be-knob-ctl .be-knob-wrap { width: 34px; height: 34px; }
  .be-fx-grid-5 .be-fader-wrap > .be-val-disp { font-size: var(--be-fs-label); letter-spacing: 0; padding: 1px; min-width: 0; }
}

@container be-editor (max-width: 440px) {
  .be-lcd-cell { padding: 0 7px; }
  .be-channel-strip { width: 60px; }
  .be-cb-btn.be-cb-icon { width: 32px; }
  .be-cb-btn { padding: 0 8px; }
}

@media (max-width: 768px) {
  .be-editor-container { padding: 10px; border-radius: 12px; }
}

@supports not (container-type: inline-size) {
  @media (max-width: 1340px) {
    .be-cb-center { order: -1; flex: 1 1 100%; }
    .be-cb-left, .be-cb-right { flex: 1 1 auto; }
  }
  @media (max-width: 768px) {
    .be-cb-left, .be-cb-right { flex: 1 1 100%; justify-content: center; }
    .be-fx-modules-grid { grid-template-columns: 1fr; }
    .be-mixer-body-inner { flex-direction: column; }
    .be-mix-fx-rack { width: 100%; min-width: 0; }
    .be-mixer-channels-container { flex-wrap: wrap; justify-content: center; }
    .be-drum-grid { gap: 1px; --be-beat-w: 84px; }
  }
}

/* ---------- Planos: travas, aviso e proteção de tela ---------- */
.be-editor-container [data-be-locked] { position: relative; opacity: .55; cursor: not-allowed; }
.be-editor-container .be-lock-ico {
    position: absolute; top: 1px; right: 1px; width: 10px; height: 10px; pointer-events: none;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23A9C1D9' d='M12 2a5 5 0 0 0-5 5v3H5v12h14V10h-2V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 0 1 6 0v3z'/%3E%3C/svg%3E");
}
.be-editor-container .be-field-locked .be-cb-field-name::after {
    content: ''; display: inline-block; width: 10px; height: 10px; margin-left: 4px; vertical-align: -1px;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23A9C1D9' d='M12 2a5 5 0 0 0-5 5v3H5v12h14V10h-2V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 0 1 6 0v3z'/%3E%3C/svg%3E");
}
.be-editor-container .be-field-locked select { opacity: .55; cursor: not-allowed; }

/* Aviso de assinatura: cores do CSS global do site (tokens --bp-*), com reserva. */
.be-editor-container .be-upsell {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2147483000;
    display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); box-sizing: border-box;
    padding: 12px 14px; border: 1px solid var(--bp-line, rgba(255, 255, 255, .22));
    border-radius: var(--bp-radius, 12px);
    background: var(--bp-navy, #0B1D33); color: var(--bp-white, #fff);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    font-size: 14px; line-height: 1.4;
}
.be-editor-container .be-upsell[hidden] { display: none; }
.be-editor-container .be-upsell-go {
    flex: none; padding: .55em 1.2em; border: 1px solid var(--bp-line, rgba(255, 255, 255, .22));
    border-radius: var(--bp-radius, 12px);
    background: var(--bp-royal, #1E4C8A); color: var(--bp-white, #fff);
    font-weight: 600; text-decoration: none; transition: background-color .2s ease, color .2s ease;
}
.be-editor-container .be-upsell-go:hover, .be-editor-container .be-upsell-go:focus-visible {
    background: var(--bp-white, #fff); color: var(--bp-navy, #0B1D33);
}
.be-editor-container .be-upsell-close {
    flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px;
    background: transparent; color: var(--bp-ice, #A9C1D9); font-size: 20px; line-height: 1; cursor: pointer;
}

/* Proteção de tela: o editor vira um retângulo branco. */
.be-editor-container.be-plan-free.be-shield { background: #fff !important; }
.be-editor-container.be-plan-free.be-shield * { visibility: hidden !important; }
@media print {
    .be-editor-container.be-plan-free { background: #fff !important; box-shadow: none !important; }
    .be-editor-container.be-plan-free * { visibility: hidden !important; }
}