/* Mapas de Louvor: base visual (tema escuro e claro) */
:root, :root[data-tema="escuro"] {
  color-scheme: dark;
  /* escuro do iPhone: fundo preto e cinzas neutros (sem azul), como o modo escuro do sistema */
  --bg: #000000; --surface: #1c1c1e; --surface-2: #2c2c2e; --surface-3: #3a3a3c; --elevado: #1c1c1e;
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .14);
  --text: #f5f5f7; --text-2: #aeaeb2; --text-3: #8e8e93;
  --chord: #f3b54a; --accent: #4f7cf0; --accent-2: #3d68d8; --sync: #f3b54a;
  --sombra-1: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 1px 2px rgba(0, 0, 0, .45);
  --sombra-2: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 12px 32px rgba(0, 0, 0, .5);
  --raio: 14px; --raio-sm: 10px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
}
:root[data-tema="claro"] {
  color-scheme: light;
  --bg: #f4f5f7; --surface: #ffffff; --surface-2: #f6f7f9; --surface-3: #eceef2; --elevado: #ffffff;
  --line: rgba(16, 24, 40, .08); --line-2: rgba(16, 24, 40, .14);
  --text: #12151a; --text-2: #4a5261; --text-3: #7c8595;
  --chord: #b4520a; --accent: #2f5bd3; --accent-2: #2449b4; --sync: #c26a00;
  --sombra-1: 0 1px 2px rgba(16, 24, 40, .06), 0 0 0 1px rgba(16, 24, 40, .02);
  --sombra-2: 0 12px 32px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .06);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
button { font-family: inherit; }
svg { width: 18px; height: 18px; flex: none; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 14px;
       border-radius: var(--raio-sm); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text);
       font: 600 14px/1 var(--font); cursor: pointer; box-shadow: var(--sombra-1); white-space: nowrap;
       transition: background-color .15s, border-color .15s, color .15s, transform .06s; }
.btn:hover { background: var(--surface-3); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.icone { width: 38px; padding: 0; }
.btn.primario { background: var(--accent); border-color: transparent; color: #fff; }
.btn.primario:hover { background: var(--accent-2); }
.btn.ligado { background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.segmento { display: inline-flex; padding: 3px; gap: 3px; border-radius: var(--raio-sm); background: var(--surface-3); border: 1px solid var(--line); }
.segmento button { border: 0; background: transparent; color: var(--text-2); font: 600 13px var(--font); padding: 7px 12px; border-radius: 8px; cursor: pointer; }
.segmento button.ativo { background: var(--surface); color: var(--text); box-shadow: var(--sombra-1); }
.etiqueta { font: 700 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.selo { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font: 700 12px/1 var(--font);
        background: var(--surface-3); color: var(--text-2); border: 1px solid var(--line); }
.ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--cor, var(--accent)); flex: none; }