:root {
  --cf-map-line: color-mix(in srgb, var(--cds-cor-linha, #ccc) 70%, transparent);
}

#loader {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--cds-cor-background, #fff);
  z-index: 9999;
}
#loader.is-off { display: none; }
#loader .cf-logo-loader {
  width: 3.5rem;
  height: 3.5rem;
  animation: cf-loader-pulse 1.05s ease-in-out infinite;
}
@keyframes cf-loader-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.92); opacity: 0.72; }
}

header#topo img.cf-logo,
nav#menu img.cf-logo {
  height: 2rem;
  width: auto;
  display: block;
}
header#topo img.cf-logo.neg,
nav#menu img.cf-logo.neg,
.cf-login-brand img.cf-logo.neg {
  display: none;
}
[data-cds-theme='dark'] header#topo img.cf-logo.pos,
[data-cds-theme='dark'] nav#menu img.cf-logo.pos,
[data-cds-theme='dark'] .cf-login-brand img.cf-logo.pos,
[data-cds-theme='high-contrast'] header#topo img.cf-logo.pos,
[data-cds-theme='high-contrast'] nav#menu img.cf-logo.pos,
[data-cds-theme='high-contrast'] .cf-login-brand img.cf-logo.pos {
  display: none;
}
[data-cds-theme='dark'] header#topo img.cf-logo.neg,
[data-cds-theme='dark'] nav#menu img.cf-logo.neg,
[data-cds-theme='dark'] .cf-login-brand img.cf-logo.neg,
[data-cds-theme='high-contrast'] header#topo img.cf-logo.neg,
[data-cds-theme='high-contrast'] nav#menu img.cf-logo.neg,
[data-cds-theme='high-contrast'] .cf-login-brand img.cf-logo.neg {
  display: block;
}
@media screen and (max-width: 599px) {
  header#topo img.cf-logo { height: 24px; }
}

.cf-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.cf-login-card { width: min(24rem, 100%); padding: 1.5rem; border-radius: var(--cds-raio-md, 8px); }
.cf-login-brand { display: flex; align-items: center; margin-bottom: 0.75rem; }
.cf-login-brand img.cf-logo { height: 2.25rem; width: auto; }
.cf-demo-hint { margin-top: 1rem; }

.cf-flash {
  padding: 0.75rem 1rem;
  border-radius: var(--cds-raio-md, 8px);
  background: var(--cds-cor-superficie, #f5f5f5);
  margin-bottom: 1rem;
}
.cf-flash--erro { outline: 2px solid var(--cds-cor-erro, #b00020); }

.cf-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.cf-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.cf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; margin: 1rem 0; }
.cf-card { padding: 1rem; border-radius: var(--cds-raio-md, 8px); margin: 1rem 0; }
.cf-table-wrap { overflow-x: auto; margin: 1rem 0; }
.cf-table { width: 100%; border-collapse: collapse; }
.cf-table th, .cf-table td { text-align: left; padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--cds-cor-linha, #ddd); vertical-align: top; }
.cf-voice-list { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.cf-voice-list li { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; padding: 0.35rem 0; }

.as-grid-2, .as-grid-4 {
  display: grid;
  gap: 1rem;
}
.as-grid-2 { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.as-grid-4 { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.as-form { max-width: 52rem; }
.cds-field-control > :is(input, select, textarea):not([type='checkbox']):not([type='radio']) {
  width: 100%;
  min-width: 0;
  min-height: calc(var(--cds-input-altura-minima, 2.5rem) - 2px);
  border: 0;
  outline: 0;
  box-shadow: none;
  padding: var(--cds-espaco-xs, 0.25rem) var(--cds-espaco-md, 0.75rem);
  background: transparent;
  color: inherit;
  font: inherit;
}
.cds-field-control > textarea {
  min-height: 4.5rem;
  resize: vertical;
}
.as-line-edit { border: 0; padding: 1rem; margin: 0 0 1rem; border-radius: var(--cds-raio-md, 8px); }
.as-danger { margin-top: 2rem; }

.as-player { display: grid; gap: 0.4rem; }
.as-player-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.as-player-title {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
}
.as-player-meta { color: var(--cds-cor-texto-sutil, #4a4a4a); }
.as-score-stack { display: grid; gap: 0.3rem; }
.as-beat { margin: 0; text-align: center; }
.as-score-wrap {
  background: var(--cds-cor-superficie, #fafafa);
  border-radius: var(--cds-raio-md, 8px);
  padding: 0.25rem 0.5rem 0.15rem;
  overflow-x: auto;
}
.as-score-wrap--next { opacity: 0.58; }
.as-score-kicker { margin: 0; }
.as-staff { width: 100%; height: auto; display: block; }
.as-note, .as-rest, .as-note-lyric { fill: currentColor; }
.as-note.is-on,
.as-rest.is-on,
.as-note-lyric.is-on {
  fill: var(--cds-cor-primaria, #1254c4);
}
.as-note-lyric.is-on { font-weight: 700; }
.as-playhead {
  stroke: var(--cds-cor-primaria, #1254c4);
  stroke-width: 2;
  pointer-events: none;
}
.as-barline {
  stroke: currentColor;
  stroke-width: 0.7;
  opacity: 0.28;
}
.as-barline--start { opacity: 0.22; }
.as-barline--end {
  stroke-width: 1.05;
  opacity: 0.4;
}
.as-bar-num {
  fill: currentColor;
  opacity: 0.48;
  font-size: 8px;
}
.as-score-wrap img { max-width: 100%; height: auto; display: block; margin-bottom: 0.25rem; }
.as-transport { position: sticky; bottom: 0.5rem; background: var(--cds-cor-background, #fff); padding: 0.5rem 0; }
.as-transport-btns {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}
.as-transport-btns .cds-button i {
  font-size: 1.35rem;
}
.as-volume {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 10rem;
  font-size: 0.875rem;
}
.as-volume input { flex: 1; }
.as-line-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.as-line-btn {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.as-line-btn.is-current { outline: 2px solid var(--cds-cor-primaria, #0b1220); }
.as-voice-switch {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.as-voice-switch .cds-field-label { margin: 0; }
.as-voice-switch select { min-width: 10rem; }