/* BFMIDI · iPhone redesign — modern iOS dark feel + brand orange */

:root {
  --bg: #131318;
  --screen: #27272d;
  --card: #141418;
  --card-2: #1c1c20;
  --card-3: #232328;
  --hair: rgba(255,255,255,0.07);
  --hair-strong: rgba(255,255,255,0.12);
  --text: #f6f6f8;
  --muted: color-mix(in srgb, var(--text) 60%, transparent);
  --faint: color-mix(in srgb, var(--text) 32%, transparent);
  --ghost: color-mix(in srgb, var(--text) 18%, transparent);
  --accent: #ff6a1f;
  --accent-2: #ff8a3a;
  --accent-hi: #ffc59a;
  --accent-lo: #7c350f;
  /* accent-soft e accent-glow derivados de --accent via color-mix —
     quando --accent muda (sobrescrita pelo tile-color em .bf-screen),
     esses derivados acompanham automaticamente. */
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 55%, transparent);
  --success: #30d158;
  --danger: #ff453a;
  --blue: #0a84ff;

  --font-sys: -apple-system, "SF Pro Display", "SF Pro Text", "Inter Tight", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menasha, monospace;
  --font-display: "Antonio", "SF Pro Display", system-ui, sans-serif;

  /* Escala unica de border-radius — usar em TODO campo, moldura, preview e
     botão pra manter consistência visual. Quem precisar de pill/circular
     usa --r-pill. */
  --r-sm: 8px;     /* chips, inputs pequenos, sigla cells, slots internos */
  --r-md: 14px;    /* botões, selects, fields, tabs, seg-controls */
  --r-lg: 18px;    /* cards grandes, tiles, previews, frames externos */
  --r-pill: 999px; /* pills e elementos circulares retangulares */

  /* ── Bisotê metal escuro (reutilizavel em TODAS as molduras) ──────────
     Receita: borda 2px transparente + camada border-box com este gradiente
     metalico (claro no topo -> escuro no meio -> brilho embaixo) que respeita
     o border-radius; a interior fica em padding-box. O --bevel-relief da o
     relevo (luz no topo, sombra na base). Molduras coloridas (ativo, bank
     tile) usam --bevel-edge-accent. Tune central aqui. */
  --bevel-edge: linear-gradient(155deg, #717480 0%, #3c3e47 24%, #16171c 52%, #2b2d35 76%, #565963 100%);
  --bevel-edge-accent: linear-gradient(155deg, var(--accent-hi) 0%, var(--accent) 45%, var(--accent-lo) 100%);
  --bevel-edge-dim: linear-gradient(155deg, #35373f 0%, #15161a 52%, #26282f 100%);
  --card-texture:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.006) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(45deg, rgba(0,0,0,0.012) 0 1px, transparent 1px 16px),
    radial-gradient(circle at 24% 18%, rgba(255,255,255,0.014) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 72%, rgba(0,0,0,0.055) 0 1px, transparent 2px);
  /* Glow preto em volta de TODAS as molduras. Como `--bevel-relief` entra no
     box-shadow de todo frame do design (cards, tiles, switch de modo, tabbar,
     botoes do header, etc.), embutir o glow aqui aplica em todos de uma vez.
     Ajuste a intensidade na var abaixo: 0 0 BLUR SPREAD cor. */
  --card-glow: 0 0 10px 1px rgba(0,0,0,0.85);
  --bevel-relief: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 1px rgba(0,0,0,0.55), var(--card-glow);

  /* ── Superficies recorrentes (campos / botoes / pills internas) ───────
     Gradiente escuro padrao reutilizado em ~20 componentes (inputs, mode-
     switch, slots, fields, pills). Centralizado aqui pra que o tema claro
     o sobrescreva de uma vez (.bf-screen.is-theme-light / body.is-theme-light)
     em vez de override por classe. No tema escuro o valor e identico ao
     literal antigo. */
  --field-bg: var(--field-bg);
  --field-bg-2: var(--field-bg-2);
}

* { box-sizing: border-box; }
/* Reserva sempre o espaco da barra de rolagem. Sem isso, paginas que
   rolam (com scrollbar) e paginas que cabem na tela (sem scrollbar) tem
   larguras uteis diferentes — e o .phone-frame (margin: 0 auto) "pula"
   ~8px de lado ao navegar entre elas. */
html { scrollbar-gutter: stable; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 700px at 20% -10%, #34343f 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 110%, #342732 0%, transparent 55%),
    #232329;
  color: var(--text);
  font-family: var(--font-sys);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
input.bf-input, select.bf-input {
  font-family: var(--font-mono);
  outline: none;
}
select.bf-input option { background: #141418; color: var(--text); }

/* ---- Screen body shell inside iPhone ---- */
.bf-screen {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--screen);
  color: var(--text);
  font-family: var(--font-sys);
  position: relative;
  overflow: hidden;
}

.bf-screen::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 50% at 50% -10%, var(--screen-glow-a, color-mix(in srgb, var(--accent) 10%, transparent)) 0%, transparent 60%),
    radial-gradient(60% 40% at 100% 100%, var(--screen-glow-b, rgba(10,132,255,0.06)) 0%, transparent 55%);
  pointer-events: none;
}

.bf-content {
  padding: 6px 16px 110px;
  position: relative;
  z-index: 1;
}

/* ---- Header ---- */
.bf-header {
  padding: 8px 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  z-index: 2;
}
.bf-header-preset {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px 10px;
}
.bf-header-preset .bf-title { margin: 0; }
.bf-conn-icons { display: flex; gap: 10px; align-items: center; }
/* Slot central do header (toggle PRESET/LIVE) — escondido no MOBILE; o
   toggle aparece no corpo (.bf-studio-toggle-row-top). No DESKTOP o bloco
   de unificacao (>=900px) reverte pra display:block e centraliza. */
.bf-header-center { display: none; }

/* Toggle AP/STA: pill rectangular com label grande + IP pequeno */
.bf-conn-mode {
  appearance: none;
  /* Bisotê metal escuro: borda metalica (border-box) + disco escuro + relevo.
     Estados INATIVOS (cinza) ficam com border transparente -> mostra o anel
     metalico. Estados ATIVOS (STA/AP/conectado/monitor/INFO) sobrescrevem o
     border-color com a cor de status (opaca, cobre o metalico). */
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, #1e1e23 0%, #141418 100%) padding-box,
    var(--bevel-edge) border-box;
  border-radius: 50%;
  padding: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #9c9ca6;
  font-family: var(--font-mono);
  box-shadow: var(--bevel-relief);
  transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
}
.bf-conn-mode-ico {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  display: block;
}
/* Chips agora sao icon-only — o label fica oculto mas continua acessivel
   por aria-label/title pra leitores de tela e tooltip. */
.bf-conn-mode-label,
.bf-conn-mode-sub { display: none; }
.bf-conn-mode:hover { border-color: #c6c6cf; color: #e6e6ee; }

/* WiFi — cor depende do modo auto-detectado:
   offline = cinza | AP = amarelo | STA = verde. Glow externo preto. */
.bf-conn-wifi { color: #6c6c75; border-color: #6c6c75; }
.bf-conn-wifi.is-online.is-mode-sta {
  color: var(--success);
  border-color: var(--success);
  box-shadow: var(--bevel-relief), 0 0 12px rgba(0,0,0,0.85);
}
.bf-conn-wifi.is-online.is-mode-ap {
  color: #ffcc33;
  border-color: #ffcc33;
  box-shadow: var(--bevel-relief), 0 0 12px rgba(0,0,0,0.85);
}
.bf-conn-wifi.is-loading {
  color: #c6c6cf;
  border-color: transparent;
  animation: bf-conn-pulse 1s ease-in-out infinite;
}
.bf-conn-wifi.is-offline {
  color: #6c6c75;
  border-color: transparent;
}

/* USB — cinza off, azul connected. Glow externo preto. */
.bf-conn-mode.is-connected {
  color: #3aa0ff;
  border-color: #3aa0ff;
  box-shadow: var(--bevel-relief), 0 0 12px rgba(0,0,0,0.85);
}
.bf-conn-mode.is-connecting {
  color: #c6c6cf;
  border-color: transparent;
  animation: bf-conn-pulse 1s ease-in-out infinite;
}
.bf-conn-mode.is-disconnected,
.bf-conn-mode.is-error {
  color: #6c6c75;
  border-color: transparent;
}
.bf-conn-mode.is-unsupported {
  opacity: 0.35;
  cursor: not-allowed;
}
.bf-conn-mode-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
  white-space: nowrap;
}
.bf-conn-mode-sub {
  font-size: 8px;
  letter-spacing: 0.08em;
  opacity: 0.7;
  line-height: 1.1;
}

/* ── Tela inicial de conexao ─────────────────────────────────────────── */
.bf-conn-shell {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 32px 22px;
  min-height: 100%;
  align-items: stretch;
}
.bf-conn-logo {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 0 4px;
}
.bf-conn-logo img {
  border-radius: var(--r-lg);
  box-shadow: 0 6px 22px rgba(0,0,0,0.55), 0 0 0 1px var(--hair);
}
.bf-conn-logo h1 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 6px 0 0;
}
.bf-conn-logo p {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.bf-conn-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bf-conn-section-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: 4px;
}
.bf-conn-option {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 18px;
  background: linear-gradient(180deg, #1a1a1e 0%, #131318 100%);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
.bf-conn-option:hover:not(:disabled) {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft), 0 0 22px var(--accent-glow);
}
.bf-conn-option:active:not(:disabled) { transform: scale(0.99); }
.bf-conn-option:disabled { opacity: 0.55; cursor: not-allowed; }
.bf-conn-option-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
}
.bf-conn-option-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.bf-conn-manual {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.bf-conn-manual .bf-input { height: 48px; }
.bf-conn-go {
  appearance: none;
  border: 0;
  background: var(--accent);
  color: #07140a;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 0 18px;
  border-radius: var(--r-md);
  cursor: pointer;
  min-width: 100px;
}
.bf-conn-go:disabled { opacity: 0.45; cursor: not-allowed; }
.bf-conn-error {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--danger, #ff6b6b);
  background: rgba(255, 107, 107, 0.08);
  border: 1px solid rgba(255, 107, 107, 0.35);
  border-radius: var(--r-md);
  padding: 10px 14px;
  text-align: center;
}
.bf-conn-foot {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: center;
  padding-top: 12px;
}
.bf-conn-icon {
  appearance: none;
  border: 1.5px solid #6c6c75;
  background: transparent;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #9c9ca6;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.2s ease;
}
.bf-conn-icon:hover { border-color: #c6c6cf; color: #e6e6ee; }
.bf-conn-icon.is-online {
  color: var(--success);
  border-color: var(--success);
  box-shadow: 0 0 14px rgba(48, 209, 88, 0.45);
}
.bf-conn-icon.is-loading {
  color: var(--text);
  border-color: var(--hair-strong);
  animation: bf-conn-pulse 1s ease-in-out infinite;
}
.bf-conn-icon.is-offline,
.bf-conn-icon.is-error {
  color: var(--danger, #ff6b6b);
  border-color: var(--danger, #ff6b6b);
}
.bf-conn-icon.is-disconnected {
  /* Estado padrao USB: muted, neutro */
}
.bf-conn-icon.is-connecting {
  color: var(--text);
  border-color: var(--hair-strong);
  animation: bf-conn-pulse 1s ease-in-out infinite;
}
.bf-conn-icon.is-connected {
  color: var(--success);
  border-color: var(--success);
  box-shadow: 0 0 14px rgba(48, 209, 88, 0.45);
}
.bf-conn-icon.is-unsupported {
  opacity: 0.35;
  cursor: not-allowed;
}
@keyframes bf-conn-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.bf-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
}
.bf-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
}
.bf-eyebrow .dot.off { background: var(--faint); box-shadow: none; }
.bf-eyebrow .pill {
  margin-left: auto;
  padding: 3px 8px;
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 0.14em;
}
.bf-title {
  font-family: var(--font-sys);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 6px 0 0;
}
.bf-title .accent { color: var(--accent); }
.bf-subtitle {
  color: var(--muted);
  font-size: 14px;
  margin-top: 4px;
}

/* ---- Card ---- */
.bf-card {
  background:
    var(--card-texture),
    linear-gradient(180deg, rgba(28,28,34,0.92) 0%, rgba(16,16,20,0.92) 100%) padding-box,
    var(--bevel-edge) border-box;
  border-radius: 18px;
  padding: 18px;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  box-shadow:
    var(--bevel-relief),
    0 18px 40px -28px rgba(0,0,0,0.7);
}
.bf-card + .bf-card { margin-top: 14px; }
.bf-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.bf-card-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.bf-card-head .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--faint);
  letter-spacing: 0.1em;
}

/* Section header (group label) */
.bf-section-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 18px 6px 8px;
  display: flex; align-items: center; gap: 8px;
}
.bf-section-label::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent-glow);
}

/* ---- Bank row: tile do bank (esq, span 2 linhas) + 6 presets (3x2) ----
   A coluna 1 (bank) tem o dobro da largura das colunas de preset, entao a
   tile do bank fica aproximadamente quadrada (largura 2X, altura 2X+gap). */
.bf-bank-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 10px;
  margin: 8px 0 18px;
}
.bf-bank-tile {
  grid-column: 1 / 2;
  grid-row: 1 / span 2;
  position: relative;
  border-radius: var(--r-lg);
  /* Bisotê metalico COLORIDO: a borda usa a cor do banco (--tile-color) em
     gradiente metalico (claro -> cor -> escuro). Interior (glow radial +
     base) em padding-box. */
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--tile-color, var(--accent)) 32%, transparent) 0%, transparent 70%) padding-box,
    linear-gradient(180deg, #2a1a10 0%, #18120e 100%) padding-box,
    linear-gradient(155deg, color-mix(in srgb, var(--tile-color, var(--accent)) 72%, #fff 28%) 0%, var(--tile-color, var(--accent)) 46%, color-mix(in srgb, var(--tile-color, var(--accent)) 62%, #000 38%) 100%) border-box;
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-sys);
  overflow: hidden;
  box-shadow: var(--bevel-relief), 0 0 8px rgba(214,216,226,0.08);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.bf-bank-tile .letter {
  display: block;
  font-weight: 700;
  font-size: clamp(72px, 22vw, 150px);
  line-height: 1;
  color: #fff;
  text-shadow:
    0 0 40px color-mix(in srgb, var(--tile-color, var(--accent)) 55%, transparent),
    0 0 80px color-mix(in srgb, var(--tile-color, var(--accent)) 25%, transparent);
  letter-spacing: -0.02em;
  text-align: center;
}
.bf-bank-tile .bf-bank-name {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bf-bank-tile .led {
  position: absolute;
  top: 10px; right: 10px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bank-led, var(--accent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--bank-led, var(--accent)) 55%, transparent);
}
.bf-bank-tile.is-loading .led {
  background: var(--ghost);
  box-shadow: none;
}
.bf-bank-tile.is-error .led {
  background: #e54545;
  box-shadow: 0 0 8px rgba(229,69,69,0.6);
}

.bf-preset {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  /* Bisotê metal escuro: borda em gradiente metalico (claro no topo ->
     escuro no meio -> leve brilho embaixo) via dupla camada padding-box +
     border-box, que respeita o border-radius. Os insets dao o relevo do
     bisel (luz no topo, sombra na base) e a sombra externa "levanta" a peca. */
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, #1b1b20 0%, #121217 100%) padding-box,
    var(--bevel-edge) border-box;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 8px 10px;
  font-family: var(--font-display);
  cursor: pointer;
  box-shadow: var(--bevel-relief), 0 3px 9px rgba(0,0,0,0.55);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.bf-preset .num {
  font-size: clamp(28px, 8vw, 48px);
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-top: 2px;
}
.bf-preset .label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--faint);
  text-transform: uppercase;
}
.bf-preset .led {
  position: absolute;
  top: 8px; right: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  /* A bolinha mostra a cor do LED do banco em TODAS as molduras de preset. */
  background: var(--bank-led, var(--accent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--bank-led, var(--accent)) 55%, transparent);
}
.bf-preset.is-active {
  /* Selecionado = bisotê metalico LARANJA (mantem o destaque do accent). */
  border-color: transparent;
  background:
    linear-gradient(180deg, #2a1a10 0%, #18120e 100%) padding-box,
    var(--bevel-edge-accent) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 0 12px color-mix(in srgb, var(--accent) 35%, transparent),
    0 3px 9px rgba(0,0,0,0.5);
}
/* Preset APAGADO (botoes 5/6 em placas 4S/MICRO): visivel mas escuro/off,
   sem LED nem glow, esmaecido e sem clique. */
.bf-preset.is-disabled {
  cursor: not-allowed;
  border-color: transparent;
  /* Apagado: bisotê bem escuro, sem brilho metalico. */
  background:
    linear-gradient(180deg, #141418 0%, #0c0c0f 100%) padding-box,
    var(--bevel-edge-dim) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  opacity: 0.5;
}
.bf-preset.is-disabled .led { display: none; }
.bf-preset.is-disabled .num,
.bf-preset.is-disabled .label { color: var(--faint); }
.bf-preset.is-disabled:hover { transform: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }

/* ---- Bottom tab bar (fixed inside iPhone) ---- */
.bf-tabbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 496px;
  bottom: 16px;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto auto;
  gap: 6px;
  padding: 8px;
  border-radius: var(--r-lg);
  /* Cor solida vira gradiente solido (so vale crua na ultima camada). */
  background:
    linear-gradient(rgba(20,20,24,0.78), rgba(20,20,24,0.78)) padding-box,
    var(--bevel-edge) border-box;
  border: 2px solid transparent;
  box-shadow: var(--bevel-relief);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
/* "+" e seu popup — botao circular do mesmo tamanho do SAVE, abre um
   menu vertical com COPY PRESET / PASTE PRESET. */
.bf-tabbar-plus-wrap {
  position: relative;
  display: grid;
  place-items: center;
}
.bf-tabbar-plus {
  appearance: none;
  border: 1px solid var(--hair-strong);
  background: var(--card-2);
  color: var(--text);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s ease, color 0.15s ease,
              border-color 0.15s ease, transform 0.08s ease;
}
.bf-tabbar-plus:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.bf-tabbar-plus.is-open {
  background: var(--accent);
  color: #1a0e06;
  border-color: var(--accent);
}
.bf-tabbar-plus.is-flash-ok {
  background: var(--success);
  color: #0a1a0c;
  border-color: var(--success);
}
.bf-tabbar-plus.is-flash-err {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
.bf-tabbar-plus.is-busy { opacity: 0.65; }
.bf-tabbar-plus-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  /* Fundo SOLIDO (sem transparencia): o popup precisa cobrir o conteudo atras.
     Antes usava var(--field-bg-2), que esta quebrada (auto-referencia no :root
     escuro -> resolve vazio -> background transparente). Cor solida fixa. */
  background: var(--card-2);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-md);
  padding: 6px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6),
              0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 31;
  animation: bf-pop-in-center 0.14s ease;
}
.bf-tabbar-plus-item {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.bf-tabbar-plus-item:hover {
  background: rgba(255, 165, 0, 0.10);
  color: var(--accent);
}
.bf-tabbar-plus-item em {
  font-style: normal;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-left: auto;
  font-size: 11px;
}
.bf-tabbar-plus-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.bf-tabbar-plus-item:disabled:hover {
  background: transparent;
  color: var(--text);
}
.bf-tabbar-plus-sep {
  height: 1px;
  background: var(--hair);
  margin: 4px 2px;
}

/* Backup/Restore — barra de progresso. Modo determinado: fill cresce
   conforme pct; indeterminado: animacao deslizante laranja. */
.bf-backup-progress {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bf-backup-progress-track {
  width: 100%;
  height: 10px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, #0f0f12 0%, #1a1a1f 100%);
  border: 1px solid var(--hair);
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}
.bf-backup-progress-fill {
  height: 100%;
  background: linear-gradient(90deg,
    rgba(255, 165, 0, 0.85) 0%, #ff9d3a 100%);
  border-radius: var(--r-pill);
  box-shadow: 0 0 8px rgba(255, 140, 0, 0.5);
  transition: width 0.18s ease;
}
.bf-backup-progress-fill.is-indeterminate {
  width: 30%;
  animation: bf-backup-pulse 1.1s ease-in-out infinite;
}
@keyframes bf-backup-pulse {
  0%   { margin-left: -32%; }
  100% { margin-left: 102%; }
}
.bf-backup-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.bf-backup-progress-bytes {
  color: var(--accent);
  font-weight: 700;
}
.bf-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  height: 48px;
  border-radius: var(--r-lg);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  display: grid; place-items: center;
  cursor: pointer;
}
.bf-tab.is-active {
  background: var(--card-2);
  color: var(--text);
}
.bf-tab.is-active.preset_config,
.bf-tab.is-active.global_config,
.bf-tab.is-active.system_config {
  background: var(--accent);
  color: #1a0e06;
}
.bf-save {
  appearance: none;
  border: 0;
  height: 48px;
  min-width: 56px;
  padding: 0 14px;
  border-radius: var(--r-lg);
  background: var(--text);
  color: #0c0c10;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  display: grid; place-items: center;
  cursor: pointer;
}

/* ---- Brightness: bola com % a esquerda + trilho a direita ---- */
.bf-brightness {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}
/* Agrupa o numero (circulo) + unidade "%". No mobile fica inline (row),
   no desktop vira o bloco superior do card empilhado. */
.bf-brightness-top {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.bf-brightness-circle {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 2px solid var(--hair-strong);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  line-height: 1;
}
.bf-brightness-circle .v {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  /* numerais display tem cap-height alta — em grid place-items: center
     o glyph fica deslocado pra baixo do meio visual; -2px sobe pra ficar
     opticamente centrado no circulo. */
  margin-top: -2px;
  text-align: center;
}
.bf-brightness-unit {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.08em;
  margin-right: 4px;
  flex-shrink: 0;
}

.bf-slider {
  position: relative;
  flex: 1;
  height: 64px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #0e0e12 0%, #16161a 100%);
  border: 1px solid var(--hair);
  overflow: hidden;
  min-width: 0;
}
.bf-slider-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 20%, transparent),
    color-mix(in srgb, var(--accent) 70%, transparent));
  border-right: 1px solid var(--accent);
  box-shadow: 0 0 32px var(--accent-glow);
}
.bf-slider-ticks {
  position: absolute;
  inset: 0 12px;
  display: flex; align-items: flex-end;
  gap: 0;
  pointer-events: none;
}
.bf-slider-ticks .t {
  flex: 1;
  height: 8px;
  border-right: 1px solid var(--hair);
}
.bf-slider-ticks .t:nth-child(5n) { height: 14px; border-color: var(--hair-strong); }
.bf-slider-ticks .t:last-child { border-right: 0; }

/* LED preview strip */
.bf-led-strip {
  display: flex; gap: 8px;
  margin-top: 14px;
  padding: 14px;
  background: var(--card-2);
  border-radius: var(--r-md);
  align-items: center;
}
.bf-led-strip-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.18em;
  margin-right: auto;
}
.bf-led-strip .led-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent);
}

/* ---- Toggle / Switch (iOS-style) ---- */
.bf-switch {
  appearance: none;
  width: 50px; height: 30px;
  border-radius: var(--r-pill);
  background: var(--card-3);
  border: 0;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.bf-switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  transition: transform 0.2s ease;
}
.bf-switch.is-on { background: var(--success); }
.bf-switch.is-on.is-accent { background: var(--accent); box-shadow: 0 0 18px var(--accent-glow); }
.bf-switch.is-on::after { transform: translateX(20px); }

/* ---- Segmented control ---- */
.bf-seg {
  display: flex;
  background: var(--card-2);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 0;
}
.bf-seg button {
  flex: 1;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  height: 34px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}
.bf-seg button.is-active {
  background: var(--accent);
  color: #1a0e06;
  box-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

/* Toggle PRESET MODE / LIVE MODE — fica entre a selecao de banco/preset
   e o card SET PRESET. Mantem o FORMATO do .bf-seg (dois botoes lado a
   lado) mas com o VISUAL dos botoes de preset (.bf-preset): cada botao e
   um card de gradiente escuro + borda hair + glow preto; o ativo ganha
   borda e fundo tingidos de accent. A margem inferior espelha o gap do
   .bf-bank-row pra manter o ritmo vertical da pagina. */
.bf-mode-switch {
  margin: 0 0 18px;
  background: transparent;  /* tira o "track" do .bf-seg */
  padding: 0;
  gap: 10px;                /* mesmo gap do .bf-bank-row */
}
.bf-mode-switch button {
  height: 44px;
  font-size: 12px;
  color: var(--muted);
  background: var(--field-bg);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  box-shadow: 0 0 6px rgba(214,216,226,0.12), 0 0 12px rgba(214,216,226,0.05);
}
.bf-mode-switch button.is-active {
  color: var(--text);
  border-color: var(--tile-color, var(--accent));
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--tile-color, var(--accent)) 32%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, #2a1a10 0%, #18120e 100%);
  box-shadow: 0 0 6px rgba(214,216,226,0.12), 0 0 12px rgba(214,216,226,0.05);
}

/* LAYER 1 / LAYER 2 — alterna qual conjunto de funcoes de SW esta sendo
   editado no preset atual. Mesma altura/peso visual do .bf-mode-switch
   (PRESET/LIVE MODE) — no desktop ficam lado a lado via grid do
   .bf-content. LAYER 2 desabilitado se globalLayer2 estiver OFF. */
.bf-layer-switch-wrap { margin-top: -8px; }
.bf-layer-switch { margin-bottom: 14px; }
.bf-seg.bf-layer-switch button {
  height: 44px;
  font-size: 12px;
  letter-spacing: 0.16em;
}
.bf-layer-switch button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Botaozinho redondo entre PRESET MODE e LIVE MODE — alterna sync com a
   controladora. Sobreposto no centro do .bf-mode-switch (z-index acima
   dos dois botoes grandes). Ativo = laranja accent; inativo = mudo. */
.bf-mode-switch-wrap { position: relative; }
.bf-mode-sync {
  position: absolute;
  left: 50%;
  top: calc(50% - 9px);  /* compensa o margin-bottom 18px do .bf-mode-switch */
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--hair);
  background: var(--field-bg);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  box-shadow: 0 0 0 3px var(--bg, #0c0c10), 0 2px 8px rgba(0,0,0,0.55);
  transition: all 0.15s ease;
}
.bf-mode-sync svg { width: 16px; height: 16px; }
.bf-mode-sync.is-active {
  background: var(--accent);
  color: #1a0e06;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--bg, #0c0c10), 0 0 10px var(--accent-glow);
}

/* Chip MON (MONITOR) na linha de chips do header — alterna o painel
   MONITOR no fim da pagina. Inativo = cinza. Ativo = cor do bank atual
   (--tile-color, mesmo accent dos botoes de preset selecionado). Glow
   externo preto. */
.bf-conn-mode.bf-conn-monitor { color: #6c6c75; border-color: #6c6c75; }
.bf-conn-mode.bf-conn-monitor.is-active {
  color: var(--tile-color, var(--accent));
  border-color: var(--tile-color, var(--accent));
  box-shadow: var(--bevel-relief), 0 0 12px rgba(0,0,0,0.85);
}

/* Toggle de tema (sol/lua) no header, ao lado do MONITOR MIDI. O icone e o
   estado: SOL = tema escuro ativo (clique -> claro); LUA = tema claro ativo
   (clique -> escuro). Disco igual aos irmaos; so a cor do icone muda. */
.bf-conn-mode.bf-conn-theme { color: #e0a44a; border-color: #6c6c75; }
.bf-conn-mode.bf-conn-theme:hover { color: #ffc370; border-color: #c6c6cf; }
.bf-conn-mode.bf-conn-theme.is-light {
  color: #5b8fd6;
  border-color: #5b8fd6;
}

/* ---- LIVE MODE: grade de switches SW1..SW6 + card de config ---- */
.bf-sw-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
/* O tile preview vem com size=120px hardcoded (inline) do React. Aqui forcamos
   ele a preencher a celula 1fr do grid em QUALQUER largura (mobile e desktop),
   pra que os 6 SW fiquem com espacamento uniforme. Sem isso, no desktop o tile
   fixo de 120px fica centralizado numa celula flexivel = distribuicao torta. */
.bf-sw-row .bf-sw-tile {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1;
}
.bf-sw-row .bf-sw-icon-img {
  width: 80% !important;
  height: auto !important;
  aspect-ratio: 95 / 72;
}
.bf-sw-btn {
  appearance: none;
  border: 1px solid var(--hair);
  background: var(--field-bg);
  color: var(--text);
  border-radius: var(--r-md);
  padding: 12px 6px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(214,216,226,0.12), 0 0 12px rgba(214,216,226,0.05);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.bf-sw-btn .bf-tab-ico { width: 34px; height: 34px; }
.bf-sw-btn-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.bf-sw-btn:hover { border-color: var(--hair-strong); }
.bf-sw-btn.is-active {
  border-color: var(--tile-color, var(--accent));
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--tile-color, var(--accent)) 32%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, #2a1a10 0%, #18120e 100%);
}

/* Card de config do SW — 2 icones (engrenagem | display) no topo-esquerda */
.bf-sw-card {
  margin-top: 18px;
  background:
    linear-gradient(180deg, #1a1a1e 0%, #131318 100%) padding-box,
    var(--bevel-edge) border-box;
  border: 2px solid transparent;
  border-radius: var(--r-lg);
  padding: 20px 22px 22px;
  box-shadow: var(--bevel-relief), 0 3px 12px rgba(0,0,0,0.4);
}
/* Navegacao SW 1..N no topo do editor (MOBILE) — substitui o grid de
   miniaturas. Botoes pequenos, o ativo destacado na cor do accent. No
   desktop e escondida (o SwPreviewGrid da direita faz a selecao). */
.bf-sw-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.bf-sw-nav-btn {
  appearance: none;
  flex: 1 1 0;
  min-width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--hair-strong, rgba(255,255,255,0.14));
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  color: var(--muted, #9c9ca6);
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.15s ease;
}
.bf-sw-nav-btn:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.bf-sw-nav-btn.is-active {
  color: var(--accent);
  border-color: var(--accent);
  background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.bf-sw-nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bf-sw-card-tabs {
  position: relative;       /* ancora a miniatura do icone (mobile) */
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 16px;
  padding-right: 116px;     /* reserva o espaco da miniatura (mobile) */
  margin-bottom: 18px;
  border-bottom: 1px solid var(--hair);
}
/* Miniatura do icone do SW (SO MOBILE) — canto sup. direito da area de abas.
   Substitui a aba DISPLAY; clique abre as opcoes de edicao do icone. */
.bf-sw-icon-thumb {
  position: absolute;
  /* Alinha verticalmente ao bloco de conteudo (iconrow + mode-field): do topo
     ate logo acima do padding-bottom (16px) do .bf-sw-card-tabs. Centraliza a
     miniatura nesse intervalo pra encaixar com as duas linhas a esquerda. */
  top: 0;
  bottom: 16px;
  right: 0;
  width: 100px;
  display: flex; align-items: center; justify-content: center;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border-radius: 16px;
  transition: transform 0.1s ease, box-shadow 0.2s ease;
}
.bf-sw-icon-thumb:hover {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent);
}
.bf-sw-icon-thumb.is-active {
  box-shadow: 0 0 0 2px var(--accent), 0 0 16px -2px color-mix(in srgb, var(--accent) 60%, transparent);
}
.bf-sw-icon-thumb:active { transform: translateY(1px); }
.bf-sw-icon-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Linha de cima do card de SW: os icones (engrenagem / display / copy /
   paste). O campo do modo (STOMP) vai sozinho na linha de baixo. */
.bf-sw-card-iconrow {
  display: flex;
  gap: 8px;
}
/* No layout em coluna o mode-field ocupa a linha toda com altura fixa
   (sem o flex:1 herdado, que colapsaria a altura na vertical). */
.bf-sw-card-tabs > .bf-sw-mode-field {
  flex: 0 0 auto;
  width: 100%;
}
.bf-sw-card-tab {
  appearance: none;
  border: 1px solid var(--hair);
  background: var(--field-bg);
  color: var(--text);
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-shadow: 0 0 6px rgba(214,216,226,0.12), 0 0 12px rgba(214,216,226,0.05);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.bf-sw-card-tab:hover { border-color: var(--hair-strong); }
.bf-sw-card-tab.is-active {
  border-color: var(--tile-color, var(--accent));
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--tile-color, var(--accent)) 32%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, #2a1a10 0%, #18120e 100%);
}
.bf-sw-card-tab .bf-tab-ico { width: 30px; height: 30px; }

/* COPY / PASTE — 2 botoes lado a lado, cada um do mesmo tamanho (52x52)
   que um tab (engrenagem / display). */
.bf-sw-card-copypaste {
  display: flex;
  flex-direction: row;
  gap: 8px;
  flex: 0 0 auto;
}
.bf-sw-card-cp {
  appearance: none;
  width: 52px;
  height: 52px;
  border: 1px solid var(--hair);
  background: var(--field-bg);
  color: var(--text);
  border-radius: var(--r-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
  transition: border-color 0.15s ease, background 0.15s ease,
              color 0.15s ease, transform 0.08s ease;
}
.bf-sw-card-cp .bf-tab-ico { width: 30px; height: 30px; }
.bf-sw-card-cp:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.bf-sw-card-cp:active:not(:disabled) { transform: scale(0.96); }
.bf-sw-card-cp:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.bf-sw-card-cp.is-flash {
  border-color: var(--success);
  color: var(--success);
  background: linear-gradient(180deg, rgba(80, 220, 120, 0.20) 0%,
                                       rgba(80, 220, 120, 0.06) 100%);
}
.bf-sw-card-body {
  /* Vazio por enquanto na aba engrenagem; min-height mantem a forma do
     card enquanto as configs de cada modo nao chegam. */
  min-height: 200px;
}
.bf-sw-card-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Editor de params do STOMP 1 (aba engrenagem). Reusa bf-extras-row /
   bf-extras-cell, mas sem a coluna do indice — duas colunas iguais. */
.bf-sw-fx1 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 2px;
}
.bf-sw-fx1 .bf-extras-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 12px;
}
.bf-sw-fx1 .bf-extras-row.bf-extras-row-full {
  grid-template-columns: minmax(0, 1fr);
}
.bf-sw-fx1 .bf-extras-cell .bf-input,
.bf-sw-fx1 .bf-input-num {
  min-height: 58px;
}
/* Linha MIDI TEST + preview do LED — botao a esquerda, FootswitchArc a
   direita, alinhados pelo centro vertical. */
.bf-sw-fx1 .bf-extras-row.bf-sw-fx1-test {
  align-items: center;
  margin-top: 6px;
}
/* Wrapper do FootswitchArc: centraliza e atenua quando o teste esta OFF
   (preview do estado on/off do STOMP). */
.bf-sw-fx1-led {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  transition: opacity 0.15s ease;
}
/* Preview do LED no mesmo visual "studio" da tela GLOBAL: tile com moldura
   + gradiente sutil, knob ao centro e o rotulo LED embaixo (a CSS do studio
   so alcanca .bf-content-global/-system, entao replicamos aqui pro editor
   de SW na pagina de preset). */
.bf-sw-fx1-led .bf-fsw {
  padding: 12px 18px 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  gap: 8px;
}
.bf-sw-fx1-led .bf-fsw-glyph {
  width: 64px;
  height: 64px;
}
.bf-sw-fx1-led.is-off { opacity: 0.35; }
/* Quando o preview ocupa a linha sozinho (sem botao TEST/PULSE/SWEEP ao
   lado), centraliza o tile no full width em vez de flutuar na coluna
   esquerda do grid 2-col. */
.bf-sw-fx1 .bf-extras-row.bf-sw-fx1-test .bf-sw-fx1-led:only-child {
  grid-column: 1 / -1;
}
/* Botões toggle (CUSTOM, START ON/OFF): apagados por padrão,
   "acendem" em laranja quando ativos. */
.bf-sw-fx1 .bf-input-num.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow), 0 8px 24px -10px var(--accent-glow);
}

/* MACROS — cada slot e um cartao com cabecalho horizontal (numero + SEND
   CC/PC + canal) e uma linha de campos abaixo. Mais compacto que
   stackear cada controle. */
.bf-sw-macros .bf-macros-slot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  margin: 4px 0;
  background: linear-gradient(180deg, #16161a 0%, #101013 100%);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
}
.bf-sw-macros .bf-macros-slot-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
/* Bola branca com numero preto — padrao pra TODOS os indices de slot
   (MACROS, TAP TEMPO, MOMENTARY). Override scoped (.bf-sw-tap ... )
   abaixo pra ajustes especificos onde necessario. */
.bf-macros-slot-idx {
  align-self: center;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, #d8d8d8 100%);
  border: 1px solid rgba(0, 0, 0, 0.20);
  color: #0a0a0c;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  padding: 0;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45),
              inset 0 -1px 1px rgba(0, 0, 0, 0.12);
}
/* Toggle SEND CC / SEND PC — botao unico que alterna. CC = ciano, PC =
   verde. Visual diferente pra ficar facil distinguir o tipo de mensagem. */
/* Sem escopo .bf-sw-macros: o mesmo toggle aparece no STOMP (.bf-sw-fx1),
   MACROS e SINGLE — todos compartilham a cor. CC = ciano, PC = verde. */
.bf-macros-slot-type {
  height: 40px;
  min-height: 40px;
  font-size: 11px;
  letter-spacing: 0.16em;
}
.bf-macros-slot-type.is-cc {
  background: color-mix(in srgb, #22d3ee 16%, transparent);
  border-color: #22d3ee;
  color: #22d3ee;
  box-shadow: 0 0 0 1px color-mix(in srgb, #22d3ee 40%, transparent);
}
.bf-macros-slot-type.is-pc {
  background: color-mix(in srgb, #2ecc71 18%, transparent);
  border-color: #2ecc71;
  color: #2ecc71;
  box-shadow: 0 0 0 1px color-mix(in srgb, #2ecc71 40%, transparent);
}
.bf-sw-macros .bf-macros-slot-ch .bf-select { height: 40px; }
/* Campos do slot (CC#/ON/OFF ou PC ON/PC OFF) em uma linha so. */
.bf-sw-macros .bf-macros-slot-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.bf-sw-macros .bf-macros-slot-fields.is-pc {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* START ON/OFF disabled quando AGUARDA LIVE (at_preset=0) */
.bf-sw-macros .bf-input-num[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
}

/* TAP TEMPO — slot simples (so idx + CC + canal numa linha). */
.bf-sw-tap .bf-tap-slot {
  padding: 8px 12px;
}
/* Altura padronizada de 36px em TODOS os campos dos editores de SW
   (todos modos: STOMP, MACROS, SINGLE, MOMENTARY, TAP TEMPO, SPIN, RAMP)
   pra alinhar com a bola do indice e dar consistencia visual.
   Atinge selects + inputs (text/number) + botoes-toggle (.bf-input-num
   que sao botoes de estado tipo START ON / AT_PRESET / CUSTOM / MODE).
   Os botoes de ACAO (TEST, FIRE, PULSE, TAP, SWEEP, SPIN, FAVORITE)
   ficam fora porque dividem linha com o LED de 72px — manter altura
   maior pra equilibrio visual. */
.bf-sw-fx1 .bf-extras-row:not(.bf-sw-fx1-test) .bf-input,
.bf-sw-fx2 .bf-extras-row:not(.bf-sw-fx1-test) .bf-input,
.bf-sw-fx1 .bf-tap-slot-row .bf-input,
.bf-sw-fx2 .bf-tap-slot-row .bf-input,
.bf-sw-tap .bf-tap-mode-btn,
.bf-tap-action {
  min-height: 36px;
  height: 36px;
}
/* Campos do MACROS slot tinham override de 40px — alinha com 36. */
.bf-sw-macros .bf-macros-slot-fields .bf-input,
.bf-sw-macros .bf-macros-slot-fields .bf-select {
  min-height: 36px;
  height: 36px;
}
.bf-sw-tap .bf-tap-slot-row {
  grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}
/* MOMENTARY slot em 2 linhas: CC + Canal em cima, ON + OFF embaixo. Sem
   a bola numerada — o titulo "Slot N" fica em cima da moldura, entao os
   2 campos ocupam toda a largura e os valores ON/OFF alinham sob CC/Canal. */
.bf-sw-tap .bf-tap-slot-row.bf-mom-slot-row,
.bf-sw-tap .bf-tap-slot-row.bf-mom-slot-row2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: end;
}
/* Titulo escrito em cima da moldura de cada slot (MOMENTARY, MACROS). */
.bf-slot-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
  margin: 0 0 2px 2px;
}
/* Slot do TAP em 2 linhas: CC + Canal em cima, MODE embaixo ocupando a
   largura dos 2 campos. Sem a bola numerada — o titulo "Slot N" fica em
   cima da moldura, entao os campos ocupam toda a largura. */
.bf-sw-tap .bf-tap-slot-row.bf-tap-cc-row,
.bf-sw-tap .bf-tap-slot-row.bf-tap-mode-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: end;
}
.bf-sw-tap .bf-tap-slot-row.bf-tap-mode-row .bf-tap-mode-btn {
  grid-column: 1 / 3;
}
/* Slot fixo de LONG PRESS — visualmente destacado dos slots de tap.
   Em 2 linhas: CC + Canal em cima, ON + OFF embaixo (cada linha = 2
   campos lado a lado, sem aperto). */
.bf-sw-tap .bf-tap-lp-slot {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255, 165, 0, 0.30);
  background: linear-gradient(180deg, rgba(255, 165, 0, 0.04) 0%,
                                       rgba(255, 140, 0, 0.00) 100%);
}
.bf-sw-tap .bf-tap-lp-slot .bf-tap-slot-row.bf-tap-lp-row,
.bf-sw-tap .bf-tap-lp-slot .bf-tap-slot-row.bf-tap-lp-row2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}
.bf-tap-lp-label {
  color: var(--accent) !important;
  font-weight: 800;
  letter-spacing: 0.10em;
}
.bf-tap-lp-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
  margin: 0 0 10px 2px;
}
.bf-tap-mode-btn {
  appearance: none;
  align-self: end;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hair);
  background: var(--field-bg);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease,
              box-shadow 0.15s ease, background 0.15s ease,
              transform 0.08s ease;
}
.bf-tap-mode-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.08);
}
.bf-tap-mode-btn:active {
  transform: scale(0.97);
}
/* SPIN — fader full-width de um VAL (compartilhado pelas linhas do
   ciclo via .bf-spin-cyc-slider, que so troca o background). */
.bf-spin-slider {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 10px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent), var(--accent-glow, var(--accent)));
  accent-color: var(--accent);
  outline: none;
  cursor: pointer;
  margin: 4px 0;
}
.bf-spin-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff 0%, #ddd 100%);
  border: 2px solid var(--accent);
  cursor: pointer;
  box-shadow: 0 0 10px rgba(255, 165, 0, 0.55),
              0 2px 4px rgba(0, 0, 0, 0.4);
  transition: transform 0.08s ease;
}
.bf-spin-slider::-webkit-slider-thumb:hover { transform: scale(1.08); }
.bf-spin-slider::-webkit-slider-thumb:active { transform: scale(1.12); }
.bf-spin-slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff 0%, #ddd 100%);
  border: 2px solid var(--accent);
  cursor: pointer;
  box-shadow: 0 0 10px rgba(255, 165, 0, 0.55),
              0 2px 4px rgba(0, 0, 0, 0.4);
}

/* ── SW editor · card studio generico ─────────────────────────────────
   Card "studio" reutilizavel pelos editores de SW (SPIN, TAP, etc.):
   gradiente sutil + borda hair + head com titulo (Antonio) e eyebrow
   (mono). Vale em todas as larguras — o editor de SW e o mesmo
   componente no mobile e no desktop. */
.bf-sw-studio {
  background: linear-gradient(180deg, rgba(255,255,255,0.028) 0%, rgba(255,255,255,0.008) 100%);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-lg);
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bf-sw-studio-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.bf-sw-studio-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
}
.bf-sw-studio-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ── SPIN · redesign studio (usa .bf-sw-studio) ───────────────────────── */
.bf-sw-spin .bf-spin-tabs { margin: 0 0 2px; }

/* Linha de um estado do ciclo: [PX n] [select] [slider] [pct] */
.bf-spin-cyc-row {
  display: grid;
  grid-template-columns: auto minmax(72px, 96px) 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.bf-spin-cyc-row.is-active {
  border-color: var(--accent-glow);
  background: var(--accent-soft);
}
.bf-spin-cyc-px {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease;
}
.bf-spin-cyc-row.is-active .bf-spin-cyc-px { color: var(--accent-2); }
.bf-spin-cyc-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--hair-strong);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.bf-spin-cyc-row.is-active .bf-spin-cyc-dot {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}
.bf-spin-cyc-sel { min-width: 0; }
.bf-spin-cyc-sel .bf-input.bf-select {
  width: 100%;
  min-height: 42px;
  font-size: 15px;
  font-weight: 700;
}
/* Slider com preenchimento laranja ate o thumb (var --pct vem do JSX). */
.bf-spin-cyc-slider {
  margin: 0;
  background: linear-gradient(90deg,
    var(--accent) 0%,
    var(--accent-2) var(--pct, 50%),
    rgba(255,255,255,0.08) var(--pct, 50%),
    rgba(255,255,255,0.08) 100%);
}
.bf-spin-cyc-pct {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text);
  min-width: 44px;
  text-align: right;
}

/* AT_PRESET — toggle dentro do card de ciclo */
.bf-spin-atpreset { margin-top: 4px; }

/* LED card — tile do FootswitchArc a esquerda + descricao a direita */
.bf-spin-led-body {
  display: flex;
  align-items: center;
  gap: 14px;
}
.bf-spin-card-led .bf-sw-fx1-led {
  min-height: 0;
  flex-shrink: 0;
}
.bf-spin-led-desc {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 520px) {
  .bf-spin-cyc-row {
    grid-template-columns: auto minmax(62px, 80px) 1fr auto;
    gap: 8px;
    padding: 7px 6px;
  }
  .bf-spin-cyc-px { font-size: 11px; letter-spacing: 0.06em; }
  .bf-spin-cyc-sel .bf-input.bf-select { font-size: 14px; }
  .bf-spin-cyc-pct { font-size: 13px; min-width: 36px; }
}

/* ── SW editor · card "Opções" (toggles iOS + tile de LED) ─────────────
   Coluna de toggles a esquerda + tile do FootswitchArc a direita. Usado
   no LONG PRESS do TAP TEMPO (Começa ON / Dispara no preset). */
.bf-sw-opt-body {
  display: flex;
  align-items: stretch;
  gap: 14px;
}
.bf-sw-opt-toggles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bf-sw-opt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}
.bf-sw-opt-row + .bf-sw-opt-row { border-top: 1px solid var(--hair); }
.bf-sw-opt-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.bf-sw-opt-name {
  font-family: var(--font-sys);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.bf-sw-opt-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
/* tile do LED dentro do card de opcoes */
.bf-sw-opt-led {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.bf-sw-opt-led .bf-sw-fx1-led { min-height: 0; }

/* iOS toggle switch — atomo reutilizavel (.bf-toggle). off = trilho
   escuro + knob a esquerda; on = trilho laranja + knob a direita. */
.bf-toggle {
  appearance: none;
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative;
  width: 52px;
  height: 30px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hair-strong);
  background: #2a2a30;
  cursor: pointer;
  padding: 0;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.bf-toggle-knob {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff 0%, #d6d6dd 100%);
  transform: translateY(-50%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.45);
  transition: left 0.18s ease, background 0.18s ease;
}
.bf-toggle.is-on {
  background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
  border-color: var(--accent);
  box-shadow: 0 0 12px -2px var(--accent-glow);
}
.bf-toggle.is-on .bf-toggle-knob {
  left: calc(100% - 24px - 3px);
  background: #fff;
}
.bf-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* tile FAVORITO dentro do card de opcoes (so STOMP) — espelha o visual
   do tile do LED (.bf-sw-fx1-led .bf-fsw): moldura + gradiente sutil,
   estrela ao centro e rotulo embaixo. Resting = estrela laranja vazada;
   ativo = estrela preenchida + glow. */
.bf-sw-opt-fav {
  appearance: none;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bf-sw-opt-fav-ico {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linejoin: round;
  opacity: 0.85;
  transition: fill 0.15s ease, opacity 0.15s ease, filter 0.15s ease;
}
.bf-sw-opt-fav-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.bf-sw-opt-fav:hover { border-color: var(--hair-strong); }
.bf-sw-opt-fav:hover .bf-sw-opt-fav-ico { opacity: 1; }
.bf-sw-opt-fav.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 14px -4px var(--accent-glow);
}
.bf-sw-opt-fav.is-active .bf-sw-opt-fav-ico {
  fill: var(--accent);
  opacity: 1;
  filter: drop-shadow(0 0 6px var(--accent-glow));
}
.bf-sw-opt-fav.is-active .bf-sw-opt-fav-label { color: var(--accent); }
.bf-sw-opt-fav:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .bf-sw-opt-name { font-size: 14px; }
  /* card com 3 colunas (STOMP: toggles + FAVORITO + LED) quebra no mobile:
     toggles ocupam a linha inteira e os 2 tiles dividem a linha de baixo. */
  .bf-sw-opt-body.has-fav { flex-wrap: wrap; }
  .bf-sw-opt-body.has-fav .bf-sw-opt-toggles { flex-basis: 100%; }
  .bf-sw-opt-body.has-fav .bf-sw-opt-fav,
  .bf-sw-opt-body.has-fav .bf-sw-opt-led { flex: 1; }
}

/* FAVORITE — picker no estilo da pagina GLOBAL (.bf-seg + .bf-cycle).
   Stack vertical com toggle BANK/LIVE em cima e os 2 cards grandes
   (BANK + PRESET) embaixo. */
.bf-fav-picker {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 4px 0 8px;
}

/* (FAVORITE botao/estrela inline + .bf-stomp-test-row foram substituidos
   pelo card "Opções" — ver .bf-sw-opt-fav acima.) */

/* RAMP — SUBIDA / DESCIDA na mesma linha (grid 1fr 1fr); cada coluna
   empilha input em cima + fader embaixo. */
.bf-ramp-time-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 10px 0;
}
.bf-ramp-time-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.bf-ramp-time-col .bf-extras-cell { width: 100%; }
.bf-ramp-time-col .bf-extras-cell .bf-input { width: 100%; }
.bf-ramp-time-slider { margin: 2px 0 0; }

/* RAMP — linha de botoes segmented (CURVA / TRIGGER) — divide largura
   igualmente entre todos os botoes. */
.bf-ramp-segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
}
.bf-ramp-segmented .bf-input-num {
  min-height: 38px;
  font-size: 11px;
  padding: 0 6px;
}
.bf-sw-ramp .bf-extras-cell input[type="number"] {
  font-variant-numeric: tabular-nums;
}
.bf-tap-mode-btn.is-mode-2 {
  border-color: var(--accent);
  color: var(--accent);
  background: linear-gradient(180deg, rgba(255, 165, 0, 0.18) 0%,
                                       rgba(255, 140, 0, 0.06) 100%);
  box-shadow: 0 0 0 1px rgba(255, 165, 0, 0.20) inset;
}

/* SINGLE — botao + na ponta inferior direita da pilha de slots: revela
   o proximo slot ate totalizar 4. Esconde quando todos visiveis. */
.bf-sw-single .bf-single-add-row {
  display: flex;
  justify-content: flex-end;
  margin: 6px 2px 2px;
}
.bf-sw-single .bf-single-add {
  appearance: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 165, 0, 0.45);
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 165, 0, 0.10), transparent 70%),
    var(--field-bg);
  color: var(--accent);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
              0 2px 6px rgba(0, 0, 0, 0.35);
  transition: border-color 0.15s ease, color 0.15s ease,
              box-shadow 0.15s ease, transform 0.08s ease;
}
.bf-sw-single .bf-single-add:hover {
  border-style: solid;
  border-color: var(--accent);
  color: #ffd089;
  box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.10),
              0 2px 8px rgba(255, 140, 0, 0.25);
}
.bf-sw-single .bf-single-add:active {
  transform: scale(0.94);
}

/* TAP TEMPO — par de botoes ADD TAP / REMOVE alinhado a direita, no mesmo
   visual dos campos (mesma altura/borda/font) pra ficar harmonioso. */
.bf-tap-slot-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 12px 2px 2px;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
}
.bf-tap-action {
  appearance: none;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hair);
  background: var(--field-bg);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease,
              box-shadow 0.15s ease, transform 0.08s ease;
}
.bf-tap-action:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.08);
}
.bf-tap-action:active {
  transform: scale(0.97);
}
.bf-tap-action-add {
  border-style: dashed;
  border-color: rgba(255, 165, 0, 0.45);
  color: var(--accent);
}
.bf-tap-action-add:hover {
  border-style: solid;
}
.bf-tap-action-remove:hover {
  border-color: #ff6b6b;
  color: #ff8b8b;
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.10);
}
.bf-sw-macros .bf-macros-slot-fields .bf-input,
.bf-sw-macros .bf-macros-slot-fields .bf-select {
  min-height: 40px;
}

/* STOMP 2 (fx2): toggle segmentado CLICK CURTO / CLICK LONGO no topo, e
   abaixo a secao ativa (mesmo layout do STOMP 1 / .bf-sw-fx1). Mostra so
   uma secao por vez pra nao alongar o card. */
.bf-sw-fx2 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bf-sw-fx2-tabs { margin: 2px 0 0; }

/* Grade dos modos de operacao de SW — chips horizontais compactos,
   mesmo visual do botao "TAP TEMPO" no header do card (icone a esquerda
   + label). 2 colunas pra caber no popup. */
.bf-sw-mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.bf-sw-mode {
  appearance: none;
  border: 1px solid var(--hair);
  background: var(--field-bg);
  color: var(--text);
  border-radius: var(--r-md);
  padding: 16px 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 64px;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(0,0,0,0.45);
  transition: border-color 0.15s ease, background 0.15s ease;
  text-align: center;
}
.bf-sw-mode:hover { border-color: var(--hair-strong); }
.bf-sw-mode.is-active {
  border-color: var(--tile-color, var(--accent));
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--tile-color, var(--accent)) 22%, transparent) 0%, transparent 75%),
    linear-gradient(180deg, #2a1a10 0%, #18120e 100%);
}
.bf-sw-mode .bf-tab-ico {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.bf-sw-mode-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Subtitulo escondido no chip compacto — title ja basta pra identificar */
.bf-sw-mode-sub { display: none; }

/* Header do card: campo do modo atual à esquerda dos icones de aba.
   Toque abre o popup de selecao de modo. */
.bf-sw-mode-field {
  flex: 1;
  min-width: 0;
  appearance: none;
  /* Botao do modo destacado: moldura laranja + glow INTERNO (inset). O leve
     gradiente quente no fundo faz o glow se fundir em vez de flutuar sobre
     cinza frio. Vale pra mobile e desktop (regra base). */
  border: 1px solid var(--accent);
  background: linear-gradient(180deg, #1f1813 0%, #15100f 100%);
  color: var(--text);
  height: 52px;
  border-radius: var(--r-md);
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: inset 0 0 16px color-mix(in srgb, var(--accent) 38%, transparent), 0 0 9px -3px var(--accent-glow);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bf-sw-mode-field:hover {
  border-color: var(--accent-2);
  box-shadow: inset 0 0 22px color-mix(in srgb, var(--accent) 50%, transparent), 0 0 13px -3px var(--accent-glow);
}
.bf-sw-mode-field .bf-tab-ico { width: 30px; height: 30px; flex: 0 0 auto; }
.bf-sw-mode-field-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Popup (modal) de selecao de modo de operacao do SW */
.bf-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.bf-modal-backdrop-strong {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}
/* Modal padrao — visual unificado com o popup de cores do LED (mesma
   sheet centralizada, mesmo gradient/raio/sombra/animacao). */
.bf-modal {
  width: 100%;
  max-width: 420px;
  max-height: 82vh;
  overflow-y: auto;
  background: var(--field-bg-2);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.04) inset;
  animation: bf-pop-in-center 0.18s ease;
}
@keyframes bf-pop-in-center {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
.bf-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--hair);
}
.bf-modal-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
}
.bf-modal-close {
  appearance: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: var(--card-3);
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.bf-modal-close:hover { background: var(--card-2); color: var(--text); }

/* ---- Row (list) ---- */
.bf-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 4px;
  border-bottom: 1px solid var(--hair);
}
.bf-row:last-child { border-bottom: 0; }
.bf-row .label {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.bf-row .sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.1em;
}
.bf-row .right {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.08em;
}

/* ---- Stepper / cycle button ---- */
.bf-cycle {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.bf-cycle button {
  appearance: none;
  flex: 1;
  border: 1px solid var(--hair);
  background: var(--card-2);
  color: var(--text);
  height: 64px;
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  cursor: pointer;
}
.bf-cycle button .cap {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--faint);
  margin-bottom: 2px;
  text-transform: uppercase;
}
.bf-cycle button.is-on {
  border-color: var(--accent);
  color: var(--accent);
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 70%),
    var(--card-2);
}

/* ---- Bank letter chips ---- */
.bf-letter-chips {
  display: flex; gap: 8px; margin-top: 8px;
}
.bf-letter-chips button {
  appearance: none;
  flex: 1;
  height: 48px;
  border-radius: var(--r-md);
  border: 1px solid var(--hair);
  background: var(--card-2);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
}
.bf-letter-chips button.is-on {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 18px -6px var(--accent-glow);
}
.bf-letter-chips button.is-off {
  opacity: 0.4;
  text-decoration: line-through;
  text-decoration-color: var(--faint);
}

/* ---- Footswitch arc (LED preview) ---- */
.bf-fsw {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.bf-fsw-glyph {
  position: relative;
  width: 72px; height: 72px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #0a0a0e 30%, transparent 70%),
    radial-gradient(circle at 30% 30%, #2a2a32, #0e0e12 70%);
  display: grid; place-items: center;
}
.bf-fsw-arcs { width: 100%; height: 100%; overflow: visible; }
.bf-fsw-arcs path {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px var(--led-c, var(--accent)));
}
.bf-fsw-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.18em;
}
.bf-fsw-label-inside {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--muted);
  pointer-events: none;
}
.bf-fsw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 6px;
  margin-top: 18px;
}

/* Preview do anel de LED dentro do card LED Preview Live Mode. */
.bf-led-preview-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 0 4px;
}

/* Toggle "Ativar Layer 2" dentro do card LEDS DEDICADOS (largo). Sem
   container, o label fica colado a esquerda e o switch solto na ponta
   direita — parece deslocado. Envolve num painel inset pra ler como um
   controle unico. */
.bf-card:has(> .bf-fsw-grid) .bf-auto-row {
  background: var(--card-2);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-top: 4px;
}

/* ---- Par GIG VIEW + LIVE MODE LAYOUT ----
   No mobile o wrapper e transparente (display: contents) — os 2 cards
   empilham normalmente. No desktop vira grid 50/50 (ver media query). */
.bf-display-pair { display: contents; }

/* ---- WiFi: conexao + redes ----
   Mobile: transparente (cards empilham). Desktop: flex centralizado pra os
   2 cards ficarem no meio em vez de empurrados pra esquerda (ver media). */
.bf-wifi-cols { display: contents; }

/* ---- Cards empilhados e centralizados (ex: BACKUP) ----
   Mobile: transparente (empilham normal). Desktop: coluna unica centrada
   (ver media query). */
.bf-stack-centered { display: contents; }
/* Garante o gap entre o card de upload e o par no mobile (o seletor
   .bf-card + .bf-card nao alcanca atravessando o wrapper). */
.bf-display-pair + .bf-card { margin-top: 14px; }

/* ---- Esboco do layout LIVE (LiveLayoutSketch) ---- */
.bf-llsk {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.bf-llsk-screen {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 3 / 2;
  background: linear-gradient(180deg, #0e0e12 0%, #16161a 100%);
  border: 1px solid var(--hair-strong);
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
}
/* Layouts 3/4: faixa no topo + tiles 70x70 PEQUENOS e quadrados, com
   espaco vazio distribuido (igual o firmware, que centra os blocos com
   gaps iguais). space-evenly = gap acima da faixa, entre faixa e tiles,
   e abaixo. */
.bf-llsk-screen.is-l3,
.bf-llsk-screen.is-l4 {
  justify-content: space-evenly;
}
.bf-llsk-row {
  flex: 1;
  display: flex;
  gap: 6px;
  min-height: 0;
  justify-content: center;
}
/* Tiles pequenos NAO esticam — viram quadrados (aspect-ratio 1). */
.bf-llsk-row.is-small {
  flex: 0 0 auto;
}
.bf-llsk-row.is-small .bf-llsk-tile {
  aspect-ratio: 1;
}
/* Par de fileiras L4 (L1 em cima, L2 embaixo) coladas, como no firmware. */
.bf-llsk-pair {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.bf-llsk-tile {
  flex: 1;
  min-width: 0;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--hair));
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
    #14141a;
}
.bf-llsk-row.is-small .bf-llsk-tile { border-radius: 4px; }
/* Formato REDONDO (ICON SHAPE = CIRCLE): radius grande vira circulo em
   tile quadrado e "pill" em tile largo — espelha radius = minDim/2 do
   firmware. A versao .is-small precisa repetir o seletor com a mesma
   profundidade pra vencer o border-radius:4px acima (especificidade). */
.bf-llsk-tile.is-circle { border-radius: 999px; }
.bf-llsk-row.is-small .bf-llsk-tile.is-circle { border-radius: 999px; }
.bf-llsk-strip {
  flex: 0 0 auto;
  height: 22%;
  min-height: 16px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 22%, #14141a);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--hair));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: color-mix(in srgb, var(--text) 78%, var(--accent));
}
/* Faixa OFF (Name Preset Live = OFF): some visualmente mas mantem o espaco
   reservado — igual ao pedal, que so deixa de desenhar a faixa. */
.bf-llsk-strip.is-empty {
  background: transparent;
  border-color: transparent;
}
.bf-llsk-cap {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--muted);
}

/* ---- Model picker ---- */
.bf-model-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.bf-model-tabs button {
  appearance: none;
  aspect-ratio: 1;
  border: 1px solid var(--hair);
  background: var(--field-bg);
  color: var(--text);
  border-radius: var(--r-md);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(214,216,226,0.12), 0 0 12px rgba(214,216,226,0.05);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.bf-model-tabs button .num {
  font-family: var(--font-display);
  font-size: clamp(28px, 8vw, 48px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.bf-model-tabs button .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--faint);
  text-transform: uppercase;
}
.bf-model-tabs button.is-active {
  border-color: var(--tile-color, var(--accent));
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--tile-color, var(--accent)) 32%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, #2a1a10 0%, #18120e 100%);
}

.bf-model-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.bf-model-row {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 12px;
  background: var(--card-2);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  min-width: 0;
  position: relative;
}
.bf-model-row .bf-model-radio {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.bf-model-row.is-active {
  border-color: var(--tile-color, var(--accent));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tile-color, var(--accent)) 10%, transparent), transparent),
    var(--card-2);
}
.bf-model-radio {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--faint);
  flex-shrink: 0;
  position: relative;
}
.bf-model-row.is-active .bf-model-radio {
  border-color: var(--tile-color, var(--accent));
}
.bf-model-row.is-active .bf-model-radio::after {
  content: "";
  position: absolute; inset: 3px;
  border-radius: 50%;
  background: var(--tile-color, var(--accent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--tile-color, var(--accent)) 55%, transparent);
}
.bf-model-name {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  padding: 0 22px;  /* evita sobrepor o radio quando o nome eh longo */
  max-width: 100%;
}
.bf-model-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.1em;
}

/* ---- WiFi panel ---- */
.bf-wifi-status {
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--card-2);
  margin-bottom: 12px;
}
.bf-wifi-icon {
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
}
.bf-wifi-icon.off { background: rgba(255,255,255,0.06); color: var(--faint); }
.bf-wifi-status .ssid {
  flex: 1; display: flex; flex-direction: column;
}
.bf-wifi-status .ssid b {
  font-size: 15px; font-weight: 600; color: var(--text);
}
.bf-wifi-status .ssid span {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--muted); letter-spacing: 0.08em;
}

.bf-input-stack { display: flex; flex-direction: column; gap: 4px; }
.bf-input-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 4px 0;
}
.bf-input {
  height: 48px;
  border: 1px solid var(--hair);
  background: var(--card-2);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.05em;
  padding: 0 14px;
  display: flex; align-items: center; gap: 8px;
}
.bf-input.is-focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.bf-input .placeholder { color: var(--faint); }
.bf-input .value { color: var(--text); }
.bf-input .chev {
  margin-left: auto;
  color: var(--faint);
  font-size: 12px;
}

.bf-net-list { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.bf-net {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; border-radius: var(--r-md);
  background: var(--card-2);
}
.bf-net.is-active { border: 1px solid var(--accent); }
.bf-net .name { flex: 1; font-size: 14px; font-weight: 500; }
.bf-net .strength {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.08em;
}

.bf-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }

/* Botao de acao generico (usado em BACKUP & RESTORE, etc.). Mesmo padrao
   visual dos icon-tabs: gradiente escuro + glow preto externo. */
.bf-action {
  appearance: none;
  border: 1px solid var(--hair);
  background: var(--field-bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 14px 12px;
  border-radius: var(--r-md);
  cursor: pointer;
  box-shadow: 0 0 6px rgba(214,216,226,0.12), 0 0 12px rgba(214,216,226,0.05);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.bf-action:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.bf-action:disabled { opacity: 0.45; cursor: not-allowed; }
.bf-action.is-running {
  border-color: var(--tile-color, var(--accent));
  color: var(--tile-color, var(--accent));
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--tile-color, var(--accent)) 32%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, #2a1a10 0%, #18120e 100%);
}
.bf-btn {
  appearance: none;
  height: 48px;
  border: 1px solid var(--hair);
  background: var(--card-2);
  color: var(--text);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  cursor: pointer;
}
.bf-btn.primary {
  background: var(--accent);
  color: #1a0e06;
  border-color: var(--accent);
  box-shadow: 0 0 18px -4px var(--accent-glow);
}

/* Popup de resultado da conexão Wi-Fi (sucesso/erro) — ver connectWifiSta. */
.bf-modal.bf-wifi-result { max-width: 360px; width: calc(100% - 40px); }
.bf-wifi-result-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px 20px 8px;
  text-align: center;
}
.bf-wifi-result-badge {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.bf-wifi-result-badge.is-ok {
  color: #1a0e06;
  background: #34c759;
  box-shadow: 0 0 22px -4px rgba(52,199,89,0.6);
}
.bf-wifi-result-badge.is-fail {
  color: #1a0e06;
  background: #ff453a;
  box-shadow: 0 0 22px -4px rgba(255,69,58,0.6);
}
.bf-wifi-result-msg {
  margin: 0;
  font-family: var(--font-sys);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.bf-wifi-result-addr {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.bf-wifi-result-addr code {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 9px 12px;
}
.bf-wifi-result-foot {
  padding: 8px 20px 20px;
}
.bf-wifi-result-foot .bf-btn { width: 100%; }

/* Card educativo dos 3 estados de conexão WiFi (o atual fica destacado). */
.bf-wifi-states { display: flex; flex-direction: column; gap: 10px; }
.bf-wifi-state {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  opacity: 0.5;
  transition: all 0.15s ease;
}
.bf-wifi-state.is-active {
  opacity: 1;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--accent) 50%, transparent);
}
.bf-wifi-state-ico { flex: 0 0 auto; color: var(--text); line-height: 0; }
.bf-wifi-state.is-active .bf-wifi-state-ico { color: var(--accent); }
.bf-wifi-state-txt {
  margin: 0;
  font-family: var(--font-sys);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
}
.bf-wifi-state.is-active .bf-wifi-state-txt { font-weight: 600; }
.bf-screen.is-theme-light .bf-wifi-state {
  background: var(--card-2);
  border-color: var(--field-line);
}

/* ---- Stats grid ---- */
.bf-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hair);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-top: 12px;
}
.bf-stat {
  background: var(--card-2);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.bf-stat .k {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.bf-stat .v {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.04em;
}
.bf-stat .v.accent { color: var(--accent); }

/* ---- Auto start cluster ---- */
.bf-auto-row {
  display: flex; align-items: center; gap: 12px; padding: 4px 4px;
}
.bf-auto-row .label {
  flex: 1;
  font-size: 15px; font-weight: 500;
}

/* ---- App container (fullscreen, responsive) ---- */
.phone-frame {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  position: relative;
  background: var(--screen);
  overflow: hidden;
}
.bf-screen { min-height: 100vh; }

/* ---- Sub-section chips (BRILHO / PRESET LEDS, MODELO / WI-FI) ---- */
.bf-chip {
  appearance: none;
  border: 1px solid var(--hair);
  background: var(--card-2);
  color: var(--muted);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: all 0.15s ease;
}
.bf-chip.is-on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: 0 0 12px -2px var(--accent-glow);
}

/* ---- Icon tabs (GLOBAL: MIDI / DISPLAY / LEDS / BANKS) ---- */
/* Mesmo padrão visual do .bf-preset-tab (PRESET CONFIG): quadrados com
   gradiente escuro + glow preto externo; quando ativo, borda laranja +
   gradiente radial laranja interno (icone e label permanecem neutros). */
.bf-icon-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  /* Espaçamento alinhado ao .bf-bank-row do PRESET pra que GLOBAL e SYSTEM
     tenham o mesmo gap visual entre header e primeiro bloco de conteudo. */
  margin: 8px 0 18px;
}
.bf-icon-tabs.cols-3 {
  grid-template-columns: repeat(3, 84px);
}
.bf-icon-tabs.cols-4 {
  /* Usado em SYSTEM (MODELO / WI-FI / BACKUP / HARD TEST). 4 colunas
     que distribuem todo o espaco disponivel do card — botoes maiores,
     ocupando a largura toda em vez de ficar fixos em 84px. */
  grid-template-columns: repeat(4, 1fr);
}
.bf-icon-tabs.cols-4 .bf-icon-tab span {
  font-size: 11px;
}
.bf-icon-tabs.cols-5 {
  /* SYSTEM com USB HOST (MODELO / WI-FI / USB HOST / BACKUP / HARD TEST).
     5 colunas — fonte menor pra labels longos caberem sem quebrar. */
  grid-template-columns: repeat(5, 1fr);
}
.bf-icon-tabs.cols-5 .bf-icon-tab span {
  font-size: 10px;
}
.bf-icon-tabs.cols-6 {
  /* SYSTEM com LANGUAGE (MODEL / WI-FI / USB HOST / BACKUP / HARD TEST /
     LANGUAGE). Mobile-first: 3 colunas, entao os 6 cards quebram em 2
     linhas de 3 (em vez de 6 apertados na mesma linha). No desktop
     (>=900px) volta a 6 numa linha so. min-width:0 evita o "grid blowout"
     (colunas nao encolhem abaixo do conteudo e estouram o card). */
  grid-template-columns: repeat(3, 1fr);
}
.bf-icon-tabs.cols-6 .bf-icon-tab {
  min-width: 0;
  /* sem aspect-ratio:1 os tiles nao viram quadradoes; ficam baixos
     (so a altura do icone + label), entao o icone nao fica gigante. */
  aspect-ratio: auto;
  padding: 11px 6px;
}
.bf-icon-tabs.cols-6 .bf-icon-tab svg { width: 28px; height: 28px; }
.bf-icon-tabs.cols-6 .bf-icon-tab span {
  font-size: 10px;
  letter-spacing: 0.04em;
}

/* SW GLOBAL — grade de modos (mesmos modos dos 6 SWs). Botoes com icone
   + rotulo; o ativo ganha a cor de acento. Layout fluido (auto-fill). */
.bf-sw-global-modes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  margin: 4px 0 14px;
}
.bf-sw-global-mode {
  appearance: none;
  border: 1px solid var(--hair);
  background: var(--field-bg);
  color: var(--text);
  border-radius: var(--r-md);
  padding: 10px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.bf-sw-global-mode svg { width: 26px; height: 26px; stroke: currentColor; }
.bf-sw-global-mode span {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.bf-sw-global-mode:hover { border-color: var(--hair-strong); }
.bf-sw-global-mode.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, #20232b 0%, #14161c 100%);
}

/* Placeholder pra cards "em construcao" — texto centralizado com padding
   maior que o normal, pra parecer estado vazio em vez de bug. */
.bf-empty-state {
  padding: 24px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.bf-empty-state p { margin: 0; }

/* USB Host page — rows label/valor + meta state badges no card-head. */
.bf-usbhost-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 12px;
}
.bf-usbhost-row:last-child { border-bottom: none; }
.bf-usbhost-row .label { color: var(--muted); }
.bf-usbhost-row .val   {
  color: var(--text);
  text-align: right;
  word-break: break-word;
}
.bf-card-head .meta.is-ok  { color: var(--success, #6cd17a); }
.bf-card-head .meta.is-off { color: var(--muted); }
.bf-btn.is-warn {
  border-color: var(--accent, #ff7a00);
  color: var(--accent, #ff7a00);
}
.bf-btn.is-warn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent, #ff7a00) 14%, transparent);
}
.bf-icon-tab {
  appearance: none;
  border: 1px solid var(--hair);
  background: var(--field-bg);
  color: var(--text);
  border-radius: var(--r-md);
  padding: 8px 6px;
  aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(214,216,226,0.12), 0 0 12px rgba(214,216,226,0.05);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.bf-icon-tab svg {
  width: 38px; height: 38px;
  stroke: currentColor;
  flex: 0 0 auto;
}
.bf-icon-tab span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.bf-icon-tab:hover { border-color: var(--hair-strong); }
.bf-icon-tab.is-on {
  border-color: var(--tile-color, var(--accent));
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--tile-color, var(--accent)) 32%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, #2a1a10 0%, #18120e 100%);
}

/* ---- Color popover (centered on screen, iOS-style sheet) ---- */
.bf-color-pop {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 80;
  background: var(--field-bg-2);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-lg);
  padding: 18px;
  width: min(320px, calc(100vw - 32px));
  box-shadow:
    0 30px 80px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.04) inset;
  animation: bf-pop-in 0.18s ease;
}
@keyframes bf-pop-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.94); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.bf-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 12, 0.55);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  z-index: 70;
  animation: bf-fade-in 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
@keyframes bf-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.bf-color-pop-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--hair);
}
.bf-color-pop-preview {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,0.12);
  flex-shrink: 0;
  background-image: radial-gradient(circle at 30% 25%, rgba(255,255,255,.45), transparent 60%);
  background-blend-mode: overlay;
}
.bf-color-pop-info {
  flex: 1; display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.bf-color-pop-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--muted);
  text-transform: uppercase;
}
.bf-color-pop-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.bf-color-pop-close {
  appearance: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 0;
  background: var(--card-3);
  color: var(--muted);
  display: grid; place-items: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.bf-color-pop-close:hover { background: var(--card-2); color: var(--text); }

.bf-color-pop-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.bf-swatch {
  appearance: none;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  border: 1.5px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.45), transparent 55%),
    var(--sw);
  cursor: pointer;
  position: relative;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.bf-swatch:hover { transform: scale(1.06); border-color: rgba(255,255,255,0.2); }
.bf-swatch.is-active {
  border-color: var(--accent);
  box-shadow:
    0 0 0 2px var(--accent-soft),
    0 6px 16px -4px var(--sw);
}
.bf-swatch.is-active::after {
  content: "";
  position: absolute;
  top: 4px; right: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #1c1c20;
}
.bf-swatch.is-off {
  background:
    repeating-linear-gradient(45deg, #1a1a1a 0 5px, #28282c 5px 10px);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.12em;
}

/* ---- Save button states ----
   O botao SAVE colore conforme o estado do preset ativo (substitui o
   antigo .bf-status-badge que ficava no header do card).
     idle   = sem mudancas — cor neutra (branco)
     dirty  = mudancas pendentes — vermelho
     saving = enviando agora — laranja (accent)
     saved  = sucesso — verde
     error  = falhou — vermelho
*/
.bf-save { transition: background 0.15s ease, color 0.15s ease; }
.bf-save.is-idle   { background: var(--text);    color: #0c0c10; }
.bf-save.is-dirty  { background: var(--danger);  color: #fff;    }
.bf-save.is-saving { background: var(--accent);  color: #1a0e06; }
.bf-save.is-saved  { background: var(--success); color: #07140a; }
.bf-save.is-error  { background: var(--danger);  color: #fff;    }

/* ---- Preset editor card (BANK page) ---- */
.bf-form-row {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.bf-form-row:first-child { margin-top: 0; }
.bf-form-row-3 { grid-template-columns: 2fr 1fr 1fr; }
.bf-form-row-2 { grid-template-columns: 1fr 1fr; }
.bf-form-row-colors { grid-template-columns: 1fr 1fr 1fr; }
.bf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.bf-field-grow { min-width: 0; }
.bf-field-spacer { visibility: hidden; }
.bf-field-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: 2px;
}
.bf-input-name {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.bf-input-name:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.bf-select-wrap {
  position: relative;
  display: flex;
}
.bf-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding-right: 36px;
  cursor: pointer;
}
.bf-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.bf-select-chev {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--faint);
  font-size: 12px;
}
/* Trigger do BfSelect (componente que substitui o <select> nativo): um
   <button> que herda o visual do select (.bf-input .bf-select) mas, ao
   clicar, abre a roda (WheelPopup). O texto fica a esquerda e trunca com
   reticencias; o <span class="bf-select-chev"> irmao segue posicionado
   sobre ele (a estrutura DOM no lugar do select e preservada). */
button.bf-select-btn {
  box-sizing: border-box;
  text-align: left;
}
.bf-select-btn .bf-select-btn-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bf-color-bar {
  appearance: none;
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  height: 32px;
  width: 100%;
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4), inset 0 8px 18px rgba(0,0,0,0.5);
  transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.bf-color-bar:hover { border-color: var(--hair-strong); }
.bf-color-bar:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), inset 0 0 0 1px rgba(0,0,0,0.4), inset 0 8px 18px rgba(0,0,0,0.5);
}

@media (max-width: 520px) {
  .bf-form-row-3 { grid-template-columns: 1fr 1fr; }
  .bf-field-spacer { display: none; }
}

.bf-input-num {
  font-variant-numeric: tabular-nums;
  text-align: center;
  justify-content: center;
  -moz-appearance: textfield;
}

/* Grid 3x3 para escolher alinhamento do nome do preset */
.bf-align-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  height: 48px;
  border: 1px solid var(--hair);
  background: var(--card-2);
  border-radius: var(--r-md);
  padding: 4px;
}
.bf-align-cell {
  appearance: none;
  background: var(--card-3);
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.12s ease, transform 0.1s ease;
}
.bf-align-cell:hover { background: var(--hair-strong); }
.bf-align-cell.is-active {
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft);
}

/* ---- Preset editor card (tabs MIDI / DISPLAY) ---- */
.bf-preset-card {
  margin-top: 18px;
  background:
    linear-gradient(180deg, #1a1a1e 0%, #131318 100%) padding-box,
    var(--bevel-edge) border-box;
  border: 2px solid transparent;
  border-radius: var(--r-lg);
  padding: 20px 22px 22px;
  box-shadow: var(--bevel-relief), 0 3px 12px rgba(0,0,0,0.4);
}
/* Card "so com tabs": compacto, sem border-bottom interna (nao tem body). */
.bf-preset-card-tabs-only { padding: 14px 16px; }
.bf-preset-card-tabs-head { padding: 0; margin: 0; }
/* Card PARAMETERS abaixo: sem o margin-top extra do default — o gap entre
   cards (no desktop) ou o spacing do card-only-tabs (no mobile) ja basta. */
.bf-preset-card-params { margin-top: 12px; }
.bf-preset-card-active-tab {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent);
  flex: 0 0 auto;
}
.bf-preset-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--hair);
}
.bf-preset-card-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 auto;
}

/* Status badge: substitui o titulo PRESET SETTINGS. Mostra cor segundo
   o estado de salvamento — verde quando tudo certo, vermelho quando ha
   mudanca pendente, amarelo enquanto salva. */
.bf-status-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 4px 6px;
  user-select: none;
}
.bf-status-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: block;
  border: 1.5px solid currentColor;
  position: relative;
}
.bf-status-dot::after {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 1;
}
.bf-status-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: currentColor;
}
.bf-status-badge.is-ok    { color: var(--success, #30d158); }
.bf-status-badge.is-dirty { color: var(--danger,  #ff6b6b); }
.bf-status-badge.is-saving { color: var(--accent, #ffd060); animation: bf-status-pulse 0.8s ease-in-out infinite alternate; }
.bf-status-badge.is-error { color: var(--danger,  #ff6b6b); }
@keyframes bf-status-pulse {
  from { opacity: 0.55; }
  to   { opacity: 1; }
}
.bf-preset-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.bf-preset-tab {
  appearance: none;
  border: 1px solid var(--hair);
  background: var(--field-bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 8px 6px;
  border-radius: var(--r-md);
  aspect-ratio: 1;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Distribui os 4 tabs por todo o head — botoes maiores pra acomodar
     icones maiores. */
  flex: 1 1 0;
  min-width: 0;
  box-shadow: 0 0 6px rgba(214,216,226,0.12), 0 0 12px rgba(214,216,226,0.05);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.bf-tab-ico { width: 38px; height: 38px; display: block; flex: 0 0 auto; }
.bf-tab-shape { fill: none; stroke: currentColor; stroke-width: 1.8; }
.bf-tab-dot   { fill: currentColor; }
.bf-tab-fill  { fill: currentColor; stroke: none; }
.bf-tab-line  { fill: none; stroke: currentColor; stroke-width: 1.8; }
.bf-preset-tab:hover { border-color: var(--hair-strong); }
.bf-preset-tab.is-active {
  border-color: var(--tile-color, var(--accent));
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--tile-color, var(--accent)) 32%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, #2a1a10 0%, #18120e 100%);
}
.bf-preset-card-body {
  /* Sem fundo proprio — o card ja e o container visual. */
  min-height: 220px;
}

/* Variante INLINE dos tabs MIDI/DISPLAY/EXTRAS — usada quando os tabs
   ficam dentro do head do PARAMETERS card (em vez de card separado).
   Botoes mais compactos, side-by-side. */
.bf-preset-tabs-inline {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}
.bf-preset-tabs-inline .bf-preset-tab {
  aspect-ratio: auto;
  width: 64px;
  height: 56px;
  padding: 6px 4px 4px;
  font-size: 9px;
  gap: 4px;
}
.bf-preset-tabs-inline .bf-tab-ico {
  width: 26px;
  height: 26px;
}
.bf-preset-card-head-with-tabs {
  align-items: center;
}

/* ---- MONITOR tab: log das chamadas de preset (terminal style) ---- */
.bf-monitor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px 2px;
}
.bf-monitor-empty {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 24px 8px;
}
.bf-monitor-entry {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.bf-monitor-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bf-monitor-time {
  color: var(--faint);
  font-size: 10px;
  letter-spacing: 0.04em;
}
.bf-monitor-tag {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.bf-monitor-sep {
  color: var(--faint);
}
.bf-monitor-name {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}
.bf-monitor-header {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding-left: 0;
}
.bf-monitor-sw-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: 16px;
  padding: 4px 0 2px 12px;
  border-left: 2px solid var(--accent);
}
.bf-monitor-sw {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* MONITOR LIVE — painel persistente que fica no fim da pagina de preset,
   visivel tanto em PRESET MODE quanto em LIVE MODE. Lista presses de SW
   capturados pelo poll de /bank/current. */
/* ---- MONITOR MIDI — popup centralizado (igual aos pickers de cor) ----
   Renderizado via portal em document.body, fundo com blur (.bf-modal-backdrop).
   Mostra so o evento mais recente (preset OU disparo de SW). */
.bf-monitor-pop {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  width: min(540px, calc(100vw - 32px));
  max-height: min(82vh, 720px);
  background: var(--field-bg-2);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-lg);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.04) inset;
  animation: bf-pop-in 0.18s ease;
  overflow: hidden;
}
.bf-monitor-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--hair);
  flex-shrink: 0;
}
.bf-monitor-pop-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.bf-monitor-pop-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--muted);
  text-transform: uppercase;
}
.bf-monitor-pop-sub {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
  line-height: 1.1;
}
.bf-monitor-pop-sub.is-live { color: #6fdc8c; }
.bf-monitor-pop-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.bf-monitor-pop-close {
  appearance: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 0;
  background: var(--card-3);
  color: var(--muted);
  display: grid; place-items: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.bf-monitor-pop-close:hover { background: var(--card-2); color: var(--text); }
.bf-monitor-pop-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 18px;
}

.bf-live-monitor {
  margin: 18px 0 0;
  padding: 12px 14px;
  /* Mesmo bisotê metalico dos demais cards (.bf-preset-card / .bf-sw-card). */
  background:
    linear-gradient(180deg, #16161a 0%, #101013 100%) padding-box,
    var(--bevel-edge) border-box;
  border: 2px solid transparent;
  border-radius: var(--r-md);
  box-shadow: var(--bevel-relief), 0 3px 12px rgba(0,0,0,0.4);
}
.bf-live-monitor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin-bottom: 8px;
}
.bf-monitor-copy {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 3px 9px;
  border-radius: var(--r-sm);
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.bf-monitor-copy:hover {
  background: rgba(255, 165, 0, 0.12);
}
.bf-monitor-copy.is-copied {
  border-color: #6fdc8c;
  color: #6fdc8c;
  background: rgba(80, 220, 120, 0.12);
}
.bf-live-monitor-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 12px;
  border-left: 2px solid var(--accent-glow, var(--accent));
}
/* Evento individual no MONITOR LIVE — header com SW + modo + secao +
   state, e abaixo uma lista indentada com cada mensagem MIDI que foi
   realmente disparada (CC ou PC). Cada evento e um "card" compacto
   separado por um divisor pontilhado fino. */
.bf-monitor-event-empty {
  color: var(--faint);
  font-style: italic;
  font-size: 12px;
  padding: 4px 0;
}
.bf-monitor-ev {
  padding: 6px 0;
}
.bf-monitor-ev + .bf-monitor-ev {
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.bf-monitor-ev-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.bf-monitor-ev-sw {
  color: var(--muted);
  font-weight: 700;
}
.bf-monitor-ev-mode {
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 0.12em;
}
.bf-monitor-ev-sec {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  background: rgba(255, 165, 0, 0.12);
  color: var(--accent);
}
.bf-monitor-ev-state {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 2px 7px;
  border-radius: var(--r-sm);
}
.bf-monitor-section {
  margin-top: 6px;
}
.bf-monitor-section + .bf-monitor-section {
  margin-top: 8px;
}
.bf-monitor-section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.bf-monitor-flag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 1px 5px;
  border-radius: var(--r-sm);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
}
.bf-msg-when {
  display: inline-block;
  min-width: 28px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 1px 4px;
  border-radius: var(--r-sm);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
}
.bf-monitor-ev-state.is-on {
  color: #6fdc8c;
  background: rgba(80, 220, 120, 0.12);
}
.bf-monitor-ev-state.is-off {
  color: #aab0b8;
  background: rgba(170, 176, 184, 0.08);
}
.bf-monitor-ev-msgs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 5px;
  padding-left: 16px;
  border-left: 1px dotted rgba(255, 255, 255, 0.12);
  margin-left: 4px;
}
.bf-monitor-ev-msg {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.bf-monitor-ev-msg .bf-msg-type {
  display: inline-block;
  min-width: 26px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  padding: 1px 5px;
  border-radius: var(--r-sm);
  text-align: center;
}
.bf-monitor-ev-msg .bf-msg-type.is-cc {
  background: rgba(255, 165, 0, 0.15);
  color: var(--accent);
}
.bf-monitor-ev-msg .bf-msg-type.is-pc {
  background: rgba(58, 160, 255, 0.18);
  color: #3aa0ff;
}
.bf-monitor-ev-msg .bf-msg-type.is-fav {
  background: rgba(255, 215, 0, 0.20);
  color: #ffd966;
}
.bf-monitor-ev-msg .bf-msg-num {
  color: var(--text);
  font-weight: 700;
  min-width: 30px;
}
.bf-monitor-ev-msg .bf-msg-eq {
  color: rgba(255, 255, 255, 0.3);
  margin: 0 -2px;
}
.bf-monitor-ev-msg .bf-msg-val {
  color: var(--text);
}
.bf-monitor-ev-msg .bf-msg-sep {
  color: rgba(255, 255, 255, 0.25);
  padding: 0 2px;
}
.bf-monitor-ev-msg .bf-msg-ch {
  color: var(--muted);
}
.bf-monitor-ev-msg-empty {
  font-style: italic;
  color: var(--faint);
  padding-left: 20px;
}

/* Botoes Tamanho/Negrito no DISPLAY tab batem a altura dos color bars (42px). */
.bf-grid-tamanho .bf-input,
.bf-grid-negrito .bf-input {
  height: 42px;
  border-radius: var(--r-sm);
  padding: 0 10px;
  font-size: 13px;
}

/* Layout do DISPLAY tab em grid 4 colunas x 3 linhas:
   Row 1: TAMANHO(1) NEGRITO(1) NAMECOLOR(2 wide)
   Row 2: NAMECOLOR(1) BACKGROUND(1) ALINHAMENTO(2x2 spanning rows 2-3)
   Row 3: TAGCOLOR(1) BACKLAYERS(1) (alignment continues) */
.bf-display-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: auto;
  column-gap: 12px;
  row-gap: 18px;
}
/* Campos do card DISPLAY um pouco mais altos (desktop + mobile). Escopado ao
   grid pra nao afetar os color bars reutilizados no SW DISPLAY. */
.bf-display-grid .bf-color-bar { height: 42px; }
.bf-grid-tamanho       { grid-column: 1; grid-row: 1; }
.bf-grid-negrito       { grid-column: 2; grid-row: 1; }
.bf-grid-namecolor-top { grid-column: 3 / 5; grid-row: 1; }
.bf-grid-namecolor     { grid-column: 1; grid-row: 2; }
.bf-grid-background    { grid-column: 2; grid-row: 2; }
.bf-grid-alinhamento   { grid-column: 3 / 5; grid-row: 2 / 4; }
.bf-grid-tagcolor      { grid-column: 1; grid-row: 3; }
.bf-grid-backlayers    { grid-column: 2; grid-row: 3; }

/* Alignment grid maior quando ocupa o canto 2x2 — sem aspect-ratio fixo
   pra nao esticar verticalmente; deixa o grid container ditar a altura. */
.bf-align-grid-large {
  height: 100%;
  max-height: 200px;
  gap: 6px;
  padding: 6px;
  border-radius: var(--r-md);
}
/* Permite que o label estenda 100% para o grid preencher o cell */
.bf-grid-alinhamento { display: flex; flex-direction: column; }
.bf-grid-alinhamento > .bf-align-grid-large { flex: 1; }

@media (max-width: 520px) {
  .bf-display-grid { grid-template-columns: 1fr 1fr; }
  .bf-grid-tamanho       { grid-column: 1; grid-row: 1; }
  .bf-grid-negrito       { grid-column: 2; grid-row: 1; }
  .bf-grid-namecolor-top { grid-column: 1 / 3; grid-row: 2; }
  .bf-grid-namecolor     { grid-column: 1; grid-row: 3; }
  .bf-grid-background    { grid-column: 2; grid-row: 3; }
  .bf-grid-alinhamento   { grid-column: 1 / 3; grid-row: 4; }
  .bf-grid-tagcolor      { grid-column: 1; grid-row: 5; }
  .bf-grid-backlayers    { grid-column: 2; grid-row: 5; }
  /* No mobile o alinhamento ocupa uma linha unica de altura automatica (no
     desktop ele herda a altura de 2 linhas das barras de cor vizinhas). Sem
     altura explicita, as 9 celulas vazias (1fr) colapsam e ficam intocaveis.
     flex:none faz a altura fixa valer apesar do flex:1 do container. */
  .bf-grid-alinhamento > .bf-align-grid-large {
    flex: none;
    height: 180px;
    max-height: none;
  }
}

/* MIDI tab: nome grande centralizado dentro de um campo editavel.
   A MOLDURA fica no wrapper (background + border + radius) e usa flex
   pra centralizar verticalmente o glyph. O <input> fica "nu" — soh com
   o texto e height auto, conta com o flex pra alinhar no centro. */
.bf-preset-name-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 6px 0 10px;
  padding: 14px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px dashed var(--hair-strong);
  border-radius: var(--r-md);
  cursor: text;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.bf-preset-name-wrap:hover {
  border-color: var(--accent-soft);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.bf-preset-name-wrap:focus-within {
  border-style: solid;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.bf-preset-name-input {
  appearance: none;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
  width: 100%;
  max-width: 100%;
  padding: 0;
  /* line-height: 1 encolhe o line box pro tamanho da fonte e elimina
     o "descender vazio" que descentraliza glyphs all-caps. */
  line-height: 1;
  cursor: text;
}

/* Aba EXTRAS: 4 PCs + 2 CCs */
.bf-extras-grid {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.bf-extras-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bf-extras-section-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: 2px;
}
.bf-extras-row {
  display: grid;
  grid-template-columns: 56px 1fr 1fr;
  gap: 12px;
  align-items: end;
}
.bf-extras-row-cc { grid-template-columns: 56px 1fr 1fr 1fr; }
.bf-extras-index {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: #0a0a0c;
  align-self: end;
}
.bf-extras-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.bf-extras-cell .bf-input { border-radius: var(--r-md); }
.bf-extras-cell .bf-select[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Linha divisoria entre o nome do preset e os campos MIDI */
.bf-preset-divider {
  border: 0;
  border-top: 1px solid var(--hair);
  margin: 6px -10px 12px;
}

.bf-preset-name-input::placeholder {
  color: var(--muted);
  opacity: 0.6;
}

@media (max-width: 520px) {
  .bf-preset-card-title { font-size: 22px; }
  .bf-preset-tab { min-width: 72px; padding: 8px 10px 6px; gap: 2px; }
  .bf-tab-ico { width: 32px; height: 32px; }
  .bf-preset-name-input { font-size: 36px; }

  /* PARAMETERS card head: empilha titulo + tabs (vertical) pra que os 3
     icones MIDI/DISPLAY/EXTRAS nao saiam do viewport em mobile. */
  .bf-preset-card-head-with-tabs {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .bf-preset-tabs-inline {
    width: 100%;
  }
  .bf-preset-tabs-inline .bf-preset-tab {
    flex: 1 1 0;
    width: auto;
    height: 52px;
  }
  .bf-preset-tabs-inline .bf-tab-ico { width: 24px; height: 24px; }

  .bf-sw-btn-tile { padding: 8px 4px 8px; }

  /* Modos de SW (LIVE): em mobile, um campo por linha — empilha os pares
     CC/CANAL (e similares) em coluna unica. Exclui a linha do MIDI TEST
     (botao + LED arc lado a lado) e os slots do MACROS (grid compacto
     proprio de 3 campos). */
  .bf-sw-fx1 .bf-extras-row:not(.bf-sw-fx1-test):not(.bf-macros-slot-fields) {
    grid-template-columns: minmax(0, 1fr);
  }
  /* SINGLE reusa o grid do MACROS (.bf-macros-slot-fields), mas so tem 2
     campos (CC/VALOR ou PC) — empilha tambem em mobile. O MACROS (3 campos
     CC/ON/OFF) nao tem .bf-sw-single, entao fica de fora. */
  .bf-sw-fx1.bf-sw-single .bf-macros-slot-fields.is-pc {
    grid-template-columns: minmax(0, 1fr);
  }
}
.bf-input-num::-webkit-outer-spin-button,
.bf-input-num::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.bf-select.is-mute {
  color: var(--danger);
  letter-spacing: 0.18em;
  font-weight: 700;
}

.bf-hint {
  margin: 14px 2px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--faint);
}
.bf-hint b {
  color: var(--accent);
  font-weight: 600;
}
.bf-hint-status {
  margin-left: 2px;
  font-weight: 700;
  letter-spacing: 0.18em;
}
.bf-hint-status.is-loading,
.bf-hint-status.is-saving { color: var(--muted); }
.bf-hint-status.is-saved { color: var(--success); }
.bf-hint-status.is-error { color: var(--danger); }

/* Popover da paleta do display: usa o mesmo container/sheet do LED picker
   (.bf-color-pop), reaproveita .bf-color-pop-grid e .bf-swatch, e adiciona
   secoes roláveis (Transparencia / Solid / G1 / G2 / Custom / Misc). */
.bf-palette-pop {
  width: min(320px, calc(100vw - 32px));
  max-height: min(86vh, 720px);
  display: flex;
  flex-direction: column;
}
.bf-palette-pop .bf-color-pop-head { padding-bottom: 14px; margin-bottom: 14px; }
.bf-palette-scroll {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  padding-right: 6px;
  margin-right: -6px;
  min-height: 0;
  flex: 1;
}
.bf-palette-scroll::-webkit-scrollbar { width: 6px; }
.bf-palette-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: var(--r-sm);
}
.bf-palette-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }
.bf-palette-pop .bf-color-pop-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.bf-palette-section { display: flex; flex-direction: column; gap: 8px; }
.bf-palette-section-title {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: 2px;
}

/* ─── SW DISPLAY (icone + cores por SW) ───────────────────────────── */

/* Substitui o conteudo padrao do .bf-sw-btn quando ele renderiza o tile
   com icone. Tile e a moldura quadrada com background/borda da config
   + icone ou texto centralizado + sigla pequena no rodape. */
.bf-sw-btn-tile {
  padding: 6px;
}
.bf-sw-tile {
  position: relative;
  /* Mesmo raio das molduras/botões em torno (.bf-sw-btn, .bf-preset, etc)
     pra que o preview do icone fique visualmente consistente com o resto
     dos cards/frames da pagina. */
  border-radius: var(--r-md);
  /* Sem background default — quando BACK e transparente, o fundo do
     container pai (botao SW ou card do editor) aparece naturalmente.
     Cor solida e setada inline em React quando o usuario escolhe. */
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
}
/* ICON SHAPE = 'circle' (GLOBAL > DISPLAY > Icon Shape) — deixa SOMENTE a
   moldura interna do icone (.bf-sw-tile) redonda. A moldura externa
   (.bf-sw-btn) mantem o cantos arredondados do design. */
.is-icon-circle .bf-sw-tile {
  border-radius: 50%;
}
.bf-sw-tile-text {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 0 4px;
}
.bf-sw-tile-sigla {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-top: 2px;
  opacity: 0.95;
}
/* Botao SW1..SW6 do LIVE: tile centralizado em cima + 2 linhas de texto
   embaixo (SW · N · ● e o nome do modo). Sem moldura externa adicional
   — o proprio .bf-sw-btn da o frame. */
.bf-sw-btn-tile {
  padding: 8px 6px 10px;
  gap: 4px;
  align-items: center;
}
.bf-sw-btn-info-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text);
  margin-top: 4px;
}
.bf-sw-btn-info-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 5px currentColor;
}
.bf-sw-btn-mode {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--text);
  text-transform: uppercase;
  text-align: center;
  width: 100%;
}

/* Editor da aba DISPLAY (3 toggles de cor + preview + sigla) */
.bf-sw-disp {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bf-sw-disp-colors {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
/* Abas SPIN1/SPIN2/SPIN3 do editor de display em modo SPIN. Reusa o .bf-seg
   (segmented control padrao do app). */
.bf-sw-disp-spin-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 4px;
}

.bf-sw-disp-spin-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  line-height: 1.4;
}
.bf-sw-disp-spin-hint strong {
  color: var(--text);
  font-weight: 700;
}

.bf-sw-disp-color {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bf-sw-disp-color-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-align: center;
}
.bf-sw-disp-color-swatches {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.bf-sw-disp-color-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
}
.bf-sw-disp-color-cell .bf-field { gap: 0; }
.bf-sw-disp-color-cell .bf-field-label { display: none; }
.bf-sw-disp-color-cell .bf-color-bar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--hair);
}
.bf-sw-disp-color-state {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.bf-sw-disp-color-sep {
  color: var(--muted);
  font-size: 14px;
  padding: 0 2px;
  align-self: center;
}

.bf-sw-disp-preview-row {
  display: grid;
  /* minmax(0,1fr) (em vez de 1fr = minmax(auto,1fr)) deixa a coluna da direita
     ENCOLHER abaixo do min-content do conteudo — senao o botao PREVIA / input
     SIGLA estouram a largura do card. */
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
.bf-sw-disp-preview {
  appearance: none;
  border: 1px solid var(--hair);
  /* Transparente pra quando BACK=transparente a moldura mostrar o
     fundo da pagina/card, espelhando o comportamento do tile no LIVE. */
  background: transparent;
  border-radius: var(--r-md);
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease;
}
.bf-sw-disp-preview:hover { border-color: var(--hair-strong); }

.bf-sw-disp-toggles {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;   /* permite encolher dentro da coluna minmax(0,1fr) */
  /* Stretch pra ocupar mesma altura do tile do preview (96px + padding).
     Distribui PREVIEW + sigla pra preencher simetricamente. */
  justify-content: space-between;
}
.bf-sw-disp-toggles .bf-input-num {
  min-height: 44px;
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
}
.bf-sw-disp-toggles .bf-sw-disp-sigla .bf-input {
  width: 100%;
  box-sizing: border-box;
}
.bf-sw-disp-toggles .bf-sw-disp-sigla {
  margin: 0;
  flex: 0 0 auto;
}
.bf-sw-disp-toggles .bf-sw-disp-sigla .bf-field-label {
  margin-bottom: 2px;
}

.bf-sw-disp-sigla .bf-input {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Modal do picker de icones — grid 6 colunas com 51 + algumas vazias.
   Cada celula mostra o icone tingido na cor on/off do estado atual. */
.bf-sw-icon-picker {
  max-width: 460px;
  width: 92vw;
}
.bf-sw-icon-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  padding: 14px;
  max-height: 60vh;
  overflow-y: auto;
}
.bf-sw-icon-cell {
  appearance: none;
  background: #0e0e12;
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.bf-sw-icon-cell:hover { border-color: var(--hair-strong); }
.bf-sw-icon-cell.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, #0e0e12);
}

/* Celula coringa "TEXT" no picker — texto centralizado, sem icone.
   Selecionar essa entrada coloca o SW em mode='text'. */
.bf-sw-icon-cell-text span {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

/* ============================================================
   BACK IMAGES — paleta + card Upload Images + Editor modal
   ============================================================ */

/* IMAGES section dentro do popover do ColorBar — usa quadrados maiores
   pra dar pra ver os thumbnails. Vazio = hash diagonal cinza. */
.bf-color-pop-grid-images {
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.bf-swatch-image {
  position: relative;
  height: 52px;
  border-radius: var(--r-sm);
  background-color: #1a1c20;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.bf-swatch-image-empty { opacity: 0.65; }
.bf-swatch-image-label {
  position: absolute;
  right: 4px;
  bottom: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  color: var(--text);
  background: rgba(0,0,0,0.55);
  padding: 1px 4px;
  border-radius: var(--r-sm);
  letter-spacing: 0.05em;
  pointer-events: none;
}

/* Card Upload Images: grid 5x2, cada slot com thumb + numero + delete. */
.bf-img-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 4px;
}
@media (max-width: 480px) {
  .bf-img-grid { grid-template-columns: repeat(3, 1fr); }
}
.bf-img-slot {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-sm);
  overflow: hidden;
}
.bf-img-slot-tile {
  appearance: none;
  display: block;
  width: 100%;
  height: 100%;
  border: 1px dashed var(--hair-strong);
  border-radius: var(--r-sm);
  background-color: #0f1014;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--muted);
  cursor: pointer;
  position: relative;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.bf-img-slot.is-filled .bf-img-slot-tile { border-style: solid; border-color: var(--hair); }
.bf-img-slot-tile:hover:not(:disabled) { border-color: var(--accent); transform: scale(1.02); }
.bf-img-slot-tile:disabled { opacity: 0.5; cursor: not-allowed; }
.bf-img-slot-plus {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--muted);
  font-weight: 300;
}
.bf-img-slot-num {
  position: absolute;
  left: 6px;
  top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  color: var(--text);
  background: rgba(0,0,0,0.55);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  letter-spacing: 0.05em;
}
.bf-img-slot-del {
  appearance: none;
  position: absolute;
  right: 5px;
  top: 5px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--hair);
  background: rgba(0,0,0,0.7);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.bf-img-slot-del:hover:not(:disabled) {
  background: rgba(200,30,30,0.8);
  border-color: #ff7a1a;
}
.bf-img-slot.is-busy { opacity: 0.5; pointer-events: none; }

/* Editor modal: layout SEMPRE empilhado (preview em cima, controles embaixo)
   pra encaixar no viewport de celular. Modal fixo na altura da viewport;
   body rola; actions ficam sticky no rodape pra sempre acessivel. */
.bf-image-editor {
  width: min(560px, 96vw);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
}
.bf-image-editor-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
}
.bf-image-editor-preview-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-conic-gradient(#1a1c20 0% 25%, #0e0f12 0% 50%) 50% / 16px 16px;
  border-radius: var(--r-sm);
  padding: 10px;
  position: relative;
  /* Preview limita altura por viewport pra deixar espaco pros controles
     no scroll. Em telas baixas (celular landscape) corta mais cedo. */
  max-height: 42vh;
  flex-shrink: 0;
  /* Gestos touch (pan + pinch) sao consumidos pelo wrapper — sem isso o
     browser tenta scroll/pinch-zoom da pagina e os handlers nao recebem
     pointermove direito em mobile. */
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.bf-image-editor-preview-wrap:active { cursor: grabbing; }
.bf-image-editor-canvas {
  display: block;
  border-radius: var(--r-sm);
  box-shadow: 0 0 18px rgba(0,0,0,0.55);
  background: #000;
  image-rendering: -webkit-optimize-contrast;
  /* Canvas responsivo: encaixa na largura disponivel preservando o aspect
     do display alvo (set inline via style). max-height respeita o cap do
     preview-wrap pra nao estourar em portrait. */
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: calc(42vh - 20px);
  object-fit: contain;
  /* Canvas e so visual; o ponteiro vai pro wrapper, que tem os handlers. */
  pointer-events: none;
}
.bf-image-editor-gesture-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--muted);
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  pointer-events: none;
  opacity: 0.85;
  white-space: nowrap;
}
.bf-image-editor-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.12em;
}
.bf-image-editor-tools {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bf-image-editor-section {
  background: #0e0f12;
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}
.bf-image-editor-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--muted);
  list-style: none;
}
.bf-image-editor-section-title::-webkit-details-marker { display: none; }
.bf-image-editor-section-title::marker { content: ''; }
.bf-image-editor-chevron {
  font-size: 11px;
  line-height: 1;
  color: var(--muted);
  transition: transform 0.15s ease;
}
.bf-image-editor-section[open] > .bf-image-editor-section-title .bf-image-editor-chevron {
  transform: rotate(180deg);
}
.bf-image-editor-section-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.bf-image-editor-slider {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bf-image-editor-slider-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text);
}
.bf-image-editor-slider-value {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}
.bf-image-editor-slider input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}
.bf-image-editor-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}
.bf-image-editor-field input.bf-input,
.bf-image-editor-field select.bf-input {
  height: 36px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  background: #15161a;
  border: 1px solid var(--hair);
  color: var(--text);
}
.bf-image-editor-text-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
/* Abas de TEXTO (multi-texto): chips selecionáveis + botão de adicionar. */
.bf-image-editor-text-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.bf-image-editor-text-chip,
.bf-image-editor-text-add {
  appearance: none;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: #15161a;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.bf-image-editor-text-chip.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, #15161a);
}
.bf-image-editor-text-add {
  border-style: dashed;
  background: transparent;
  color: var(--text);
}
.bf-image-editor-text-add:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.bf-image-editor-text-del {
  color: var(--accent-warn, #ff7a1a);
  border-color: color-mix(in srgb, var(--accent-warn, #ff7a1a) 40%, var(--hair));
}
.bf-image-editor-color {
  width: 56px;
  height: 36px;
  padding: 2px;
  cursor: pointer;
}
.bf-image-editor-toggle {
  appearance: none;
  height: 36px;
  min-width: 36px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hair);
  background: #15161a;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bf-image-editor-toggle.is-on {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, #15161a);
}
.bf-image-editor-actions {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--hair);
  background: var(--card, #15161a);
  /* Actions ficam fixas no rodape do modal (fora do scroll do body), pra
     que SALVAR/CANCELAR estejam sempre acessiveis em qualquer altura. */
  flex-shrink: 0;
}
.bf-action-ghost {
  background: var(--field-bg);
}
.bf-action-primary {
  border-color: color-mix(in srgb, var(--accent) 65%, var(--hair));
  color: var(--accent);
}
.bf-action-primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 14%, #131318);
}

/* ============================================================
   Desktop — distribui os cards horizontalmente.
   Em telas largas (>= 900px), o container .bf-content vira um grid
   de 3 colunas. A BankPage usa um grid proprio (.bf-content-bank).
   Mobile (< 900px) fica como antes: cards empilhados (block flow
   + margin-top entre eles).
   ============================================================ */
@media (min-width: 900px) {
  /* O wrapper .phone-frame e fixo em 480px (formato celular) por default.
     No desktop, libera pra usar a largura toda — sem isso o grid de cards
     abaixo nao tem espaco horizontal pra distribuir. */
  .phone-frame {
    max-width: 100%;
  }
  .bf-content {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* dense: cards pequenos backfillam buracos deixados por cards largos
       (ex: um card 1-col ao lado de um card 2-col na mesma linha). */
    grid-auto-flow: row dense;
    gap: 14px;
    align-content: start;
    /* stretch: cards da mesma linha ficam todos com a altura do mais alto. */
    align-items: stretch;
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 24px 110px;
  }
  /* Header da pagina, tabs e qualquer fragment-wrapper ocupam a linha
     inteira — sao "barras", nao cards de conteudo. */
  .bf-content > .bf-header,
  .bf-content > .bf-icon-tabs,
  .bf-content > .bf-page-tabs,
  .bf-content > .bf-monitor-midi { grid-column: 1 / -1; }
  /* A barra de tabs ocupa a linha inteira (1/-1), mas os .bf-icon-tab tem
     aspect-ratio:1 — sem limite de largura cada coluna fica com centenas de
     px e os quadrados explodem. Trava a largura da barra e centraliza. */
  .bf-content > .bf-icon-tabs {
    max-width: 520px;
    justify-self: center;
  }
  /* SYSTEM no desktop: os 6 cards voltam pra uma linha so (mobile usa 3+3).
     Versao compacta — icone/fonte menores pra caber nos 520px da barra. */
  .bf-icon-tabs.cols-6 {
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
  }
  .bf-icon-tabs.cols-6 .bf-icon-tab { padding: 10px 3px; aspect-ratio: 1; }
  .bf-icon-tabs.cols-6 .bf-icon-tab svg { width: 38px; height: 38px; }
  .bf-icon-tabs.cols-6 .bf-icon-tab span {
    font-size: 10px;
    letter-spacing: 0.02em;
  }

  /* ── GLOBAL: header em linha unica no desktop ──────────────────────
     Titulo (esq) + barra de abas (centro) + icones de conexao (dir) na
     MESMA linha do grid, como na referencia. O .bf-header vira
     display:contents pra que seus filhos (.bf-title / .bf-conn-icons)
     participem direto do grid de 3 colunas do .bf-content; a .bf-icon-tabs
     (irma) cai na coluna do meio. Escopado em .bf-content-global pra nao
     mexer em SYSTEM/BANK. Vem DEPOIS da regra generica acima pra vencer
     por ordem de fonte (mesma especificidade). */
  .bf-content-global,
  .bf-content-system {
    padding-top: 26px;
  }
  .bf-content-global > .bf-header,
  .bf-content-system > .bf-header {
    display: contents;
  }
  .bf-content-global > .bf-header > .bf-title,
  .bf-content-system > .bf-header > .bf-title {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: start;
    /* Titulo grande como na referencia; escala com a largura pra nao
       estourar a coluna 1 (~280px) no breakpoint de 900px. */
    font-size: clamp(44px, 5vw, 72px);
  }
  .bf-content-global > .bf-icon-tabs,
  .bf-content-system > .bf-icon-tabs {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    margin: 0;
  }
  .bf-content-global > .bf-header > .bf-conn-icons,
  .bf-content-system > .bf-header > .bf-conn-icons {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: end;
  }

  /* ── GLOBAL desktop: 2 colunas largas + header em 2 linhas ───────────
     Antes a GLOBAL herdava o grid de 3 colunas de .bf-content, mas as
     abas tem so 2-4 cards: o grid encolhia ao conteudo (~347px/card) e
     deixava a 3a coluna vazia, jogando tudo pra esquerda. Aqui a GLOBAL
     passa a usar 2 colunas mais largas (~510px/card) num container
     centralizado e mais estreito — cards maiores e melhor distribuidos
     no navegador desktop. Escopado em .bf-content-global: SYSTEM e demais
     paginas seguem com o grid de 3 colunas. Mobile (< 900px) intacto.
     Vem DEPOIS das regras compartilhadas acima pra vencer por ordem. */
  .bf-content-global {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* width:100% e necessario: .bf-content e item flex de .bf-screen e por
       padrao encolhe ao conteudo (as colunas 1fr colapsavam pra ~347px do
       max-content do card). Com largura definida, as 2 colunas dividem os
       1120px e cada card vira ~527px. margin:0 auto (herdado) centraliza. */
    width: 100%;
    max-width: 1120px;
    gap: 18px;
  }
  /* Header em LINHA UNICA (mesmo design do SYSTEM / imagem de referencia):
     titulo (esq) + barra de abas (centro) + icones de conexao (dir), todos
     na linha 1. A barra ocupa a linha 1 inteira (1/-1) e se autocentraliza;
     titulo e icones ficam por cima, nas pontas. O titulo fica menor que o
     padrao compartilhado (clamp 44-72) pra nao colidir com a barra
     centralizada de 640px. */
  .bf-content-global > .bf-header > .bf-title {
    font-size: clamp(34px, 3.2vw, 48px);
  }
  .bf-content-global > .bf-header > .bf-conn-icons {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: end;
  }
  .bf-content-global > .bf-icon-tabs {
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    margin: 0;
  }
  /* Cards com anel de LED: no grid de 3 col eles ocupavam 2 col (pareando
     com um card pequeno). No grid de 2 col, esse span esticaria pra largura
     toda — volta a 1 coluna pra manter LEDS num 2x2 equilibrado. */
  .bf-content-global .bf-card:has(> .bf-fsw-grid) {
    grid-column: auto;
  }
  /* Card impar solitario na ultima linha (abas com 3 cards: DISPLAY e
     BANCOS): em vez de ficar preso na coluna 1 com a coluna 2 vazia,
     centraliza entre as duas colunas, mantendo a largura de 1 card.
     A conta do :nth-child considera .bf-header + .bf-icon-tabs (2 itens
     pares antes dos cards): N cards impares => ultimo filho impar.
     Exclui cards full-width (upload de imagens, .bf-card-wide) pra nao
     encolhe-los quando forem o ultimo. */
  .bf-content-global > .bf-card:last-child:nth-child(odd):not(.bf-card-wide):not(:has(> .bf-img-grid)) {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: 527px;
  }

  /* ── SYSTEM desktop: 2 colunas largas + header em 2 linhas ───────────
     Mesma adaptacao do GLOBAL (acima). As abas do SYSTEM tem 2-3 cards;
     no grid de 3 colunas herdado de .bf-content elas encolhiam ao conteudo
     (~347px/card) e deixavam coluna(s) vazia(s). Aqui o SYSTEM passa a
     usar 2 colunas largas (~527px/card) num container centralizado, igual
     ao GLOBAL — as duas paginas de config ficam com a mesma cara no
     navegador desktop. Escopado em .bf-content-system. Mobile (< 900px)
     intacto. Vem DEPOIS das regras de header compartilhadas (que assumiam
     3 colunas) pra vencer por ordem de fonte. */
  .bf-content-system {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* width:100% pelo mesmo motivo do GLOBAL: .bf-content e item flex de
       .bf-screen e encolheria ao conteudo, colapsando as colunas 1fr. */
    width: 100%;
    max-width: 1120px;
    gap: 18px;
  }
  /* Header em LINHA UNICA (como na referencia / imagem 2): titulo (esq) +
     barra de abas (centro) + icones de conexao (dir), todos na linha 1. A
     barra ocupa a linha 1 inteira (1/-1) e se autocentraliza; o titulo e os
     icones ficam por cima, nas pontas (justify start/end). O titulo fica
     menor que o padrao compartilhado (clamp 44-72) pra nao colidir com a
     barra centralizada de 640px. */
  .bf-content-system > .bf-header > .bf-title {
    font-size: clamp(34px, 3.2vw, 48px);
  }
  .bf-content-system > .bf-header > .bf-conn-icons {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: end;
  }
  .bf-content-system > .bf-icon-tabs {
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    margin: 0;
  }
  /* Card impar solitario na ultima linha (aba USB HOST tem 3 cards):
     centraliza entre as 2 colunas com a largura de 1 card em vez de ficar
     preso na coluna 1 com a 2 vazia. Pre-card DOM children = .bf-header
     (#1) + .bf-icon-tabs (#2), entao 3 cards => ultimo no #5 (impar, casa);
     abas de 2 cards => ultimo no #4 (par, nao casa, preenchem a linha).
     .bf-stack-centered (BACKUP) nao e .bf-card — tem regra propria. */
  .bf-content-system > .bf-card:last-child:nth-child(odd):not(.bf-card-wide):not(:has(> .bf-img-grid)) {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: 527px;
  }

  /* ── BANK (SET PRESET): header em linha unica no desktop ───────────
     Mesmo padrao do GLOBAL — o .bf-header vira display:contents e seus
     filhos (titulo / slot central com o toggle PRESET-LIVE MODE / icones)
     viram itens do grid de 3 colunas do .bf-content-bank, na linha 1.
     O toggle PRESET/LIVE sai da col-2 e sobe pro centro (via centerSlot do
     PageHeader); a col-2 passa a comecar pelo LAYER. */
  .bf-content-bank { padding-top: 26px; }
  .bf-content-bank > .bf-header { display: contents; }
  .bf-content-bank > .bf-header > .bf-title {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: start;
    font-size: clamp(40px, 4.6vw, 64px);
  }
  .bf-content-bank > .bf-header > .bf-header-center {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    width: 100%;
    max-width: 560px;
  }
  /* O toggle ocupa a largura do slot central, sem margens herdadas. */
  .bf-content-bank > .bf-header > .bf-header-center .bf-mode-switch-wrap {
    margin: 0;
  }
  .bf-content-bank > .bf-header > .bf-conn-icons {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: end;
  }

  /* Margin-top entre cards e substituida pelo `gap` do grid. */
  .bf-card + .bf-card { margin-top: 0; }
  /* Cards "largos" — layouts internos que ficam apertados em 360px.
     Marcados com a classe modifier .bf-card-wide ou por seletor
     direto (image grid 5x2). :has() degrada graciosamente em browsers
     antigos (card vira coluna normal). */
  .bf-card.bf-card-wide,
  .bf-card:has(> .bf-img-grid) { grid-column: 1 / -1; }
  /* Cards com anel de LED (fsw-grid) ocupam 2 das 3 colunas — assim pareiam
     com um card pequeno ao lado (ex: Brightness+Banks, Preview+Dedicados)
     em vez de esticar pra largura toda e espalhar os rings. */
  .bf-card:has(> .bf-fsw-grid) { grid-column: span 2; }

  /* Par GIG VIEW + LIVE MODE LAYOUT: ocupa a linha inteira e divide em
     2 colunas iguais (50/50). align-items: stretch deixa os dois cards
     com a MESMA altura. */
  .bf-display-pair {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: stretch;
  }
  /* O card do LIVE MODE LAYOUT vira flex column pra o esboco crescer e
     preencher a altura (igualada ao GIG VIEW). */
  .bf-display-pair > .bf-card:has(.bf-llsk) {
    display: flex;
    flex-direction: column;
  }
  .bf-display-pair > .bf-card:has(.bf-llsk) .bf-llsk {
    flex: 1;
    justify-content: center;
  }
  .bf-display-pair > .bf-card:has(.bf-llsk) .bf-llsk-screen {
    max-width: 460px;
  }

  /* WiFi: titulo "Redes proximas" + lista agrupados num so item do grid
     (.bf-wifi-nearby), pra o titulo nao cair numa celula sozinho separando
     os cards. Zera o padding-top do titulo aqui pra alinhar o topo da
     coluna com o card de conexao ao lado. */
  .bf-wifi-nearby > .bf-section-label { padding-top: 0; }

  /* WiFi: os 2 cards (conexao + redes) num flex centralizado, ocupando a
     linha inteira. justify-content center distribui o grupo no meio em vez
     de empurrar pra esquerda (limitacao do grid com header full-width). */
  .bf-wifi-cols {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
  }
  .bf-wifi-cols > * {
    flex: 0 1 440px;
    min-width: 0;
  }

  /* Card unico centralizado (ex: MODELO): ocupa a linha inteira mas com
     largura limitada e centrado, em vez de colado na 1a coluna. Reutilizavel
     em qualquer secao de 1 card so. */
  .bf-content > .bf-card.bf-card-centered {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: 520px;
  }

  /* Cards empilhados e centralizados (ex: BACKUP): coluna unica no meio. */
  .bf-content > .bf-stack-centered {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /* LED Brightness: pareia com BANKS & PRESETS (alto). Estica pra mesma
     altura da linha e empilha — porcentagem em cima, barra preenchendo o
     resto embaixo — pra nao ficar um card baixo e vazio ao lado. */
  .bf-content > .bf-card:has(.bf-brightness) {
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  .bf-content > .bf-card:has(.bf-brightness) .bf-brightness {
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    /* centra o conjunto (porcentagem + barra) verticalmente no card alto. */
    justify-content: center;
    gap: 28px;
  }
  .bf-content > .bf-card:has(.bf-brightness) .bf-brightness-top {
    justify-content: center;
  }
  /* Indicador de porcentagem maior no desktop. */
  .bf-content > .bf-card:has(.bf-brightness) .bf-brightness-circle {
    width: 112px;
    height: 112px;
  }
  .bf-content > .bf-card:has(.bf-brightness) .bf-brightness-circle .v {
    font-size: 54px;
  }
  .bf-content > .bf-card:has(.bf-brightness) .bf-brightness-unit {
    font-size: 18px;
  }
  /* Barra fina, como era (sem esticar pra altura toda). */
  .bf-content > .bf-card:has(.bf-brightness) .bf-slider {
    height: 64px;
    flex: 0 0 auto;
  }

  /* LED Preview Live Mode: pareia com LEDS DEDICADOS (alto). Estica pra
     mesma altura e o preview do anel cresce/centraliza pra preencher. A
     descricao fica fixa no rodape. */
  .bf-content > .bf-card:has(.bf-led-preview-demo) {
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  .bf-content > .bf-card:has(.bf-led-preview-demo) .bf-led-preview-demo {
    flex: 1;
    padding: 12px 0;
  }
  /* PRESET MODE/LIVE MODE e LAYER 1/2 viram grid items irmaos — alinha
     tops (zera o margin-top:-8px do .bf-layer-switch-wrap) e remove
     margins inferiores das seg-bars pro proximo card (PARAMETERS)
     encaixar logo abaixo via gap do grid. */
  .bf-layer-switch-wrap { margin-top: 0; }
  .bf-mode-switch { margin-bottom: 0; }
  .bf-layer-switch { margin-bottom: 0; }

  /* BankPage: 3 colunas INDEPENDENTES (cada uma flex column propria) pra
     que crescer um card numa coluna nao empurre items da outra coluna.
     - col 1 (1fr):    BANK row + MIDI tabs card (portaled)
     - col 2 (1.4fr):  PRESET MODE seg + PARAMETERS card / LIVE panel (portaled)
     - col 3 (0.6fr):  LAYER seg + MONITOR card (portaled)
     Cada bf-bank-col tem seu proprio flex flow vertical, sem compartilhar
     altura de linha com as outras colunas (que era o problema do grid). */
  .bf-content-bank {
    /* col 1 (BANK) 1fr; col 2 (PARAMS) 1.2fr; col 3 (MONITOR) 0.8fr.
       minmax(0, Xfr) trava a coluna no fr exato, ignorando min-content
       do conteudo. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 0.8fr);
  }
  .bf-content-bank > .bf-bank-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    /* Estica cada coluna ate a altura da linha (que e a do card mais alto,
       tipicamente PARAMS) — combinado com flex:1 no slot do monitor faz
       o MONITOR esticar pra acompanhar a altura do PARAMETERS. */
    align-self: stretch;
  }
  /* min-width: 0 em descendentes interativos com tamanho intrinseco grande
     (input de nome com font 52px + maxLength 16, selects com options muitos
     digitos) — sem isso a min-content do input/select empurra a coluna a
     crescer alem do fr definido, mudando a largura ao trocar de aba. */
  .bf-content-bank .bf-preset-name-input,
  .bf-content-bank .bf-input,
  .bf-content-bank .bf-select {
    min-width: 0;
  }
  .bf-content-bank .bf-preset-card,
  .bf-content-bank .bf-live-monitor {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* MONITOR fill — o slot ocupa o espaco vertical restante no col-3 (apos
     LAYER seg), e o card .bf-live-monitor portaled dentro do slot estica
     pra preencher o slot. */
  .bf-bank-col-3 > .bf-bank-slot-monitor {
    flex: 1;
    min-height: 0;
    display: flex;
  }
  .bf-bank-col-3 > .bf-bank-slot-monitor > .bf-live-monitor {
    flex: 1;
    min-height: 0;
  }
  /* No desktop os itens dentro das colunas usam flex `gap` pra espaco — zera
     margins verticais herdadas do mobile pra evitar gap duplo. */
  .bf-bank-col > .bf-bank-row { margin: 0; }
  .bf-bank-col > .bf-mode-switch-wrap { margin: 0; }
  .bf-bank-col > .bf-bank-slot:empty { display: none; }
  /* Alinha o topo dos 3 cards: zera a margem-topo de QUALQUER card
     teleportado pros slots de params/monitor (PARAMETERS em PRESET,
     .bf-sw-card / painel em LIVE, MONITOR). No desktop eles sao o 1o item
     da coluna, entao a margem-topo herdada do mobile so os desalinha do
     bank-row (col-1, ja com margin:0). */
  .bf-content-bank .bf-bank-slot-params > *,
  .bf-content-bank .bf-bank-slot-monitor > * {
    margin-top: 0;
  }

  /* Card de edicao do SW (.bf-sw-card): no desktop o campo do modo (STOMP)
     sobe pra MESMA linha dos icones (engrenagem / display / copy / paste),
     em vez de ficar sozinho na linha de baixo. Vira layout em linha — o
     iconrow mantem a largura natural e o mode-field preenche o resto.
     Mobile continua empilhado (regra base: .bf-sw-card-tabs em coluna). */
  .bf-sw-card-tabs {
    flex-direction: row;
    align-items: center;
    padding-right: 0;   /* sem miniatura no desktop (usa a aba DISPLAY) */
  }
  .bf-sw-card-iconrow { flex: 0 0 auto; }
  .bf-sw-card-tabs > .bf-sw-mode-field {
    flex: 1 1 auto;
    width: auto;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   Studio redesign · BANK page (mobile)
   Componentes de webApp/pages/bank.jsx: NowPlayingCard + SwPreviewGrid.
   Inspirado em refactor2/project/variants/v1-studio.jsx do handoff de
   Claude Design. Mobile-only — no desktop o layout existente (3 colunas
   com portals) continua valendo.
   ────────────────────────────────────────────────────────────────────── */

/* NOW PLAYING ----------------------------------------------------------- */
.bf-studio-now-playing {
  margin: 8px 0 14px;
  padding: 14px 14px 14px 16px;
  background:
    linear-gradient(180deg, rgba(28,28,34,0.92) 0%, rgba(16,16,20,0.92) 100%) padding-box,
    var(--bevel-edge) border-box;
  border: 2px solid transparent;
  border-radius: 18px;
  box-shadow:
    var(--bevel-relief),
    0 18px 40px -28px rgba(0,0,0,0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.bf-studio-np-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.bf-studio-np-head-right {
  display: inline-flex; align-items: center; gap: 10px;
}
/* Variante "stack" — head-right empilhado verticalmente (TELA quadrado em
   cima, SLOT+ retangular embaixo). Aciona quando o card precisa dos dois
   botoes em coluna no canto sup. direito. Como vive em .bf-studio-np-head
   (que e flex space-between center), absoluta-positionamos pra escapar
   da linha do eyebrow sem empurrar a altura do head. */
.bf-studio-np-now-playing { /* fallback (no-op) */ }
.bf-studio-now-playing { position: relative; }
.bf-studio-np-head-right-stack {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex; flex-direction: row; align-items: center;
  gap: 6px;
  z-index: 1;
}
/* Botao TELA quadrado — so o icone, no canto superior direito do card. */
.bf-studio-np-tela-sq {
  appearance: none; cursor: pointer;
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hair-strong);
  border-radius: 50%;
  color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.2s ease;
}
.bf-studio-np-tela-sq svg { width: 16px; height: 16px; }
.bf-studio-np-tela-sq:hover { color: var(--text); border-color: rgba(255,255,255,0.20); }
.bf-studio-np-tela-sq.is-open {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent-2);
  box-shadow: 0 0 12px -4px var(--accent-glow);
}
.bf-studio-np-tela-sq svg { display: block; }
/* SLOT+ quadrado — mesmo tamanho/visual do TELA, lado-a-lado. So o icone
   "+", sem texto. Hover/active = laranja accent. */
.bf-studio-np-slot-sq {
  appearance: none; cursor: pointer;
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hair-strong);
  border-radius: 50%;
  color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.2s ease;
}
.bf-studio-np-slot-sq svg { width: 18px; height: 18px; }
.bf-studio-np-slot-sq:hover:not([disabled]) {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent-2);
  box-shadow: 0 0 12px -4px var(--accent-glow);
}
.bf-studio-np-slot-sq[disabled] { cursor: default; opacity: 0.35; }
.bf-studio-np-slot-sq svg { display: block; }
.bf-studio-np-eyebrow {
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: 0.2em;
  color: var(--muted); text-transform: uppercase;
  font-weight: 700;
}
.bf-studio-np-tag {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.16em;
  color: var(--muted); text-transform: uppercase;
}
.bf-studio-np-title-row {
  display: flex; align-items: flex-end; gap: 12px;
  /* Reserva espaco horizontal pro head-right-stack absolutamente
     posicionado (TELA 56 + gap 6 + SLOT+ 56 = 118px + margem ~12). */
  padding-right: 132px;
}
.bf-studio-np-title {
  flex: 1; margin: 0;
  font-family: var(--font-sys);
  font-size: 30px; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.0;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Variant accent — title-row com stripe laranja vertical na esquerda. */
.bf-studio-np-title-row-accent {
  align-items: stretch;
  gap: 12px;
}
/* LIVE mode: card vira resumo (so titulo + subtitulo), sem TELA/SLOT+
   no header — zera o padding-right reservado pra eles. */
.bf-studio-np-title-row.is-live-summary {
  padding-right: 0;
}
.bf-studio-np-accent-bar {
  display: none;  /* removido — referencia visual mostra titulo flush-left */
}
.bf-studio-np-title-row-accent { gap: 0; }
.bf-studio-np-title-wrap {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
  justify-content: center;
}
.bf-studio-np-meter {
  display: flex; align-items: flex-end; gap: 2px; height: 22px;
}
.bf-studio-np-meter > span {
  width: 2.5px; border-radius: 1px;
  background: var(--accent);
}
.bf-studio-np-sub {
  margin-top: 0;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.04em;
  color: var(--muted);
  min-height: 12px;
}
.bf-studio-np-sub strong {
  color: var(--text); font-weight: 700;
  letter-spacing: 0.04em;
}
/* StudioToggleRow — fileira de 2 toggles compactos abaixo do
   NowPlayingCard. PRESET/LIVE + LAYER 1/2 ficam lado-a-lado. */
.bf-studio-toggle-row {
  margin: 10px 0 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
/* Linha de cima — só PRESET/LIVE, ocupa toda a largura num pill maior. */
.bf-studio-toggle-row-top {
  margin: 0 0 12px;
  grid-template-columns: 1fr;
}
.bf-studio-toggle-row-top .bf-studio-toggle {
  padding: 5px;
  border-radius: 999px;
}
.bf-studio-toggle-row-top .bf-studio-toggle-btn {
  height: 42px;
  font-size: 11px;
  letter-spacing: 0.24em;
}
.bf-studio-toggle-row-top .bf-studio-toggle-btn.is-active {
  background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
  box-shadow:
    0 8px 22px -6px color-mix(in srgb, var(--accent) 65%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.25);
}
/* LAYER N — botao texto no canto sup. direito do card MAIN (LIVE mode).
   Substitui o TELA quadrado. Clicar troca entre LAYER 1 e LAYER 2. */
.bf-studio-np-layer-btn {
  appearance: none; cursor: pointer;
  padding: 7px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  font-weight: 700;
  text-transform: uppercase;
  transition: background .15s, border-color .15s, color .15s;
}
.bf-studio-np-layer-btn:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent-2);
}
.bf-studio-np-layer-btn.is-l2 {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent-2);
}
.bf-studio-toggle {
  display: flex; padding: 4px;
  /* Bisotê metal escuro no pill (cor solida vira gradiente solido). */
  background:
    linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)) padding-box,
    var(--bevel-edge) border-box;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  gap: 4px;
  box-shadow: var(--bevel-relief);
}
.bf-studio-toggle.has-center { position: relative; }
.bf-studio-toggle.is-disabled { opacity: 0.5; }
/* Badge de LAYER sobreposto no centro do toggle PRESET/LIVE (na divisa
   entre as duas opcoes). Mostra o layer atual (1/2); clicar alterna —
   so quando o Layer 2 esta habilitado (senao fica travado/dimmed). */
.bf-studio-toggle-center {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;  /* so o botao interno recebe clique */
}
.bf-studio-layer-badge {
  pointer-events: auto;
  appearance: none; cursor: pointer;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
  border: 3px solid #14110d;
  box-shadow:
    0 6px 18px -4px color-mix(in srgb, var(--accent) 70%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.3);
  color: #1a0e06;
  font-family: var(--font-display, "Antonio"), var(--font-mono);
  font-weight: 800; font-size: 26px; line-height: 1;
  transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.bf-studio-layer-badge:not(.is-locked):active { transform: scale(0.94); }
/* Layer 2 ativo: inverte pra um anel claro com nucleo escuro, deixando
   visivelmente diferente do estado layer 1. */
.bf-studio-layer-badge.is-l2 {
  background: linear-gradient(180deg, #ffd9b8 0%, #ffbe8f 100%);
  border-color: var(--accent);
  color: #3a1e08;
  box-shadow:
    0 6px 18px -4px var(--accent-glow),
    inset 0 1px 0 rgba(255,255,255,0.5);
}
/* Sem Layer 2: badge travado — mostra "1" estatico, sem cursor. Cor CLARA e
   OPACA (sem transparencia/dimming) a pedido: tom neutro claro em vez do
   laranja escurecido. */
.bf-studio-layer-badge.is-locked {
  cursor: default;
  filter: none;
  opacity: 1;
  background: linear-gradient(180deg, #d9d5cc 0%, #b9b4aa 100%);
  border-color: #2a261f;
  color: #221d16;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
.bf-studio-toggle-btn {
  flex: 1; appearance: none; border: 0; cursor: pointer;
  height: 30px; border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.22em;
  font-weight: 700; text-transform: uppercase;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.2s ease;
}
.bf-studio-toggle-btn[disabled] {
  cursor: default; opacity: 0.35;
}
.bf-studio-toggle-btn.is-active {
  background: var(--accent);
  color: #1a0e06;
  box-shadow: 0 4px 14px -4px var(--accent-glow);
}

.bf-studio-np-mode {
  margin-top: 12px;
  display: flex; padding: 4px;
  /* Mesmo bisotê do .bf-studio-toggle (mesmo controle visual). */
  background:
    linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)) padding-box,
    var(--bevel-edge) border-box;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  gap: 4px;
  box-shadow: var(--bevel-relief);
}
.bf-studio-np-mode-btn {
  flex: 1; appearance: none; border: 0; cursor: pointer;
  height: 32px; border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.22em;
  font-weight: 700; text-transform: uppercase;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.2s ease;
}
.bf-studio-np-mode-btn.is-active {
  background: var(--accent);
  color: #1a0e06;
  box-shadow: 0 4px 14px -4px var(--accent-glow);
}
.bf-studio-np-meta {
  margin-top: 12px;
  display: grid;
  /* PC + CANAL — botao "+" agora vive no head-right (SLOT+), nao mais na
     grid. Mantem 2 colunas iguais. */
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
}
.bf-studio-np-meta-extra {
  margin-top: 8px;
}
.bf-studio-np-extras-list {
  margin-top: 0;
  display: flex; flex-direction: column;
  gap: 0;
}
.bf-studio-np-add {
  appearance: none; cursor: pointer;
  width: 38px; min-width: 38px;
  align-self: stretch;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--r-md);
  color: var(--accent-2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.bf-studio-np-add:hover:not([disabled]) {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: var(--accent);
}
.bf-studio-np-add[disabled] {
  cursor: default;
  opacity: 0.35;
}
.bf-studio-np-remove {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hair-strong);
  color: var(--muted);
}
.bf-studio-np-remove:hover {
  background: rgba(229,69,69,0.12);
  border-color: rgba(229,69,69,0.45);
  color: #ff6a6a;
}
.bf-studio-np-pill {
  appearance: none; cursor: pointer;
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; text-align: left;
  color: var(--text);
}
.bf-studio-np-pill[disabled] { cursor: default; }
.bf-studio-np-pill-l {
  display: block;
  font-family: var(--font-mono);
  font-size: 8px; letter-spacing: 0.2em;
  color: var(--faint); text-transform: uppercase; font-weight: 700;
  margin-bottom: 3px;
}
.bf-studio-np-pill-v {
  display: block;
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.04em; line-height: 1;
  color: var(--text);
}
.bf-studio-np-pill.is-accent .bf-studio-np-pill-v { color: var(--accent-2); }
.bf-studio-np-pill.is-accent.is-mute .bf-studio-np-pill-v { color: var(--accent-2); }
.bf-studio-np-pill.is-readonly { cursor: default; }
/* Variante "lg" — pill alto estilo card, valor grande centralizado, label
   pequena flutuando no canto sup. esquerdo. Visual da imagem fornecida
   pelo usuario (refactor refinado). */
.bf-studio-np-pill-lg {
  position: relative;
  padding: 16px 34px 10px 14px;
  align-items: flex-start; justify-content: flex-start;
  min-height: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hair-strong);
  border-radius: 14px;
}
.bf-studio-np-pill-lg .bf-studio-np-pill-l {
  position: absolute;
  top: 6px; left: 14px;
  margin-bottom: 0;
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: 0.22em;
  color: var(--faint);
  font-weight: 700;
  text-transform: uppercase;
}
.bf-studio-np-pill-lg .bf-studio-np-pill-v {
  font-family: "Antonio", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  margin: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 0;
}
.bf-studio-np-pill-lg .bf-studio-np-pill-chev {
  position: absolute; top: 50%; right: 14px;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--faint);
}
.bf-studio-np-pill-lg.is-accent { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.bf-studio-np-pill-lg.is-accent .bf-studio-np-pill-v {
  color: var(--accent-2);
  text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 35%, transparent);
}
.bf-studio-np-pill-lg.is-accent.is-mute .bf-studio-np-pill-v {
  color: var(--accent-2);
  text-shadow: none;
}
/* Wrapper do pill de Canal nos extras — agrupa o StudioPicker + o
   botao "×" remove pra que o X fique posicionado relativo ao pill.
   Tambem usado na linha PRINCIPAL quando ha extras (pra alinhar com
   o visual dos extras). is-no-x e neutro — so existe pra grid manter
   2 colunas iguais quando o × nao renderiza. */
.bf-studio-np-extra-wrap {
  position: relative;
  display: flex;
  min-width: 0;
}
.bf-studio-np-extra-wrap > .bf-studio-picker { flex: 1; min-width: 0; }
/* Botao "×" remove no canto sup. direito do pill de Canal. Visual sutil
   mas visivel — background tintado, border, hover mais forte vermelho. */
.bf-studio-np-extra-x {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  appearance: none; cursor: pointer;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 4;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bf-studio-np-extra-x:hover {
  background: rgba(229,69,69,0.20);
  border-color: rgba(229,69,69,0.45);
  color: #ff8888;
}
/* Linha extra em modo CC: coluna do meio vira o toggle de VALOR FIXO
   (ON=127 / OFF=0). As 2 colunas de pill continuam iguais. */
.bf-studio-np-meta-cc {
  grid-template-columns: 1fr auto 1fr;
}
/* Botao de TIPO do envio extra (PC<->CC) — canto sup. direito do primeiro
   pill, mesma familia visual do "×" remove (que vive no pill do canal). */
.bf-studio-np-extra-type {
  position: absolute;
  top: 6px; right: 6px;
  height: 22px; padding: 0 8px;
  appearance: none; cursor: pointer;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.14em; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 4;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bf-studio-np-extra-type:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent-2);
}
.bf-studio-np-extra-type:disabled { opacity: 0.35; cursor: not-allowed; }
/* Toggle do valor fixo do CC extra: pill vertical compacto. ON acende em
   accent (espelha o is-accent do pill de canal); OFF fica neutro. */
.bf-studio-np-cc-val {
  appearance: none; cursor: pointer;
  min-width: 56px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hair-strong);
  color: var(--muted);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  padding: 8px 10px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bf-studio-np-cc-val-l {
  font-family: var(--font-mono);
  font-size: 8px; letter-spacing: 0.16em; font-weight: 700;
  opacity: 0.7;
}
.bf-studio-np-cc-val-v {
  font-family: "Antonio", system-ui, sans-serif;
  font-size: 16px; font-weight: 700; line-height: 1;
}
.bf-studio-np-cc-val.is-on {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--accent-2);
}
.bf-studio-np-cc-val.is-on .bf-studio-np-cc-val-v {
  text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 35%, transparent);
}
.bf-studio-np-pill-chev {
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
}
/* StudioPicker — picker custom com dropdown estilizado (substitui o
   <select> nativo). O trigger usa as classes existentes do .bf-studio-np-pill
   (LG ou regular); a lista vive em .bf-studio-picker-pop, posicionada
   absoluta abaixo do trigger. */
.bf-studio-picker { position: relative; }
.bf-studio-picker.is-disabled { opacity: 0.6; pointer-events: none; }
.bf-studio-picker > .bf-studio-np-pill {
  width: 100%;
  appearance: none;
  font: inherit;
  text-align: left;
}
/* Quando o picker esta aberto, marca o trigger com border laranja sutil. */
.bf-studio-picker.is-open > .bf-studio-np-pill {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent), 0 8px 20px -8px var(--accent-glow);
}
/* Backdrop centralizado — mesma vibe do .bf-modal-backdrop dos color
   pickers, pra unificar UX. Renderiza no portal (document.body), entao
   nao sofre clipping de stacking contexts de ancestrais (era a causa
   do dropdown "entrar debaixo" de cards com backdrop-filter). */
.bf-studio-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: bf-studio-picker-fade-in 160ms ease;
}
@keyframes bf-studio-picker-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.bf-studio-picker-modal {
  width: 100%;
  max-width: 380px;
  max-height: 78vh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #1f1f25 0%, #15151a 100%);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-lg);
  padding: 14px;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.04) inset;
  animation: bf-pop-in-center 0.18s ease;
}
.bf-studio-picker-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--hair);
}
.bf-studio-picker-modal-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
}
.bf-studio-picker-modal-close {
  appearance: none; cursor: pointer;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 0;
  background: var(--card-3);
  color: var(--muted);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.bf-studio-picker-modal-close:hover { background: var(--card-2); color: var(--text); }
/* Acoes no canto direito do head: ✓ (confirma o item central) + × (cancela). */
.bf-studio-picker-modal-actions {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.bf-studio-picker-modal-ok {
  appearance: none; cursor: pointer;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent);
  transition: filter 0.15s ease, transform 0.1s ease;
}
.bf-studio-picker-modal-ok:hover { filter: brightness(1.08); }
.bf-studio-picker-modal-ok:active { transform: scale(0.94); }

/* ── Roda de selecao (wheel / drum picker estilo iOS) ──────────────────
   .bf-studio-wheel envolve a lista rolavel; e o stacking context que
   posiciona a faixa de selecao central (band), os ticks de regua nas
   laterais (::before/::after) e o brilho cilindrico (gradiente vertical de
   fundo). A lista (.bf-studio-picker-list) rola com scroll-snap; o item que
   para no centro recebe .is-center via JS. */
.bf-studio-wheel {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--hair);
  /* brilho cilindrico: bordas escuras, centro levemente aceso em laranja. */
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.45) 0%,
      rgba(0,0,0,0.10) 30%,
      color-mix(in srgb, var(--accent) 6%, transparent) 50%,
      rgba(0,0,0,0.10) 70%,
      rgba(0,0,0,0.45) 100%);
}
/* Ticks de regua nas laterais (esquerda/direita), com fade no topo/base. */
.bf-studio-wheel::before,
.bf-studio-wheel::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 16px;
  z-index: 3;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--hair-strong) 0, var(--hair-strong) 1.5px,
    transparent 1.5px, transparent 8px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 32%, #000 68%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 32%, #000 68%, transparent 100%);
}
.bf-studio-wheel::before { left: 0; }
.bf-studio-wheel::after  { right: 0; }
/* Faixa de selecao fixa no centro — fica ATRAS dos itens (z-index 1; a
   lista e position:relative z-index 2). Altura = WHEEL_ITEM_H (48px). */
.bf-studio-wheel-band {
  position: absolute;
  left: 10px; right: 10px;
  top: 50%;
  height: 48px;
  transform: translateY(-50%);
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow:
    0 0 24px color-mix(in srgb, var(--accent) 18%, transparent),
    inset 0 0 0 1px rgba(255,255,255,0.04);
  pointer-events: none;
  z-index: 1;
}
.bf-studio-picker-list {
  position: relative;
  z-index: 2;
  height: min(336px, 56vh);
  overflow-y: auto;
  /* Sem overflow-x explicito o browser computa 'auto' (overflow-y nao e
     visible), deixando a lista arrastar de lado quando uma label e larga.
     Trava horizontal: so rola pra cima/baixo. touch-action: pan-y impede o
     swipe lateral no toque; as labels longas viram ellipsis (span abaixo). */
  overflow-x: hidden;
  touch-action: pan-y;
  display: flex; flex-direction: column;
  /* scroll-snap: cada item "gruda" no centro ao soltar. */
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  /* fade suave no topo/base, reforcando o efeito de cilindro. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  scrollbar-width: none;
}
.bf-studio-picker-list::-webkit-scrollbar { width: 0; height: 0; display: none; }
.bf-studio-picker-item {
  appearance: none; cursor: pointer;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  height: 48px;            /* === WHEEL_ITEM_H em bank.jsx === */
  scroll-snap-align: center;
  padding: 0 28px;         /* deixa as laterais livres pros ticks de regua */
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--text) 42%, transparent);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  transition: color 0.14s ease, transform 0.14s ease, opacity 0.14s ease;
}
/* Item que parou no centro da roda = o que sera selecionado. */
.bf-studio-picker-item.is-center {
  color: var(--accent-2);
  font-size: 30px;
  font-weight: 800;
  transform: scale(1.02);
  text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 45%, transparent);
}
/* Valor atualmente salvo (quando NAO esta no centro): leve destaque laranja
   pra orientar o usuario enquanto rola. */
.bf-studio-picker-item.is-active:not(.is-center) {
  color: rgba(255,138,58,0.72);
}
.bf-studio-picker-item[disabled] { cursor: default; opacity: 0.3; }
/* Label do item: 1 linha com ellipsis (nunca alarga a roda / sem scroll lateral).
   min-width:0 deixa o flex-item encolher abaixo do conteudo pra o ellipsis valer. */
.bf-studio-picker-item-label {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* No celular, fontes um pouco menores: o valor do pill (PC/Canal) do card
   MAIN e os itens da roda (WheelPopup). A ALTURA do item (48px) NAO muda —
   so a fonte —, pra preservar o invariante WHEEL_ITEM_H (centro = scrollTop/H). */
@media (max-width: 520px) {
  .bf-studio-np-pill-lg .bf-studio-np-pill-v { font-size: 19px; }
  .bf-studio-picker-item { font-size: 19px; }
  .bf-studio-picker-item.is-center { font-size: 25px; }
}
.bf-studio-np-pill { position: relative; }
/* Elementos decorativos do pill nao devem interceptar clique — o select
   sobreposto recebe o evento. (Spans com texto + chevron + label
   flutuante no pill-lg.) */
.bf-studio-np-pill-l,
.bf-studio-np-pill-v,
.bf-studio-np-pill-chev {
  pointer-events: none;
}

/* Nome do preset editavel (input dentro do pill do Now Playing). Visual
   identico ao <h2> (titulo) — so muda quando ha onNameChange. */
.bf-studio-np-title-input {
  flex: 1;
  background: transparent;
  border: 0; outline: 0;
  padding: 0; margin: 0;
  font-family: var(--font-sys);
  font-size: 30px; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.0;
  color: var(--text);
  width: 100%;
  min-width: 0;
}
.bf-studio-np-title-input::placeholder { color: var(--faint); }
.bf-studio-np-title-input:focus { outline: 1px dashed var(--hair-strong); outline-offset: 4px; border-radius: 4px; }

/* SW PREVIEW GRID ------------------------------------------------------- */
.bf-studio-sw-preview { margin: 4px 0 12px; }
.bf-studio-sw-preview-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px; padding-left: 2px;
}
.bf-studio-sw-preview-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.22em;
  color: var(--faint); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 7px;
}
.bf-studio-sw-preview-eyebrow-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 6px var(--accent-glow);
}
.bf-studio-sw-preview-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  /* Card unico envolvendo todos os tiles dos footswitches — mesmo visual
     do NowPlayingCard (.bf-studio-now-playing). */
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(28,28,34,0.92) 0%, rgba(16,16,20,0.92) 100%) padding-box,
    var(--bevel-edge) border-box;
  border: 2px solid transparent;
  border-radius: 18px;
  box-shadow:
    var(--bevel-relief),
    0 18px 40px -28px rgba(0,0,0,0.7);
}
.bf-studio-sw-preview-grid.is-4sw {
  grid-template-columns: repeat(2, 1fr);
}
/* Compact (PRESET mode): 6 SWs em 1 linha, so o icone — sem moldura
   externa nem labels (a sigla ja esta dentro do SwDisplayTile). */
.bf-studio-sw-preview-grid.is-compact {
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.bf-studio-sw-preview-grid.is-compact.is-4sw {
  grid-template-columns: repeat(4, 1fr);
}
/* 2 linhas de 3 (LIVE mode): 3 SWs em cima, 3 embaixo. Sobrescreve o
   compact de 6-em-linha. 4SW vira 2x2. */
.bf-studio-sw-preview-grid.is-compact.is-2rows {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  justify-items: center;
}
.bf-studio-sw-preview-grid.is-compact.is-2rows.is-4sw {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bf-studio-sw-tile {
  appearance: none; cursor: pointer;
  position: relative;
  border-radius: 14px; padding: 8px 10px 11px;
  display: flex; flex-direction: column; gap: 7px;
  background: var(--field-bg);
  border: 1px solid var(--hair);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
  min-height: 98px;
  color: var(--text);
  text-align: left;
  font: inherit;
}
.bf-studio-sw-tile[disabled] { cursor: default; }
/* SW desabilitado (SW5/SW6 em placas 4S/MICRO): miniatura preta (fundo vem
   inline do .bf-sw-tile-blackout no studioTiles), sem hover/selecao/clique.
   So o cursor + esmaecer a label "SW5/SW6". */
.bf-studio-sw-tile.is-disabled { cursor: not-allowed; }
.bf-studio-sw-tile.is-disabled .bf-studio-sw-tile-label { opacity: 0.4; }
/* Compact tile (PRESET mode): so o icone, sem moldura externa nenhuma.
   A selecao laranja vai pra borda DO PROPRIO SwDisplayTile (.bf-sw-tile
   interno), pra ter exatamente a mesma espessura/radius/tamanho da
   borda nativa do icone — sem ring duplo. */
.bf-studio-sw-tile.is-compact {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  min-height: 0;
  align-items: center; justify-content: center;
  gap: 0;
  border-radius: 0;
}
.bf-studio-sw-tile.is-compact .bf-studio-sw-tile-icon {
  min-height: 0;
  padding: 0;
  width: 100%;
}
/* Selecao no compact: pinta a borda do .bf-sw-tile interno em laranja.
   !important porque o SwDisplayTile aplica `border: 1px solid X` inline
   (shorthand sem !important), e o seletor de CSS sozinho perde pra inline. */
.bf-studio-sw-tile.is-compact.is-selected .bf-sw-tile {
  border-color: var(--accent) !important;
  box-shadow: none;
}
/* No compact, a selecao e SO o anel do .bf-sw-tile interno (acima). O tile
   externo NAO pode herdar a moldura/box-shadow da regra base .is-selected —
   como o compact tem border-radius:0, isso virava um QUADRADO laranja com
   glow em volta do icone redondo. Zera os dois aqui. */
.bf-studio-sw-tile.is-compact.is-selected {
  border-color: transparent;
  box-shadow: none;
}
/* No compact, o botao por tras do icone precisa ficar transparente mesmo
   quando is-lit (que injeta um gradiente quase-preto via regra geral). Sem
   este override, aparecia um "quadrado preto fora da moldura do icone".
   A cor BACK do icone continua sendo pintada normalmente pelo .bf-sw-tile
   interno (style inline do SwDisplayTile). */
.bf-studio-sw-tile.is-compact.is-lit {
  background: transparent !important;
  box-shadow: none !important;
}
/* Stripe no compact (PRESET mode): tracinho colorido EMBAIXO do icone
   indicando a cor do LED salva pra aquele SW. Posiciona em fluxo natural
   (nao absolute) abaixo do icone, com gap leve. */
.bf-studio-sw-tile.is-compact .bf-studio-sw-tile-stripe {
  position: static;
  display: block;
  width: 70%;
  height: 5px;
  margin-top: 6px;
  border-radius: 99px;
  background: var(--sw-color, var(--accent));
  opacity: 1;
}
.bf-studio-sw-tile.is-lit {
  background: linear-gradient(180deg, rgba(40,28,16,0.95) 0%, rgba(20,16,12,0.95) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 8px 22px -10px var(--accent-glow);
}
.bf-studio-sw-tile.is-selected {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px var(--accent-soft),
    0 8px 22px -10px var(--accent-glow);
}
.bf-studio-sw-tile-top {
  display: flex; align-items: center; justify-content: space-between;
}
.bf-studio-sw-tile-idx {
  font-family: var(--font-mono); font-weight: 700;
  font-size: 8.5px; letter-spacing: 0.2em;
  color: var(--muted);
}
.bf-studio-sw-tile-led {
  width: 7px; height: 7px; border-radius: 50%;
  background: color-mix(in srgb, var(--text) 16%, transparent);
}
.bf-studio-sw-tile.is-lit .bf-studio-sw-tile-led {
  background: var(--sw-color, var(--accent));
  box-shadow: 0 0 8px var(--sw-color, var(--accent));
}
.bf-studio-sw-tile-icon {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 64px;
}
/* Quando o iconNode e um SwDisplayTile real (size=64), ele ja traz seu
   proprio frame com borda/background coloridos — nao desenha caixa por
   cima. So o glyph SVG (fallback) usa as caixas decorativas. */
.bf-studio-sw-tile-icon > svg {
  width: 26px; height: 26px;
}
.bf-studio-sw-tile-base {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; text-align: center;
}
.bf-studio-sw-tile-sigla {
  font-family: var(--font-sys);
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.01em; line-height: 1;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.bf-studio-sw-tile.is-lit .bf-studio-sw-tile-sigla { color: color-mix(in srgb, var(--accent-2) 36%, #fff); }
.bf-studio-sw-tile-mode {
  font-family: var(--font-mono);
  font-size: 8px; letter-spacing: 0.18em;
  color: var(--faint); font-weight: 700; text-transform: uppercase;
  line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.bf-studio-sw-tile.is-lit .bf-studio-sw-tile-mode { color: var(--accent-2); }
.bf-studio-sw-tile-stripe {
  position: absolute; left: 10px; right: 10px; bottom: 2px;
  height: 3px; border-radius: 99px;
  background: var(--sw-color, var(--accent));
  opacity: 0.9;
}
.bf-studio-sw-tile.is-lit .bf-studio-sw-tile-stripe { opacity: 1; }
/* Label "SW1".. embaixo do icone — escondida por padrao; o desktop
   (.bf-content-bank, @media >=900px) revela. Mantem o mobile inalterado. */
.bf-studio-sw-tile-label { display: none; }

/* O grid antigo (.bf-sw-grid-card do LiveModePanel) e substituido pelo
   SwPreviewGrid Studio em TODOS os viewports. Esconde so o card do GRID —
   o editor do SW (.bf-sw-card) continua renderizado, agora aberto via
   selecao do tile Studio (state lifted pra PagePresetConfig). */
.bf-content-bank .bf-sw-grid-card { display: none; }

/* Desktop — layout de 3 COLUNAS conforme referencia. Header em LINHA UNICA:
   titulo "SET PRESET" a ESQUERDA, toggle PRESET/LIVE MODE (com badge LAYER) no
   CENTRO (via centerSlot do PageHeader), icones de conexao a DIREITA. CORPO em
   3 colunas:
     ESQUERDA  -> tiles do bank: A grande no TOPO (largura cheia) + presets
                  1..6 em grade 2-col x 3-linhas.
     CENTRO    -> card MAIN ("Tocando agora") em PRESET mode, OU o editor do SW
                  (.bf-sw-card, portado pro .bf-bank-slot-center) em LIVE mode.
     DIREITA   -> preview dos 6 SWs (SwPreviewGrid) em grade 2-col x 3-linhas,
                  visivel nos DOIS modos.
   Outras paginas (Global/System) mantem seu .bf-content multi-col via outro
   @media (min-width: 900px). */
@media (min-width: 900px) {
  /* Bloco centralizado, largo o bastante pras 3 colunas (1120 -> 1200). */
  .bf-content-bank {
    display: block;
    grid-template-columns: none;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 26px;
  }
  /* HEADER: MESMO grid de 3 colunas do corpo (.bf-bank-col-1) + MESMO
     column-gap (22px). Como header e corpo sao filhos diretos do
     .bf-content-bank (mesma largura interna, mesmo recuo), as fronteiras das
     colunas COINCIDEM — logo o toggle (col 2) fica EXATAMENTE com a largura do
     card central. Titulo a ESQUERDA (col 1), toggle no CENTRO (col 2), icones
     a DIREITA (col 3). */
  .bf-content-bank > .bf-header {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.4fr) minmax(0, 0.85fr);
    align-items: center;
    column-gap: 22px;
    padding-left: 0;
    padding-right: 0;
    /* Espaco abaixo do toggle ate os cards = espaco acima dele (padding-top:26
       + centragem). Sem isso os cards encostam no header (gap 0). */
    margin-bottom: 24px;
  }
  .bf-content-bank > .bf-header > .bf-title {
    display: block;
    grid-column: 1;
    justify-self: start;
    text-align: left;
    /* cap menor que o anterior pra caber na coluna de tiles (~300px) sem
       invadir o toggle; min-width:0 + overflow guardam contra titulos longos. */
    font-size: clamp(28px, 2.8vw, 40px);
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Slot central do header VISIVEL no desktop — é onde o toggle PRESET/LIVE
     mora agora (o toggle do corpo fica escondido). Ocupa a coluna 2 inteira
     (= largura do card central). */
  .bf-content-bank > .bf-header > .bf-header-center {
    display: flex;
    grid-column: 2;
    justify-self: stretch;
    align-items: center;
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .bf-content-bank > .bf-header > .bf-header-center .bf-studio-toggle {
    width: 100%;
    padding: 5px;
    border-radius: 999px;
  }
  .bf-content-bank > .bf-header > .bf-header-center .bf-studio-toggle-btn {
    height: 44px;
    font-size: 12px;
    letter-spacing: 0.14em;
  }
  .bf-content-bank > .bf-header > .bf-header-center .bf-studio-layer-badge {
    width: 48px; height: 48px;
    font-size: 22px;
  }
  .bf-content-bank > .bf-header > .bf-conn-icons {
    grid-column: 3;
    justify-self: end;
    margin: 0;
  }

  /* col-1 = LAYOUT PRINCIPAL em 3 colunas: tiles | center | swprev. Colunas
     top-alinhadas (align-items:start) -> cada uma tem altura natural. O centro
     (card MAIN / editor do SW) e a coluna mais larga. */
  .bf-content-bank > .bf-bank-col-1 {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.4fr) minmax(0, 0.85fr);
    grid-template-areas: "tiles center swprev";
    align-items: start;
    column-gap: 22px;
    row-gap: 0;
  }
  /* col-2 / col-3 (params/monitor — vazios no fluxo atual) somem. */
  .bf-content-bank > .bf-bank-col-2,
  .bf-content-bank > .bf-bank-col-3 { display: none; }
  .bf-content-bank .bf-bank-slot:empty { display: none; }

  /* Toggle do CORPO escondido no desktop — ele vive no header agora. */
  .bf-content-bank .bf-studio-toggle-row-top { display: none; }

  /* ESQUERDA — tiles: A no TOPO (largura cheia) + presets 1..6 em 2-col x
     3-linhas. .bf-bank-tile herda do mobile `grid-column:1/2; grid-row:1/span
     2`, entao sobrescreve pra ocupar a linha inteira (1/-1) numa linha so. */
  .bf-content-bank .bf-bank-row {
    grid-area: tiles;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: 12px;
    margin: 0;
  }
  .bf-content-bank .bf-bank-tile {
    grid-column: 1 / -1;
    grid-row: auto;
    aspect-ratio: 16 / 7;        /* faixa horizontal no topo */
    container-type: size;
  }
  .bf-content-bank .bf-bank-tile .letter {
    font-size: 96px;                       /* fallback */
    font-size: clamp(56px, 62cqh, 120px);  /* escala c/ a altura do tile */
  }
  .bf-content-bank .bf-bank-tile .bf-bank-name { font-size: 9px; letter-spacing: 0.08em; }
  /* Presets levemente achatados (2 colunas). aspect-ratio 1.14 (em vez de
     1 quadrado) reduz ~17px de altura por linha -> a base da coluna esquerda
     (banner + 3 linhas) alinha com a coluna de SW preview a direita.
     container-type:size -> o numero escala com a altura do tile. */
  .bf-content-bank .bf-preset {
    aspect-ratio: 1.14;
    container-type: size;
    justify-content: center;
  }
  .bf-content-bank .bf-preset .num {
    margin: 0;
    font-size: 50px;                      /* fallback */
    font-size: clamp(34px, 48cqh, 68px);  /* escala c/ a altura do tile */
  }
  /* Rotulo = nome salvo do preset (DESKTOP). Fonte um pouco maior e sem o
     letter-spacing largo do mock "PRESET"; clipa com ellipsis pra nomes
     longos nao estourarem a largura do tile (absoluto left:0/right:0). */
  .bf-content-bank .bf-preset .label {
    position: absolute;
    left: 0; right: 0; bottom: 9px;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: none;
    padding: 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* CENTRO — card MAIN (PRESET) ou editor do SW (LIVE). */
  .bf-content-bank .bf-studio-now-playing { grid-area: center; margin: 0; }
  /* Slot que recebe o .bf-sw-card portado (LIVE mode). Vazio em PRESET ->
     escondido pela regra :empty acima; preenchido em LIVE -> ocupa o centro. */
  /* A celula central ESTICA ate a altura do row do grid. O row e auto e so as
     colunas laterais (tiles | swprev) contribuem altura — o card abaixo e
     position:absolute (fora do fluxo), entao NAO infla o row. Resultado: o
     centro fica EXATAMENTE da altura das colunas laterais. */
  .bf-content-bank .bf-bank-slot-center {
    grid-area: center;
    align-self: stretch;
    position: relative;   /* containing block do card absoluto */
    min-height: 0;
  }
  /* O card do editor preenche a celula (inset:0). Vira coluna flex: header
     (.bf-sw-card-tabs) fixo no topo e o corpo (.bf-sw-card-body) rola DENTRO
     da moldura quando o modo tem conteudo maior — a pagina em volta fica
     estatica (overflow:hidden no card, overflow-y:auto so no corpo). */
  .bf-content-bank .bf-bank-slot-center .bf-sw-card {
    position: absolute;
    inset: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  /* Navegacao SW 1..N e exclusiva do MOBILE — no desktop o SwPreviewGrid
     da coluna direita ja seleciona o SW. */
  .bf-content-bank .bf-sw-nav { display: none; }
  .bf-content-bank .bf-bank-slot-center .bf-sw-card > .bf-sw-card-tabs {
    flex: 0 0 auto;
  }
  .bf-content-bank .bf-bank-slot-center .bf-sw-card > .bf-sw-card-body {
    flex: 1 1 auto;
    min-height: 0;        /* vence o min-height:200px base -> permite encolher e rolar */
    overflow-y: auto;
    overflow-x: hidden;
    /* Scrollbar discreta nas cores do webapp: fina, trilho invisivel e thumb
       laranja (--accent) atenuado, realcando no hover. Firefox via scrollbar-*. */
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent) 42%, transparent) transparent;
  }
  .bf-content-bank .bf-bank-slot-center .bf-sw-card > .bf-sw-card-body::-webkit-scrollbar {
    width: 6px;
  }
  .bf-content-bank .bf-bank-slot-center .bf-sw-card > .bf-sw-card-body::-webkit-scrollbar-track {
    background: transparent;
  }
  .bf-content-bank .bf-bank-slot-center .bf-sw-card > .bf-sw-card-body::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent) 38%, transparent);
    border-radius: 999px;
  }
  .bf-content-bank .bf-bank-slot-center .bf-sw-card > .bf-sw-card-body::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--accent) 66%, transparent);
  }

  /* SW GLOBAL (GLOBAL > MIDI): mesmo tratamento do card de SW em LIVE — corpo
     com altura maxima e rolagem DENTRO do card (modos longos, ex: MACROS com
     varios slots), com a mesma scrollbar discreta laranja. Cabecalho do card
     (titulo + campo de modo) fica fixo acima. Popups (cor do LED, seletor de
     modo) sao portados via createPortal e os selects sao nativos -> nenhum e
     cortado pelo overflow. Desktop-only (mobile inalterado). */
  .bf-content-global .bf-sw-global-body {
    /* Impresso INTEIRO, sem scroll interno (pedido): o corpo cresce com o
       conteudo e o card acompanha; o row do grid se ajusta a altura real.
       (Antes era height:340px + overflow-y:auto, que cortava modos longos.) */
    height: auto;
    overflow: visible;
  }
  .bf-content-global .bf-sw-global-body::-webkit-scrollbar { width: 6px; }
  .bf-content-global .bf-sw-global-body::-webkit-scrollbar-track { background: transparent; }
  .bf-content-global .bf-sw-global-body::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent) 38%, transparent);
    border-radius: 999px;
  }
  .bf-content-global .bf-sw-global-body::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--accent) 66%, transparent);
  }

  /* DIREITA — preview dos 6 SWs em 2-col x 3-linhas, nos dois modos. Estica
     ate a altura do row (= colunas tiles/centro), pra o card do preview ficar
     da MESMA altura do card STOMP / da coluna de presets. Vira flex column pra
     o grid interno (a moldura visivel) preencher essa altura. */
  .bf-content-bank .bf-studio-sw-preview {
    grid-area: swprev;
    margin: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  /* Cabecalho "FOOTSWITCHES" escondido no desktop pra os icones ficarem
     maiores. */
  .bf-content-bank .bf-studio-sw-preview-head { display: none; }
  /* 2 colunas x 3 linhas (sobrescreve o is-2rows de 3-col). Seletor com
     .is-compact.is-2rows pra vencer a especificidade da regra base de 3-col.
     Colunas max-content + justify-content:center -> as celulas abracam o
     icone (100px) e o par fica centralizado no card, sem sobra lateral. */
  .bf-content-bank .bf-studio-sw-preview-grid.is-compact.is-2rows {
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    /* Preenche a altura da seca0 esticada e centraliza as 3 linhas no card
       (mais alto que o conteudo) -> mesma altura do card STOMP. */
    flex: 1 1 auto;
    align-content: center;
    grid-auto-rows: auto;
    gap: 16px 22px;
    padding: 18px 14px;
  }
  /* Label "SW1".. embaixo de cada icone do preview (so desktop). */
  .bf-content-bank .bf-studio-sw-tile-label {
    display: block;
    margin-top: 9px;
    font-family: var(--font-mono);
    font-size: 17px;
    letter-spacing: 0.14em;
    font-weight: 800;
    color: var(--text);
    text-align: center;
    line-height: 1;
  }
  .bf-content-bank .bf-studio-sw-tile.is-selected .bf-studio-sw-tile-label,
  .bf-content-bank .bf-studio-sw-tile.is-lit .bf-studio-sw-tile-label {
    color: var(--accent);
  }

  /* CENTRO (PRESET mode) — empilha o card MAIN + o DASHBOARD de resumo. O
     stack ocupa a celula central inteira (align-self:stretch -> altura do row
     = 539, definida pelas colunas laterais). O dashboard preenche o espaco
     abaixo do MAIN e ROLA internamente; flex-basis:0 + min-height:0 zeram a
     contribuicao de altura dele -> o row NAO infla (tiles/centro/swprev
     seguem alinhados). Estilo visual do card vem da regra base (mobile). */
  .bf-content-bank .bf-bank-center-stack {
    grid-area: center;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
  }
  .bf-content-bank .bf-bank-center-stack > .bf-studio-now-playing { flex: 0 0 auto; }
  .bf-content-bank .bf-preset-dash { flex: 1 1 0; min-height: 0; margin: 0; }
  .bf-content-bank .bf-preset-dash-head { flex: 0 0 auto; }
  .bf-content-bank .bf-preset-dash-grid {
    flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent) 42%, transparent) transparent;
  }
  .bf-content-bank .bf-preset-dash-grid::-webkit-scrollbar { width: 6px; }
  .bf-content-bank .bf-preset-dash-grid::-webkit-scrollbar-track { background: transparent; }
  .bf-content-bank .bf-preset-dash-grid::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent) 38%, transparent); border-radius: 999px;
  }
  /* Miniatura do icone e exclusiva do MOBILE — no desktop o SwPreviewGrid
     da coluna da direita ja mostra os icones, e o card e height-locked ao
     alinhamento das 3 colunas (nao pode inflar). */
  .bf-content-bank .bf-preset-dash-icon { display: none; }
  /* Sem icone -> sem reserva de espaco/altura no topo do card. */
  .bf-content-bank .bf-preset-dash-top { padding-right: 0; min-height: 0; }
}

/* ─── PRESET DASHBOARD — estilos base (mobile + compartilhados) ─────────
   Card de resumo abaixo do MAIN em PRESET mode. No mobile flui no fluxo
   normal (card de largura cheia, grid 2-col). No desktop o @media acima
   adiciona o comportamento de stack/scroll na coluna central. */
.bf-preset-dash {
  margin: 14px 0 4px;
  display: flex;
  flex-direction: column;
  padding: 16px 16px 10px;
  background:
    var(--card-texture),
    linear-gradient(180deg, rgba(28,28,34,0.92) 0%, rgba(16,16,20,0.92) 100%) padding-box,
    var(--bevel-edge) border-box;
  border: 2px solid transparent;
  border-radius: 18px;
  box-shadow: var(--bevel-relief), 0 18px 40px -28px rgba(0,0,0,0.7);
}
.bf-preset-dash-head { margin-bottom: 12px; padding-left: 2px; }
.bf-preset-dash-eyebrow {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em;
  color: var(--faint); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 7px;
}
.bf-preset-dash-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 6px var(--accent-glow);
}
.bf-preset-dash-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  grid-auto-rows: min-content; gap: 10px;
}
.bf-preset-dash-card {
  position: relative;
  display: block;
  background:
    var(--card-texture),
    linear-gradient(180deg, rgba(255,255,255,0.040) 0%, rgba(255,255,255,0.018) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 10px 12px 11px 16px;
  overflow: hidden;
  min-width: 0;
}
/* Zona principal (SW# + estado + modo, empilhados) — botao atalho pro editor
   (aba CONFIG). Reset de botao + ocupa toda a largura. O icone fica ancorado
   no topo-direito (absoluto), entao reservamos espaco a direita no mobile. */
.bf-preset-dash-main {
  min-width: 0;
  display: block;
  text-align: left;
  width: 100%;
}
.bf-preset-dash-main.is-clickable {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 8px;
  transition: transform 0.1s ease;
}
.bf-preset-dash-main.is-clickable:active { transform: translateY(1px); }
.bf-preset-dash-main.is-clickable:focus-visible {
  outline: 2px solid var(--dash-accent, var(--accent));
  outline-offset: 2px;
}
.bf-preset-dash-card:hover {
  border-color: color-mix(in srgb, var(--dash-accent, var(--accent)) 45%, transparent);
}
/* Miniatura do icone (SO MOBILE — escondida no desktop via @media). Ancorada
   no topo-direito do card (mesma linha do SW#). Botao atalho pra aba DISPLAY
   do editor (edicao de icone). */
.bf-preset-dash-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bf-preset-dash-icon.is-clickable {
  appearance: none;
  background: none;
  border: 0;
  padding: 2px;
  margin: 0;
  cursor: pointer;
  border-radius: 10px;
  transition: transform 0.1s ease, box-shadow 0.2s ease;
}
.bf-preset-dash-icon.is-clickable:hover {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dash-accent, var(--accent)) 60%, transparent);
}
.bf-preset-dash-icon.is-clickable:active { transform: translateY(1px); }
.bf-preset-dash-icon.is-clickable:focus-visible {
  outline: 2px solid var(--dash-accent, var(--accent));
  outline-offset: 1px;
}
.bf-preset-dash-accent {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--dash-accent, var(--accent));
  box-shadow: 0 0 10px -1px var(--dash-accent, var(--accent));
}
/* Zona superior (SW#), a esquerda do icone (topo-direito). No mobile reserva
   espaco a direita (icone absoluto ~52px) e altura minima pra que o nome do
   modo caia ABAIXO do icone, bem encaixado. No desktop (sem icone) o padding
   e a altura minima sao zerados pelo @media. */
.bf-preset-dash-top {
  display: flex; align-items: center;
  margin-bottom: 2px;
  padding-right: 56px;
  min-height: 48px;
}
.bf-preset-dash-sw {
  display: block;
  font-family: var(--font-mono); font-weight: 800; font-size: 26px;
  letter-spacing: 0.04em; color: var(--text);
}
/* Modo configurado do SW: destaque principal. ON -> cor do LED; OFF -> neutro
   (preto/cinza, adapta ao tema) — espelha o feedback do preview. Em uma linha
   so: se nao couber, ABREVIA com reticencias (sem inflar a altura do card). */
.bf-preset-dash-mode-name {
  margin: 0;
  font-family: var(--font-sys);
  font-size: 21px;
  line-height: 1.1;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Linha divisoria discreta antes do nome do modo, sem muito espaco. */
  border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  padding-top: 5px;
}
.bf-preset-dash-mode-name.is-on {
  color: var(--dash-accent, var(--accent));
}
.bf-preset-dash-mode-name.is-off {
  color: var(--text);
}
/* Descricao antiga do modo (mantida para compatibilidade se ainda existir). */
.bf-preset-dash-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

/* Card unificado: o PresetEditorCard com noFrame=true entra dentro do
   NowPlayingCard como children. Tira a moldura propria (background,
   borda, padding, radius) pra fundir visualmente com o card de fora.
   .is-hidden esconde so o painel — os children continuam montados pra
   manter os useEffects vivos (registro do meta/update no pai). */
.bf-studio-np-extras.is-hidden { display: none; }
.bf-studio-np-extras {
  margin: 14px -14px -14px -16px;
  padding: 14px 16px 14px 16px;
  border-top: 1px solid var(--hair);
  /* Sutil contraste interno pra delimitar a "seção parametros" sem virar
     um card separado. */
  background: rgba(0,0,0,0.18);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.bf-preset-card.bf-preset-card-attached {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.bf-preset-card.bf-preset-card-attached .bf-preset-card-head,
.bf-preset-card.bf-preset-card-attached .bf-preset-card-head-with-tabs {
  padding: 0;
  margin: 0 0 10px;
  border: 0;
  background: transparent;
}
.bf-preset-card.bf-preset-card-attached .bf-preset-card-body {
  padding: 0;
}
/* Quando atachado, o tab row interno e suprimido — o toggle TELA agora
   vive no header do NowPlayingCard (canto sup. direito). O card-head
   inteiro pode ser ocultado (titulo PARAMETROS ja era removido) pra
   abrir espaco pro conteudo de TELA. */
.bf-preset-card.bf-preset-card-attached .bf-preset-tabs-inline {
  display: none;
}
.bf-preset-card.bf-preset-card-attached .bf-preset-card-head,
.bf-preset-card.bf-preset-card-attached .bf-preset-card-head-with-tabs {
  display: none;
}

/* ─── GLOBAL · Studio redesign ─────────────────────────────────────────
   Reaproveita o DNA Studio (refactor GLOBAL/) — cards com gradiente,
   bordas finas, tipografia mono nos rótulos, accent laranja com glow.
   Escopo total: substitui em qualquer largura (mobile + desktop). */
:is(.bf-content-global, .bf-content-system) {
  position: relative;
}
/* Brilhos ambiente (laranja no topo + azul no canto inferior-direito) removidos
   a pedido: a mancha azul ficava exposta no espaco vazio abaixo dos cards. */
:is(.bf-content-global, .bf-content-system) > * { position: relative; z-index: 1; }

/* IconTabs — pill container com 4 botões */
:is(.bf-content-global, .bf-content-system) .bf-icon-tabs {
  padding: 4px;
  gap: 4px;
  /* Cor solida da interior vira gradiente solido (a cor crua so vale na
     ultima camada do shorthand; na 1a camada invalidaria o background). */
  background:
    linear-gradient(rgba(20,20,24,0.6), rgba(20,20,24,0.6)) padding-box,
    var(--bevel-edge) border-box;
  border: 2px solid transparent;
  border-radius: 18px;
  box-shadow: var(--bevel-relief);
}
:is(.bf-content-global, .bf-content-system) .bf-icon-tab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  box-shadow: none;
  aspect-ratio: auto;
  /* Mobile: tamanho unificado GLOBAL = SYSTEM (padrao SYSTEM, maior). Desktop
     sobrescreve tudo nos blocos @media >=900px (6584+/6607+), entao nao vaza. */
  padding: 9px 3px 7px;
  color: color-mix(in srgb, var(--text) 60%, transparent);
  gap: 4px;
}
:is(.bf-content-global, .bf-content-system) .bf-icon-tab svg { width: 30px; height: 30px; }
:is(.bf-content-global, .bf-content-system) .bf-icon-tab span {
  font-size: 10px; letter-spacing: 0.06em; white-space: nowrap;
}
:is(.bf-content-global, .bf-content-system) .bf-icon-tab:hover { border-color: rgba(255,255,255,0.08); }
:is(.bf-content-global, .bf-content-system) .bf-icon-tab.is-on {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: color-mix(in srgb, var(--accent-2) 36%, #fff);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 65%),
    linear-gradient(180deg, #2a1810 0%, #18120e 100%);
  box-shadow:
    0 8px 22px -10px color-mix(in srgb, var(--accent) 55%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.05);
}
:is(.bf-content-global, .bf-content-system) .bf-icon-tab.is-on svg {
  color: var(--accent-2);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 55%, transparent));
}

/* Cards Studio */
:is(.bf-content-global, .bf-content-system) .bf-card {
  padding: 14px;
  background:
    var(--card-texture),
    linear-gradient(180deg, rgba(28,28,34,0.92) 0%, rgba(16,16,20,0.92) 100%) padding-box,
    var(--bevel-edge) border-box;
  border: 2px solid transparent;
  border-radius: 18px;
  box-shadow:
    var(--bevel-relief),
    0 18px 40px -28px rgba(0,0,0,0.7);
}
:is(.bf-content-global, .bf-content-system) .bf-card + .bf-card { margin-top: 12px; }
/* No desktop o espacamento entre cards vem do `gap` do grid de 2 colunas,
   nao do margin-top do empilhamento mobile. Sem zerar, o 2o (e demais) card
   de cada linha herda margin-top:12px, e como o grid e align-items:stretch
   ele desce 12px e encolhe 12px — desalinhando o topo em relacao ao 1o card
   da linha. Mesma especificidade da regra acima, mas dentro do media query e
   depois na ordem de fonte, entao vence so no desktop. Mobile intacto. */
@media (min-width: 900px) {
  :is(.bf-content-global, .bf-content-system) .bf-card + .bf-card { margin-top: 0; }
}
:is(.bf-content-global, .bf-content-system) .bf-card-head {
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
:is(.bf-content-global, .bf-content-system) .bf-card-head h3 {
  font-family: var(--font-sys);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--text);
}
:is(.bf-content-global, .bf-content-system) .bf-card-head .meta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--text) 50%, transparent);
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
}

/* Segmented (bf-seg) — pill com botões redondos */
:is(.bf-content-global, .bf-content-system) .bf-seg {
  padding: 4px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
  gap: 0;
}
:is(.bf-content-global, .bf-content-system) .bf-seg button {
  height: 30px;
  border-radius: 999px;
  padding: 0 8px;
  background: transparent;
  border: 0;
  color: color-mix(in srgb, var(--text) 60%, transparent);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: none;
}
:is(.bf-content-global, .bf-content-system) .bf-seg button.is-active {
  background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
  color: #1a0e06;
  box-shadow:
    0 6px 18px -6px color-mix(in srgb, var(--accent) 60%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.25);
}

/* REMAPPING (SYSTEM > PRINCIPAL, placas MICRO): grid de 4 tiles de orientacao
   com SVG ilustrativo + rotulo de graus. NAO usa .bf-seg (pilula de 30px que
   esconderia o SVG). */
.bf-remap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.bf-remap-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px;
  appearance: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  color: color-mix(in srgb, var(--text) 55%, transparent);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: all 0.15s ease;
}
.bf-remap-opt svg { display: block; }
.bf-remap-opt.is-active {
  color: var(--text);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--accent) 55%, transparent);
}
.bf-screen.is-theme-light .bf-remap-opt {
  background: var(--card-2);
  border-color: var(--field-line);
}

/* Select wrapper / select estilizado */
:is(.bf-content-global, .bf-content-system) .bf-select-wrap { width: 100%; }
:is(.bf-content-global, .bf-content-system) .bf-input.bf-select {
  padding: 11px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  color: var(--text);
  font-family: var(--font-sys);
  font-size: 14px;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
:is(.bf-content-global, .bf-content-system) .bf-select-chev { color: color-mix(in srgb, var(--text) 50%, transparent); }

/* Auto-row / switch label */
:is(.bf-content-global, .bf-content-system) .bf-auto-row {
  gap: 12px;
  /* Toggle sempre encostado na DIREITA da moldura (alinhamento vertical entre
     linhas de toggle do card), independente do tamanho do texto. */
  justify-content: space-between;
}
:is(.bf-content-global, .bf-content-system) .bf-auto-row > .bfg-toggle-text {
  flex: 1;
  min-width: 0;
}
:is(.bf-content-global, .bf-content-system) .bf-auto-row .label {
  font-family: var(--font-sys);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}

/* Switch (toggle) — laranja com glow */
:is(.bf-content-global, .bf-content-system) .bf-switch {
  width: 44px; height: 26px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.4);
}
:is(.bf-content-global, .bf-content-system) .bf-switch::after {
  width: 20px; height: 20px;
  top: 2px; left: 2px;
  background: #d8d8de;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
:is(.bf-content-global, .bf-content-system) .bf-switch.is-on,
:is(.bf-content-global, .bf-content-system) .bf-switch.is-on.is-accent {
  background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow:
    0 6px 14px -6px color-mix(in srgb, var(--accent) 70%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.2);
}
:is(.bf-content-global, .bf-content-system) .bf-switch.is-on::after { background: #fff; transform: translateX(18px); }

/* Cycle pill (auto-start banco/preset) */
:is(.bf-content-global, .bf-content-system) .bf-cycle button.is-on {
  padding: 12px 16px;
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 65%),
    linear-gradient(180deg, #2a1810 0%, #18120e 100%);
  border: 1px solid var(--accent);
  border-radius: 14px;
  color: var(--accent-2);
  box-shadow:
    0 8px 22px -10px color-mix(in srgb, var(--accent) 55%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
:is(.bf-content-global, .bf-content-system) .bf-cycle button .cap {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.22em;
  color: rgba(255,180,130,0.7);
  font-weight: 700;
}

/* Letter chips A-E — big tiles com glow */
:is(.bf-content-global, .bf-content-system) .bf-letter-chips {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
:is(.bf-content-global, .bf-content-system) .bf-letter-chips button {
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 14px;
  font-family: "Antonio", system-ui, sans-serif;
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.02em;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
:is(.bf-content-global, .bf-content-system) .bf-letter-chips button.is-on {
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 34%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, #2a1810 0%, #18120e 100%);
  border: 1px solid var(--accent);
  color: var(--accent-2);
  text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow:
    0 8px 22px -10px color-mix(in srgb, var(--accent) 55%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
:is(.bf-content-global, .bf-content-system) .bf-letter-chips button.is-off {
  background: linear-gradient(180deg, #161620 0%, #0e0e14 100%);
  border: 1px solid rgba(255,255,255,0.06);
  color: color-mix(in srgb, var(--text) 32%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

/* ─── Match Mode: select c/ eyebrow + channel tiles ─── */
:is(.bf-content-global, .bf-content-system) .bfg-select-box {
  position: relative;
  padding: 8px 14px 11px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
:is(.bf-content-global, .bf-content-system) .bfg-select-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.22em;
  color: color-mix(in srgb, var(--text) 42%, transparent);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 4px;
}
:is(.bf-content-global, .bf-content-system) .bf-input.bf-select.bfg-select-lg {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 16px;
  font-weight: 600;
  height: auto;
  min-height: 0;
  width: 100%;
}
:is(.bf-content-global, .bf-content-system) .bfg-select-chev {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

:is(.bf-content-global, .bf-content-system) .bfg-ch-grid {
  display: grid;
  /* Mobile: 1 campo por linha (pedido). Desktop sobrescreve pra 2 colunas (≥900px). */
  grid-template-columns: 1fr;
  gap: 6px;
}
:is(.bf-content-global, .bf-content-system) .bfg-ch-tile {
  position: relative;
  padding: 7px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
:is(.bf-content-global, .bf-content-system) .bfg-ch-tile:hover { border-color: rgba(255,255,255,0.14); }
:is(.bf-content-global, .bf-content-system) .bfg-ch-cap {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--text) 45%, transparent);
  font-weight: 700;
  text-transform: uppercase;
}
:is(.bf-content-global, .bf-content-system) .bfg-ch-val {
  font-family: var(--font-sys);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:is(.bf-content-global, .bf-content-system) .bfg-ch-val.is-empty { color: color-mix(in srgb, var(--text) 35%, transparent); }
:is(.bf-content-global, .bf-content-system) .bfg-ch-select {
  position: absolute; inset: 0;
  opacity: 0;
  width: 100%; height: 100%;
  cursor: pointer;
  border: 0; background: transparent;
  appearance: none;
}
/* Desktop: UM canal por linha (pedido) + fonte um pouco maior. Mesma
   especificidade da regra base .bfg-ch-grid mas dentro do media query e depois
   na ordem da folha, entao vence so no desktop. Mobile intacto. */
@media (min-width: 900px) {
  :is(.bf-content-global, .bf-content-system) .bfg-ch-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  :is(.bf-content-global, .bf-content-system) .bfg-ch-tile {
    padding: 9px 13px;
  }
  :is(.bf-content-global, .bf-content-system) .bfg-ch-cap {
    font-size: 10px;
  }
  :is(.bf-content-global, .bf-content-system) .bfg-ch-val {
    font-size: 13.5px;
  }
}

/* Auto-row: texto + sub-label */
:is(.bf-content-global, .bf-content-system) .bfg-toggle-text {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
:is(.bf-content-global, .bf-content-system) .bfg-toggle-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--text) 45%, transparent);
  text-transform: uppercase;
}

/* ─── Summary pill (Expressão Externa) ─── */
:is(.bf-content-global, .bf-content-system) .bfg-sum-pill {
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  display: flex; align-items: center; gap: 12px;
  background: rgba(0,0,0,0.32);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 12px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s;
}
:is(.bf-content-global, .bf-content-system) .bfg-sum-pill:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
:is(.bf-content-global, .bf-content-system) .bfg-sum-pill.is-open { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
:is(.bf-content-global, .bf-content-system) .bfg-sum-led {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: 999px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}
:is(.bf-content-global, .bf-content-system) .bfg-sum-led > span {
  width: 12px; height: 12px; border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
:is(.bf-content-global, .bf-content-system) .bfg-sum-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
:is(.bf-content-global, .bf-content-system) .bfg-sum-cap {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.20em;
  color: color-mix(in srgb, var(--text) 45%, transparent);
  font-weight: 700;
  text-transform: uppercase;
}
:is(.bf-content-global, .bf-content-system) .bfg-sum-title {
  font-family: var(--font-sys);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:is(.bf-content-global, .bf-content-system) .bfg-sum-cta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--accent-2);
  font-weight: 700;
  white-space: nowrap;
}

/* ─── Expressão Externa · head compacto ─── */
:is(.bf-content-global, .bf-content-system) .bfg-exp-head {
  display: flex; align-items: center; gap: 12px;
}
:is(.bf-content-global, .bf-content-system) .bfg-exp-live {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
:is(.bf-content-global, .bf-content-system) .bfg-exp-live-cap {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.20em;
  color: color-mix(in srgb, var(--text) 45%, transparent);
  font-weight: 700;
  text-transform: uppercase;
}
:is(.bf-content-global, .bf-content-system) .bfg-exp-live-num {
  font-family: "Antonio", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--accent-2);
  text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 40%, transparent);
}
:is(.bf-content-global, .bf-content-system) .bfg-exp-live-of {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: color-mix(in srgb, var(--text) 40%, transparent);
  text-shadow: none;
  margin-left: 4px;
}
:is(.bf-content-global, .bf-content-system) .bfg-exp-bar {
  height: 6px;
  margin-top: 10px;
  border-radius: 3px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
}
:is(.bf-content-global, .bf-content-system) .bfg-exp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 80%, transparent);
  transition: width 80ms linear;
}

/* SW Global: 4 colunas no grid de modos (match c/ design) */
:is(.bf-content-global, .bf-content-system) .bf-sw-global-modes {
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
:is(.bf-content-global, .bf-content-system) .bf-sw-global-mode {
  padding: 8px 4px 7px;
  border-radius: 11px;
  background: var(--field-bg);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  gap: 5px;
}
:is(.bf-content-global, .bf-content-system) .bf-sw-global-mode svg { width: 20px; height: 20px; }
:is(.bf-content-global, .bf-content-system) .bf-sw-global-mode span {
  font-size: 8px;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--text) 55%, transparent);
  text-transform: uppercase;
}
:is(.bf-content-global, .bf-content-system) .bf-sw-global-mode.is-active {
  border-color: var(--accent);
  color: color-mix(in srgb, var(--accent-2) 36%, #fff);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 32%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, #2a1810 0%, #18120e 100%);
  box-shadow:
    0 8px 20px -10px color-mix(in srgb, var(--accent) 50%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
:is(.bf-content-global, .bf-content-system) .bf-sw-global-mode.is-active span { color: color-mix(in srgb, var(--accent-2) 36%, #fff); }
:is(.bf-content-global, .bf-content-system) .bf-sw-global-mode.is-active svg {
  color: var(--accent-2);
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 55%, transparent));
}

/* ─── DISPLAY tab ─── */
:is(.bf-content-global, .bf-content-system) .bfg-eyebrow-row {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.20em;
  color: color-mix(in srgb, var(--text) 45%, transparent);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 8px;
}

/* Layout LIVE: 4 botoes com mini-sketches */
:is(.bf-content-global, .bf-content-system) .bfg-layout-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
:is(.bf-content-global, .bf-content-system) .bfg-layout-btn {
  appearance: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 12px;
  background: var(--field-bg);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: none;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: border-color .15s, box-shadow .15s;
}
:is(.bf-content-global, .bf-content-system) .bfg-layout-btn:hover { border-color: rgba(255,255,255,0.14); }
:is(.bf-content-global, .bf-content-system) .bfg-layout-btn svg { width: 100%; height: auto; max-width: 78px; }
:is(.bf-content-global, .bf-content-system) .bfg-layout-btn.is-on {
  border-color: var(--accent);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 65%),
    linear-gradient(180deg, #2a1810 0%, #18120e 100%);
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--accent) 50%, transparent);
}
:is(.bf-content-global, .bf-content-system) .bfg-layout-lbl {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: color-mix(in srgb, var(--text) 55%, transparent);
  text-transform: uppercase;
}
:is(.bf-content-global, .bf-content-system) .bfg-layout-btn.is-on .bfg-layout-lbl { color: color-mix(in srgb, var(--accent-2) 36%, #fff); }

/* Imagens & Icones: 2 tiles compactos */
:is(.bf-content-global, .bf-content-system) .bfg-media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
:is(.bf-content-global, .bf-content-system) .bfg-media-tile {
  appearance: none;
  cursor: pointer;
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  display: flex; align-items: center; gap: 10px;
  text-align: left;
  transition: border-color .15s, background .15s;
}
:is(.bf-content-global, .bf-content-system) .bfg-media-tile:hover { border-color: color-mix(in srgb, var(--accent) 32%, transparent); }
:is(.bf-content-global, .bf-content-system) .bfg-media-tile.is-open {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background:
    radial-gradient(80% 80% at 0% 0%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
}
:is(.bf-content-global, .bf-content-system) .bfg-media-ico {
  width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent-2);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
:is(.bf-content-global, .bf-content-system) .bfg-media-text {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
:is(.bf-content-global, .bf-content-system) .bfg-media-lbl {
  font-family: var(--font-sys);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:is(.bf-content-global, .bf-content-system) .bfg-media-cnt {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--text) 45%, transparent);
  font-weight: 700;
}

/* ─── LEDS tab ─── */
/* Brilho · slider horizontal full-width c/ track laranja + thumb */
:is(.bf-content-global, .bf-content-system) .bfg-bright { padding: 2px 0; }
:is(.bf-content-global, .bf-content-system) .bfg-bright-input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
:is(.bf-content-global, .bf-content-system) .bfg-bright-input::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(
    90deg,
    var(--accent) 0%, var(--accent-2) var(--p, 65%),
    rgba(0,0,0,0.5) var(--p, 65%), rgba(0,0,0,0.5) 100%
  );
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 40%, transparent);
}
:is(.bf-content-global, .bf-content-system) .bfg-bright-input::-moz-range-track {
  height: 6px; border-radius: 3px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.05);
}
:is(.bf-content-global, .bf-content-system) .bfg-bright-input::-moz-range-progress {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
}
:is(.bf-content-global, .bf-content-system) .bfg-bright-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px; border-radius: 999px;
  background: linear-gradient(180deg, #fff 0%, #e0e0e6 100%);
  border: 1px solid rgba(0,0,0,0.2);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
  margin-top: -10px;
  cursor: pointer;
}
:is(.bf-content-global, .bf-content-system) .bfg-bright-input::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 999px;
  background: linear-gradient(180deg, #fff 0%, #e0e0e6 100%);
  border: 1px solid rgba(0,0,0,0.2);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
  cursor: pointer;
}
:is(.bf-content-global, .bf-content-system) .bfg-bright-marks {
  display: flex; justify-content: space-between;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--text) 40%, transparent);
  font-weight: 700;
}
:is(.bf-content-global, .bf-content-system) .bfg-bright-now { color: var(--accent-2); }

/* Prévia do SW desligado: arc esquerda + toggle direita */
:is(.bf-content-global, .bf-content-system) .bfg-preview-row {
  display: flex; align-items: center; gap: 14px;
}
:is(.bf-content-global, .bf-content-system) .bfg-preview-row > .bf-fsw {
  flex: 0 0 96px;
}

/* FS arcs em tile com moldura (igual GFsArc do design) */
:is(.bf-content-global, .bf-content-system) .bf-fsw-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 12px;
}
:is(.bf-content-global, .bf-content-system) .bf-fsw-grid.bfg-fsw-2cols {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
:is(.bf-content-global, .bf-content-system) .bf-fsw-grid.bfg-fsw-6cols {
  grid-template-columns: repeat(3, 1fr);
}
:is(.bf-content-global, .bf-content-system) .bf-fsw {
  padding: 8px 2px 6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 0;
}
:is(.bf-content-global, .bf-content-system) .bf-fsw-glyph {
  width: 40px; height: 40px;
}
:is(.bf-content-global, .bf-content-system) .bfg-preview-row > .bf-fsw .bf-fsw-glyph {
  width: 60px; height: 60px;
}
:is(.bf-content-global, .bf-content-system) .bfg-fsw-2cols .bf-fsw .bf-fsw-glyph {
  width: 56px; height: 56px;
}
:is(.bf-content-global, .bf-content-system) .bf-fsw-label {
  font-size: 7.5px;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--text) 55%, transparent);
  font-weight: 700;
  text-align: center;
  line-height: 1.1;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
:is(.bf-content-global, .bf-content-system) .bfg-preview-row > .bf-fsw .bf-fsw-label,
:is(.bf-content-global, .bf-content-system) .bfg-fsw-2cols .bf-fsw .bf-fsw-label {
  font-size: 8.5px;
  letter-spacing: 0.18em;
}
:is(.bf-content-global, .bf-content-system) .bf-fsw-arcs path {
  stroke-width: 9;
}
/* No mobile (largura estreita), o card LEDs Dedicados ficaria com 2 cols
   = arcs largos demais. Mantem 2 cols mas com max-width pra centralizar. */
:is(.bf-content-global, .bf-content-system) .bfg-fsw-2cols .bf-fsw { max-width: 160px; margin: 0 auto; width: 100%; }

/* LED cards: denser, more balanced controls. */
:is(.bf-content-global, .bf-content-system) .bfg-led-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}
:is(.bf-content-global, .bf-content-system) .bfg-led-card .bf-card-head {
  margin-bottom: 10px;
}
:is(.bf-content-global, .bf-content-system) .bfg-led-card .bf-card-head h3 {
  line-height: 1.1;
}
:is(.bf-content-global, .bf-content-system) .bfg-led-card-brightness {
  justify-content: flex-start;
}
:is(.bf-content-global, .bf-content-system) .bfg-led-card-brightness .bfg-bright {
  margin-top: 4px;
  padding: 18px 16px 14px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  background:
    radial-gradient(70% 110% at 0% 50%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.012) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
:is(.bf-content-global, .bf-content-system) .bfg-led-card-brightness .bfg-bright-input {
  height: 36px;
}
:is(.bf-content-global, .bf-content-system) .bfg-led-card-brightness .bfg-bright-input::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
}
:is(.bf-content-global, .bf-content-system) .bfg-led-card-brightness .bfg-bright-input::-moz-range-track,
:is(.bf-content-global, .bf-content-system) .bfg-led-card-brightness .bfg-bright-input::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
}
:is(.bf-content-global, .bf-content-system) .bfg-led-card-brightness .bfg-bright-input::-webkit-slider-thumb {
  width: 30px;
  height: 30px;
  margin-top: -12px;
}
:is(.bf-content-global, .bf-content-system) .bfg-led-card-brightness .bfg-bright-input::-moz-range-thumb {
  width: 30px;
  height: 30px;
}
:is(.bf-content-global, .bf-content-system) .bfg-led-card-brightness .bfg-bright-marks {
  margin-top: 10px;
  align-items: center;
}
:is(.bf-content-global, .bf-content-system) .bfg-led-card-brightness .bfg-bright-now {
  min-width: 46px;
  padding: 4px 8px;
  border-radius: 999px;
  text-align: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
:is(.bf-content-global, .bf-content-system) .bfg-led-card-banks .bf-seg {
  margin-bottom: 10px;
}
:is(.bf-content-global, .bf-content-system) .bfg-led-card-banks .bf-fsw-grid {
  margin-top: 0;
}
:is(.bf-content-global, .bf-content-system) .bfg-led-card-preview .bfg-preview-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}
:is(.bf-content-global, .bf-content-system) .bfg-led-card-preview .bfg-preview-row > .bf-fsw {
  width: 100%;
  min-height: 104px;
  justify-content: center;
  flex-basis: auto;
}
:is(.bf-content-global, .bf-content-system) .bfg-led-card-preview .bfg-preview-toggle {
  min-width: 0;
  min-height: 104px;
  margin: 0;
}
:is(.bf-content-global, .bf-content-system) .bfg-preview-toggle .bfg-toggle-text {
  min-width: 0;
}
:is(.bf-content-global, .bf-content-system) .bfg-led-card-dedicated .bfg-fsw-2cols {
  margin-top: 0;
  gap: 12px;
}
:is(.bf-content-global, .bf-content-system) .bfg-led-card-dedicated .bfg-fsw-2cols .bf-fsw {
  max-width: 190px;
  padding-block: 12px 10px;
}
:is(.bf-content-global, .bf-content-system) .bfg-led-card-dedicated .bfg-layer-toggle {
  margin-top: 14px;
}
:is(.bf-content-global, .bf-content-system) .bfg-led-card-dedicated .bfg-layer-toggle .bfg-toggle-text {
  min-width: 0;
}
:is(.bf-content-global, .bf-content-system) .bfg-toggle-card {
  appearance: none;
  width: 100%;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  background:
    radial-gradient(90% 120% at 100% 50%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.060) 0%, rgba(255,255,255,0.020) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.055),
    0 10px 24px -18px rgba(0,0,0,0.8);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .08s ease;
}
:is(.bf-content-global, .bf-content-system) .bfg-toggle-card:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  background:
    radial-gradient(90% 120% at 100% 50%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.070) 0%, rgba(255,255,255,0.026) 100%);
}
:is(.bf-content-global, .bf-content-system) .bfg-toggle-card:active {
  transform: translateY(1px);
}
:is(.bf-content-global, .bf-content-system) .bfg-toggle-card.is-on {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background:
    radial-gradient(100% 130% at 100% 50%, color-mix(in srgb, var(--accent) 28%, transparent) 0%, transparent 64%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, transparent) 0%, color-mix(in srgb, var(--accent) 5.5%, transparent) 100%);
  box-shadow:
    0 10px 24px -16px color-mix(in srgb, var(--accent) 58%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
:is(.bf-content-global, .bf-content-system) .bfg-toggle-card .label {
  display: block;
  font-family: var(--font-sys);
  font-size: 15px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0;
  text-transform: none;
}
:is(.bf-content-global, .bf-content-system) .bfg-toggle-card .bfg-toggle-sub {
  margin-top: 4px;
}
:is(.bf-content-global, .bf-content-system) .bfg-toggle-pill {
  min-width: 76px;
  height: 38px;
  padding: 0 8px 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.45);
}
:is(.bf-content-global, .bf-content-system) .bfg-toggle-card.is-on .bfg-toggle-pill {
  background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
  border-color: color-mix(in srgb, var(--accent) 62%, transparent);
  box-shadow:
    0 8px 16px -8px color-mix(in srgb, var(--accent) 75%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.25);
}
:is(.bf-content-global, .bf-content-system) .bfg-toggle-state {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: color-mix(in srgb, var(--text) 58%, transparent);
}
:is(.bf-content-global, .bf-content-system) .bfg-toggle-card.is-on .bfg-toggle-state {
  color: #1a0e06;
}
:is(.bf-content-global, .bf-content-system) .bfg-toggle-dot {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, #e8e8ee 0%, #cfcfd8 100%);
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
:is(.bf-content-global, .bf-content-system) .bfg-toggle-card.is-on .bfg-toggle-dot {
  background: #fff;
}
@media (max-width: 560px) {
  :is(.bf-content-global, .bf-content-system) .bfg-led-card-preview .bfg-preview-row {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 10px;
  }
  :is(.bf-content-global, .bf-content-system) .bfg-led-card-preview .bfg-preview-toggle {
    padding: 12px;
  }
}

/* ─── SYSTEM tab specifics ─── */
/* IconTabs: 4 colunas no system (cols-4 vem do JSX; antes eram 6 -> 5 -> 4
   conforme as abas IDIOMA e TESTE foram removidas — seus cards migraram pra
   aba PRINCIPAL/MAIN). As regras por-tab sao escopadas em .cols-4 de proposito
   pra ganhar das regras genericas .cols-N (que tem 3 classes) e fixar o
   tamanho mobile. */
.bf-content-system .bf-icon-tabs.cols-4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 4px;
}
.bf-content-system .bf-icon-tabs.cols-4 .bf-icon-tab {
  padding: 9px 3px 7px;
  border-radius: 12px;
  gap: 4px;
}
.bf-content-system .bf-icon-tabs.cols-4 .bf-icon-tab svg { width: 30px; height: 30px; }
.bf-content-system .bf-icon-tabs.cols-4 .bf-icon-tab span {
  font-size: 10px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* ─── GLOBAL / SYSTEM — barra de icone-abas MAIOR no desktop ───────────
   No desktop a barra de abas (MIDI/TELA/LEDS/BANCOS no GLOBAL; 4 abas no
   SYSTEM) herdava o tamanho mobile do redesign Studio (svg 22px / fonte
   8.5px) e do bloco "SYSTEM tab specifics" acima (svg 20px / fonte 7.5px)
   — ficava pequena demais pra um navegador desktop. Aqui ela cresce SO no
   desktop (>= 900px). Precisa vir DEPOIS de todos os blocos de .bf-icon-tab
   (Studio em ~5856 e SYSTEM specifics logo acima) pra vencer por ordem de
   fonte com a mesma especificidade. Mobile (< 900px) totalmente intacto. */
@media (min-width: 900px) {
  /* GLOBAL — 4 abas: barra larga e botoes grandes (libera o cap de 520px
     da regra base .bf-content > .bf-icon-tabs via width fixo + max-width). */
  .bf-content-global > .bf-icon-tabs {
    width: 640px;
    max-width: none;
    padding: 6px;
    gap: 6px;
    border-radius: 22px;
  }
  .bf-content-global .bf-icon-tab {
    /* Altura menor: corta o padding vertical e o gap (icone svg 38px e fonte
       12px ficam iguais). Mobile intacto (fora do @media). */
    padding: 11px 10px 10px;
    gap: 6px;
    border-radius: 18px;
  }
  .bf-content-global .bf-icon-tab svg { width: 38px; height: 38px; }
  .bf-content-global .bf-icon-tab span {
    font-size: 12px;
    letter-spacing: 0.14em;
  }

  /* SYSTEM — 4 abas (IDIOMA e TESTE foram removidas): barra larga e botoes
     grandes, no mesmo espirito do GLOBAL (que tambem tem 4 abas). Os seletores
     repetem .bf-icon-tabs.cols-4 de proposito pra igualar/superar a
     especificidade das regras-base e do bloco "SYSTEM tab specifics" acima.
     aspect-ratio:auto desfaz qualquer tile quadrado -> pill como no GLOBAL. */
  .bf-content-system > .bf-icon-tabs.cols-4 {
    width: 640px;
    max-width: none;
    padding: 6px;
    gap: 6px;
    border-radius: 22px;
  }
  .bf-content-system .bf-icon-tabs.cols-4 .bf-icon-tab {
    aspect-ratio: auto;
    /* Mesma reducao de altura do GLOBAL acima (icone/fonte inalterados). */
    padding: 11px 10px 10px;
    gap: 6px;
    border-radius: 18px;
  }
  .bf-content-system .bf-icon-tabs.cols-4 .bf-icon-tab svg { width: 38px; height: 38px; }
  .bf-content-system .bf-icon-tabs.cols-4 .bf-icon-tab span {
    font-size: 12px;
    letter-spacing: 0.14em;
  }
}

/* MODELO — Família: 3 tiles com numero Antonio */
.bf-content-system .bfg-family-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
/* Card MODELO unificado (familia + variante): a 2a eyebrow ("VARIANTE")
   ganha um respiro do grid de familia acima. */
.bf-content-system .bfg-model-eyebrow-2 {
  margin-top: 16px;
}
.bf-content-system .bfg-family-btn {
  appearance: none;
  cursor: pointer;
  padding: 14px 8px 12px;
  border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--field-bg);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  transition: border-color .15s, box-shadow .15s;
}
.bf-content-system .bfg-family-btn:hover { border-color: rgba(255,255,255,0.14); }
.bf-content-system .bfg-family-btn.is-on {
  border-color: var(--accent);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 32%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, #2a1810 0%, #18120e 100%);
  box-shadow:
    0 8px 22px -10px color-mix(in srgb, var(--accent) 55%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.bf-content-system .bfg-family-num {
  font-family: "Antonio", system-ui, sans-serif;
  font-weight: 700;
  font-size: 34px;
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--text);
}
.bf-content-system .bfg-family-btn.is-on .bfg-family-num {
  color: var(--accent-2);
  text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 40%, transparent);
}
.bf-content-system .bfg-family-lbl {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--text) 45%, transparent);
  font-weight: 700;
}
.bf-content-system .bfg-family-btn.is-on .bfg-family-lbl { color: rgba(255,180,130,0.7); }

/* MODELO — Variant radio rows: 2 por linha */
.bf-content-system .bfg-variant-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.bf-content-system .bfg-variant-row {
  appearance: none;
  cursor: pointer;
  text-align: left;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  display: flex; align-items: center; gap: 12px;
  transition: border-color .15s, background .15s;
}
.bf-content-system .bfg-variant-row:hover { border-color: rgba(255,255,255,0.14); }
.bf-content-system .bfg-variant-row.is-on {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent) 0%, color-mix(in srgb, var(--accent) 4%, transparent) 100%);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.bf-content-system .bfg-variant-radio {
  width: 16px; height: 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.bf-content-system .bfg-variant-radio.is-on {
  border-color: var(--accent);
  background: rgba(0,0,0,0.3);
}
.bf-content-system .bfg-variant-radio.is-on > span {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}
.bf-content-system .bfg-variant-text {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.bf-content-system .bfg-variant-name {
  font-family: var(--font-sys);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
}
.bf-content-system .bfg-variant-row.is-on .bfg-variant-name { color: color-mix(in srgb, var(--accent-2) 36%, #fff); }
.bf-content-system .bfg-variant-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--text) 45%, transparent);
  font-weight: 600;
  text-transform: uppercase;
}

/* WIFI — status row */
.bf-content-system .bfg-wifi-status {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}
.bf-content-system .bfg-wifi-status.is-on {
  background: rgba(48,209,88,0.08);
  border-color: rgba(48,209,88,0.25);
}
.bf-content-system .bfg-wifi-status-ico {
  width: 36px; height: 36px; border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: color-mix(in srgb, var(--text) 45%, transparent);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.bf-content-system .bfg-wifi-status.is-on .bfg-wifi-status-ico {
  background: rgba(48,209,88,0.18);
  color: #65e08a;
  border-color: rgba(48,209,88,0.35);
}
.bf-content-system .bfg-wifi-status-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.bf-content-system .bfg-wifi-status-ssid {
  font-family: var(--font-sys);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bf-content-system .bfg-wifi-status-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: color-mix(in srgb, var(--text) 50%, transparent);
  font-weight: 700;
  text-transform: uppercase;
}
.bf-content-system .bfg-wifi-status.is-on .bfg-wifi-status-sub { color: #65e08a; }

/* Input password com o mesmo visual do bfg-select-box */
.bf-content-system .bfg-select-box .bf-input.bfg-select-lg {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
  color: var(--text);
  font-family: var(--font-sys);
  font-size: 16px;
  font-weight: 600;
  width: 100%;
  outline: none;
  letter-spacing: 0.02em;
}
.bf-content-system .bfg-select-box .bf-input.bfg-select-lg::placeholder {
  color: color-mix(in srgb, var(--text) 35%, transparent);
  font-weight: 500;
}

/* WIFI — botões BUSCAR/CONECTAR */
.bf-content-system .bfg-wifi-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: 12px;
}
.bf-content-system .bfg-btn {
  appearance: none;
  cursor: pointer;
  height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-transform: uppercase;
}
.bf-content-system .bfg-btn:hover:not(:disabled) { border-color: rgba(255,255,255,0.18); }
.bf-content-system .bfg-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.bf-content-system .bfg-btn-primary {
  background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  color: #1a0e06;
  box-shadow:
    0 6px 16px -6px color-mix(in srgb, var(--accent) 60%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.25);
}
.bf-content-system .bfg-wifi-warn {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--text) 60%, transparent);
  line-height: 1.4;
}

/* WIFI — lista de redes próximas */
.bf-content-system .bfg-wifi-list {
  display: flex; flex-direction: column; gap: 4px;
}
.bf-content-system .bfg-wifi-empty {
  padding: 12px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--text) 45%, transparent);
  text-align: center;
}
.bf-content-system .bfg-wifi-row {
  appearance: none;
  cursor: pointer;
  text-align: left;
  display: flex; align-items: center; gap: 10px;
  padding: 8px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s;
}
.bf-content-system .bfg-wifi-row:hover { background: rgba(255,255,255,0.03); }
.bf-content-system .bfg-wifi-row.is-current {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-color: color-mix(in srgb, var(--accent) 20%, transparent);
}
.bf-content-system .bfg-wifi-bars {
  display: flex; align-items: flex-end; gap: 1.5px; height: 14px;
  flex: 0 0 auto;
}
.bf-content-system .bfg-wifi-bar {
  width: 2.4px; border-radius: 1px;
  background: color-mix(in srgb, var(--text) 16%, transparent);
}
.bf-content-system .bfg-wifi-bar:nth-child(1) { height: 4px; }
.bf-content-system .bfg-wifi-bar:nth-child(2) { height: 8px; }
.bf-content-system .bfg-wifi-bar:nth-child(3) { height: 11px; }
.bf-content-system .bfg-wifi-bar:nth-child(4) { height: 14px; }
.bf-content-system .bfg-wifi-bar.is-on { background: color-mix(in srgb, var(--text) 75%, transparent); }
.bf-content-system .bfg-wifi-bars.is-current .bfg-wifi-bar.is-on {
  background: var(--accent);
  box-shadow: 0 0 4px color-mix(in srgb, var(--accent) 65%, transparent);
}
.bf-content-system .bfg-wifi-ssid {
  font-family: var(--font-sys);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bf-content-system .bfg-wifi-row.is-current .bfg-wifi-ssid { color: color-mix(in srgb, var(--accent-2) 36%, #fff); }
.bf-content-system .bfg-wifi-current {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  color: var(--accent-2);
  font-weight: 700;
  text-transform: uppercase;
}
.bf-content-system .bfg-wifi-rssi {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  color: color-mix(in srgb, var(--text) 40%, transparent);
  font-weight: 600;
  white-space: nowrap;
}
.bf-content-system .bfg-wifi-rssi-u { margin-left: 3px; opacity: 0.7; }
.bf-content-system .bfg-wifi-lock { color: color-mix(in srgb, var(--text) 45%, transparent); flex: 0 0 auto; }

/* USB HOST — info rows com separador tracejado */
.bf-content-system .bfg-usbh-rows {
  display: flex; flex-direction: column; gap: 7px;
}
.bf-content-system .bfg-usbh-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  padding-bottom: 7px;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.bf-content-system .bfg-usbh-row:last-child { border-bottom: 0; padding-bottom: 0; }
.bf-content-system .bfg-usbh-l {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.20em;
  color: color-mix(in srgb, var(--text) 45%, transparent);
  font-weight: 700;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.bf-content-system .bfg-usbh-v {
  font-family: var(--font-sys);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 60%;
  text-align: right;
}

/* Botão outlined orange (MODO UPDATE OTA) */
.bf-content-system .bfg-btn-outline {
  appearance: none;
  cursor: pointer;
  padding: 11px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}
.bf-content-system .bfg-btn-outline:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
}
.bf-content-system .bfg-btn-outline:disabled { opacity: 0.45; cursor: not-allowed; }

/* Variante com ícone (UPLOAD MODE HOST — chip recebendo firmware) */
.bf-content-system .bfg-btn-host-update {
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.bf-content-system .bfg-btn-host-update svg { flex: 0 0 auto; }

/* CÓPIA — Backup/Restore botões grandes com ícone vertical */
.bf-content-system .bfg-backup-actions {
  margin-top: 14px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.bf-content-system .bfg-backup-btn {
  appearance: none;
  cursor: pointer;
  padding: 14px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: border-color .15s, background .15s;
}
.bf-content-system .bfg-backup-btn:hover:not(:disabled) {
  border-color: rgba(255,255,255,0.18);
}
.bf-content-system .bfg-backup-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.bf-content-system .bfg-backup-btn span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  font-weight: 700;
}
.bf-content-system .bfg-backup-btn-primary {
  background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  color: #1a0e06;
  box-shadow:
    0 8px 20px -8px color-mix(in srgb, var(--accent) 60%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.25);
}

/* Status pill (PRONTO PARA INICIAR) */
.bf-content-system .bfg-backup-pill {
  margin-top: 12px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  display: flex; align-items: center; gap: 10px;
}
.bf-content-system .bfg-backup-pill-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 40%, transparent);
  flex: 0 0 auto;
}
.bf-content-system .bfg-backup-pill.is-ok .bfg-backup-pill-dot {
  background: #30d158; box-shadow: 0 0 6px rgba(48,209,88,0.7);
}
.bf-content-system .bfg-backup-pill.is-err .bfg-backup-pill-dot {
  background: #ff6b6b; box-shadow: 0 0 6px rgba(255,107,107,0.7);
}
.bf-content-system .bfg-backup-pill-txt {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--text) 50%, transparent);
  font-weight: 700;
  text-transform: uppercase;
  flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bf-content-system .bfg-backup-pill.is-ok .bfg-backup-pill-txt { color: #65e08a; }
.bf-content-system .bfg-backup-pill.is-err .bfg-backup-pill-txt { color: #ffa3a3; }

/* Apagar dados — descrição + 2 botões vermelhos com sub-label */
.bf-content-system .bfg-danger-desc {
  margin: 0 0 12px;
  font-family: var(--font-sys);
  font-size: 12px;
  color: color-mix(in srgb, var(--text) 55%, transparent);
  line-height: 1.4;
}
.bf-content-system .bfg-danger-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.bf-content-system .bfg-danger-btn {
  appearance: none;
  cursor: pointer;
  padding: 11px 10px 12px;
  border-radius: 12px;
  background: rgba(255,69,58,0.08);
  border: 1px solid rgba(255,69,58,0.30);
  color: #ff8a82;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  transition: background .15s, border-color .15s;
}
.bf-content-system .bfg-danger-btn:hover:not(:disabled) {
  background: rgba(255,69,58,0.14);
  border-color: rgba(255,69,58,0.50);
}
.bf-content-system .bfg-danger-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.bf-content-system .bfg-danger-lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  font-weight: 700;
}
.bf-content-system .bfg-danger-sub {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  color: rgba(255,138,130,0.65);
  font-weight: 600;
}
.bf-content-system .bfg-danger-msg {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.bf-content-system .bfg-danger-msg.is-ok  { color: #30d158; }
.bf-content-system .bfg-danger-msg.is-err { color: #ff6b6b; }

/* STORAGE — uso da particao LittleFS (card no SYSTEM/BACKUP). */
.bf-storage-bar {
  display: flex;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
  margin: 4px 0 10px;
}
.bf-storage-seg { height: 100%; min-width: 2px; }
.bf-storage-seg + .bf-storage-seg { box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25); }
.bf-storage-totals {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 14px;
}
.bf-storage-totals b { color: var(--text); font-weight: 700; }
.bf-storage-free b { color: #30d158; }
.bf-storage-of { margin-left: auto; font-size: 11px; color: var(--faint); }
.bf-storage-rows { display: flex; flex-direction: column; gap: 8px; }
.bf-storage-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.bf-storage-dot {
  width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto;
}
.bf-storage-lbl { color: var(--text); }
.bf-storage-val { margin-left: auto; color: var(--muted); }
.bf-storage-max { color: var(--faint); }
.bf-storage-refresh { margin-top: 16px; }

/* HARD TEST */
.bf-content-system .bfg-test-desc {
  margin: 0 0 14px;
  font-family: var(--font-sys);
  font-size: 12px;
  color: color-mix(in srgb, var(--text) 55%, transparent);
  line-height: 1.4;
}
.bf-content-system .bfg-test-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
}
.bf-content-system .bfg-test-btn {
  appearance: none;
  cursor: pointer;
  padding: 18px 10px;
  border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--field-bg);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  position: relative;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.bf-content-system .bfg-test-btn:hover:not(:disabled) { border-color: rgba(255,255,255,0.14); }
.bf-content-system .bfg-test-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.bf-content-system .bfg-test-btn.is-on {
  border-color: var(--accent);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 36%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, #2a1810 0%, #18120e 100%);
  box-shadow:
    0 12px 30px -12px color-mix(in srgb, var(--accent) 55%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.bf-content-system .bfg-test-ico {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.06);
  color: color-mix(in srgb, var(--text) 70%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.bf-content-system .bfg-test-btn.is-on .bfg-test-ico {
  background:
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 75%),
    rgba(0,0,0,0.32);
  border-color: color-mix(in srgb, var(--accent) 33%, transparent);
  color: var(--accent-2);
  box-shadow: 0 0 16px -4px color-mix(in srgb, var(--accent) 40%, transparent);
}
.bf-content-system .bfg-test-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text);
  font-weight: 700;
}
.bf-content-system .bfg-test-btn.is-on .bfg-test-lbl { color: color-mix(in srgb, var(--accent-2) 36%, #fff); }
.bf-content-system .bfg-test-pill {
  position: absolute; top: 8px; right: 8px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px 2px 5px;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: 0.16em;
  color: var(--accent-2);
  font-weight: 700;
}
.bf-content-system .bfg-test-pill-dot {
  width: 4px; height: 4px; border-radius: 999px;
  background: var(--accent); box-shadow: 0 0 5px var(--accent);
  animation: bfgPulse 1.2s infinite;
}
@keyframes bfgPulse {
  0%, 100% { opacity: 1; } 50% { opacity: 0.35; }
}

/* HARD TEST · STOP button */
.bf-content-system .bfg-test-stop {
  appearance: none;
  cursor: pointer;
  width: 100%;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,69,58,0.10);
  border: 1px solid rgba(255,69,58,0.40);
  color: #ff8a82;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  font-weight: 700;
  text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s, border-color .15s;
}
.bf-content-system .bfg-test-stop:hover:not(:disabled) {
  background: rgba(255,69,58,0.18);
  border-color: rgba(255,69,58,0.60);
}
.bf-content-system .bfg-test-stop:disabled { opacity: 0.30; cursor: not-allowed; }

/* HARD TEST · Status pill */
.bf-content-system .bfg-test-status {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}
.bf-content-system .bfg-test-status.is-running {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}
.bf-content-system .bfg-test-status-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 40%, transparent);
  flex: 0 0 auto;
}
.bf-content-system .bfg-test-status.is-running .bfg-test-status-dot {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: bfgPulse 1.2s infinite;
}
.bf-content-system .bfg-test-status-txt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: color-mix(in srgb, var(--text) 55%, transparent);
  font-weight: 700;
  text-transform: uppercase;
}
.bf-content-system .bfg-test-status.is-running .bfg-test-status-txt { color: color-mix(in srgb, var(--accent-2) 36%, #fff); }

/* SYSTEM THEME */
.bf-content-system .bfg-theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.bf-content-system .bfg-theme-btn {
  appearance: none;
  cursor: pointer;
  min-height: 66px;
  padding: 10px 11px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.018) 100%);
  color: var(--text);
  text-align: left;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.bf-content-system .bfg-theme-btn:hover {
  border-color: rgba(255,255,255,0.16);
  transform: translateY(-1px);
}
.bf-content-system .bfg-theme-btn.is-on {
  border-color: color-mix(in srgb, var(--theme-accent) 64%, rgba(255,255,255,0.14));
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--theme-accent) 22%, transparent) 0%, transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,0.065) 0%, rgba(255,255,255,0.025) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 16px color-mix(in srgb, var(--theme-accent) 24%, transparent);
}
.bf-content-system .bfg-theme-swatch {
  width: 42px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 10px rgba(0,0,0,0.25);
}
.bf-content-system .bfg-theme-swatch span:nth-child(1) { background: linear-gradient(180deg, var(--theme-hi), var(--theme-accent)); }
.bf-content-system .bfg-theme-swatch span:nth-child(2) { background: linear-gradient(180deg, var(--theme-accent-2), var(--theme-accent)); }
.bf-content-system .bfg-theme-swatch span:nth-child(3) { background: linear-gradient(180deg, var(--theme-accent), var(--theme-lo)); }
.bf-content-system .bfg-theme-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bf-content-system .bfg-theme-name {
  font-family: var(--font-sys);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bf-content-system .bfg-theme-sub {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--text) 48%, transparent);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bf-content-system .bfg-theme-radio {
  width: 15px;
  height: 15px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text) 28%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bf-content-system .bfg-theme-radio.is-on {
  border-color: var(--theme-accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--theme-accent) 46%, transparent);
}
.bf-content-system .bfg-theme-radio span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--theme-accent);
}

/* Compactar TESTE DE HARDWARE + Status no desktop (altura menor). So o card
   de teste e encolhido — o Status acompanha por align-items:stretch da grid
   de 2 colunas. Escopado em @media >=900px: mobile fica intacto. */
@media (min-width: 900px) {
  /* Esconde a frase descritiva no desktop pra reduzir mais a altura. Mobile
     mantem o texto (display:none so dentro do @media). */
  .bf-content-system .bfg-test-desc { display: none; }
  .bf-content-system .bfg-test-btn { padding: 11px 10px; gap: 6px; border-radius: 13px; }
  .bf-content-system .bfg-test-ico { width: 34px; height: 34px; border-radius: 9px; }
  .bf-content-system .bfg-test-stop { margin-top: 10px; padding: 9px 14px; }
}

/* IDIOMA */
.bf-content-system .bfg-lang-desc {
  margin: 0 0 12px;
  font-family: var(--font-sys);
  font-size: 12px;
  color: color-mix(in srgb, var(--text) 55%, transparent);
  line-height: 1.4;
}
.bf-content-system .bfg-lang-list {
  display: flex; flex-direction: column; gap: 6px;
}
.bf-content-system .bfg-lang-row {
  appearance: none;
  cursor: pointer;
  text-align: left;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  display: flex; align-items: center; gap: 12px;
  transition: background .15s, border-color .15s;
}
.bf-content-system .bfg-lang-row:hover { border-color: rgba(255,255,255,0.14); }
.bf-content-system .bfg-lang-row.is-on {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, transparent) 0%, color-mix(in srgb, var(--accent) 4%, transparent) 100%);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.bf-content-system .bfg-lang-code {
  width: 30px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.10em;
  color: color-mix(in srgb, var(--text) 50%, transparent);
  font-weight: 700;
  text-align: center;
  flex: 0 0 30px;
}
.bf-content-system .bfg-lang-row.is-on .bfg-lang-code { color: var(--accent-2); }
.bf-content-system .bfg-lang-text {
  flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.bf-content-system .bfg-lang-name {
  font-family: var(--font-sys);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
}
.bf-content-system .bfg-lang-row.is-on .bfg-lang-name { color: color-mix(in srgb, var(--accent-2) 36%, #fff); }
.bf-content-system .bfg-lang-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--text) 45%, transparent);
  font-weight: 600;
}
.bf-content-system .bfg-lang-radio {
  width: 16px; height: 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.bf-content-system .bfg-lang-radio.is-on {
  border-color: var(--accent);
  background: rgba(0,0,0,0.3);
}
.bf-content-system .bfg-lang-radio.is-on > span {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}

/* SOBRE card */
.bf-content-system .bfg-about-rows {
  display: flex; flex-direction: column; gap: 8px;
}
.bf-content-system .bfg-about-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.bf-content-system .bfg-about-l {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.20em;
  color: color-mix(in srgb, var(--text) 45%, transparent);
  font-weight: 700;
}
.bf-content-system .bfg-about-v {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text);
  font-weight: 600;
}

/* LIGHT SYSTEM THEME */
.bf-screen.is-theme-light {
  --bevel-edge: linear-gradient(155deg, #ffffff 0%, #c7ced8 30%, #8d99a9 58%, #dfe5ed 100%);
  --bevel-edge-dim: linear-gradient(155deg, #d7dde6 0%, #aeb8c5 52%, #eef2f6 100%);
  --card-glow: 0 10px 28px -18px rgba(24,31,42,0.55);
  --bevel-relief: inset 0 1px 0 rgba(255,255,255,0.86), inset 0 -1px 1px rgba(26,34,46,0.12), var(--card-glow);
  /* Superficies recorrentes viram "vidro claro" — propaga pra todos os
     campos/botoes/pills que usam var(--field-bg)/var(--field-bg-2). */
  --field-bg: linear-gradient(180deg, rgba(255,255,255,0.80) 0%, rgba(230,236,244,0.78) 100%);
  --field-bg-2: linear-gradient(180deg, #f7f9fc 0%, #e8edf4 100%);
  background:
    radial-gradient(80% 50% at 50% -10%, var(--screen-glow-a) 0%, transparent 60%),
    radial-gradient(60% 40% at 100% 100%, var(--screen-glow-b) 0%, transparent 55%),
    var(--screen);
}
.bf-screen.is-theme-light::before { opacity: 0.55; }
.bf-screen.is-theme-light :is(.bf-content-global, .bf-content-system) .bf-card,
.bf-screen.is-theme-light .bf-card {
  background:
    var(--card-texture),
    linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(239,243,247,0.92) 100%) padding-box,
    var(--bevel-edge) border-box;
  box-shadow:
    var(--bevel-relief),
    0 18px 34px -28px rgba(25,31,42,0.48);
}
.bf-screen.is-theme-light :is(.bf-content-global, .bf-content-system) .bf-icon-tabs,
.bf-screen.is-theme-light .bf-tabbar {
  background:
    linear-gradient(rgba(247,249,252,0.82), rgba(232,237,244,0.86)) padding-box,
    var(--bevel-edge) border-box;
}
.bf-screen.is-theme-light :is(.bf-content-global, .bf-content-system) .bf-icon-tab {
  color: color-mix(in srgb, var(--text) 58%, transparent);
}
.bf-screen.is-theme-light :is(.bf-content-global, .bf-content-system) .bf-icon-tab:hover {
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
}
.bf-screen.is-theme-light :is(.bf-content-global, .bf-content-system) .bf-icon-tab.is-on {
  color: var(--accent);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 65%),
    linear-gradient(180deg, #f8fbff 0%, #e8eef7 100%);
  box-shadow:
    0 8px 22px -14px color-mix(in srgb, var(--accent) 38%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.82);
}
.bf-screen.is-theme-light :is(.bf-content-global, .bf-content-system) .bf-icon-tab.is-on span {
  color: color-mix(in srgb, var(--accent) 72%, #142033);
}
.bf-screen.is-theme-light :is(
  .bfg-family-btn,
  .bfg-variant-row,
  .bfg-lang-row,
  .bfg-test-btn,
  .bfg-theme-btn,
  .bf-sw-global-mode,
  .bfg-layout-btn,
  .bfg-media-tile,
  .bfg-led-mode-btn,
  .bfg-bank-mode-btn,
  .bfg-layer-toggle-btn,
  .bfg-led-preview-button
) {
  background: linear-gradient(180deg, rgba(255,255,255,0.74) 0%, rgba(230,236,244,0.72) 100%);
  border-color: color-mix(in srgb, var(--text) 11%, transparent);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.70);
}
.bf-screen.is-theme-light :is(
  .bfg-family-btn.is-on,
  .bfg-variant-row.is-on,
  .bfg-lang-row.is-on,
  .bfg-test-btn.is-on,
  .bfg-theme-btn.is-on,
  .bf-sw-global-mode.is-active,
  .bfg-layout-btn.is-on,
  .bfg-media-tile.is-on,
  .bfg-led-mode-btn.is-on,
  .bfg-bank-mode-btn.is-on,
  .bfg-layer-toggle-btn.is-on,
  .bfg-led-preview-button.is-on
) {
  background:
    radial-gradient(110% 90% at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 68%),
    linear-gradient(180deg, #f7fbff 0%, #dde9f8 100%);
  border-color: color-mix(in srgb, var(--accent) 58%, transparent);
  color: color-mix(in srgb, var(--accent) 72%, #142033);
  box-shadow:
    0 10px 22px -16px color-mix(in srgb, var(--accent) 44%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.82);
}
.bf-screen.is-theme-light :is(.bfg-family-btn.is-on, .bfg-test-btn.is-on, .bf-sw-global-mode.is-active) span,
.bf-screen.is-theme-light :is(.bfg-variant-row.is-on .bfg-variant-name, .bfg-lang-row.is-on .bfg-lang-name) {
  color: color-mix(in srgb, var(--accent) 72%, #142033);
}
.bf-screen.is-theme-light .bfg-test-ico {
  background: rgba(255,255,255,0.62);
  border-color: color-mix(in srgb, var(--text) 10%, transparent);
  color: color-mix(in srgb, var(--text) 54%, transparent);
}
.bf-screen.is-theme-light .bf-tabbar-plus-menu {
  background: linear-gradient(180deg, #f7f9fc 0%, #e8edf4 100%);
  border-color: var(--hair-strong);
  box-shadow: 0 18px 38px rgba(26,34,46,0.22), inset 0 1px 0 rgba(255,255,255,0.76);
}
.bf-screen.is-theme-light .bf-save.is-idle {
  background: #1b212c;
  color: #f8fbff;
}

/* LIGHT · botoes do header (tema / monitor / wifi / usb) ────────────────
   Os .bf-conn-mode tem disco escuro fixo (gradiente #1e1e23->#141418) e
   icones cinza, invisiveis no fundo claro. Aqui o disco vira "vidro claro"
   e os estados INATIVOS ganham cor escura; os estados ATIVOS mantem a cor
   de status (verde/amarelo/azul/laranja) so trocando o glow preto por um
   halo suave da propria cor. */
.bf-screen.is-theme-light .bf-conn-mode {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(228,234,242,0.90) 100%) padding-box,
    var(--bevel-edge) border-box;
  color: #5a6473;
}
.bf-screen.is-theme-light .bf-conn-mode:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: #1b212c;
}
/* WiFi / USB inativos: cinza escuro visivel */
.bf-screen.is-theme-light .bf-conn-wifi,
.bf-screen.is-theme-light .bf-conn-wifi.is-offline,
.bf-screen.is-theme-light .bf-conn-mode.is-disconnected,
.bf-screen.is-theme-light .bf-conn-mode.is-error,
.bf-screen.is-theme-light .bf-conn-mode.bf-conn-monitor {
  color: #5a6473;
  border-color: #b3bcc9;
}
/* Estados ativos: troca o glow preto por halo claro da cor de status */
.bf-screen.is-theme-light .bf-conn-wifi.is-online.is-mode-sta,
.bf-screen.is-theme-light .bf-conn-wifi.is-online.is-mode-ap,
.bf-screen.is-theme-light .bf-conn-mode.is-connected,
.bf-screen.is-theme-light .bf-conn-mode.bf-conn-monitor.is-active {
  box-shadow: var(--bevel-relief), 0 0 12px rgba(91,143,214,0.30);
}
/* Toggle de tema: amber no escuro, azul no claro — ja contrastam, so
   garante a borda metalica clara. */
.bf-screen.is-theme-light .bf-conn-mode.bf-conn-theme {
  border-color: #b3bcc9;
}
.bf-screen.is-theme-light .bf-conn-mode.bf-conn-theme.is-light {
  color: #2f6fc4;
  border-color: #2f6fc4;
}

/* LIGHT · modais e popovers ────────────────────────────────────────────
   Sao renderizados via portal em document.body (fora do .bf-screen), entao
   o tema e espelhado no <body> por um useEffect (classe is-theme-light +
   vars de cor). Aqui sobrescrevemos os fundos escuros fixos. */
/* Superficies recorrentes tambem no escopo do body (o useEffect so espelha
   --text/--card/etc; estes dois precisam ser declarados aqui pra que os
   campos/pills dentro dos modais portados nao fiquem escuros). */
body.is-theme-light {
  --field-bg: linear-gradient(180deg, rgba(255,255,255,0.80) 0%, rgba(230,236,244,0.78) 100%);
  --field-bg-2: linear-gradient(180deg, #f7f9fc 0%, #e8edf4 100%);
}
body.is-theme-light :is(.bf-modal, .bf-color-pop) {
  background: linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
  border-color: var(--hair-strong);
  box-shadow:
    0 30px 80px -18px rgba(25,31,42,0.45),
    0 0 0 1px rgba(20,28,40,0.06) inset;
}
body.is-theme-light .bf-modal-backdrop {
  background: rgba(150,160,175,0.42);
}
body.is-theme-light :is(.bf-modal-head, .bf-color-pop-head) {
  border-color: var(--hair);
}
body.is-theme-light :is(.bf-modal-close, .bf-color-pop-close) {
  background: rgba(20,28,40,0.05);
  color: var(--muted);
}
body.is-theme-light :is(.bf-modal-close:hover, .bf-color-pop-close:hover) {
  background: var(--card-2);
  color: var(--text);
}
/* Botoes de modo (.bf-sw-mode) no modal MODO DE OPERAÇÃO. */
body.is-theme-light .bf-sw-mode {
  background: linear-gradient(180deg, rgba(255,255,255,0.80) 0%, rgba(229,235,243,0.76) 100%);
  border-color: color-mix(in srgb, var(--text) 11%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}
body.is-theme-light .bf-sw-mode:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
body.is-theme-light .bf-sw-mode.is-active {
  border-color: var(--accent);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 75%),
    linear-gradient(180deg, #f7fbff 0%, #dde9f8 100%);
  color: color-mix(in srgb, var(--accent) 72%, #142033);
}
/* Swatches do color picker — bordas mais visiveis sobre fundo claro. */
body.is-theme-light .bf-swatch { border-color: rgba(20,28,40,0.14); }
body.is-theme-light .bf-swatch:hover { border-color: rgba(20,28,40,0.32); }

/* LIGHT · tela PRESET / editores de SW ─────────────────────────────────
   A tela PRESET (.bf-content-bank) e os editores de SW usam classes
   proprias (.bf-sw-card, .bf-studio-now-playing, .bf-preset-card*) com
   gradientes escuros fixos — fora do escopo global/system acima. Aqui
   espelhamos a mesma receita "vidro claro + bisotê" pra elas ficarem
   coerentes com o resto do tema claro. Os previews que imitam o display
   do pedal (tiles de banco, grid LIVE, glyph do footswitch) ficam
   intencionalmente escuros, como no aparelho. */

/* Cards principais (MAIN / PARAMETERS / editor de SW). O card "attached"
   (PresetEditorCard fundido dentro do NowPlayingCard) continua transparente. */
.bf-screen.is-theme-light .bf-content-bank :is(
  .bf-sw-card,
  .bf-studio-now-playing,
  .bf-preset-dash,
  .bf-studio-sw-preview-grid,
  .bf-preset-card:not(.bf-preset-card-attached)
) {
  background:
    var(--card-texture),
    linear-gradient(180deg, rgba(255,255,255,0.90) 0%, rgba(238,242,247,0.94) 100%) padding-box,
    var(--bevel-edge) border-box;
  box-shadow:
    var(--bevel-relief),
    0 18px 34px -28px rgba(25,31,42,0.45);
}

/* Cards do RESUMO DO PRESET (dashboard read-only por SW). */
.bf-screen.is-theme-light .bf-content-bank .bf-preset-dash-card {
  background:
    var(--card-texture),
    linear-gradient(180deg, rgba(255,255,255,0.80) 0%, rgba(233,238,244,0.85) 100%);
  border-color: color-mix(in srgb, var(--text) 10%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

/* Tiles de banco (A) + presets (1..6) na coluna esquerda. NAO sao preview
   de display — sao chrome de navegacao com gradiente escuro fixo. No tema
   claro viram vidro claro; a borda metalica colorida (cor do banco/accent)
   e o LED continuam. */
.bf-screen.is-theme-light .bf-content-bank .bf-bank-tile {
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--tile-color, var(--accent)) 20%, transparent) 0%, transparent 70%) padding-box,
    linear-gradient(180deg, #ffffff 0%, #eaeff5 100%) padding-box,
    linear-gradient(155deg, color-mix(in srgb, var(--tile-color, var(--accent)) 72%, #fff 28%) 0%, var(--tile-color, var(--accent)) 46%, color-mix(in srgb, var(--tile-color, var(--accent)) 62%, #000 38%) 100%) border-box;
}
.bf-screen.is-theme-light .bf-content-bank .bf-bank-tile .letter {
  color: color-mix(in srgb, var(--tile-color, var(--accent)) 58%, #0a1422);
  text-shadow: 0 1px 0 rgba(255,255,255,0.55),
    0 0 26px color-mix(in srgb, var(--tile-color, var(--accent)) 30%, transparent);
}
.bf-screen.is-theme-light .bf-content-bank .bf-preset {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(235,240,246,0.95) 100%) padding-box,
    var(--bevel-edge) border-box;
  box-shadow: var(--bevel-relief), 0 3px 9px rgba(25,31,42,0.16);
}
.bf-screen.is-theme-light .bf-content-bank .bf-preset.is-active {
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 70%) padding-box,
    linear-gradient(180deg, #f7fbff 0%, #dde9f8 100%) padding-box,
    var(--bevel-edge-accent) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.82),
    0 0 12px color-mix(in srgb, var(--accent) 28%, transparent),
    0 3px 9px rgba(25,31,42,0.16);
}
.bf-screen.is-theme-light .bf-content-bank .bf-preset.is-disabled {
  background:
    linear-gradient(180deg, rgba(228,233,239,0.72) 0%, rgba(212,219,228,0.72) 100%) padding-box,
    var(--bevel-edge-dim) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

/* Moldura de cada tile de SW no preview (variante com label/LED — nao a
   compact, que ja e transparente). O quadradinho interno do icone fica
   escuro de proposito: e o preview fiel do display do pedal (icone claro
   sobre fundo escuro), igual aos tiles de banco. */
.bf-screen.is-theme-light .bf-content-bank .bf-studio-sw-tile:not(.is-compact) {
  background: linear-gradient(180deg, rgba(255,255,255,0.82) 0%, rgba(232,237,244,0.86) 100%);
  border-color: color-mix(in srgb, var(--text) 10%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

/* Secao "parametros" fundida no NowPlayingCard — o veu escuro vira claro. */
.bf-screen.is-theme-light .bf-content-bank .bf-studio-np-extras {
  background: rgba(20,28,40,0.04);
}

/* Botoes/superficies internas: abas (MIDI/DISPLAY/EXTRAS), abas de modo,
   copiar/colar e o campo de selecao de modo. Estado inativo = vidro claro.
   Escopo inclui GLOBAL/SYSTEM porque o SwGlobalEditor (card SW Global em
   GLOBAL>MIDI) reusa o campo de modo / abas do editor de SW. */
.bf-screen.is-theme-light :is(.bf-content-bank, .bf-content-global, .bf-content-system) :is(
  .bf-preset-tab,
  .bf-sw-card-tab,
  .bf-sw-card-cp,
  .bf-sw-mode-field
) {
  background: linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(229,235,243,0.74) 100%);
  border-color: color-mix(in srgb, var(--text) 11%, transparent);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}
.bf-screen.is-theme-light :is(.bf-content-bank, .bf-content-global, .bf-content-system) :is(
  .bf-preset-tab,
  .bf-sw-card-tab,
  .bf-sw-card-cp
):hover {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Segmentado CLICK CURTO/LONGO/RECLICK (.bf-seg) no SW Global: o redesign
   GLOBAL deixa o track em rgba(0,0,0,0.4) (escuro). No claro vira vidro. */
.bf-screen.is-theme-light :is(.bf-content-global, .bf-content-system) .bf-seg {
  background: var(--card-2);
  border-color: color-mix(in srgb, var(--text) 10%, transparent);
  box-shadow: inset 0 1px 2px rgba(20,28,40,0.10);
}
.bf-screen.is-theme-light :is(.bf-content-global, .bf-content-system) .bf-seg button {
  color: color-mix(in srgb, var(--text) 58%, transparent);
}
.bf-screen.is-theme-light :is(.bf-content-global, .bf-content-system) .bf-seg button.is-active {
  color: #fff;
}

/* Estado ativo das abas/modo = accent (mesma receita do bloco global). */
.bf-screen.is-theme-light .bf-content-bank :is(
  .bf-preset-tab.is-active,
  .bf-sw-card-tab.is-active
) {
  background:
    radial-gradient(110% 90% at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 68%),
    linear-gradient(180deg, #f7fbff 0%, #dde9f8 100%);
  border-color: color-mix(in srgb, var(--accent) 58%, transparent);
  color: color-mix(in srgb, var(--accent) 72%, #142033);
  box-shadow:
    0 10px 22px -16px color-mix(in srgb, var(--accent) 44%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.82);
}

/* Botoes circulares do header do NowPlayingCard (TELA / SLOT+ / LAYER). */
.bf-screen.is-theme-light .bf-content-bank :is(
  .bf-studio-np-tela-sq,
  .bf-studio-np-slot-sq,
  .bf-studio-np-layer-btn
) {
  background: rgba(255,255,255,0.62);
  border-color: color-mix(in srgb, var(--text) 12%, transparent);
  color: color-mix(in srgb, var(--text) 60%, transparent);
}

/* LIGHT · superficies avulsas que ainda tinham fundo escuro fixo ────────
   Escopo duplo (.bf-screen + body) porque varios destes elementos sao
   modais portados pra document.body (createPortal). As bordas ja usam
   var(--hair)/var(--hair-strong), que o tema claro inverte — aqui so o
   fundo (e o texto branco quando ele ficaria invisivel). Mantemos
   DELIBERADAMENTE escuros os previews do display do pedal (.bf-llsk-*,
   .bf-sw-icon-cell, .bf-img-slot-tile, .bf-swatch-image,
   .bf-image-editor-canvas, .bf-studio-sw-tile.is-lit) e a tela de conexao
   (.bf-conn-*, renderizada antes do tema carregar). */
:is(.bf-screen.is-theme-light, body.is-theme-light) :is(
  .bf-sw-macros .bf-macros-slot,
  .bf-image-editor-section,
  .bf-image-editor-field input.bf-input,
  .bf-image-editor-toggle:not(.is-on)
) {
  background: linear-gradient(180deg, rgba(255,255,255,0.82) 0%, rgba(231,237,244,0.86) 100%);
}
/* Estado ATIVO do toggle do editor de imagem: tinta accent sobre claro
   (mantemos o destaque laranja/azul, so trocamos a base escura). */
:is(.bf-screen.is-theme-light, body.is-theme-light) .bf-image-editor-toggle.is-on {
  background: color-mix(in srgb, var(--accent) 16%, #ffffff);
}

/* Trilhos "afundados" (slider / barra de progresso) ganham um leve inset
   claro pra continuar lendo como um sulco, mas em tom claro. */
:is(.bf-screen.is-theme-light, body.is-theme-light) :is(
  .bf-backup-progress-track,
  .bf-slider
) {
  background: linear-gradient(180deg, #e4e9f0 0%, #eef2f7 100%);
  box-shadow: inset 0 1px 2px rgba(20,28,40,0.10);
}

/* Picker modal (lista de icones/imagens) — fundo de "vidro claro". */
:is(.bf-screen.is-theme-light, body.is-theme-light) .bf-studio-picker-modal {
  background: linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
}

/* Toggle (interruptor) desligado: pílula cinza-clara em vez de quase-preta.
   So o estado OFF — o .is-on mantem o gradiente accent definido antes. */
:is(.bf-screen.is-theme-light, body.is-theme-light) .bf-toggle:not(.is-on) {
  background: linear-gradient(180deg, #d3dae3 0%, #c4ccd8 100%);
  border-color: color-mix(in srgb, var(--text) 16%, transparent);
}

/* Chip de letra desabilitada (GLOBAL>BANKS) no estado off. */
.bf-screen.is-theme-light :is(.bf-content-global, .bf-content-system) .bf-letter-chips button.is-off {
  background: linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(228,234,242,0.82) 100%);
}

/* Swatch "OFF" (sem cor): xadrez claro + texto escuro (era xadrez escuro
   com texto branco). */
:is(.bf-screen.is-theme-light, body.is-theme-light) .bf-swatch.is-off {
  background: repeating-linear-gradient(45deg, #e3e7ee 0 5px, #cfd5df 5px 10px);
  color: color-mix(in srgb, var(--text) 62%, transparent);
}

/* Opcoes de <select> nativo: o popup do SO herda esta cor. */
:is(.bf-screen.is-theme-light, body.is-theme-light) select.bf-input option {
  background: #ffffff;
  color: var(--text);
}

/* Monitor MIDI: separadores "=" e "·" eram branco translucido (invisivel
   sobre card claro) — passam a usar o tom esmaecido do tema. */
:is(.bf-screen.is-theme-light, body.is-theme-light) :is(
  .bf-monitor-ev-msg .bf-msg-eq,
  .bf-monitor-ev-msg .bf-msg-sep
) {
  color: var(--faint);
}

/* Preview do LED (FootswitchArc): o glyph central era um radial quase preto
   ("bola preta" sobre o card claro). No tema claro vira uma "capa" de
   footswitch clara/prateada — o anel de LED colorido em volta continua. */
:is(.bf-screen.is-theme-light, body.is-theme-light) .bf-fsw-glyph {
  background:
    radial-gradient(circle at 50% 50%, #e9eef4 28%, transparent 70%),
    radial-gradient(circle at 30% 30%, #ffffff, #cfd6e0 72%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -2px 5px rgba(20,28,40,0.12),
    0 1px 2px rgba(20,28,40,0.10);
}

/* LIGHT · contornos mais definidos dos controles ───────────────────────
   Muitos campos/botoes/tiles dentro dos cards de configuracao definiam
   borda e fundo com branco translucido (rgba(255,255,255,0.0x)) — receita
   pensada pro tema ESCURO. No claro, branco-sobre-claro fica invisivel:
   os selects, os tiles de canal, os inputs e os botoes "somem" e os itens
   dentro do card viram texto solto, sem moldura. Aqui damos a esses
   controles uma linha escura translucida (derivada de --text) pra cada um
   voltar a ler como um campo/botao com contorno proprio.
   Tune central: --field-line (repouso) e --field-line-strong (hover/foco). */
.bf-screen.is-theme-light,
body.is-theme-light {
  --field-line: color-mix(in srgb, var(--text) 22%, transparent);
  --field-line-strong: color-mix(in srgb, var(--text) 36%, transparent);
}

/* Inputs de texto e selects genericos (SSID, senha, campos de SW, etc). */
:is(.bf-screen.is-theme-light, body.is-theme-light) :is(input.bf-input, select.bf-input, .bf-input) {
  border: 1px solid var(--field-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
}
:is(.bf-screen.is-theme-light, body.is-theme-light) .bf-input.is-focus,
:is(.bf-screen.is-theme-light, body.is-theme-light) input.bf-input:focus,
:is(.bf-screen.is-theme-light, body.is-theme-light) select.bf-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Chevron do select fica legivel sobre o campo claro. */
.bf-screen.is-theme-light :is(.bf-content-global, .bf-content-system) .bf-select-chev {
  color: color-mix(in srgb, var(--text) 55%, transparent);
}

/* Select global/system "normal" (nao o bfg-select-lg, que e transparente
   dentro do bfg-select-box). Ganha fundo de vidro claro + borda visivel. */
.bf-screen.is-theme-light :is(.bf-content-global, .bf-content-system) .bf-input.bf-select:not(.bfg-select-lg) {
  background: var(--field-bg-2);
  border-color: var(--field-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

/* Caixa do select com eyebrow (Match Mode / senha do Wi-Fi). */
.bf-screen.is-theme-light :is(.bf-content-global, .bf-content-system) .bfg-select-box {
  background: var(--field-bg);
  border-color: var(--field-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

/* Tiles de canal do Match Mode — eram quase invisiveis (branco 2.5%/6%). */
.bf-screen.is-theme-light :is(.bf-content-global, .bf-content-system) .bfg-ch-tile {
  background: linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(231,237,244,0.82) 100%);
  border-color: var(--field-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.bf-screen.is-theme-light :is(.bf-content-global, .bf-content-system) .bfg-ch-tile:hover {
  border-color: var(--field-line-strong);
}

/* Botoes do SYSTEM (BUSCAR / CONECTAR e variantes outline). */
.bf-screen.is-theme-light .bf-content-system .bfg-btn {
  border-color: var(--field-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.bf-screen.is-theme-light .bf-content-system .bfg-btn:hover:not(:disabled) {
  border-color: var(--field-line-strong);
}
/* O primario (CONECTAR) mantem a tinta accent — so reforca a borda colorida. */
.bf-screen.is-theme-light .bf-content-system .bfg-btn-primary {
  border-color: color-mix(in srgb, var(--accent) 62%, transparent);
}

/* Reforco geral: todos os botoes/abas/pills que o bloco claro acima ja
   tratava com borda fraca (11%) sobem pra --field-line, ficando nitidos
   dentro do card. Estado ATIVO continua com a borda accent definida antes
   (regras .is-on / .is-active vem depois e vencem). */
.bf-screen.is-theme-light :is(
  .bfg-family-btn,
  .bfg-variant-row,
  .bfg-lang-row,
  .bfg-test-btn,
  .bfg-theme-btn,
  .bf-sw-global-mode,
  .bfg-layout-btn,
  .bfg-media-tile,
  .bfg-led-mode-btn,
  .bfg-bank-mode-btn,
  .bfg-layer-toggle-btn,
  .bfg-led-preview-button
),
.bf-screen.is-theme-light :is(.bf-content-bank, .bf-content-global, .bf-content-system) :is(
  .bf-preset-tab,
  .bf-sw-card-tab,
  .bf-sw-card-cp,
  .bf-sw-mode-field
),
body.is-theme-light .bf-sw-mode {
  border-color: var(--field-line);
}

/* Trilho do segmentado (CLICK CURTO/LONGO/RECLICK) ganha contorno. */
.bf-screen.is-theme-light :is(.bf-content-global, .bf-content-system) .bf-seg {
  border-color: var(--field-line);
}

/* Chips de subsecao (BRILHO / MODELO / WI-FI). */
.bf-screen.is-theme-light .bf-chip {
  border-color: var(--field-line);
}