@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Identidade visual inspirada no novo logo */
:root {
  color-scheme: dark;
  --ink: #F8FAFC;
  --muted: #94A3B8;
  --line: rgba(99, 102, 241,0.22);
  --panel: rgba(15, 23, 42,0.92);
  --soft: rgba(99, 102, 241,0.1);
  --accent: #6366F1;
  --accent-dark: #4F46E5;
  --list-hover: rgba(99, 102, 241,0.16);
  --list-hover-strong: #6366F1;
  --list-hover-text: #ffffff;
  --gold: #A5B4FC;
  --rose: #6366F1;
  --warm-1: #6366F1;
  --warm-2: #818CF8;
  --warm-3: #A5B4FC;
  --lime: #818CF8;
  --deep-bg: #0F172A;
  --deep-bg-2: #0F172A;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
  --neon-glow-soft: 0 0 0 1px rgba(99, 102, 241,0.28), 0 0 18px rgba(99, 102, 241,0.16);
  --neon-glow-strong: 0 0 0 1px rgba(99, 102, 241,0.5), 0 0 26px rgba(99, 102, 241,0.34);
}

/* Home desktop dark mode: remove superficies claras restantes */
body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero {
  border-color: rgba(167, 139, 250, 0.24) !important;
  background:
    radial-gradient(circle at 78% 54%, rgba(124, 58, 237, 0.30), transparent 34%),
    linear-gradient(135deg, rgba(18, 13, 54, 0.96), rgba(10, 8, 30, 0.98)) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero .hero-wordmark,
body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero h1 {
  color: #f8f7ff !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero h1 strong {
  color: #a78bfa !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero .subtitle {
  color: #c7c2dd !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero .hero-eyebrow,
body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero .hero-copy::before {
  color: #ddd6fe !important;
  background: rgba(124, 58, 237, 0.22) !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero-source-box {
  border-color: rgba(167, 139, 250, 0.22) !important;
  background:
    linear-gradient(135deg, rgba(18, 13, 48, 0.94), rgba(12, 9, 34, 0.96)) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero-source-box .hero-view-context {
  color: #f2efff !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero-source-box .source-picker-button {
  border-color: rgba(167, 139, 250, 0.24) !important;
  color: #f8f7ff !important;
  background: rgba(22, 17, 50, 0.96) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22) !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero-panel > div,
body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero-panel > div:nth-child(2),
body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero-panel > div:nth-child(3) {
  border-color: rgba(167, 139, 250, 0.20) !important;
  background: linear-gradient(180deg, rgba(18, 13, 48, 0.96), rgba(12, 9, 34, 0.96)) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero-panel .stat-value {
  color: #f8f7ff !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero-panel .stat-label {
  color: #a78bfa !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero-panel small {
  color: #b9b3cf !important;
}

/* Complete profile */
.profile-completion-notice,
.profile-editor-panel,
.profile-editor-head,
.profile-step-panel,
.profile-readonly-id,
.profile-multi-field,
.profile-progress-card {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.profile-completion-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
  padding: 14px 18px;
  border-radius: 8px;
}

.profile-completion-notice > div:first-child,
.profile-editor-head > div:first-child,
.profile-progress-card {
  display: grid;
  gap: 6px;
}

.profile-completion-notice strong,
.profile-editor-head h2,
.profile-progress-card strong,
.profile-readonly-id strong {
  color: var(--ink);
}

.profile-completion-notice span,
.profile-editor-head span,
.profile-readonly-id small,
.profile-check small,
.profile-help,
.profile-bio-field > small {
  color: var(--muted);
}

.profile-completion-actions,
.profile-editor-actions,
.profile-add-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.profile-editor-panel {
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 8px;
}

.profile-editor-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border-radius: 8px;
}

.profile-progress-card {
  min-width: 220px;
  padding: 14px;
  border-radius: 8px;
}

.profile-progress-track,
.profile-mini-progress {
  display: block;
  width: 100%;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.14);
}

.profile-mini-progress {
  height: 7px;
  margin-top: 6px;
}

.profile-progress-track span,
.profile-mini-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
  transition: width 0.22s ease;
}

.vibra-profile-progress {
  display: grid;
  gap: 4px;
  padding: 8px 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.profile-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.profile-step {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.72);
  font-weight: 800;
  cursor: pointer;
}

.profile-step.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
}

.profile-editor-form {
  display: grid;
  gap: 14px;
}

.profile-step-panel {
  padding: 16px;
  border-radius: 8px;
}

.profile-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.profile-form-grid .wide,
.profile-form-grid .full,
.profile-multi-field.full,
.profile-bio-field.full {
  grid-column: 1 / -1;
}

.profile-readonly-id,
.profile-multi-field {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 8px;
}

.profile-multi-field > label,
.profile-multi-field > span {
  color: var(--accent-dark);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.profile-add-row select {
  flex: 1 1 220px;
  min-height: 44px;
}

.profile-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 34px;
}

.profile-chip,
.profile-option-button {
  border: 1px solid rgba(124, 58, 237, 0.20);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(124, 58, 237, 0.08);
  cursor: pointer;
}

.profile-chip {
  min-height: 32px;
  padding: 6px 10px;
  font-weight: 800;
}

.profile-option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.profile-option-button {
  min-height: 48px;
  padding: 10px 12px;
  text-align: left;
  font-weight: 800;
}

.profile-option-button.is-selected {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
}

.profile-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.profile-check input {
  margin-top: 3px;
}

.profile-check span,
.profile-check small {
  display: block;
}

.profile-field-error {
  min-height: 16px;
  color: #dc2626;
  font-size: 0.75rem;
  font-weight: 800;
}

.profile-bio-count {
  justify-self: end;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.profile-loading,
.profile-load-error {
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
}

body[data-theme="dark"] .profile-completion-notice,
body[data-theme="dark"] .profile-editor-panel,
body[data-theme="dark"] .profile-editor-head,
body[data-theme="dark"] .profile-step-panel,
body[data-theme="dark"] .profile-readonly-id,
body[data-theme="dark"] .profile-multi-field,
body[data-theme="dark"] .profile-progress-card,
body[data-theme="dark"] .profile-check {
  border-color: rgba(167, 139, 250, 0.22);
  background: rgba(14, 10, 38, 0.90);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26);
}

body[data-theme="dark"] .profile-completion-notice strong,
body[data-theme="dark"] .profile-editor-head h2,
body[data-theme="dark"] .profile-progress-card strong,
body[data-theme="dark"] .profile-readonly-id strong,
body[data-theme="dark"] .profile-chip,
body[data-theme="dark"] .profile-option-button {
  color: #f8f7ff;
}

body[data-theme="dark"] .profile-step,
body[data-theme="dark"] .profile-chip,
body[data-theme="dark"] .profile-option-button {
  border-color: rgba(167, 139, 250, 0.24);
  background: rgba(22, 17, 50, 0.96);
}

@media (max-width: 760px) {
  .profile-completion-notice,
  .profile-editor-head {
    align-items: stretch;
    flex-direction: column;
  }

  .profile-stepper,
  .profile-form-grid {
    grid-template-columns: 1fr;
  }

  .profile-editor-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* Cadastro layout final: fill the circled empty desktop area. */
@media (min-width: 901px) {
  .music-form-panel[data-section-panel="cadastro"] .music-form {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: start !important;
  }

  .music-form-panel[data-section-panel="cadastro"] .harmonic-field {
    grid-column: span 3 !important;
  }

  .music-form-panel[data-section-panel="cadastro"] .video-link-field,
  .music-form-panel[data-section-panel="cadastro"] .excerpt-field {
    grid-column: span 2 !important;
  }

  .music-form-panel[data-section-panel="cadastro"] .excerpt-field textarea {
    min-height: 54px !important;
  }
}

/* Complete profile final theme pass */
.profile-editor-panel :where(input, select, textarea),
.profile-add-row select {
  width: 100%;
}

.profile-editor-panel :where(button, input, select, textarea):focus-visible {
  outline: 3px solid rgba(124, 58, 237, 0.35);
  outline-offset: 2px;
}

body[data-theme="dark"] .profile-editor-panel :where(input, select, textarea),
body[data-theme="dark"] .profile-add-row select {
  border-color: rgba(167, 139, 250, 0.28) !important;
  color: #f8f7ff !important;
  background: rgba(10, 8, 30, 0.86) !important;
}

body[data-theme="dark"] .profile-field-error {
  color: #fca5a5 !important;
}

/* Complete profile final theme pass */
.profile-editor-panel :where(input, select, textarea),
.profile-add-row select {
  width: 100%;
}

.profile-editor-panel :where(button, input, select, textarea):focus-visible {
  outline: 3px solid rgba(124, 58, 237, 0.35);
  outline-offset: 2px;
}

body[data-theme="dark"] .profile-editor-panel :where(input, select, textarea),
body[data-theme="dark"] .profile-add-row select {
  border-color: rgba(167, 139, 250, 0.28) !important;
  color: #f8f7ff !important;
  background: rgba(10, 8, 30, 0.86) !important;
}

body[data-theme="dark"] .profile-field-error {
  color: #fca5a5 !important;
}

/* Cadastro: use desktop width without leaving empty columns. */
@media (min-width: 901px) {
  .music-form-panel[data-section-panel="cadastro"] .music-form {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: start !important;
  }

  .music-form-panel[data-section-panel="cadastro"] .harmonic-field {
    grid-column: span 3 !important;
  }

  .music-form-panel[data-section-panel="cadastro"] .video-link-field,
  .music-form-panel[data-section-panel="cadastro"] .excerpt-field {
    grid-column: span 2 !important;
  }

  .music-form-panel[data-section-panel="cadastro"] .excerpt-field textarea {
    min-height: 54px !important;
  }
}

/* Desktop compacto: cabe a home inteira em uma tela */
@media (min-width: 761px) {
  .app-shell.is-home-active {
    padding-top: 14px !important;
  }

  .app-shell.is-home-active .vibra-home {
    gap: 12px !important;
    padding-bottom: 16px !important;
  }

  .app-shell.is-home-active .vibra-home-top {
    min-height: 54px !important;
    padding: 9px 18px !important;
    border-radius: 15px !important;
  }

  .app-shell.is-home-active .vibra-logo-mark,
  .app-shell.is-home-active .vibra-logo-mark svg {
    width: 30px !important;
    height: 30px !important;
  }

  .app-shell.is-home-active .vibra-logo-text {
    font-size: 1.45rem !important;
  }

  .app-shell.is-home-active .vibra-plus-pill,
  .app-shell.is-home-active .vibra-manage-button {
    min-height: 28px !important;
    border-radius: 8px !important;
    font-size: 0.64rem !important;
  }

  .app-shell.is-home-active .vibra-icon-button,
  .app-shell.is-home-active .vibra-avatar {
    width: 32px !important;
    height: 32px !important;
  }

  .app-shell.is-home-active .vibra-home .hero {
    min-height: 300px !important;
    gap: clamp(18px, 4vw, 52px) !important;
    padding: 26px clamp(28px, 4vw, 48px) !important;
    border-radius: 18px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-copy {
    gap: 10px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-copy::before {
    padding: 6px 9px !important;
    font-size: 0.62rem !important;
  }

  .app-shell.is-home-active .vibra-home .hero h1 {
    max-width: 19ch !important;
    font-size: clamp(2rem, 3vw, 3.05rem) !important;
    line-height: 1.02 !important;
  }

  .app-shell.is-home-active .vibra-home .hero .subtitle {
    max-width: 43ch !important;
    font-size: 0.86rem !important;
    line-height: 1.42 !important;
  }

  .app-shell.is-home-active .vibra-home .hero-mascot {
    width: min(270px, 23vw) !important;
  }

  .app-shell.is-home-active .vibra-home .hero-source-box {
    min-height: 70px !important;
    padding: 12px 14px !important;
    border-radius: 15px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-view-context {
    min-height: 34px !important;
    padding: 0 46px !important;
    font-size: 0.8rem !important;
    line-height: 34px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-source-box::before,
  .app-shell.is-home-active .vibra-home .hero-source-box::after {
    top: 12px !important;
    width: 34px !important;
    height: 34px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-source-box::before {
    left: 14px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-source-box::after {
    right: calc(min(360px, max(260px, 32vw)) + 28px) !important;
  }

  .app-shell.is-home-active .vibra-home .source-picker-button {
    min-height: 42px !important;
    font-size: 0.82rem !important;
  }

  .app-shell.is-home-active .vibra-home .hero-panel {
    gap: 12px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-panel > div {
    min-height: 92px !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 3px 10px !important;
    padding: 14px 16px 12px !important;
    border-radius: 14px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-panel > div::before {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
  }

  .app-shell.is-home-active .vibra-home .stat-value {
    font-size: 1.28rem !important;
  }

  .app-shell.is-home-active .vibra-home .stat-label {
    font-size: 0.62rem !important;
  }

  .app-shell.is-home-active .vibra-connect-card {
    min-height: 86px !important;
    grid-template-columns: 46px minmax(0, 1fr) minmax(220px, 320px) !important;
    gap: 14px !important;
    padding: 16px 22px !important;
    border-radius: 16px !important;
  }

  .app-shell.is-home-active .vibra-wave-logo svg {
    width: 42px !important;
    height: 42px !important;
  }

  .app-shell.is-home-active .vibra-connect-copy strong {
    font-size: 1rem !important;
  }

  .app-shell.is-home-active .vibra-connect-copy span {
    font-size: 0.68rem !important;
  }
}

/* Desktop full-width: a home Vibra ocupa toda a area util, nao um frame mobile */
@media (min-width: 761px) {
  .app-shell.is-home-active {
    width: min(1180px, calc(100vw - 320px)) !important;
    max-width: none !important;
    margin-left: max(280px, calc((100vw - 1180px) / 2)) !important;
    margin-right: auto !important;
    padding-top: 24px !important;
  }

  .app-shell.is-home-active .vibra-home {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 0 0 32px !important;
  }

  .app-shell.is-home-active .vibra-home-top {
    width: 100% !important;
    min-height: 72px !important;
    padding: 14px 22px !important;
    border-radius: 18px !important;
  }

  .app-shell.is-home-active .vibra-logo-mark,
  .app-shell.is-home-active .vibra-logo-mark svg {
    width: 38px !important;
    height: 38px !important;
  }

  .app-shell.is-home-active .vibra-logo-text {
    font-size: 1.8rem !important;
  }

  .app-shell.is-home-active .vibra-plus-pill,
  .app-shell.is-home-active .vibra-manage-button {
    min-height: 34px !important;
    font-size: 0.72rem !important;
  }

  .app-shell.is-home-active .vibra-manage-button {
    max-width: none !important;
    padding: 0 18px !important;
  }

  .app-shell.is-home-active .vibra-icon-button,
  .app-shell.is-home-active .vibra-avatar {
    width: 40px !important;
    height: 40px !important;
  }

  .app-shell.is-home-active .vibra-home .hero {
    width: 100% !important;
    min-height: 360px !important;
    display: grid !important;
    grid-template-columns: minmax(360px, 1fr) minmax(300px, 0.55fr) !important;
    align-items: center !important;
    gap: clamp(24px, 5vw, 72px) !important;
    margin: 0 !important;
    padding: clamp(34px, 4vw, 56px) clamp(34px, 5vw, 64px) !important;
    border-radius: 22px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-copy {
    max-width: 520px !important;
    gap: 14px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-copy::before {
    font-size: 0.72rem !important;
    padding: 8px 11px !important;
  }

  .app-shell.is-home-active .vibra-home .hero h1 {
    max-width: 18ch !important;
    font-size: clamp(2.35rem, 3.7vw, 4.05rem) !important;
    line-height: 1.02 !important;
  }

  .app-shell.is-home-active .vibra-home .hero .subtitle {
    max-width: 42ch !important;
    font-size: clamp(0.95rem, 1.05vw, 1.08rem) !important;
    line-height: 1.5 !important;
  }

  .app-shell.is-home-active .vibra-home .hero-mascot {
    width: min(340px, 28vw) !important;
    justify-self: center !important;
    transform: none !important;
  }

  .app-shell.is-home-active .vibra-home .hero-source-box {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px) !important;
    gap: 18px !important;
    align-items: center !important;
    padding: 18px !important;
    border-radius: 18px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-view-context {
    min-height: 40px !important;
    padding: 0 54px !important;
    font-size: 0.9rem !important;
    line-height: 40px !important;
    white-space: nowrap !important;
  }

  .app-shell.is-home-active .vibra-home .hero-source-box::before,
  .app-shell.is-home-active .vibra-home .hero-source-box::after {
    top: 18px !important;
    width: 40px !important;
    height: 40px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-source-box::before {
    left: 18px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-source-box::after {
    right: calc(min(360px, max(260px, 32vw)) + 34px) !important;
  }

  .app-shell.is-home-active .vibra-home .source-picker-button {
    min-height: 50px !important;
    font-size: 0.9rem !important;
  }

  .app-shell.is-home-active .vibra-home .hero-panel {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-panel > div {
    min-height: 132px !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 6px 14px !important;
    padding: 22px 20px 18px !important;
    border-radius: 16px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-panel > div::before {
    width: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
  }

  .app-shell.is-home-active .vibra-home .stat-value {
    font-size: 1.7rem !important;
  }

  .app-shell.is-home-active .vibra-home .stat-label {
    font-size: 0.74rem !important;
  }

  .app-shell.is-home-active .vibra-connect-card {
    width: 100% !important;
    max-width: none !important;
    min-height: 132px !important;
    grid-template-columns: 64px minmax(0, 1fr) minmax(260px, 360px) !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 26px 30px !important;
    border-radius: 20px !important;
  }

  .app-shell.is-home-active .vibra-wave-logo svg {
    width: 58px !important;
    height: 58px !important;
  }

  .app-shell.is-home-active .vibra-connect-copy strong {
    font-size: 1.35rem !important;
  }

  .app-shell.is-home-active .vibra-connect-copy span {
    font-size: 0.88rem !important;
  }
}

/* Desktop compacto final: aplicado depois do full-width para caber na viewport */
@media (min-width: 761px) {
  .app-shell.is-home-active {
    padding-top: 14px !important;
  }

  .app-shell.is-home-active .vibra-home {
    gap: 12px !important;
    padding-bottom: 16px !important;
  }

  .app-shell.is-home-active .vibra-home-top {
    min-height: 54px !important;
    padding: 9px 18px !important;
    border-radius: 15px !important;
  }

  .app-shell.is-home-active .vibra-logo-mark,
  .app-shell.is-home-active .vibra-logo-mark svg {
    width: 30px !important;
    height: 30px !important;
  }

  .app-shell.is-home-active .vibra-logo-text {
    font-size: 1.45rem !important;
  }

  .app-shell.is-home-active .vibra-plus-pill,
  .app-shell.is-home-active .vibra-manage-button {
    min-height: 28px !important;
    border-radius: 8px !important;
    font-size: 0.64rem !important;
  }

  .app-shell.is-home-active .vibra-icon-button,
  .app-shell.is-home-active .vibra-avatar {
    width: 32px !important;
    height: 32px !important;
  }

  .app-shell.is-home-active .vibra-home .hero {
    min-height: 300px !important;
    gap: clamp(18px, 4vw, 52px) !important;
    padding: 26px clamp(28px, 4vw, 48px) !important;
    border-radius: 18px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-copy {
    gap: 10px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-copy::before {
    padding: 6px 9px !important;
    font-size: 0.62rem !important;
  }

  .app-shell.is-home-active .vibra-home .hero h1 {
    max-width: 19ch !important;
    font-size: clamp(2rem, 3vw, 3.05rem) !important;
    line-height: 1.02 !important;
  }

  .app-shell.is-home-active .vibra-home .hero .subtitle {
    max-width: 43ch !important;
    font-size: 0.86rem !important;
    line-height: 1.42 !important;
  }

  .app-shell.is-home-active .vibra-home .hero-mascot {
    width: min(270px, 23vw) !important;
  }

  .app-shell.is-home-active .vibra-home .hero-source-box {
    min-height: 70px !important;
    padding: 12px 14px !important;
    border-radius: 15px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-view-context {
    min-height: 34px !important;
    padding: 0 46px !important;
    font-size: 0.8rem !important;
    line-height: 34px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-source-box::before,
  .app-shell.is-home-active .vibra-home .hero-source-box::after {
    top: 12px !important;
    width: 34px !important;
    height: 34px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-source-box::before {
    left: 14px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-source-box::after {
    right: calc(min(360px, max(260px, 32vw)) + 28px) !important;
  }

  .app-shell.is-home-active .vibra-home .source-picker-button {
    min-height: 42px !important;
    font-size: 0.82rem !important;
  }

  .app-shell.is-home-active .vibra-home .hero-panel {
    gap: 12px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-panel > div {
    min-height: 92px !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 3px 10px !important;
    padding: 14px 16px 12px !important;
    border-radius: 14px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-panel > div::before {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
  }

  .app-shell.is-home-active .vibra-home .stat-value {
    font-size: 1.28rem !important;
  }

  .app-shell.is-home-active .vibra-home .stat-label {
    font-size: 0.62rem !important;
  }

  .app-shell.is-home-active .vibra-connect-card {
    min-height: 86px !important;
    grid-template-columns: 46px minmax(0, 1fr) minmax(220px, 320px) !important;
    gap: 14px !important;
    padding: 16px 22px !important;
    border-radius: 16px !important;
  }

  .app-shell.is-home-active .vibra-wave-logo svg {
    width: 42px !important;
    height: 42px !important;
  }

  .app-shell.is-home-active .vibra-connect-copy strong {
    font-size: 1rem !important;
  }

  .app-shell.is-home-active .vibra-connect-copy span {
    font-size: 0.68rem !important;
  }
}

/* Override final-final: vence o seletor antigo com :has() que travava em 390px */
@media (min-width: 761px) {
  .app-shell.is-home-active:has(.vibra-home:not(.is-hidden)) > section.home-panel.app-section.vibra-home {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}

/* Override de especificidade: remove o antigo travamento mobile de 390px no desktop */
@media (min-width: 761px) {
  .app-shell.is-home-active:has(.vibra-home:not(.is-hidden)) > section.home-panel.app-section.vibra-home {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}

/* Vibra home - referencia visual da tela inicial */
.vibra-home {
  display: grid;
  gap: 14px;
  max-width: 430px;
  margin: 0 auto;
  padding: 0 0 16px;
}

.vibra-home::before {
  content: "";
  display: block;
  height: 66px;
  border: 1px solid rgba(139, 92, 246, 0.14);
  border-radius: 0 0 18px 18px;
  background:
    radial-gradient(circle at 95% 22%, #0f0929 0 17px, transparent 18px),
    radial-gradient(circle at 8% 52%, rgba(255, 255, 255, 0.95) 0 20px, transparent 21px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.96));
  box-shadow: 0 14px 34px rgba(91, 64, 190, 0.12);
}

.vibra-home::after {
  content: "Vibra";
  position: absolute;
  top: 26px;
  left: calc(50% - 166px);
  z-index: 25;
  color: #151235;
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.vibra-home .hero {
  min-height: 258px;
  grid-template-columns: minmax(0, 1fr) 145px;
  gap: 4px;
  align-items: center;
  margin: -1px 0 0;
  padding: 24px 16px 22px;
  border: 1px solid rgba(145, 123, 255, 0.16);
  border-radius: 14px;
  color: #171337;
  background:
    radial-gradient(circle at 88% 30%, rgba(115, 79, 255, 0.18), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #fbfaff 46%, #f2f0ff 100%);
  box-shadow: 0 18px 44px rgba(86, 65, 175, 0.12);
  overflow: hidden;
}

.vibra-home .hero::before {
  inset: auto -18px 10px auto;
  width: 210px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.12), transparent 62%);
}

.vibra-home .hero::after {
  display: none;
}

.vibra-home .hero-brand-row {
  display: none;
}

.vibra-home .hero-copy {
  gap: 11px;
  padding: 0;
}

.vibra-home .hero-copy::before {
  content: "BEM-VINDO AO VIBRA";
  width: fit-content;
  padding: 7px 9px;
  border-radius: 6px;
  color: #7447ff;
  background: #efeaff;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
}

.vibra-home .hero h1 {
  max-width: 14ch;
  margin: 0;
  color: #171337;
  font-size: clamp(1.55rem, 7vw, 2.05rem);
  font-weight: 900;
  line-height: 1.02;
}

.vibra-home .hero h1::first-line {
  color: #171337;
}

.vibra-home .hero .subtitle {
  max-width: 25ch;
  margin: 0;
  color: #726b8d;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.38;
}

.vibra-home .hero-mascot {
  width: 168px;
  max-width: none;
  justify-self: end;
  align-self: center;
  filter: drop-shadow(0 18px 24px rgba(82, 59, 194, 0.2));
  transform: translate(12px, 2px);
}

.vibra-home .hero-source-box {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(145, 123, 255, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 14px 34px rgba(86, 65, 175, 0.1);
}

.vibra-home .hero-view-context {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 42px 0 42px;
  border: 0;
  color: #5c5675;
  background: transparent;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 32px;
  backdrop-filter: none;
}

.vibra-home .hero-source-box::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 14px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background:
    linear-gradient(#fff, #fff) center / 12px 12px no-repeat,
    linear-gradient(135deg, #8b5cf6, #6d28d9);
  box-shadow: 0 8px 16px rgba(109, 40, 217, 0.24);
}

.vibra-home .hero-source-box::after {
  content: "";
  position: absolute;
  top: 15px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background:
    linear-gradient(90deg, transparent 8px, #7c3aed 8px 10px, transparent 10px 22px, #7c3aed 22px 24px, transparent 24px),
    linear-gradient(180deg, transparent 8px, #7c3aed 8px 10px, transparent 10px 16px, #7c3aed 16px 18px, transparent 18px 24px),
    #f0e9ff;
}

.vibra-home .source-picker {
  width: 100%;
}

.vibra-home .source-picker-button {
  width: 100%;
  min-height: 46px;
  justify-content: space-between;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  color: #24203d;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(52, 39, 124, 0.07);
  font-size: 0.78rem;
  font-weight: 900;
}

.vibra-home .source-picker-button::after {
  content: "›";
  color: #21173d;
  font-size: 1.5rem;
  line-height: 1;
}

.vibra-home .hero-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.vibra-home .hero-panel > div {
  min-height: 98px;
  display: grid;
  grid-template-columns: 30px 1fr;
  align-content: start;
  gap: 2px 8px;
  padding: 14px 10px 10px;
  border: 1px solid rgba(145, 123, 255, 0.15);
  border-bottom: 3px solid #8b5cf6;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(86, 65, 175, 0.1);
}

.vibra-home .hero-panel > div::before {
  content: "";
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}

.vibra-home .stat-value {
  color: #221a48;
  font-size: 1.12rem;
  font-weight: 950;
  line-height: 1;
}

.vibra-home .stat-label {
  color: #5b35d5;
  font-size: 0.55rem;
  font-weight: 950;
  line-height: 1;
}

.vibra-home .hero-panel small {
  grid-column: 1 / -1;
  margin-top: 9px;
  color: #7c7593;
  font-size: 0.58rem;
  font-weight: 700;
}

.vibra-home .hero-panel + *::before {
  content: "Conectando musica\a a momentos.";
  white-space: pre-line;
  display: block;
  margin-top: 2px;
  padding: 28px 18px 28px 92px;
  border-radius: 14px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 50%, transparent 0 26px, #12072e 27px),
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(168, 85, 247, 0.82) 8px 10px, transparent 10px 13px),
    linear-gradient(135deg, #18063a, #100625);
  box-shadow: 0 18px 36px rgba(24, 6, 58, 0.18);
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1.22;
}

@media (max-width: 760px) {
  body {
    background: #f7f4ff;
  }

  .app-shell {
    width: min(100%, 430px) !important;
    margin: 0 auto !important;
    padding: 12px 10px calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .top-session {
    display: none !important;
  }

  .notifications-hub {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 10000 !important;
    pointer-events: none !important;
  }

  .notifications-hub .notifications-panel,
  body .notifications-panel#notificationsPanel {
    top: calc(66px + env(safe-area-inset-top, 0px)) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-height: min(72vh, calc(100vh - 150px)) !important;
    pointer-events: auto !important;
  }

  .bottom-nav-bar {
    height: 72px;
    border-radius: 18px 18px 0 0;
    background: #080822;
    border-top-color: rgba(139, 92, 246, 0.3);
  }

  .bottom-nav-item {
    color: #8f8ca7;
    font-size: 0.58rem;
  }

  .bottom-nav-item.is-active {
    color: #9b5cff;
  }

  .bottom-nav-fab {
    width: 64px;
    height: 64px;
    margin-top: -32px;
    background: linear-gradient(180deg, #8b5cf6, #6d28d9);
    box-shadow: 0 12px 26px rgba(109, 40, 217, 0.38), 0 0 0 7px #080822;
  }
}

@media (min-width: 761px) {
  .vibra-home {
    max-width: 760px;
  }

  .vibra-home::before,
  .vibra-home::after {
    display: none;
  }
}

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 16% 12%, rgba(99, 102, 241,0.28), transparent 28%),
    radial-gradient(circle at 72% 7%, rgba(165, 180, 252,0.22), transparent 22%),
    radial-gradient(circle at 100% 0%, rgba(99, 102, 241,0.28), transparent 30%),
    linear-gradient(135deg, #0F172A 0%, #0F172A 54%, #0F172A 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 72%, rgba(99, 102, 241,0.78) 72% 77%, transparent 77%),
    radial-gradient(circle at 96% 45%, #0F172A 0 13%, transparent 13.2%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 24%);
  opacity: 0.9;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: #0F172A;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6366F1, #818CF8);
  border-color: rgba(99, 102, 241,0.7);
  box-shadow: 0 0 16px rgba(99, 102, 241,0.45);
}

.auth-shell,
.hero,
.topbar {
  background:
    radial-gradient(circle at 18% 24%, rgba(99, 102, 241,0.36), transparent 28%),
    radial-gradient(circle at 48% 10%, rgba(129, 140, 248,0.3), transparent 26%),
    radial-gradient(circle at 74% 26%, rgba(165, 180, 252,0.28), transparent 22%),
    linear-gradient(135deg, rgba(15, 23, 42,0.96), rgba(15, 23, 42,0.92));
}

.hero::before {
  background:
    linear-gradient(90deg, rgba(99, 102, 241,0.78) 0 12%, transparent 12% 31%, rgba(129, 140, 248,0.84) 31% 46%, transparent 46% 57%, rgba(165, 180, 252,0.84) 57% 68%, transparent 68%),
    linear-gradient(90deg, transparent 0 78%, rgba(99, 102, 241,0.78) 78% 100%);
  opacity: 0.3;
}

.auth-card,
.hero-panel,
.sidebar,
.toolbar,
.setlist-panel,
.saved-repertoires-panel,
.share-panel,
.indicators-panel,
.lyrics-panel,
.tuner-panel,
.solo-panel,
.detector-panel,
.chord-panel,
.scale-library-panel,
.music-library,
.music-form-panel,
.notifications-panel,
.preview-item,
.saved-item,
.song-card,
.chord-card,
.lyrics-song,
.confirm-modal-card,
.custom-select-menu {
  border-color: rgba(99, 102, 241,0.2);
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(15, 23, 42,0.96), rgba(15, 23, 42,0.94));
  box-shadow: var(--shadow);
}

.music-import-panel,
.event-card,
.indicator-card,
.share-card,
.scale-viewer,
.detector-result-card,
.detector-current,
.chord-list-button,
.repertoire-preview,
.setlist-song,
table,
tbody tr {
  border-color: rgba(99, 102, 241,0.22);
  color: var(--ink);
  background: rgba(15, 23, 42,0.78);
}

.library-head h2,
.music-form-head h2,
.saved-head h2,
.lyrics-head h2,
.chord-head h2,
.preview-title,
.song-title,
.lyrics-song h3,
.chord-card-head strong,
.stat-value {
  color: #ffffff;
}

.eyebrow,
.eyebrow.dark,
.song-artist,
.saved-head span,
.chord-head span,
.chord-card-head span,
.chord-card-meta span,
.lyrics-tone-details strong,
.field-icon,
.stat-label {
  color: var(--lime);
}

.name-field span,
.select-field span,
.range-field span,
.save-message,
.saved-empty,
.empty-state,
.song-tags span,
.lyrics-song p,
.preview-empty,
.chart-empty,
.custom-select-option,
td::before,
th {
  color: var(--muted);
}

input,
textarea,
select,
.custom-select-trigger,
.search-field input,
.name-field input,
.name-field textarea,
.name-field select,
.range-field input {
  border-color: rgba(99, 102, 241,0.25);
  color: #ffffff;
  background-color: rgba(15, 23, 42,0.86);
  caret-color: var(--accent);
}

input::placeholder,
textarea::placeholder {
  color: rgba(248, 250, 252,0.46);
}

input:focus,
textarea:focus,
select:focus,
.custom-select-trigger:focus {
  border-color: var(--accent);
  outline-color: rgba(99, 102, 241,0.28);
  box-shadow: var(--neon-glow-soft);
}

.primary-button,
.toggle-button.is-active,
.secondary-button.is-active,
.song-select-button.is-selected,
.favorite-button.is-active,
.lyrics-expand-button[aria-expanded="true"],
.lyrics-scale-button:hover,
.table-action:hover,
.song-edit-button:hover,
.saved-load:hover,
.saved-name:hover,
.nav-button.is-active {
  border-color: var(--accent);
  color: #ffffff;
  background: linear-gradient(180deg, #6366F1, #4F46E5);
  box-shadow: var(--neon-glow-strong);
}

.primary-button:hover {
  border-color: #818CF8;
  background: linear-gradient(180deg, #818CF8, #6366F1);
}

.secondary-button,
.toggle-button,
.icon-button,
.table-action,
.song-edit-button,
.favorite-button,
.song-select-button,
.song-link,
.small-link-button,
.saved-load,
.saved-name,
.saved-delete,
.lyrics-expand-button,
.lyrics-scale-button,
.lyrics-transpose-btn,
.chord-list-button {
  border-color: rgba(99, 102, 241,0.28);
  color: #ffffff;
  background: rgba(99, 102, 241,0.1);
}

.secondary-button:hover,
.toggle-button:hover,
.icon-button:hover,
.favorite-button:hover,
.song-select-button:hover,
.song-link:hover,
.small-link-button:hover,
.lyrics-transpose-btn:hover,
.chord-list-button:hover {
  border-color: var(--warm-2);
  color: #ffffff;
  background: rgba(129, 140, 248,0.18);
  box-shadow: 0 0 20px rgba(129, 140, 248,0.18);
}

.nav-button,
.top-session,
.stat-card {
  border-color: rgba(99, 102, 241,0.18);
  color: #ffffff;
  background: rgba(15, 23, 42,0.76);
}

.nav-button:hover {
  border-color: var(--lime);
  color: #ffffff;
  background: rgba(99, 102, 241,0.12);
}

.app-nav .nav-button:nth-child(3n) {
  border-left-color: var(--accent);
}

.app-nav .nav-button:nth-child(3n + 1) {
  border-left-color: var(--warm-2);
}

.app-nav .nav-button:nth-child(3n + 2) {
  border-left-color: var(--warm-3);
}

thead,
.custom-select-option.is-selected,
.chart-bar-fill,
.meter-needle,
.meter-arc .is-active {
  background: linear-gradient(90deg, #6366F1, #818CF8, #A5B4FC);
}

.lyrics-view,
.lyrics-song pre,
.lyrics-fullscreen-card,
.lyrics-fullscreen-card pre,
.lyrics-chord-panel {
  border-color: rgba(99, 102, 241,0.24);
  color: #F8FAFC;
  background: rgba(15, 23, 42,0.88);
}

.lyrics-chord,
.lyrics-fullscreen-card pre .lyrics-chord {
  color: #A5B4FC;
  text-shadow:
    0 0 10px rgba(165, 180, 252,0.34),
    0 0 2px rgba(99, 102, 241,0.6);
}

.chord-dot,
.chord-barre,
.chord-open {
  color: #0F172A;
  background: var(--lime);
  box-shadow: 0 0 14px rgba(99, 102, 241,0.4);
}

.chord-muted {
  color: var(--accent);
}

.chord-fretboard {
  border-top-color: rgba(165, 180, 252,0.8);
  background:
    linear-gradient(
      90deg,
      transparent calc(8% - 1px),
      rgba(255, 255, 255, 0.34) calc(8% - 1px) calc(8% + 1px),
      transparent calc(8% + 1px) calc(36% - 1px),
      rgba(255, 255, 255, 0.34) calc(36% - 1px) calc(36% + 1px),
      transparent calc(36% + 1px) calc(64% - 1px),
      rgba(255, 255, 255, 0.34) calc(64% - 1px) calc(64% + 1px),
      transparent calc(64% + 1px) calc(92% - 1px),
      rgba(255, 255, 255, 0.34) calc(92% - 1px) calc(92% + 1px),
      transparent calc(92% + 1px)
    ),
    linear-gradient(180deg, rgba(99, 102, 241,0.35) 0 2px, transparent 2px) 0 0 / 100% 20%;
}

.favorite-badge,
.import-file-button,
.import-loading,
.save-message:not(:empty),
.music-save-card,
.lyrics-tone-details span,
.song-tags span,
.scale-note.is-root {
  border-color: rgba(99, 102, 241,0.36);
  color: #ffffff;
  background: rgba(99, 102, 241,0.18);
}

.loading-dot {
  background: var(--accent);
  box-shadow: 0 0 14px rgba(99, 102, 241,0.65);
}

.music-save-overlay,
.confirm-modal,
.lyrics-fullscreen,
.chord-modal {
  background: rgba(15, 23, 42,0.72);
}

.song-delete-button,
.saved-delete,
.confirm-modal-danger {
  border-color: rgba(99, 102, 241,0.55);
  color: #ffffff;
  background: rgba(99, 102, 241,0.2);
}
/* Override final: light, clean, modern */
:root {
  color-scheme: light;
  --ink: #0F172A;
  --muted: #64748B;
  --line: #E2E8F0;
  --panel: #ffffff;
  --soft: #F8FAFC;
  --accent: #6366F1;
  --accent-dark: #4F46E5;
  --list-hover: #EEF2FF;
  --list-hover-strong: #6366F1;
  --list-hover-text: #0F172A;
  --gold: #A5B4FC;
  --rose: #6366F1;
  --warm-1: #6366F1;
  --warm-2: #818CF8;
  --warm-3: #A5B4FC;
  --lime: #4F46E5;
  --shadow: 0 18px 48px rgba(15, 23, 42,0.09);
  --neon-glow-soft: 0 0 0 3px rgba(99, 102, 241,0.12);
  --neon-glow-strong: 0 12px 26px rgba(99, 102, 241,0.18);
}

body {
  color: var(--ink);
  background: #F8FAFC;
}

.auth-card,
.hero-panel,
.sidebar,
.toolbar,
.setlist-panel,
.saved-repertoires-panel,
.share-panel,
.indicators-panel,
.lyrics-panel,
.tuner-panel,
.solo-panel,
.detector-panel,
.chord-panel,
.scale-library-panel,
.music-library,
.music-form-panel,
.notifications-panel,
.preview-item,
.saved-item,
.song-card,
.chord-card,
.lyrics-song,
.confirm-modal-card,
.custom-select-menu,
.music-import-panel,
.event-card,
.indicator-card,
.share-card,
.scale-viewer,
.detector-result-card,
.detector-current,
.chord-list-button,
.repertoire-preview,
.setlist-song,
table,
tbody tr {
  border-color: var(--line);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
}

/* Tema claro refinado: identidade rosa com detalhes musicais discretos */
:root {
  color-scheme: light;
  --ink: #0F172A;
  --muted: #64748B;
  --line: #E2E8F0;
  --panel: #ffffff;
  --soft: #F8FAFC;
  --accent: #6366F1;
  --accent-dark: #4F46E5;
  --list-hover: #EEF2FF;
  --list-hover-strong: #6366F1;
  --list-hover-text: #0F172A;
  --gold: #A5B4FC;
  --rose: #6366F1;
  --warm-1: #6366F1;
  --warm-2: #818CF8;
  --warm-3: #A5B4FC;
  --lime: #4F46E5;
  --deep-bg: #F8FAFC;
  --deep-bg-2: #F1F5F9;
  --shadow: 0 18px 48px rgba(15, 23, 42,0.09);
  --neon-glow-soft: 0 0 0 3px rgba(99, 102, 241,0.12);
  --neon-glow-strong: 0 12px 26px rgba(99, 102, 241,0.18);
}

body {
  color: var(--ink);
  background: #F8FAFC;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: none;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: #F1F5F9;
}

::-webkit-scrollbar-thumb {
  background: #6366F1;
  border-color: rgba(99, 102, 241,0.38);
  box-shadow: none;
}

.auth-shell,
.hero,
.topbar {
  background: #ffffff;
}

.hero::before {
  background: none;
}

.auth-card,
.hero-panel,
.sidebar,
.toolbar,
.setlist-panel,
.saved-repertoires-panel,
.share-panel,
.indicators-panel,
.lyrics-panel,
.tuner-panel,
.solo-panel,
.detector-panel,
.chord-panel,
.scale-library-panel,
.music-library,
.music-form-panel,
.notifications-panel,
.preview-item,
.saved-item,
.song-card,
.chord-card,
.lyrics-song,
.confirm-modal-card,
.custom-select-menu,
.music-import-panel,
.event-card,
.indicator-card,
.share-card,
.scale-viewer,
.detector-result-card,
.detector-current,
.chord-list-button,
.repertoire-preview,
.setlist-song,
table,
tbody tr {
  border-color: var(--line);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
}

.library-head h2,
.music-form-head h2,
.saved-head h2,
.lyrics-head h2,
.chord-head h2,
.preview-title,
.song-title,
.lyrics-song h3,
.chord-card-head strong,
.stat-value {
  color: #0F172A;
}

.eyebrow,
.eyebrow.dark,
.song-artist,
.saved-head span,
.chord-head span,
.chord-card-head span,
.chord-card-meta span,
.lyrics-tone-details strong,
.field-icon,
.stat-label {
  color: #4F46E5;
}

.name-field span,
.select-field span,
.range-field span,
.save-message,
.saved-empty,
.empty-state,
.song-tags span,
.lyrics-song p,
.preview-empty,
.chart-empty,
.custom-select-option,
td::before,
th {
  color: var(--muted);
}

input,
textarea,
select,
.custom-select-trigger,
.search-field input,
.name-field input,
.name-field textarea,
.name-field select,
.range-field input {
  border-color: #E2E8F0;
  color: var(--ink);
  background-color: #ffffff;
  caret-color: var(--accent);
}

input::placeholder,
textarea::placeholder {
  color: #94A3B8;
}

input:focus,
textarea:focus,
select:focus,
.custom-select-trigger:focus {
  border-color: var(--accent);
  outline-color: rgba(99, 102, 241,0.13);
  box-shadow: var(--neon-glow-soft);
}

.primary-button,
.toggle-button.is-active,
.secondary-button.is-active,
.song-select-button.is-selected,
.favorite-button.is-active,
.lyrics-expand-button[aria-expanded="true"],
.lyrics-scale-button:hover,
.table-action:hover,
.song-edit-button:hover,
.saved-load:hover,
.saved-name:hover,
.nav-button.is-active {
  border-color: var(--accent);
  color: #ffffff;
  background: #6366F1;
  box-shadow: 0 12px 24px rgba(99, 102, 241,0.18);
}

.primary-button:hover {
  border-color: #4F46E5;
  background: #4F46E5;
}

.secondary-button,
.toggle-button,
.icon-button,
.table-action,
.song-edit-button,
.favorite-button,
.song-select-button,
.song-link,
.small-link-button,
.saved-load,
.saved-name,
.saved-delete,
.lyrics-expand-button,
.lyrics-scale-button,
.lyrics-transpose-btn,
.chord-list-button {
  border-color: #C7D2FE;
  color: #4338CA;
  background: #F5F3FF;
}

.secondary-button:hover,
.toggle-button:hover,
.icon-button:hover,
.favorite-button:hover,
.song-select-button:hover,
.song-link:hover,
.small-link-button:hover,
.lyrics-transpose-btn:hover,
.chord-list-button:hover {
  border-color: rgba(99, 102, 241,0.35);
  color: #4338CA;
  background: #EEF2FF;
  box-shadow: none;
}

.nav-button,
.top-session,
.stat-card {
  border-color: var(--line);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.86);
}

.nav-button:hover {
  border-color: rgba(99, 102, 241,0.28);
  color: #4338CA;
  background: #F5F3FF;
}

.app-nav .nav-button:nth-child(3n),
.app-nav .nav-button:nth-child(3n + 1),
.app-nav .nav-button:nth-child(3n + 2) {
  border-left-color: rgba(99, 102, 241,0.52);
}

thead,
.custom-select-option.is-selected,
.chart-bar-fill,
.meter-needle,
.meter-arc .is-active {
  color: #ffffff;
  background: #6366F1;
}

.lyrics-view,
.lyrics-song pre,
.lyrics-fullscreen-card,
.lyrics-fullscreen-card pre,
.lyrics-chord-panel {
  border-color: #E2E8F0;
  color: #0F172A;
  background: #F8FAFC;
}

.lyrics-chord,
.lyrics-fullscreen-card pre .lyrics-chord {
  color: #6366F1;
  text-shadow: none;
}

.chord-dot,
.chord-barre,
.chord-open {
  color: #ffffff;
  background: #6366F1;
  box-shadow: none;
}

.chord-muted {
  color: #94A3B8;
}

.chord-fretboard {
  border-top-color: #CBD5E1;
  background:
    linear-gradient(
      90deg,
      transparent calc(8% - 1px),
      #CBD5E1 calc(8% - 1px) calc(8% + 1px),
      transparent calc(8% + 1px) calc(36% - 1px),
      #CBD5E1 calc(36% - 1px) calc(36% + 1px),
      transparent calc(36% + 1px) calc(64% - 1px),
      #CBD5E1 calc(64% - 1px) calc(64% + 1px),
      transparent calc(64% + 1px) calc(92% - 1px),
      #CBD5E1 calc(92% - 1px) calc(92% + 1px),
      transparent calc(92% + 1px)
    ),
    linear-gradient(180deg, #E2E8F0 0 2px, transparent 2px) 0 0 / 100% 20%;
}

.favorite-badge,
.import-file-button,
.import-loading,
.save-message:not(:empty),
.music-save-card,
.lyrics-tone-details span,
.song-tags span,
.scale-note.is-root {
  border-color: #C7D2FE;
  color: #4338CA;
  background: #EEF2FF;
}
/* Override final do banner e menu */
.hero {
  min-height: 300px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  color: #0F172A;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0 63%, rgba(238, 242, 255,0.88) 63% 100%),
    radial-gradient(circle at 88% 30%, rgba(99, 102, 241,0.18), transparent 28%),
    #ffffff;
  box-shadow: 0 18px 46px rgba(15, 23, 42,0.08);
}

.hero::before {
  inset: auto 28px 28px auto;
  width: min(280px, 34vw);
  height: 170px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, #6366F1 0 24%, transparent 24% 37%, #818CF8 37% 62%, transparent 62% 74%, #A5B4FC 74% 100%);
  opacity: 0.16;
}

.hero::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
  background: #4F46E5;
}

.hero h1,
.hero .subtitle,
.hero-view-context,
.hero-tag {
  color: #0F172A;
  text-shadow: none;
}

.hero .subtitle,
.hero-view-context {
  color: #475569;
}

.hero-source-box,
.source-picker-panel {
  border-color: #E2E8F0;
  color: #0F172A;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 26px rgba(15, 23, 42,0.08);
}

.hero-panel {
  border: 1px solid #C7D2FE;
  color: #0F172A;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42,0.08);
}

.hero-panel > div {
  background: #F5F3FF;
}

.hero-panel .stat-value {
  color: #6366F1;
}

.hero-panel .stat-label {
  color: #475569;
}

.app-nav {
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42,0.08);
}

.nav-button,
.app-nav .nav-button {
  border: 1px solid #E2E8F0;
  border-left: 4px solid #E2E8F0;
  color: #0F172A;
  background: #ffffff;
  box-shadow: none;
}

.nav-button:hover,
.app-nav .nav-button:hover {
  border-color: #C7D2FE;
  border-left-color: #6366F1;
  color: #4338CA;
  background: #F5F3FF;
}

.nav-button.is-active,
.app-nav .nav-button.is-active {
  border-color: #6366F1;
  border-left-color: #6366F1;
  color: #ffffff;
  background: #6366F1;
  box-shadow: 0 10px 22px rgba(99, 102, 241,0.18);
}

/* Refinamento do topo e menu: mais limpo, mais contraste */
.hero {
  min-height: 300px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  color: #0F172A;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0 63%, rgba(238, 242, 255,0.88) 63% 100%),
    radial-gradient(circle at 88% 30%, rgba(99, 102, 241,0.18), transparent 28%),
    #ffffff;
  box-shadow: 0 18px 46px rgba(15, 23, 42,0.08);
}

.hero::before {
  inset: auto 28px 28px auto;
  width: min(280px, 34vw);
  height: 170px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, #6366F1 0 24%, transparent 24% 37%, #818CF8 37% 62%, transparent 62% 74%, #A5B4FC 74% 100%);
  opacity: 0.16;
}

.hero::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
  background: #4F46E5;
}

.hero h1,
.hero .subtitle,
.hero-view-context,
.hero-tag {
  color: #0F172A;
  text-shadow: none;
}

.hero .subtitle,
.hero-view-context {
  color: #475569;
}

.hero-brand {
  filter: none;
}

.hero-source-box,
.source-picker-panel {
  border-color: #E2E8F0;
  color: #0F172A;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 26px rgba(15, 23, 42,0.08);
}

.source-picker-button {
  border-color: #C7D2FE;
  color: #4338CA;
  background: #F5F3FF;
}

.hero-panel {
  border: 1px solid #C7D2FE;
  color: #0F172A;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42,0.08);
}

.hero-panel > div {
  background: #F5F3FF;
}

.hero-panel > div:last-child {
  background: #F8FAFC;
}

.hero-panel .stat-value {
  color: #6366F1;
}

.hero-panel .stat-label {
  color: #475569;
}

.mobile-menu-toggle {
  border-color: #E2E8F0;
  color: #0F172A;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42,0.1);
}

.app-nav {
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42,0.08);
}

.nav-button,
.app-nav .nav-button {
  border: 1px solid #E2E8F0;
  border-left: 4px solid #E2E8F0;
  color: #0F172A;
  background: #ffffff;
  box-shadow: none;
}

.nav-button:hover,
.app-nav .nav-button:hover {
  border-color: #C7D2FE;
  border-left-color: #6366F1;
  color: #4338CA;
  background: #F5F3FF;
}

.nav-button.is-active,
.app-nav .nav-button.is-active {
  border-color: #6366F1;
  border-left-color: #6366F1;
  color: #ffffff;
  background: #6366F1;
  box-shadow: 0 10px 22px rgba(99, 102, 241,0.18);
}

.app-nav .nav-button:nth-child(3n),
.app-nav .nav-button:nth-child(3n + 1),
.app-nav .nav-button:nth-child(3n + 2) {
  border-left-color: #E2E8F0;
}

.app-nav .nav-button:nth-child(3n):hover,
.app-nav .nav-button:nth-child(3n + 1):hover,
.app-nav .nav-button:nth-child(3n + 2):hover,
.app-nav .nav-button.is-active {
  border-left-color: #6366F1;
}

.loading-dot {
  background: var(--accent);
  box-shadow: none;
}

.music-save-overlay,
.confirm-modal,
.lyrics-fullscreen,
.chord-modal {
  background: rgba(15, 23, 42,0.38);
}

.song-delete-button,
.saved-delete,
.confirm-modal-danger {
  border-color: #C7D2FE;
  color: #DC2626;
  background: #EEF2FF;
}

/* Tema claro refinado: identidade rosa com detalhes musicais discretos */
:root {
  color-scheme: light;
  --ink: #0F172A;
  --muted: #64748B;
  --line: #E2E8F0;
  --panel: #ffffff;
  --soft: #F8FAFC;
  --accent: #6366F1;
  --accent-dark: #4F46E5;
  --list-hover: #EEF2FF;
  --list-hover-strong: #6366F1;
  --list-hover-text: #0F172A;
  --gold: #A5B4FC;
  --rose: #6366F1;
  --warm-1: #6366F1;
  --warm-2: #818CF8;
  --warm-3: #A5B4FC;
  --lime: #4F46E5;
  --deep-bg: #F8FAFC;
  --deep-bg-2: #F1F5F9;
  --shadow: 0 18px 48px rgba(15, 23, 42,0.09);
  --neon-glow-soft: 0 0 0 3px rgba(99, 102, 241,0.12);
  --neon-glow-strong: 0 12px 26px rgba(99, 102, 241,0.18);
}

body {
  color: var(--ink);
  background: #F8FAFC;
}

body::before {
  background: none;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: #F1F5F9;
}

::-webkit-scrollbar-thumb {
  background: #6366F1;
  border-color: rgba(99, 102, 241,0.38);
  box-shadow: none;
}

.auth-shell,
.hero,
.topbar {
  background: #ffffff;
}

.hero::before {
  background: none;
}

.auth-card,
.hero-panel,
.sidebar,
.toolbar,
.setlist-panel,
.saved-repertoires-panel,
.share-panel,
.indicators-panel,
.lyrics-panel,
.tuner-panel,
.solo-panel,
.detector-panel,
.chord-panel,
.scale-library-panel,
.music-library,
.music-form-panel,
.notifications-panel,
.preview-item,
.saved-item,
.song-card,
.chord-card,
.lyrics-song,
.confirm-modal-card,
.custom-select-menu,
.music-import-panel,
.event-card,
.indicator-card,
.share-card,
.scale-viewer,
.detector-result-card,
.detector-current,
.chord-list-button,
.repertoire-preview,
.setlist-song,
table,
tbody tr {
  border-color: var(--line);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
}

.library-head h2,
.music-form-head h2,
.saved-head h2,
.lyrics-head h2,
.chord-head h2,
.preview-title,
.song-title,
.lyrics-song h3,
.chord-card-head strong,
.stat-value {
  color: #0F172A;
}

.eyebrow,
.eyebrow.dark,
.song-artist,
.saved-head span,
.chord-head span,
.chord-card-head span,
.chord-card-meta span,
.lyrics-tone-details strong,
.field-icon,
.stat-label {
  color: #4F46E5;
}

.name-field span,
.select-field span,
.range-field span,
.save-message,
.saved-empty,
.empty-state,
.song-tags span,
.lyrics-song p,
.preview-empty,
.chart-empty,
.custom-select-option,
td::before,
th {
  color: var(--muted);
}

input,
textarea,
select,
.custom-select-trigger,
.search-field input,
.name-field input,
.name-field textarea,
.name-field select,
.range-field input {
  border-color: #E2E8F0;
  color: var(--ink);
  background-color: #ffffff;
  caret-color: var(--accent);
}

input::placeholder,
textarea::placeholder {
  color: #94A3B8;
}

input:focus,
textarea:focus,
select:focus,
.custom-select-trigger:focus {
  border-color: var(--accent);
  outline-color: rgba(99, 102, 241,0.13);
  box-shadow: var(--neon-glow-soft);
}

.primary-button,
.toggle-button.is-active,
.secondary-button.is-active,
.song-select-button.is-selected,
.favorite-button.is-active,
.lyrics-expand-button[aria-expanded="true"],
.lyrics-scale-button:hover,
.table-action:hover,
.song-edit-button:hover,
.saved-load:hover,
.saved-name:hover,
.nav-button.is-active {
  border-color: var(--accent);
  color: #ffffff;
  background: #6366F1;
  box-shadow: 0 12px 24px rgba(99, 102, 241,0.18);
}

.primary-button:hover {
  border-color: #4F46E5;
  background: #4F46E5;
}

.secondary-button,
.toggle-button,
.icon-button,
.table-action,
.song-edit-button,
.favorite-button,
.song-select-button,
.song-link,
.small-link-button,
.saved-load,
.saved-name,
.saved-delete,
.lyrics-expand-button,
.lyrics-scale-button,
.lyrics-transpose-btn,
.chord-list-button {
  border-color: #C7D2FE;
  color: #4338CA;
  background: #F5F3FF;
}

.secondary-button:hover,
.toggle-button:hover,
.icon-button:hover,
.favorite-button:hover,
.song-select-button:hover,
.song-link:hover,
.small-link-button:hover,
.lyrics-transpose-btn:hover,
.chord-list-button:hover {
  border-color: rgba(99, 102, 241,0.35);
  color: #4338CA;
  background: #EEF2FF;
  box-shadow: none;
}

.nav-button,
.top-session,
.stat-card {
  border-color: var(--line);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.86);
}

.nav-button:hover {
  border-color: rgba(99, 102, 241,0.28);
  color: #4338CA;
  background: #F5F3FF;
}

.app-nav .nav-button:nth-child(3n),
.app-nav .nav-button:nth-child(3n + 1),
.app-nav .nav-button:nth-child(3n + 2) {
  border-left-color: rgba(99, 102, 241,0.52);
}

thead,
.custom-select-option.is-selected,
.chart-bar-fill,
.meter-needle,
.meter-arc .is-active {
  color: #ffffff;
  background: #6366F1;
}

.lyrics-view,
.lyrics-song pre,
.lyrics-fullscreen-card,
.lyrics-fullscreen-card pre,
.lyrics-chord-panel {
  border-color: #E2E8F0;
  color: #0F172A;
  background: #F8FAFC;
}

.lyrics-chord,
.lyrics-fullscreen-card pre .lyrics-chord {
  color: #6366F1;
  text-shadow: none;
}

.chord-dot,
.chord-barre,
.chord-open {
  color: #ffffff;
  background: #6366F1;
  box-shadow: none;
}

.chord-muted {
  color: #94A3B8;
}

.chord-fretboard {
  border-top-color: #CBD5E1;
  background:
    linear-gradient(
      90deg,
      transparent calc(8% - 1px),
      #CBD5E1 calc(8% - 1px) calc(8% + 1px),
      transparent calc(8% + 1px) calc(36% - 1px),
      #CBD5E1 calc(36% - 1px) calc(36% + 1px),
      transparent calc(36% + 1px) calc(64% - 1px),
      #CBD5E1 calc(64% - 1px) calc(64% + 1px),
      transparent calc(64% + 1px) calc(92% - 1px),
      #CBD5E1 calc(92% - 1px) calc(92% + 1px),
      transparent calc(92% + 1px)
    ),
    linear-gradient(180deg, #E2E8F0 0 2px, transparent 2px) 0 0 / 100% 20%;
}

.favorite-badge,
.import-file-button,
.import-loading,
.save-message:not(:empty),
.music-save-card,
.lyrics-tone-details span,
.song-tags span,
.scale-note.is-root {
  border-color: #C7D2FE;
  color: #4338CA;
  background: #EEF2FF;
}

.loading-dot {
  background: var(--accent);
  box-shadow: none;
}

.music-save-overlay,
.confirm-modal,
.lyrics-fullscreen,
.chord-modal {
  background: rgba(15, 23, 42,0.38);
}

.song-delete-button,
.saved-delete,
.confirm-modal-danger {
  border-color: #C7D2FE;
  color: #DC2626;
  background: #EEF2FF;
}


:root {
  color-scheme: light;
  --font-main: "Inter", "Segoe UI", Arial, sans-serif;
  --font-semi: "Inter", "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", Arial, sans-serif;
  --font-note: "Inter", "Segoe UI", Arial, sans-serif;
  --font-session: "Inter", "Segoe UI", Arial, sans-serif;
  --font-auth-soft: "Inter", "Segoe UI", Arial, sans-serif;
  --font-auth-accent: "Inter", "Segoe UI", Arial, sans-serif;
  --ink: #0F172A;
  --muted: #64748B;
  --line: #E2E8F0;
  --panel: #ffffff;
  --soft: #F8FAFC;
  --accent: #6366F1;
  --accent-dark: #4F46E5;
  --list-hover: #EEF2FF;
  --list-hover-strong: #6366F1;
  --list-hover-text: #0F172A;
  --gold: #A5B4FC;
  --rose: #DC2626;
  --warm-1: #6366F1;
  --warm-2: #818CF8;
  --warm-3: #A5B4FC;
  --shadow: 0 18px 50px rgba(15, 23, 42,0.12);
  --neon-glow-soft: 0 0 0 1px rgba(99, 102, 241,0.16), 0 0 16px rgba(99, 102, 241,0.1);
  --neon-glow-strong: 0 0 0 1px rgba(99, 102, 241,0.28), 0 0 22px rgba(99, 102, 241,0.16);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #F1F5F9;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb {
  background: #6366F1;
  border-radius: 9999px;
  border: 2px solid #F1F5F9;
}

::-webkit-scrollbar-thumb:hover {
  background: #4F46E5;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--font-body);
  color: var(--ink);
  background: #F8FAFC;
}

h1,
h2,
h3,
.song-title,
.preview-title,
.hero h1,
.setlist-head h2,
.saved-head h2,
.saved-head h3,
.share-head h2,
.share-card h3,
.music-form-head h2,
.indicators-head h2,
.library-head h2,
.lyrics-head h2,
.tuner-head h2,
.chord-head h2,
.scale-viewer-head h3,
.scale-modal-card h2,
.confirm-modal-copy h2,
.lyrics-song h3,
.lyrics-fullscreen-card h2,
.carousel-card h2,
.public-request-card h1 {
  font-family: var(--font-main);
}

.subtitle,
.hero-tag,
.hero-view-context,
.auth-subtitle,
.auth-form-head span,
.music-import-copy h3,
.indicators-subtitle,
.preview-head h3,
.chord-head span,
.chord-card-head span,
.chord-card-meta span,
.scale-viewer-head span,
.scale-modal-card header span,
.scale-modal-info,
.notifications-panel-head h3,
.share-head span,
.share-card-head h3,
.song-artist,
.excerpt,
.save-message,
.saved-empty,
.setlist-empty,
.empty-state,
.shared-pill,
.tag,
.indicator-chip {
  font-family: var(--font-semi);
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a,
input,
textarea,
select {
  -webkit-tap-highlight-color: rgba(99, 102, 241,0.18);
}

.app-shell {
  position: relative;
  width: min(1180px, calc(100% - 252px));
  margin-left: max(236px, calc((100vw - 1180px) / 2));
  margin-right: auto;
  padding: 74px 0 48px;
}

.auth-shell {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 24px;
}

#authShell {
  background: #F8FAFC;
}

.auth-card {
  position: relative;
  z-index: 1;
  width: min(400px, 100%);
  display: grid;
  justify-items: center;
  gap: 20px;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
}

.auth-logo {
  height: 56px;
  width: auto;
}

.auth-copy {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.auth-copy .eyebrow,
.auth-copy .eyebrow.dark {
  font-family: var(--font-auth-accent);
  color: var(--accent-dark);
}

.auth-copy h1 {
  max-width: 22ch;
  color: var(--ink);
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.auth-subtitle {
  max-width: 38ch;
  color: var(--muted);
  line-height: 1.6;
  text-align: center;
}

.auth-panels {
  width: 100%;
  display: grid;
  gap: 12px;
}

.auth-form {
  display: grid;
  gap: 14px;
}

.auth-form .name-field input {
  border-radius: 12px;
  min-height: 46px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-form .name-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}

.auth-form-head {
  display: grid;
  gap: 6px;
}

.auth-form-head h2 {
  margin: 0;
  font-family: var(--font-main);
  font-size: 1.58rem;
  color: var(--ink);
}

.auth-form-head span {
  color: rgba(15, 23, 42,0.6);
  font-size: 0.9rem;
}

.auth-submit {
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
  border-radius: 12px;
}

.auth-switch-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: rgba(15, 23, 42,0.58);
  font-family: var(--font-auth-soft);
  font-size: 0.88rem;
}

.auth-switch-link {
  padding: 0;
  border: 0;
  color: var(--accent);
  background: transparent;
  font-family: var(--font-auth-accent);
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
}

.auth-switch-link:hover {
  color: var(--accent-dark);
  text-decoration: underline;
}

.auth-message {
  margin: 8px 4px 0;
}

.hero {
  position: relative;
  z-index: 20;
  min-height: 160px;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
  gap: 18px;
  align-items: center;
  padding: 18px clamp(18px, 4vw, 32px);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(15, 23, 42,0.62), rgba(99, 102, 241,0.35)),
    linear-gradient(90deg, rgba(15, 23, 42,0.18), rgba(15, 23, 42,0.06)),
    url("assets/banner.png");
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow);
  color: #fff;
  overflow: visible;
  margin-bottom: 22px;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 34%),
    radial-gradient(circle at top right, rgba(165, 180, 252,0.12), transparent 30%);
  pointer-events: none;
}


.hero > * {
  position: relative;
  z-index: 1;
}

.hero-copy {
  position: relative;
  z-index: 30;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 8px 6px 8px 2px;
}

.hero-brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}

.hero-brand-copy {
  display: grid;
  gap: 5px;
  padding-right: 10px;
}

.eyebrow {
  font-family: var(--font-main);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 800;
  color: #A5B4FC;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-semi);
  font-size: 0.7rem;
  font-weight: 800;
  backdrop-filter: blur(12px);
}

.hero-view-context {
  width: fit-content;
  max-width: 520px;
  margin: 2px 0 0;
  padding: 7px 14px;
  border: 1px solid rgba(165, 180, 252,0.26);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(15, 23, 42,0.18);
  font-family: var(--font-semi);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.35;
  backdrop-filter: blur(12px);
}

.hero-source-box {
  position: relative;
  z-index: 120;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 2px;
}

.source-picker {
  position: relative;
  z-index: 130;
}

.source-picker-button {
  min-height: 32px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  font-family: var(--font-auth-accent);
  font-size: 0.72rem;
  font-weight: 850;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 24px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(12px);
}

.source-picker-button:hover {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.22);
}

.source-picker-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 999;
  width: min(280px, calc(100vw - 48px));
  padding: 8px;
  border: 1px solid rgba(99, 102, 241,0.18);
  border-radius: 14px;
  background: rgba(248, 250, 252,0.98);
  box-shadow: 0 18px 44px rgba(15, 23, 42,0.22);
  backdrop-filter: blur(16px);
}

.source-picker-panel.is-floating {
  position: fixed;
  top: auto;
  left: auto;
  right: auto;
  z-index: 10000;
  max-width: calc(100vw - 24px);
}

.source-options {
  display: grid;
  gap: 4px;
  max-height: 260px;
  overflow: auto;
}

.source-option {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 10px;
  color: var(--ink);
  font-family: var(--font-auth-accent);
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
}

.source-option:hover {
  color: var(--accent-dark);
  background: var(--list-hover);
}

.source-option input {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  margin: 0;
  border: 2px solid rgba(99, 102, 241,0.5);
  border-radius: 5px;
  background: #ffffff;
  accent-color: var(--accent);
  cursor: pointer;
}

.source-option input::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: transparent;
}

.source-option input:checked {
  border-color: var(--accent);
  background: var(--accent);
}

.source-option input:checked::before {
  background: #ffffff;
}

.source-option:has(input:checked) {
  color: var(--accent-dark);
  background: #EEF2FF;
}

.hero-brand {
  display: block;
  width: clamp(168px, 24vw, 240px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  margin: 0;
  opacity: 1;
  visibility: visible;
}

h1 {
  font-family: var(--font-main);
  max-width: 560px;
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 2.35rem);
  line-height: 1.02;
  letter-spacing: 0;
  text-wrap: balance;
}

.subtitle {
  font-family: var(--font-semi);
  max-width: 500px;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(0.78rem, 1.4vw, 0.92rem);
  line-height: 1.35;
  padding-right: 18px;
}

.hero-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(22px);
}

.hero-panel > div {
  min-width: 0;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241,0.1);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
}

.hero-panel > div:last-child {
  border-bottom: 0;
}

.stat-value,
.stat-label {
  display: block;
}

.stat-value {
  font-family: var(--font-main);
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  font-weight: 700;
  line-height: 1;
}

.stat-label {
  font-family: var(--font-semi);
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.62rem;
  text-transform: uppercase;
}

.app-nav {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 210;
  width: 214px;
  max-height: none;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 8px;
  margin: 0;
  padding: calc(64px + env(safe-area-inset-top, 0px)) 12px 16px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 30px rgba(15, 23, 42,0.08);
  backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-100%);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.app-nav.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.mobile-menu-toggle {
  position: fixed;
  left: 14px;
  top: calc(12px + env(safe-area-inset-top, 0px));
  z-index: 230;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--accent);
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

.mobile-menu-toggle[aria-expanded="true"] {
  color: var(--accent);
  background: none;
}

.app-nav .nav-button {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}

.notifications-hub {
  position: absolute;
  top: 18px;
  left: 0;
  z-index: 30;
}

.notification-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(99, 102, 241,0.18);
  border-radius: 999px;
  color: var(--accent-dark);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 12px 30px rgba(15, 23, 42,0.1);
  backdrop-filter: blur(16px) saturate(150%);
  cursor: pointer;
}

.notification-toggle:hover,
.notification-toggle[aria-expanded="true"] {
  color: #fff;
  background: rgba(99, 102, 241,0.9);
}

.notification-toggle-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
}

.notification-toggle-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-alert-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: #dc2626;
  font-family: var(--font-semi);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
}

.notifications-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: min(360px, calc(100vw - 32px));
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 50px rgba(15, 23, 42,0.2);
}

.notifications-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.notifications-panel-head h3 {
  margin: 0 0 4px;
}

.notifications-panel-head span {
  color: var(--muted);
  font-family: var(--font-semi);
  font-size: 0.76rem;
  font-weight: 800;
}

.nav-session {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.top-session {
  position: absolute;
  top: 18px;
  right: 0;
  z-index: 12;
  padding: 8px;
  border: 1px solid rgba(226, 232, 240,0.78);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 12px 30px rgba(15, 23, 42,0.1);
  backdrop-filter: blur(16px) saturate(150%);
}

.nav-session-user {
  max-width: 180px;
  overflow: hidden;
  color: var(--accent-dark);
  font-family: var(--font-session);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-logout-button {
  min-height: 34px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--rose);
  background: rgba(255, 255, 255, 0.88);
  font-family: var(--font-session);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav-logout-button:hover {
  border-color: var(--rose);
  color: #fff;
  background: var(--rose);
}

.nav-button {
  font-family: var(--font-semi);
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--accent-dark);
  background: #fff;
  font-size: 0.9rem;
  font-weight: 850;
  cursor: pointer;
}

.nav-button:hover {
  border-color: rgba(99, 102, 241,0.42);
  color: var(--accent-dark);
  background: #EEF2FF;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 0 0 1px rgba(99, 102, 241,0.22),
    0 0 18px rgba(99, 102, 241,0.12);
}

.nav-button.is-active {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 1px rgba(99, 102, 241,0.34),
    0 0 22px rgba(99, 102, 241,0.2);
}

/* -- Nav button accent ------------------------------- */
.app-nav .nav-button:nth-child(3n+1),
.app-nav .nav-button:nth-child(3n+2),
.app-nav .nav-button:nth-child(3n) { border-left: 3px solid rgba(99, 102, 241,0.5); }

.toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) repeat(4, minmax(140px, 190px)) minmax(76px, auto);
  gap: 12px;
  align-items: end;
  margin: 22px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 30px rgba(15, 23, 42,0.08);
}

.search-field,
.select-field {
  min-width: 0;
}

.search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.field-icon {
  flex: 0 0 auto;
  color: var(--accent-dark);
  font-size: 1.25rem;
  line-height: 1;
}

.search-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
}

.select-field {
  display: grid;
  gap: 5px;
}

.select-field span {
  font-family: var(--font-semi);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.select-field select {
  width: 100%;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
}

.native-select-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.custom-select {
  position: relative;
  min-width: 0;
}

.custom-select-button {
  width: 100%;
  min-height: 44px;
  padding: 0 38px 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background:
    linear-gradient(45deg, transparent 50%, var(--accent-dark) 50%) calc(100% - 18px) 50% / 6px 6px no-repeat,
    linear-gradient(135deg, var(--accent-dark) 50%, transparent 50%) calc(100% - 13px) 50% / 6px 6px no-repeat,
    #ffffff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.custom-select-button:focus-visible {
  border-color: var(--accent);
  outline: 3px solid rgba(99, 102, 241,0.16);
}

.custom-select-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 95;
  max-height: 280px;
  overflow: auto;
  border: 1px solid rgba(99, 102, 241,0.22);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(15, 23, 42,0.16);
}

.custom-select-option {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 0;
  color: var(--ink);
  background: #ffffff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.custom-select-option:hover,
.custom-select-option.is-selected {
  color: var(--list-hover-text);
  background: var(--list-hover);
}

.custom-select-option.is-selected {
  font-weight: 850;
}

.icon-button,
.primary-button,
.secondary-button,
.toggle-button {
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--accent-dark);
  background: #fff;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 0 0 1px rgba(99, 102, 241,0.1),
    0 0 12px rgba(99, 102, 241,0.08);
}

.icon-button {
  min-width: 44px;
  height: 44px;
  font-size: 1.2rem;
}

.icon-button:hover,
.primary-button:hover,
.secondary-button:hover,
.toggle-button:hover {
  border-color: rgba(99, 102, 241,0.42);
  color: var(--accent-dark);
  background: #EEF2FF;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 0 0 1px rgba(99, 102, 241,0.22),
    0 0 18px rgba(99, 102, 241,0.14);
  transform: translateY(-1px);
}

.toggle-button.is-active,
.secondary-button.is-active {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
  box-shadow: var(--neon-glow-strong);
  transform: translateY(-1px);
}

.primary-button {
  font-family: var(--font-main);
  min-height: 44px;
  padding: 9px 14px;
  border-color: var(--accent-dark);
  color: #fff;
  background: var(--accent-dark);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.primary-button:hover {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 1px rgba(99, 102, 241,0.34),
    0 0 22px rgba(99, 102, 241,0.22);
}

.primary-button:disabled,
.secondary-button:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
  box-shadow: none;
}

.text-button {
  font-family: var(--font-semi);
  width: 100%;
  padding: 0 14px;
  font-size: 0.86rem;
  font-weight: 800;
  white-space: nowrap;
}

.secondary-button {
  font-family: var(--font-main);
  min-height: 40px;
  padding: 8px 12px;
  color: var(--accent-dark);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.secondary-button:hover {
  border-color: rgba(99, 102, 241,0.42);
  color: var(--accent-dark);
  background: #EEF2FF;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 0 0 1px rgba(99, 102, 241,0.22),
    0 0 18px rgba(99, 102, 241,0.14);
}

.secondary-button:disabled {
  color: var(--muted);
  background: var(--soft);
  cursor: not-allowed;
  box-shadow: none;
}

.setlist-panel,
.saved-repertoires-panel,
.share-panel,
.indicators-panel,
.lyrics-panel,
.tuner-panel,
.solo-panel,
.detector-panel,
.chord-panel,
.scale-library-panel,
.music-library {
  margin: 0 0 22px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42,0.08);
}

.music-form-panel {
  position: relative;
  margin: 0 0 22px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42,0.08);
}

.music-form-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.music-form-head h2 {
  font-family: var(--font-main);
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.1;
}

.music-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.music-form.is-saving {
  pointer-events: none;
  opacity: 0.58;
}

.music-save-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 18px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(4px);
}

.music-save-card {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(300px, 100%);
  padding: 18px;
  border: 1px solid rgba(99, 102, 241,0.18);
  border-radius: 8px;
  color: var(--accent-dark);
  background: #ffffff;
  box-shadow: 0 18px 46px rgba(15, 23, 42,0.18);
  text-align: center;
}

.music-save-card strong {
  font-family: var(--font-main);
  font-size: 1rem;
}

.music-save-card small {
  color: var(--muted);
  font-family: var(--font-semi);
  font-size: 0.8rem;
}

.name-field.wide {
  grid-column: span 2;
}

.name-field.full {
  grid-column: 1 / -1;
}

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.music-import-panel {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(99, 102, 241,0.16);
  border-radius: 8px;
  background: linear-gradient(180deg, #F8FAFC, #ffffff);
}

.music-import-copy {
  display: grid;
  gap: 5px;
}

.music-import-copy h3 {
  margin: 0;
  font-family: var(--font-semi);
  font-size: 1.05rem;
}

.music-import-copy span {
  color: var(--muted);
  font-size: 0.88rem;
}

.music-import-actions {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.import-file-picker {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.import-file-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.import-file-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--accent-dark);
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42,0.06);
  font-family: var(--font-semi);
  font-size: 0.82rem;
  font-weight: 850;
  cursor: pointer;
}

.import-file-picker:hover .import-file-button {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}

.import-file-name {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--accent-dark);
  background: #EEF2FF;
  font-family: var(--font-semi);
  font-size: 0.82rem;
  font-weight: 850;
}

.loading-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
  animation: loadingPulse 0.9s ease-in-out infinite;
}

.import-message {
  width: fit-content;
  min-height: 0;
  padding: 9px 12px;
  border: 1px solid rgba(99, 102, 241,0.18);
  border-radius: 999px;
  background: #EEF2FF;
  box-shadow: 0 10px 24px rgba(15, 23, 42,0.08);
}

.import-message:empty {
  display: none;
}

.import-message.is-error {
  border-color: rgba(161, 51, 51, 0.24);
  background: #FEF2F2;
}

@keyframes loadingPulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.85);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.setlist-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.eyebrow.dark {
  color: var(--accent-dark);
}

.setlist-head h2 {
  font-family: var(--font-main);
  margin: 0 0 5px;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.1;
}

.setlist-head span,
.setlist-empty,
.saved-empty {
  color: var(--muted);
  font-size: 0.92rem;
}

.save-repertoire {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(180px, 0.7fr);
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #F8FAFC;
}

.name-field {
  display: grid;
  gap: 5px;
}

.name-field span {
  font-family: var(--font-semi);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.name-field input,
.name-field select,
.name-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
}

.name-field input,
.name-field select {
  min-height: 44px;
  padding: 0 12px;
}

.name-field input[readonly],
.name-field textarea[readonly] {
  background: #F8FAFC;
  color: var(--muted);
}

.name-field textarea {
  min-height: 84px;
  padding: 10px 12px;
  resize: vertical;
}

.name-field input:focus,
.name-field select:focus,
.name-field textarea:focus {
  border-color: var(--accent);
  outline: 3px solid rgba(99, 102, 241,0.16);
}

.save-message {
  min-height: 20px;
  color: var(--accent-dark);
  font-size: 0.9rem;
  font-weight: 800;
}

.save-message.is-error {
  color: #DC2626;
}

.setlist {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.setlist-item {
  display: grid;
  grid-template-columns: auto 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #F8FAFC;
}

.setlist-item.is-dragging {
  opacity: 0.52;
}

.setlist-item.is-drop-target {
  border-color: var(--accent);
  background: #EEF2FF;
}

.drag-handle {
  font-family: var(--font-semi);
  display: inline-grid;
  place-items: center;
  min-width: 74px;
  min-height: 34px;
  padding: 6px 9px;
  border-radius: 8px;
  color: var(--accent-dark);
  background: #EEF2FF;
  font-size: 0.78rem;
  font-weight: 850;
  cursor: grab;
}

.setlist-number {
  font-family: var(--font-main);
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff !important;
  background: #7C3AED;
  font-weight: 850;
}

.setlist-song {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.setlist-song strong,
.setlist-song span {
  overflow-wrap: anywhere;
}

.setlist-song strong {
  font-family: var(--font-semi);
}

.setlist-song span {
  color: var(--muted);
  font-size: 0.9rem;
}

.setlist-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.setlist-actions button {
  font-family: var(--font-semi);
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--accent-dark);
  background: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.small-link-button,
.small-link-button:visited,
.small-link-button:hover,
.small-link-button:active {
  font-family: var(--font-semi);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}

.small-link-button:hover {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}

.small-link-button.is-disabled {
  border-color: var(--line);
  color: var(--muted);
  background: var(--soft);
}

.setlist-actions button:hover {
  border-color: var(--accent);
}

.setlist-actions button:disabled {
  color: #94A3B8;
  background: var(--soft);
  cursor: not-allowed;
}

.setlist-empty {
  margin: 8px 0 0;
}

.saved-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 10px;
}

.share-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.share-head h2,
.share-card h3 {
  font-family: var(--font-main);
  margin: 0;
  line-height: 1.1;
}

.share-head h2 {
  font-size: clamp(1.35rem, 3vw, 2rem);
}

.share-head span {
  color: var(--muted);
  font-size: 0.92rem;
}

.share-identity {
  display: grid;
  gap: 6px;
  min-width: min(100%, 260px);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #F8FAFC;
}

.share-identity strong {
  color: var(--accent-dark);
}

.share-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(180px, 0.7fr);
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #F8FAFC;
}

.share-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.event-panel {
  gap: 1.25rem;
}

.event-form {
  align-items: end;
}

.event-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 14px;
}

.event-list,
.event-request-list {
  display: grid;
  gap: 12px;
}

.event-item {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #F8FAFC;
  padding: 1rem 1.05rem;
  text-align: left;
  display: grid;
  gap: 0.35rem;
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.event-item strong,
.event-request-item strong {
  font-size: 1rem;
  color: var(--ink);
}

.event-item span,
.event-request-item span,
.event-request-item em,
.event-detail-empty,
.public-request-meta {
  color: var(--muted);
  font-style: normal;
}

.event-item:hover,
.event-item.is-active {
  border-color: var(--list-hover-strong);
  background: var(--list-hover);
  color: var(--list-hover-text);
  transform: translateY(-1px);
}

.event-item.is-active strong,
.event-item.is-active span {
  color: var(--list-hover-text);
}

.event-detail {
  display: grid;
  gap: 1rem;
}

.event-qr-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  border-radius: 24px;
  background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
  border: 1px solid var(--line);
}

.event-qr-wrap img {
  width: min(280px, 100%);
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.event-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
}

.event-qr-actions {
  display: flex;
  justify-content: flex-end;
}

.event-link-row input {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--line);
  padding: 0.9rem 1rem;
  background: #F8FAFC;
  color: var(--ink);
}

.event-request-item {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0.95rem 1rem;
  background: #F8FAFC;
  display: grid;
  gap: 0.25rem;
}

.musician-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 12px;
  align-items: start;
}

.musician-column {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.74);
}

.musician-column header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.musician-column h4 {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
}

.musician-column header span {
  min-width: 28px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--accent);
  font-weight: 900;
}

.musician-column-list {
  display: grid;
  gap: 10px;
  max-height: 58vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.musician-board .event-request-item {
  border-radius: 8px;
  background: #fff;
}

.event-request-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-top: 6px;
}

.event-request-actions .secondary-button {
  min-height: 34px;
  padding: 6px 9px;
  border-radius: 7px;
  font-size: 0.76rem;
}

.musician-empty {
  margin: 0;
  padding: 12px;
  border: 1px dashed rgba(148, 163, 184, 0.4);
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
}

.assistant-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
  gap: 16px;
}

.assistant-controls,
.assistant-result {
  align-self: start;
}

.assistant-output,
.assistant-blocks,
.assistant-apply {
  display: grid;
  gap: 12px;
}

.assistant-summary,
.assistant-columns > div,
.assistant-block,
.assistant-song-option {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #F8FAFC;
}

.assistant-summary {
  display: grid;
  gap: 6px;
  padding: 12px;
}

.assistant-summary p,
.assistant-summary span,
.assistant-columns span,
.assistant-song-option small,
.assistant-song-option em {
  margin: 0;
  color: var(--muted);
}

.assistant-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.assistant-columns > div,
.assistant-block {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.assistant-columns h4,
.assistant-block h4 {
  margin: 0;
  color: var(--ink);
}

.assistant-song-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
}

.assistant-song-option span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.public-request-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at top, rgba(99, 102, 241,0.14), transparent 32%),
    linear-gradient(180deg, #F8FAFC 0%, #F8FAFC 100%);
}

.public-request-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.public-request-card {
  width: min(100%, 620px);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(15, 23, 42,0.1);
  border-radius: 30px;
  box-shadow: 0 28px 70px rgba(15, 23, 42,0.14);
  padding: 1.5rem;
  display: grid;
  gap: 1rem;
}

.public-request-card h1 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
}

.public-request-form {
  display: grid;
  gap: 1rem;
}

@media (max-width: 900px) {
  .event-layout,
  .event-link-row {
    grid-template-columns: 1fr;
  }
}

.share-card {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.share-card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.share-card-head h3 {
  font-size: 1.15rem;
}

.share-card-head span {
  color: var(--muted);
  font-size: 0.84rem;
}

.share-list {
  display: grid;
  gap: 8px;
}

.share-person {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #F8FAFC;
}

.share-request {
  align-items: flex-start;
}

.share-person div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.share-person strong,
.share-person span {
  overflow-wrap: anywhere;
}

.notification-item.is-unread {
  border-color: rgba(99, 102, 241,0.34);
  background: #EEF2FF;
}

.notification-item > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.notification-item .shared-pill,
.notification-item .saved-load {
  white-space: nowrap;
  flex-shrink: 0;
}

.notification-refresh {
  width: auto;
  margin-bottom: 10px;
  white-space: nowrap;
}

.notifications-panel .notification-refresh {
  margin-bottom: 0;
}

.share-person strong {
  font-family: var(--font-semi);
}

.share-person span {
  color: var(--muted);
  font-size: 0.84rem;
}

.saved-head h2,
.saved-head h3,
.indicators-head h2,
.library-head h2 {
  font-family: var(--font-main);
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.1;
}

.saved-head span {
  color: var(--muted);
  font-size: 0.88rem;
}

.indicators-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 16px;
}

.indicators-subtitle {
  display: inline-block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.92rem;
}

.indicators-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.indicator-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #F8FAFC);
}

.indicator-card:first-child {
  grid-row: span 2;
}

.indicator-card-wide {
  grid-column: 1 / -1;
}

.indicator-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.indicator-card-head h3 {
  font-family: var(--font-semi);
  margin: 3px 0 0;
  font-size: 1.05rem;
  line-height: 1.25;
}

.indicator-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 11px;
  border-radius: 999px;
  color: var(--accent-dark);
  border: 1px solid rgba(99, 102, 241,0.2);
  background: #EEF2FF;
  box-shadow: var(--neon-glow-soft);
  font-family: var(--font-main);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.indicator-chart-wrap {
  display: grid;
  grid-template-columns: minmax(280px, 1.15fr) minmax(220px, 0.85fr);
  gap: 18px;
  align-items: center;
}

.pie-chart-shell,
.bar-chart-shell {
  min-height: 280px;
}

.pie-chart-shell svg,
.bar-chart-shell svg {
  display: block;
  width: 100%;
  height: auto;
}

.pie-chart-shell {
  display: grid;
  place-items: center;
}

.chart-legend {
  display: grid;
  gap: 10px;
}

.legend-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.legend-label {
  min-width: 0;
  color: var(--ink);
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.legend-value {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 800;
}

.chart-empty {
  display: grid;
  place-items: center;
  min-height: 280px;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #F8FAFC;
  text-align: center;
}

.bar-chart {
  display: grid;
  gap: 14px;
}

.bar-chart-row {
  display: grid;
  grid-template-columns: minmax(96px, 180px) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.bar-chart-label {
  min-width: 0;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.bar-chart-track {
  position: relative;
  height: 28px;
  border-radius: 999px;
  background: #F1F5F9;
  overflow: hidden;
}

.bar-chart-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
}

.bar-chart-value {
  color: var(--accent-dark);
  font-size: 0.9rem;
  font-weight: 900;
  white-space: nowrap;
}

.indicator-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.indicator-stat {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #F8FAFC;
}

.indicator-stat span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
}

.indicator-stat strong {
  color: var(--accent-dark);
  font-size: 1.4rem;
  line-height: 1.1;
}

.indicator-stat small {
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.4;
}

.saved-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1fr);
  gap: 14px;
  align-items: start;
}

.saved-list {
  display: grid;
  gap: 8px;
}

.saved-item {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.saved-item.is-shared {
  grid-template-columns: minmax(0, 1fr) auto auto;
  background: #FFFBEB;
}

.saved-name,
.saved-load,
.saved-delete {
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.saved-name {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  color: var(--ink);
  background: #F8FAFC;
  text-align: left;
}

.saved-name:hover {
  background: #EEF2FF;
}

.saved-name strong,
.saved-name span {
  overflow-wrap: anywhere;
}

.saved-name strong {
  font-family: var(--font-semi);
}

.saved-name span {
  color: var(--muted);
  font-size: 0.82rem;
}

.saved-load {
  font-family: var(--font-semi);
  padding: 7px 9px;
  color: var(--accent-dark);
  background: #EEF2FF;
  font-size: 0.78rem;
  font-weight: 850;
}

.saved-load:hover {
  background: #C7D2FE;
}

.saved-lyrics {
  color: #818CF8;
  background: #EEF2FF;
}

.saved-lyrics:hover {
  background: #C7D2FE;
}

.saved-delete {
  font-family: var(--font-semi);
  padding: 7px 9px;
  color: #DC2626;
  background: #EEF2FF;
  font-size: 0.78rem;
  font-weight: 850;
}

.saved-delete:hover {
  background: #C7D2FE;
}

.saved-repertoire-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: stretch;
  justify-content: center;
  padding: clamp(12px, 3vw, 28px);
}

.saved-repertoire-modal.is-open {
  display: flex;
}

.saved-repertoire-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.56);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.saved-repertoire-dialog {
  position: relative;
  z-index: 1;
  width: min(1080px, 100%);
  height: calc(100vh - clamp(24px, 6vw, 56px));
  max-height: calc(100vh - clamp(24px, 6vw, 56px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.24);
  overflow: hidden;
}

.saved-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border: 0;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  opacity: 0.78;
}

.saved-modal-close:hover {
  color: var(--ink);
  background: transparent;
  opacity: 1;
}

.saved-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.saved-modal-head h3 {
  font-family: var(--font-main);
  margin: 0 0 4px;
  font-size: clamp(1.25rem, 3vw, 2rem);
  line-height: 1.1;
}

.saved-modal-head span {
  color: var(--muted);
  font-size: 0.92rem;
}

.saved-modal-status {
  margin: 8px 0 0;
  color: #2563EB;
  font-size: 0.84rem;
  font-weight: 800;
}

.saved-modal-status.is-error {
  color: #DC2626;
}

.saved-modal-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding-right: 36px;
}

.saved-modal-actions .secondary-button {
  white-space: nowrap;
}

.saved-modal-actions .secondary-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.saved-modal-body {
  min-height: 0;
  max-height: 100%;
  overflow-y: hidden;
  overflow-x: hidden;
  display: grid;
  gap: 6px;
  padding-right: 2px;
  align-content: start;
  overscroll-behavior: contain;
}

.saved-block {
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #F8FAFC;
  overflow: hidden;
}

.saved-block.is-expanded {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 260px);
}

.saved-block.is-collapsed {
  border-color: #E5E7EB;
  background: #F8FAFC;
}

.saved-block-head {
  width: 100%;
  min-height: 44px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
  border: 0;
  color: var(--ink);
  background: #EEF2FF;
  cursor: pointer;
  text-align: left;
}

.saved-block.is-collapsed .saved-block-head {
  min-height: 34px;
  padding: 6px 10px;
  background: #F8FAFC;
}

.saved-block-head strong {
  font-family: var(--font-semi);
}

.saved-block.is-collapsed .saved-block-head strong {
  color: var(--muted);
  font-size: 0.88rem;
}

.saved-block-head span {
  color: var(--accent-dark);
  font-size: 0.82rem;
  font-weight: 850;
  white-space: nowrap;
}

.saved-block.is-collapsed .saved-block-head span {
  color: var(--muted);
  font-size: 0.76rem;
}

.saved-block-empty {
  margin: 0;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  background: #fff;
  font-size: 0.84rem;
}

.saved-block-head::before {
  content: "-";
  color: var(--accent-dark);
  font-weight: 900;
}

.saved-block-head[aria-expanded="false"]::before {
  content: "+";
}

.saved-modal-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  overscroll-behavior: contain;
}

.saved-modal-table {
  width: 100%;
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  background: #fff;
}

.saved-modal-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  background: #F8FAFC;
  font-size: 0.72rem;
  font-weight: 900;
  text-align: left;
  text-transform: uppercase;
}

.saved-modal-table th:nth-child(1),
.saved-modal-table td:nth-child(1) {
  width: auto;
}

.saved-modal-table th:nth-child(2),
.saved-modal-table td:nth-child(2) {
  width: 210px;
  text-align: right;
}

.saved-modal-table td {
  padding: 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.saved-modal-table tbody tr:last-child td {
  border-bottom: 0;
}

.saved-modal-song {
  position: relative;
  background: #fff;
}

.saved-modal-song .drag-handle {
  width: 66px;
  min-width: 66px;
  min-height: 30px;
  padding: 5px 6px;
  font-size: 0.72rem;
}

.saved-modal-song .table-action,
.saved-modal-song .small-link-button {
  min-width: 48px;
  min-height: 30px;
  padding: 5px 7px;
  font-size: 0.76rem;
}

.saved-table-song {
  min-width: 0;
}

.saved-table-song strong,
.saved-table-song span,
.saved-song-excerpt {
  overflow-wrap: anywhere;
}

.saved-song-title-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  min-width: 0;
}

.saved-table-song strong {
  font-family: var(--font-semi);
  font-size: 0.95rem;
}

.saved-song-meta {
  min-width: 0;
}

.saved-song-key {
  color: #7C3AED;
  font-weight: 900;
}

.saved-table-song span,
.saved-table-muted,
.saved-song-excerpt {
  color: var(--muted);
  font-size: 0.82rem;
}

.saved-song-excerpt {
  display: block;
  margin-top: 3px;
  line-height: 1.35;
}

.saved-song-gear {
  width: 32px;
  min-width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--accent-dark);
  background: #fff;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
}

.saved-song-gear:hover,
.saved-song-gear[aria-expanded="true"] {
  border-color: rgba(99, 102, 241, 0.38);
  background: #EEF2FF;
}

.saved-modal-song-locked {
  background: #F8FAFC;
}

.saved-modal-song-locked .saved-table-song strong {
  color: #818CF8;
}

.saved-modal-song.is-dragging {
  opacity: 0.52;
}

.saved-modal-song.is-drop-target {
  border-color: var(--accent);
  background: #EEF2FF;
}

.saved-block-picker {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.saved-block-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.saved-block-picker span {
  display: none;
}

.saved-block-picker select {
  min-height: 32px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 800;
}

.saved-block-cell .saved-block-picker {
  flex: 1 1 auto;
}

.saved-song-action-cell {
  position: relative;
  text-align: right;
  white-space: nowrap;
}

.saved-song-action-cell > .saved-song-gear,
.saved-song-action-cell > .drag-handle {
  vertical-align: top;
}

.saved-song-actions-modal {
  position: absolute;
  top: 4px;
  right: 8px;
  z-index: 6;
  width: min(240px, calc(100vw - 34px));
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
}

.saved-modal-lyrics-button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--accent-dark);
  background: #EEF2FF;
  font-size: 0.74rem;
  font-weight: 750;
  cursor: pointer;
}

.saved-modal-lyrics-button:hover {
  border-color: var(--accent);
  color: #ffffff;
  background: var(--accent);
}

.source-option:hover,
.saved-name:hover,
.saved-load:hover,
.saved-lyrics:hover,
.saved-delete:hover,
.share-person:hover,
.setlist-item:hover,
.preview-item:hover,
.lyrics-song:hover,
.song-card:hover,
.song-check:hover,
.song-select-button:hover,
.chord-list-button:hover,
.table-action:hover,
.song-edit-button:hover {
  border-color: rgba(99, 102, 241,0.38);
  color: var(--accent-dark);
  background: #EEF2FF;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(99, 102, 241,0.18),
    0 0 16px rgba(99, 102, 241,0.1);
}

.source-option:has(input:checked),
.chord-list-button.is-active,
.toggle-button.is-active,
.secondary-button.is-active {
  border-color: var(--list-hover-strong);
  color: #ffffff;
  background: var(--list-hover-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 1px rgba(99, 102, 241,0.3),
    0 0 20px rgba(99, 102, 241,0.18);
}

.source-option:has(input:checked) span,
.chord-list-button.is-active span,
.chord-list-button.is-active strong {
  color: #ffffff;
}

.saved-empty {
  margin: 8px 0 0;
}

.tag.shared,
.shared-pill {
  color: var(--accent-dark);
  border: 1px solid rgba(99, 102, 241,0.18);
  background: #EEF2FF;
  box-shadow: var(--neon-glow-soft);
}

.shared-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 999px;
  font-family: var(--font-semi);
  font-size: 0.76rem;
  font-weight: 850;
}

.setlist-head-actions,
.preview-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.repertoire-preview {
  min-height: 220px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #F8FAFC;
}

.preview-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.preview-head h3 {
  font-family: var(--font-main);
  margin: 0;
  font-size: 1.25rem;
}

.preview-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.preview-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.preview-item-locked {
  background: #F8FAFC;
}

.preview-item-locked .setlist-song strong {
  color: #818CF8;
}

.library-head {
  margin-bottom: 12px;
}

.lyrics-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.lyrics-head > div:first-child {
  flex: 1 1 200px;
  min-width: 0;
}

.lyrics-tools {
  flex-shrink: 0;
}

.lyrics-head h2 {
  font-family: var(--font-main);
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.1;
}

.tuner-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.tuner-head h2 {
  font-family: var(--font-main);
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.1;
}

.tuner-actions {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.tuner-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 1fr);
  gap: 22px;
  align-items: stretch;
}

.tuner-meter {
  --needle-angle: 0deg;
  min-height: 455px;
  position: relative;
  overflow: hidden;
  padding: 18px 18px 20px;
  border: 1px solid rgba(226, 232, 240,0.9);
  border-radius: 8px;
  background: #fff;
  box-shadow:
    0 16px 34px rgba(15, 23, 42,0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.tuner-meter::before {
  content: none;
}

.meter-scale {
  position: absolute;
  width: min(82%, 380px);
  aspect-ratio: 2 / 1;
  left: 50%;
  top: 118px;
  transform: translateX(-50%);
  pointer-events: none;
  color: rgba(100, 116, 139,0.42);
  font-size: 0.56rem;
  font-weight: 760;
}

.meter-scale span {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.meter-scale span:nth-child(1) {
  left: 10%;
  top: 88%;
}

.meter-scale span:nth-child(2) {
  left: 29%;
  top: 27%;
}

.meter-scale span:nth-child(3) {
  left: 50%;
  top: 2%;
  color: rgba(99, 102, 241,0.74);
}

.meter-scale span:nth-child(4) {
  left: 71%;
  top: 27%;
}

.meter-scale span:nth-child(5) {
  left: 90%;
  top: 88%;
}

.meter-arc {
  position: absolute;
  width: min(82%, 380px);
  aspect-ratio: 2 / 1;
  left: 50%;
  top: 128px;
  transform: translateX(-50%);
  overflow: visible;
}

.meter-arc::before,
.meter-arc::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border-radius: 999px 999px 0 0;
}

.meter-arc::before {
  width: 84%;
  height: 84%;
  border-top: 1px solid rgba(100, 116, 139,0.12);
}

.meter-arc::after {
  width: 54%;
  height: 54%;
  border-top: 1px solid rgba(100, 116, 139,0.08);
}

.meter-arc span {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2px;
  height: 21px;
  border-radius: 999px;
  background: rgba(100, 116, 139,0.34);
  transform: translateX(-50%) rotate(var(--tick-angle)) translateY(-148px);
  transform-origin: 50% 148px;
  box-shadow: none;
}

.meter-arc span:nth-child(2n) {
  height: 14px;
  background: rgba(100, 116, 139,0.2);
}

.meter-arc span:nth-child(1),
.meter-arc span:nth-child(11) {
  height: 28px;
  background: rgba(100, 116, 139,0.4);
}

.meter-arc span.is-center {
  width: 3px;
  height: 28px;
  background: rgba(99, 102, 241,0.78);
  box-shadow: 0 0 16px rgba(99, 102, 241,0.16);
}

.meter-side-label {
  position: absolute;
  top: 216px;
  color: rgba(100, 116, 139,0.46);
  font-size: 0.92rem;
  font-weight: 700;
}

.meter-side-label.flat {
  left: 18px;
}

.meter-side-label.sharp {
  right: 18px;
}

.meter-needle {
  position: absolute;
  left: 50%;
  bottom: 110px;
  width: 2px;
  height: 220px;
  border-radius: 999px;
  background: #6366F1;
  transform: translateX(-50%) rotate(var(--needle-angle));
  transform-origin: 50% 100%;
  transition: transform 120ms ease-out, background 160ms ease-out;
  box-shadow: 0 0 10px rgba(99, 102, 241,0.2);
}

.meter-needle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: inherit;
  transform: translateX(-50%);
}

.meter-center {
  position: absolute;
  left: 50%;
  bottom: 96px;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(100, 116, 139,0.18);
  border-radius: 50%;
  background: #fff;
  transform: translateX(-50%);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
}

.meter-center::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6366F1;
  transform: translate(-50%, -50%);
}

.meter-readout {
  position: absolute;
  top: 20px;
  left: 50%;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
}

.meter-readout strong {
  font-family: var(--font-main);
  color: #6366F1;
  font-size: clamp(2.2rem, 5.6vw, 3.45rem);
  line-height: 0.94;
  letter-spacing: 0;
}

.meter-readout span {
  font-family: var(--font-semi);
  color: rgba(100, 116, 139,0.7);
  font-size: 0.72rem;
  font-weight: 700;
}

.meter-readout #tunerOctave {
  margin-top: 2px;
  color: rgba(99, 102, 241,0.82);
  font-size: 0.68rem;
}

.tuner-meter.is-tuned {
  border-color: rgba(99, 102, 241,0.32);
  background: #fff;
}

.tuner-meter.is-tuned .meter-needle,
.tuner-meter.is-tuned .meter-center {
  background: #6366F1;
}

.tuner-meter.is-flat .meter-needle,
.tuner-meter.is-flat .meter-center {
  background: #6366F1;
}

.tuner-meter.is-sharp .meter-needle,
.tuner-meter.is-sharp .meter-center {
  background: #6366F1;
}

.tuner-info {
  display: grid;
  gap: 14px;
  align-content: start;
}

.tuner-status {
  font-family: var(--font-semi);
  min-height: 62px;
  display: grid;
  place-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #475569;
  background:
    linear-gradient(90deg, rgba(99, 102, 241,0.09), rgba(255, 255, 255, 0.78)),
    #F8FAFC;
  font-size: 1.04rem;
  font-weight: 850;
  text-align: center;
  box-shadow: 0 10px 22px rgba(15, 23, 42,0.05);
}

.tuner-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.tuner-detail-grid > div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42,0.04);
}

.tuner-detail-grid span {
  font-family: var(--font-semi);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
  text-transform: uppercase;
}

.tuner-detail-grid strong {
  font-family: var(--font-note);
  color: var(--ink);
  font-size: 1.05rem;
}

.solo-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.solo-capture-card,
.solo-fretboard-card {
  min-width: 0;
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #F8FAFC);
  box-shadow: 0 12px 28px rgba(15, 23, 42,0.07);
}

.solo-readout {
  display: grid;
  gap: 5px;
  justify-items: center;
  padding: 18px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
}

.solo-readout span,
.solo-readout em,
.solo-counter {
  font-family: var(--font-semi);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}

.solo-readout strong {
  font-family: var(--font-main);
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1;
}

.solo-readout em {
  font-style: normal;
  opacity: 0.82;
}

.solo-file-picker {
  grid-template-columns: 1fr;
}

.solo-settings .range-field {
  width: 100%;
}

.solo-sequence {
  min-height: 74px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: flex-start;
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #F8FAFC;
  font-size: 0.88rem;
}

.solo-sequence span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border-radius: 999px;
  color: var(--accent-dark);
  background: #EEF2FF;
  font-weight: 800;
}

.solo-sequence strong {
  min-width: 22px;
  min-height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--accent);
  font-size: 0.72rem;
}

.solo-sequence em {
  color: var(--gold);
  font-style: normal;
}

.solo-fretboard-wrap {
  min-width: 0;
  overflow-x: auto;
  padding: 8px 0 2px;
}

.solo-fret-numbers,
.solo-string-row {
  display: grid;
  grid-template-columns: 36px repeat(18, minmax(42px, 1fr));
  min-width: 820px;
}

.solo-fret-numbers span {
  color: var(--muted);
  font-family: var(--font-semi);
  font-size: 0.72rem;
  font-weight: 850;
  text-align: center;
}

.solo-fretboard-grid {
  display: grid;
}

.solo-string-row {
  align-items: center;
}

.solo-string-row + .solo-string-row {
  border-top: 1px solid rgba(100, 116, 139,0.1);
}

.solo-fret {
  min-height: 58px;
  display: grid;
  place-items: center;
  border-left: 2px solid #CBD5E1;
  background:
    linear-gradient(180deg, transparent calc(50% - 1px), rgba(15, 23, 42,0.3) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    #F8FAFC;
}

.solo-fret:last-child {
  border-right: 2px solid #CBD5E1;
}

.solo-fret.has-solo-note strong {
  max-width: 38px;
  min-width: 30px;
  min-height: 30px;
  display: grid;
  place-items: center;
  padding: 4px;
  border-radius: 999px;
  color: #fff;
  background: var(--accent);
  box-shadow: 0 8px 18px rgba(99, 102, 241,0.24);
  font-family: var(--font-semi);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  overflow-wrap: anywhere;
}

.note-strip {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.note-strip span {
  min-height: 30px;
  display: grid;
  place-items: center;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: rgba(100, 116, 139,0.36);
  background: transparent;
  text-align: center;
  box-shadow: none;
  transition: color 140ms ease, transform 140ms ease;
}

.note-strip strong {
  font-family: var(--font-semi);
  color: inherit;
  font-size: 0.82rem;
  font-weight: 820;
  line-height: 1.05;
}

.note-strip small {
  display: none;
  color: inherit;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.15;
}

.note-strip span.is-active {
  color: rgba(99, 102, 241,0.96);
  background: transparent;
  box-shadow: none;
  transform: translateY(-1px);
}

.note-strip span.is-active small {
  color: rgba(255, 255, 255, 0.78);
}

/* --- Detector de Tom ------------------------------------------------------- */

.detector-layout {
  display: grid;
  grid-template-columns: 220px 1fr 240px;
  gap: 20px;
  align-items: start;
  margin-top: 20px;
}

.detector-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detector-result-card {
  background: var(--accent);
  border-radius: 16px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 28px rgba(99, 102, 241,0.22);
}

.detector-result-key {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.detector-result-key strong {
  font-family: var(--font-note);
  font-size: 3.5rem;
  line-height: 1;
  color: #fff;
}

.detector-result-key span {
  font-family: var(--font-semi);
  font-size: 1rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.82);
}

.detector-result-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.detector-result-meta em {
  font-style: normal;
  font-family: var(--font-semi);
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.detector-result-confidence {
  font-family: var(--font-semi);
  font-size: 0.72rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.7);
}

.detector-current {
  background: #F8FAFC;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.detector-current span {
  font-family: var(--font-semi);
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.detector-current strong {
  font-family: var(--font-note);
  font-size: 1.6rem;
  color: var(--ink);
  line-height: 1.1;
}

.detector-current em {
  font-style: normal;
  font-family: var(--font-semi);
  font-size: 0.8rem;
  color: var(--muted);
}

.detector-current small {
  font-family: var(--font-semi);
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 4px;
}

.detector-section-label {
  font-family: var(--font-semi);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
}

.detector-histogram-wrap {
  min-width: 0;
}

.detector-histogram {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  align-items: end;
  height: 120px;
}

.kd-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
}

.kd-bar-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  cursor: default;
}

.kd-bar {
  width: 100%;
  background: var(--accent);
  border-radius: 3px 3px 0 0;
  min-height: 3px;
  transition: height 0.25s ease;
}

.kd-bar-label {
  font-family: var(--font-note);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}

.detector-candidates-wrap {
  min-width: 0;
}

.detector-candidates-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kd-no-data {
  font-family: var(--font-semi);
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
  padding: 8px 0;
}

.kd-candidate {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #F8FAFC;
  border: 1px solid var(--line);
}

.kd-candidate.is-best {
  background: var(--accent);
  border-color: var(--accent);
}

.kd-candidate.is-best .kd-candidate-name,
.kd-candidate.is-best .kd-candidate-pct,
.kd-candidate.is-best .kd-candidate-pt {
  color: #fff;
}

.kd-candidate.is-best .kd-candidate-bar-wrap {
  background: rgba(255, 255, 255, 0.25);
}

.kd-candidate.is-best .kd-candidate-bar {
  background: rgba(255, 255, 255, 0.9);
}

.kd-candidate-name {
  font-family: var(--font-note);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  grid-column: 1;
  grid-row: 1;
}

.kd-candidate-name em {
  font-style: normal;
  font-weight: 700;
  font-size: 0.75rem;
  opacity: 0.8;
}

.kd-candidate-pt {
  font-family: var(--font-semi);
  font-size: 0.7rem;
  color: var(--muted);
  grid-column: 1;
  grid-row: 2;
}

.kd-candidate.is-best .kd-candidate-pt {
  opacity: 0.75;
}

.kd-candidate-bar-wrap {
  grid-column: 2;
  grid-row: 1 / 3;
  height: 8px;
  background: rgba(0, 0, 0, 0.07);
  border-radius: 4px;
  overflow: hidden;
}

.kd-candidate-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.kd-candidate-pct {
  font-family: var(--font-semi);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  grid-column: 3;
  grid-row: 1 / 3;
}

@media (max-width: 900px) {
  .detector-layout {
    grid-template-columns: 1fr;
  }

  .detector-histogram {
    height: 90px;
  }
}

/* --------------------------------------------------------------------------- */

.chord-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.chord-head h2 {
  font-family: var(--font-main);
  margin: 0 0 5px;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.1;
}

.chord-head span,
.chord-card-head span {
  font-family: var(--font-semi);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
}

.chord-filters {
  width: min(640px, 100%);
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(150px, 0.9fr) minmax(220px, 1.2fr);
  gap: 10px;
  align-items: end;
}

.chord-search {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.chord-search input {
  min-width: 0;
}

.chord-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(280px, 1.15fr);
  gap: 16px;
  align-items: start;
}

.scale-library-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

.chord-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 8px;
  max-height: 370px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-color: var(--accent) #1E293B;
}

.chord-list-button,
.scale-tone-button {
  min-height: 62px;
  display: grid;
  gap: 3px;
  align-content: center;
  justify-items: start;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--accent-dark);
  background: #F8FAFC;
  cursor: pointer;
}

.chord-list-button:hover,
.chord-list-button.is-active,
.scale-tone-button:hover,
.scale-tone-button.is-active {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}

.chord-list-button strong,
.scale-tone-button strong {
  font-family: var(--font-note);
  font-size: 1.05rem;
  line-height: 1.05;
}

.chord-list-button span,
.scale-tone-button span {
  font-family: var(--font-semi);
  font-size: 0.72rem;
  font-weight: 800;
  text-align: left;
}

.scale-tone-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  max-height: none;
}

.scale-viewer {
  min-width: 0;
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #F8FAFC);
  box-shadow: 0 16px 34px rgba(15, 23, 42,0.08);
}

.scale-viewer-head span {
  font-family: var(--font-semi);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

#closeScaleLibraryView {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #0F172A;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  min-height: 34px;
}

#closeScaleLibraryView:hover {
  background: rgba(0, 0, 0, 0.08);
}

.scale-viewer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.scale-viewer-head h3 {
  margin: 3px 0 0;
  color: var(--accent);
  font-family: var(--font-main);
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 0.95;
}


.scale-library-panel:not(.is-scale-viewing) .scale-viewer {
  display: none;
}

.scale-library-panel.is-scale-viewing .scale-tone-list {
  display: flex;
}

.chord-card {
  min-height: 440px;
  display: grid;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #F8FAFC);
  box-shadow: 0 16px 34px rgba(15, 23, 42,0.08);
}

.chord-card-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.chord-card-meta {
  display: grid;
  justify-items: end;
  gap: 5px;
}

.chord-card-head strong {
  display: block;
  font-family: var(--font-note);
  color: var(--accent);
  font-size: clamp(2.6rem, 7vw, 4.5rem);
  line-height: 0.9;
}

.chord-card-meta span {
  max-width: 230px;
  color: #A5B4FC;
  font-family: var(--font-semi);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: right;
}

.chord-card-head em {
  font-family: var(--font-semi);
  color: var(--accent-dark);
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 850;
  text-align: right;
}

.chord-diagram {
  width: min(340px, 100%);
  justify-self: center;
  display: grid;
  gap: 16px;
}

.chord-strings {
  position: relative;
  height: 22px;
}

.chord-strings span,
.chord-open,
.chord-muted {
  position: absolute;
  left: var(--string-pos);
  width: 28px;
  transform: translateX(-50%);
  color: var(--muted);
  font-family: var(--font-semi);
  font-size: 0.82rem;
  font-weight: 900;
  text-align: center;
}

.chord-fretboard {
  position: relative;
  height: 330px;
  border-top: 3px solid var(--line);
  background:
    linear-gradient(
      90deg,
      transparent calc(8% - 1px),
      #CBD5E1 calc(8% - 1px) calc(8% + 1px),
      transparent calc(8% + 1px) calc(36% - 1px),
      #CBD5E1 calc(36% - 1px) calc(36% + 1px),
      transparent calc(36% + 1px) calc(64% - 1px),
      #CBD5E1 calc(64% - 1px) calc(64% + 1px),
      transparent calc(64% + 1px) calc(92% - 1px),
      #CBD5E1 calc(92% - 1px) calc(92% + 1px),
      transparent calc(92% + 1px)
    );
}

.chord-fret-line {
  display: block;
  position: absolute;
  left: 8%;
  right: 8%;
  top: var(--line-pos);
  height: 2px;
  background: #E2E8F0;
  pointer-events: none;
}

.chord-fret-line:first-child {
  display: none;
}

.chord-fretboard.has-nut {
  border-top-color: var(--ink);
  border-top-width: 8px;
}

.chord-open,
.chord-muted {
  top: -24px;
  text-transform: uppercase;
}

.chord-dot {
  position: absolute;
  z-index: 2;
  left: var(--string-pos);
  top: calc((var(--fret) - 0.5) * 20%);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  color: #fff;
  background: var(--accent);
  box-shadow: 0 8px 18px rgba(99, 102, 241,0.26);
  font-family: var(--font-semi);
  font-size: 0.9rem;
  font-weight: 900;
}

.chord-barre {
  position: absolute;
  z-index: 1;
  left: 8%;
  right: 8%;
  top: calc((var(--fret) - 0.5) * 20%);
  height: 28px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(99, 102, 241,0.22);
}

.chord-start-fret {
  position: absolute;
  top: 7px;
  left: -42px;
  color: var(--muted);
  font-family: var(--font-semi);
  font-size: 0.78rem;
  font-weight: 900;
}

.chord-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 18px;
}

.chord-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42,0.46);
  backdrop-filter: blur(8px);
  cursor: pointer;
}

.chord-modal-card {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  max-height: min(90vh, 680px);
  overflow: auto;
}

.modal-close-btn {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  padding: 2px 4px;
  opacity: 0.45;
  z-index: 2;
}

.modal-close-btn:hover {
  opacity: 1;
}

.scale-modal {
  position: fixed;
  inset: 0;
  z-index: 410;
  display: grid;
  place-items: center;
  padding: 18px;
}

.scale-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42,0.56);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.scale-modal-card {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  max-height: none;
  display: grid;
  gap: 16px;
  overflow: visible;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  background: #F8FAFC;
  box-shadow: 0 28px 70px rgba(15, 23, 42,0.32);
}

.scale-modal-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.scale-modal-card header span,
.scale-modal-info strong {
  color: var(--accent-dark);
  font-family: var(--font-semi);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.scale-modal-card h2,
.scale-modal-card p {
  margin: 0;
}

.scale-modal-card h2 {
  font-family: var(--font-main);
  font-size: clamp(1.6rem, 4vw, 2.7rem);
}

.scale-modal-card p,
.scale-modal-info {
  color: var(--muted);
  font-family: var(--font-semi);
  font-weight: 750;
}

.scale-modal-info {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.scale-modal-info em {
  color: var(--ink);
  font-style: normal;
}

.scale-fretboard-wrap {
  padding: 8px 0 2px;
}

/* -- Outer layout: open strings panel + nut + fretboard -- */
.scale-fretboard-outer {
  display: flex;
  align-items: stretch;
}

.scale-open-panel {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.scale-open-header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  font: 750 0.62rem / 1 var(--font-semi);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 10px;
  white-space: nowrap;
}

.scale-open-string-row {
  flex: 1;
  min-height: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 10px;
  border-top: 1px solid var(--line);
}

.scale-open-string-row:first-of-type { border-top: 0; }

.scale-open-string-label {
  font: 800 0.65rem / 1 var(--font-semi);
  color: var(--muted);
}

.scale-open-note {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scale-open-note.is-scale-note strong {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #818CF8;
  box-shadow: 0 6px 16px rgba(99, 102, 241,0.28);
  font: 900 0.8rem / 1 var(--font-semi);
}

.scale-open-note.is-root-note strong {
  background: #6366F1;
  box-shadow: 0 6px 16px rgba(99, 102, 241,0.32);
}

.scale-nut {
  flex-shrink: 0;
  width: 6px;
  margin-top: 22px; /* offset header height */
  background: linear-gradient(to bottom, #64748B, #475569);
  border-radius: 2px;
}

.scale-fretboard-inner {
  overflow-x: auto;
  flex: 1;
  min-width: 0;
}

.scale-fret-numbers,
.scale-string-row {
  display: grid;
  grid-template-columns: 42px repeat(12, minmax(58px, 1fr));
  min-width: 752px;
}

.scale-fret-numbers span {
  color: var(--muted);
  font: 850 0.78rem / 1 var(--font-semi);
  text-align: center;
}

.scale-fretboard-grid {
  display: grid;
  min-width: 752px;
  border: 1px solid var(--line);
  border-radius: 0 8px 8px 0;
  overflow: hidden;
  background: #fff;
}

.scale-string-row {
  min-height: 78px;
  border-top: 1px solid var(--line);
}

.scale-string-row:first-child {
  border-top: 0;
}

.scale-string-label {
  display: grid;
  place-items: center;
  color: var(--accent-dark);
  background: #EEF2FF;
  font-family: var(--font-semi);
  font-weight: 900;
}

.scale-fret {
  position: relative;
  display: grid;
  place-items: center;
  border-left: 2px solid #CBD5E1;
  background: #F8FAFC;
}

.scale-fret small {
  display: none;
}

.scale-note-label {
  display: none;
}

.scale-fret.is-scale-note strong {
  position: relative;
  z-index: 2;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #818CF8;
  box-shadow: 0 8px 18px rgba(99, 102, 241,0.24);
  font-family: var(--font-semi);
  font-size: 0.82rem;
}

.scale-fret.is-root-note strong {
  background: #6366F1;
  box-shadow: 0 8px 18px rgba(99, 102, 241,0.28);
}

.scale-mobile-notes {
  display: none;
}

.scale-mobile-fretboard {
  display: none;
}

.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 18px;
}

.confirm-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42,0.5);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.confirm-modal-card {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252,0.94));
  box-shadow: 0 24px 60px rgba(15, 23, 42,0.28);
}

.confirm-modal-copy {
  display: grid;
  gap: 8px;
}

.confirm-modal-copy h2,
.confirm-modal-copy p {
  margin: 0;
}

.confirm-modal-preview {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #F8FAFC;
}

.confirm-modal-chip {
  width: fit-content;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--accent-dark);
  background: #EEF2FF;
  font-family: var(--font-semi);
  font-size: 0.78rem;
  font-weight: 900;
}

.confirm-modal-preview strong {
  font-family: var(--font-main);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.15;
}

.confirm-modal-detail {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.confirm-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.confirm-modal-danger {
  border-color: #DC2626;
  background: #DC2626;
}

.confirm-modal-danger:hover {
  border-color: #B91C1C;
  background: #B91C1C;
}

.is-modal-open {
  overflow: hidden;
}

.lyrics-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  align-items: end;
}

.lyrics-tools .select-field {
  width: 340px;
  min-width: 260px;
  flex: 0 0 340px;
}

.lyrics-tools .select-field select {
  width: 100%;
  min-width: 260px;
}

.range-field {
  min-width: 170px;
  display: grid;
  gap: 6px;
}

.range-field span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.range-field strong {
  color: var(--accent-dark);
}

.range-field input {
  width: 100%;
  accent-color: var(--accent);
}

.primary-button.is-running {
  border-color: #DC2626;
  background: #DC2626;
}

.secondary-button.is-active {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}

.lyrics-view {
  --lyrics-font-size: 18px;
  display: grid;
  gap: 14px;
  max-height: min(88vh, 1200px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #F8FAFC;
  scroll-behavior: auto;
  scrollbar-color: var(--accent) #1E293B;
}

.lyrics-song {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #F8FAFC;
}

.lyrics-song header {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 0;
}

.lyrics-chord-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 180;
  width: 210px;
  overflow-y: auto;
  background: #F8FAFC;
  border-left: 1px solid var(--line);
  box-shadow: -8px 0 32px rgba(15, 23, 42,0.1);
  padding: 48px 12px 24px;
  display: grid;
  align-content: start;
  gap: 0;
}

.lyrics-chord-panel-title {
  font-family: var(--font-semi);
  font-size: 0.78rem;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.lyrics-chord-panel-content {
  display: grid;
  gap: 18px;
}

.chord-mini-item {
  display: grid;
  gap: 4px;
}

.chord-mini-name {
  font-family: var(--font-semi);
  font-size: 0.88rem;
  font-weight: 900;
  color: var(--ink);
  text-align: center;
}

.chord-mini-empty {
  font-family: var(--font-semi);
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 700;
  text-align: center;
  display: block;
}

.chord-mini-missing {
  opacity: 0.55;
}

.chord-mini .chord-strings {
  height: 9px;
}

.chord-mini .chord-strings span,
.chord-mini .chord-open,
.chord-mini .chord-muted {
  width: 16px;
  font-size: 0.48rem;
  font-weight: 800;
}

.chord-mini .chord-open,
.chord-mini .chord-muted {
  top: 86px;
}

.chord-mini .chord-fretboard {
  height: 84px;
  border-top-width: 1px;
  background:
    linear-gradient(
      90deg,
      transparent calc(8% - 0.5px),
      #9CA3AF calc(8% - 0.5px) calc(8% + 0.5px),
      transparent calc(8% + 0.5px) calc(36% - 0.5px),
      #9CA3AF calc(36% - 0.5px) calc(36% + 0.5px),
      transparent calc(36% + 0.5px) calc(64% - 0.5px),
      #9CA3AF calc(64% - 0.5px) calc(64% + 0.5px),
      transparent calc(64% + 0.5px) calc(92% - 0.5px),
      #9CA3AF calc(92% - 0.5px) calc(92% + 0.5px),
      transparent calc(92% + 0.5px)
    );
}

.chord-mini .chord-fret-line {
  height: 1px;
  background: #9CA3AF;
}

.chord-mini .chord-fret-line:first-child {
  display: none;
}

.chord-mini .chord-fretboard.has-nut {
  border-top-width: 2px;
}

.chord-mini .chord-dot {
  width: 13px;
  height: 13px;
  font-size: 0.42rem;
  box-shadow: none;
  background: #111827;
}

.chord-mini .chord-barre {
  height: 7px;
  background: rgba(17, 24, 39, 0.82);
}

.chord-mini .chord-start-fret {
  font-size: 0.5rem;
  left: -16px;
  top: 4px;
}

.lyrics-song-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
}

.lyrics-transpose-control {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lyrics-transpose-btn {
  font-family: var(--font-semi);
  min-height: 30px;
  min-width: 28px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 850;
  cursor: pointer;
  line-height: 1;
}

.lyrics-transpose-btn:hover {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}

.lyrics-transpose-label {
  font-family: var(--font-semi);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--muted);
  min-width: 72px;
  text-align: center;
}

.lyrics-song.is-expanded header {
  margin-bottom: 14px;
}

.lyrics-song h3 {
  font-family: var(--font-main);
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.2;
}

.lyrics-song p {
  font-family: var(--font-semi);
  margin: 3px 0 0;
  color: var(--muted);
  font-weight: 700;
}

.lyrics-tone-details {
  display: grid;
  gap: 3px;
  margin-top: 7px;
  color: var(--muted);
  font: 750 0.82rem / 1.35 var(--font-body);
}

.lyrics-tone-details span {
  display: block;
}

.lyrics-tone-details strong {
  color: var(--ink);
  font-family: var(--font-semi);
}

.lyrics-snippet-preview {
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--muted);
  font-style: italic;
  line-height: 1.4;
}

.lyrics-scale-button {
  width: fit-content;
  min-height: 34px;
  margin-top: 4px;
  padding: 7px 11px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: #fff;
  background: var(--accent);
  font-family: var(--font-semi);
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.lyrics-scale-button:hover {
  background: var(--accent-dark);
}

.lyrics-expand-button {
  font-family: var(--font-semi);
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--accent-dark);
  background: #fff;
  font-size: 0.82rem;
  font-weight: 850;
  cursor: pointer;
}

.lyrics-expand-button:hover,
.lyrics-expand-button[aria-expanded="true"] {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}

.fullscreen-video-wrap {
  position: fixed;
  width: 280px;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255,255,255,0.08);
  z-index: 200;
  user-select: none;
}

.fullscreen-video-wrap iframe {
  width: 100%;
  height: 158px;
  border: 0;
  display: block;
}

.video-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  background: rgba(0, 0, 0, 0.72);
  cursor: grab;
  color: rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: background 150ms ease, color 150ms ease;
}

.video-drag-handle:hover {
  background: rgba(99, 102, 241,0.22);
  color: rgba(255, 255, 255, 0.85);
}

.video-drag-handle:active,
.fullscreen-video-wrap.is-dragging .video-drag-handle {
  cursor: grabbing;
  background: rgba(99, 102, 241,0.32);
}

.fullscreen-video-invalid {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.75rem;
  font-family: var(--font-semi);
  background: rgba(0, 0, 0, 0.7);
  text-align: center;
  padding: 8px;
}


.lyrics-missing {
  font-family: var(--font-semi);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: right;
}

.lyrics-song pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink);
  font: 600 var(--lyrics-font-size) / 1.65 var(--font-body);
}

.lyrics-chord {
  color: #6366F1;
  font-weight: 900;
  text-shadow: 0 0 12px rgba(99, 102, 241,0.18);
}

.lyrics-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: stretch;
  padding: 0;
}

.lyrics-fullscreen-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42,0.58);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.lyrics-fullscreen-card {
  position: relative;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  padding: clamp(10px, 1.6vw, 16px);
  border: 0;
  border-radius: 0;
  background: #F8FAFC;
  box-shadow: none;
}

.modal-close-btn.lyrics-fullscreen-close {
  top: 6px;
  right: 8px;
  width: 34px;
  height: 34px;
  border: 0;
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
  opacity: 0.5;
  z-index: 5;
}

.modal-close-btn.lyrics-fullscreen-close:hover {
  opacity: 1;
}

.lyrics-fullscreen-body {
  display: grid;
  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  gap: 22px;
  min-height: 0;
  overflow: hidden;
}

.lyrics-fullscreen-player-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
}

.lyrics-fullscreen-lyrics-col {
  min-height: 0;
  overflow: hidden;
  border-left: 1px solid var(--line);
  padding-left: 22px;
}

.lyrics-fullscreen-body.player-collapsed {
  grid-template-columns: 1fr;
}

.lyrics-fullscreen-body.player-collapsed .lyrics-fullscreen-player-col {
  display: none;
}

.lyrics-fullscreen-body.player-collapsed .lyrics-fullscreen-lyrics-col {
  border-left: none;
  padding-left: clamp(10px, 1.2vw, 18px);
  padding-right: clamp(10px, 1.2vw, 18px);
}

@media (max-width: 900px) {
  .lyrics-fullscreen-body {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  .lyrics-fullscreen-player-col {
    flex: 0 0 auto;
    overflow: visible;
    padding-right: 0;
  }

  .lyrics-fullscreen-lyrics-col {
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
    border-left: none;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 16px;
  }
}

.lyrics-fullscreen-card header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.lyrics-fullscreen-card h2 {
  font-family: var(--font-main);
  margin: 2px 0 0;
  font-size: clamp(1.12rem, 2vw, 1.55rem);
  line-height: 1.05;
}

.lyrics-fullscreen-card header p,
.lyrics-fullscreen-card header span,
.lyrics-fullscreen-tools span {
  font-family: var(--font-semi);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.lyrics-fullscreen-card p {
  margin: 4px 0 0;
}

.lyrics-fullscreen-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  align-items: end;
}


.lyrics-fullscreen-tools {
  display: grid;
  justify-content: flex-start;
  gap: 6px;
  align-items: end;
}

.lyrics-fullscreen-tool-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px;
  align-items: end;
}

.lyrics-fullscreen-speed {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 6px;
  justify-content: flex-start;
  width: 100%;
}

.lyrics-fullscreen-speed .range-field {
  flex: 1 1 240px;
  min-width: 180px;
  margin-right: 2px;
}

.lyrics-fullscreen-tool-row {
  flex-wrap: wrap;
}

.lyrics-pages-row {
  justify-content: flex-start;
  margin-right: 0;
  gap: 4px;
}

#fullscreenToggleLyricsPages {
  width: auto;
  min-width: 86px;
  padding: 4px 8px;
  font-size: 0.68rem;
  white-space: nowrap;
}

#fullscreenScaleButton {
  white-space: nowrap;
  min-width: 132px;
  flex: 0 0 auto;
}

.lyrics-fullscreen-tools .range-field {
  min-width: 130px;
}

.lyrics-fullscreen-tools .range-field span {
  font-size: 0.68rem;
}

.lyrics-fullscreen-tools button {
  height: 32px;
  min-height: 32px;
  padding: 6px 9px;
  font-size: 0.74rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#lyricsFullscreenToneDetails .lyrics-scale-button {
  display: none;
}

.lyrics-fullscreen-card pre {
  --lyrics-fullscreen-font-size: var(--lyrics-font-size);
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink);
  font: 600 var(--lyrics-fullscreen-font-size) / 1.48 var(--font-body);
  scrollbar-color: var(--accent) #1E293B;
}

.lyrics-fullscreen-card pre .lyrics-chord {
  color: #6366F1;
  font-weight: 900;
  text-shadow: 0 0 12px rgba(99, 102, 241,0.18);
  cursor: help;
  border-radius: 4px;
  transition: background 0.16s ease, color 0.16s ease;
}

.lyrics-fullscreen-card pre .lyrics-chord:hover {
  background: rgba(99, 102, 241, 0.12);
  color: #4F46E5;
}

.lyrics-chord-hover-preview {
  position: fixed;
  z-index: 260;
  width: 92px;
  padding: 8px 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.22);
  pointer-events: none;
}

.lyrics-chord-hover-preview .chord-mini-name {
  margin-bottom: 4px;
}

body[data-theme="dark"] .lyrics-chord-hover-preview {
  background: #111827;
  border-color: rgba(148, 163, 184, 0.26);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}

@media (max-width: 900px) {
  .lyrics-fullscreen-card pre {
    height: auto;
  }
}

@media (min-width: 900px) {
  .lyrics-fullscreen-card pre[data-columns="2"],
  .lyrics-view[data-columns="2"] .lyrics-song pre {
    column-count: 2;
    column-gap: 26px;
    column-rule: 1px solid var(--line);
  }

  .lyrics-fullscreen-card pre[data-columns="3"],
  .lyrics-view[data-columns="3"] .lyrics-song pre {
    column-count: 3;
    column-gap: 24px;
    column-rule: 1px solid var(--line);
  }

  .lyrics-fullscreen-card pre[data-columns="4"],
  .lyrics-view[data-columns="4"] .lyrics-song pre {
    column-count: 4;
    column-gap: 20px;
    column-rule: 1px solid var(--line);
  }

  .lyrics-fullscreen-card pre[data-columns="5"],
  .lyrics-view[data-columns="5"] .lyrics-song pre {
    column-count: 5;
    column-gap: 18px;
    column-rule: 1px solid var(--line);
  }

  .lyrics-fullscreen-card pre[data-columns="6"],
  .lyrics-view[data-columns="6"] .lyrics-song pre {
    column-count: 6;
    column-gap: 16px;
    column-rule: 1px solid var(--line);
  }

  .lyrics-fullscreen-card pre[data-columns="2"],
  .lyrics-fullscreen-card pre[data-columns="3"],
  .lyrics-fullscreen-card pre[data-columns="4"],
  .lyrics-fullscreen-card pre[data-columns="5"],
  .lyrics-fullscreen-card pre[data-columns="6"] {
    column-rule: 0;
  }

  .lyrics-fullscreen-card pre[data-columns="4"] {
    column-gap: 26px;
  }

  .lyrics-fullscreen-card pre[data-columns="5"] {
    column-gap: 24px;
  }

  .lyrics-fullscreen-card pre[data-columns="6"] {
    column-gap: 22px;
  }
}

.results-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin: 18px 0 14px;
}

.results-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
}

.results-head strong {
  display: block;
  font-size: 1.15rem;
}

.results-head span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.92rem;
}

.view-toggle {
  display: flex;
  gap: 8px;
}

.toggle-button {
  min-width: 72px;
  height: 38px;
  padding: 0 10px;
  font-size: 0.82rem;
  font-weight: 850;
}

.song-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.song-carousel {
  position: relative;
  min-height: 390px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  gap: 14px;
  align-items: center;
  overflow: hidden;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #0F172A 0%, #4F46E5 46%, #1E293B 100%);
  box-shadow: 0 18px 46px rgba(15, 23, 42,0.16);
}

.song-carousel::before,
.song-carousel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.song-carousel::before {
  background:
    linear-gradient(118deg, transparent 0 18%, rgba(165, 180, 252,0.34) 18% 24%, transparent 24% 100%),
    linear-gradient(38deg, transparent 0 56%, rgba(255, 255, 255, 0.18) 56% 63%, transparent 63% 100%),
    linear-gradient(152deg, transparent 0 68%, rgba(15, 23, 42,0.42) 68% 78%, transparent 78% 100%);
  mix-blend-mode: screen;
}

.song-carousel::after {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 34px);
  opacity: 0.44;
  transform: rotate(-3deg) scale(1.08);
}

.carousel-backdrop {
  position: absolute;
  inset: -28px;
  z-index: 1;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.18);
  font-family: var(--font-main);
  font-size: 7rem;
  line-height: 0.9;
  text-align: center;
  filter: blur(8px);
  transform: rotate(-5deg) scale(1.05);
  pointer-events: none;
}

.carousel-track,
.carousel-nav,
.carousel-status {
  position: relative;
  z-index: 2;
}

.carousel-track {
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, 0.34fr) minmax(280px, 1fr) minmax(120px, 0.34fr);
  gap: 14px;
  align-items: center;
  min-height: 320px;
  perspective: 1200px;
}

.carousel-card {
  position: relative;
  z-index: 4;
  min-height: 300px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.36fr);
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink);
  box-shadow: 0 22px 54px rgba(15, 23, 42,0.28);
  backdrop-filter: blur(18px) saturate(1.12);
  animation: carouselCardIn 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes carouselCardIn {
  from {
    opacity: 0.35;
    filter: blur(6px);
    transform: translateX(18px) translateY(10px) scale(0.94);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0) translateY(0) scale(1);
  }
}

.carousel-card-main {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 12px;
}

.carousel-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.carousel-kicker span,
.carousel-owner {
  font-family: var(--font-semi);
  width: fit-content;
  padding: 6px 9px;
  border-radius: 999px;
  color: #1E293B;
  background: #EEF2FF;
  font-size: 0.78rem;
  font-weight: 850;
}

.carousel-card h2 {
  font-family: var(--font-main);
  margin: 0;
  font-size: 2.65rem;
  line-height: 1.02;
  overflow-wrap: anywhere;
}

.carousel-artist {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-semi);
  font-size: 1rem;
  font-weight: 800;
}

.carousel-excerpt {
  margin: 0;
  color: #334155;
  font-size: 1.02rem;
  line-height: 1.48;
}

.carousel-card-side {
  display: grid;
  align-content: center;
  gap: 10px;
}

.carousel-card-side > * {
  width: 100%;
}

.carousel-card-side .song-check {
  width: 100%;
}

.carousel-card-side .song-select-button {
  width: 100%;
}

.carousel-nav {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.carousel-nav:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.carousel-peek {
  position: relative;
  z-index: 2;
  min-height: 160px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.1);
  text-align: left;
  cursor: pointer;
  backdrop-filter: blur(8px);
  opacity: 0.76;
  transition: opacity 180ms ease, transform 180ms ease, background 180ms ease;
}

.carousel-peek:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.carousel-ghost {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: min(34%, 280px);
  min-height: 210px;
  display: grid;
  align-content: center;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.44);
  background: rgba(255, 255, 255, 0.09);
  text-align: left;
  cursor: pointer;
  opacity: 0.42;
  filter: blur(1px);
  transform: translateY(-50%) scale(0.86);
  backdrop-filter: blur(10px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.carousel-ghost-left {
  left: 8%;
}

.carousel-ghost-right {
  right: 8%;
}

.carousel-ghost strong {
  font-family: var(--font-main);
  font-size: 1.05rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.carousel-peek span {
  color: rgba(255, 255, 255, 0.58);
  font-family: var(--font-semi);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.carousel-peek strong {
  font-family: var(--font-main);
  font-size: 1rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.carousel-status {
  position: absolute;
  right: 18px;
  bottom: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #1E293B;
  background: rgba(255, 255, 255, 0.78);
  font-family: var(--font-semi);
  font-size: 0.78rem;
  font-weight: 850;
}

.song-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 10px 24px rgba(15, 23, 42,0.08);
}

.song-card-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.song-card-side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  align-items: stretch;
}

.song-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  min-height: 34px;
  padding: 5px 9px 5px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--accent-dark);
  background: #F8FAFC;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

.song-check.compact {
  min-width: 118px;
  font-size: 0.78rem;
}

.song-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fake-check {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border: 2px solid var(--accent);
  border-radius: 5px;
  background: #fff;
}

.song-check input:checked + .fake-check {
  background: var(--accent);
}

.song-check input:checked + .fake-check::after {
  content: "";
  width: 9px;
  height: 5px;
  border: 2px solid #fff;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg);
}

.song-check:has(input:focus-visible) {
  outline: 3px solid rgba(99, 102, 241,0.25);
  outline-offset: 2px;
}

.song-select-button {
  font-family: var(--font-semi);
  width: 100%;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #475569;
  background: transparent;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.song-select-button.is-selected {
  color: #DC2626;
  background: #EEF2FF;
}

.song-select-button:focus-visible {
  outline: 3px solid rgba(99, 102, 241,0.25);
  outline-offset: 2px;
}

.song-title {
  font-family: var(--font-main);
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.25;
}

.song-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.song-artist {
  font-family: var(--font-semi);
  color: var(--muted);
  font-weight: 700;
}

.song-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tag {
  font-family: var(--font-semi);
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--accent-dark);
  border: 1px solid rgba(99, 102, 241,0.18);
  background: #EEF2FF;
  box-shadow: var(--neon-glow-soft);
  font-size: 0.78rem;
  font-weight: 800;
}

.tag.key {
  color: #475569;
  background: transparent;
}

.tag.category {
  color: #475569;
  background: transparent;
}

.excerpt {
  flex: 1;
  margin: 0;
  color: #334155;
  line-height: 1.45;
}

.song-card-side .song-edit-button,
.song-card-side .favorite-button,
.song-card-side .song-select-button,
.song-card-side .song-link,
.song-card-side .song-link:visited,
.song-card-side .song-link:hover,
.song-card-side .song-link:active {
  width: 100%;
  text-align: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 9px;
  font-size: 0.78rem;
}


.song-link,
.song-link:visited,
.song-link:hover,
.song-link:active {
  font-family: var(--font-semi);
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}

.song-link:hover {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}

.song-link[aria-disabled="true"] {
  color: var(--muted);
  border-color: var(--line);
  background: var(--soft);
  pointer-events: none;
}

.song-edit-button,
.table-action {
  font-family: var(--font-semi);
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--accent-dark);
  background: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.song-edit-button:hover,
.table-action:hover {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}

.favorite-button {
  font-family: var(--font-semi);
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid rgba(99, 102, 241,0.28);
  border-radius: 8px;
  color: #818CF8;
  background: #F8FAFC;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.favorite-button:hover {
  border-color: #A5B4FC;
  color: #818CF8;
  background: #EEF2FF;
}

.favorite-button.is-favorite {
  border-color: #A5B4FC;
  color: #818CF8;
  background: #EEF2FF;
}

.favorite-button-star {
  font-size: 0.95rem;
  line-height: 1;
  color: #FBBF24;
}

.favorite-button-table {
  min-width: 108px;
}

.favorite-badge {
  flex: 0 0 auto;
  color: #A5B4FC;
  font-size: 1rem;
  line-height: 1.2;
}

.song-delete-button {
  color: #DC2626;
  border-color: rgba(161, 51, 51, 0.2);
  background: #FEF2F2;
}

.song-delete-inline {
  color: #DC2626;
  border-color: rgba(161, 51, 51, 0.22);
  background: #FEF2F2;
}

.song-delete-button:hover {
  border-color: #DC2626;
  background: #DC2626;
}

.song-delete-inline:hover {
  border-color: #DC2626;
  color: #fff;
  background: #DC2626;
}

.table-action {
  min-height: 30px;
  min-width: 68px;
  padding: 5px 8px;
  font-size: 0.78rem;
}

.table-link-button,
.table-link-button:visited,
.table-link-button:hover,
.table-link-button:active {
  font-family: var(--font-semi);
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}

.table-link-button:hover {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}

.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42,0.08);
}

table {
  width: 100%;
  min-width: 1240px;
  border-collapse: collapse;
}

th,
td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  font-family: var(--font-semi);
  position: sticky;
  top: 0;
  color: var(--muted);
  background: #F8FAFC;
  font-size: 0.78rem;
  text-transform: uppercase;
}

td {
  line-height: 1.4;
}

.table-link {
  color: var(--accent-dark);
  font-weight: 800;
}


.source-option:hover,
.saved-name:hover,
.saved-load:hover,
.saved-lyrics:hover,
.saved-delete:hover,
.share-person:hover,
.setlist-item:hover,
.preview-item:hover,
.lyrics-song:hover,
.song-card:hover,
.song-check:hover,
.chord-list-button:hover,
.table-action:hover,
.song-edit-button:hover,
tr:hover {
  border-color: rgba(99, 102, 241,0.35);
  color: var(--list-hover-text);
  background: var(--list-hover);
}

.source-option:has(input:checked),
.chord-list-button.is-active,
.toggle-button.is-active,
.secondary-button.is-active {
  border-color: var(--list-hover-strong);
  color: #ffffff;
  background: var(--list-hover-strong);
}

.source-option:has(input:checked) span,
.chord-list-button.is-active span,
.chord-list-button.is-active strong {
  color: #ffffff;
}

.empty-state {
  padding: 34px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.72);
  text-align: center;
}

.vincular-audio-modal {
  position: fixed;
  inset: 0;
  z-index: 410;
  display: grid;
  place-items: center;
  padding: 18px;
}

.vincular-audio-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42,0.5);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.vincular-audio-modal-card {
  position: relative;
  z-index: 1;
  width: min(460px, 100%);
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252,0.94));
  box-shadow: var(--shadow);
}

.vincular-audio-modal-card h2 {
  margin: 0;
}

#vincularAudioForm {
  display: grid;
  gap: 14px;
}

.vincular-audio-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.85rem;
  line-height: 1.4;
}

.vincular-audio-checkbox input {
  margin-top: 3px;
}

.vincular-audio-error {
  color: #DC2626;
  font-size: 0.82rem;
  margin: 0;
}

.vincular-audio-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.didactic-audio-player {
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(165deg, #ffffff, #F8FAFC);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
}

.audio-player-offline-message {
  margin: 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(99, 102, 241,0.1);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.audio-player-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 4px;
}

.audio-player-empty p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.audio-player-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.audio-player-transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.audio-player-btn {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  padding: 10px 16px;
  font-family: var(--font-semi);
  font-weight: 800;
  font-size: 0.86rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.audio-player-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
}

.audio-player-play {
  min-width: 64px;
  height: 64px;
  width: 64px;
  border-radius: 50%;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-size: 0.74rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.audio-player-remove {
  width: 100%;
  justify-content: center;
  display: flex;
  color: #DC2626;
  border-color: #FCA5A5;
}

.audio-player-times {
  font-family: var(--font-semi);
  font-weight: 800;
  font-size: 1rem;
  white-space: nowrap;
  text-align: center;
  color: var(--ink);
}

.audio-player-detected-key {
  margin: 0;
  text-align: center;
  font-family: var(--font-semi);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--accent-dark);
}

.audio-player-volume {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 700;
}

.audio-player-volume input[type="range"] {
  flex: 1;
}

.audio-player-progress {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  accent-color: var(--accent);
}

.audio-player-ab-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.audio-player-ab-time {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 700;
}

#audioPlayerToggleLoop[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.audio-player-speed-pitch {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.audio-player-speed-control {
  display: grid;
  gap: 6px;
  min-width: min(100%, 260px);
}

.audio-player-speed-control > span {
  color: var(--muted);
  font-family: var(--font-semi);
  font-size: 0.78rem;
  font-weight: 800;
}

.audio-player-speed-row {
  display: grid;
  grid-template-columns: 42px minmax(96px, 1fr) 42px;
  gap: 8px;
  align-items: center;
}

.audio-player-speed-row select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-weight: 800;
  text-align: center;
}

.audio-player-step {
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  font-size: 1.15rem;
  font-weight: 900;
}

.audio-player-sections h3 {
  margin: 6px 0 8px;
  font-size: 0.9rem;
}

.audio-player-sections-list {
  display: grid;
  gap: 8px;
}

.audio-player-section-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #F8FAFC;
}

.audio-player-section-item strong {
  font-size: 0.88rem;
}

.audio-player-section-meta {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.audio-player-section-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.audio-library-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.audio-library-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #F8FAFC;
}

.audio-library-item-meta {
  display: grid;
  gap: 4px;
}

.audio-library-item-meta strong {
  font-size: 0.95rem;
}

.audio-library-item-meta span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.audio-library-badge {
  padding: 4px 10px;
  border-radius: 999px;
  background: #EEF2FF;
  color: var(--accent-dark);
  font-size: 0.72rem;
  font-weight: 900;
}

.audio-library-badge.is-empty {
  background: #F1F5F9;
  color: var(--muted);
}

.is-hidden {
  display: none !important;
}

@media (max-width: 900px) {
  .auth-copy h1 {
    max-width: none;
  }

  .hero {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .hero-copy {
    gap: 12px;
  }

  .toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .text-button {
    width: auto;
  }

  .search-field {
    grid-column: 1 / -1;
  }

  .setlist-item {
    grid-template-columns: auto 38px minmax(0, 1fr);
  }

  .setlist-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .save-repertoire {
    grid-template-columns: 1fr;
  }

  .share-head,
  .share-person {
    display: grid;
  }

  .share-form,
  .share-grid {
    grid-template-columns: 1fr;
  }

  .music-form {
    grid-template-columns: 1fr 1fr;
  }

  .music-import-actions {
    grid-template-columns: 1fr;
  }

  .saved-layout {
    grid-template-columns: 1fr;
  }

  .indicators-grid {
    grid-template-columns: 1fr;
  }

  .indicator-card:first-child {
    grid-row: auto;
  }

  .indicator-card-wide {
    grid-column: auto;
  }

  .indicator-chart-wrap {
    grid-template-columns: 1fr;
  }

  .indicator-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lyrics-head {
    display: grid;
  }

  .tuner-head,
  .tuner-layout,
  .solo-layout {
    display: grid;
    grid-template-columns: 1fr;
  }

  .tuner-actions {
    justify-items: stretch;
  }

  .chord-head,
  .chord-layout,
  .scale-library-layout {
    display: grid;
    grid-template-columns: 1fr;
  }

  .chord-filters,
  .chord-search {
    width: 100%;
  }

  .chord-filters {
    grid-template-columns: 1fr 1fr;
  }

  .chord-search {
    grid-column: 1 / -1;
  }

  .chord-layout {
    gap: 0;
  }

  .chord-layout > .chord-card {
    display: none;
  }

  .scale-library-panel .scale-fretboard-wrap,
  .scale-modal .scale-fretboard-wrap {
    max-height: none;
    overflow: visible;
    padding: 4px 0 0;
  }

  .scale-library-panel .scale-fret-numbers,
  .scale-modal .scale-fret-numbers {
    display: none;
  }

  .scale-library-panel .scale-fretboard-grid,
  .scale-modal .scale-fretboard-grid {
    display: none;
  }

  .scale-library-panel .scale-open-panel,
  .scale-modal .scale-open-panel,
  .scale-library-panel .scale-nut,
  .scale-modal .scale-nut {
    display: none;
  }

  .scale-library-panel .scale-mobile-fretboard,
  .scale-modal .scale-mobile-fretboard {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    gap: 0;
  }

  .scale-library-panel .scale-mobile-open-panel,
  .scale-modal .scale-mobile-open-panel {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 24px repeat(4, minmax(0, 1fr));
    align-items: center;
    width: 100%;
    padding: 0 0 6px;
    border-right: 0;
    border-bottom: 2px solid #64748B;
    margin-bottom: 4px;
  }

  .scale-library-panel .scale-mobile-open-panel .scale-open-header,
  .scale-modal .scale-mobile-open-panel .scale-open-header {
    grid-column: 1;
    height: auto;
    font-size: 0.46rem;
    padding: 0;
    white-space: normal;
    line-height: 1.05;
    text-align: center;
  }

  .scale-library-panel .scale-mobile-open-row,
  .scale-modal .scale-mobile-open-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: auto;
    min-height: 40px;
    padding: 2px 4px;
    border-top: 0;
  }

  .scale-library-panel .scale-mobile-open-row .scale-mobile-string-name,
  .scale-modal .scale-mobile-open-row .scale-mobile-string-name {
    font-size: 0.55rem;
    background: none;
    color: var(--muted);
    display: grid;
    place-items: center;
    height: auto;
  }

  .scale-library-panel .scale-mobile-open-note strong,
  .scale-modal .scale-mobile-open-note strong {
    width: 26px;
    height: 26px;
    font-size: 0.62rem;
  }

  .scale-library-panel .scale-mobile-inner,
  .scale-modal .scale-mobile-inner {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    flex: 1;
    min-width: 0;
  }

  .scale-library-panel .scale-mobile-fret-numbers,
  .scale-modal .scale-mobile-fret-numbers {
    display: grid;
    grid-template-rows: 28px repeat(12, 43px);
    color: var(--muted);
    font: 850 0.64rem / 1 var(--font-semi);
    text-align: center;
  }

  .scale-library-panel .scale-mobile-fret-numbers span,
  .scale-modal .scale-mobile-fret-numbers span {
    display: grid;
    place-items: center;
  }

  .scale-library-panel .scale-mobile-notes,
  .scale-modal .scale-mobile-notes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
  }

  .scale-library-panel .scale-mobile-string,
  .scale-modal .scale-mobile-string {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 28px repeat(12, 43px);
    min-width: 0;
    border-left: 1px solid var(--line);
  }

  .scale-library-panel .scale-mobile-string:first-child,
  .scale-modal .scale-mobile-string:first-child {
    border-left: 0;
  }

  .scale-library-panel .scale-mobile-string-name,
  .scale-modal .scale-mobile-string-name {
    display: grid;
    place-items: center;
    color: var(--accent-dark);
    background: #EEF2FF;
    font-family: var(--font-semi);
    font-weight: 900;
  }

  .scale-library-panel .scale-mobile-note-list,
  .scale-modal .scale-mobile-note-list {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(12, 43px);
    gap: 0;
  }

  .scale-library-panel .scale-mobile-note,
  .scale-modal .scale-mobile-note {
    width: 100%;
    min-width: 0;
    height: 43px;
    min-height: 43px;
    display: grid;
    gap: 5px;
    align-items: center;
    justify-items: center;
    padding: 7px 4px;
    border-top: 2px solid #CBD5E1;
    background: #F8FAFC;
  }

  .scale-library-panel .scale-mobile-note small,
  .scale-modal .scale-mobile-note small {
    display: none;
  }

  .scale-library-panel .scale-mobile-note strong,
  .scale-modal .scale-mobile-note strong {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    color: #fff;
    background: #818CF8;
    box-shadow: 0 8px 18px rgba(99, 102, 241,0.24);
    font-family: var(--font-semi);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
  }

  .scale-library-panel .scale-mobile-note.is-root-note strong,
  .scale-modal .scale-mobile-note.is-root-note strong {
    background: #6366F1;
    box-shadow: 0 8px 18px rgba(99, 102, 241,0.28);
  }

  .lyrics-tools {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .app-shell {
    width: 100%;
    margin: 0;
    padding-top: 0;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    background: #ffffff;
  }

  .notifications-hub {
    position: fixed;
    left: 80px;
    top: calc(10px + env(safe-area-inset-top, 0px));
    z-index: 220;
  }

  .notification-toggle {
    width: 34px;
    height: 34px;
    box-shadow: 0 12px 30px rgba(15, 23, 42,0.2);
  }

  .notification-toggle-icon {
    width: 16px;
    height: 16px;
  }

  .nav-alert-badge {
    min-width: 18px;
    height: 18px;
    font-size: 0.62rem;
  }

  .notifications-panel {
    position: fixed;
    top: calc(52px + env(safe-area-inset-top, 0px));
    left: 10px;
    right: 10px;
    width: auto;
    max-height: min(72vh, 560px);
  }

  .mobile-menu-toggle {
    position: fixed;
    left: 12px;
    top: calc(10px + env(safe-area-inset-top, 0px));
    z-index: 220;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    place-items: center;
    padding: 0;
    border: none;
    border-radius: 0;
    color: var(--accent);
    background: none;
    box-shadow: none;
    font-family: var(--font-semi);
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
  }

  .mobile-menu-toggle[aria-expanded="true"] {
    color: var(--accent);
    background: none;
  }

  .app-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    z-index: 210;
    width: 100%;
    max-height: calc(100vh - env(safe-area-inset-top, 0px));
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    margin: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 56px) 8px 10px;
    border: none;
    border-bottom: 2px solid rgba(99, 102, 241,0.18);
    border-radius: 0;
    background: #ffffff;
    box-shadow: 0 6px 24px rgba(15, 23, 42,0.14);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100%);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .app-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    background: #ffffff;
  }

  .nav-button {
    min-width: 0;
    min-height: 30px;
    padding: 4px 3px;
    font-size: 0.6rem;
    line-height: 1.1;
    overflow-wrap: anywhere;
  }

  .setlist-panel,
  .saved-repertoires-panel,
  .share-panel,
  .lyrics-panel,
  .tuner-panel,
  .solo-panel,
  .music-library,
  .music-form-panel {
    padding: 14px;
  }

  .hero {
    min-height: 0;
    padding: 10px 14px 12px;
    gap: 8px;
    align-content: start;
    background:
      linear-gradient(135deg, rgba(15, 23, 42,0.52), rgba(99, 102, 241,0.28)),
      linear-gradient(90deg, rgba(15, 23, 42,0.10), rgba(15, 23, 42,0.04)),
      url("assets/banner_vertical.png");
    background-size: cover;
    background-position: center top;
  }


  .hero-copy {
    gap: 6px;
    padding: 2px 4px 4px 1px;
  }

  .hero-brand-row {
    align-items: center;
    gap: 12px;
  }

  .hero-brand {
    width: clamp(180px, 38vw, 260px);
    max-width: min(260px, 78vw);
  }

  .subtitle {
    font-size: 1rem;
  }

  .hero-panel {
    padding: 12px;
  }

  .stat-value {
    font-size: 1.35rem;
  }

  .stat-label {
    font-size: 0.72rem;
  }

  .primary-button,
  .secondary-button,
  .icon-button,
  .toggle-button,
  .nav-button,
  .table-action,
  .song-edit-button,
  .song-link,
  .small-link-button,
  .table-link-button {
    min-height: 44px;
  }

  .form-actions,
  .results-actions,
  .setlist-actions,
  .setlist-head-actions,
  .preview-actions,
  .confirm-modal-actions,
  .lyrics-tools,
  .tuner-actions,
  .view-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .form-actions .primary-button,
  .form-actions .secondary-button,
  .results-actions > *,
  .setlist-actions > *,
  .setlist-head-actions > *,
  .preview-actions > *,
  .lyrics-tools > *,
  .tuner-actions > *,
  .view-toggle > * {
    width: 100%;
  }

  .music-form-panel .form-actions {
    position: sticky;
    bottom: env(safe-area-inset-bottom, 0px);
    z-index: 5;
    background: var(--panel, #fff);
    padding: 10px 14px 4px;
    box-shadow: 0 -4px 14px rgba(15, 23, 42, 0.08);
    margin-left: -14px;
    margin-right: -14px;
  }

  .results-head {
    display: grid;
    align-items: stretch;
  }

  .song-carousel {
    min-height: min(74vh, 620px);
    grid-template-columns: 1fr;
    gap: 0;
    padding: 12px;
  }

  .carousel-track {
    grid-template-columns: 1fr;
    min-height: calc(min(74vh, 620px) - 24px);
    align-items: stretch;
    grid-row: 1;
    grid-column: 1;
  }

  .carousel-backdrop {
    font-size: 3.8rem;
  }

  .carousel-peek {
    display: none;
  }

  .carousel-ghost {
    top: 50%;
    width: 82%;
    min-height: calc(100% - 56px);
    padding: 14px;
    color: transparent;
    background: rgba(255, 255, 255, 0.32);
    opacity: 0.38;
    filter: blur(2px);
    pointer-events: none;
  }

  .carousel-ghost-left {
    left: 0;
    transform: translate(-16px, -50%) rotate(-2deg) scale(0.9);
  }

  .carousel-ghost-right {
    right: 0;
    transform: translate(16px, -50%) rotate(2deg) scale(0.9);
  }

  .carousel-card {
    width: 100%;
    min-height: 100%;
    grid-template-columns: 1fr;
    align-content: stretch;
    padding: 18px;
  }

  .carousel-card h2 {
    font-size: 2rem;
  }

  .carousel-card-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: end;
  }

  .carousel-card-side .song-check,
  .carousel-card-side .song-select-button {
    grid-column: 1 / -1;
  }

  .carousel-nav {
    position: absolute;
    z-index: 5;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translateY(-50%);
  }

  .carousel-prev {
    left: 18px;
  }

  .carousel-next {
    right: 18px;
  }

  .carousel-status {
    z-index: 6;
  }

  .lyrics-tools .select-field {
    grid-column: 1 / -1;
    width: 100%;
  }

  .lyrics-tools .range-field {
    grid-column: 1 / -1;
  }

  .results-head {
    display: grid;
  }

  .table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  table,
  thead,
  tbody,
  tr,
  th,
  td {
    display: block;
    width: 100%;
  }

  table {
    min-width: 0;
  }

  thead {
    display: none;
  }

  tr {
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42,0.06);
  }

  td {
    display: grid;
    grid-template-columns: minmax(86px, 0.35fr) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
  }

  td:last-child {
    border-bottom: 0;
  }

  td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 850;
    text-transform: uppercase;
  }

  .song-check.compact {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 620px) {
  .app-shell {
    width: 100%;
    margin: 0;
    padding-top: 70px;
    background: #ffffff;
  }

  .top-session {
    top: 10px;
    max-width: 100%;
  }

  .hero {
    padding: 8px 12px 10px;
  }

  .hero-brand-row {
    align-items: flex-start;
    margin-bottom: 0;
  }

  .hero-source-box,
  .hero-view-context,
  .source-picker,
  .source-picker-button {
    width: 100%;
  }

  .source-picker-panel {
    left: 0;
    right: 0;
    width: 100%;
  }

  .hero-tag {
    min-height: 28px;
    padding: 5px 10px;
    font-size: 0.74rem;
  }

  .hero-brand {
    width: min(220px, 72vw);
    max-width: 72vw;
    display: block;
    opacity: 1;
    visibility: visible;
  }

  .hero-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .hero-panel > div {
    padding: 8px 6px;
    text-align: center;
  }

  .toolbar {
    grid-template-columns: 1fr;
  }

  .text-button {
    width: 100%;
  }

  .setlist-head {
    display: grid;
  }

  .saved-head {
    display: grid;
  }

  .indicators-head {
    display: grid;
  }

  .bar-chart-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .indicator-stats-grid {
    grid-template-columns: 1fr;
  }

  .preview-head {
    display: grid;
  }

  .saved-item {
    grid-template-columns: 1fr;
  }

  .music-form-head {
    display: grid;
  }

  .tuner-head {
    display: grid;
  }

  .tuner-meter {
    min-height: 430px;
  }

  .tuner-detail-grid {
    grid-template-columns: 1fr;
  }

  .note-strip {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .music-form {
    grid-template-columns: 1fr;
  }

  .name-field.wide {
    grid-column: auto;
  }

  .setlist-item {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .drag-handle {
    grid-column: 1 / -1;
    width: 100%;
  }

  .setlist-number {
    grid-column: 1;
  }

  .setlist-song {
    grid-column: 2;
  }

  .preview-item {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .preview-item .small-link-button,
  .preview-item .table-action {
    grid-column: 1 / -1;
  }

  .saved-repertoire-modal {
    padding: 8px;
  }

  .saved-repertoire-dialog {
    height: calc(100vh - 16px);
    max-height: calc(100vh - 16px);
  }

  .saved-modal-head {
    display: grid;
  }

  .saved-modal-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-right: 0;
  }

  .saved-modal-actions > * {
    width: 100%;
    min-width: 0;
  }

  .saved-modal-actions > .saved-modal-close,
  .saved-modal-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
  }

  .saved-modal-actions .secondary-button {
    padding-inline: 8px;
    font-size: 0.72rem;
    line-height: 1.1;
    white-space: normal;
    text-align: center;
  }

  .results-head {
    align-items: flex-start;
  }

  .song-grid {
    grid-template-columns: 1fr;
  }

  .chord-card {
    min-height: 390px;
    padding: 14px;
  }

  .chord-modal-card {
    min-height: 0;
  }

  .chord-card-head {
    display: grid;
  }

  .chord-card-meta {
    justify-items: start;
  }

  .chord-card-meta span,
  .chord-card-head em {
    text-align: left;
  }

  .chord-filters {
    grid-template-columns: 1fr;
  }

  .chord-fretboard {
    height: 280px;
  }

  .chord-dot {
    width: 36px;
    height: 36px;
  }

  .lyrics-song {
    padding: 14px;
  }

  .lyrics-song header {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .lyrics-song-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .lyrics-transpose-control {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .lyrics-expand-button {
    width: 100%;
  }

  .lyrics-missing {
    grid-column: 1 / -1;
    text-align: left;
  }

  .lyrics-view {
    max-height: 62vh;
    padding: 8px;
  }

  .lyrics-song pre {
    line-height: 1.55;
  }

  .lyrics-fullscreen-card header,
  .lyrics-fullscreen-actions,
  .lyrics-fullscreen-tools {
    display: grid;
  }

  .lyrics-fullscreen-tools {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .lyrics-fullscreen-tool-group {
    display: grid;
    gap: 5px;
  }

  .lyrics-fullscreen-speed {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 5px;
  }

  .lyrics-fullscreen-speed > button {
    width: auto;
    flex: 0 0 auto;
  }

  .lyrics-fullscreen-speed .range-field {
    width: auto;
    flex: 1 1 140px;
    min-width: 120px;
  }

  .lyrics-fullscreen-tool-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  .lyrics-fullscreen-tools > *,
  .lyrics-fullscreen-tool-group > * {
    width: 100%;
  }

  .lyrics-fullscreen-tool-row > * {
    width: auto;
    flex: 1 1 auto;
  }

  .lyrics-pages-row > * {
    flex: 1 1 auto;
  }

  #fullscreenToggleLyricsPages {
    min-width: 72px;
    padding: 4px 6px;
    font-size: 0.62rem;
  }

  #fullscreenScaleButton {
    flex: 0 0 auto;
    min-width: 118px;
    font-size: 0.62rem;
    padding: 4px 6px;
  }

  .lyrics-fullscreen-tools .range-field {
    min-width: 0;
  }

  .lyrics-fullscreen-tools .range-field span {
    font-size: 0.6rem;
  }

  .lyrics-fullscreen-tools button {
    min-height: 28px;
    padding: 4px 6px;
    font-size: 0.66rem;
  }

  .lyrics-fullscreen-card {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    padding:
      max(8px, env(safe-area-inset-top, 0px))
      max(8px, env(safe-area-inset-right, 0px))
      max(8px, env(safe-area-inset-bottom, 0px))
      max(8px, env(safe-area-inset-left, 0px));
    margin: 0;
  }
}

@media (max-width: 420px) {
  .app-shell {
    width: 100%;
    margin: 0;
    background: #ffffff;
  }

  .app-nav {
    inset-inline: 6px;
    gap: 4px;
    padding: 6px;
  }

  .nav-button {
    font-size: 0.66rem;
    min-height: 46px;
  }

  .setlist-panel,
  .saved-repertoires-panel,
  .share-panel,
  .lyrics-panel,
  .tuner-panel,
  .solo-panel,
  .music-library,
  .music-form-panel {
    padding: 12px;
  }

  .hero {
    min-height: 0;
    padding: 14px 10px;
  }

  .hero-panel {
    gap: 4px;
  }

  .hero-panel > div {
    padding: 7px 4px;
  }

  .stat-value {
    font-size: 1.05rem;
  }

  .stat-label {
    font-size: 0.58rem;
  }

  td {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .form-actions,
  .setlist-actions,
  .setlist-head-actions,
  .preview-actions,
  .lyrics-tools,
  .tuner-actions,
  .view-toggle {
    grid-template-columns: 1fr;
  }

  .music-form-panel .form-actions {
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .meter-scale {
    width: min(96%, 360px);
    top: 116px;
  }

  .meter-arc {
    width: min(96%, 360px);
    top: 128px;
  }

  .meter-arc span {
    transform: translateX(-50%) rotate(var(--tick-angle)) translateY(-140px);
    transform-origin: 50% 140px;
  }

  .meter-readout {
    top: 22px;
  }

  .note-strip {
    left: 12px;
    right: 12px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2px;
  }

  .note-strip strong {
    font-size: 0.66rem;
  }
}

/* Tema claro refinado: identidade rosa com detalhes musicais discretos */
:root {
  color-scheme: light;
  --ink: #0F172A;
  --muted: #64748B;
  --line: #E2E8F0;
  --panel: #ffffff;
  --soft: rgba(99, 102, 241,0.1);
  --accent: #6366F1;
  --accent-dark: #4F46E5;
  --list-hover: #EEF2FF;
  --list-hover-strong: #6366F1;
  --list-hover-text: #0F172A;
  --gold: #A5B4FC;
  --rose: #6366F1;
  --warm-1: #6366F1;
  --warm-2: #818CF8;
  --warm-3: #A5B4FC;
  --lime: #4F46E5;
  --deep-bg: #F8FAFC;
  --deep-bg-2: #F1F5F9;
  --shadow: 0 18px 48px rgba(15, 23, 42,0.09);
  --neon-glow-soft: 0 0 0 3px rgba(99, 102, 241,0.12);
  --neon-glow-strong: 0 12px 26px rgba(99, 102, 241,0.18);
}

body {
  color: var(--ink);
  background: #F8FAFC;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: none;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: #F1F5F9;
}

::-webkit-scrollbar-thumb {
  background: #6366F1;
  border-color: rgba(99, 102, 241,0.38);
  box-shadow: none;
}

.auth-shell,
.hero,
.topbar {
  background: #ffffff;
}

.hero::before {
  background: none;
}

.auth-card,
.hero-panel,
.sidebar,
.toolbar,
.setlist-panel,
.saved-repertoires-panel,
.share-panel,
.indicators-panel,
.lyrics-panel,
.tuner-panel,
.solo-panel,
.detector-panel,
.chord-panel,
.scale-library-panel,
.music-library,
.music-form-panel,
.notifications-panel,
.preview-item,
.saved-item,
.song-card,
.chord-card,
.lyrics-song,
.confirm-modal-card,
.custom-select-menu {
  border-color: rgba(99, 102, 241,0.2);
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(15, 23, 42,0.96), rgba(15, 23, 42,0.94));
  box-shadow: var(--shadow);
}

.music-import-panel,
.event-card,
.indicator-card,
.share-card,
.scale-viewer,
.detector-result-card,
.detector-current,
.chord-list-button,
.repertoire-preview,
.setlist-song,
table,
tbody tr {
  border-color: rgba(99, 102, 241,0.22);
  color: var(--ink);
  background: rgba(15, 23, 42,0.78);
}

.library-head h2,
.music-form-head h2,
.saved-head h2,
.lyrics-head h2,
.chord-head h2,
.preview-title,
.song-title,
.lyrics-song h3,
.chord-card-head strong,
.stat-value {
  color: #ffffff;
}

.eyebrow,
.eyebrow.dark,
.song-artist,
.saved-head span,
.chord-head span,
.chord-card-head span,
.chord-card-meta span,
.lyrics-tone-details strong,
.field-icon,
.stat-label {
  color: var(--lime);
}

.name-field span,
.select-field span,
.range-field span,
.save-message,
.saved-empty,
.empty-state,
.song-tags span,
.lyrics-song p,
.preview-empty,
.chart-empty,
.custom-select-option,
td::before,
th {
  color: var(--muted);
}

input,
textarea,
select,
.custom-select-trigger,
.search-field input,
.name-field input,
.name-field textarea,
.name-field select,
.range-field input {
  border-color: rgba(99, 102, 241,0.25);
  color: #ffffff;
  background-color: rgba(15, 23, 42,0.86);
  caret-color: var(--accent);
}

input::placeholder,
textarea::placeholder {
  color: rgba(248, 250, 252,0.46);
}

input:focus,
textarea:focus,
select:focus,
.custom-select-trigger:focus {
  border-color: var(--accent);
  outline-color: rgba(99, 102, 241,0.28);
  box-shadow: var(--neon-glow-soft);
}

.primary-button,
.toggle-button.is-active,
.secondary-button.is-active,
.song-select-button.is-selected,
.favorite-button.is-active,
.lyrics-expand-button[aria-expanded="true"],
.lyrics-scale-button:hover,
.table-action:hover,
.song-edit-button:hover,
.saved-load:hover,
.saved-name:hover,
.nav-button.is-active {
  border-color: var(--accent);
  color: #ffffff;
  background: linear-gradient(180deg, #6366F1, #4F46E5);
  box-shadow: var(--neon-glow-strong);
}

.primary-button:hover {
  border-color: #818CF8;
  background: linear-gradient(180deg, #818CF8, #6366F1);
}

.secondary-button,
.toggle-button,
.icon-button,
.table-action,
.song-edit-button,
.favorite-button,
.song-select-button,
.song-link,
.small-link-button,
.saved-load,
.saved-name,
.saved-delete,
.lyrics-expand-button,
.lyrics-scale-button,
.lyrics-transpose-btn,
.chord-list-button {
  border-color: rgba(99, 102, 241,0.28);
  color: #ffffff;
  background: rgba(99, 102, 241,0.1);
}

.secondary-button:hover,
.toggle-button:hover,
.icon-button:hover,
.favorite-button:hover,
.song-select-button:hover,
.song-link:hover,
.small-link-button:hover,
.lyrics-transpose-btn:hover,
.chord-list-button:hover {
  border-color: var(--warm-2);
  color: #ffffff;
  background: rgba(129, 140, 248,0.18);
  box-shadow: 0 0 20px rgba(129, 140, 248,0.18);
}

.nav-button,
.top-session,
.stat-card {
  border-color: rgba(99, 102, 241,0.18);
  color: #ffffff;
  background: rgba(15, 23, 42,0.76);
}

.nav-button:hover {
  border-color: var(--lime);
  color: #ffffff;
  background: rgba(99, 102, 241,0.12);
}

.app-nav .nav-button:nth-child(3n) {
  border-left-color: var(--accent);
}

.app-nav .nav-button:nth-child(3n + 1) {
  border-left-color: var(--warm-2);
}

.app-nav .nav-button:nth-child(3n + 2) {
  border-left-color: var(--warm-3);
}

thead,
.custom-select-option.is-selected,
.chart-bar-fill,
.meter-needle,
.meter-arc .is-active {
  background: linear-gradient(90deg, #6366F1, #818CF8, #A5B4FC);
}

.lyrics-view,
.lyrics-song pre,
.lyrics-fullscreen-card,
.lyrics-fullscreen-card pre,
.lyrics-chord-panel {
  border-color: rgba(99, 102, 241,0.24);
  color: #F8FAFC;
  background: rgba(15, 23, 42,0.88);
}

.lyrics-chord,
.lyrics-fullscreen-card pre .lyrics-chord {
  color: #A5B4FC;
  text-shadow:
    0 0 10px rgba(165, 180, 252,0.34),
    0 0 2px rgba(99, 102, 241,0.6);
}

.chord-dot,
.chord-barre,
.chord-open {
  color: #0F172A;
  background: var(--lime);
  box-shadow: 0 0 14px rgba(99, 102, 241,0.4);
}

.chord-muted {
  color: var(--accent);
}

.chord-fretboard {
  border-top-color: rgba(165, 180, 252,0.8);
  background:
    linear-gradient(
      90deg,
      transparent calc(8% - 1px),
      rgba(255, 255, 255, 0.34) calc(8% - 1px) calc(8% + 1px),
      transparent calc(8% + 1px) calc(36% - 1px),
      rgba(255, 255, 255, 0.34) calc(36% - 1px) calc(36% + 1px),
      transparent calc(36% + 1px) calc(64% - 1px),
      rgba(255, 255, 255, 0.34) calc(64% - 1px) calc(64% + 1px),
      transparent calc(64% + 1px) calc(92% - 1px),
      rgba(255, 255, 255, 0.34) calc(92% - 1px) calc(92% + 1px),
      transparent calc(92% + 1px)
    ),
    linear-gradient(180deg, rgba(99, 102, 241,0.35) 0 2px, transparent 2px) 0 0 / 100% 20%;
}

.favorite-badge,
.import-file-button,
.import-loading,
.save-message:not(:empty),
.music-save-card,
.lyrics-tone-details span,
.song-tags span,
.scale-note.is-root {
  border-color: rgba(99, 102, 241,0.36);
  color: #ffffff;
  background: rgba(99, 102, 241,0.18);
}

.loading-dot {
  background: var(--accent);
  box-shadow: 0 0 14px rgba(99, 102, 241,0.65);
}

.music-save-overlay,
.confirm-modal,
.lyrics-fullscreen,
.chord-modal {
  background: rgba(15, 23, 42,0.72);
}

.song-delete-button,
.saved-delete,
.confirm-modal-danger {
  border-color: rgba(99, 102, 241,0.55);
  color: #ffffff;
  background: rgba(99, 102, 241,0.2);
}

/* Override final: light, clean, modern */
:root {
  color-scheme: light;
  --ink: #0F172A;
  --muted: #64748B;
  --line: #E2E8F0;
  --panel: #ffffff;
  --soft: #F8FAFC;
  --accent: #6366F1;
  --accent-dark: #4F46E5;
  --list-hover: #EEF2FF;
  --list-hover-strong: #6366F1;
  --list-hover-text: #0F172A;
  --gold: #A5B4FC;
  --rose: #6366F1;
  --warm-1: #6366F1;
  --warm-2: #818CF8;
  --warm-3: #A5B4FC;
  --lime: #4F46E5;
  --shadow: 0 18px 48px rgba(15, 23, 42,0.09);
  --neon-glow-soft: 0 0 0 3px rgba(99, 102, 241,0.12);
  --neon-glow-strong: 0 12px 26px rgba(99, 102, 241,0.18);
}

body {
  color: var(--ink);
  background: #F8FAFC;
}

.auth-card,
.hero-panel,
.sidebar,
.toolbar,
.setlist-panel,
.saved-repertoires-panel,
.share-panel,
.indicators-panel,
.lyrics-panel,
.tuner-panel,
.solo-panel,
.detector-panel,
.chord-panel,
.scale-library-panel,
.music-library,
.music-form-panel,
.notifications-panel,
.preview-item,
.saved-item,
.song-card,
.chord-card,
.lyrics-song,
.confirm-modal-card,
.custom-select-menu,
.music-import-panel,
.event-card,
.indicator-card,
.share-card,
.scale-viewer,
.detector-result-card,
.detector-current,
.chord-list-button,
.repertoire-preview,
.setlist-song,
table,
tbody tr {
  border-color: var(--line);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
}

.library-head h2,
.music-form-head h2,
.saved-head h2,
.lyrics-head h2,
.chord-head h2,
.preview-title,
.song-title,
.lyrics-song h3,
.chord-card-head strong,
.stat-value {
  color: #0F172A;
}

input,
textarea,
select,
.custom-select-trigger,
.search-field input,
.name-field input,
.name-field textarea,
.name-field select,
.range-field input {
  border-color: #E2E8F0;
  color: var(--ink);
  background-color: #ffffff;
}

.primary-button,
.toggle-button.is-active,
.secondary-button.is-active,
.song-select-button.is-selected,
.favorite-button.is-active,
.lyrics-expand-button[aria-expanded="true"],
.lyrics-scale-button:hover,
.table-action:hover,
.song-edit-button:hover,
.saved-load:hover,
.saved-name:hover,
.nav-button.is-active {
  border-color: var(--accent);
  color: #ffffff;
  background: #6366F1;
  box-shadow: 0 12px 24px rgba(99, 102, 241,0.18);
}

.secondary-button,
.toggle-button,
.icon-button,
.table-action,
.song-edit-button,
.favorite-button,
.song-select-button,
.song-link,
.small-link-button,
.saved-load,
.saved-name,
.saved-delete,
.lyrics-expand-button,
.lyrics-scale-button,
.lyrics-transpose-btn,
.chord-list-button {
  border-color: #C7D2FE;
  color: #4338CA;
  background: #F5F3FF;
}

.lyrics-view,
.lyrics-song pre,
.lyrics-fullscreen-card,
.lyrics-fullscreen-card pre,
.lyrics-chord-panel {
  border-color: #E2E8F0;
  color: #0F172A;
  background: #F8FAFC;
}

.lyrics-chord,
.lyrics-fullscreen-card pre .lyrics-chord {
  color: #6366F1;
  text-shadow: none;
}

.chord-dot,
.chord-barre,
.chord-open {
  color: #ffffff;
  background: #6366F1;
  box-shadow: none;
}

.favorite-badge,
.import-file-button,
.import-loading,
.save-message:not(:empty),
.music-save-card,
.lyrics-tone-details span,
.song-tags span,
.scale-note.is-root {
  border-color: #C7D2FE;
  color: #4338CA;
  background: #EEF2FF;
}

/* Override final do banner e menu */
.hero {
  min-height: 300px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  color: #0F172A;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0 63%, rgba(238, 242, 255,0.88) 63% 100%),
    radial-gradient(circle at 88% 30%, rgba(99, 102, 241,0.18), transparent 28%),
    #ffffff;
  box-shadow: 0 18px 46px rgba(15, 23, 42,0.08);
}

.hero::before {
  inset: auto 28px 28px auto;
  width: min(280px, 34vw);
  height: 170px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, #6366F1 0 24%, transparent 24% 37%, #818CF8 37% 62%, transparent 62% 74%, #A5B4FC 74% 100%);
  opacity: 0.16;
}

.hero::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
  background: #4F46E5;
}

.hero h1,
.hero .subtitle,
.hero-view-context,
.hero-tag {
  color: #0F172A;
  text-shadow: none;
}

.hero .subtitle,
.hero-view-context {
  color: #475569;
}

.hero-source-box,
.source-picker-panel {
  border-color: #E2E8F0;
  color: #0F172A;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 26px rgba(15, 23, 42,0.08);
}

.hero-panel {
  border: 1px solid #C7D2FE;
  color: #0F172A;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42,0.08);
}

.hero-panel > div {
  background: #F5F3FF;
}

.hero-panel .stat-value {
  color: #6366F1;
}

.hero-panel .stat-label {
  color: #475569;
}

.mobile-menu-toggle {
  border-color: #E2E8F0;
  color: #0F172A;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42,0.1);
}

.app-nav {
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42,0.08);
}

.nav-button,
.app-nav .nav-button {
  border: 1px solid #E2E8F0;
  border-left: 4px solid #E2E8F0;
  color: #0F172A;
  background: #ffffff;
  box-shadow: none;
}

.nav-button:hover,
.app-nav .nav-button:hover {
  border-color: #C7D2FE;
  border-left-color: #6366F1;
  color: #4338CA;
  background: #F5F3FF;
}

.nav-button.is-active,
.app-nav .nav-button.is-active {
  border-color: #6366F1;
  border-left-color: #6366F1;
  color: #ffffff;
  background: #6366F1;
  box-shadow: 0 10px 22px rgba(99, 102, 241,0.18);
}

/* Ajuste final de contraste em textos e detalhes */
:root {
  --ink: #0F172A;
  --muted: #64748B;
  --muted-strong: #334155;
}

body,
button,
input,
textarea,
select {
  color: var(--ink);
}

p,
span,
small,
em,
label,
td,
.custom-select-option,
.saved-empty,
.empty-state,
.save-message,
.import-message,
.chart-empty,
.event-empty,
.preview-empty,
.lyrics-missing,
.notification-item,
.share-item,
.request-item {
  color: var(--muted-strong);
}

.name-field span,
.select-field span,
.range-field span,
.field-icon,
.stat-label,
.song-tags span,
.preview-item span,
.setlist-song span,
.saved-name span,
.lyrics-song p,
.chord-card-meta span,
.chord-card-head span,
.chord-head span,
.music-import-copy span,
.notifications-panel-head span,
.share-card-head span,
.event-card span,
.indicator-card small,
td::before {
  color: #475569;
}

.eyebrow,
.eyebrow.dark,
.song-artist,
.hero-panel .stat-label {
  color: #4F46E5;
}

.hero h1,
.hero .subtitle,
.hero-view-context,
.hero-source-box,
.source-picker-panel,
.source-picker-button,
.nav-button,
.app-nav .nav-button,
.mobile-menu-toggle,
.top-session,
.nav-session-user,
.song-title,
.lyrics-song h3,
.chord-card-head strong,
.preview-title,
.library-head h2,
.music-form-head h2,
.saved-head h2,
.lyrics-head h2,
.chord-head h2 {
  color: #0F172A;
}

.nav-button:hover,
.app-nav .nav-button:hover,
.secondary-button,
.toggle-button,
.icon-button,
.table-action,
.song-edit-button,
.favorite-button,
.song-select-button,
.song-link,
.small-link-button,
.saved-load,
.saved-name,
.saved-delete,
.lyrics-expand-button,
.lyrics-scale-button,
.lyrics-transpose-btn,
.chord-list-button {
  color: #4338CA;
}

.nav-button.is-active,
.app-nav .nav-button.is-active,
.primary-button,
.toggle-button.is-active,
.secondary-button.is-active,
.song-select-button.is-selected,
.favorite-button.is-active,
thead,
thead th {
  color: #ffffff;
}

input::placeholder,
textarea::placeholder {
  color: #94A3B8;
}

input,
textarea,
select,
.custom-select-trigger,
.search-field input,
.name-field input,
.name-field textarea,
.name-field select {
  color: #0F172A;
  background: #ffffff;
}

.lyrics-view,
.lyrics-song pre,
.lyrics-fullscreen-card pre,
.lyrics-chord-panel,
.chord-mini-empty,
.chord-mini-missing {
  color: #0F172A;
}

.lyrics-chord,
.lyrics-fullscreen-card pre .lyrics-chord,
.chord-mini-name {
  color: #6366F1;
  font-weight: 800;
}

.favorite-badge,
.import-file-button,
.import-loading,
.save-message:not(:empty),
.music-save-card,
.lyrics-tone-details span,
.song-tags span,
.scale-note.is-root {
  color: #4338CA;
}

.song-delete-button,
.saved-delete,
.confirm-modal-danger {
  color: #4338CA;
}

/* Ajuste especifico: sessao e botoes de letras */
.top-session {
  border: 1px solid #C7D2FE;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42,0.12);
}

.nav-session-user {
  max-width: 220px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: #6366F1;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.plan-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  font-family: var(--font-semi);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid var(--line);
}

.plan-badge.plan-free {
  color: #475569;
  background: #F8FAFC;
}

.plan-badge.plan-plus {
  color: #4338CA;
  border-color: rgba(99, 102, 241, 0.32);
  background: #EEF2FF;
}

.plan-action-button {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(99, 102, 241, 0.28);
  border-radius: 8px;
  color: #fff;
  background: #6366F1;
  font-family: var(--font-semi);
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.plan-action-button:hover {
  background: #4F46E5;
}

.subscription-status-text {
  color: #64748B;
  font-family: var(--font-semi);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .top-session {
    gap: 6px;
    padding: 8px;
  }

  .top-session .nav-session-user {
    max-width: 34vw;
    padding: 6px 8px;
    font-size: 0.72rem;
  }

  .top-session .plan-badge {
    min-height: 26px;
    padding: 4px 8px;
    font-size: 0.62rem;
  }

  .top-session .plan-action-button {
    min-height: 28px;
    padding: 5px 8px;
    font-size: 0.68rem;
    white-space: nowrap;
  }

  .top-session .subscription-status-text {
    display: none;
  }
}

.nav-logout-button {
  border-color: #E2E8F0;
  color: #0F172A;
  background: #F8FAFC;
}

.nav-logout-button:hover {
  border-color: #6366F1;
  color: #4338CA;
  background: #EEF2FF;
}

.lyrics-tools .secondary-button,
.lyrics-song-actions .lyrics-expand-button,
.lyrics-scale-button,
.lyrics-transpose-btn,
.lyrics-fullscreen-tools button,
#toggleLyricsPages,
#lyricsSmaller,
#lyricsBigger,
#fullscreenLyricsBigger,
#fullscreenLyricsSmaller,
#fullscreenToggleLyricsPages,
#fullscreenTransposeDown,
#fullscreenTransposeUp,
#fullscreenSaveTone,
#fullscreenScaleButton {
  border-color: #E2E8F0;
  color: #0F172A;
  background: #ffffff;
  box-shadow: none;
}

.lyrics-tools .secondary-button:hover,
.lyrics-song-actions .lyrics-expand-button:hover,
.lyrics-scale-button:hover,
.lyrics-transpose-btn:hover,
.lyrics-fullscreen-tools button:hover,
#toggleLyricsPages:hover,
#lyricsSmaller:hover,
#lyricsBigger:hover,
#fullscreenLyricsBigger:hover,
#fullscreenLyricsSmaller:hover,
#fullscreenToggleLyricsPages:hover,
#fullscreenTransposeDown:hover,
#fullscreenTransposeUp:hover,
#fullscreenSaveTone:hover,
#fullscreenScaleButton:hover {
  border-color: #6366F1;
  color: #4338CA;
  background: #EEF2FF;
  box-shadow: 0 0 0 3px rgba(99, 102, 241,0.08);
  transform: none;
}

.lyrics-tools .secondary-button.is-active,
.lyrics-song-actions .lyrics-expand-button[aria-expanded="true"],
#toggleLyricsPages.is-active,
#fullscreenToggleLyricsPages.is-active {
  border-color: #6366F1;
  color: #ffffff;
  background: #6366F1;
}

#fullscreenToggleAutoScroll,
.lyrics-fullscreen-tools #fullscreenToggleAutoScroll {
  border-color: #6366F1;
  color: #ffffff;
  background: #6366F1;
}

#fullscreenToggleAutoScroll:hover,
.lyrics-fullscreen-tools #fullscreenToggleAutoScroll:hover {
  border-color: #4F46E5;
  color: #ffffff;
  background: #4F46E5;
}

/* Banner com mais vida, mantendo visual limpo */
.hero {
  min-height: 340px;
  overflow: hidden;
  border: 1px solid #C7D2FE;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.98) 0 54%, rgba(238, 242, 255,0.96) 54% 100%),
    radial-gradient(circle at 78% 28%, rgba(99, 102, 241,0.2), transparent 24%),
    radial-gradient(circle at 94% 16%, rgba(99, 102, 241,0.16), transparent 22%),
    #ffffff;
  box-shadow: 0 22px 58px rgba(15, 23, 42,0.12);
}

.hero::before {
  inset: auto 34px 34px auto;
  width: min(360px, 38vw);
  height: 235px;
  border-radius: 18px;
  background:
    linear-gradient(90deg, transparent 0 4%, #6366F1 4% 22%, transparent 22% 33%, #818CF8 33% 56%, transparent 56% 66%, #A5B4FC 66% 82%, transparent 82% 100%),
    linear-gradient(90deg, transparent 0 83%, #4F46E5 83% 100%);
  opacity: 0.95;
  filter: drop-shadow(0 18px 32px rgba(15, 23, 42,0.18));
  mask-image: linear-gradient(to top, black 0 82%, transparent 100%);
}

.hero::after {
  top: 28px;
  right: 30px;
  width: 96px;
  height: 96px;
  border-radius: 999px 999px 0 999px;
  background: #0F172A;
  box-shadow:
    120px 84px 0 38px #0F172A,
    -8px 142px 0 -44px #4F46E5;
}

.hero-copy {
  max-width: min(650px, 62%);
}

.hero-brand-row {
  margin-bottom: 14px;
}

.hero h1 {
  max-width: 700px;
  color: #0F172A;
}

.hero .subtitle {
  max-width: 590px;
  color: #334155;
  font-weight: 650;
}

.hero-source-box {
  border-color: #C7D2FE;
  background: rgba(255, 255, 255, 0.94);
}

.hero-panel {
  border-color: #C7D2FE;
  background: rgba(255, 255, 255, 0.96);
}

.hero-panel > div {
  border-bottom: 3px solid rgba(99, 102, 241,0.28);
  background: linear-gradient(180deg, #ffffff, #F5F3FF);
}

.hero-panel > div:nth-child(2) {
  border-bottom-color: rgba(129, 140, 248,0.35);
}

.hero-panel > div:nth-child(3) {
  border-bottom-color: rgba(99, 102, 241,0.35);
}

.hero-panel .stat-value {
  color: #6366F1;
}

.hero-panel > div:nth-child(2) .stat-value {
  color: #818CF8;
}

.hero-panel > div:nth-child(3) .stat-value {
  color: #4F46E5;
}

@media (max-width: 760px) {
  .hero {
    min-height: 360px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0 64%, rgba(238, 242, 255,0.96) 64% 100%),
      #ffffff;
  }

  .hero-copy {
    max-width: 100%;
  }

  .hero::before {
    right: 16px;
    bottom: 12px;
    width: min(260px, 82vw);
    height: 118px;
    opacity: 0.28;
  }

  .hero::after {
    display: none;
  }
}

/* Botao mostrar/ocultar video em Letras */
#fullscreenToggleVideo {
  border-color: #C7D2FE;
  color: #4338CA;
  background: #F5F3FF;
}

#fullscreenToggleVideo:hover {
  border-color: #6366F1;
  color: #4338CA;
  background: #EEF2FF;
}

#fullscreenToggleVideo[aria-pressed="true"] {
  border-color: #6366F1;
  color: #ffffff;
  background: #6366F1;
}

/* Letras: controles da tela cheia em uma linha (compacto, quebra se nao couber) */
.lyrics-fullscreen-actions {
  width: auto;
  max-width: 100%;
}

.lyrics-fullscreen-tools {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.lyrics-fullscreen-tool-group,
.lyrics-fullscreen-speed,
.lyrics-fullscreen-tool-row,
.lyrics-pages-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  width: auto;
  margin: 0;
}

.lyrics-fullscreen-speed {
  flex: 0 1 auto;
  min-width: 0;
}

.lyrics-fullscreen-speed .range-field {
  flex: 0 1 130px;
  min-width: 100px;
  max-width: 140px;
  margin: 0;
}

.lyrics-fullscreen-tools span {
  font-size: 0.66rem;
}

.lyrics-fullscreen-tools button,
#fullscreenToggleLyricsPages,
#fullscreenToggleVideo,
#fullscreenTransposeDown,
#fullscreenTransposeUp,
#fullscreenSaveTone,
#fullscreenScaleButton,
#fullscreenLyricsBigger,
#fullscreenLyricsSmaller {
  flex: 0 0 auto;
  min-height: 30px;
  height: 30px;
  padding: 4px 8px;
  font-size: 0.64rem;
  white-space: nowrap;
}

#fullscreenLyricsBigger,
#fullscreenLyricsSmaller {
  min-width: 0;
  padding: 4px 7px;
}

@media (max-width: 900px) {
  .lyrics-fullscreen-tools {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .lyrics-fullscreen-speed {
    flex: 1 1 100%;
    min-width: 0;
    flex-wrap: wrap;
  }

  .lyrics-fullscreen-tool-row,
  .lyrics-pages-row {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }

  .lyrics-fullscreen-speed .range-field {
    flex: 1 1 160px;
    min-width: 120px;
  }
}

/* Banner compacto dentro do tamanho atual */
.hero {
  min-height: 230px;
  padding: 22px 26px;
  align-items: center;
}

.hero-copy {
  max-width: min(620px, 64%);
}

.hero-brand-row {
  margin-bottom: 8px;
}

.hero-brand {
  max-height: 54px;
}

.hero h1 {
  max-width: 620px;
  margin-bottom: 8px;
  font-size: clamp(1.65rem, 3.3vw, 2.65rem);
  line-height: 1.02;
}

.hero .subtitle {
  max-width: 540px;
  font-size: 0.95rem;
  line-height: 1.45;
}

.hero-source-box {
  margin-top: 12px;
  padding: 9px 10px;
}

.hero-panel {
  max-width: 330px;
  gap: 8px;
}

.hero-panel > div {
  padding: 10px 12px;
}

.hero-panel .stat-value {
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
}

.hero::before {
  right: 24px;
  bottom: 18px;
  width: min(270px, 31vw);
  height: 150px;
  opacity: 0.72;
}

.hero::after {
  top: 24px;
  right: 24px;
  width: 62px;
  height: 62px;
  box-shadow:
    86px 62px 0 24px #0F172A,
    -5px 96px 0 -30px #4F46E5;
}

@media (max-width: 760px) {
  .hero {
    min-height: 260px;
    padding: 18px 14px;
  }

  .hero-copy {
    max-width: 100%;
  }

  .hero::before {
    width: min(220px, 76vw);
    height: 86px;
    opacity: 0.18;
  }
}

/* Banner com metade da altura */
.hero {
  min-height: 150px;
  padding: 14px 22px;
}

.hero-brand {
  max-height: 72px;
}

.hero-brand-row {
  margin-bottom: 4px;
}

.hero h1 {
  max-width: 680px;
  margin: 0 0 5px;
  font-size: clamp(1.25rem, 2.4vw, 1.85rem);
  line-height: 1.05;
}

.hero .subtitle {
  max-width: 620px;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
}

.hero-source-box {
  margin-top: 8px;
  padding: 7px 9px;
}

.hero-panel {
  max-width: 300px;
  gap: 6px;
}

.hero-panel > div {
  padding: 7px 10px;
}

.hero-panel .stat-value {
  font-size: clamp(1.05rem, 2vw, 1.55rem);
}

.hero-panel .stat-label {
  font-size: 0.66rem;
}

.hero::before {
  right: 20px;
  bottom: 10px;
  width: min(210px, 26vw);
  height: 92px;
  opacity: 0.5;
}

.hero::after {
  top: 16px;
  right: 18px;
  width: 42px;
  height: 42px;
  box-shadow:
    60px 42px 0 16px #0F172A,
    -4px 64px 0 -22px #4F46E5;
}

@media (max-width: 760px) {
  .hero {
    min-height: 190px;
    padding: 14px;
  }

  .hero h1 {
    font-size: clamp(1.2rem, 6vw, 1.65rem);
  }

  .hero .subtitle {
    font-size: 0.8rem;
  }

  .hero::before {
    width: min(180px, 70vw);
    height: 62px;
    opacity: 0.12;
  }
}

/* Menu e botoes de fechar sem fundo pesado */
.mobile-menu-toggle,
.modal-close-btn,
#closeScaleLibraryView {
  border-color: transparent !important;
  color: #6366F1 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.mobile-menu-toggle:hover,
.mobile-menu-toggle[aria-expanded="true"],
.modal-close-btn:hover,
#closeScaleLibraryView:hover {
  border-color: transparent !important;
  color: #6366F1 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.modal-close-btn {
  opacity: 1;
}

/* Filtro de favoritas como liga/desliga */
.favorite-filter-toggle {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 8px 12px;
  color: #0F172A;
  background: #ffffff;
  box-shadow: none;
  font-family: var(--font-semi);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.favorite-filter-toggle:hover {
  border-color: #C7D2FE;
  color: #4338CA;
  background: #F5F3FF;
}

.favorite-filter-toggle.is-active {
  border-color: #6366F1;
  color: #ffffff;
  background: #6366F1;
}

.favorite-filter-switch {
  width: 38px;
  height: 22px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #E2E8F0;
  transition: background 160ms ease;
}

.favorite-filter-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(15, 23, 42,0.16);
  transition: transform 160ms ease;
}

.favorite-filter-toggle.is-active .favorite-filter-switch {
  background: rgba(255, 255, 255, 0.34);
}

.favorite-filter-toggle.is-active .favorite-filter-switch::after {
  transform: translateX(16px);
}

/* Carrossel alinhado ao layout light */
.song-carousel {
  border-color: #E2E8F0;
  color: #0F172A;
  background:
    radial-gradient(circle at 16% 18%, rgba(99, 102, 241,0.12), transparent 30%),
    radial-gradient(circle at 84% 18%, rgba(99, 102, 241,0.12), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #F5F3FF 42%, #F8FAFC 100%);
  box-shadow: 0 18px 42px rgba(15, 23, 42,0.1);
}

.song-carousel::before {
  background:
    linear-gradient(90deg, rgba(99, 102, 241,0.12), transparent 34%),
    linear-gradient(140deg, transparent 0 62%, rgba(99, 102, 241,0.1) 62% 72%, transparent 72% 100%);
  mix-blend-mode: normal;
  opacity: 0.75;
}

.song-carousel::after {
  background:
    repeating-linear-gradient(90deg, rgba(15, 23, 42,0.04) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(0deg, rgba(15, 23, 42,0.03) 0 1px, transparent 1px 38px);
  opacity: 0.5;
}

.carousel-backdrop {
  color: rgba(99, 102, 241,0.08);
  filter: blur(7px);
}

.carousel-card {
  border-color: #C7D2FE;
  color: #0F172A;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 22px 46px rgba(15, 23, 42,0.12);
}

.carousel-card h2 {
  color: #0F172A;
}

.carousel-artist,
.carousel-excerpt {
  color: #475569;
}

.carousel-kicker span,
.carousel-owner {
  color: #4338CA;
  background: #EEF2FF;
}

.carousel-card-side .favorite-button,
.carousel-card-side .song-select-button {
  border-color: #C7D2FE;
  color: #4338CA;
  background: #F5F3FF;
}

.carousel-card-side .favorite-button:hover,
.carousel-card-side .song-select-button:hover {
  border-color: #6366F1;
  color: #ffffff;
  background: #6366F1;
}

.carousel-card-side .song-select-button.is-selected,
.carousel-card-side .favorite-button.is-favorite {
  border-color: #6366F1;
  color: #ffffff;
  background: #6366F1;
}

.carousel-nav {
  border-color: #C7D2FE;
  color: #6366F1;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(99, 102, 241,0.12);
}

.carousel-nav:hover:not(:disabled) {
  border-color: #6366F1;
  color: #ffffff;
  background: #6366F1;
}

.carousel-peek,
.carousel-ghost {
  border-color: #E2E8F0;
  color: #475569;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 10px 24px rgba(15, 23, 42,0.08);
}

.carousel-peek:hover {
  border-color: #C7D2FE;
  color: #0F172A;
  background: #ffffff;
}

.carousel-peek span,
.carousel-ghost {
  color: #64748B;
}

.carousel-peek strong,
.carousel-ghost strong {
  color: #0F172A;
}

.carousel-status {
  color: #4338CA;
  background: #EEF2FF;
  border: 1px solid #C7D2FE;
}

/* Hero stats mais transparente e moderno */
.hero-panel {
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.28);
  box-shadow: 0 24px 60px rgba(15, 23, 42,0.12);
  backdrop-filter: blur(22px) saturate(1.25);
}

.hero-panel > div {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.58);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.18)),
    radial-gradient(circle at 100% 0%, rgba(99, 102, 241,0.12), transparent 45%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.hero-panel > div::after {
  content: "";
  position: absolute;
  inset: auto 12px 0 12px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241,0.52), transparent);
}

.hero-panel > div:nth-child(2) {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.16)),
    radial-gradient(circle at 100% 0%, rgba(129, 140, 248,0.12), transparent 45%);
}

.hero-panel > div:nth-child(2)::after {
  background: linear-gradient(90deg, transparent, rgba(129, 140, 248,0.5), transparent);
}

.hero-panel > div:nth-child(3) {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.16)),
    radial-gradient(circle at 100% 0%, rgba(99, 102, 241,0.12), transparent 45%);
}

.hero-panel > div:nth-child(3)::after {
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241,0.5), transparent);
}

.hero-panel .stat-value {
  color: #6366F1;
  text-shadow: none;
}

.hero-panel > div:nth-child(2) .stat-value {
  color: #F59E0B;
}

.hero-panel > div:nth-child(3) .stat-value {
  color: #4F46E5;
}

.hero-panel .stat-label {
  color: rgba(15, 23, 42,0.66);
}

/* Hero stats redesenhado: vidro limpo, luz unica e texto forte */
.hero-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(99, 102, 241,0.18);
  background:
    radial-gradient(circle at 18% 18%, rgba(99, 102, 241,0.16), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.24));
  box-shadow:
    0 26px 70px rgba(15, 23, 42,0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(26px) saturate(1.15);
}

.hero-panel::before,
.hero-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.hero-panel::before {
  width: 180px;
  height: 180px;
  right: -72px;
  top: -70px;
  border: 28px solid rgba(99, 102, 241,0.16);
  border-radius: 50%;
  filter: blur(1px);
}

.hero-panel::after {
  width: 210px;
  height: 120px;
  left: -76px;
  bottom: -58px;
  border-radius: 999px;
  background: rgba(15, 23, 42,0.08);
  transform: rotate(-18deg);
}

.hero-panel > div,
.hero-panel > div:nth-child(2),
.hero-panel > div:nth-child(3) {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42,0.08);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.34)),
    radial-gradient(circle at 100% 0%, rgba(99, 102, 241,0.08), transparent 42%);
  box-shadow:
    0 10px 26px rgba(15, 23, 42,0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.hero-panel > div::before {
  content: "";
  position: absolute;
  width: 48px;
  height: 48px;
  right: 12px;
  top: 50%;
  border: 10px solid rgba(99, 102, 241,0.09);
  border-radius: 50%;
  transform: translateY(-50%);
}

.hero-panel > div::after,
.hero-panel > div:nth-child(2)::after,
.hero-panel > div:nth-child(3)::after {
  inset: 0 auto 0 0;
  width: 3px;
  height: auto;
  border-radius: 999px;
  background: #6366F1;
  opacity: 0.9;
}

.hero-panel .stat-value,
.hero-panel > div:nth-child(2) .stat-value,
.hero-panel > div:nth-child(3) .stat-value {
  color: #0F172A;
  font-weight: 950;
  text-shadow: none;
}

.hero-panel .stat-label {
  color: #4338CA;
  font-weight: 950;
  letter-spacing: 0;
}

/* Remocao final dos azuis antigos em hover, scroll e notificações */
:root {
  --list-hover: #EEF2FF;
  --list-hover-strong: #6366F1;
  --list-hover-text: #0F172A;
}

html,
body,
.lyrics-content,
.lyrics-fullscreen-card,
.chord-modal-card,
.scale-modal-card,
.notifications-panel,
.source-picker-panel,
.custom-select-menu {
  scrollbar-color: #6366F1 #EEF2FF;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: #F5F3FF;
}

::-webkit-scrollbar-thumb {
  border: 3px solid #F5F3FF;
  background: #6366F1;
}

::-webkit-scrollbar-thumb:hover {
  background: #4F46E5;
}

.notification-toggle,
.notifications-panel .notification-refresh,
.notification-refresh {
  border-color: #C7D2FE;
  color: #6366F1;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(99, 102, 241,0.1);
}

.notification-toggle:hover,
.notification-toggle[aria-expanded="true"],
.notifications-panel .notification-refresh:hover,
.notification-refresh:hover {
  border-color: #6366F1;
  color: #ffffff;
  background: #6366F1;
  box-shadow: 0 12px 26px rgba(99, 102, 241,0.18);
}

.notification-toggle-icon {
  color: inherit;
  background: rgba(99, 102, 241,0.1);
}

.notification-toggle:hover .notification-toggle-icon,
.notification-toggle[aria-expanded="true"] .notification-toggle-icon {
  background: rgba(255, 255, 255, 0.22);
}

.notification-item.is-unread {
  border-color: #C7D2FE;
  background: #EEF2FF;
}

.icon-button:hover,
.primary-button:hover,
.secondary-button:hover,
.toggle-button:hover,
.table-action:hover,
.song-edit-button:hover,
.saved-load:hover,
.saved-name:hover,
.saved-lyrics:hover,
.song-check:hover,
.song-select-button:hover,
.favorite-button:hover,
.source-option:hover,
.custom-select-option:hover,
.preview-item:hover,
.setlist-item:hover,
.lyrics-song:hover,
.chord-list-button:hover,
.scale-tone-button:hover,
.small-link-button:hover,
.song-link:hover,
.table-link-button:hover {
  border-color: #C7D2FE;
  color: #4338CA;
  background: #EEF2FF;
}

.primary-button:hover,
.toggle-button.is-active,
.song-select-button.is-selected,
.favorite-button.is-favorite,
.favorite-button.is-active {
  border-color: #6366F1;
  color: #ffffff;
  background: #6366F1;
}

.song-card-side .song-link:hover,
.lyrics-scale-button:hover,
.lyrics-transpose-btn:hover,
.lyrics-expand-button:hover,
.lyrics-fullscreen-tools button:hover,
#toggleLyricsPages:hover,
#lyricsSmaller:hover,
#lyricsBigger:hover,
#fullscreenLyricsBigger:hover,
#fullscreenLyricsSmaller:hover,
#fullscreenToggleLyricsPages:hover,
#fullscreenTransposeDown:hover,
#fullscreenTransposeUp:hover,
#fullscreenScaleButton:hover,
#fullscreenToggleAutoScroll:hover,
#fullscreenToggleVideo:hover {
  border-color: #6366F1;
  color: #ffffff;
  background: #6366F1;
}

/* ============================================================
   SIDEBAR DESKTOP - Brand header, ícones e footer de usuário
   ============================================================ */

/* Garante sidebar sempre visível em desktop */
@media (min-width: 761px) {
  .app-nav {
    display: flex;
    flex-direction: column;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .app-nav .nav-button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    justify-content: flex-start;
  }
}

/* Brand header na sidebar */
.nav-brand-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 14px 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
  flex-shrink: 0;
}

.nav-brand-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

.nav-brand-icon svg {
  width: 20px;
  height: 20px;
  color: #ffffff;
  stroke: #ffffff;
}

.nav-brand-name {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.nav-brand-name small {
  font-size: 0.72rem;
  font-weight: 500;
  opacity: 0.7;
}

/* Ícone dentro dos nav-buttons da sidebar */
.nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.85;
}

.nav-button.is-active .nav-icon {
  opacity: 1;
}

/* Footer de usuário na sidebar */
.nav-sidebar-footer {
  margin-top: auto;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}

.nav-sidebar-user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 6px;
  flex-wrap: wrap;
}

.nav-sidebar-user-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-sidebar-user-icon svg {
  width: 15px;
  height: 15px;
  stroke: var(--accent);
}

.nav-sidebar-user-name {
  font-size: 0.78rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 112px;
}

.nav-sidebar-user-info .plan-badge {
  min-height: 22px;
  padding: 3px 7px;
  font-size: 0.62rem;
}

.nav-sidebar-plan-action {
  color: #4338CA;
}

.nav-sidebar-logout,
.nav-sidebar-refresh {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  border: none;
  border-radius: 8px;
  background: none;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.nav-sidebar-logout:hover,
.nav-sidebar-refresh:hover {
  background: rgba(99, 102, 241, 0.08);
}

.nav-sidebar-refresh {
  color: var(--accent-dark);
  font-weight: 700;
}

[data-refresh-app-data].is-refreshing .nav-icon {
  animation: refresh-spin 0.9s linear infinite;
}

@keyframes refresh-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Light theme overrides for sidebar brand/footer */
.nav-brand-header {
  border-bottom-color: #E2E8F0;
}

.nav-sidebar-footer {
  border-top-color: #E2E8F0;
}

.nav-sidebar-user-name {
  color: #334155;
}

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

.profile-photo-editor {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid rgba(124, 58, 237, 0.24);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
}

.profile-photo-editor strong,
.profile-photo-file-meta strong {
  display: block;
  color: var(--text);
  font-weight: 900;
}

.profile-photo-editor span,
.profile-photo-file-meta span {
  display: block;
  margin: 4px 0 10px;
  color: var(--muted);
  font-size: 0.9rem;
}

.profile-photo-preview,
.profile-photo-modal-preview,
.profile-social-avatar,
.vibra-avatar,
.nav-sidebar-user-icon {
  overflow: hidden;
}

.profile-photo-preview,
.profile-photo-modal-preview {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.34), transparent 28%),
    linear-gradient(135deg, #7c3aed, #312e81 58%, #111827);
  color: #ffffff;
  font-weight: 950;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.22);
}

.profile-photo-preview {
  width: 76px;
  height: 76px;
  font-size: 1.65rem;
}

.profile-photo-preview img,
.profile-photo-modal-preview img,
.profile-social-avatar img,
.vibra-avatar img,
.nav-sidebar-user-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-photo-modal {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: 18px;
}

.profile-photo-modal.is-hidden {
  display: none;
}

.profile-photo-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 22, 0.72);
  backdrop-filter: blur(10px);
}

.profile-photo-dialog {
  position: relative;
  width: min(440px, 100%);
  padding: 22px;
  border: 1px solid rgba(139, 92, 246, 0.34);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
}

.profile-photo-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.profile-photo-dialog-head h2 {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1.2;
}

.profile-photo-close {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-strong);
  color: var(--text);
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
}

.profile-photo-modal-preview {
  width: 176px;
  height: 176px;
  margin: 22px auto 14px;
  border: 3px solid rgba(124, 58, 237, 0.42);
  font-size: 3.5rem;
}

.profile-photo-file-meta {
  text-align: center;
}

.profile-photo-message {
  min-height: 22px;
  margin: 12px 0 0;
  color: var(--muted);
  text-align: center;
  font-weight: 700;
}

.profile-photo-message.is-error {
  color: #ef4444;
}

.profile-photo-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

.profile-photo-actions .primary-button,
.profile-photo-actions .secondary-button {
  min-height: 44px;
  justify-content: center;
}

.profile-photo-choose-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.profile-photo-choose-label.is-disabled {
  opacity: 0.62;
  pointer-events: none;
}

.secondary-button.danger {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.35);
}

.secondary-button.danger:hover {
  color: #ffffff;
  border-color: #dc2626;
  background: #dc2626;
}

.secondary-button.is-hidden {
  display: none;
}

.vibra-avatar.has-photo {
  padding: 0;
  border-color: rgba(139, 92, 246, 0.62);
}

.nav-sidebar-user-icon.has-photo {
  background: transparent;
}

@media (max-width: 640px) {
  .profile-photo-editor {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 12px;
  }

  .profile-photo-preview {
    width: 62px;
    height: 62px;
    font-size: 1.35rem;
  }

  .profile-photo-dialog {
    padding: 18px;
    border-radius: 18px;
  }

  .profile-photo-modal-preview {
    width: 148px;
    height: 148px;
  }

  .profile-photo-actions {
    grid-template-columns: 1fr;
  }
}

.nav-sidebar-logout,
.nav-sidebar-refresh {
  color: #64748B;
}

.nav-sidebar-logout:hover,
.nav-sidebar-refresh:hover {
  color: #4338CA;
  background: #EEF2FF;
}

/* ============================================================
   BOTTOM NAV BAR - Mobile only
   ============================================================ */

.bottom-nav-bar,
.bottom-nav-overlay {
  display: none;
}

@media (max-width: 760px) {
  /* Esconde o menu lateral e o hamburguer no mobile */
  .mobile-menu-toggle {
    display: none !important;
  }

  .app-nav {
    display: none !important;
  }

  /* Ajuste do hub de notificações sem o hamburguer */
  .notifications-hub {
    left: 12px !important;
  }

  /* Padding inferior para o bottom nav */
  .app-shell {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ---- Bottom Nav Bar ---- */
  .bottom-nav-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    height: 68px;
    align-items: center;
    justify-content: space-around;
    padding: 0 4px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(15, 23, 42, 0.97);
    border-top: 1px solid rgba(99, 102, 241, 0.2);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
  }

  .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 52px;
    padding: 6px 4px;
    border: none;
    border-radius: 10px;
    background: none;
    color: rgba(148, 163, 184, 0.75);
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .bottom-nav-item svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.8;
  }

  .bottom-nav-item:active {
    background: rgba(99, 102, 241, 0.08);
  }

  .bottom-nav-item.is-active {
    color: #818CF8;
  }

  /* FAB central */
  .bottom-nav-fab {
    width: 54px;
    height: 54px;
    margin-top: -26px;
    border-radius: 50%;
    border: none;
    background: #6366F1;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(99, 102, 241, 0.55), 0 0 0 4px rgba(15, 23, 42, 0.97);
    transition: transform 0.2s ease, background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .bottom-nav-fab svg {
    width: 26px;
    height: 26px;
    transition: transform 0.25s ease;
  }

  .bottom-nav-fab[aria-expanded="true"] {
    background: #4F46E5;
  }

  .bottom-nav-fab[aria-expanded="true"] svg {
    transform: rotate(45deg);
  }

  .bottom-nav-fab:active {
    transform: scale(0.93);
  }

  /* ---- Overlay do overflow ---- */
  .bottom-nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 190;
  }

  .bottom-nav-overlay.is-hidden {
    display: none !important;
  }

  .bottom-nav-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .bottom-nav-overflow-panel {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 76px;
    border-radius: 20px;
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(99, 102, 241, 0.22);
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(99, 102, 241, 0.1);
    padding: 14px 12px 16px;
    backdrop-filter: blur(24px);
    animation: slideUpOverflow 0.22s ease;
  }

  @keyframes slideUpOverflow {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .bottom-nav-overflow-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(99, 102, 241, 0.14);
  }

  .bottom-nav-overflow-head span {
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(148, 163, 184, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.07em;
  }

  .bottom-nav-overflow-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
  }

  .bottom-nav-overflow-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 12px;
    border-radius: 12px;
    border: 1px solid rgba(99, 102, 241, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(248, 250, 252, 0.85);
    font-size: 0.78rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .bottom-nav-overflow-item svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    stroke-width: 1.8;
    opacity: 0.8;
  }

  .bottom-nav-overflow-item:active,
  .bottom-nav-overflow-item:hover {
    background: rgba(99, 102, 241, 0.16);
    border-color: rgba(99, 102, 241, 0.32);
    color: #ffffff;
  }

  .bottom-nav-overflow-item.is-active {
    background: rgba(99, 102, 241, 0.22);
    border-color: #6366F1;
    color: #A5B4FC;
  }

  .bottom-nav-overflow-item.is-active svg {
    opacity: 1;
  }
}

/* Hover e selecionado do menu lateral (desktop) com fundo roxo: texto e icone brancos */
.app-nav .nav-button:hover {
  border-color: #6366F1;
  border-left-color: #6366F1;
  color: #ffffff;
  background: #818CF8;
}

.app-nav .nav-button:hover .nav-icon {
  opacity: 1;
}

.app-nav .nav-button:hover span,
.app-nav .nav-button.is-active span {
  color: #ffffff;
}

/* --- Batucada Didática ------------------------------------------------------- */

.batucada-panel {
  padding: 24px 20px 40px;
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.metronome-panel {
  padding: 24px 20px 40px;
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.metronome-stage {
  min-height: 220px;
  display: grid;
  place-items: center;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(99,102,241,0.06);
  overflow: hidden;
}

.metronome-pendulum {
  width: 170px;
  height: 170px;
  display: grid;
  place-items: center;
  transform-origin: 50% 92%;
  transition: transform 90ms ease;
}

.metronome-pendulum::before {
  content: "";
  width: 4px;
  height: 132px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: var(--neon-glow-soft);
}

.metronome-pendulum span {
  position: absolute;
  bottom: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid var(--accent);
}

.metronome-pendulum.is-running {
  transform: rotate(-16deg);
}

.metronome-pendulum.is-running.is-right {
  transform: rotate(16deg);
}

.metronome-readout {
  position: absolute;
  inset: auto auto 18px auto;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
}

.metronome-readout strong {
  color: var(--ink);
  font-size: 2.4rem;
  line-height: 1;
}

.metronome-beats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
  gap: 10px;
}

.metronome-beat {
  min-height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  background: rgba(99,102,241,0.06);
  font-size: 1.15rem;
  font-weight: 900;
}

.metronome-beat.is-accent {
  border-color: rgba(99,102,241,0.36);
}

.metronome-beat.is-active {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: var(--neon-glow-soft);
}

.metronome-controls,
.metronome-grid-controls,
.metronome-transport {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
}

.metronome-grid-controls {
  flex: 1 1 360px;
}

.metronome-transport {
  justify-content: center;
}

.metronome-transport button {
  min-width: 112px;
}

.batucada-head h2 {
  margin: 4px 0 2px;
  font-size: 1.5rem;
  font-weight: 700;
}

.batucada-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
}

.batucada-bpm-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
  flex: 1;
}

.batucada-bpm-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.batucada-bpm-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.batucada-bpm-number {
  width: 72px;
  background: rgba(99,102,241,0.08);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 700;
  padding: 5px 8px;
  text-align: center;
}

.batucada-bpm-slider {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
}

.batucada-groove-field {
  flex: 1;
  min-width: 180px;
}

.batucada-transport {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* -- Visualizador -- */

.batucada-visualizer {
  background: rgba(99,102,241,0.06);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
}

.batucada-meta {
  display: flex;
  gap: 24px;
  margin-bottom: 18px;
  font-size: 0.85rem;
  color: var(--muted);
}

.batucada-meta strong {
  color: var(--ink);
  font-size: 1rem;
}

.batucada-beats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.batucada-beat {
  background: rgba(99,102,241,0.06);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: background 0.08s, border-color 0.08s;
}

.batucada-beat.is-active {
  background: rgba(99,102,241,0.22);
  border-color: var(--accent);
  box-shadow: var(--neon-glow-soft);
}

.batucada-beat-number {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--muted);
  line-height: 1;
  transition: color 0.08s;
}

.batucada-beat.is-active .batucada-beat-number {
  color: var(--accent);
}

.batucada-subdivs {
  display: flex;
  gap: 5px;
}

.batucada-subdiv {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(99,102,241,0.2);
  border: 1px solid var(--line);
  transition: background 0.04s, border-color 0.04s, transform 0.04s;
}

.batucada-subdiv.is-active {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.35);
  box-shadow: 0 0 8px rgba(99,102,241,0.6);
}

/* -- Mixer -- */

.batucada-mixer {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.batucada-mixer-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.batucada-mixer-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.batucada-channel {
  display: grid;
  grid-template-columns: 100px 1fr 30px 30px;
  align-items: center;
  gap: 8px;
  background: rgba(99,102,241,0.06);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 14px;
}

.batucada-channel-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
}

.batucada-channel-volume {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
}

.batucada-mute-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.batucada-mute-btn.is-muted {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.batucada-solo-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.batucada-solo-btn.is-solo {
  background: #f59e0b;
  color: #fff;
  border-color: #f59e0b;
}

.batucada-instr-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  margin-right: 6px;
  vertical-align: middle;
  transition: background 0.08s, box-shadow 0.08s;
  flex-shrink: 0;
}

.batucada-instr-dot.is-active {
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}

.batucada-kit-status {
  font-size: 0.72rem;
  color: var(--muted);
  background: var(--surface-2, rgba(0,0,0,.06));
  border-radius: 4px;
  padding: 2px 8px;
}

.batucada-load-status {
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
}

.batucada-hint {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 2px 0 0;
}

.batucada-hint strong {
  color: var(--ink);
  font-weight: 700;
}

@media (max-width: 540px) {
  .batucada-beats {
    grid-template-columns: repeat(2, 1fr);
  }
  .batucada-channel {
    grid-template-columns: 80px 1fr 28px 28px;
    gap: 6px;
    padding: 8px 10px;
  }
}

/* Cabecalho fixo no topo */
.app-shell {
  padding-top: 92px;
}

.top-session {
  position: fixed !important;
  top: 12px !important;
  left: max(236px, calc((100vw - 1180px) / 2)) !important;
  right: max(20px, calc((100vw - 1180px) / 2)) !important;
  z-index: 260 !important;
  display: flex;
  justify-content: flex-end;
  width: auto;
  min-height: 48px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(18px) saturate(160%);
}

@media (max-width: 760px) {
  .app-shell {
    padding-top: 82px !important;
  }

  .top-session {
    top: 10px !important;
    left: 12px !important;
    right: 12px !important;
    min-height: 46px;
  }
}

/* Cabecalho fixo dentro do menu lateral */
@media (min-width: 761px) {
  .app-nav {
    padding-top: 0 !important;
  }

  .nav-brand-header {
    position: sticky;
    top: 0;
    z-index: 4;
    margin: 0 -12px 8px;
    padding: 16px 14px 18px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px) saturate(150%);
  }
}

.mobile-menu-toggle {
  display: none !important;
}

/* Tema claro/escuro */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.9);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
}

.theme-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.theme-switch-track {
  position: relative;
  width: 44px;
  height: 24px;
  flex: 0 0 44px;
  border-radius: 999px;
  background: #CBD5E1;
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.2);
  transition: background 0.18s ease;
}

.theme-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.28);
  transition: transform 0.18s ease;
}

.theme-switch input:checked + .theme-switch-track {
  background: #6366F1;
}

.theme-switch input:checked + .theme-switch-track .theme-switch-thumb {
  transform: translateX(20px);
}

body[data-theme="dark"] {
  color-scheme: dark;
  --ink: #F8FAFC;
  --muted: #94A3B8;
  --line: rgba(129, 140, 248, 0.28);
  --panel: rgba(15, 23, 42, 0.94);
  --soft: rgba(129, 140, 248, 0.14);
  --accent: #818CF8;
  --accent-dark: #A5B4FC;
  --list-hover: rgba(129, 140, 248, 0.18);
  --list-hover-strong: #818CF8;
  --list-hover-text: #ffffff;
  --deep-bg: #0F172A;
  --deep-bg-2: #111827;
  --shadow: 0 22px 58px rgba(0, 0, 0, 0.38);
  background:
    radial-gradient(circle at 16% 12%, rgba(99, 102, 241, 0.22), transparent 28%),
    radial-gradient(circle at 80% 8%, rgba(129, 140, 248, 0.2), transparent 24%),
    linear-gradient(135deg, #0F172A 0%, #111827 52%, #0B1120 100%);
}

body[data-theme="dark"]::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 24%),
    radial-gradient(circle at 96% 45%, rgba(99, 102, 241, 0.18), transparent 18%);
}

body[data-theme="dark"] .auth-card,
body[data-theme="dark"] .hero-panel,
body[data-theme="dark"] .toolbar,
body[data-theme="dark"] .setlist-panel,
body[data-theme="dark"] .saved-repertoires-panel,
body[data-theme="dark"] .share-panel,
body[data-theme="dark"] .indicators-panel,
body[data-theme="dark"] .lyrics-panel,
body[data-theme="dark"] .tuner-panel,
body[data-theme="dark"] .solo-panel,
body[data-theme="dark"] .detector-panel,
body[data-theme="dark"] .chord-panel,
body[data-theme="dark"] .scale-library-panel,
body[data-theme="dark"] .music-library,
body[data-theme="dark"] .music-form-panel,
body[data-theme="dark"] .notifications-panel,
body[data-theme="dark"] .preview-item,
body[data-theme="dark"] .saved-item,
body[data-theme="dark"] .song-card,
body[data-theme="dark"] .chord-card,
body[data-theme="dark"] .lyrics-song,
body[data-theme="dark"] .confirm-modal-card,
body[data-theme="dark"] .custom-select-menu,
body[data-theme="dark"] .music-import-panel,
body[data-theme="dark"] .event-card,
body[data-theme="dark"] .indicator-card,
body[data-theme="dark"] .share-card,
body[data-theme="dark"] .scale-viewer,
body[data-theme="dark"] .detector-result-card,
body[data-theme="dark"] .detector-current,
body[data-theme="dark"] .chord-list-button,
body[data-theme="dark"] .repertoire-preview,
body[data-theme="dark"] .setlist-song,
body[data-theme="dark"] .audio-library-item,
body[data-theme="dark"] table,
body[data-theme="dark"] tbody tr {
  border-color: var(--line);
  color: var(--ink);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(17, 24, 39, 0.94));
  box-shadow: var(--shadow);
}

body[data-theme="dark"] .top-session,
body[data-theme="dark"] .app-nav,
body[data-theme="dark"] .nav-brand-header {
  border-color: var(--line);
  background: rgba(15, 23, 42, 0.94);
  color: var(--ink);
}

body[data-theme="dark"] .theme-switch {
  border-color: rgba(129, 140, 248, 0.34);
  background: rgba(15, 23, 42, 0.78);
  color: #CBD5E1;
}

body[data-theme="dark"] .nav-session-user {
  color: #0F172A;
  background: #A5B4FC;
}

body[data-theme="dark"] .nav-logout-button,
body[data-theme="dark"] .secondary-button,
body[data-theme="dark"] .toggle-button,
body[data-theme="dark"] .icon-button,
body[data-theme="dark"] .table-action,
body[data-theme="dark"] .song-edit-button,
body[data-theme="dark"] .favorite-button,
body[data-theme="dark"] .song-select-button,
body[data-theme="dark"] .song-link,
body[data-theme="dark"] .small-link-button,
body[data-theme="dark"] .saved-load,
body[data-theme="dark"] .saved-name,
body[data-theme="dark"] .saved-delete,
body[data-theme="dark"] .lyrics-expand-button,
body[data-theme="dark"] .lyrics-scale-button,
body[data-theme="dark"] .lyrics-transpose-btn {
  border-color: rgba(129, 140, 248, 0.34);
  color: #E0E7FF;
  background: rgba(30, 41, 59, 0.9);
}

body[data-theme="dark"] .primary-button,
body[data-theme="dark"] .toggle-button.is-active,
body[data-theme="dark"] .secondary-button.is-active,
body[data-theme="dark"] .song-select-button.is-selected,
body[data-theme="dark"] .favorite-button.is-active,
body[data-theme="dark"] .nav-button.is-active {
  border-color: #818CF8;
  color: #ffffff;
  background: #6366F1;
}

body[data-theme="dark"] input,
body[data-theme="dark"] textarea,
body[data-theme="dark"] select,
body[data-theme="dark"] .custom-select-trigger,
body[data-theme="dark"] .search-field input,
body[data-theme="dark"] .name-field input,
body[data-theme="dark"] .name-field textarea,
body[data-theme="dark"] .name-field select,
body[data-theme="dark"] .range-field input {
  border-color: rgba(129, 140, 248, 0.28);
  color: var(--ink);
  background-color: rgba(15, 23, 42, 0.88);
}

body[data-theme="dark"] .library-head h2,
body[data-theme="dark"] .music-form-head h2,
body[data-theme="dark"] .saved-head h2,
body[data-theme="dark"] .lyrics-head h2,
body[data-theme="dark"] .chord-head h2,
body[data-theme="dark"] .preview-title,
body[data-theme="dark"] .song-title,
body[data-theme="dark"] .lyrics-song h3,
body[data-theme="dark"] .chord-card-head strong,
body[data-theme="dark"] .stat-value {
  color: #F8FAFC;
}

body[data-theme="dark"] .song-artist,
body[data-theme="dark"] .eyebrow,
body[data-theme="dark"] .eyebrow.dark,
body[data-theme="dark"] .field-icon,
body[data-theme="dark"] .stat-label {
  color: #A5B4FC;
}

body[data-theme="dark"] .saved-empty,
body[data-theme="dark"] .empty-state,
body[data-theme="dark"] .song-tags span,
body[data-theme="dark"] .lyrics-song p,
body[data-theme="dark"] .preview-empty,
body[data-theme="dark"] .chart-empty,
body[data-theme="dark"] .custom-select-option,
body[data-theme="dark"] td::before,
body[data-theme="dark"] th {
  color: var(--muted);
}

@media (max-width: 520px) {
  .theme-switch {
    gap: 5px;
    padding-inline: 6px;
  }

  .theme-switch-label {
    display: none;
  }
}

/* Polimento final do modo escuro */
body[data-theme="dark"] .app-nav .nav-button,
body[data-theme="dark"] .bottom-nav-overflow-item,
body[data-theme="dark"] .bottom-nav-item {
  border-color: rgba(129, 140, 248, 0.3) !important;
  color: #DDE6FF !important;
  background: rgba(15, 23, 42, 0.88) !important;
  box-shadow: inset 3px 0 0 rgba(129, 140, 248, 0.35);
}

body[data-theme="dark"] .app-nav .nav-button:hover,
body[data-theme="dark"] .bottom-nav-overflow-item:hover,
body[data-theme="dark"] .bottom-nav-item:hover {
  border-color: rgba(165, 180, 252, 0.56) !important;
  color: #ffffff !important;
  background: rgba(30, 41, 59, 0.96) !important;
}

body[data-theme="dark"] .app-nav .nav-button.is-active,
body[data-theme="dark"] .bottom-nav-item.is-active {
  border-color: #818CF8 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #6366F1, #4F46E5) !important;
  box-shadow: 0 14px 30px rgba(79, 70, 229, 0.32);
}

body[data-theme="dark"] .nav-brand-name,
body[data-theme="dark"] .nav-sidebar-user-name {
  color: #E0E7FF !important;
}

body[data-theme="dark"] .plan-badge.plan-free {
  color: #CBD5E1 !important;
  background: rgba(30, 41, 59, 0.82) !important;
  border-color: rgba(148, 163, 184, 0.34) !important;
}

body[data-theme="dark"] .plan-badge.plan-plus {
  color: #E0E7FF !important;
  background: rgba(79, 70, 229, 0.42) !important;
  border-color: rgba(165, 180, 252, 0.52) !important;
}

body[data-theme="dark"] .toolbar,
body[data-theme="dark"] .results-head,
body[data-theme="dark"] .song-card,
body[data-theme="dark"] .carousel-card,
body[data-theme="dark"] .table-wrap,
body[data-theme="dark"] .save-repertoire,
body[data-theme="dark"] .setlist-item,
body[data-theme="dark"] .share-form,
body[data-theme="dark"] .share-identity,
body[data-theme="dark"] .share-person,
body[data-theme="dark"] .notification-item {
  border-color: rgba(129, 140, 248, 0.32) !important;
  background: rgba(15, 23, 42, 0.82) !important;
}

body[data-theme="dark"] .search-field,
body[data-theme="dark"] .select-field,
body[data-theme="dark"] .favorite-filter-toggle,
body[data-theme="dark"] .custom-select,
body[data-theme="dark"] .custom-select-button {
  color: #E5E7EB !important;
}

body[data-theme="dark"] .search-field {
  border-color: rgba(165, 180, 252, 0.42) !important;
  background: rgba(17, 24, 39, 0.96) !important;
  box-shadow: none !important;
}

body[data-theme="dark"] .search-field .field-icon {
  color: #A5B4FC !important;
}

body[data-theme="dark"] .search-field input,
body[data-theme="dark"] .select-field select,
body[data-theme="dark"] .name-field input,
body[data-theme="dark"] .custom-select-trigger,
body[data-theme="dark"] .custom-select-button,
body[data-theme="dark"] .toolbar input,
body[data-theme="dark"] .toolbar select {
  border-color: rgba(165, 180, 252, 0.42) !important;
  color: #F8FAFC !important;
  background: rgba(17, 24, 39, 0.96) !important;
  box-shadow: none !important;
}

body[data-theme="dark"] .search-field input::placeholder,
body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder {
  color: #94A3B8 !important;
  opacity: 1;
}

body[data-theme="dark"] select option {
  color: #F8FAFC;
  background: #111827;
}

body[data-theme="dark"] .select-field span,
body[data-theme="dark"] .name-field span,
body[data-theme="dark"] .range-field span,
body[data-theme="dark"] .favorite-filter-text,
body[data-theme="dark"] .results-head span,
body[data-theme="dark"] #activeFilters,
body[data-theme="dark"] .activeFilters {
  color: #A5B4FC !important;
}

body[data-theme="dark"] .favorite-filter-toggle {
  border-color: rgba(165, 180, 252, 0.42) !important;
  background: rgba(17, 24, 39, 0.96) !important;
}

body[data-theme="dark"] .favorite-filter-switch {
  background: #334155 !important;
}

body[data-theme="dark"] .favorite-filter-switch::after {
  background: #E0E7FF !important;
}

body[data-theme="dark"] .favorite-filter-toggle.is-active .favorite-filter-switch {
  background: #6366F1 !important;
}

body[data-theme="dark"] .excerpt,
body[data-theme="dark"] .carousel-excerpt,
body[data-theme="dark"] .song-card p,
body[data-theme="dark"] .setlist-head span,
body[data-theme="dark"] .setlist-empty,
body[data-theme="dark"] .save-message,
body[data-theme="dark"] .audio-library-item-meta span,
body[data-theme="dark"] .share-head span,
body[data-theme="dark"] .share-identity span,
body[data-theme="dark"] .share-person span,
body[data-theme="dark"] .saved-name span,
body[data-theme="dark"] .saved-table-song span,
body[data-theme="dark"] .event-item span,
body[data-theme="dark"] .event-request-item span,
body[data-theme="dark"] .indicator-card small,
body[data-theme="dark"] .share-card-head span {
  color: #CBD5E1 !important;
}

body[data-theme="dark"] .song-tags span,
body[data-theme="dark"] .tag,
body[data-theme="dark"] .audio-library-badge,
body[data-theme="dark"] .shared-pill,
body[data-theme="dark"] .favorite-badge {
  border-color: rgba(165, 180, 252, 0.46) !important;
  color: #E0E7FF !important;
  background: rgba(30, 41, 59, 0.86) !important;
}

body[data-theme="dark"] .secondary-button,
body[data-theme="dark"] .icon-button,
body[data-theme="dark"] .text-button,
body[data-theme="dark"] .toggle-button,
body[data-theme="dark"] .table-action,
body[data-theme="dark"] .song-edit-button,
body[data-theme="dark"] .song-link,
body[data-theme="dark"] .small-link-button,
body[data-theme="dark"] .saved-load,
body[data-theme="dark"] .saved-name,
body[data-theme="dark"] .saved-delete,
body[data-theme="dark"] .favorite-button,
body[data-theme="dark"] .song-select-button,
body[data-theme="dark"] .share-person button {
  border-color: rgba(165, 180, 252, 0.42) !important;
  color: #E0E7FF !important;
  background: rgba(30, 41, 59, 0.92) !important;
}

body[data-theme="dark"] .secondary-button:hover,
body[data-theme="dark"] .icon-button:hover,
body[data-theme="dark"] .text-button:hover,
body[data-theme="dark"] .toggle-button:hover,
body[data-theme="dark"] .table-action:hover,
body[data-theme="dark"] .song-edit-button:hover,
body[data-theme="dark"] .song-link:hover,
body[data-theme="dark"] .small-link-button:hover,
body[data-theme="dark"] .saved-load:hover,
body[data-theme="dark"] .saved-name:hover,
body[data-theme="dark"] .saved-delete:hover,
body[data-theme="dark"] .favorite-button:hover,
body[data-theme="dark"] .song-select-button:hover,
body[data-theme="dark"] .share-person button:hover {
  border-color: #A5B4FC !important;
  color: #ffffff !important;
  background: rgba(79, 70, 229, 0.62) !important;
}

body[data-theme="dark"] table,
body[data-theme="dark"] thead,
body[data-theme="dark"] tbody tr,
body[data-theme="dark"] .saved-modal-table th,
body[data-theme="dark"] .saved-modal-table td {
  border-color: rgba(129, 140, 248, 0.28) !important;
}

body[data-theme="dark"] thead,
body[data-theme="dark"] th {
  color: #E0E7FF !important;
  background: rgba(30, 41, 59, 0.96) !important;
}

body[data-theme="dark"] .custom-select-menu,
body[data-theme="dark"] .source-picker-panel,
body[data-theme="dark"] .notifications-panel,
body[data-theme="dark"] .bottom-nav-overflow-panel {
  border-color: rgba(165, 180, 252, 0.36) !important;
  color: #F8FAFC !important;
  background: rgba(15, 23, 42, 0.98) !important;
}

body[data-theme="dark"] .custom-select-option {
  color: #CBD5E1 !important;
  background: transparent !important;
}

body[data-theme="dark"] .custom-select-option:hover,
body[data-theme="dark"] .custom-select-option.is-selected {
  color: #ffffff !important;
  background: rgba(79, 70, 229, 0.52) !important;
}

body[data-theme="dark"] .share-identity strong,
body[data-theme="dark"] .share-person strong,
body[data-theme="dark"] .share-card-head h3 {
  color: #F8FAFC !important;
}

body[data-theme="dark"] .share-identity {
  box-shadow: none !important;
}

body[data-theme="dark"] .share-person .shared-pill {
  border-color: rgba(165, 180, 252, 0.48) !important;
  color: #E0E7FF !important;
  background: rgba(79, 70, 229, 0.34) !important;
}

/* Auditoria global: remove sobras claras em todas as abas */
body[data-theme="dark"] :where(
  .app-section,
  .auth-card,
  .top-session,
  .app-nav,
  .nav-brand-header,
  .toolbar,
  .music-form,
  .music-form-panel,
  .save-repertoire,
  .share-form,
  .event-form,
  .source-picker-panel,
  .custom-select-menu,
  .notifications-panel,
  .saved-repertoire-dialog,
  .vincular-audio-dialog,
  .chord-modal-card,
  .scale-modal-card,
  .confirm-modal-card,
  .lyrics-fullscreen-card,
  .repertoire-preview,
  .event-detail,
  .event-qr-wrap,
  .audio-library-item,
  .audio-player-section-item,
  .indicator-card,
  .share-card,
  .event-card,
  .saved-item,
  .saved-block,
  .saved-block-head,
  .preview-item,
  .setlist-item,
  .song-card,
  .carousel-card,
  .table-wrap,
  .share-person,
  .event-item,
  .event-request-item,
  .notification-item,
  .detector-current,
  .detector-result-card,
  .kd-candidate,
  .scale-viewer,
  .chord-card,
  .chord-list-button,
  .lyrics-song,
  .batucada-visualizer,
  .batucada-beat,
  .batucada-channel
) {
  border-color: rgba(129, 140, 248, 0.32) !important;
  color: #F8FAFC !important;
  background-color: rgba(15, 23, 42, 0.88) !important;
  background-image: none !important;
}

body[data-theme="dark"] :where(
  input,
  textarea,
  select,
  .search-field,
  .search-field input,
  .select-field select,
  .name-field input,
  .name-field textarea,
  .name-field select,
  .range-field input,
  .custom-select-trigger,
  .custom-select-button,
  .event-link-row input,
  .saved-block-picker select,
  .audio-player-progress,
  .audio-player-volume input,
  .batucada-bpm-number
) {
  border-color: rgba(165, 180, 252, 0.42) !important;
  color: #F8FAFC !important;
  background-color: rgba(17, 24, 39, 0.96) !important;
  background-image: none !important;
}

body[data-theme="dark"] :where(
  .primary-button,
  .secondary-button,
  .icon-button,
  .text-button,
  .toggle-button,
  .table-action,
  .song-edit-button,
  .song-link,
  .small-link-button,
  .saved-load,
  .saved-name,
  .saved-delete,
  .favorite-button,
  .song-select-button,
  .setlist-actions button,
  .share-person button,
  .event-qr-actions button,
  .audio-player-btn,
  .batucada-transport button
) {
  border-color: rgba(165, 180, 252, 0.42) !important;
  color: #E0E7FF !important;
  background-color: rgba(30, 41, 59, 0.92) !important;
  background-image: none !important;
}

body[data-theme="dark"] :where(
  .primary-button,
  .toggle-button.is-active,
  .secondary-button.is-active,
  .song-select-button.is-selected,
  .favorite-button.is-active,
  .nav-button.is-active,
  .custom-select-option.is-selected,
  .event-item.is-active,
  .kd-candidate.is-best
) {
  border-color: #818CF8 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #6366F1, #4F46E5) !important;
}

body[data-theme="dark"] :where(
  h1,
  h2,
  h3,
  h4,
  strong,
  .song-title,
  .preview-title,
  .stat-value,
  .modalChordName
) {
  color: #F8FAFC !important;
}

body[data-theme="dark"] :where(
  p,
  small,
  em,
  th,
  td,
  label,
  .subtitle,
  .excerpt,
  .carousel-excerpt,
  .saved-empty,
  .empty-state,
  .preview-empty,
  .chart-empty,
  .setlist-empty,
  .save-message,
  .share-card-head span,
  .share-person span,
  .event-item span,
  .event-request-item span,
  .audio-library-item-meta span,
  .saved-table-song span,
  .lyrics-missing,
  .detector-section-label,
  .kd-candidate-pt,
  .kd-candidate-pct
) {
  color: #CBD5E1 !important;
}

body[data-theme="dark"] :where(
  .eyebrow,
  .eyebrow.dark,
  .field-icon,
  .select-field span,
  .name-field span,
  .range-field span,
  .stat-label,
  .song-artist,
  .share-identity strong,
  .audio-player-detected-key
) {
  color: #A5B4FC !important;
}

body[data-theme="dark"] :where(
  .tag,
  .song-tags span,
  .shared-pill,
  .favorite-badge,
  .audio-library-badge,
  .confirm-modal-chip,
  .batucada-kit-status
) {
  border-color: rgba(165, 180, 252, 0.46) !important;
  color: #E0E7FF !important;
  background-color: rgba(30, 41, 59, 0.86) !important;
  background-image: none !important;
}

body[data-theme="dark"] :where(thead, th) {
  color: #E0E7FF !important;
  background-color: rgba(30, 41, 59, 0.96) !important;
  background-image: none !important;
}

body[data-theme="dark"] :where(.music-save-overlay, .saved-repertoire-modal-backdrop, .confirm-modal-backdrop, .vincular-audio-modal-backdrop, .scale-modal-backdrop, .chord-modal-backdrop) {
  background: rgba(2, 6, 23, 0.72) !important;
}

/* Ajuste fino da barra de filtros */
.toolbar {
  grid-template-columns: minmax(360px, 1.7fr) repeat(4, minmax(170px, 1fr)) minmax(160px, 180px);
  align-items: end;
}

.search-field {
  min-width: 360px;
}

.search-field .field-icon {
  font-size: 1.08rem;
}

.search-field input {
  font-size: 0.92rem;
}

.favorite-filter-toggle {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  justify-content: flex-start;
  gap: 7px;
  padding: 7px 9px;
  overflow: hidden;
  font-size: 0.68rem;
  line-height: 1.05;
  letter-spacing: 0.01em;
}

.favorite-filter-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
}

.favorite-filter-switch {
  width: 32px;
  height: 18px;
  flex-basis: 32px;
}

.favorite-filter-switch::after {
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
}

.favorite-filter-toggle.is-active .favorite-filter-switch::after {
  transform: translateX(14px);
}

.toolbar .icon-button,
.toolbar .text-button,
.toolbar .secondary-button,
.results-actions .secondary-button,
.view-toggle .toggle-button {
  min-height: 38px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 750;
  box-shadow: none !important;
  text-transform: none;
}

body[data-theme="dark"] .toolbar .icon-button,
body[data-theme="dark"] .toolbar .text-button,
body[data-theme="dark"] .toolbar .secondary-button,
body[data-theme="dark"] .results-actions .secondary-button,
body[data-theme="dark"] .view-toggle .toggle-button {
  border-color: rgba(129, 140, 248, 0.36) !important;
  background: rgba(30, 41, 59, 0.78) !important;
  box-shadow: none !important;
}

body[data-theme="dark"] #clearFilters {
  border-color: rgba(129, 140, 248, 0.36) !important;
  background: rgba(30, 41, 59, 0.78) !important;
  box-shadow: none !important;
}

body[data-theme="dark"] .theme-switch,
body[data-theme="dark"] .theme-switch-label {
  color: #ffffff !important;
}

@media (max-width: 1180px) {
  .toolbar {
    grid-template-columns: minmax(320px, 1.4fr) repeat(2, minmax(170px, 1fr));
  }

  .favorite-filter-toggle {
    max-width: 220px;
  }
}

@media (max-width: 760px) {
  .toolbar {
    grid-template-columns: 1fr;
  }

  .search-field {
    min-width: 0;
  }

  .favorite-filter-toggle {
    max-width: none;
  }
}

/* Favoritas em segunda linha e banner inicial no escuro */
.toolbar .favorite-filter-toggle {
  grid-column: 1 / span 2;
  width: min(260px, 100%);
}

.toolbar #clearFilters {
  grid-column: 3 / span 1;
  width: min(180px, 100%);
}

body[data-theme="dark"] .hero {
  border-color: rgba(129, 140, 248, 0.34) !important;
  color: #F8FAFC !important;
  background:
    linear-gradient(100deg, rgba(15, 23, 42, 0.98) 0 56%, rgba(30, 41, 59, 0.94) 56% 100%),
    radial-gradient(circle at 78% 28%, rgba(99, 102, 241, 0.34), transparent 24%),
    radial-gradient(circle at 94% 16%, rgba(165, 180, 252, 0.22), transparent 22%),
    #0F172A !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.38) !important;
}

body[data-theme="dark"] .hero::before {
  background:
    linear-gradient(90deg, transparent 0 4%, #6366F1 4% 22%, transparent 22% 33%, #818CF8 33% 56%, transparent 56% 66%, #A5B4FC 66% 82%, transparent 82% 100%),
    linear-gradient(90deg, transparent 0 83%, #4F46E5 83% 100%) !important;
  opacity: 0.7;
}

body[data-theme="dark"] .hero::after {
  background: #020617 !important;
  box-shadow:
    120px 84px 0 38px #020617,
    -8px 142px 0 -44px #6366F1 !important;
}

body[data-theme="dark"] .hero h1,
body[data-theme="dark"] .hero .subtitle,
body[data-theme="dark"] .hero-view-context {
  color: #F8FAFC !important;
}

body[data-theme="dark"] .hero-source-box {
  border-color: rgba(165, 180, 252, 0.34) !important;
  background: rgba(15, 23, 42, 0.72) !important;
}

@media (max-width: 1180px) {
  .toolbar .favorite-filter-toggle,
  .toolbar #clearFilters {
    grid-column: auto;
  }
}

/* Afinador no modo escuro */
body[data-theme="dark"] .tuner-panel {
  border-color: rgba(129, 140, 248, 0.34) !important;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(11, 18, 32, 0.96)) !important;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.34) !important;
}

body[data-theme="dark"] .tuner-head h2 {
  color: #F8FAFC !important;
}

body[data-theme="dark"] .tuner-head > div > span {
  color: #CBD5E1 !important;
}

body[data-theme="dark"] .tuner-meter {
  border-color: rgba(129, 140, 248, 0.36) !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(99, 102, 241, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(17, 24, 39, 0.96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 34px rgba(0, 0, 0, 0.32) !important;
}

body[data-theme="dark"] .tuner-meter.is-tuned {
  border-color: rgba(129, 140, 248, 0.68) !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(129, 140, 248, 0.24), transparent 35%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(17, 24, 39, 0.96)) !important;
}

body[data-theme="dark"] .meter-scale {
  color: rgba(203, 213, 225, 0.48) !important;
}

body[data-theme="dark"] .meter-scale span:nth-child(3) {
  color: rgba(165, 180, 252, 0.88) !important;
}

body[data-theme="dark"] .meter-arc::before {
  border-top-color: rgba(203, 213, 225, 0.18) !important;
}

body[data-theme="dark"] .meter-arc::after {
  border-top-color: rgba(203, 213, 225, 0.1) !important;
}

body[data-theme="dark"] .meter-arc span {
  background: rgba(203, 213, 225, 0.32) !important;
}

body[data-theme="dark"] .meter-arc span:nth-child(2n) {
  background: rgba(203, 213, 225, 0.2) !important;
}

body[data-theme="dark"] .meter-arc span:nth-child(1),
body[data-theme="dark"] .meter-arc span:nth-child(11) {
  background: rgba(203, 213, 225, 0.44) !important;
}

body[data-theme="dark"] .meter-arc span.is-center {
  background: #A5B4FC !important;
  box-shadow: 0 0 18px rgba(129, 140, 248, 0.32) !important;
}

body[data-theme="dark"] .meter-side-label {
  color: rgba(203, 213, 225, 0.62) !important;
}

body[data-theme="dark"] .meter-needle,
body[data-theme="dark"] .tuner-meter.is-tuned .meter-needle,
body[data-theme="dark"] .tuner-meter.is-flat .meter-needle,
body[data-theme="dark"] .tuner-meter.is-sharp .meter-needle {
  background: #A5B4FC !important;
  box-shadow: 0 0 18px rgba(129, 140, 248, 0.36) !important;
}

body[data-theme="dark"] .meter-center,
body[data-theme="dark"] .tuner-meter.is-tuned .meter-center,
body[data-theme="dark"] .tuner-meter.is-flat .meter-center,
body[data-theme="dark"] .tuner-meter.is-sharp .meter-center {
  border-color: rgba(165, 180, 252, 0.42) !important;
  background: #A5B4FC !important;
  box-shadow:
    0 0 0 3px rgba(2, 6, 23, 0.75),
    0 0 22px rgba(129, 140, 248, 0.34) !important;
}

body[data-theme="dark"] .meter-center::after {
  background: #0F172A !important;
}

body[data-theme="dark"] .meter-readout strong {
  color: #C7D2FE !important;
}

body[data-theme="dark"] .meter-readout span {
  color: #CBD5E1 !important;
}

body[data-theme="dark"] .meter-readout #tunerOctave {
  color: #A5B4FC !important;
}

body[data-theme="dark"] .note-strip span {
  color: rgba(203, 213, 225, 0.56) !important;
}

body[data-theme="dark"] .note-strip span.is-active {
  color: #C7D2FE !important;
  text-shadow: 0 0 14px rgba(129, 140, 248, 0.38);
}

body[data-theme="dark"] .tuner-status,
body[data-theme="dark"] .tuner-detail-grid > div {
  border-color: rgba(129, 140, 248, 0.34) !important;
  color: #E5E7EB !important;
  background: rgba(17, 24, 39, 0.9) !important;
  box-shadow: none !important;
}

body[data-theme="dark"] .tuner-status {
  color: #F8FAFC !important;
}

body[data-theme="dark"] .tuner-detail-grid span {
  color: #A5B4FC !important;
}

body[data-theme="dark"] .tuner-detail-grid strong {
  color: #F8FAFC !important;
}

/* Letra em tela cheia no modo escuro */
body[data-theme="dark"] .lyrics-fullscreen-backdrop {
  background: rgba(2, 6, 23, 0.82) !important;
  backdrop-filter: blur(12px);
}

body[data-theme="dark"] .lyrics-fullscreen-card {
  border-color: rgba(129, 140, 248, 0.34) !important;
  color: #F8FAFC !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(99, 102, 241, 0.18), transparent 28%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(11, 18, 32, 0.98)) !important;
  box-shadow: 0 32px 86px rgba(0, 0, 0, 0.58) !important;
}

body[data-theme="dark"] .lyrics-fullscreen-card header {
  border-bottom-color: rgba(129, 140, 248, 0.3) !important;
}

body[data-theme="dark"] .lyrics-fullscreen-card h2 {
  color: #F8FAFC !important;
}

body[data-theme="dark"] .lyrics-fullscreen-card header p,
body[data-theme="dark"] .lyrics-fullscreen-card header span,
body[data-theme="dark"] .lyrics-fullscreen-tools span {
  color: #CBD5E1 !important;
}

body[data-theme="dark"] #lyricsFullscreenMeta,
body[data-theme="dark"] #lyricsFullscreenToneDetails span {
  color: #A5B4FC !important;
}

body[data-theme="dark"] #lyricsFullscreenToneDetails .lyrics-tone-details {
  gap: 5px;
  margin-top: 8px;
}

body[data-theme="dark"] #lyricsFullscreenToneDetails .lyrics-tone-details span {
  display: block;
  border: 0 !important;
  color: #C7D2FE !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-theme="dark"] #lyricsFullscreenToneDetails .lyrics-tone-details strong {
  color: #A5B4FC !important;
}

body[data-theme="dark"] .lyrics-fullscreen-close {
  color: #E0E7FF !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-theme="dark"] .lyrics-fullscreen-lyrics-col {
  border-left-color: rgba(129, 140, 248, 0.28) !important;
}

body[data-theme="dark"] .lyrics-fullscreen-body.player-collapsed .lyrics-fullscreen-lyrics-col {
  border-left-color: transparent !important;
}

body[data-theme="dark"] .lyrics-fullscreen-card pre {
  color: #F8FAFC !important;
  background: rgba(2, 6, 23, 0.18) !important;
  text-shadow: none !important;
  scrollbar-color: #818CF8 rgba(15, 23, 42, 0.96);
}

body[data-theme="dark"] .lyrics-fullscreen-card pre .lyrics-chord {
  color: #C7D2FE !important;
  text-shadow: 0 0 14px rgba(129, 140, 248, 0.34) !important;
}

body[data-theme="dark"] .lyrics-fullscreen-tools .range-field,
body[data-theme="dark"] .lyrics-fullscreen-tools .select-field {
  border-color: rgba(129, 140, 248, 0.3) !important;
  background: rgba(15, 23, 42, 0.72) !important;
}

body[data-theme="dark"] .lyrics-fullscreen-tools button,
body[data-theme="dark"] #fullscreenToggleLyricsPages,
body[data-theme="dark"] #fullscreenToggleVideo,
body[data-theme="dark"] #fullscreenTransposeDown,
body[data-theme="dark"] #fullscreenTransposeUp,
body[data-theme="dark"] #fullscreenSaveTone,
body[data-theme="dark"] #fullscreenScaleButton,
body[data-theme="dark"] #fullscreenLyricsBigger,
body[data-theme="dark"] #fullscreenLyricsSmaller {
  border-color: rgba(165, 180, 252, 0.4) !important;
  color: #E0E7FF !important;
  background: rgba(30, 41, 59, 0.86) !important;
  box-shadow: none !important;
}

body[data-theme="dark"] .lyrics-fullscreen-tools button:hover,
body[data-theme="dark"] #fullscreenToggleLyricsPages:hover,
body[data-theme="dark"] #fullscreenToggleVideo:hover,
body[data-theme="dark"] #fullscreenTransposeDown:hover,
body[data-theme="dark"] #fullscreenTransposeUp:hover,
body[data-theme="dark"] #fullscreenSaveTone:hover,
body[data-theme="dark"] #fullscreenScaleButton:hover,
body[data-theme="dark"] #fullscreenLyricsBigger:hover,
body[data-theme="dark"] #fullscreenLyricsSmaller:hover {
  border-color: rgba(199, 210, 254, 0.72) !important;
  color: #ffffff !important;
  background: rgba(79, 70, 229, 0.58) !important;
}

body[data-theme="dark"] .lyrics-fullscreen-tools #fullscreenToggleAutoScroll,
body[data-theme="dark"] #fullscreenToggleLyricsPages.is-active,
body[data-theme="dark"] #fullscreenToggleVideo[aria-pressed="true"],
body[data-theme="dark"] #audioPlayerToggleLoop[aria-pressed="true"] {
  border-color: #818CF8 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #6366F1, #4F46E5) !important;
}

body[data-theme="dark"] .didactic-audio-player {
  border-color: rgba(129, 140, 248, 0.34) !important;
  color: #F8FAFC !important;
  background: rgba(15, 23, 42, 0.88) !important;
  box-shadow: none !important;
}

body[data-theme="dark"] .audio-player-empty,
body[data-theme="dark"] .audio-player-body,
body[data-theme="dark"] .audio-player-ab-controls,
body[data-theme="dark"] .audio-player-speed-pitch,
body[data-theme="dark"] .audio-player-sections {
  color: #F8FAFC !important;
}

body[data-theme="dark"] .audio-player-empty p,
body[data-theme="dark"] .audio-player-offline-message,
body[data-theme="dark"] .audio-player-ab-time,
body[data-theme="dark"] .audio-player-section-meta,
body[data-theme="dark"] .audio-player-volume {
  color: #CBD5E1 !important;
}

body[data-theme="dark"] .audio-player-times,
body[data-theme="dark"] .audio-player-sections h3,
body[data-theme="dark"] .audio-player-section-item strong {
  color: #F8FAFC !important;
}

body[data-theme="dark"] .audio-player-offline-message,
body[data-theme="dark"] .audio-player-section-item {
  border-color: rgba(129, 140, 248, 0.28) !important;
  background: rgba(17, 24, 39, 0.84) !important;
}

body[data-theme="dark"] .audio-player-progress,
body[data-theme="dark"] .audio-player-volume input[type="range"],
body[data-theme="dark"] .lyrics-fullscreen-tools input[type="range"] {
  accent-color: #818CF8;
}

body[data-theme="dark"] .fullscreen-video-wrap {
  border-color: rgba(129, 140, 248, 0.34) !important;
  background: rgba(2, 6, 23, 0.92) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.48) !important;
}

body[data-theme="dark"] .video-drag-handle {
  color: #E0E7FF !important;
  background: rgba(15, 23, 42, 0.86) !important;
}

body[data-theme="dark"] .fullscreen-video-invalid {
  color: #FCA5A5 !important;
  background: rgba(127, 29, 29, 0.72) !important;
}

@media (max-width: 900px) {
  body[data-theme="dark"] .lyrics-fullscreen-lyrics-col {
    border-top-color: rgba(129, 140, 248, 0.28) !important;
    border-left-color: transparent !important;
  }
}

@media (max-width: 760px) {
  .toolbar .favorite-filter-toggle,
  .toolbar #clearFilters {
    width: 100%;
  }
}

/* Escalas: navegacao compacta e modo escuro */
.scale-library-panel .scale-tone-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  align-items: stretch;
}

.scale-library-panel .scale-tone-button {
  min-height: 58px;
  align-content: center;
  justify-items: center;
  gap: 2px;
  padding: 8px 7px;
  text-align: center;
}

.scale-library-panel .scale-tone-button strong {
  font-size: 1.12rem;
}

.scale-library-panel .scale-tone-button span {
  max-width: 100%;
  color: inherit;
  font-size: 0.62rem;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  opacity: 0.86;
}

.scale-library-panel .scale-modal-info {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

.scale-library-panel .scale-modal-info span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.scale-library-panel .scale-modal-info em {
  overflow-wrap: anywhere;
}

body[data-theme="dark"] .scale-library-panel {
  border-color: rgba(129, 140, 248, 0.34) !important;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(11, 18, 32, 0.96)) !important;
}

body[data-theme="dark"] .scale-library-panel .chord-head h2,
body[data-theme="dark"] .scale-viewer-head h3 {
  color: #F8FAFC !important;
}

body[data-theme="dark"] .scale-library-panel .chord-head span,
body[data-theme="dark"] .scale-viewer-head span {
  color: #A5B4FC !important;
}

body[data-theme="dark"] .scale-library-panel .scale-tone-button {
  border-color: rgba(129, 140, 248, 0.34) !important;
  color: #DDE6FF !important;
  background: rgba(15, 23, 42, 0.72) !important;
  box-shadow: none !important;
}

body[data-theme="dark"] .scale-library-panel .scale-tone-button:hover {
  border-color: rgba(199, 210, 254, 0.66) !important;
  color: #ffffff !important;
  background: rgba(79, 70, 229, 0.48) !important;
}

body[data-theme="dark"] .scale-library-panel .scale-tone-button.is-active {
  border-color: #818CF8 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #6366F1, #4F46E5) !important;
}

body[data-theme="dark"] .scale-viewer {
  border-color: rgba(129, 140, 248, 0.34) !important;
  background: rgba(15, 23, 42, 0.8) !important;
  box-shadow: none !important;
}

body[data-theme="dark"] #closeScaleLibraryView {
  color: #E0E7FF !important;
  background: transparent !important;
}

body[data-theme="dark"] #closeScaleLibraryView:hover {
  background: rgba(129, 140, 248, 0.16) !important;
}

body[data-theme="dark"] .scale-modal-info {
  border-color: rgba(129, 140, 248, 0.28) !important;
  color: #CBD5E1 !important;
  background: rgba(17, 24, 39, 0.78) !important;
}

body[data-theme="dark"] .scale-modal-info strong {
  color: #A5B4FC !important;
}

body[data-theme="dark"] .scale-modal-info em {
  color: #F8FAFC !important;
}

body[data-theme="dark"] .scale-fretboard-grid,
body[data-theme="dark"] .scale-mobile-notes {
  border-color: rgba(129, 140, 248, 0.3) !important;
  background: rgba(15, 23, 42, 0.88) !important;
}

body[data-theme="dark"] .scale-string-row,
body[data-theme="dark"] .scale-open-string-row,
body[data-theme="dark"] .scale-mobile-string {
  border-color: rgba(129, 140, 248, 0.24) !important;
}

body[data-theme="dark"] .scale-string-label,
body[data-theme="dark"] .scale-mobile-string-name {
  color: #C7D2FE !important;
  background: rgba(30, 41, 59, 0.88) !important;
}

body[data-theme="dark"] .scale-fret,
body[data-theme="dark"] .scale-mobile-note {
  border-color: rgba(100, 116, 139, 0.5) !important;
  background: rgba(17, 24, 39, 0.72) !important;
}

body[data-theme="dark"] .scale-open-header,
body[data-theme="dark"] .scale-open-string-label,
body[data-theme="dark"] .scale-fret-numbers span,
body[data-theme="dark"] .scale-mobile-fret-numbers span {
  color: #94A3B8 !important;
}

body[data-theme="dark"] .scale-open-note.is-scale-note strong,
body[data-theme="dark"] .scale-fret.is-scale-note strong,
body[data-theme="dark"] .scale-mobile-note strong {
  color: #ffffff !important;
  background: #818CF8 !important;
  box-shadow: 0 8px 18px rgba(129, 140, 248, 0.28) !important;
}

body[data-theme="dark"] .scale-open-note.is-root-note strong,
body[data-theme="dark"] .scale-fret.is-root-note strong,
body[data-theme="dark"] .scale-mobile-note.is-root-note strong {
  background: #4F46E5 !important;
  box-shadow: 0 8px 22px rgba(99, 102, 241, 0.38) !important;
}

body[data-theme="dark"] .scale-nut {
  background: linear-gradient(to bottom, #A5B4FC, #64748B) !important;
}

@media (max-width: 900px) {
  .scale-library-panel .scale-tone-list {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 6px;
  }

  .scale-library-panel .scale-tone-button {
    min-height: 52px;
  }

  .scale-library-panel .scale-tone-button strong {
    font-size: 1rem;
  }

  .scale-library-panel .scale-modal-info {
    grid-template-columns: 1fr;
  }

  body[data-theme="dark"] .scale-library-panel .scale-mobile-open-panel {
    border-bottom-color: rgba(165, 180, 252, 0.46) !important;
  }
}

/* Escalas: visualizacao do braco no mesmo padrao */
.scale-library-panel.is-scale-viewing .scale-tone-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}

.scale-library-panel.is-scale-viewing .scale-tone-button {
  min-height: 50px;
  padding: 6px;
}

.scale-library-panel.is-scale-viewing .scale-tone-button strong {
  font-size: 1rem;
}

.scale-library-panel.is-scale-viewing .scale-tone-button span {
  font-size: 0.56rem;
}

.scale-library-panel.is-scale-viewing .scale-viewer {
  gap: 12px;
  padding: 16px;
}

.scale-library-panel.is-scale-viewing .scale-viewer-head {
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(129, 140, 248, 0.18);
}

.scale-library-panel.is-scale-viewing .scale-viewer-head h3 {
  margin: 2px 0 0;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 0.95;
}

.scale-library-panel.is-scale-viewing #closeScaleLibraryView {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(99, 102, 241, 0.28);
  border-radius: 8px;
  font-family: var(--font-semi);
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1;
}

.scale-library-panel.is-scale-viewing .scale-fretboard-wrap {
  padding: 10px;
  border: 1px solid rgba(99, 102, 241, 0.18);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.72);
  overflow-x: auto;
}

body[data-theme="dark"] .scale-library-panel.is-scale-viewing .scale-viewer-head {
  border-bottom-color: rgba(129, 140, 248, 0.28) !important;
}

body[data-theme="dark"] .scale-library-panel.is-scale-viewing #closeScaleLibraryView {
  border-color: rgba(165, 180, 252, 0.38) !important;
  color: #E0E7FF !important;
  background: rgba(30, 41, 59, 0.78) !important;
}

body[data-theme="dark"] .scale-library-panel.is-scale-viewing #closeScaleLibraryView:hover {
  border-color: rgba(199, 210, 254, 0.66) !important;
  background: rgba(79, 70, 229, 0.52) !important;
}

body[data-theme="dark"] .scale-library-panel.is-scale-viewing .scale-fretboard-wrap {
  border-color: rgba(129, 140, 248, 0.3) !important;
  background: rgba(2, 6, 23, 0.22) !important;
}

/* Acordes: linhas aparadas dentro do braco em todos os temas */
.chord-fretboard {
  background:
    linear-gradient(
      90deg,
      transparent calc(8% - 1px),
      #94A3B8 calc(8% - 1px) calc(8% + 1px),
      transparent calc(8% + 1px) calc(36% - 1px),
      #94A3B8 calc(36% - 1px) calc(36% + 1px),
      transparent calc(36% + 1px) calc(64% - 1px),
      #94A3B8 calc(64% - 1px) calc(64% + 1px),
      transparent calc(64% + 1px) calc(92% - 1px),
      #94A3B8 calc(92% - 1px) calc(92% + 1px),
      transparent calc(92% + 1px)
    ) !important;
}

.chord-fret-line {
  background: #94A3B8 !important;
}

body[data-theme="dark"] .chord-fretboard {
  border-top-color: rgba(226, 232, 240, 0.72) !important;
  background:
    linear-gradient(
      90deg,
      transparent calc(8% - 1px),
      rgba(226, 232, 240, 0.58) calc(8% - 1px) calc(8% + 1px),
      transparent calc(8% + 1px) calc(36% - 1px),
      rgba(226, 232, 240, 0.58) calc(36% - 1px) calc(36% + 1px),
      transparent calc(36% + 1px) calc(64% - 1px),
      rgba(226, 232, 240, 0.58) calc(64% - 1px) calc(64% + 1px),
      transparent calc(64% + 1px) calc(92% - 1px),
      rgba(226, 232, 240, 0.58) calc(92% - 1px) calc(92% + 1px),
      transparent calc(92% + 1px)
    ) !important;
}

body[data-theme="dark"] .chord-fret-line {
  background: rgba(226, 232, 240, 0.56) !important;
}

.chord-mini .chord-fretboard {
  background:
    linear-gradient(
      90deg,
      transparent calc(8% - 0.5px),
      #9CA3AF calc(8% - 0.5px) calc(8% + 0.5px),
      transparent calc(8% + 0.5px) calc(36% - 0.5px),
      #9CA3AF calc(36% - 0.5px) calc(36% + 0.5px),
      transparent calc(36% + 0.5px) calc(64% - 0.5px),
      #9CA3AF calc(64% - 0.5px) calc(64% + 0.5px),
      transparent calc(64% + 0.5px) calc(92% - 0.5px),
      #9CA3AF calc(92% - 0.5px) calc(92% + 0.5px),
      transparent calc(92% + 0.5px)
    ) !important;
}

.chord-mini .chord-fret-line {
  background: #9CA3AF !important;
}

@media (max-width: 900px) {
  .scale-library-panel.is-scale-viewing .scale-tone-list {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  }

  .scale-library-panel.is-scale-viewing .scale-viewer {
    padding: 12px;
  }

  .scale-library-panel.is-scale-viewing .scale-viewer-head h3 {
    font-size: clamp(2rem, 18vw, 3.2rem);
  }

  .scale-library-panel.is-scale-viewing .scale-fretboard-wrap {
    padding: 8px;
  }
}

/* Acordes: busca sem estourar o cabecalho */
.chord-panel .chord-filters {
  min-width: 0;
}

.chord-panel .chord-search {
  min-width: 0;
  max-width: 100%;
}

.chord-panel .chord-search input {
  min-width: 0;
  width: 100%;
}

body[data-theme="dark"] .music-save-overlay {
  background: rgba(15, 23, 42, 0.74) !important;
}

body[data-theme="dark"] .music-save-card,
body[data-theme="dark"] .confirm-modal-card,
body[data-theme="dark"] .saved-repertoire-dialog,
body[data-theme="dark"] .vincular-audio-dialog,
body[data-theme="dark"] .chord-modal-card,
body[data-theme="dark"] .scale-modal-card {
  border-color: rgba(165, 180, 252, 0.34) !important;
  color: #F8FAFC !important;
  background: rgba(15, 23, 42, 0.98) !important;
}

/* Modo escuro: leitura mais clara em navegacao e cards */
body[data-theme="dark"] {
  --muted: #CBD5E1;
}

body[data-theme="dark"] .app-nav .nav-button,
body[data-theme="dark"] .app-nav .nav-button span,
body[data-theme="dark"] .app-nav .nav-button svg,
body[data-theme="dark"] .bottom-nav-overflow-item,
body[data-theme="dark"] .bottom-nav-item {
  color: #CBD5E1 !important;
}

body[data-theme="dark"] .app-nav .nav-button:hover,
body[data-theme="dark"] .app-nav .nav-button:hover span,
body[data-theme="dark"] .app-nav .nav-button:hover svg,
body[data-theme="dark"] .app-nav .nav-button.is-active,
body[data-theme="dark"] .app-nav .nav-button.is-active span,
body[data-theme="dark"] .app-nav .nav-button.is-active svg {
  color: #FFFFFF !important;
}

body[data-theme="dark"] .chord-list-button span,
body[data-theme="dark"] .chord-card-meta span,
body[data-theme="dark"] .chord-card-head em,
body[data-theme="dark"] .chord-head span,
body[data-theme="dark"] .scale-viewer-head span,
body[data-theme="dark"] .scale-modal-info,
body[data-theme="dark"] .scale-open-header,
body[data-theme="dark"] .scale-open-string-label,
body[data-theme="dark"] .scale-fret-numbers span,
body[data-theme="dark"] .scale-mobile-fret-numbers span,
body[data-theme="dark"] .setlist-song span,
body[data-theme="dark"] .song-card p,
body[data-theme="dark"] .excerpt,
body[data-theme="dark"] .carousel-excerpt,
body[data-theme="dark"] .saved-empty,
body[data-theme="dark"] .empty-state,
body[data-theme="dark"] .save-message {
  color: #CBD5E1 !important;
}

body[data-theme="dark"] .chord-list-button strong,
body[data-theme="dark"] .chord-card-head strong,
body[data-theme="dark"] .scale-tone-button strong,
body[data-theme="dark"] .song-title,
body[data-theme="dark"] .preview-title {
  color: #F8FAFC !important;
}

body[data-theme="dark"] .chord-list-button.is-active span,
body[data-theme="dark"] .scale-tone-button.is-active span {
  color: #EEF2FF !important;
}

body[data-theme="dark"] .saved-modal-close,
body[data-theme="dark"] .saved-modal-close:hover {
  color: #E0E7FF !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Mobile: acabamento fino em navegacao e repertórios salvos */
body[data-theme="dark"] .drag-handle,
body[data-theme="dark"] .saved-modal-song .drag-handle {
  border: 1px solid rgba(165, 180, 252, 0.36) !important;
  color: #E0E7FF !important;
  background: rgba(30, 41, 59, 0.88) !important;
  box-shadow: none !important;
}

body[data-theme="dark"] .saved-block-empty,
body[data-theme="dark"] .saved-modal-table,
body[data-theme="dark"] .saved-modal-song,
body[data-theme="dark"] .saved-modal-list {
  border-color: rgba(129, 140, 248, 0.28) !important;
  color: #F8FAFC !important;
  background: rgba(15, 23, 42, 0.82) !important;
}

body[data-theme="dark"] .saved-block-picker span {
  border-color: rgba(165, 180, 252, 0.38) !important;
  color: #E0E7FF !important;
  background: rgba(79, 70, 229, 0.38) !important;
}

@media (max-width: 760px) {
  body[data-theme="dark"] .app-nav,
  body[data-theme="dark"] .app-nav.is-open {
    border: 0 !important;
    border-bottom: 1px solid rgba(129, 140, 248, 0.28) !important;
    background: rgba(15, 23, 42, 0.98) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42) !important;
  }

  body[data-theme="dark"] .app-shell,
  body[data-theme="dark"] tr,
  body[data-theme="dark"] .hero-panel,
  body[data-theme="dark"] .saved-repertoire-dialog,
  body[data-theme="dark"] .saved-block,
  body[data-theme="dark"] .saved-block-head,
  body[data-theme="dark"] .saved-block-empty,
  body[data-theme="dark"] .saved-modal-table,
  body[data-theme="dark"] .saved-modal-table tbody,
  body[data-theme="dark"] .saved-modal-table tr,
  body[data-theme="dark"] .saved-modal-table td {
    border-color: rgba(129, 140, 248, 0.28) !important;
    color: #F8FAFC !important;
    background: rgba(15, 23, 42, 0.92) !important;
    box-shadow: none !important;
  }

  .saved-modal-table,
  .saved-modal-table tbody,
  .saved-modal-table tr,
  .saved-modal-table td {
    display: block;
  }

  .saved-modal-table thead {
    display: none;
  }

  .saved-modal-table tr.saved-modal-song {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: start;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
  }

  .saved-modal-table td {
    display: block;
    width: auto !important;
    padding: 0;
    border: 0;
  }

  .saved-modal-table td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    display: block;
    min-width: 0;
    padding-right: 72px;
  }

  .saved-modal-table td:nth-child(2) {
    position: absolute;
    top: 10px;
    right: 1px;
    display: flex;
    gap: 1px;
    align-items: center;
    justify-content: flex-end;
    width: 65px !important;
  }

  .saved-modal-table td:nth-child(3),
  .saved-modal-table td:nth-child(4),
  .saved-modal-table td:nth-child(5) {
    display: none;
  }

  .saved-modal-song .drag-handle {
    width: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    font-size: 0;
    border-radius: 8px;
  }

  .saved-modal-song .drag-handle::before {
    content: "::";
    font-size: 1rem;
    line-height: 1;
  }

  .saved-table-song {
    display: grid;
    gap: 3px;
    min-width: 0;
    white-space: normal;
  }

  .saved-song-title-line {
    display: grid;
    gap: 2px;
  }

  .saved-table-song strong,
  .saved-table-song span,
  .saved-song-excerpt {
    display: block;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .saved-table-song strong {
    font-size: 0.98rem;
    line-height: 1.2;
  }

  .saved-table-song span {
    font-size: 0.82rem;
    line-height: 1.25;
  }

  .saved-song-excerpt {
    margin-top: 4px;
    padding: 6px 8px;
    border-radius: 8px;
    background: #F8FAFC;
    font-size: 0.8rem;
    line-height: 1.35;
  }

  .saved-block-cell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    align-items: stretch;
  }

  .saved-block-picker {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
  }

  .saved-block-picker span {
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 0.7rem;
    line-height: 1;
  }

  .saved-block-picker select {
    width: 100%;
    min-height: 30px;
    font-size: 0.72rem;
  }

  .saved-modal-lyrics-button,
  .saved-remove-button,
  .saved-modal-song .table-action {
    width: 100%;
    min-height: 32px;
  }

  .saved-song-actions-modal {
    position: absolute;
    top: 36px;
    right: 1px;
    width: min(230px, calc(100vw - 24px));
    margin-top: 8px;
    box-shadow: none;
  }
}

/* Mobile dark: bottom nav sem bordas nem sombras */
@media (max-width: 760px) {
  body[data-theme="dark"] .bottom-nav-bar {
    border: 0 !important;
    box-shadow: none !important;
  }

  body[data-theme="dark"] .bottom-nav-item,
  body[data-theme="dark"] .bottom-nav-item:hover,
  body[data-theme="dark"] .bottom-nav-item.is-active {
    border: 0 !important;
    box-shadow: none !important;
  }

  body[data-theme="dark"] .bottom-nav-fab,
  body[data-theme="dark"] .bottom-nav-fab[aria-expanded="true"] {
    border: 0 !important;
    box-shadow: none !important;
  }
}

/* Marca: logo alinhada à esquerda com nome destacado */
.auth-brand-row,
.hero-brand-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.auth-card .auth-brand-row {
  max-width: 400px;
  justify-self: stretch;
}

.brand-wordmark {
  color: var(--ink);
  font-family: var(--font-main);
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
}

.hero-wordmark {
  color: #ffffff;
  text-shadow: 0 12px 28px rgba(15, 23, 42, 0.35);
}

.auth-logo,
.hero-brand {
  flex: 0 0 auto;
  object-fit: contain;
}

.auth-logo {
  height: 52px;
}

.hero-brand {
  max-height: 64px;
}

body[data-theme="dark"] .brand-wordmark {
  color: #F8FAFC;
}

@media (max-width: 760px) {
  .auth-brand-row,
  .hero-brand-row {
    gap: 10px;
  }

  .auth-logo,
  .hero-brand {
    height: 42px;
    max-height: 42px;
  }

  .brand-wordmark {
    font-size: clamp(1.35rem, 8vw, 1.9rem);
  }
}

/* Refinamento final do banner inicial e da marca */
.brand-wordmark {
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
}

.hero-wordmark {
  color: #1E1B4B;
  font-size: clamp(1.65rem, 2.7vw, 2.35rem);
  text-shadow: none;
}

body[data-theme="dark"] .hero-wordmark {
  color: #F8FAFC;
  text-shadow: 0 10px 24px rgba(15, 23, 42, 0.28);
}

.hero-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(99, 102, 241, 0.22);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.74);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(14px);
}

.hero-panel::before,
.hero-panel::after {
  display: none;
}

.hero-panel > div,
.hero-panel > div:nth-child(2),
.hero-panel > div:nth-child(3) {
  position: relative;
  min-height: 74px;
  padding: 14px 16px 13px 18px;
  border: 1px solid rgba(99, 102, 241, 0.18);
  border-radius: 10px;
  background: #FFFFFF;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.hero-panel > div::before {
  display: none;
}

.hero-panel > div::after,
.hero-panel > div:nth-child(2)::after,
.hero-panel > div:nth-child(3)::after {
  content: "";
  position: absolute;
  inset: 12px auto 12px 0;
  width: 4px;
  height: auto;
  border-radius: 0 999px 999px 0;
  background: #6366F1;
}

.hero-panel .stat-value,
.hero-panel > div:nth-child(2) .stat-value,
.hero-panel > div:nth-child(3) .stat-value {
  color: #111827;
  font-size: clamp(1.7rem, 3.4vw, 2.25rem);
  font-weight: 800;
  line-height: 0.95;
  text-shadow: none;
}

.hero-panel .stat-label {
  margin-top: 6px;
  color: #4F46E5;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.04em;
}

body[data-theme="dark"] .hero-panel {
  border-color: rgba(129, 140, 248, 0.34);
  background: rgba(10, 18, 36, 0.88);
  box-shadow:
    0 18px 48px rgba(2, 6, 23, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-theme="dark"] .hero-panel > div,
body[data-theme="dark"] .hero-panel > div:nth-child(2),
body[data-theme="dark"] .hero-panel > div:nth-child(3) {
  border-color: rgba(129, 140, 248, 0.26);
  background: linear-gradient(135deg, rgba(20, 30, 54, 0.96), rgba(12, 20, 39, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

body[data-theme="dark"] .hero-panel .stat-value,
body[data-theme="dark"] .hero-panel > div:nth-child(2) .stat-value,
body[data-theme="dark"] .hero-panel > div:nth-child(3) .stat-value {
  color: #F8FAFC;
}

body[data-theme="dark"] .hero-panel .stat-label {
  color: #AEBBFF;
}

@media (max-width: 760px) {
  .hero-wordmark {
    font-size: clamp(1.45rem, 9vw, 2rem);
  }

  .hero-panel {
    padding: 12px;
    gap: 10px;
  }

  .hero-panel > div,
  .hero-panel > div:nth-child(2),
  .hero-panel > div:nth-child(3) {
    min-height: 66px;
    padding: 12px 14px 12px 16px;
  }
}

/* Alinhamento da marca no banner: mesma coluna do titulo */
.hero .hero-copy {
  justify-items: start;
  text-align: left;
}

.hero .hero-brand-row {
  width: fit-content;
  max-width: 100%;
  align-self: start;
  justify-self: start;
  justify-content: flex-start;
  gap: 12px;
  margin: 0 0 22px 0;
  padding: 0;
}

.hero .hero-brand {
  width: auto;
  height: 54px;
  max-height: 54px;
}

.hero .hero-wordmark {
  transform: none;
  line-height: 1;
}

@media (max-width: 760px) {
  .hero .hero-brand-row {
    gap: 10px;
    margin-bottom: 18px;
  }

  .hero .hero-brand {
    height: 44px;
    max-height: 44px;
  }

  .hero .hero-wordmark {
    font-size: clamp(1.35rem, 7vw, 1.85rem);
  }
}

/* Menu com tipografia mais leve */
.nav-button,
.nav-button span,
.app-nav .nav-button,
.app-nav .nav-button span,
.bottom-nav-item,
.bottom-nav-item span {
  font-weight: 500 !important;
}

.nav-button.is-active,
.nav-button.is-active span,
.app-nav .nav-button.is-active,
.app-nav .nav-button.is-active span,
.bottom-nav-item.is-active,
.bottom-nav-item.is-active span {
  font-weight: 650 !important;
}

.nav-brand-name {
  font-weight: 600 !important;
}

.nav-brand-name small {
  font-weight: 500 !important;
}

/* Menu lateral mais limpo */
@media (min-width: 761px) {
  .app-nav,
  body[data-theme="dark"] .app-nav {
    gap: 3px !important;
    padding: 10px 8px !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .nav-brand-header,
  body[data-theme="dark"] .nav-brand-header {
    margin-bottom: 4px !important;
    padding: 10px 8px 12px !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .app-nav .nav-button,
  body[data-theme="dark"] .app-nav .nav-button {
    min-height: 34px !important;
    margin: 0 !important;
    padding: 7px 8px !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    font-size: 0.76rem !important;
  }

  .app-nav .nav-button span,
  body[data-theme="dark"] .app-nav .nav-button span {
    font-size: 0.76rem !important;
    line-height: 1.1 !important;
  }

  .app-nav .nav-icon {
    width: 14px !important;
    height: 14px !important;
  }

  .nav-sidebar-footer,
  body[data-theme="dark"] .nav-sidebar-footer {
    padding-top: 8px !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .nav-sidebar-user-info {
    padding: 6px 8px 4px !important;
  }

.nav-sidebar-user-name,
.nav-sidebar-logout,
.nav-sidebar-refresh {
  font-size: 0.74rem !important;
}
}

/* Mascote no banner e no menu */
.hero {
  grid-template-columns: minmax(0, 1.35fr) minmax(120px, 0.34fr) minmax(260px, 0.52fr) !important;
}

.hero-mascot {
  width: clamp(104px, 14vw, 178px) !important;
  max-width: 100% !important;
  height: auto !important;
  justify-self: center !important;
  align-self: center !important;
  object-fit: contain !important;
  filter: drop-shadow(0 18px 24px rgba(15, 23, 42, 0.22));
}

.nav-brand-mascot {
  display: block !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
}

.nav-brand-mascot {
  width: 38px !important;
  height: 38px !important;
  opacity: 1 !important;
  filter: drop-shadow(0 4px 7px rgba(15, 23, 42, 0.2));
}

@media (max-width: 980px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(92px, 120px) !important;
  }

  .hero-mascot {
    width: clamp(86px, 22vw, 116px) !important;
  }

  .hero-panel {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 620px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hero-mascot {
    width: 96px !important;
    justify-self: start !important;
    margin-top: -6px !important;
  }
}

/* Repertório salvo: tabela sem coluna extra vazia */
.saved-modal-table th:nth-child(5),
.saved-modal-table td:nth-child(5),
.saved-table-actions {
  display: none !important;
}

.saved-modal-table th:nth-child(2),
.saved-modal-table td:nth-child(2) {
  width: 210px;
}

/* Blocos salvos: seletor limpo e acao de letra ao lado */
.saved-block-picker span,
body[data-theme="dark"] .saved-block-picker span {
  display: none !important;
}

.saved-block-cell {
  width: 100%;
}

body[data-theme="dark"] .saved-modal-lyrics-button {
  border-color: rgba(165, 180, 252, 0.42);
  color: #E0E7FF;
  background: rgba(30, 41, 59, 0.92);
}

body[data-theme="dark"] .saved-song-gear,
body[data-theme="dark"] .saved-song-actions-modal {
  border-color: rgba(165, 180, 252, 0.42);
  color: #E0E7FF;
  background: rgba(15, 23, 42, 0.96);
}

body[data-theme="dark"] .saved-song-gear:hover,
body[data-theme="dark"] .saved-song-gear[aria-expanded="true"] {
  background: rgba(79, 70, 229, 0.38);
}

body[data-theme="dark"] .saved-modal-lyrics-button:hover {
  border-color: #818CF8;
  color: #ffffff;
  background: linear-gradient(135deg, #6366F1, #4F46E5);
}

/* Blocos salvos: linha responsiva com conteudo + acoes */
.saved-modal-table {
  display: block;
  table-layout: auto;
  width: 100%;
}

.saved-modal-table thead {
  display: none !important;
}

.saved-modal-table tbody {
  display: block;
}

.saved-modal-table thead tr,
.saved-modal-table tr.saved-modal-song {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  position: relative;
  width: 100%;
}

.saved-modal-table thead tr {
  padding-right: 8px;
}

.saved-modal-table tr.saved-modal-song {
  padding: 10px 8px 10px 10px;
  border-bottom: 1px solid var(--line);
}

.saved-modal-table tr.saved-modal-song:last-child {
  border-bottom: 0;
}

.saved-modal-table tr.saved-modal-song > td,
.saved-modal-table thead th {
  display: block;
  width: auto !important;
  border-bottom: 0 !important;
}

.saved-modal-table tr.saved-modal-song > .saved-table-song {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  gap: 4px;
  min-width: 0;
}

.saved-song-title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.saved-song-title-line strong,
.saved-song-title-line .saved-song-meta {
  display: inline;
  min-width: 0;
}

.saved-song-action-cell {
  grid-column: 2;
  grid-row: 1;
  display: flex !important;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 10px;
  min-width: max-content;
  padding-right: 0 !important;
  justify-self: end;
}

.saved-song-excerpt {
  width: 100%;
  margin-top: 0;
}

.saved-song-actions-modal {
  top: 36px;
  right: 8px;
}

@media (max-width: 760px) {
  .saved-block.is-expanded {
    max-height: calc(100dvh - 220px);
  }

  .saved-modal-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }

  .saved-modal-table tr.saved-modal-song {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 10px;
  }

  .saved-modal-table tr.saved-modal-song > td {
    position: static;
    padding: 0;
  }

  .saved-modal-table tr.saved-modal-song > .saved-table-song {
    display: grid;
    grid-column: 1;
    grid-row: 1;
  }

  .saved-song-title-line {
    display: flex;
    gap: 6px;
  }

  .saved-song-action-cell {
    grid-column: 2;
    grid-row: 1;
    display: flex !important;
    gap: 10px;
    padding-right: 0 !important;
  }

  .saved-song-excerpt {
    margin-top: 0;
  }

  .saved-song-actions-modal {
    position: absolute;
    top: 36px;
    right: 8px;
  }
}

/* Login: layout estabilizado e sem vazamento dos campos */
#authShell.auth-shell {
  min-height: 100vh;
  padding: clamp(18px, 4vw, 42px);
  background:
    radial-gradient(circle at 20% 12%, rgba(99, 102, 241, 0.14), transparent 28%),
    #F8FAFC;
}

#authShell .auth-card,
#authShell .auth-card * {
  box-sizing: border-box;
}

#authShell .auth-card {
  width: min(520px, calc(100vw - 32px));
  justify-items: stretch;
  gap: 22px;
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid rgba(99, 102, 241, 0.16) !important;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.12) !important;
}

#authShell .auth-brand-row {
  width: 100%;
  max-width: none;
  justify-content: flex-start;
  gap: 12px;
}

#authShell .auth-logo {
  width: auto;
  height: 50px;
  max-height: 50px;
}

#authShell .brand-wordmark {
  color: #1E1B4B;
  font-size: clamp(1.75rem, 7vw, 2.45rem);
  line-height: 1;
}

#authShell .auth-copy {
  justify-items: center;
  text-align: center;
}

#authShell .auth-copy h1 {
  max-width: 13ch;
  margin: 0;
  color: #111827;
  font-size: clamp(1.8rem, 5vw, 2.35rem);
  line-height: 1.05;
}

#authShell .auth-subtitle {
  max-width: 38ch;
  color: #475569;
}

#authShell .auth-panels,
#authShell .auth-form {
  width: 100%;
  min-width: 0;
}

#authShell .auth-form-head h2 {
  color: #111827;
}

#authShell .auth-form-head span,
#authShell .auth-switch-row {
  color: #64748B;
}

#authShell .name-field {
  min-width: 0;
}

#authShell .name-field input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  color: #111827;
  background: #FFFFFF;
}

body[data-theme="dark"] #authShell.auth-shell {
  background:
    radial-gradient(circle at 18% 14%, rgba(99, 102, 241, 0.22), transparent 30%),
    linear-gradient(135deg, #0F172A 0%, #111827 54%, #0B1120 100%);
}

body[data-theme="dark"] #authShell .auth-card {
  border-color: rgba(129, 140, 248, 0.34) !important;
  background: rgba(15, 23, 42, 0.94) !important;
  box-shadow: 0 28px 80px rgba(2, 6, 23, 0.36) !important;
}

body[data-theme="dark"] #authShell .brand-wordmark,
body[data-theme="dark"] #authShell .auth-copy h1,
body[data-theme="dark"] #authShell .auth-form-head h2 {
  color: #F8FAFC;
}

body[data-theme="dark"] #authShell .auth-subtitle,
body[data-theme="dark"] #authShell .auth-form-head span,
body[data-theme="dark"] #authShell .auth-switch-row {
  color: #CBD5E1;
}

body[data-theme="dark"] #authShell .name-field input {
  color: #F8FAFC;
  background: rgba(10, 18, 36, 0.98);
}

@media (max-width: 560px) {
  #authShell .auth-card {
    width: min(100%, calc(100vw - 24px));
    padding: 22px 16px;
  }

  #authShell .auth-logo {
    height: 42px;
    max-height: 42px;
  }

  #authShell .auth-brand-row {
    gap: 10px;
  }

  #authShell .auth-copy h1 {
    max-width: 14ch;
  }
}

/* Padrao visual para Pedidos, Player Didatico, Metronomo e Batucada */
.event-panel,
.audio-library-panel,
.metronome-panel,
.batucada-panel {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  display: grid;
  gap: 20px;
  padding: 22px;
  border: 1px solid rgba(99, 102, 241, 0.22);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.event-panel.is-hidden,
.audio-library-panel.is-hidden,
.metronome-panel.is-hidden,
.batucada-panel.is-hidden {
  display: none !important;
}

.event-panel .share-head,
.audio-library-panel .chord-head,
.metronome-panel .batucada-head,
.batucada-head {
  padding-bottom: 4px;
}

.event-panel .share-head h2,
.audio-library-panel .chord-head h2,
.metronome-panel .batucada-head h2,
.batucada-head h2 {
  margin: 4px 0 4px;
  color: var(--ink);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  font-weight: 800;
  line-height: 1.05;
}

.event-panel .share-head span,
.audio-library-panel .chord-head span,
.metronome-panel .batucada-head span,
.batucada-head span {
  color: var(--muted);
  font-weight: 600;
}

.event-form,
.event-panel .share-card,
.audio-library-item,
.batucada-controls,
.batucada-transport,
.batucada-visualizer {
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 8px;
  background: #F8FAFC;
  box-shadow: none;
}

.batucada-controls,
.batucada-transport {
  padding: 14px;
}

.batucada-visualizer {
  padding: 18px;
}

.event-item,
.event-request-item,
.batucada-bpm-block,
.batucada-beat,
.batucada-channel {
  border-radius: 8px;
  border-color: rgba(99, 102, 241, 0.2);
  background: #FFFFFF;
}

.batucada-bpm-number,
.event-link-row input {
  min-height: 42px;
  border-radius: 8px;
  border-color: rgba(99, 102, 241, 0.24);
  background: #FFFFFF;
}

body[data-theme="dark"] .event-panel,
body[data-theme="dark"] .audio-library-panel,
body[data-theme="dark"] .batucada-panel {
  border-color: rgba(129, 140, 248, 0.34) !important;
  color: #F8FAFC !important;
  background: rgba(15, 23, 42, 0.94) !important;
  box-shadow: none !important;
}

body[data-theme="dark"] .event-panel .share-head h2,
body[data-theme="dark"] .audio-library-panel .chord-head h2,
body[data-theme="dark"] .batucada-head h2 {
  color: #F8FAFC !important;
}

body[data-theme="dark"] .event-panel .share-head span,
body[data-theme="dark"] .audio-library-panel .chord-head span,
body[data-theme="dark"] .batucada-head span,
body[data-theme="dark"] .batucada-bpm-label,
body[data-theme="dark"] .batucada-meta {
  color: #CBD5E1 !important;
}

body[data-theme="dark"] .event-form,
body[data-theme="dark"] .event-panel .share-card,
body[data-theme="dark"] .audio-library-item,
body[data-theme="dark"] .batucada-controls,
body[data-theme="dark"] .batucada-transport,
body[data-theme="dark"] .batucada-visualizer,
body[data-theme="dark"] .event-item,
body[data-theme="dark"] .event-request-item,
body[data-theme="dark"] .batucada-bpm-block,
body[data-theme="dark"] .batucada-beat,
body[data-theme="dark"] .batucada-channel {
  border-color: rgba(129, 140, 248, 0.3) !important;
  color: #F8FAFC !important;
  background: rgba(17, 24, 39, 0.88) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body[data-theme="dark"] .batucada-beat.is-active {
  border-color: #818CF8 !important;
  background: rgba(79, 70, 229, 0.3) !important;
}

body[data-theme="dark"] .batucada-bpm-number,
body[data-theme="dark"] .event-link-row input {
  border-color: rgba(165, 180, 252, 0.42) !important;
  color: #F8FAFC !important;
  background: rgba(10, 18, 36, 0.98) !important;
}

@media (max-width: 760px) {
  .event-panel,
  .audio-library-panel,
  .batucada-panel {
    padding: 16px;
    gap: 16px;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  .event-layout {
    grid-template-columns: 1fr;
  }

  .event-form,
  .batucada-controls,
  .batucada-transport {
    grid-template-columns: 1fr;
  }

  .batucada-transport > button {
    width: 100%;
  }

  .batucada-panel:not(.is-hidden) {
    display: grid !important;
    visibility: visible !important;
    grid-template-columns: minmax(0, 1fr);
    width: 100% !important;
    min-width: 0 !important;
  }

  .batucada-panel:not(.is-hidden) .batucada-head,
  .batucada-panel:not(.is-hidden) .batucada-controls,
  .batucada-panel:not(.is-hidden) .batucada-transport,
  .batucada-panel:not(.is-hidden) .batucada-visualizer,
  .batucada-panel:not(.is-hidden) .batucada-beats {
    visibility: visible !important;
    min-width: 0 !important;
  }

  .batucada-panel:not(.is-hidden) .batucada-visualizer {
    display: block !important;
    width: 100% !important;
    padding: 14px;
  }

  .batucada-panel:not(.is-hidden) .batucada-beats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .batucada-panel:not(.is-hidden) .batucada-beat {
    min-height: 92px;
  }
}

/* Ajuste final: repertórios salvos > blocos */
.saved-modal-table {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  table-layout: auto !important;
}

.saved-modal-table thead {
  display: none !important;
}

.saved-modal-table tbody {
  display: block !important;
  width: 100% !important;
}

.saved-modal-table tr.saved-modal-song {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  gap: 6px 12px !important;
  align-items: start !important;
  padding: 12px 10px !important;
  border-bottom: 1px solid rgba(129, 140, 248, 0.28) !important;
}

.saved-modal-table tr.saved-modal-song:last-child {
  border-bottom: 0 !important;
}

.saved-modal-table tr.saved-modal-song > td {
  position: static !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.saved-modal-table tr.saved-modal-song > .saved-table-song {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.saved-song-title-line {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.saved-song-title-line strong,
.saved-song-title-line .saved-song-meta {
  display: inline !important;
}

.saved-song-key,
.saved-table-song .saved-song-meta .saved-song-key,
body[data-theme="dark"] .saved-song-key,
body[data-theme="dark"] .saved-table-song .saved-song-meta .saved-song-key {
  display: inline !important;
  color: #A855F7 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.saved-song-meta,
.saved-song-meta .saved-song-key,
body[data-theme="dark"] .saved-song-meta,
body[data-theme="dark"] .saved-song-meta .saved-song-key {
  display: inline !important;
  white-space: nowrap !important;
}

.saved-song-excerpt {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.saved-modal-lyrics-button:disabled {
  cursor: not-allowed !important;
  opacity: 0.55 !important;
}

.saved-song-action-cell {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  gap: 10px !important;
  min-width: max-content !important;
  justify-self: end !important;
  padding-right: 8px !important;
  white-space: nowrap !important;
}

.saved-song-action-cell > .saved-song-gear,
.saved-song-action-cell > .drag-handle {
  flex: 0 0 auto !important;
}

.saved-block.is-expanded {
  max-height: calc(100dvh - 130px) !important;
}

.saved-block.is-expanded .saved-modal-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 190px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-color: #6366F1 transparent !important;
}

.saved-block.is-expanded .saved-modal-list::-webkit-scrollbar {
  width: 10px;
}

.saved-block.is-expanded .saved-modal-list::-webkit-scrollbar-track {
  background: transparent;
}

.saved-block.is-expanded .saved-modal-list::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #6366F1;
  background-clip: content-box;
}

body[data-theme="dark"] .saved-block.is-expanded .saved-modal-list {
  scrollbar-color: #6366F1 transparent !important;
}

body[data-theme="dark"] .saved-block.is-expanded .saved-modal-list::-webkit-scrollbar-track {
  background: transparent !important;
}

.saved-song-actions-modal {
  position: fixed !important;
  top: 50% !important;
  right: auto !important;
  left: 50% !important;
  z-index: 2600 !important;
  width: min(300px, calc(100vw - 32px)) !important;
  max-height: calc(100dvh - 48px) !important;
  transform: translate(-50%, -50%) !important;
  overflow-y: auto !important;
  box-shadow: 0 28px 72px rgba(2, 6, 23, 0.36) !important;
}

.lyrics-fullscreen {
  z-index: 3600 !important;
}

.saved-modal-status,
body[data-theme="dark"] .saved-modal-status {
  color: #A5B4FC !important;
  background: transparent !important;
}

.saved-modal-status.is-error,
body[data-theme="dark"] .saved-modal-status.is-error {
  color: #FCA5A5 !important;
}

/* Afinador */
.tuner-panel {
  display: grid;
  gap: 20px;
  width: calc(100% - 40px);
  max-width: none;
  margin: 18px auto 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.tuner-panel.is-hidden {
  display: none;
}

.tuner-panel .tuner-head,
.tuner-panel .tuner-meter,
.tuner-status-card,
.tuner-detail-grid > div,
.tuner-tips-card,
.tuner-history-card,
.tuner-bottom-note {
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 38px rgba(41, 23, 83, 0.055);
}

.tuner-panel .tuner-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 118px;
  padding: 34px 34px;
  overflow: hidden;
}

.tuner-head-copy {
  position: relative;
  z-index: 2;
  padding: 8px 0 8px 14px !important;
}

.tuner-panel .tuner-head .eyebrow {
  margin: 0 0 10px !important;
  color: #6D28D9;
  font-family: var(--font-semi);
  font-size: 0.82rem;
  font-weight: 900;
}

.tuner-panel .tuner-head h2 {
  margin: 0;
  color: #0F0B2D;
  font-size: 2rem;
  line-height: 1.08;
}

.tuner-panel .tuner-head-copy > span {
  display: block;
  margin-top: 14px !important;
  color: #536079;
  font-size: 0.95rem;
}

.tuner-head-waves {
  position: absolute;
  inset: 18px 220px 0 40%;
  pointer-events: none;
}

.tuner-head-waves span {
  position: absolute;
  left: 0;
  right: 0;
  height: 54px;
  border-top: 2px solid rgba(124, 58, 237, 0.18);
  border-radius: 50%;
  transform: rotate(-6deg);
}

.tuner-head-waves span:nth-child(1) { top: 22px; }
.tuner-head-waves span:nth-child(2) { top: 42px; border-color: rgba(124, 58, 237, 0.13); transform: rotate(4deg); }
.tuner-head-waves span:nth-child(3) { top: 62px; border-color: rgba(124, 58, 237, 0.08); transform: rotate(-2deg); }

.tuner-panel .tuner-actions {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding-top: 10px;
}

.tuner-panel #toggleTuner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 210px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 11px;
  color: #fff !important;
  background: linear-gradient(135deg, #7C3AED, #5B21D9);
  box-shadow: 0 14px 30px rgba(91, 33, 217, 0.22);
  font-family: var(--font-semi);
  line-height: 1;
}

.tuner-panel #toggleTuner svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: #fff;
  stroke: currentColor;
}

.tuner-panel #toggleTuner span {
  color: #fff;
  line-height: 1;
}

.tuner-privacy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #16A34A;
  font-family: var(--font-semi);
  font-size: 0.82rem;
}

.tuner-privacy svg {
  width: 15px;
  height: 15px;
}

.tuner-panel #tunerMessage {
  min-height: 0;
  margin: 0;
  font-size: 0.78rem;
}

.tuner-panel .tuner-layout {
  display: grid;
  grid-template-columns: minmax(420px, 49%) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

.tuner-panel .tuner-meter {
  position: relative;
  min-height: 560px;
  padding: 28px 28px 24px;
  overflow: hidden;
}

.tuner-panel .tuner-meter::before {
  content: none;
}

.tuner-chip {
  position: absolute;
  top: 22px;
  left: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  color: #536079;
  background: rgba(124, 58, 237, 0.06);
  font-size: 0.78rem;
}

.tuner-chip svg {
  width: 15px;
  height: 15px;
  color: #7C3AED;
}

.tuner-panel .meter-readout {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-top: 50px;
  color: #6D28D9;
}

.tuner-panel .meter-readout #tunerMeterFrequency {
  color: #6D28D9;
  font-family: var(--font-semi);
  font-size: 1.75rem;
  line-height: 1;
}

.tuner-panel .meter-readout #tunerNote {
  color: #6D28D9;
  font-size: 1rem;
}

.tuner-panel .meter-readout #tunerOctave {
  color: #6D28D9;
  font-family: var(--font-semi);
  font-size: 0.9rem;
}

.tuner-panel .meter-scale {
  position: absolute;
  top: 206px;
  left: 50%;
  width: min(520px, calc(100% - 96px));
  height: 190px;
  transform: translateX(-50%);
  pointer-events: none;
}

.tuner-panel .meter-scale span {
  position: absolute;
  color: #334155;
  font-family: var(--font-semi);
  font-size: 0.82rem;
}

.tuner-panel .meter-scale span:nth-child(1) { left: 0; bottom: 8px; }
.tuner-panel .meter-scale span:nth-child(2) { left: 5%; bottom: 78px; }
.tuner-panel .meter-scale span:nth-child(3) { left: 25%; top: 28px; }
.tuner-panel .meter-scale span:nth-child(4) { left: 50%; top: 0; transform: translateX(-50%); }
.tuner-panel .meter-scale span:nth-child(5) { right: 25%; top: 28px; }
.tuner-panel .meter-scale span:nth-child(6) { right: 5%; bottom: 78px; }
.tuner-panel .meter-scale span:nth-child(7) { right: 0; bottom: 8px; }

.tuner-panel .meter-arc {
  position: absolute;
  top: 238px;
  left: 50%;
  width: min(430px, calc(100% - 120px));
  height: 215px;
  border-top: 4px solid transparent;
  border-radius: 260px 260px 0 0;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, #5B6CFF, #7C3AED, #EC4899) border-box;
  pointer-events: none;
  transform: translateX(-50%);
}

.tuner-panel .meter-arc::before {
  content: "";
  position: absolute;
  inset: 8px 8px auto;
  height: 120px;
  border-top: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 220px 220px 0 0;
}

.tuner-panel .meter-arc::before {
  display: none !important;
  content: none !important;
}

.tuner-panel .meter-arc span {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2px;
  height: 18px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.32);
  transform-origin: 50% 108px;
  transform: translateX(-50%) rotate(var(--tick-angle)) translateY(-108px);
}

.tuner-panel .meter-arc span.is-center {
  height: 24px;
  background: #7C3AED;
}

.tuner-panel .meter-side-label {
  position: absolute;
  top: 344px;
  color: #C4B5FD;
  font-family: var(--font-semi);
  font-size: 1.8rem;
}

.tuner-panel .meter-side-label.flat { left: calc(50% - 265px); }
.tuner-panel .meter-side-label.sharp { right: calc(50% - 265px); }

.tuner-panel .meter-needle {
  position: absolute;
  left: 50%;
  top: 292px;
  width: 3px;
  height: 150px;
  border-radius: 999px;
  background: linear-gradient(180deg, #7C3AED, rgba(124, 58, 237, 0.15));
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(var(--needle-angle, 0deg));
  transition: transform 180ms ease;
  box-shadow: 0 0 18px rgba(124, 58, 237, 0.2);
}

.tuner-panel .meter-center {
  position: absolute;
  left: 50%;
  top: 430px;
  width: 46px;
  height: 46px;
  border: 9px solid #F1F5F9;
  border-radius: 999px;
  background: #7C3AED;
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
}

.tuner-panel .note-strip {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 70px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.tuner-panel .note-strip span {
  display: grid;
  place-items: center;
  min-height: 52px;
  gap: 1px;
  border-right: 1px solid rgba(124, 58, 237, 0.1);
  color: #64748B;
  font-family: var(--font-semi);
  font-size: 0.9rem;
  transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.tuner-panel .note-strip span:last-child {
  border-right: 0;
}

.tuner-panel .note-strip small {
  color: inherit;
  font-size: 0.75rem;
}

.tuner-panel .note-strip span.is-active {
  color: #fff;
  background: linear-gradient(135deg, #A78BFA, #7C3AED);
  box-shadow: 0 10px 22px rgba(124, 58, 237, 0.28);
}

.tuner-note-name {
  position: absolute;
  left: 50%;
  bottom: 28px;
  min-height: 30px;
  padding: 7px 16px;
  border-radius: 999px;
  color: #7C3AED;
  background: rgba(124, 58, 237, 0.07);
  font-family: var(--font-semi);
  font-size: 0.84rem;
  transform: translateX(-50%);
}

.tuner-panel .tuner-info {
  display: grid;
  gap: 16px;
}

.tuner-status-card {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 98px;
  padding: 22px 24px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(255, 255, 255, 0.96));
}

.tuner-status-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #8B5CF6, #6D28D9);
}

.tuner-status-icon svg {
  width: 26px;
  height: 26px;
}

.tuner-status-card h3,
.tuner-tips-card h3,
.tuner-history-card h3 {
  margin: 0;
  color: #0F0B2D;
  font-size: 1.1rem;
}

.tuner-panel .tuner-status {
  margin-top: 7px;
  padding: 0;
  border: 0;
  color: #536079;
  background: transparent;
  font-size: 0.9rem;
}

.tuner-panel .tuner-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.tuner-panel .tuner-detail-grid > div {
  display: grid;
  gap: 12px;
  min-height: 128px;
  padding: 20px;
}

.tuner-panel .tuner-detail-grid span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #3D315F;
  font-family: var(--font-semi);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.tuner-panel .tuner-detail-grid span svg {
  width: 16px;
  height: 16px;
  color: #7C3AED;
}

.tuner-panel .tuner-detail-grid strong {
  color: #0F0B2D;
  font-size: 1.45rem;
}

.tuner-panel .tuner-detail-grid em {
  justify-self: end;
  padding: 5px 9px;
  border-radius: 999px;
  color: #6D28D9;
  background: rgba(124, 58, 237, 0.08);
  font-style: normal;
  font-family: var(--font-semi);
  font-size: 0.78rem;
}

.tuner-cents-line {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  color: #64748B;
  font-size: 0.74rem;
}

.tuner-cents-line::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #DDD6FE, #7C3AED, #DDD6FE);
}

.tuner-cents-line span {
  position: absolute;
  left: var(--cents-pos, 50%);
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #7C3AED;
  transform: translate(-50%, -50%);
}

.tuner-tips-card {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  min-height: 138px;
  padding: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.09), rgba(255, 255, 255, 0.95));
}

.tuner-tips-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tuner-tips-card h3 svg {
  width: 20px;
  height: 20px;
  color: #7C3AED;
}

.tuner-tips-card ul {
  display: grid;
  gap: 9px;
  margin: 16px 0 0;
  padding-left: 18px;
  color: #3D315F;
  font-size: 0.9rem;
}

.tuner-mic-art {
  position: relative;
  display: grid;
  place-items: center;
  align-self: center;
  width: 132px;
  height: 132px;
  color: #7C3AED;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.08);
}

.tuner-mic-art svg {
  width: 62px;
  height: 62px;
  z-index: 2;
}

.tuner-mic-art i {
  position: absolute;
  border: 3px solid rgba(124, 58, 237, 0.17);
  border-radius: 999px;
}

.tuner-mic-art i:nth-child(1) { inset: 18px; }
.tuner-mic-art i:nth-child(2) { inset: 6px; }
.tuner-mic-art i:nth-child(3) { inset: -6px; }

.tuner-history-card {
  min-height: 132px;
  padding: 22px 24px;
}

.tuner-history-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tuner-history-card h3 {
  display: flex;
  align-items: center;
  gap: 9px;
}

.tuner-history-card h3 svg {
  width: 20px;
  height: 20px;
  color: #7C3AED;
}

.tuner-history-card button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  color: #7C3AED;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-semi);
  font-size: 0.84rem;
}

.tuner-history-card button svg {
  width: 16px;
  height: 16px;
}

.tuner-history-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 38px 12px 8px;
  color: #64748B;
  text-align: center;
}

.tuner-history-empty strong {
  color: #475569;
  font-size: 0.9rem;
}

.tuner-bottom-note {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 18px;
  color: #6D28D9;
  background: rgba(124, 58, 237, 0.055);
  font-size: 0.9rem;
}

.tuner-bottom-note svg {
  width: 17px;
  height: 17px;
}

body[data-theme="dark"] .tuner-panel .tuner-head,
body[data-theme="dark"] .tuner-panel .tuner-meter,
body[data-theme="dark"] .tuner-status-card,
body[data-theme="dark"] .tuner-detail-grid > div,
body[data-theme="dark"] .tuner-tips-card,
body[data-theme="dark"] .tuner-history-card,
body[data-theme="dark"] .tuner-bottom-note {
  border-color: rgba(167, 139, 250, 0.22);
  background: rgba(15, 23, 42, 0.96);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
}

body[data-theme="dark"] .tuner-panel .tuner-head h2,
body[data-theme="dark"] .tuner-status-card h3,
body[data-theme="dark"] .tuner-tips-card h3,
body[data-theme="dark"] .tuner-history-card h3,
body[data-theme="dark"] .tuner-detail-grid strong {
  color: #F8FAFC;
}

body[data-theme="dark"] .tuner-panel .tuner-head-copy > span,
body[data-theme="dark"] .tuner-panel .tuner-status,
body[data-theme="dark"] .tuner-tips-card ul,
body[data-theme="dark"] .tuner-history-empty,
body[data-theme="dark"] .tuner-history-empty strong {
  color: #CBD5E1;
}

body[data-theme="dark"] .tuner-panel .meter-arc {
  background:
    linear-gradient(rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.96)) padding-box,
    linear-gradient(90deg, #5B6CFF, #8B5CF6, #EC4899) border-box;
}

body[data-theme="dark"] .tuner-panel .note-strip,
body[data-theme="dark"] .tuner-chip {
  border-color: rgba(167, 139, 250, 0.22);
  background: rgba(30, 41, 59, 0.9);
}

body[data-theme="dark"] .tuner-panel .note-strip span {
  border-color: rgba(167, 139, 250, 0.14);
  color: #CBD5E1;
}

body[data-theme="dark"] .tuner-note-name,
body[data-theme="dark"] .tuner-panel .tuner-detail-grid em,
body[data-theme="dark"] .tuner-bottom-note {
  color: #DDD6FE;
  background: rgba(124, 58, 237, 0.2);
}

@media (max-width: 1080px) {
  .tuner-panel .tuner-layout,
  .tuner-panel .tuner-detail-grid {
    grid-template-columns: 1fr;
  }

  .tuner-head-waves {
    opacity: 0.35;
  }
}

@media (max-width: 640px) {
  .tuner-panel {
    width: calc(100% - 20px);
  }

  .tuner-panel .tuner-head {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px 18px;
  }

  .tuner-head-waves {
    display: none;
  }

  .tuner-panel #toggleTuner {
    width: 100%;
  }

  .tuner-panel .tuner-meter {
    min-height: 500px;
    padding-inline: 18px;
  }

  .tuner-panel .meter-scale,
  .tuner-panel .meter-arc {
    left: 50%;
    width: calc(100% - 76px);
  }

  .tuner-panel .note-strip {
    overflow-x: auto;
    grid-template-columns: repeat(12, 54px);
  }

  .tuner-tips-card {
    display: grid;
  }

  .tuner-mic-art {
    display: none;
  }
}

@media (max-width: 600px) {
  .app-shell:not(.is-home-active) .tuner-panel {
    width: calc(100% - 24px);
    margin-top: 12px;
    padding-bottom: calc(110px + env(safe-area-inset-bottom));
    gap: 16px;
    overflow-x: clip;
  }

  .tuner-panel .tuner-head {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 18px;
    min-height: 0;
    padding: 20px;
    overflow: visible;
  }

  .tuner-head-copy {
    padding: 0 !important;
  }

  .tuner-panel .tuner-head .eyebrow {
    margin-bottom: 10px !important;
  }

  .tuner-panel .tuner-head h2 {
    max-width: 280px;
    font-size: 1.75rem;
    line-height: 1.08;
  }

  .tuner-panel .tuner-head-copy > span {
    max-width: 270px;
    margin-top: 12px !important;
    font-size: 0.95rem;
    line-height: 1.45;
  }

  .tuner-head-waves {
    display: none;
  }

  .tuner-panel .tuner-actions {
    width: 100%;
    padding-top: 0;
    justify-items: stretch;
  }

  .tuner-panel #toggleTuner {
    width: 100%;
    min-width: 0;
    min-height: 56px;
  }

  .tuner-panel #tunerMessage {
    justify-self: start;
  }

  .tuner-panel .tuner-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .tuner-panel .tuner-meter {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    padding: 20px;
    overflow: hidden;
    box-sizing: border-box;
  }

  .tuner-chip {
    position: static;
    width: fit-content;
    margin-bottom: 36px;
  }

  .tuner-panel .meter-readout {
    margin-top: 0;
    gap: 5px;
  }

  .tuner-panel .meter-readout #tunerMeterFrequency {
    font-size: 1.45rem;
  }

  .tuner-panel .meter-readout #tunerNote,
  .tuner-panel .meter-readout #tunerOctave {
    font-size: 0.9rem;
  }

  .tuner-panel .meter-scale {
    position: relative;
    top: auto;
    left: auto;
    width: min(100%, 340px);
    height: 42px;
    margin: 28px auto 4px;
    transform: none;
  }

  .tuner-panel .meter-scale span {
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    font-size: 0.74rem;
  }

  .tuner-panel .meter-scale span:nth-child(1),
  .tuner-panel .meter-scale span:nth-child(7) {
    display: none;
  }

  .tuner-panel .meter-scale span:nth-child(2) { left: 0; }
  .tuner-panel .meter-scale span:nth-child(3) { left: 25%; transform: translateX(-50%) !important; }
  .tuner-panel .meter-scale span:nth-child(4) { left: 50%; transform: translateX(-50%) !important; }
  .tuner-panel .meter-scale span:nth-child(5) { left: 75%; transform: translateX(-50%) !important; }
  .tuner-panel .meter-scale span:nth-child(6) { right: 0; }

  .tuner-panel .meter-arc {
    position: relative;
    top: auto;
    left: 50%;
    width: min(100%, 320px);
    height: 160px;
    margin: 0 auto;
    transform: translateX(-50%);
  }

  .tuner-panel .meter-arc span {
    height: 14px;
    transform-origin: 50% 82px;
    transform: translateX(-50%) rotate(var(--tick-angle)) translateY(-82px);
  }

  .tuner-panel .meter-arc span.is-center {
    height: 19px;
  }

  .tuner-panel .meter-side-label {
    top: 270px;
    font-size: 1.35rem;
  }

  .tuner-panel .meter-side-label.flat {
    left: 32px;
  }

  .tuner-panel .meter-side-label.sharp {
    right: 32px;
  }

  .tuner-panel .meter-needle {
    top: 258px;
    height: 105px;
  }

  .tuner-panel .meter-center {
    top: 356px;
    width: 38px;
    height: 38px;
    border-width: 7px;
  }

  .tuner-panel .note-strip {
    position: static;
    display: flex;
    grid-template-columns: none;
    width: 100%;
    margin-top: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tuner-panel .note-strip::-webkit-scrollbar {
    display: none;
  }

  .tuner-panel .note-strip span {
    flex: 0 0 54px;
    min-height: 50px;
  }

  .tuner-note-name {
    position: static;
    display: table;
    margin: 14px auto 0;
    transform: none;
  }

  .tuner-panel .tuner-info {
    gap: 14px;
  }

  .tuner-status-card,
  .tuner-panel .tuner-detail-grid > div,
  .tuner-tips-card,
  .tuner-history-card {
    padding: 18px;
  }

  .tuner-panel .tuner-detail-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .tuner-panel .tuner-detail-grid > div {
    min-height: 104px;
  }

  .tuner-bottom-note {
    align-items: flex-start;
    min-height: 0;
    padding: 14px 16px;
    line-height: 1.4;
  }
}

@media (max-width: 768px) {
  .app-shell:not(.is-home-active) .tuner-panel {
    width: calc(100% - 32px);
    max-width: 100%;
    margin-inline: auto;
    padding-bottom: calc(110px + env(safe-area-inset-bottom));
    gap: 16px;
  }

  .tuner-panel .tuner-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    min-height: 0;
    padding: 22px;
  }

  .tuner-head-copy {
    padding: 0 !important;
  }

  .tuner-panel .tuner-head .eyebrow {
    margin-bottom: 10px !important;
    font-size: 13px;
  }

  .tuner-panel .tuner-head h2 {
    max-width: 100%;
    font-size: 28px;
    line-height: 1.08;
  }

  .tuner-panel .tuner-head-copy > span {
    max-width: 100%;
    margin-top: 12px !important;
    font-size: 18px;
    line-height: 1.45;
  }

  .tuner-head-waves {
    display: none;
  }

  .tuner-panel .tuner-actions {
    display: grid;
    gap: 12px;
    width: 100%;
    padding-top: 0;
    justify-items: stretch;
  }

  .tuner-panel #toggleTuner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 54px;
    border-radius: 16px;
    white-space: nowrap;
  }

  .tuner-panel #tunerMessage {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 0 14px;
    border-radius: 12px;
    text-align: left;
  }

  .tuner-panel .tuner-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .tuner-panel .tuner-meter {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    margin-inline: auto;
    padding: 20px;
    overflow: hidden;
    box-sizing: border-box;
  }

  .tuner-chip {
    position: static;
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 22px;
    padding: 10px 14px;
    border-radius: 12px;
  }

  .tuner-panel .meter-readout {
    margin-top: 0;
    margin-bottom: 18px;
    gap: 5px;
  }

  .tuner-panel .meter-readout #tunerMeterFrequency {
    font-size: 1.45rem;
  }

  .tuner-panel .meter-scale {
    position: static;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
    max-width: 420px;
    height: auto;
    margin: 0 auto 14px;
    transform: none;
  }

  .tuner-panel .meter-scale span {
    position: static;
    display: block;
    color: #334155;
    text-align: center;
    font-size: 0.78rem;
    transform: none !important;
  }

  .tuner-panel .meter-scale span:nth-child(1),
  .tuner-panel .meter-scale span:nth-child(7) {
    display: none;
  }

  .tuner-panel .meter-arc {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 420px;
    height: auto;
    aspect-ratio: 2 / 1;
    margin: 0 auto;
    transform: none;
  }

  .tuner-panel .meter-arc span {
    height: 13px;
    transform-origin: 50% 82px;
    transform: translateX(-50%) rotate(var(--tick-angle)) translateY(-82px);
  }

  .tuner-panel .meter-side-label {
    top: 285px;
    font-size: 1.35rem;
  }

  .tuner-panel .meter-side-label.flat {
    left: 34px;
  }

  .tuner-panel .meter-side-label.sharp {
    right: 34px;
  }

  .tuner-panel .meter-needle {
    top: 278px;
    height: 110px;
  }

  .tuner-panel .meter-center {
    top: 380px;
    width: 38px;
    height: 38px;
    border-width: 7px;
  }

  .tuner-panel .note-strip {
    position: static;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: 100%;
    margin-top: 24px;
    overflow: hidden;
  }

  .tuner-panel .note-strip span {
    min-width: 0;
    min-height: 50px;
    white-space: nowrap;
  }

  .tuner-note-name {
    position: static;
    display: table;
    margin: 20px auto 0;
    transform: none;
  }

  .tuner-panel .tuner-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .app-shell:not(.is-home-active) .tuner-panel {
    width: calc(100% - 24px);
  }

  .tuner-panel .tuner-head,
  .tuner-panel .tuner-meter {
    padding: 18px;
  }

  .tuner-panel .tuner-head h2 {
    font-size: 27px;
  }

  .tuner-panel .tuner-head-copy > span {
    font-size: 16px;
  }

  .tuner-panel .meter-arc {
    max-width: 330px;
  }

  .tuner-panel .meter-arc span {
    transform-origin: 50% 70px;
    transform: translateX(-50%) rotate(var(--tick-angle)) translateY(-70px);
  }

  .tuner-panel .meter-side-label {
    top: 266px;
  }

  .tuner-panel .meter-needle {
    top: 258px;
    height: 98px;
  }

  .tuner-panel .meter-center {
    top: 348px;
  }
}

/* Pedidos do evento */
.event-panel {
  display: grid;
  gap: 16px;
  width: calc(100% - 40px);
  max-width: none;
  margin: 18px auto 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.event-panel.is-hidden {
  display: none;
}

.event-hero,
.event-form,
.event-panel .share-card {
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 40px rgba(41, 23, 83, 0.055);
}

.event-hero {
  position: relative;
  min-height: 168px;
  padding: 34px 36px;
  overflow: hidden;
}

.event-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 620px;
}

.event-hero .eyebrow {
  margin: 0 0 10px;
  color: #6D28D9;
  font-family: var(--font-semi);
  font-size: 0.82rem;
  font-weight: 900;
}

.event-hero h2 {
  margin: 0;
  color: #0F0B2D;
  font-size: 2.15rem;
  line-height: 1.05;
}

.event-hero span {
  display: block;
  margin-top: 14px;
  color: #536079;
  font-size: 1rem;
}

.event-hero-art {
  position: absolute;
  inset: 0 20px 0 auto;
  width: min(52%, 640px);
  pointer-events: none;
}

.event-wave {
  position: absolute;
  left: 0;
  right: 0;
  height: 42px;
  border-top: 2px solid rgba(124, 58, 237, 0.18);
  border-radius: 50%;
  transform: skewX(-18deg);
}

.event-wave-1 { top: 78px; }
.event-wave-2 { top: 92px; border-color: rgba(124, 58, 237, 0.14); }
.event-wave-3 { top: 106px; border-color: rgba(124, 58, 237, 0.1); }

.event-note {
  position: absolute;
  color: #7C3AED;
  font-family: var(--font-semi);
  opacity: 0.78;
}

.event-note-1 { top: 54px; left: 20%; font-size: 1.55rem; }
.event-note-2 { top: 78px; left: 34%; font-size: 2rem; }
.event-note-3 { top: 70px; right: 16%; font-size: 1.9rem; }

.event-phone {
  position: absolute;
  top: 22px;
  right: 24%;
  display: grid;
  place-items: center;
  width: 116px;
  height: 150px;
  border: 2px solid #7C3AED;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 16px 40px rgba(124, 58, 237, 0.08);
}

.event-phone-speaker {
  position: absolute;
  top: 10px;
  width: 24px;
  height: 3px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.2);
}

.event-phone-qr {
  display: grid;
  grid-template-columns: repeat(3, 16px);
  gap: 5px;
  padding: 10px;
  color: #7C3AED;
}

.event-phone-qr i {
  width: 16px;
  height: 16px;
  border: 3px solid currentColor;
  border-radius: 3px;
}

.event-phone-qr i:nth-child(5),
.event-phone-qr i:nth-child(7) {
  background: currentColor;
}

.event-form {
  display: grid;
  grid-template-columns: minmax(260px, 1.25fr) minmax(210px, 0.8fr) minmax(260px, 1.25fr);
  gap: 18px;
  align-items: end;
  padding: 20px 24px 18px;
}

.event-form .name-field {
  display: grid;
  gap: 8px;
}

.event-form .name-field > span:first-child {
  color: #536079;
  font-family: var(--font-semi);
  font-size: 0.8rem;
  text-transform: uppercase;
}

.event-input-shell {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 54px;
  padding: 0 14px;
  border: 1px solid rgba(124, 58, 237, 0.14);
  border-radius: 10px;
  background: #fff;
}

.event-input-shell svg {
  width: 18px;
  height: 18px;
  color: #7C3AED;
}

.event-input-shell input {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  color: #111827;
  background: transparent;
}

.event-submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  border-radius: 11px;
  background: linear-gradient(135deg, #7C3AED, #5B21D9);
  box-shadow: 0 14px 28px rgba(91, 33, 217, 0.2);
}

.event-submit-button svg {
  width: 18px;
  height: 18px;
}

.event-form .save-message,
.event-form-tip {
  grid-column: 1 / -1;
}

.event-form-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(124, 58, 237, 0.08);
  color: #536079;
  font-size: 0.86rem;
}

.event-form-tip svg {
  width: 16px;
  height: 16px;
  color: #6D28D9;
}

.event-layout {
  display: grid;
  grid-template-columns: minmax(280px, 30%) minmax(0, 1fr);
  gap: 16px;
}

.event-panel .share-card {
  padding: 20px;
}

.event-sidebar-card {
  display: flex;
  flex-direction: column;
  min-height: 520px;
}

.event-panel .share-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.event-panel .share-card-head h3 {
  margin: 0;
  color: #0F0B2D;
  font-size: 1.18rem;
}

#eventCount {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-left: auto;
  padding: 0 12px;
  border-radius: 999px;
  color: #6D28D9;
  background: rgba(124, 58, 237, 0.08);
  font-family: var(--font-semi);
  font-size: 0.78rem;
}

.event-add-mini {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #7C3AED;
  cursor: pointer;
}

.event-list {
  display: grid;
  gap: 10px;
}

.event-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 12px;
  color: #0F172A;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.event-item:hover {
  transform: translateY(-1px);
  border-color: rgba(124, 58, 237, 0.24);
}

.event-item.is-active {
  border-color: #7C3AED;
  background: rgba(124, 58, 237, 0.045);
}

.event-item-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #8B5CF6, #6D28D9);
}

.event-item-icon .action-icon {
  width: 20px;
  height: 20px;
}

.event-item-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.event-item-copy strong {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #111827;
  font-family: var(--font-semi);
  font-size: 0.95rem;
}

.event-item-copy strong em {
  padding: 3px 8px;
  border-radius: 999px;
  color: #16A34A;
  background: rgba(34, 197, 94, 0.12);
  font-size: 0.68rem;
  font-style: normal;
  text-transform: uppercase;
}

.event-item-copy small {
  color: #64748B;
  font-size: 0.82rem;
}

.event-item-arrow {
  color: #7C3AED;
  font-size: 1.25rem;
}

.event-info-card {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding: 22px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.09), rgba(124, 58, 237, 0.03));
}

.event-info-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  color: #7C3AED;
  background: rgba(124, 58, 237, 0.1);
}

.event-info-card strong {
  color: #1E1B4B;
  font-size: 0.9rem;
}

.event-info-card small {
  color: #64748B;
  font-size: 0.82rem;
}

.event-info-card button {
  justify-self: start;
  border: 0;
  color: #6D28D9;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-semi);
  font-size: 0.82rem;
}

.event-detail-head {
  justify-content: space-between;
}

.event-detail-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.event-detail-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #8B5CF6, #6D28D9);
}

.event-detail-icon svg {
  width: 20px;
  height: 20px;
}

.event-detail-meta {
  display: block;
  margin-top: 5px;
  color: #64748B;
  font-size: 0.84rem;
}

.event-status-pill {
  align-self: flex-start;
  padding: 4px 9px;
  border-radius: 999px;
  color: #16A34A;
  background: rgba(34, 197, 94, 0.13);
  font-family: var(--font-semi);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.event-detail-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.event-detail-actions .secondary-button,
.event-more-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(124, 58, 237, 0.14);
  border-radius: 10px;
  color: #1F2937;
  background: #fff;
}

.event-detail-actions svg {
  width: 17px;
  height: 17px;
  color: #6D28D9;
}

.event-more-button {
  width: 42px;
  padding: 0;
  color: #6D28D9;
  cursor: pointer;
}

.event-detail-empty {
  padding: 28px;
  border: 1px dashed rgba(124, 58, 237, 0.18);
  border-radius: 12px;
  color: #64748B;
  background: rgba(124, 58, 237, 0.03);
}

.event-detail {
  display: grid;
  gap: 16px;
}

.event-share-box {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 26px;
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 14px;
  background: #fff;
}

.event-qr-wrap {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding-right: 28px;
  border-right: 1px solid rgba(100, 116, 139, 0.16);
}

.event-qr-wrap img {
  width: 170px;
  height: 170px;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
}

.event-qr-wrap .secondary-button {
  color: #6D28D9;
  background: rgba(124, 58, 237, 0.06);
}

.event-share-content h4 {
  margin: 0;
  color: #111827;
  font-size: 1.08rem;
}

.event-share-content p {
  margin: 8px 0 18px;
  color: #64748B;
  font-size: 0.9rem;
}

.event-link-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.event-url-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: #6D28D9;
  background: rgba(124, 58, 237, 0.06);
}

.event-url-icon svg {
  width: 16px;
  height: 16px;
}

.event-link-row input {
  height: 46px;
  border: 1px solid rgba(124, 58, 237, 0.14);
  border-radius: 10px;
  color: #334155;
  background: #fff;
}

.event-link-row #copyEventLink {
  height: 46px;
  border: 0;
  color: #fff;
  background: #7C3AED;
}

.event-social-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.event-social-actions button {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(124, 58, 237, 0.14);
  border-radius: 10px;
  color: #334155;
  background: #fff;
  cursor: pointer;
}

.event-requests-card {
  min-height: 190px;
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 14px;
  background: #fff;
}

.event-tabs {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(100, 116, 139, 0.12);
}

.event-tabs button {
  position: relative;
  min-height: 52px;
  border: 0;
  color: #475569;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-semi);
}

.event-tabs button.is-active {
  color: #6D28D9;
}

.event-tabs button.is-active::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  border-radius: 999px;
  background: #7C3AED;
}

.event-tabs span {
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.08);
}

.event-request-list {
  padding: 18px;
}

.event-empty-state {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 28px 16px;
  text-align: center;
}

.event-empty-state > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  color: #7C3AED;
  background: rgba(124, 58, 237, 0.09);
}

.event-empty-state .action-icon {
  width: 22px;
  height: 22px;
}

.event-empty-state strong {
  color: #334155;
  font-size: 0.95rem;
}

.event-empty-state small {
  color: #64748B;
  font-size: 0.84rem;
}

@media (max-width: 980px) {
  .event-hero-art {
    opacity: 0.35;
  }

  .event-form,
  .event-layout,
  .event-share-box {
    grid-template-columns: 1fr;
  }

  .event-qr-wrap {
    padding-right: 0;
    padding-bottom: 20px;
    border-right: 0;
    border-bottom: 1px solid rgba(100, 116, 139, 0.16);
  }
}

@media (max-width: 640px) {
  .event-panel {
    width: calc(100% - 20px);
  }

  .event-hero {
    padding: 24px 18px;
  }

  .event-hero-art {
    display: none;
  }

  .event-form,
  .event-panel .share-card,
  .event-share-box {
    padding: 16px;
  }

  .event-detail-head,
  .event-detail-actions,
  .event-link-row {
    display: grid;
    grid-template-columns: 1fr;
  }
}

body[data-theme="dark"] .event-hero,
body[data-theme="dark"] .event-form,
body[data-theme="dark"] .event-panel .share-card,
body[data-theme="dark"] .event-share-box,
body[data-theme="dark"] .event-requests-card {
  border-color: rgba(167, 139, 250, 0.22);
  background: rgba(15, 23, 42, 0.96);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
}

body[data-theme="dark"] .event-hero h2,
body[data-theme="dark"] .event-panel .share-card-head h3,
body[data-theme="dark"] .event-detail-title-row h3,
body[data-theme="dark"] .event-share-content h4,
body[data-theme="dark"] .event-empty-state strong,
body[data-theme="dark"] .event-info-card strong {
  color: #F8FAFC;
}

body[data-theme="dark"] .event-hero span,
body[data-theme="dark"] .event-share-content p,
body[data-theme="dark"] .event-detail-meta,
body[data-theme="dark"] .event-form-tip,
body[data-theme="dark"] .event-empty-state small,
body[data-theme="dark"] .event-info-card small,
body[data-theme="dark"] .event-item-copy small {
  color: #CBD5E1;
}

body[data-theme="dark"] .event-form .name-field > span:first-child,
body[data-theme="dark"] .event-hero .eyebrow {
  color: #C4B5FD;
}

body[data-theme="dark"] .event-input-shell,
body[data-theme="dark"] .event-link-row input,
body[data-theme="dark"] .event-social-actions button,
body[data-theme="dark"] .event-detail-actions .secondary-button,
body[data-theme="dark"] .event-more-button,
body[data-theme="dark"] .event-item {
  border-color: rgba(167, 139, 250, 0.28);
  color: #E5E7EB;
  background: rgba(30, 41, 59, 0.9);
}

body[data-theme="dark"] .event-input-shell input,
body[data-theme="dark"] .event-link-row input {
  color: #F8FAFC;
}

body[data-theme="dark"] .event-input-shell input::placeholder {
  color: #94A3B8;
}

body[data-theme="dark"] .event-item:hover,
body[data-theme="dark"] .event-item.is-active {
  border-color: rgba(167, 139, 250, 0.58);
  background: rgba(49, 46, 129, 0.34);
}

body[data-theme="dark"] .event-item-copy strong {
  color: #F8FAFC;
}

body[data-theme="dark"] .event-info-card {
  background: rgba(49, 46, 129, 0.28);
}

body[data-theme="dark"] .event-qr-wrap {
  border-color: rgba(148, 163, 184, 0.24);
  background: transparent;
}

body[data-theme="dark"] .event-qr-wrap img {
  background: #fff;
}

body[data-theme="dark"] .event-qr-wrap .secondary-button,
body[data-theme="dark"] .event-url-icon,
body[data-theme="dark"] .event-empty-state > span,
body[data-theme="dark"] #eventCount {
  color: #DDD6FE;
  background: rgba(124, 58, 237, 0.22);
}

body[data-theme="dark"] .event-link-row #copyEventLink {
  color: #fff;
  background: #7C3AED;
}

body[data-theme="dark"] .event-submit-button {
  color: #fff;
  background: linear-gradient(135deg, #7C3AED, #5B21D9);
}

body[data-theme="dark"] .event-tabs {
  border-color: rgba(148, 163, 184, 0.18);
}

body[data-theme="dark"] .event-tabs button {
  color: #CBD5E1;
}

body[data-theme="dark"] .event-tabs button.is-active {
  color: #C4B5FD;
}

body[data-theme="dark"] .event-phone {
  border-color: #8B5CF6;
  background: rgba(15, 23, 42, 0.72);
}

/* Overrides finais da pagina Musicas para preservar a fidelidade visual acima da cascata legada. */
.vibra-music-page #cardsView.song-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 7px !important;
}

.vibra-music-page .song-card {
  display: grid !important;
  grid-template-columns: 46px minmax(260px, 1fr) auto 28px !important;
  min-height: 116px !important;
  padding: 12px 10px 12px 14px !important;
  border: 1px solid #EEEAF8 !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(54, 40, 96, 0.025) !important;
}

.vibra-music-page .song-card-side {
  width: auto !important;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-flow: row nowrap !important;
  justify-content: flex-end !important;
}

.vibra-music-page .vibra-action,
.vibra-music-page .vibra-action:visited {
  width: auto !important;
  min-height: 34px !important;
  border: 1px solid #EEEAF8 !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

/* Ultimo override: mantem o menu Opcoes visivel acima dos cards em Musicas. */
.vibra-music-page #cardsView.song-grid,
.vibra-music-page .song-card,
.vibra-music-page .song-card-side,
#cardsView .song-card-side,
#cardsView .song-card-side > *,
#cardsView .song-card-side .song-options-menu {
  overflow: visible !important;
}

.vibra-music-page .song-card {
  grid-template-columns: minmax(0, 1fr) auto 28px !important;
  z-index: 0;
}

.vibra-music-page .song-card:has(.song-options-menu[open]) {
  z-index: 4900 !important;
}

.vibra-music-page .song-options-menu {
  position: relative !important;
  z-index: 5000 !important;
}

.vibra-music-page .song-options-button {
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 10px !important;
  border: 1px solid #EEEAF8 !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  color: #56537A !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.vibra-music-page .song-options-button::-webkit-details-marker {
  display: none;
}

.vibra-music-page .song-options-button .action-icon,
.vibra-music-page .song-options-item .action-icon {
  width: 15px;
  height: 15px;
}

.vibra-music-page .song-options-popover {
  position: absolute !important;
  top: auto !important;
  bottom: calc(100% + 8px) !important;
  right: 0 !important;
  z-index: 5000 !important;
  display: none;
  min-width: 150px;
  padding: 6px;
  border: 1px solid #EEEAF8;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 18px 36px rgba(31, 27, 64, 0.18);
}

.vibra-music-page .song-options-menu[open] .song-options-popover {
  display: block !important;
}

.vibra-music-page .song-options-item {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #343158;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
}

.vibra-music-page .song-options-item.is-danger {
  color: #EF4444;
}

@media (max-width: 760px) {
  .vibra-music-page .song-card {
    grid-template-columns: minmax(0, 1fr) 30px !important;
  }

  .vibra-music-page .song-card-side {
    grid-column: 1 / -1;
    width: 100% !important;
    flex-flow: row wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  .vibra-music-page #cardsView .song-card-side {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  .vibra-music-page .song-options-menu {
    margin-left: auto !important;
  }

  .vibra-music-page #cardsView .song-card-side .song-options-menu {
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  .vibra-music-page .song-options-button {
    width: 34px !important;
    padding: 0 !important;
  }

  .vibra-music-page .song-options-button span {
    display: none !important;
  }
}

@media (max-width: 760px) {
  body[data-theme="dark"] .bottom-nav-bar {
    background: rgb(8, 8, 34) !important;
    color: rgb(15, 23, 42) !important;
    border-color: rgba(139, 92, 246, 0.3) rgb(15, 23, 42) rgb(15, 23, 42) !important;
    box-shadow: rgba(0, 0, 0, 0.3) 0 -4px 24px 0 !important;
  }

  body[data-theme="dark"] .bottom-nav-item,
  body[data-theme="dark"] .bottom-nav-item:hover,
  body[data-theme="dark"] .bottom-nav-item.is-active,
  body[data-theme="dark"] .bottom-nav-item.is-active span,
  body[data-theme="dark"] .bottom-nav-item.is-active svg {
    background: rgba(0, 0, 0, 0) !important;
    color: rgb(155, 92, 255) !important;
    border-color: rgb(155, 92, 255) !important;
    box-shadow: none !important;
  }

  body[data-theme="dark"] .bottom-nav-fab,
  body[data-theme="dark"] .bottom-nav-fab[aria-expanded="true"] {
    background: rgba(0, 0, 0, 0) !important;
    color: rgb(255, 255, 255) !important;
    border-color: rgb(255, 255, 255) !important;
    box-shadow: rgba(109, 40, 217, 0.38) 0 12px 26px 0, rgb(8, 8, 34) 0 0 0 7px !important;
  }
}

body[data-theme="dark"] .vibra-music-page .toolbar label.search-field {
  background: rgba(30, 41, 59, 0.94) !important;
  border-color: rgba(165, 180, 252, 0.34) !important;
}

body[data-theme="dark"] .vibra-music-page .toolbar label.search-field > input#searchInput {
  background: transparent !important;
  border-color: transparent !important;
  color: #f8fafc !important;
  box-shadow: none !important;
}

/* EOF guarantee: repertorio builder layout must win over legacy duplicates. */

.hoje-vibra-inline,
.hoje-vibra-card,
.hoje-vibra-item {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
}

.hoje-vibra-inline {
  margin-top: 16px;
  padding: 18px;
  display: grid;
  gap: 8px;
}

.hoje-vibra-inline strong {
  font-size: clamp(1.15rem, 2vw, 1.65rem);
}

.hoje-vibra-list {
  display: grid;
  gap: 12px;
}

.hoje-vibra-item {
  padding: 14px;
  display: grid;
  gap: 8px;
}

.hoje-vibra-item strong {
  color: #1f2937;
}

.hoje-vibra-item p,
.hoje-vibra-inline p {
  margin: 0;
  color: #64748b;
}

.hoje-vibra-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hoje-vibra-actions button,
.hoje-vibra-list > button {
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  padding: 0 14px;
  font-weight: 700;
  color: #334155;
  background: #fff;
  cursor: pointer;
}

.hoje-vibra-actions .dashboard-primary-action,
.hoje-vibra-list .dashboard-primary-action {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
}

.hoje-vibra-actions button:focus-visible,
.hoje-vibra-list button:focus-visible {
  outline: 3px solid rgba(236, 72, 153, 0.32);
  outline-offset: 2px;
}

.main-bottom-grid .hoje-vibra-card {
  min-width: 0;
}

body[data-theme="dark"] .hoje-vibra-inline,
body[data-theme="dark"] .hoje-vibra-card,
body[data-theme="dark"] .hoje-vibra-item {
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(148, 163, 184, 0.22);
}

body[data-theme="dark"] .hoje-vibra-item strong {
  color: #f8fafc;
}

body[data-theme="dark"] .hoje-vibra-actions button,
body[data-theme="dark"] .hoje-vibra-list > button {
  background: rgba(15, 23, 42, 0.88);
  color: #e2e8f0;
}

@media (max-width: 720px) {
  .hoje-vibra-actions {
    display: grid;
  }

  .hoje-vibra-actions button {
    width: 100%;
  }
}

/* Escalas no braco - layout premium e responsivo */
.scale-library-panel[data-section-panel="escalas"] {
  max-width: 1240px;
  margin-inline: auto;
}

.scale-library-head {
  align-items: center;
  padding: 14px 20px 12px;
  min-height: 0;
}

.scale-library-head .chord-head-copy {
  display: grid;
  gap: 5px;
  align-content: center;
}

.scale-library-head .eyebrow {
  margin: 0 0 2px;
  line-height: 1.1;
}

.scale-library-head .chord-head-copy h2 {
  margin: 0;
  line-height: 1.05;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
}

.scale-library-head .chord-head-copy > span {
  max-width: 720px;
  line-height: 1.28;
  font-size: 0.92rem;
}

.scale-library-head .chord-tuning-badge {
  width: fit-content;
  margin-top: 8px;
  min-height: 28px;
  padding: 0 12px;
}

.scale-tone-toolbar,
.scale-fretboard-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
  flex-wrap: wrap;
}

.scale-segment {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
}

.scale-segment button {
  min-height: 32px;
  border: 0;
  border-radius: 7px;
  padding: 0 12px;
  font-weight: 800;
  color: #475569;
  background: transparent;
  cursor: pointer;
}

.scale-segment button.is-active {
  color: #fff;
  background: linear-gradient(135deg, #6d28d9, #8b5cf6);
  box-shadow: 0 10px 22px rgba(109, 40, 217, 0.22);
}

.scale-segment button:focus-visible,
.scale-tone-button:focus-visible,
.scale-fret:focus-visible {
  outline: 3px solid rgba(124, 58, 237, 0.34);
  outline-offset: 2px;
}

.scale-library-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.scale-library-panel .scale-tone-list {
  align-content: start;
  display: grid;
  grid-template-columns: repeat(12, minmax(72px, 1fr));
  gap: 8px;
  max-height: none;
  overflow: visible;
  width: 100%;
}

.scale-library-panel .scale-tone-button {
  min-height: 48px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.92);
  text-align: left;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.scale-library-panel .scale-tone-button strong {
  display: block;
  font-size: 1rem;
  line-height: 1.05;
  color: #1e1b4b;
}

.scale-library-panel .scale-tone-button span {
  display: block;
  margin-top: 1px;
  font-size: 0.66rem;
  color: #64748b;
}

.scale-library-panel .scale-tone-button.is-active {
  border-color: transparent;
  background: linear-gradient(135deg, #6d28d9, #8b5cf6);
  box-shadow: 0 16px 34px rgba(109, 40, 217, 0.28);
}

.scale-library-panel .scale-tone-button.is-active strong,
.scale-library-panel .scale-tone-button.is-active span {
  color: #fff;
}

.scale-library-panel .scale-viewer {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  padding: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(139, 92, 246, 0.12), transparent 32%),
    rgba(255, 255, 255, 0.9);
}

.scale-viewer-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.scale-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0;
}

.scale-info-grid section {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  padding: 13px;
  background: rgba(255, 255, 255, 0.76);
}

.scale-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.scale-info-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 8px;
  padding: 0 12px;
  color: #312e81;
  background: #f5f3ff;
  font-weight: 850;
}

.scale-info-chip small {
  color: #7c3aed;
  font-size: 0.68rem;
  text-transform: uppercase;
}

.scale-info-chip.is-root {
  color: #fff;
  background: #6d28d9;
}

.scale-info-chip.is-root small {
  color: rgba(255, 255, 255, 0.82);
}

.scale-fretboard-wrap {
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
}

.scale-fretboard-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 6px;
}

.scale-fretboard-outer {
  min-width: 860px;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 0;
}

.scale-nut {
  width: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #111827, #6b7280);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26);
}

.scale-fret-numbers,
.scale-string-row {
  display: grid;
  grid-template-columns: 38px repeat(13, minmax(54px, 1fr));
}

.scale-fret-numbers span {
  text-align: center;
  font-size: 0.76rem;
  font-weight: 850;
  color: #64748b;
}

.scale-fret-numbers .is-octave {
  color: #6d28d9;
}

.scale-fretboard-grid {
  position: relative;
  border: 1px solid rgba(100, 116, 139, 0.18);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(15, 23, 42, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(15, 23, 42, 0.06) 1px, transparent 1px),
    linear-gradient(180deg, #f8fafc, #eef2ff);
  background-size: calc((100% - 38px) / 13) 100%, 100% 25%, auto;
}

.scale-string-row {
  min-height: 46px;
  align-items: center;
  border-bottom: 1px solid rgba(100, 116, 139, 0.16);
}

.scale-string-row:last-child {
  border-bottom: 0;
}

.scale-string-label {
  position: sticky;
  left: 0;
  z-index: 4;
  height: 100%;
  display: grid;
  place-items: center;
  color: #1f2937;
  background: rgba(248, 250, 252, 0.94);
  font-weight: 900;
}

.scale-fret {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

.scale-fret::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: rgba(71, 85, 105, 0.48);
}

.scale-fret strong {
  position: relative;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  border-radius: 999px;
  color: #312e81;
  background: #c4b5fd;
  font-size: 0.78rem;
  box-shadow: 0 8px 18px rgba(109, 40, 217, 0.18);
}

.scale-fret.is-root-note strong {
  min-width: 34px;
  height: 34px;
  color: #fff;
  background: #6d28d9;
  box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.18), 0 12px 24px rgba(109, 40, 217, 0.32);
}

.scale-fret.is-root-note strong::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 2px solid rgba(109, 40, 217, 0.28);
  border-radius: inherit;
}

.scale-fret.is-selected strong,
.scale-fret:hover strong {
  transform: translateY(-1px) scale(1.06);
}

.scale-position-marker {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: calc(38px + ((var(--fret) + 0.5) * ((100% - 38px) / 13)));
  width: 12px;
  height: 12px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: rgba(15, 23, 42, 0.24);
}

.scale-position-marker.is-octave {
  width: 18px;
  height: 18px;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.64);
}

.scale-legend,
.scale-note-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 12px;
  color: #475569;
  font-size: 0.88rem;
}

.scale-legend b {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  border-radius: 999px;
  vertical-align: -4px;
}

.legend-root { background: #6d28d9; box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.18); }
.legend-scale { background: #c4b5fd; }
.legend-marker { background: rgba(15, 23, 42, 0.24); }

.scale-note-detail {
  min-height: 40px;
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(124, 58, 237, 0.08);
}

body[data-theme="dark"] .scale-segment,
body[data-theme="dark"] .scale-library-panel .scale-tone-button,
body[data-theme="dark"] .scale-library-panel .scale-viewer,
body[data-theme="dark"] .scale-info-grid section,
body[data-theme="dark"] .scale-fretboard-wrap {
  background: rgba(15, 23, 42, 0.76);
  border-color: rgba(148, 163, 184, 0.22);
}

body[data-theme="dark"] .scale-library-panel .scale-tone-button strong,
body[data-theme="dark"] .scale-string-label {
  color: #f8fafc;
}

body[data-theme="dark"] .scale-library-panel .scale-tone-button span,
body[data-theme="dark"] .scale-fret-numbers span,
body[data-theme="dark"] .scale-legend,
body[data-theme="dark"] .scale-note-detail {
  color: #cbd5e1;
}

body[data-theme="dark"] .scale-fretboard-grid {
  background:
    linear-gradient(90deg, rgba(226, 232, 240, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(226, 232, 240, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, #111827, #1e1b4b);
}

body[data-theme="dark"] .scale-string-label {
  background: rgba(15, 23, 42, 0.94);
}

@media (max-width: 980px) {
  .scale-library-layout {
    grid-template-columns: 1fr;
  }

  .scale-library-panel .scale-tone-list {
    grid-template-columns: repeat(6, minmax(84px, 1fr));
    overflow-x: auto;
    padding-bottom: 4px;
  }
}

@media (max-width: 640px) {
  .scale-tone-toolbar,
  .scale-fretboard-toolbar {
    align-items: stretch;
  }

  .scale-segment {
    width: 100%;
    overflow-x: auto;
  }

  .scale-segment button {
    flex: 1 0 auto;
    min-height: 38px;
  }

  .scale-info-grid {
    grid-template-columns: 1fr;
  }

  .scale-fretboard-wrap {
    margin-inline: -4px;
    padding: 10px;
  }

  .scale-fretboard-outer {
    min-width: 900px;
  }
}
/* Escalas no braco - compactacao para viewport 100% desktop */
.scale-library-panel[data-section-panel="escalas"] {
  padding: 10px !important;
  gap: 8px !important;
  font-size: 14px;
}

.scale-library-panel[data-section-panel="escalas"] .scale-library-head {
  min-height: 0 !important;
  padding: 9px 18px 8px !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-library-head .chord-head-copy {
  gap: 3px !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-library-head .eyebrow {
  margin: 0 0 2px !important;
  font-size: 0.68rem !important;
  line-height: 1.05 !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-library-head h2 {
  margin: 0 !important;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem) !important;
  line-height: 1.05 !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-library-head .chord-head-copy > span {
  font-size: 0.78rem !important;
  line-height: 1.18 !important;
  max-width: 720px;
}

.scale-library-panel[data-section-panel="escalas"] .scale-library-head .chord-tuning-badge {
  min-height: 23px !important;
  margin-top: 4px !important;
  padding: 0 10px !important;
  font-size: 0.74rem !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-tone-toolbar,
.scale-library-panel[data-section-panel="escalas"] .scale-fretboard-toolbar {
  gap: 8px !important;
  margin: 6px 0 !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-segment {
  padding: 3px !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-segment button {
  min-height: 28px !important;
  padding: 0 10px !important;
  font-size: 0.78rem !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-library-layout {
  gap: 8px !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-tone-list {
  grid-template-columns: repeat(12, minmax(64px, 1fr)) !important;
  gap: 6px !important;
  margin: 0 !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-tone-button {
  min-height: 36px !important;
  padding: 4px 8px !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-tone-button strong {
  font-size: 0.88rem !important;
  line-height: 1 !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-tone-button span {
  margin-top: 1px !important;
  font-size: 0.56rem !important;
  line-height: 1.05 !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-viewer {
  padding: 10px 12px !important;
  gap: 7px !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-viewer-head {
  min-height: 0 !important;
  margin: 0 !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-viewer-head h3 {
  font-size: 1.12rem !important;
  line-height: 1.05 !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-viewer-head span {
  font-size: 0.66rem !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-viewer-actions .secondary-button {
  min-height: 30px !important;
  padding: 0 10px !important;
  font-size: 0.76rem !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-info-grid {
  gap: 7px !important;
  margin: 6px 0 !important;
  padding: 0 !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-info-grid section {
  padding: 7px !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-info-grid section > strong {
  font-size: 0.78rem !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-chip-row {
  gap: 5px !important;
  margin-top: 5px !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-info-chip {
  min-height: 24px !important;
  padding: 0 7px !important;
  font-size: 0.74rem !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-info-chip small {
  font-size: 0.54rem !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-fretboard-wrap {
  padding: 7px !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-fretboard-scroll {
  padding-bottom: 2px !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-fretboard-outer {
  min-width: 820px !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-fret-numbers,
.scale-library-panel[data-section-panel="escalas"] .scale-string-row {
  grid-template-columns: 30px repeat(13, minmax(46px, 1fr)) !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-fret-numbers span {
  font-size: 0.6rem !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-string-row {
  min-height: 32px !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-string-label {
  font-size: 0.78rem !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-fret {
  min-height: 32px !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-fret strong {
  min-width: 23px !important;
  height: 23px !important;
  font-size: 0.64rem !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-fret.is-root-note strong {
  min-width: 27px !important;
  height: 27px !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-fret.is-root-note strong::after {
  inset: -3px !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-position-marker {
  left: calc(30px + ((var(--fret) + 0.5) * ((100% - 30px) / 13))) !important;
  width: 9px !important;
  height: 9px !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-position-marker.is-octave {
  width: 14px !important;
  height: 14px !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-legend,
.scale-library-panel[data-section-panel="escalas"] .scale-note-detail {
  gap: 9px !important;
  margin-top: 6px !important;
  font-size: 0.74rem !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-legend b {
  width: 12px !important;
  height: 12px !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-note-detail {
  min-height: 28px !important;
  padding: 6px 8px !important;
}

@media (max-width: 980px) {
  .scale-library-panel[data-section-panel="escalas"] .scale-tone-list {
    grid-template-columns: repeat(6, minmax(76px, 1fr)) !important;
  }
}

.setlist-panel[data-section-panel="montar"] {
  width: min(100%, 1120px) !important;
  margin-inline: auto !important;
  padding: clamp(18px, 3vw, 32px) !important;
  overflow: hidden !important;
  border: 1px solid #ede7ff !important;
  border-radius: 14px !important;
  background: radial-gradient(circle at 82% 8%, rgba(168, 85, 247, 0.13), transparent 26%), #fff !important;
  box-shadow: 0 18px 46px rgba(80, 58, 140, 0.08) !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: 26px !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-head-actions {
  display: flex !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-name-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 34%) !important;
  gap: 14px 24px !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-empty.is-hidden {
  display: none !important;
}

body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] {
  border-color: rgba(167, 139, 250, 0.32) !important;
  background: radial-gradient(circle at 82% 8%, rgba(139, 92, 246, 0.22), transparent 26%), #0b1024 !important;
}

body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] h2,
body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] h3 {
  color: #f8fafc !important;
}

body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] .setlist-name-card,
body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] .setlist-empty {
  background: rgba(15, 23, 42, 0.74) !important;
  border-color: rgba(167, 139, 250, 0.28) !important;
}

body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] input#repertoireName {
  background: rgba(2, 6, 23, 0.68) !important;
  color: #f8fafc !important;
}

@media (max-width: 760px) {
  .setlist-panel[data-section-panel="montar"] {
    width: 100% !important;
    padding: 18px 14px !important;
  }

  .setlist-panel[data-section-panel="montar"] .setlist-head {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .setlist-panel[data-section-panel="montar"] .setlist-head-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .setlist-panel[data-section-panel="montar"] .setlist-name-card {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
  }

  .setlist-panel[data-section-panel="montar"] .setlist-field-help,
  .setlist-panel[data-section-panel="montar"] .save-message {
    grid-column: 1 / -1 !important;
    text-align: left !important;
  }
}

/* Redesenho final: Seu Repertorio / Sequencia selecionada. */
.setlist-panel[data-section-panel="montar"] {
  position: relative;
  overflow: hidden;
  width: min(100%, 1120px);
  margin-inline: auto;
  padding: clamp(18px, 3vw, 32px) !important;
  border: 1px solid #ede7ff !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 82% 8%, rgba(168, 85, 247, 0.13), transparent 26%),
    radial-gradient(circle at 52% 18%, rgba(124, 58, 237, 0.08), transparent 22%),
    #ffffff !important;
  box-shadow: 0 18px 46px rgba(80, 58, 140, 0.08) !important;
}

.setlist-panel[data-section-panel="montar"]::before,
.setlist-panel[data-section-panel="montar"]::after {
  content: "+";
  position: absolute;
  color: rgba(139, 92, 246, 0.22);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

.setlist-panel[data-section-panel="montar"]::before {
  top: 26px;
  right: 17%;
}

.setlist-panel[data-section-panel="montar"]::after {
  top: 56px;
  left: 48%;
  font-size: 18px;
}

.setlist-panel[data-section-panel="montar"] .setlist-head {
  position: relative;
  z-index: 1;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin: 0 0 26px !important;
}

.setlist-title-block {
  min-width: 0;
}

.setlist-kicker,
.setlist-field-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #7c3aed;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.setlist-kicker svg,
.setlist-field-label svg,
.setlist-outline-button svg,
.setlist-save-button svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.setlist-kicker svg {
  padding: 3px;
  border-radius: 6px;
  background: #efe7ff;
}

.setlist-panel[data-section-panel="montar"] .setlist-head h2 {
  margin: 8px 0 6px !important;
  color: #171433 !important;
  font-size: clamp(26px, 4vw, 36px) !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
}

.setlist-panel[data-section-panel="montar"] #setlistCount {
  display: block;
  color: #6f6b8a !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-head-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

.setlist-outline-button,
.setlist-add-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  min-height: 46px !important;
  border: 1px solid #d9c8ff !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: #6d28d9 !important;
  box-shadow: 0 8px 22px rgba(109, 40, 217, 0.06) !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

.setlist-outline-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.save-repertoire {
  margin: 0 0 28px !important;
}

.setlist-name-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 34%);
  gap: 14px 24px;
  align-items: end;
  padding: clamp(16px, 2.5vw, 26px);
  border: 1px solid #ede7ff;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 12px 36px rgba(70, 54, 130, 0.05);
}

.setlist-name-field {
  min-width: 0;
  display: grid !important;
  gap: 12px !important;
}

.setlist-input-shell {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.setlist-input-shell input#repertoireName {
  width: 100% !important;
  min-height: 56px !important;
  padding: 0 78px 0 44px !important;
  border: 2px solid #b18cff !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #211b3f !important;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.08) !important;
  font-size: 15px !important;
  font-weight: 750 !important;
}

.setlist-input-shell input#repertoireName::placeholder {
  color: #8b87a8 !important;
}

.setlist-input-icon,
.setlist-input-count {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.setlist-input-icon {
  left: 16px;
  width: 18px;
  height: 18px;
  color: #8b87a8;
}

.setlist-input-count {
  right: 16px;
  color: #6f6b8a;
  font-size: 11px;
  font-weight: 850;
}

.setlist-save-button {
  min-height: 56px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 26px rgba(109, 40, 217, 0.26) !important;
  font-weight: 900 !important;
}

.setlist-field-help {
  grid-column: 1 / 2;
  margin: -5px 0 0;
  color: #777293;
  font-size: 12px;
  font-weight: 650;
}

.setlist-name-card .save-message {
  grid-column: 2 / 3;
  min-width: 0;
  color: #6d28d9;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.setlist-panel[data-section-panel="montar"] .setlist {
  display: grid !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-height: 300px;
  margin: 0 !important;
  padding: clamp(30px, 7vw, 62px) 18px !important;
  border: 1px solid #ede7ff !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: #282242 !important;
  text-align: center;
}

.setlist-panel[data-section-panel="montar"] .setlist-empty.is-hidden {
  display: none !important;
}

.setlist-empty-art {
  position: relative;
  width: 120px;
  height: 92px;
  margin-bottom: 6px;
  color: #8b5cf6;
}

.setlist-empty-art::before {
  content: "";
  position: absolute;
  inset: 0 14px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.14), rgba(196, 181, 253, 0.28));
}

.setlist-empty-folder {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 54px;
  border: 2px solid #b794ff;
  border-radius: 8px 8px 14px 14px;
  background: linear-gradient(180deg, #efe7ff, #d8c8ff);
  transform: perspective(120px) rotateX(8deg);
}

.setlist-empty-folder::before {
  content: "";
  position: absolute;
  left: 13px;
  top: -14px;
  width: 38px;
  height: 18px;
  border: 2px solid #b794ff;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #efe7ff;
}

.setlist-empty-note {
  position: absolute;
  left: 47px;
  top: 39px;
  z-index: 2;
  color: #7c3aed;
  font-size: 34px;
  font-weight: 900;
}

.setlist-empty-note-small {
  left: 74px;
  top: 12px;
  color: #a78bfa;
  font-size: 22px;
}

.setlist-empty h3 {
  margin: 0;
  color: #171433;
  font-size: clamp(20px, 4vw, 24px);
  line-height: 1.15;
}

.setlist-empty p {
  max-width: 390px;
  margin: 0;
  color: #6f6b8a;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
}

.setlist-add-button {
  margin-top: 8px;
  min-width: 220px;
}

body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] {
  border-color: rgba(167, 139, 250, 0.32) !important;
  background:
    radial-gradient(circle at 82% 8%, rgba(139, 92, 246, 0.22), transparent 26%),
    radial-gradient(circle at 50% 18%, rgba(124, 58, 237, 0.13), transparent 24%),
    #0b1024 !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34) !important;
}

body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] .setlist-head h2,
body[data-theme="dark"] .setlist-empty h3 {
  color: #f8fafc !important;
}

body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] #setlistCount,
body[data-theme="dark"] .setlist-empty p,
body[data-theme="dark"] .setlist-field-help {
  color: #cbd5e1 !important;
}

body[data-theme="dark"] .setlist-kicker,
body[data-theme="dark"] .setlist-field-label {
  color: #c4b5fd !important;
}

body[data-theme="dark"] .setlist-kicker svg {
  background: rgba(139, 92, 246, 0.2);
}

body[data-theme="dark"] .setlist-name-card,
body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] .setlist-empty {
  border-color: rgba(167, 139, 250, 0.28) !important;
  background: rgba(15, 23, 42, 0.74) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18) !important;
}

body[data-theme="dark"] .setlist-outline-button,
body[data-theme="dark"] .setlist-add-button {
  border-color: rgba(196, 181, 253, 0.48) !important;
  background: rgba(15, 23, 42, 0.82) !important;
  color: #ede9fe !important;
  box-shadow: none !important;
}

body[data-theme="dark"] .setlist-input-shell input#repertoireName {
  border-color: rgba(167, 139, 250, 0.62) !important;
  background: rgba(2, 6, 23, 0.68) !important;
  color: #f8fafc !important;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.12) !important;
}

body[data-theme="dark"] .setlist-input-shell input#repertoireName::placeholder,
body[data-theme="dark"] .setlist-input-icon,
body[data-theme="dark"] .setlist-input-count {
  color: #cbd5e1 !important;
}

@media (max-width: 760px) {
  .setlist-panel[data-section-panel="montar"] {
    width: 100%;
    padding: 18px 14px !important;
    border-radius: 12px !important;
  }

  .setlist-panel[data-section-panel="montar"] .setlist-head,
  .setlist-panel[data-section-panel="montar"] .setlist-head-actions,
  .setlist-name-card {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch !important;
  }

  .setlist-panel[data-section-panel="montar"] .setlist-head-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px !important;
    width: 100%;
  }

  .setlist-outline-button,
  .setlist-save-button,
  .setlist-add-button {
    width: 100% !important;
    min-width: 0 !important;
  }

  .setlist-outline-button {
    min-height: 44px !important;
    padding-inline: 10px !important;
    font-size: 12px !important;
  }

  .setlist-name-card {
    display: grid;
    gap: 14px;
    padding: 16px;
  }

  .setlist-field-help,
  .setlist-name-card .save-message {
    grid-column: 1 / -1;
    text-align: left;
  }

  .setlist-input-shell input#repertoireName {
    min-height: 52px !important;
    padding-right: 70px !important;
    font-size: 14px !important;
  }

  .setlist-panel[data-section-panel="montar"] .setlist-empty {
    min-height: 270px;
    padding: 28px 14px !important;
  }

  .setlist-empty p {
    max-width: 290px;
  }
}

body[data-theme="dark"] .vibra-music-page .vibra-row-label,
body[data-theme="dark"] .vibra-music-page .vibra-row-label span,
body[data-theme="dark"] .vibra-music-page .favorite-filter-text,
body[data-theme="dark"] .vibra-music-page .vibra-native-filter span,
body[data-theme="dark"] .vibra-music-page .vibra-active-chips,
body[data-theme="dark"] .vibra-music-page .vibra-filter-title button {
  color: #e8e7ff !important;
}

body[data-theme="dark"] .vibra-music-page .search-field {
  border-color: rgba(165, 180, 252, 0.34) !important;
  background: rgba(30, 41, 59, 0.94) !important;
  box-shadow: none !important;
}

body[data-theme="dark"] .vibra-music-page .search-field input {
  border: 0 !important;
  background: transparent !important;
  color: #f8fafc !important;
  box-shadow: none !important;
}

body[data-theme="dark"] .vibra-music-page .search-field input::placeholder {
  color: #a5b4fc !important;
  opacity: 0.82;
}

body[data-theme="dark"] .vibra-music-page .search-field .field-icon {
  color: #c4b5fd !important;
}

/* Final dark filter search cleanup. */
body[data-theme="dark"] .vibra-music-page .toolbar .search-field {
  border-color: rgba(165, 180, 252, 0.34) !important;
  background: rgba(30, 41, 59, 0.94) !important;
  box-shadow: none !important;
}

body[data-theme="dark"] .vibra-music-page .toolbar .search-field input,
body[data-theme="dark"] .vibra-music-page .toolbar .search-field input[type="search"] {
  border: 0 !important;
  background: transparent !important;
  color: #f8fafc !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* Final mobile nav parity: dark mode uses the exact light-mode navigation colors. */
@media (max-width: 760px) {
  body[data-theme="dark"] .bottom-nav-bar {
    background: rgb(8, 8, 34) !important;
    color: rgb(15, 23, 42) !important;
    border-color: rgba(139, 92, 246, 0.3) rgb(15, 23, 42) rgb(15, 23, 42) !important;
    box-shadow: rgba(0, 0, 0, 0.3) 0 -4px 24px 0 !important;
  }

  body[data-theme="dark"] .bottom-nav-item,
  body[data-theme="dark"] .bottom-nav-item:hover,
  body[data-theme="dark"] .bottom-nav-item.is-active,
  body[data-theme="dark"] .bottom-nav-item.is-active span,
  body[data-theme="dark"] .bottom-nav-item.is-active svg {
    background: rgba(0, 0, 0, 0) !important;
    color: rgb(155, 92, 255) !important;
    border-color: rgb(155, 92, 255) !important;
    box-shadow: none !important;
  }

  body[data-theme="dark"] .bottom-nav-fab,
  body[data-theme="dark"] .bottom-nav-fab[aria-expanded="true"] {
    background: rgba(0, 0, 0, 0) !important;
    color: rgb(255, 255, 255) !important;
    border-color: rgb(255, 255, 255) !important;
    box-shadow: rgba(109, 40, 217, 0.38) 0 12px 26px 0, rgb(8, 8, 34) 0 0 0 7px !important;
  }
}

/* Dark mode foundation: avoid light body/html showing behind sections. */
html[data-theme="dark"],
body[data-theme="dark"] {
  color-scheme: dark;
  background:
    radial-gradient(circle at 18% 8%, rgba(124, 58, 237, 0.18), transparent 34%),
    radial-gradient(circle at 88% 24%, rgba(34, 211, 238, 0.08), transparent 30%),
    linear-gradient(180deg, #080717 0%, #0d0a24 48%, #080717 100%) !important;
}

body[data-theme="dark"] .app-shell {
  background:
    radial-gradient(circle at 18% 8%, rgba(124, 58, 237, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(8, 7, 23, 0.98), rgba(13, 10, 36, 0.98)) !important;
  color: #f8f7ff;
}

body[data-theme="dark"] .app-shell.is-home-active {
  background:
    radial-gradient(circle at 18% 8%, rgba(124, 58, 237, 0.20), transparent 34%),
    radial-gradient(circle at 88% 24%, rgba(34, 211, 238, 0.10), transparent 30%),
    linear-gradient(180deg, #080717 0%, #0d0a24 44%, #080717 100%) !important;
}

body[data-theme="dark"] .app-section {
  color: #f8f7ff;
}

/* Mobile nav visibility: only inside the authenticated app. */
@media (max-width: 760px) {
  .bottom-nav-bar {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(7px, env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1000 !important;
  }

  #appShell.is-hidden .bottom-nav-bar,
  #appShell.is-hidden .bottom-nav-overlay,
  body:has(#authShell:not(.is-hidden)) .bottom-nav-bar,
  body:has(#authShell:not(.is-hidden)) .bottom-nav-overlay {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #appShell:not(.is-hidden) .bottom-nav-bar {
    display: grid !important;
  }
}

.vibra-music-page #cardsView .song-options-menu[open] > .song-options-popover {
  top: auto !important;
  bottom: calc(100% + 8px) !important;
  z-index: 9999 !important;
  display: block !important;
  overflow: visible !important;
}

.vibra-music-page #cardsView .song-card:has(.song-options-menu[open]),
.vibra-music-page #cardsView .song-card-side:has(.song-options-menu[open]),
.vibra-music-page #cardsView .song-options-menu[open] {
  z-index: 9998 !important;
  overflow: visible !important;
}

/* EOF: mobile bottom nav identical in light and dark. */
@media (max-width: 760px) {
  body[data-theme="dark"] .bottom-nav-bar {
    background: rgb(8, 8, 34) !important;
    color: rgb(15, 23, 42) !important;
    border-color: rgba(139, 92, 246, 0.3) rgb(15, 23, 42) rgb(15, 23, 42) !important;
    box-shadow: rgba(0, 0, 0, 0.3) 0 -4px 24px 0 !important;
  }

  body[data-theme="dark"] .bottom-nav-item,
  body[data-theme="dark"] .bottom-nav-item:hover,
  body[data-theme="dark"] .bottom-nav-item.is-active,
  body[data-theme="dark"] .bottom-nav-item.is-active span,
  body[data-theme="dark"] .bottom-nav-item.is-active svg {
    background: rgba(0, 0, 0, 0) !important;
    color: rgb(155, 92, 255) !important;
    border-color: rgb(155, 92, 255) !important;
    box-shadow: none !important;
  }

  body[data-theme="dark"] .bottom-nav-fab,
  body[data-theme="dark"] .bottom-nav-fab[aria-expanded="true"] {
    background: rgba(0, 0, 0, 0) !important;
    color: rgb(255, 255, 255) !important;
    border-color: rgb(255, 255, 255) !important;
    box-shadow: rgba(109, 40, 217, 0.38) 0 12px 26px 0, rgb(8, 8, 34) 0 0 0 7px !important;
  }
}

/* Dark mode contrast fixes for Musicas controls. */
body[data-theme="dark"] .vibra-music-page .vibra-filter-toggle,
body[data-theme="dark"] .vibra-music-page .results-head > .secondary-button,
body[data-theme="dark"] .vibra-music-page .song-options-button,
body[data-theme="dark"] .vibra-music-page .vibra-action,
body[data-theme="dark"] .vibra-music-page .vibra-action:visited,
body[data-theme="dark"] .vibra-music-page .secondary-button,
body[data-theme="dark"] .vibra-music-page .toggle-button {
  border-color: rgba(165, 180, 252, 0.34) !important;
  background: rgba(30, 41, 59, 0.94) !important;
  color: #e8e7ff !important;
  box-shadow: none !important;
}

body[data-theme="dark"] .vibra-music-page .vibra-filter-toggle svg,
body[data-theme="dark"] .vibra-music-page .song-options-button .action-icon,
body[data-theme="dark"] .vibra-music-page .vibra-action .action-icon {
  color: #c4b5fd !important;
  stroke: currentColor !important;
}

body[data-theme="dark"] .vibra-music-page .vibra-filter-toggle:hover,
body[data-theme="dark"] .vibra-music-page .results-head > .secondary-button:hover,
body[data-theme="dark"] .vibra-music-page .song-options-button:hover,
body[data-theme="dark"] .vibra-music-page .vibra-action:hover,
body[data-theme="dark"] .vibra-music-page .secondary-button:hover {
  border-color: rgba(196, 181, 253, 0.56) !important;
  background: rgba(49, 46, 129, 0.52) !important;
  color: #ffffff !important;
}

body[data-theme="dark"] .vibra-music-page .vibra-action.is-add,
body[data-theme="dark"] .vibra-music-page .results-head > .secondary-button {
  color: #c4b5fd !important;
}

body[data-theme="dark"] .vibra-music-page .vibra-action.is-add.is-selected {
  border-color: rgba(196, 181, 253, 0.58) !important;
  background: rgba(124, 58, 237, 0.22) !important;
  color: #ddd6fe !important;
}

body[data-theme="dark"] .vibra-music-page .song-options-popover {
  border-color: rgba(165, 180, 252, 0.34) !important;
  background: rgba(15, 23, 42, 0.98) !important;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45) !important;
}

body[data-theme="dark"] .vibra-music-page .song-options-item {
  color: #e8e7ff !important;
  background: transparent !important;
}

body[data-theme="dark"] .vibra-music-page .song-options-item:hover {
  background: rgba(124, 58, 237, 0.22) !important;
  color: #ffffff !important;
}

body[data-theme="dark"] .vibra-music-page .song-options-item.is-danger {
  color: #fca5a5 !important;
}

body[data-theme="dark"] .vibra-music-page .vibra-sort-field,
body[data-theme="dark"] .vibra-music-page .vibra-filter-title,
body[data-theme="dark"] .vibra-music-page .vibra-filter-title strong {
  color: #e8e7ff !important;
}

/* Mobile bottom nav: keep light and dark visually identical. */
@media (max-width: 760px) {
  body[data-theme="dark"] .bottom-nav-bar {
    background: rgba(15, 23, 42, 0.97) !important;
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3) !important;
  }

  body[data-theme="dark"] .bottom-nav-item,
  body[data-theme="dark"] .bottom-nav-item:hover {
    border: none !important;
    background: none !important;
    color: rgba(148, 163, 184, 0.75) !important;
    box-shadow: none !important;
  }

  body[data-theme="dark"] .bottom-nav-item.is-active,
  body[data-theme="dark"] .bottom-nav-item.is-active span,
  body[data-theme="dark"] .bottom-nav-item.is-active svg {
    border: none !important;
    background: none !important;
    color: #818CF8 !important;
    box-shadow: none !important;
  }

  body[data-theme="dark"] .bottom-nav-item:active {
    background: rgba(99, 102, 241, 0.08) !important;
  }

  body[data-theme="dark"] .bottom-nav-fab,
  body[data-theme="dark"] .bottom-nav-fab[aria-expanded="true"] {
    border: none !important;
    background: #6366F1 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 18px rgba(99, 102, 241, 0.55), 0 0 0 4px rgba(15, 23, 42, 0.97) !important;
  }

  body[data-theme="dark"] .bottom-nav-fab[aria-expanded="true"] {
    background: #4F46E5 !important;
  }

  body[data-theme="dark"] .bottom-nav-overflow-panel {
    background: rgba(15, 23, 42, 0.98) !important;
    border: 1px solid rgba(99, 102, 241, 0.22) !important;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(99, 102, 241, 0.1) !important;
  }

  body[data-theme="dark"] .bottom-nav-overflow-item {
    border: 1px solid rgba(99, 102, 241, 0.12) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: rgba(248, 250, 252, 0.85) !important;
    box-shadow: none !important;
  }

  body[data-theme="dark"] .bottom-nav-overflow-item:hover,
  body[data-theme="dark"] .bottom-nav-overflow-item:active {
    background: rgba(99, 102, 241, 0.16) !important;
    border-color: rgba(99, 102, 241, 0.32) !important;
    color: #ffffff !important;
  }

  body[data-theme="dark"] .bottom-nav-overflow-item.is-active {
    background: rgba(99, 102, 241, 0.22) !important;
    border-color: #6366F1 !important;
    color: #A5B4FC !important;
  }
}

@media (max-width: 760px) {
  body[data-theme="dark"] .bottom-nav-bar {
    background: rgb(8, 8, 34) !important;
    color: rgb(15, 23, 42) !important;
    border-color: rgba(139, 92, 246, 0.3) rgb(15, 23, 42) rgb(15, 23, 42) !important;
    box-shadow: rgba(0, 0, 0, 0.3) 0 -4px 24px 0 !important;
  }

  body[data-theme="dark"] .bottom-nav-item,
  body[data-theme="dark"] .bottom-nav-item:hover,
  body[data-theme="dark"] .bottom-nav-item.is-active,
  body[data-theme="dark"] .bottom-nav-item.is-active span,
  body[data-theme="dark"] .bottom-nav-item.is-active svg {
    background: rgba(0, 0, 0, 0) !important;
    color: rgb(155, 92, 255) !important;
    border-color: rgb(155, 92, 255) !important;
    box-shadow: none !important;
  }

  body[data-theme="dark"] .bottom-nav-fab,
  body[data-theme="dark"] .bottom-nav-fab[aria-expanded="true"] {
    background: rgba(0, 0, 0, 0) !important;
    color: rgb(255, 255, 255) !important;
    border-color: rgb(255, 255, 255) !important;
    box-shadow: rgba(109, 40, 217, 0.38) 0 12px 26px 0, rgb(8, 8, 34) 0 0 0 7px !important;
  }
}

/* Garantia final: menu de opcoes da tela Musicas acima dos cards. */
.vibra-music-page #cardsView.song-grid,
.vibra-music-page .song-card,
.vibra-music-page .song-card-side,
#cardsView .song-card-side,
#cardsView .song-card-side > *,
#cardsView .song-card-side .song-options-menu {
  overflow: visible !important;
}

.vibra-music-page .song-card {
  grid-template-columns: minmax(0, 1fr) auto 28px !important;
  z-index: 0;
}

.vibra-music-page .song-card:has(.song-options-menu[open]) {
  z-index: 4900 !important;
}

.vibra-music-page .song-options-menu {
  position: relative !important;
  z-index: 5000 !important;
}

.vibra-music-page .song-options-button {
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 10px !important;
  border: 1px solid #EEEAF8 !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  color: #56537A !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.vibra-music-page .song-options-button::-webkit-details-marker {
  display: none;
}

.vibra-music-page .song-options-popover {
  position: absolute !important;
  top: auto !important;
  bottom: calc(100% + 8px) !important;
  right: 0 !important;
  z-index: 5000 !important;
  display: none;
  min-width: 150px;
  padding: 6px;
  border: 1px solid #EEEAF8;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 18px 36px rgba(31, 27, 64, 0.18);
}

.vibra-music-page .song-options-menu[open] .song-options-popover {
  display: block !important;
}

.vibra-music-page .song-options-item {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #343158;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
}

.vibra-music-page .song-options-item.is-danger {
  color: #EF4444;
}

@media (max-width: 760px) {
  .vibra-music-page .song-card {
    grid-template-columns: minmax(0, 1fr) 30px !important;
  }

  .vibra-music-page .song-card-side {
    grid-column: 1 / -1;
  }

  .vibra-music-page .song-options-menu {
    margin-left: auto;
  }

  .vibra-music-page .song-options-button {
    width: 34px !important;
    padding: 0 !important;
  }

  .vibra-music-page .song-options-button span {
    display: none !important;
  }
}

.vibra-music-page .vibra-filter-panel {
  order: 0;
}

.vibra-filter-toggle {
  width: 100%;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  padding: 0 12px;
  border: 1px solid #EEEAF8;
  border-radius: 8px;
  background: #FFFFFF;
  color: #343158;
  font-size: 12px;
  font-weight: 900;
}

.vibra-filter-toggle svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}

.vibra-filter-panel.is-collapsed .vibra-filter-toggle svg {
  transform: rotate(-90deg);
}

.vibra-filter-panel.is-collapsed .vibra-filter-content {
  display: none;
}

.vibra-filter-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.vibra-filter-actions #selectFilteredSongs,
.vibra-filter-actions .vibra-sort-field,
.vibra-filter-actions .vibra-sort-field select {
  width: 100%;
}

.vibra-filter-actions .vibra-sort-field {
  border-left: 0;
  padding-left: 0;
}

.vibra-music-page .results-head {
  justify-content: space-between;
}

.vibra-music-page .results-head > .secondary-button {
  height: 34px !important;
  min-height: 34px !important;
  border: 1px solid #EEEAF8 !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  color: #7C4DFF !important;
  padding: 0 11px !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  white-space: nowrap;
}

.vibra-music-page #resultCount {
  margin-left: 0;
}

.vibra-song-order {
  display: none !important;
}

.vibra-music-page .song-card {
  grid-template-columns: minmax(0, 1fr) auto 28px !important;
  overflow: visible !important;
  z-index: 0;
}

.vibra-music-page .song-card:has(.song-options-menu[open]) {
  z-index: 20;
}

.song-options-menu {
  position: relative;
  z-index: 25;
}

.song-options-menu[open] {
  z-index: 60;
}

.song-options-button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid #EEEAF8;
  border-radius: 6px;
  background: #FFFFFF;
  color: #56537A;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.song-options-button::-webkit-details-marker {
  display: none;
}

.song-options-button .action-icon,
.song-options-item .action-icon {
  width: 15px;
  height: 15px;
}

.song-options-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 80;
  min-width: 148px;
  padding: 6px;
  border: 1px solid #EEEAF8;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 18px 36px rgba(31, 27, 64, 0.16);
}

.song-options-item {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #343158;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.song-options-item:hover {
  background: #F8F4FF;
  color: #7C4DFF;
}

.song-options-item.is-danger {
  color: #EF4444;
}

@media (max-width: 980px) {
  .vibra-filter-panel {
    order: 0 !important;
  }
}

@media (max-width: 760px) {
  .vibra-music-page .results-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .vibra-music-page .results-head > .secondary-button {
    min-width: 0;
    white-space: normal;
    line-height: 1.15;
  }

  .vibra-music-page .song-card {
    grid-template-columns: minmax(0, 1fr) 30px !important;
  }

  .vibra-music-page .song-card-side {
    grid-column: 1 / -1;
  }

  .song-options-menu {
    margin-left: auto;
  }

  .song-options-button span {
    display: none;
  }

  .song-options-button {
    width: 34px;
    padding: 0;
  }
}

@media (max-width: 760px) {
  .vibra-song-form-page {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 10px 10px calc(96px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
  }

  .vibra-song-form-page .vibra-song-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    min-height: 0;
    padding: 12px;
  }

  .vibra-song-form-page .vibra-song-title-group,
  .vibra-song-form-page .vibra-song-head-actions {
    min-width: 0;
    width: 100%;
  }

  .vibra-song-form-page .vibra-song-head-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    justify-items: stretch;
  }

  .vibra-song-form-page .vibra-autosave-status {
    width: 100%;
    min-width: 0;
    justify-content: center;
    white-space: normal;
    text-align: center;
    overflow: visible;
    text-overflow: clip;
  }

  .vibra-song-form-page #saveMusicButtonTop.primary-button,
  .vibra-song-form-page .vibra-song-actions .primary-button,
  .vibra-song-form-page .vibra-song-actions .secondary-button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .vibra-song-form-page .vibra-form-card,
  .vibra-song-form-page .vibra-tip-card,
  .vibra-song-form-page .tone-info-section,
  .vibra-song-form-page .music-import-panel {
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }

  .vibra-song-form-page .vibra-editor-meta,
  .vibra-song-form-page .music-import-actions,
  .vibra-song-form-page .form-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
  }

  .vibra-song-form-page .vibra-editor-counters {
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .vibra-song-form-page .tone-auto-field {
    grid-template-columns: auto minmax(0, 1fr);
    height: auto;
    min-height: 48px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .vibra-song-form-page .tone-auto-badge {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .vibra-music-page {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 10px 10px calc(96px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
  }

  .vibra-music-page .vibra-music-shell,
  .vibra-music-page .vibra-music-main,
  .vibra-music-page .vibra-filter-panel,
  .vibra-music-page .library-header,
  .vibra-music-page .library-toolbar,
  .vibra-music-page .view-toggle {
    min-width: 0;
    max-width: 100%;
  }

  .vibra-music-page .vibra-music-shell,
  .vibra-music-page .library-header,
  .vibra-music-page .library-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .vibra-music-page .library-actions,
  .vibra-music-page .library-controls,
  .vibra-music-page .view-toggle {
    flex-wrap: wrap;
    justify-content: stretch;
  }

  .vibra-music-page .library-actions > *,
  .vibra-music-page .library-controls > *,
  .vibra-music-page .view-toggle > * {
    min-width: 0;
  }

  .vibra-music-page #cardsView.song-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .vibra-music-page .song-card {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 10px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    padding: 12px !important;
  }

  .vibra-music-page .song-card > * {
    min-width: 0;
  }

  .vibra-music-page .song-card-side {
    grid-column: 1 / -1;
    width: 100% !important;
    justify-content: stretch !important;
    flex-flow: row wrap !important;
    gap: 8px !important;
  }

  .vibra-music-page .vibra-action,
  .vibra-music-page .vibra-action:visited {
    flex: 1 1 112px !important;
    min-width: 0 !important;
    justify-content: center !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 760px) {
  .vibra-song-form-page {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 10px 10px calc(96px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
  }

  .vibra-song-form-page .vibra-song-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    min-height: 0;
    padding: 12px;
  }

  .vibra-song-form-page .vibra-song-title-group,
  .vibra-song-form-page .vibra-song-head-actions {
    min-width: 0;
    width: 100%;
  }

  .vibra-song-form-page .vibra-song-head-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    justify-items: stretch;
  }

  .vibra-song-form-page .vibra-autosave-status {
    width: 100%;
    min-width: 0;
    justify-content: center;
    white-space: normal;
    text-align: center;
    overflow: visible;
    text-overflow: clip;
  }

  .vibra-song-form-page #saveMusicButtonTop.primary-button,
  .vibra-song-form-page .vibra-song-actions .primary-button,
  .vibra-song-form-page .vibra-song-actions .secondary-button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .vibra-song-form-page .vibra-form-card,
  .vibra-song-form-page .vibra-tip-card,
  .vibra-song-form-page .tone-info-section,
  .vibra-song-form-page .music-import-panel {
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }

  .vibra-song-form-page .vibra-card-head,
  .vibra-song-form-page .vibra-editor-meta,
  .vibra-song-form-page .music-import-panel,
  .vibra-song-form-page .music-import-actions,
  .vibra-song-form-page .form-actions {
    min-width: 0;
    width: 100%;
  }

  .vibra-song-form-page .vibra-editor-meta,
  .vibra-song-form-page .music-import-actions,
  .vibra-song-form-page .form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .vibra-song-form-page .vibra-editor-counters {
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .vibra-song-form-page .tone-auto-field {
    grid-template-columns: auto minmax(0, 1fr);
    height: auto;
    min-height: 48px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .vibra-song-form-page .tone-auto-badge {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .vibra-music-page {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 10px 10px calc(96px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
  }

  .vibra-music-page .vibra-music-shell,
  .vibra-music-page .vibra-music-main,
  .vibra-music-page .vibra-filter-panel,
  .vibra-music-page .library-header,
  .vibra-music-page .library-toolbar,
  .vibra-music-page .view-toggle {
    min-width: 0;
    max-width: 100%;
  }

  .vibra-music-page .vibra-music-shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .vibra-music-page .library-header,
  .vibra-music-page .library-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .vibra-music-page .library-actions,
  .vibra-music-page .library-controls,
  .vibra-music-page .view-toggle {
    flex-wrap: wrap;
    justify-content: stretch;
  }

  .vibra-music-page .library-actions > *,
  .vibra-music-page .library-controls > *,
  .vibra-music-page .view-toggle > * {
    min-width: 0;
  }

  .vibra-music-page #cardsView.song-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .vibra-music-page .song-card {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    grid-template-areas:
      "art info"
      "actions actions" !important;
    gap: 10px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    padding: 12px !important;
  }

  .vibra-music-page .song-card > * {
    min-width: 0;
  }

  .vibra-music-page .song-card-side {
    grid-area: actions;
    width: 100% !important;
    justify-content: stretch !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .vibra-music-page .vibra-action,
  .vibra-music-page .vibra-action:visited {
    flex: 1 1 112px !important;
    min-width: 0 !important;
    justify-content: center !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.2 !important;
  }
}

.vibra-music-page #categoryQuickFilters.vibra-filter-buttons {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.vibra-music-page #categoryQuickFilters.vibra-filter-buttons button {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 0 6px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

/* Ajustes finais: filtros menores e tema escuro da pagina Musicas. */
.vibra-music-page .vibra-filter-buttons button,
.vibra-music-page .vibra-key-grid button,
.vibra-music-page .vibra-show-more-tones,
.vibra-music-page .vibra-toggle-row,
.vibra-music-page .vibra-filter-chip,
.vibra-music-page .vibra-filter-title,
.vibra-music-page .vibra-filter-title button {
  font-size: 9px !important;
}

.vibra-music-page .vibra-filter-buttons button,
.vibra-music-page .vibra-key-grid button {
  font-weight: 850 !important;
}

body[data-theme="dark"] .vibra-music-page {
  background: #0F1220 !important;
  color: #E8E7FF !important;
}

body[data-theme="dark"] .vibra-filter-panel,
body[data-theme="dark"] .vibra-music-page .results-head,
body[data-theme="dark"] .vibra-music-page .song-card,
body[data-theme="dark"] .vibra-toggle-list {
  border-color: #2B2A43 !important;
  background: #171A2B !important;
  color: #E8E7FF !important;
  box-shadow: none !important;
}

body[data-theme="dark"] .vibra-filter-search .search-field,
body[data-theme="dark"] .vibra-filter-buttons button,
body[data-theme="dark"] .vibra-key-grid button,
body[data-theme="dark"] .vibra-music-page .results-actions .secondary-button,
body[data-theme="dark"] .vibra-sort-field select,
body[data-theme="dark"] .vibra-explore-button,
body[data-theme="dark"] .vibra-music-page .vibra-action,
body[data-theme="dark"] .vibra-music-page .vibra-action:visited {
  border-color: #353451 !important;
  background: #20243A !important;
  color: #E8E7FF !important;
}

body[data-theme="dark"] .vibra-filter-search input,
body[data-theme="dark"] .vibra-filter-search input::placeholder {
  color: #C9C7E8 !important;
}

body[data-theme="dark"] .vibra-filter-search .field-icon::before {
  border-color: #A9A6CE !important;
  box-shadow: 8px 8px 0 -6px #A9A6CE !important;
}

body[data-theme="dark"] .vibra-filter-title,
body[data-theme="dark"] .vibra-no-filters,
body[data-theme="dark"] .vibra-toggle-row,
body[data-theme="dark"] .vibra-sort-field,
body[data-theme="dark"] .vibra-song-order,
body[data-theme="dark"] .vibra-music-page .excerpt,
body[data-theme="dark"] .vibra-music-page #resultCount .vibra-count-label {
  color: #B9B6DA !important;
}

body[data-theme="dark"] .vibra-music-page .library-head h2,
body[data-theme="dark"] .vibra-music-page .song-title,
body[data-theme="dark"] .vibra-music-page #resultCount {
  color: #F4F2FF !important;
}

body[data-theme="dark"] .vibra-filter-chip,
body[data-theme="dark"] .vibra-filter-buttons button.is-active,
body[data-theme="dark"] .vibra-key-grid button.is-active,
body[data-theme="dark"] .vibra-show-more-tones,
body[data-theme="dark"] .vibra-music-page .tag,
body[data-theme="dark"] .vibra-music-page .vibra-action.is-add.is-selected {
  border-color: #6F55D8 !important;
  background: #2A2346 !important;
  color: #CBB9FF !important;
}

body[data-theme="dark"] .vibra-toggle-row {
  border-bottom-color: #2B2A43 !important;
}

body[data-theme="dark"] .vibra-music-page .tag.key {
  border-color: #353451 !important;
  background: #20243A !important;
  color: #E8E7FF !important;
}

#fullscreenPrevLyrics,
#fullscreenNextLyrics {
  min-width: 86px;
  border-color: #CBB9FF !important;
  color: #6D3DF5 !important;
}

#fullscreenPrevLyrics:disabled,
#fullscreenNextLyrics:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

body[data-theme="dark"] #fullscreenPrevLyrics,
body[data-theme="dark"] #fullscreenNextLyrics {
  border-color: #6F55D8 !important;
  background: #2A2346 !important;
  color: #CBB9FF !important;
}

/* Vibra: pagina Musicas redesenhada conforme referencia */
.vibra-music-page {
  padding: 0 !important;
  background: #FCFBFF !important;
}

.vibra-music-shell {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 10px;
  min-height: calc(100dvh - 92px);
  width: 100%;
}

.vibra-filter-panel {
  border: 1px solid #EEEAF8;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  padding: 12px;
  box-shadow: 0 8px 22px rgba(54, 40, 96, 0.04);
}

.vibra-filter-collapse {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  border: 0;
  background: transparent;
  color: #5D5A86;
  font-size: 12px;
  font-weight: 800;
  padding: 2px 4px 12px;
}

.vibra-filter-search.toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.vibra-filter-search .search-field {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 7px !important;
  border: 1px solid #ECE7F8 !important;
  background: #FFFFFF !important;
  overflow: hidden !important;
}

.vibra-filter-search .field-icon::before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  border: 2px solid #8B8AA8;
  border-radius: 999px;
  box-shadow: 8px 8px 0 -6px #8B8AA8;
  transform: rotate(-12deg);
}

.vibra-filter-search input {
  min-width: 0 !important;
  width: 100% !important;
  font-size: 12px !important;
  color: #343158 !important;
  text-overflow: ellipsis !important;
}

.vibra-native-filter {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.vibra-native-filter.is-visible {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  grid-column: 1 / -1;
  display: grid !important;
  gap: 4px !important;
  margin-top: 8px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.vibra-native-filter.is-visible span {
  color: #5A567E !important;
  font-size: 10px !important;
  font-weight: 850 !important;
}

.vibra-native-filter.is-visible select {
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  border: 1px solid #EEEAF8 !important;
  border-radius: 6px !important;
  background-color: #FFFFFF !important;
  color: #343158 !important;
  font-size: 12px !important;
}

.vibra-filter-block {
  padding: 14px 0 0;
}

.vibra-filter-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
  color: #48456E;
  font-size: 12px;
}

.vibra-filter-title button {
  border: 0;
  background: transparent;
  color: #24B47E;
  font-size: 11px;
  font-weight: 800;
}

.vibra-active-chips,
.vibra-filter-buttons,
.vibra-key-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.vibra-filter-chip,
.vibra-filter-buttons button,
.vibra-key-grid button {
  min-height: 32px;
  border: 1px solid #EEEAF8;
  border-radius: 6px;
  background: #FFFFFF;
  color: #545176;
  font-size: 12px;
  font-weight: 750;
}

.vibra-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: #FAF7FF;
}

.vibra-filter-chip .action-icon {
  width: 14px;
  height: 14px;
  color: #8B5CF6;
}

.vibra-filter-chip button {
  border: 0;
  background: transparent;
  color: #6F6B96;
  font-weight: 900;
}

.vibra-no-filters {
  color: #8A88A6;
  font-size: 12px;
}

.vibra-filter-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.vibra-filter-buttons button,
.vibra-key-grid button {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 0 8px;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vibra-filter-buttons button.is-active,
.vibra-key-grid button.is-active {
  border-color: #A78BFA;
  background: #F3ECFF;
  color: #7C4DFF;
  box-shadow: 0 0 0 1px rgba(124, 77, 255, 0.08);
}

.vibra-key-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.vibra-key-group {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.vibra-key-group.is-accidental {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.vibra-show-more-tones {
  width: 100%;
  min-height: 32px;
  border: 1px solid #CBB9FF;
  border-radius: 6px;
  background: #F8F4FF;
  color: #7C4DFF;
  font-size: 12px;
  font-weight: 900;
}

.vibra-toggle-list {
  margin-top: 12px;
  border: 1px solid #EEEAF8;
  border-radius: 8px;
  overflow: hidden;
  background: #FFFFFF;
}

.vibra-toggle-row {
  min-height: 36px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid #F0EDF8;
  background: transparent;
  padding: 8px 10px;
  color: #56537A;
  font-size: 11px;
  font-weight: 800;
}

.vibra-toggle-row:last-child {
  border-bottom: 0;
}

.vibra-row-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.vibra-row-icon {
  width: 15px;
  height: 15px;
}

.vibra-row-icon.is-video {
  border: 2px solid #55C7E8;
  border-radius: 3px;
}

.vibra-row-icon.is-star::before {
  content: "\2606";
  color: #F7B500;
  font-size: 17px;
  line-height: 13px;
}

.vibra-row-icon.is-ready {
  border: 2px solid #4CC38A;
  border-radius: 999px;
}

.vibra-toggle-row .favorite-filter-switch {
  width: 34px !important;
  height: 18px !important;
  background: #D8D8E5 !important;
}

.vibra-toggle-row .favorite-filter-switch::after {
  width: 14px !important;
  height: 14px !important;
}

.vibra-toggle-row.is-active .favorite-filter-switch,
.vibra-toggle-row.favorite-filter-toggle.is-active .favorite-filter-switch {
  background: #8B5CF6 !important;
}

.vibra-toggle-row.is-active .favorite-filter-switch::after,
.vibra-toggle-row.favorite-filter-toggle.is-active .favorite-filter-switch::after {
  transform: translateX(16px) !important;
}

#recentQuickFilter {
  display: flex !important;
}

.vibra-music-main {
  min-width: 0;
}

.vibra-music-page .library-head {
  min-height: 46px;
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 16px;
  margin: 0 0 9px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.vibra-music-page .library-head h2 {
  color: #252347;
  font-size: 22px !important;
  line-height: 1;
  margin: 0 !important;
}

.vibra-explore-button {
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #CBB9FF;
  border-radius: 8px;
  background: #FFFFFF;
  color: #8B5CF6;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 900;
}

.vibra-explore-button span::before {
  content: "\2726";
  font-size: 13px;
}

.vibra-music-page .results-head {
  min-height: 48px;
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px !important;
  padding: 8px 14px !important;
  border: 1px solid #EEEAF8 !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  box-shadow: 0 8px 22px rgba(54, 40, 96, 0.04) !important;
}

.vibra-music-page .results-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
}

.vibra-music-page .results-actions .secondary-button,
.vibra-sort-field select {
  height: 32px !important;
  min-height: 32px !important;
  border: 1px solid #EEEAF8 !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  color: #56537A !important;
  padding: 0 11px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.vibra-music-page #resultCount {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  color: #343158;
  font-weight: 900;
}

.vibra-music-page #resultCount .vibra-count-number {
  color: #7C4DFF;
  font-size: 20px;
  line-height: 1;
  font-weight: 950;
}

.vibra-music-page #resultCount .vibra-count-label {
  color: #343158;
  font-size: 12px;
  font-weight: 900;
}

.vibra-sort-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-left: 1px solid #EEEAF8;
  padding-left: 14px;
  color: #6F6B96;
  font-size: 12px;
  font-weight: 700;
}

.vibra-music-page .view-toggle {
  display: none !important;
}

.vibra-music-page #cardsView.song-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 7px !important;
}

.vibra-music-page .song-card {
  position: relative;
  display: grid !important;
  grid-template-columns: 46px minmax(260px, 1fr) auto 28px;
  align-items: center;
  gap: 12px !important;
  min-height: 116px;
  padding: 12px 10px 12px 14px !important;
  border: 1px solid #EEEAF8 !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(54, 40, 96, 0.025) !important;
}

.vibra-song-order {
  display: grid;
  grid-template-columns: 15px 1fr;
  align-items: center;
  gap: 8px;
  color: #8C89AB;
  font-size: 14px;
  font-weight: 750;
}

.vibra-song-order .action-icon {
  width: 15px;
  height: 22px;
  stroke-width: 2.4;
}

.vibra-music-page .song-card-main {
  min-width: 0;
  display: grid !important;
  gap: 5px !important;
}

.vibra-music-page .song-title-row {
  display: flex !important;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.vibra-music-page .song-title {
  margin: 0 !important;
  color: #252347 !important;
  font-size: 16px !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vibra-music-page .song-artist {
  color: #7C4DFF !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

.vibra-music-page .excerpt {
  max-width: 620px;
  margin: 5px 0 0 !important;
  color: #5F6689 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vibra-music-page .tag {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #EEEAF8 !important;
  border-radius: 6px !important;
  background: #FAF7FF !important;
  color: #8B5CF6 !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  white-space: nowrap;
}

.vibra-music-page .tag.key {
  background: #FFFFFF !important;
  color: #343158 !important;
}

.vibra-music-page .tag .action-icon {
  width: 14px;
  height: 14px;
}

.vibra-ready-dot {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #BDEFD5;
  border-radius: 999px;
  color: #31B978;
}

.vibra-ready-dot .action-icon {
  width: 12px;
  height: 12px;
  stroke-width: 3;
}

.vibra-music-page .song-card-side {
  width: auto !important;
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

.vibra-music-page .vibra-action,
.vibra-music-page .vibra-action:visited {
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border: 1px solid #EEEAF8 !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  padding: 0 10px !important;
  color: #56537A !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.vibra-music-page .vibra-action .action-icon {
  width: 15px;
  height: 15px;
}

.vibra-music-page .vibra-action.is-video {
  color: #38BDF8 !important;
}

.vibra-music-page .vibra-action.is-add {
  color: #7C4DFF !important;
}

.vibra-music-page .vibra-action.is-add.is-selected {
  border-color: #CBB9FF !important;
  background: #F8F4FF !important;
}

.vibra-music-page .vibra-action.is-edit {
  color: #3730A3 !important;
}

.vibra-music-page .vibra-action.is-delete {
  color: #EF4444 !important;
}

.vibra-card-favorite {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border: 0 !important;
  background: transparent !important;
  color: #F7B500 !important;
  padding: 0 !important;
  align-self: start;
}

.vibra-card-favorite .favorite-button-star {
  font-size: 22px !important;
}

.vibra-hidden-select {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 980px) {
  .vibra-music-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .vibra-filter-panel {
    order: 2;
  }

  .vibra-music-page .song-card {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .vibra-music-page .song-card-side,
  .vibra-card-favorite {
    grid-column: 2;
    justify-content: flex-start !important;
  }
}

/* Catalogo: filtros e botoes mais compactos */
.toolbar {
  gap: 8px 12px !important;
}

.toolbar .search-field,
.toolbar .custom-select-button,
.toolbar .select-field select {
  min-height: 34px !important;
  height: 34px !important;
  border-radius: 6px !important;
  font-size: 0.76rem !important;
}

.toolbar .search-field {
  gap: 6px !important;
  padding: 0 9px !important;
}

.toolbar .field-icon {
  font-size: 0.78rem !important;
}

.toolbar .search-field input,
.toolbar .custom-select-button,
.toolbar .select-field select {
  font-size: 0.76rem !important;
}

.toolbar .select-field {
  gap: 3px !important;
}

.toolbar .select-field span {
  font-size: 0.6rem !important;
}

.toolbar .favorite-filter-toggle {
  min-height: 34px !important;
  padding: 4px 7px !important;
  gap: 5px !important;
  border-radius: 6px !important;
  font-size: 0.56rem !important;
}

.toolbar .favorite-filter-switch {
  width: 24px !important;
  height: 14px !important;
  flex-basis: 24px !important;
}

.toolbar .favorite-filter-switch::after {
  top: 2px !important;
  left: 2px !important;
  width: 10px !important;
  height: 10px !important;
}

.toolbar .favorite-filter-toggle.is-active .favorite-filter-switch::after {
  transform: translateX(10px) !important;
}

.toolbar #clearFilters,
.results-actions .secondary-button,
.view-toggle .toggle-button {
  min-height: 30px !important;
  padding: 4px 9px !important;
  border-radius: 6px !important;
  font-size: 0.64rem !important;
  font-weight: 720 !important;
}

.toolbar .custom-select-menu {
  max-height: 220px !important;
  border-radius: 6px !important;
}

.toolbar .custom-select-option {
  min-height: 28px !important;
  padding: 5px 9px !important;
  font-size: 0.76rem !important;
  line-height: 1.15 !important;
  font-weight: 520 !important;
}

.song-card-side .song-edit-button,
.song-card-side .favorite-button,
.song-card-side .song-select-button,
.song-card-side .song-link,
.song-card-side .song-link:visited,
.song-card-side .song-link:hover,
.song-card-side .song-link:active {
  min-height: 25px !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 0.64rem !important;
}

.song-card {
  gap: 10px !important;
  padding: 14px !important;
}

.song-card-main {
  gap: 7px !important;
}

.song-title {
  font-size: 0.92rem !important;
  line-height: 1.18 !important;
}

.song-artist {
  font-size: 0.8rem !important;
}

.song-tags {
  gap: 5px !important;
}

.song-card .tag {
  padding: 3px 7px !important;
  font-size: 0.68rem !important;
}

.song-card .excerpt {
  font-size: 0.76rem !important;
  line-height: 1.32 !important;
}

/* Modo tabela de musicas mais compacto */
@media (min-width: 761px) {
  #tableView.table-wrap {
    overflow-x: hidden !important;
  }

  #tableView table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: fixed !important;
  }

  #tableView thead,
  #tableView th {
    color: #1E293B !important;
    background: #F8FAFC !important;
  }

  #tableView th,
  #tableView td {
    padding: 8px 8px !important;
    font-size: 0.72rem !important;
    line-height: 1.22 !important;
    overflow-wrap: anywhere !important;
  }

  #tableView th {
    font-size: 0.6rem !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
  }

  #tableView td strong {
    font-size: 0.74rem !important;
    line-height: 1.15 !important;
  }

  #tableView th:nth-child(1),
  #tableView td:nth-child(1) {
    width: 9% !important;
  }

  #tableView th:nth-child(2),
  #tableView td:nth-child(2) {
    width: 13% !important;
  }

  #tableView th:nth-child(3),
  #tableView td:nth-child(3) {
    width: 12% !important;
  }

  #tableView th:nth-child(4),
  #tableView td:nth-child(4) {
    width: 9% !important;
  }

  #tableView th:nth-child(5),
  #tableView td:nth-child(5) {
    width: 5% !important;
  }

  #tableView th:nth-child(6),
  #tableView td:nth-child(6) {
    width: 17% !important;
  }

  #tableView th:nth-child(7),
  #tableView td:nth-child(7) {
    width: 6% !important;
  }

  #tableView th:nth-child(8),
  #tableView td:nth-child(8) {
    width: 9% !important;
  }

  #tableView th:nth-child(9),
  #tableView td:nth-child(9),
  #tableView th:nth-child(10),
  #tableView td:nth-child(10),
  #tableView th:nth-child(11),
  #tableView td:nth-child(11) {
    width: 6.66% !important;
  }

  #tableView .song-check.compact,
  #tableView .favorite-button-table,
  #tableView .table-action,
  #tableView .table-link-button {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 24px !important;
    padding: 3px 5px !important;
    border-radius: 6px !important;
    font-size: 0.62rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  #tableView .song-check.compact {
    gap: 4px !important;
  }

  #tableView .fake-check {
    width: 15px !important;
    height: 15px !important;
    border-width: 2px !important;
  }

  #tableView .favorite-button-star {
    font-size: 0.72rem !important;
  }

  #tableView .shared-pill {
    min-height: 22px !important;
    padding: 3px 5px !important;
    font-size: 0.62rem !important;
  }
}

@media (max-width: 760px) {
  .saved-modal-table tr.saved-modal-song {
    grid-template-columns: minmax(0, 1fr) max-content !important;
    gap: 5px 8px !important;
    padding: 10px 8px !important;
  }

  .saved-modal-table tr.saved-modal-song > .saved-table-song {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }

  .saved-song-title-line {
    display: grid !important;
    gap: 2px !important;
    width: 100% !important;
  }

  .saved-song-title-line strong,
  .saved-song-title-line .saved-song-meta {
    display: block !important;
  }

  .saved-song-title-line .saved-song-meta,
  .saved-song-title-line .saved-song-meta .saved-song-key {
    display: inline !important;
    white-space: nowrap !important;
  }

  .saved-song-excerpt {
    grid-column: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    justify-self: stretch !important;
    align-self: stretch !important;
  }

  .saved-song-action-cell {
    gap: 10px !important;
    padding-right: 4px !important;
  }

  .saved-block.is-expanded {
    max-height: calc(100dvh - 110px) !important;
  }

  .saved-block.is-expanded .saved-modal-list {
    max-height: calc(100dvh - 170px) !important;
    overflow-y: auto !important;
  }

  .saved-song-actions-modal {
    width: min(320px, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - 32px) !important;
  }
}

/* Mobile: trava a biblioteca de musicas dentro da largura da tela */
@media (max-width: 760px) {
  .music-library {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: contain;
    touch-action: pan-y;
  }

  .music-library .library-head,
  .music-library .toolbar,
  .music-library .results-head,
  .music-library .results-actions,
  .music-library .song-grid,
  .music-library .song-card,
  .music-library .empty-state {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  .music-library .results-head,
  .music-library .results-actions,
  .music-library .view-toggle,
  .music-library .song-title-row,
  .music-library .song-card {
    flex-wrap: wrap;
  }

  .music-library .song-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    overflow-x: hidden !important;
  }

  .music-library .song-card-main,
  .music-library .song-title,
  .music-library .song-artist,
  .music-library .excerpt,
  .music-library .tag {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .music-library .song-card-side {
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
  }

  .music-library .song-link,
  .music-library .song-select-button,
  .music-library .song-edit-button,
  .music-library .favorite-button {
    max-width: 100%;
    white-space: normal;
  }

  .music-library .song-carousel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 36px minmax(0, 1fr) 36px !important;
    gap: 8px !important;
    padding: 14px 8px !important;
    overflow: hidden !important;
    touch-action: pan-y;
  }

  .music-library .carousel-track,
  .music-library .carousel-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .music-library .carousel-nav {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }

  #tableView.table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
  }
}

/* Cards de musicas: acoes compactas lado a lado */
#cardsView .song-card-side {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
}

#cardsView .song-card-side .song-check,
#cardsView .song-card-side .song-edit-button,
#cardsView .song-card-side .favorite-button,
#cardsView .song-card-side .song-select-button,
#cardsView .song-card-side .song-link,
#cardsView .song-card-side .song-link:visited,
#cardsView .song-card-side .song-link:hover,
#cardsView .song-card-side .song-link:active {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  min-height: 26px !important;
  padding: 3px 7px !important;
  font-size: 0.72rem !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

#cardsView .song-card-side .favorite-button {
  width: 28px !important;
  min-width: 28px !important;
  padding-inline: 0 !important;
}

#cardsView .song-card-side .song-check {
  gap: 5px !important;
  padding-left: 5px !important;
}

#cardsView .song-card-side .fake-check {
  width: 16px !important;
  height: 16px !important;
  border-width: 2px !important;
}

/* Tabela de musicas: colunas essenciais e letra no hover */
#tableView.table-wrap {
  overflow-x: hidden !important;
}

#tableView table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}

#tableView th,
#tableView td {
  padding: 10px 12px !important;
  overflow-wrap: anywhere !important;
}

#tableView th:nth-child(1),
#tableView td:nth-child(1) {
  width: 76px !important;
}

#tableView th:nth-child(2),
#tableView td:nth-child(2) {
  width: 28% !important;
}

#tableView th:nth-child(3),
#tableView td:nth-child(3) {
  width: 20% !important;
}

#tableView th:nth-child(4),
#tableView td:nth-child(4) {
  width: auto !important;
}

#tableView th:nth-child(5),
#tableView td:nth-child(5) {
  width: 82px !important;
}

#tableView .table-lyrics-cell {
  text-align: center !important;
}

#tableView .table-lyrics-button {
  opacity: 0;
  transform: translateY(2px);
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}

#tableView tr:hover .table-lyrics-button,
#tableView tr:focus-within .table-lyrics-button {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#tableView .table-lyrics-button:focus-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (max-width: 760px) {
  #tableView.table-wrap {
    overflow-x: hidden !important;
  }

  #tableView th:nth-child(1),
  #tableView td:nth-child(1) {
    width: 62px !important;
  }

  #tableView th:nth-child(5),
  #tableView td:nth-child(5) {
    width: 56px !important;
  }

  #tableView th,
  #tableView td {
    padding: 8px 6px !important;
    font-size: 0.68rem !important;
  }

  #tableView .table-lyrics-button {
    min-height: 24px !important;
    padding: 3px 6px !important;
    font-size: 0.64rem !important;
  }
}

/* Correcao final: cards desktop e tabela mobile */
#cardsView .song-card {
  flex-direction: column !important;
  align-items: stretch !important;
}

#cardsView .song-card-main {
  width: 100% !important;
}

#cardsView .song-card-side {
  margin-top: auto !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#cardsView .song-card-side > * {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (min-width: 761px) {
  #cardsView .song-card-side .song-check,
  #cardsView .song-card-side .song-edit-button,
  #cardsView .song-card-side .favorite-button,
  #cardsView .song-card-side .song-select-button,
  #cardsView .song-card-side .song-link,
  #cardsView .song-card-side .song-link:visited,
  #cardsView .song-card-side .song-link:hover,
  #cardsView .song-card-side .song-link:active {
    min-height: 28px !important;
    padding: 4px 8px !important;
    font-size: 0.74rem !important;
  }
}

@media (max-width: 760px) {
  #tableView.table-wrap {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
  }

  #tableView table,
  #tableView tbody,
  #tableView tr,
  #tableView td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #tableView thead {
    display: none !important;
  }

  #tableView tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(44px, auto) auto !important;
    gap: 6px 8px !important;
    margin-bottom: 10px !important;
    padding: 12px !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    background: var(--panel) !important;
  }

  #tableView td {
    padding: 0 !important;
    border: 0 !important;
    font-size: 0.82rem !important;
    line-height: 1.3 !important;
  }

  #tableView td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 1px;
    color: var(--muted);
    font-family: var(--font-semi);
    font-size: 0.56rem;
    font-weight: 900;
    text-transform: uppercase;
  }

  #tableView .table-lyrics-cell {
    grid-column: 4 !important;
    grid-row: 1 !important;
    width: auto !important;
    text-align: right !important;
    align-self: start !important;
  }

  #tableView .table-lyrics-cell::before {
    display: none !important;
  }

  #tableView td[data-label="Musica"] {
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding-right: 0 !important;
  }

  #tableView td[data-label="Artista"] {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  #tableView td[data-label="Tom"] {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: auto !important;
    text-align: left !important;
  }

  #tableView td[data-label="Trecho"] {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    padding-top: 4px !important;
    border-top: 1px solid rgba(148, 163, 184, 0.18) !important;
  }

  #tableView td[data-label="Musica"] strong,
  #tableView td[data-label="Artista"],
  #tableView td[data-label="Tom"] {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #tableView .table-lyrics-button {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 28px !important;
    padding: 4px 8px !important;
    font-size: 0.72rem !important;
  }
}

/* Cards: botoes leves e alinhados */
#cardsView .song-card-side {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  width: 100% !important;
}

#cardsView .song-card-side .song-check,
#cardsView .song-card-side .song-edit-button,
#cardsView .song-card-side .favorite-button,
#cardsView .song-card-side .song-select-button,
#cardsView .song-card-side .song-link,
#cardsView .song-card-side .song-link:visited,
#cardsView .song-card-side .song-link:hover,
#cardsView .song-card-side .song-link:active {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  min-height: 24px !important;
  padding: 3px 7px !important;
  border-radius: 6px !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

#cardsView .song-card-side .favorite-button {
  width: 26px !important;
  min-width: 26px !important;
  padding: 0 !important;
}

#cardsView .song-card-side .favorite-button-star {
  font-size: 0.82rem !important;
  line-height: 1 !important;
}

#cardsView .song-card-side .song-check {
  gap: 4px !important;
  padding-left: 5px !important;
}

#cardsView .song-card-side .fake-check {
  width: 14px !important;
  height: 14px !important;
  border-width: 1px !important;
  border-radius: 4px !important;
}

.action-icon {
  width: 15px;
  height: 15px;
  display: block;
  flex: 0 0 auto;
  pointer-events: none;
}

.icon-only-button {
  aspect-ratio: 1 / 1;
  display: inline-grid !important;
  place-items: center !important;
  gap: 0 !important;
  text-indent: 0 !important;
}

#cardsView .song-card-side .icon-only-button,
.carousel-card-side .icon-only-button,
#tableView .icon-only-button {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
}

#cardsView .song-card-side .icon-only-button .action-icon,
.carousel-card-side .icon-only-button .action-icon,
#tableView .icon-only-button .action-icon {
  width: 15px;
  height: 15px;
}

#cardsView .song-card-side .song-select-button.icon-only-button.is-selected {
  color: #DC2626;
}

/* Mobile: garante visibilidade dos icones nos cards */
@media (max-width: 760px) {
  .metronome-panel {
    width: calc(100% - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin: 12px auto 96px !important;
    padding: 18px 14px 22px !important;
    gap: 22px !important;
    border-radius: 8px;
    overflow-x: hidden;
  }

  .metronome-stage {
    min-height: 210px;
    border-radius: 8px;
  }

  .metronome-controls,
  .metronome-grid-controls,
  .metronome-transport {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .metronome-controls .batucada-bpm-block,
  .metronome-grid-controls .select-field,
  .metronome-grid-controls .song-check {
    width: 100%;
    min-width: 0;
  }

  .metronome-beats {
    gap: 8px;
  }

  .metronome-beat {
    min-height: 48px;
  }

  .metronome-transport button {
    width: 100%;
    min-height: 48px;
  }

  .assistant-layout,
  .assistant-columns,
  .musician-board {
    grid-template-columns: 1fr;
  }

  .musician-column-list {
    max-height: none;
    overflow: visible;
  }

  .event-request-actions .secondary-button {
    flex: 1 1 130px;
    min-height: 42px;
    font-size: 0.82rem;
  }

  html,
  body,
  .app-shell,
  .app-main,
  .content-area,
  .music-library,
  #cardsView {
    max-width: 100% !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
    touch-action: pan-y !important;
  }

  #cardsView .song-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  #cardsView .song-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 12px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  #cardsView .song-card-main {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #cardsView .song-card-side {
    grid-column: 1 !important;
    position: relative !important;
    inset: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 32px !important;
    margin-top: 2px !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-top: 2px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #cardsView .song-card-side > * {
    margin: 0 !important;
  }

  #cardsView .song-card-side .icon-only-button,
  #cardsView .song-card-side .favorite-button {
    display: inline-grid !important;
    place-items: center !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    border: 1px solid rgba(99, 102, 241, 0.28) !important;
    border-radius: 8px !important;
    color: var(--accent-dark) !important;
    background: #FFFFFF !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #cardsView .song-card-side .icon-only-button svg,
  #cardsView .song-card-side .icon-only-button .action-icon {
    display: block !important;
    flex: 0 0 auto !important;
    width: 17px !important;
    min-width: 17px !important;
    height: 17px !important;
    min-height: 17px !important;
    color: currentColor !important;
    stroke: currentColor !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #cardsView .song-card-side .favorite-button-star {
    display: block !important;
    width: 17px !important;
    min-width: 17px !important;
    line-height: 17px !important;
    font-size: 1rem !important;
    text-align: center !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #cardsView .song-card-side .song-delete-button.icon-only-button {
    color: #DC2626 !important;
    border-color: rgba(220, 38, 38, 0.28) !important;
    background: #FEF2F2 !important;
  }

  #cardsView .song-card-side .action-icon {
    width: 17px !important;
    height: 17px !important;
    display: block !important;
    color: currentColor !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body[data-theme="dark"] #cardsView .song-card-side .icon-only-button,
  body[data-theme="dark"] #cardsView .song-card-side .favorite-button {
    color: #E0E7FF !important;
    border-color: rgba(129, 140, 248, 0.42) !important;
    background: rgba(15, 23, 42, 0.94) !important;
  }

  body[data-theme="dark"] #cardsView .song-card-side .song-delete-button.icon-only-button {
    color: #FCA5A5 !important;
    border-color: rgba(248, 113, 113, 0.42) !important;
    background: rgba(127, 29, 29, 0.38) !important;
  }
}

/* Vibra home - camada final inspirada na referencia enviada */
.vibra-home {
  position: relative;
  display: grid !important;
  gap: 14px;
  max-width: 430px;
  margin: 0 auto;
  padding: 0 0 16px;
}

.vibra-home::before,
.vibra-home::after {
  display: none !important;
}

.vibra-home-top {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 10px;
  border: 1px solid rgba(139, 92, 246, 0.14);
  border-radius: 0 0 18px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.96));
  box-shadow: 0 14px 34px rgba(91, 64, 190, 0.12);
}

.vibra-logo-lockup,
.vibra-top-actions {
  display: flex;
  align-items: center;
}

.vibra-logo-lockup {
  gap: 7px;
}

.vibra-logo-mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #7c3aed;
}

.vibra-logo-mark svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
  stroke-width: 2.3;
}

.vibra-logo-text {
  color: #151235;
  font-size: 1.45rem;
  font-weight: 950;
  line-height: 1;
}

.vibra-top-actions {
  gap: 6px;
}

.vibra-plus-pill,
.vibra-manage-button {
  min-height: 26px;
  border: 0;
  border-radius: 7px;
  color: #ffffff;
  background: linear-gradient(180deg, #8b5cf6, #6d28d9);
  font-size: 0.55rem;
  font-weight: 950;
}

.vibra-plus-pill {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
}

.vibra-manage-button {
  padding: 0 10px;
}

.vibra-icon-button,
.vibra-avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.vibra-icon-button {
  border: 0;
  color: #1d173b;
  background: #f1ecff;
}

.vibra-icon-button svg {
  width: 16px;
  height: 16px;
}

.vibra-avatar {
  overflow: hidden;
  background: #12062e;
}

.vibra-avatar img {
  width: 34px;
  height: 34px;
  object-fit: cover;
}

.vibra-home .hero {
  min-height: 258px !important;
  grid-template-columns: minmax(0, 1fr) 145px !important;
  gap: 4px !important;
  align-items: center;
  margin: -1px 0 0 !important;
  padding: 24px 16px 22px !important;
  border: 1px solid rgba(145, 123, 255, 0.16) !important;
  border-radius: 14px !important;
  color: #171337 !important;
  background:
    radial-gradient(circle at 88% 30%, rgba(115, 79, 255, 0.18), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #fbfaff 46%, #f2f0ff 100%) !important;
  box-shadow: 0 18px 44px rgba(86, 65, 175, 0.12) !important;
  overflow: hidden;
}

.vibra-home .hero::before {
  inset: auto -18px 10px auto !important;
  width: 210px !important;
  height: 160px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.12), transparent 62%) !important;
}

.vibra-home .hero::after,
.vibra-home .hero-brand-row {
  display: none !important;
}

.vibra-home .hero-copy {
  gap: 11px !important;
  padding: 0 !important;
}

.vibra-home .hero-copy::before {
  content: "BEM-VINDO AO VIBRA";
  width: fit-content;
  padding: 7px 9px;
  border-radius: 6px;
  color: #7447ff;
  background: #efeaff;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
}

.vibra-home .hero h1 {
  max-width: 14ch !important;
  margin: 0 !important;
  color: #171337 !important;
  font-size: clamp(1.55rem, 7vw, 2.05rem) !important;
  font-weight: 950 !important;
  line-height: 1.02 !important;
}

.vibra-home .hero h1 em,
.vibra-home .hero h1 strong {
  color: #6541ee;
}

.vibra-home .hero .subtitle {
  max-width: 25ch !important;
  margin: 0 !important;
  color: #726b8d !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  line-height: 1.38 !important;
}

.vibra-home .hero-mascot {
  width: 168px !important;
  max-width: none !important;
  justify-self: end;
  align-self: center;
  filter: drop-shadow(0 18px 24px rgba(82, 59, 194, 0.2)) !important;
  transform: translate(12px, 2px) !important;
}

.vibra-home .hero-source-box {
  position: relative;
  display: grid !important;
  gap: 13px !important;
  margin: 0 !important;
  padding: 14px !important;
  border: 1px solid rgba(145, 123, 255, 0.14) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 14px 34px rgba(86, 65, 175, 0.1) !important;
}

.vibra-home .hero-view-context {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 42px !important;
  border: 0 !important;
  color: #5c5675 !important;
  background: transparent !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  line-height: 32px !important;
  backdrop-filter: none !important;
}

.vibra-home .hero-source-box::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 14px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 45% 45%, transparent 0 5px, #fff 6px 7px, transparent 8px),
    linear-gradient(135deg, #8b5cf6, #6d28d9);
  box-shadow: 0 8px 16px rgba(109, 40, 217, 0.24);
}

.vibra-home .hero-source-box::after {
  content: "";
  position: absolute;
  top: 15px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background:
    linear-gradient(90deg, transparent 8px, #7c3aed 8px 10px, transparent 10px 22px, #7c3aed 22px 24px, transparent 24px),
    linear-gradient(180deg, transparent 8px, #7c3aed 8px 10px, transparent 10px 16px, #7c3aed 16px 18px, transparent 18px 24px),
    #f0e9ff;
}

.vibra-home .source-picker,
.vibra-home .source-picker-button {
  width: 100% !important;
}

.vibra-home .source-picker-button {
  min-height: 46px !important;
  display: flex;
  justify-content: space-between;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #24203d !important;
  background: #ffffff !important;
  box-shadow: 0 8px 20px rgba(52, 39, 124, 0.07) !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
}

.vibra-home .source-picker-button::after {
  content: "›";
  color: #21173d;
  font-size: 1.5rem;
  line-height: 1;
}

.vibra-home .hero-panel {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.vibra-home .hero-panel > div {
  min-height: 98px !important;
  display: grid !important;
  grid-template-columns: 30px 1fr !important;
  align-content: start;
  gap: 2px 8px !important;
  padding: 14px 10px 10px !important;
  border: 1px solid rgba(145, 123, 255, 0.15) !important;
  border-bottom: 3px solid #8b5cf6 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 14px 28px rgba(86, 65, 175, 0.1) !important;
}

.vibra-home .hero-panel > div::before {
  content: "";
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}

.vibra-home .stat-value {
  color: #221a48 !important;
  font-size: 1.12rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.vibra-home .stat-label {
  color: #5b35d5 !important;
  font-size: 0.55rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.vibra-connect-card {
  max-width: 430px;
  min-height: 96px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 112px;
  align-items: center;
  gap: 13px;
  margin: 0 auto 18px;
  padding: 18px 16px;
  border-radius: 14px;
  color: #ffffff;
  background:
    linear-gradient(90deg, transparent 70%, rgba(168, 85, 247, 0.1)),
    linear-gradient(135deg, #18063a, #0b0623);
  box-shadow: 0 18px 36px rgba(24, 6, 58, 0.18);
}

.vibra-wave-logo svg {
  width: 42px;
  height: 42px;
  stroke: #7c3aed;
  stroke-width: 2.2;
}

.vibra-connect-copy {
  display: grid;
  gap: 5px;
}

.vibra-connect-copy strong {
  font-size: 0.98rem;
  line-height: 1.12;
}

.vibra-connect-copy span {
  color: #b9add7;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.35;
}

.vibra-equalizer {
  height: 54px;
  opacity: 0.9;
  background:
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(168, 85, 247, 0.85) 6px 8px, transparent 8px 11px),
    linear-gradient(180deg, transparent 0 18%, rgba(34, 211, 238, 0.3) 18% 20%, transparent 20% 100%);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.app-shell.is-home-active .top-session {
  display: none !important;
}

@media (max-width: 760px) {
  body {
    background: #f7f4ff !important;
  }

  .app-shell {
    width: min(100%, 430px) !important;
    margin: 0 auto !important;
    padding: 12px 10px calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .top-session {
    display: none !important;
  }

  .notifications-hub {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 10000 !important;
    pointer-events: none !important;
  }

  .notifications-hub .notifications-panel,
  body .notifications-panel#notificationsPanel {
    top: calc(66px + env(safe-area-inset-top, 0px)) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-height: min(72vh, calc(100vh - 150px)) !important;
    pointer-events: auto !important;
  }

  .bottom-nav-bar {
    height: 72px !important;
    border-radius: 18px 18px 0 0;
    background: #080822 !important;
    border-top-color: rgba(139, 92, 246, 0.3) !important;
  }

  .bottom-nav-item {
    color: #8f8ca7 !important;
    font-size: 0.58rem !important;
  }

  .bottom-nav-item.is-active {
    color: #9b5cff !important;
  }

  .bottom-nav-fab {
    width: 64px !important;
    height: 64px !important;
    margin-top: -32px !important;
    background: linear-gradient(180deg, #8b5cf6, #6d28d9) !important;
    box-shadow: 0 12px 26px rgba(109, 40, 217, 0.38), 0 0 0 7px #080822 !important;
  }
}

@media (min-width: 761px) {
  .vibra-home {
    max-width: 430px !important;
    width: min(430px, 100%) !important;
    gap: 14px !important;
    padding: 0 0 16px !important;
  }

  .vibra-home-top {
    display: flex !important;
  }

  .vibra-home .hero {
    width: 100% !important;
    min-height: 258px !important;
    grid-template-columns: minmax(0, 1fr) 145px !important;
    padding: 24px 16px 22px !important;
    margin: -1px 0 0 !important;
    overflow: hidden !important;
  }

  .vibra-home .hero h1 {
    max-width: 14ch !important;
    font-size: 1.78rem !important;
    line-height: 1.02 !important;
  }

  .vibra-home .hero .subtitle {
    max-width: 25ch !important;
    font-size: 0.78rem !important;
    line-height: 1.38 !important;
  }

  .vibra-home .hero-mascot {
    width: 168px !important;
    transform: translate(12px, 2px) !important;
  }

  .vibra-home .hero-source-box {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  .vibra-home .hero-view-context {
    white-space: normal !important;
  }

  .vibra-home .hero-panel {
    gap: 8px !important;
  }

  .vibra-home .hero-panel > div {
    min-height: 98px !important;
    grid-template-columns: 30px 1fr !important;
    padding: 14px 10px 10px !important;
  }

  .vibra-home .hero-panel > div::before {
    width: 28px !important;
    height: 28px !important;
  }

  .vibra-home .stat-value {
    font-size: 1.12rem !important;
  }

  .vibra-home .stat-label {
    font-size: 0.55rem !important;
  }

  .vibra-connect-card {
    max-width: 430px !important;
    width: 100% !important;
    min-height: 96px !important;
    grid-template-columns: 46px minmax(0, 1fr) 112px !important;
    padding: 18px 16px !important;
  }

  .vibra-connect-copy strong {
    font-size: 0.98rem !important;
  }

  .vibra-connect-copy span {
    font-size: 0.6rem !important;
  }
}

.app-section.is-hidden {
  display: none !important;
}

.vibra-home .hero-panel + *::before {
  content: none !important;
  display: none !important;
}

/* Correção final da home Vibra no desktop */
@media (min-width: 761px) {
  .app-shell:has(.vibra-home:not(.is-hidden)) {
    padding-top: 18px !important;
  }

  .app-shell:has(.vibra-home:not(.is-hidden)) .top-session {
    display: none !important;
  }

  .app-shell:has(.vibra-home:not(.is-hidden)) .vibra-home {
    width: 100% !important;
    max-width: none !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 0 0 32px !important;
  }

  .vibra-home-top {
    min-height: 58px !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
  }

  .vibra-logo-mark,
  .vibra-logo-mark svg {
    width: 30px !important;
    height: 30px !important;
  }

  .vibra-logo-text {
    font-size: 1.38rem !important;
  }

  .vibra-plus-pill,
  .vibra-manage-button {
    min-height: 24px !important;
    border-radius: 7px !important;
    font-size: 0.52rem !important;
  }

  .vibra-manage-button {
    max-width: 108px !important;
    padding: 0 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .vibra-icon-button,
  .vibra-avatar {
    width: 28px !important;
    height: 28px !important;
  }

  .vibra-home .hero {
    min-height: 252px !important;
    grid-template-columns: minmax(0, 1fr) 142px !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 22px 14px 20px !important;
    border-radius: 14px !important;
  }

  .vibra-home .hero-copy {
    gap: 9px !important;
  }

  .vibra-home .hero-copy::before {
    padding: 6px 8px !important;
    border-radius: 5px !important;
    font-size: 0.56rem !important;
  }

  .vibra-home .hero h1 {
    max-width: 13.5ch !important;
    font-size: 1.62rem !important;
    line-height: 1.04 !important;
    font-weight: 950 !important;
  }

  .vibra-home .hero h1 strong {
    color: #5f3df0 !important;
  }

  .vibra-home .hero .subtitle {
    max-width: 24ch !important;
    font-size: 0.68rem !important;
    line-height: 1.42 !important;
  }

  .vibra-home .hero-mascot {
    width: 152px !important;
    transform: translate(8px, 6px) !important;
  }

  .vibra-home .hero-source-box {
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 14px !important;
  }

  .vibra-home .hero-view-context {
    min-height: 30px !important;
    padding: 0 40px !important;
    font-size: 0.68rem !important;
    line-height: 30px !important;
  }

  .vibra-home .hero-source-box::before,
  .vibra-home .hero-source-box::after {
    top: 12px !important;
    width: 30px !important;
    height: 30px !important;
  }

  .vibra-home .hero-source-box::before {
    left: 12px !important;
  }

  .vibra-home .hero-source-box::after {
    right: 12px !important;
  }

  .vibra-home .source-picker-button {
    min-height: 42px !important;
    padding: 0 14px !important;
    font-size: 0.72rem !important;
  }

  .vibra-home .hero-panel {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  .vibra-home .hero-panel > div {
    min-height: 90px !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 2px 7px !important;
    padding: 12px 8px 9px !important;
    border-radius: 10px !important;
  }

  .vibra-home .hero-panel > div::before {
    width: 26px !important;
    height: 26px !important;
    border-radius: 8px !important;
  }

  .vibra-home .stat-value {
    font-size: 1.02rem !important;
  }

  .vibra-home .stat-label {
    font-size: 0.5rem !important;
  }

  .vibra-connect-card {
    min-height: 88px !important;
    grid-template-columns: 42px minmax(0, 1fr) 94px !important;
    gap: 10px !important;
    padding: 15px 14px !important;
    border-radius: 14px !important;
  }

  .vibra-wave-logo svg {
    width: 38px !important;
    height: 38px !important;
  }

  .vibra-connect-copy strong {
    font-size: 0.88rem !important;
    line-height: 1.15 !important;
  }

  .vibra-connect-copy span {
    font-size: 0.55rem !important;
    line-height: 1.3 !important;
  }
}

/* Vibra desktop v2: layout definitivo para telas grandes */
.top-session[hidden] {
  display: none !important;
}

@media (min-width: 761px) {
  .app-shell.is-home-active {
    width: min(1180px, calc(100% - 300px)) !important;
    margin-left: max(280px, calc((100vw - 1180px) / 2)) !important;
    padding-top: 24px !important;
  }

  .app-shell.is-home-active .vibra-home {
    width: min(760px, 100%) !important;
    max-width: 760px !important;
    display: grid !important;
    gap: 16px !important;
    margin: 0 auto !important;
    padding: 0 0 28px !important;
  }

  .app-shell.is-home-active .vibra-home-top {
    min-height: 66px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 13px 18px !important;
    border: 1px solid rgba(124, 58, 237, 0.16) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 18px 44px rgba(70, 43, 145, 0.1) !important;
  }

  .app-shell.is-home-active .vibra-logo-mark,
  .app-shell.is-home-active .vibra-logo-mark svg {
    width: 34px !important;
    height: 34px !important;
  }

  .app-shell.is-home-active .vibra-logo-text {
    font-size: 1.6rem !important;
  }

  .app-shell.is-home-active .vibra-top-actions {
    gap: 9px !important;
  }

  .app-shell.is-home-active .vibra-plus-pill,
  .app-shell.is-home-active .vibra-manage-button {
    min-height: 32px !important;
    border-radius: 9px !important;
    font-size: 0.68rem !important;
  }

  .app-shell.is-home-active .vibra-plus-pill {
    padding: 0 12px !important;
  }

  .app-shell.is-home-active .vibra-manage-button {
    max-width: none !important;
    padding: 0 14px !important;
    white-space: nowrap !important;
  }

  .app-shell.is-home-active .vibra-icon-button,
  .app-shell.is-home-active .vibra-avatar {
    width: 36px !important;
    height: 36px !important;
  }

  .app-shell.is-home-active .vibra-avatar img {
    width: 42px !important;
    height: 42px !important;
  }

  .app-shell.is-home-active .vibra-home .hero {
    width: 100% !important;
    min-height: 300px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 250px !important;
    align-items: center !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 34px 34px 30px !important;
    border: 1px solid rgba(124, 58, 237, 0.14) !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 82% 48%, rgba(139, 92, 246, 0.2), transparent 34%),
      linear-gradient(135deg, #ffffff 0%, #fbfaff 48%, #f1edff 100%) !important;
    box-shadow: 0 22px 52px rgba(70, 43, 145, 0.12) !important;
    overflow: hidden !important;
  }

  .app-shell.is-home-active .vibra-home .hero-copy {
    display: grid !important;
    gap: 12px !important;
    padding: 0 !important;
  }

  .app-shell.is-home-active .vibra-home .hero-copy::before {
    width: fit-content !important;
    padding: 8px 10px !important;
    border-radius: 7px !important;
    font-size: 0.68rem !important;
  }

  .app-shell.is-home-active .vibra-home .hero h1 {
    max-width: 17ch !important;
    margin: 0 !important;
    color: #171337 !important;
    font-size: 2.18rem !important;
    font-weight: 950 !important;
    line-height: 1.04 !important;
  }

  .app-shell.is-home-active .vibra-home .hero h1 strong {
    color: #6246ea !important;
  }

  .app-shell.is-home-active .vibra-home .hero .subtitle {
    max-width: 34ch !important;
    margin: 0 !important;
    color: #71698b !important;
    font-size: 0.9rem !important;
    font-weight: 750 !important;
    line-height: 1.45 !important;
  }

  .app-shell.is-home-active .vibra-home .hero-mascot {
    width: 245px !important;
    max-width: 100% !important;
    justify-self: end !important;
    transform: translate(8px, 4px) !important;
  }

  .app-shell.is-home-active .vibra-home .hero-source-box {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 250px !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 16px !important;
    border: 1px solid rgba(124, 58, 237, 0.14) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 16px 38px rgba(70, 43, 145, 0.09) !important;
  }

  .app-shell.is-home-active .vibra-home .hero-view-context {
    min-height: 36px !important;
    padding: 0 48px !important;
    color: #514b69 !important;
    font-size: 0.82rem !important;
    line-height: 36px !important;
    white-space: nowrap !important;
  }

  .app-shell.is-home-active .vibra-home .hero-source-box::before {
    top: 16px !important;
    left: 16px !important;
    width: 36px !important;
    height: 36px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-source-box::after {
    top: 16px !important;
    right: calc(250px + 30px) !important;
    width: 36px !important;
    height: 36px !important;
  }

  .app-shell.is-home-active .vibra-home .source-picker-button {
    min-height: 46px !important;
    padding: 0 16px !important;
    font-size: 0.82rem !important;
  }

  .app-shell.is-home-active .vibra-home .hero-panel {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-panel > div {
    min-height: 112px !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 3px 10px !important;
    padding: 18px 16px 14px !important;
    border-radius: 14px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-panel > div::before {
    width: 36px !important;
    height: 36px !important;
    border-radius: 11px !important;
  }

  .app-shell.is-home-active .vibra-home .stat-value {
    font-size: 1.35rem !important;
  }

  .app-shell.is-home-active .vibra-home .stat-label {
    font-size: 0.64rem !important;
  }

  .app-shell.is-home-active .vibra-connect-card {
    width: 100% !important;
    max-width: none !important;
    min-height: 112px !important;
    grid-template-columns: 54px minmax(0, 1fr) 220px !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 22px 24px !important;
    border-radius: 16px !important;
  }

  .app-shell.is-home-active .vibra-wave-logo svg {
    width: 48px !important;
    height: 48px !important;
  }

  .app-shell.is-home-active .vibra-connect-copy strong {
    font-size: 1.12rem !important;
  }

  .app-shell.is-home-active .vibra-connect-copy span {
    font-size: 0.72rem !important;
  }
}

/* Desktop full-width definitivo: precisa ficar depois de todas as camadas Vibra */
@media (min-width: 761px) {
  .app-shell.is-home-active {
    width: min(1180px, calc(100vw - 320px)) !important;
    max-width: none !important;
    margin-left: max(280px, calc((100vw - 1180px) / 2)) !important;
    margin-right: auto !important;
    padding-top: 24px !important;
  }

  .app-shell.is-home-active .vibra-home {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 0 0 32px !important;
  }

  .app-shell.is-home-active .vibra-home-top {
    width: 100% !important;
    min-height: 72px !important;
    padding: 14px 22px !important;
    border-radius: 18px !important;
  }

  .app-shell.is-home-active .vibra-logo-mark,
  .app-shell.is-home-active .vibra-logo-mark svg {
    width: 38px !important;
    height: 38px !important;
  }

  .app-shell.is-home-active .vibra-logo-text {
    font-size: 1.8rem !important;
  }

  .app-shell.is-home-active .vibra-plus-pill,
  .app-shell.is-home-active .vibra-manage-button {
    min-height: 34px !important;
    font-size: 0.72rem !important;
  }

  .app-shell.is-home-active .vibra-manage-button {
    max-width: none !important;
    padding: 0 18px !important;
  }

  .app-shell.is-home-active .vibra-icon-button,
  .app-shell.is-home-active .vibra-avatar {
    width: 40px !important;
    height: 40px !important;
  }

  .app-shell.is-home-active .vibra-home .hero {
    width: 100% !important;
    min-height: 360px !important;
    display: grid !important;
    grid-template-columns: minmax(360px, 1fr) minmax(300px, 0.55fr) !important;
    align-items: center !important;
    gap: clamp(24px, 5vw, 72px) !important;
    margin: 0 !important;
    padding: clamp(34px, 4vw, 56px) clamp(34px, 5vw, 64px) !important;
    border-radius: 22px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-copy {
    max-width: 520px !important;
    gap: 14px !important;
  }

  .app-shell.is-home-active .vibra-home .hero h1 {
    max-width: 18ch !important;
    font-size: clamp(2.35rem, 3.7vw, 4.05rem) !important;
    line-height: 1.02 !important;
  }

  .app-shell.is-home-active .vibra-home .hero .subtitle {
    max-width: 42ch !important;
    font-size: clamp(0.95rem, 1.05vw, 1.08rem) !important;
    line-height: 1.5 !important;
  }

  .app-shell.is-home-active .vibra-home .hero-mascot {
    width: min(340px, 28vw) !important;
    justify-self: center !important;
    transform: none !important;
  }

  .app-shell.is-home-active .vibra-home .hero-source-box {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px) !important;
    gap: 18px !important;
    align-items: center !important;
    padding: 18px !important;
    border-radius: 18px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-view-context {
    min-height: 40px !important;
    padding: 0 54px !important;
    font-size: 0.9rem !important;
    line-height: 40px !important;
    white-space: nowrap !important;
  }

  .app-shell.is-home-active .vibra-home .hero-source-box::before,
  .app-shell.is-home-active .vibra-home .hero-source-box::after {
    top: 18px !important;
    width: 40px !important;
    height: 40px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-source-box::before {
    left: 18px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-source-box::after {
    right: calc(min(360px, max(260px, 32vw)) + 34px) !important;
  }

  .app-shell.is-home-active .vibra-home .source-picker-button {
    min-height: 50px !important;
    font-size: 0.9rem !important;
  }

  .app-shell.is-home-active .vibra-home .hero-panel {
    width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-panel > div {
    min-height: 132px !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 6px 14px !important;
    padding: 22px 20px 18px !important;
    border-radius: 16px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-panel > div::before {
    width: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
  }

  .app-shell.is-home-active .vibra-home .stat-value {
    font-size: 1.7rem !important;
  }

  .app-shell.is-home-active .vibra-home .stat-label {
    font-size: 0.74rem !important;
  }

  .app-shell.is-home-active .vibra-connect-card {
    width: 100% !important;
    max-width: none !important;
    min-height: 132px !important;
    grid-template-columns: 64px minmax(0, 1fr) minmax(260px, 360px) !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 26px 30px !important;
    border-radius: 20px !important;
  }

  .app-shell.is-home-active .vibra-wave-logo svg {
    width: 58px !important;
    height: 58px !important;
  }

  .app-shell.is-home-active .vibra-connect-copy strong {
    font-size: 1.35rem !important;
  }

  .app-shell.is-home-active .vibra-connect-copy span {
    font-size: 0.88rem !important;
  }
}

/* Desktop compacto finalissimo: ultima regra da cascata */
@media (min-width: 761px) {
  .app-shell.is-home-active { padding-top: 14px !important; }
  .app-shell.is-home-active .vibra-home { gap: 12px !important; padding-bottom: 16px !important; }
  .app-shell.is-home-active .vibra-home-top { min-height: 54px !important; padding: 9px 18px !important; border-radius: 15px !important; }
  .app-shell.is-home-active .vibra-logo-mark,
  .app-shell.is-home-active .vibra-logo-mark svg { width: 30px !important; height: 30px !important; }
  .app-shell.is-home-active .vibra-logo-text { font-size: 1.45rem !important; }
  .app-shell.is-home-active .vibra-plus-pill,
  .app-shell.is-home-active .vibra-manage-button { min-height: 28px !important; border-radius: 8px !important; font-size: 0.64rem !important; }
  .app-shell.is-home-active .vibra-icon-button,
  .app-shell.is-home-active .vibra-avatar { width: 32px !important; height: 32px !important; }
  .app-shell.is-home-active .vibra-home .hero { min-height: 300px !important; gap: clamp(18px, 4vw, 52px) !important; padding: 26px clamp(28px, 4vw, 48px) !important; border-radius: 18px !important; }
  .app-shell.is-home-active .vibra-home .hero-copy { gap: 10px !important; }
  .app-shell.is-home-active .vibra-home .hero-copy::before { padding: 6px 9px !important; font-size: 0.62rem !important; }
  .app-shell.is-home-active .vibra-home .hero h1 { max-width: 19ch !important; font-size: clamp(2rem, 3vw, 3.05rem) !important; line-height: 1.02 !important; }
  .app-shell.is-home-active .vibra-home .hero .subtitle { max-width: 43ch !important; font-size: 0.86rem !important; line-height: 1.42 !important; }
  .app-shell.is-home-active .vibra-home .hero-mascot { width: min(270px, 23vw) !important; }
  .app-shell.is-home-active .vibra-home .hero-source-box { min-height: 70px !important; padding: 12px 14px !important; border-radius: 15px !important; }
  .app-shell.is-home-active .vibra-home .hero-view-context { min-height: 34px !important; padding: 0 46px !important; font-size: 0.8rem !important; line-height: 34px !important; }
  .app-shell.is-home-active .vibra-home .hero-source-box::before,
  .app-shell.is-home-active .vibra-home .hero-source-box::after { top: 12px !important; width: 34px !important; height: 34px !important; }
  .app-shell.is-home-active .vibra-home .hero-source-box::before { left: 14px !important; }
  .app-shell.is-home-active .vibra-home .hero-source-box::after { right: calc(min(360px, max(260px, 32vw)) + 28px) !important; }
  .app-shell.is-home-active .vibra-home .source-picker-button { min-height: 42px !important; font-size: 0.82rem !important; }
  .app-shell.is-home-active .vibra-home .hero-panel { gap: 12px !important; }
  .app-shell.is-home-active .vibra-home .hero-panel > div { min-height: 92px !important; grid-template-columns: 36px minmax(0, 1fr) !important; gap: 3px 10px !important; padding: 14px 16px 12px !important; border-radius: 14px !important; }
  .app-shell.is-home-active .vibra-home .hero-panel > div::before { width: 34px !important; height: 34px !important; border-radius: 10px !important; }
  .app-shell.is-home-active .vibra-home .stat-value { font-size: 1.28rem !important; }
  .app-shell.is-home-active .vibra-home .stat-label { font-size: 0.62rem !important; }
  .app-shell.is-home-active .vibra-connect-card { min-height: 86px !important; grid-template-columns: 46px minmax(0, 1fr) minmax(220px, 320px) !important; gap: 14px !important; padding: 16px 22px !important; border-radius: 16px !important; }
  .app-shell.is-home-active .vibra-wave-logo svg { width: 42px !important; height: 42px !important; }
  .app-shell.is-home-active .vibra-connect-copy strong { font-size: 1rem !important; }
  .app-shell.is-home-active .vibra-connect-copy span { font-size: 0.68rem !important; }
}

/* Perfil clicavel no avatar Vibra */
.vibra-profile {
  position: relative;
  display: grid;
  place-items: center;
}

button.vibra-avatar {
  border: 0;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(65, 39, 145, 0.18);
}

button.vibra-avatar:focus-visible {
  outline: 3px solid rgba(124, 58, 237, 0.28);
  outline-offset: 3px;
}

.vibra-profile-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 500;
  width: 248px;
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 14px;
  color: #171337;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 22px 54px rgba(36, 24, 80, 0.2);
}

.vibra-profile-menu.is-hidden {
  display: none !important;
}

.vibra-profile-head {
  display: grid;
  gap: 3px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(124, 58, 237, 0.12);
}

.vibra-profile-name-button {
  width: 100%;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.vibra-profile-head strong {
  font-size: 0.95rem;
  line-height: 1.2;
}

.vibra-profile-head span {
  color: #756d92;
  font-size: 0.75rem;
  font-weight: 800;
}

.vibra-profile-field {
  display: grid;
  gap: 6px;
}

.vibra-profile-field span {
  color: #5b35d5;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.vibra-profile-field input {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 10px;
  padding: 0 10px;
  background: #ffffff;
  color: #171337;
  font-size: 0.86rem;
  font-weight: 750;
}

.vibra-profile-action {
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  color: #ffffff;
  background: linear-gradient(180deg, #8b5cf6, #6d28d9);
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
}

.vibra-profile-action.secondary {
  color: #4c1d95;
  background: #f0e7ff;
}

.vibra-profile-action.danger {
  color: #b91c1c;
  background: #fee2e2;
}

body[data-theme="dark"] .vibra-profile-menu {
  color: #f8fafc;
  background: rgba(15, 23, 42, 0.98);
  border-color: rgba(129, 140, 248, 0.32);
}

body[data-theme="dark"] .vibra-profile-field input {
  color: #f8fafc;
  background: rgba(15, 23, 42, 0.92);
  border-color: rgba(129, 140, 248, 0.32);
}

body[data-theme="dark"] .vibra-profile-head span {
  color: #c4b5fd;
}

body[data-theme="dark"] .vibra-profile-action.secondary {
  color: #ede9fe;
  background: rgba(124, 58, 237, 0.22);
}

/* Perfil social visual */
.profile-social-panel {
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: 18px 18px 48px;
  color: #171337;
}

.profile-social-shell {
  display: grid;
  gap: 16px;
  animation: profilePanelIn 220ms ease both;
}

.profile-social-cover {
  position: relative;
  min-height: 190px;
  overflow: hidden;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.62), transparent 18%),
    radial-gradient(circle at 78% 24%, rgba(34, 211, 238, 0.24), transparent 20%),
    linear-gradient(135deg, #6d28d9 0%, #8b5cf6 42%, #18143f 100%);
  box-shadow: 0 24px 60px rgba(43, 30, 92, 0.18);
}

.profile-social-cover::before {
  content: "";
  position: absolute;
  inset: auto 0 22px;
  height: 72px;
  opacity: 0.36;
  background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,0.8) 18px 23px, transparent 23px 36px);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}

.profile-social-cover span {
  position: absolute;
  bottom: 42px;
  width: 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f0abfc, #60a5fa);
  box-shadow: 0 0 18px rgba(216, 180, 254, 0.8);
}

.profile-social-cover span:nth-child(1) { left: 50%; height: 32px; }
.profile-social-cover span:nth-child(2) { left: 53%; height: 52px; }
.profile-social-cover span:nth-child(3) { left: 56%; height: 38px; }
.profile-social-cover span:nth-child(4) { left: 59%; height: 64px; }
.profile-social-cover span:nth-child(5) { left: 62%; height: 28px; }

.profile-social-cover-edit {
  position: absolute;
  right: 16px;
  top: 16px;
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 999px;
  padding: 0 14px;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.24);
  font-size: 0.78rem;
  font-weight: 900;
}

.profile-social-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) minmax(260px, 320px);
  gap: 22px;
  align-items: end;
  margin-top: -74px;
  padding: 0 20px 20px;
  position: relative;
  z-index: 2;
}

.profile-social-avatar-wrap {
  position: relative;
  width: 148px;
  height: 148px;
  z-index: 6;
}

.profile-social-avatar {
  width: 148px;
  height: 148px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 5px solid #f8f7ff;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(135deg, #7c3aed, #111033);
  box-shadow: 0 20px 42px rgba(37, 25, 76, 0.25), 0 0 0 3px rgba(124, 58, 237, 0.35);
  font-size: 2.8rem;
  font-weight: 950;
}

.profile-social-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-social-photo-edit {
  position: absolute;
  right: 7px;
  bottom: 9px;
  width: 36px;
  height: 36px;
  z-index: 12;
  border: 3px solid #f8f7ff;
  border-radius: 50%;
  color: #ffffff;
  background: #7c3aed;
  font-size: 1.2rem;
  font-weight: 950;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}

.profile-social-photo-edit:hover,
.profile-social-photo-edit:focus-visible {
  border-color: #ffffff;
  background: #6d28d9;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.22);
  outline: none;
}

.profile-social-main,
.profile-social-side,
.profile-social-section,
.profile-social-future {
  border: 1px solid rgba(124, 58, 237, 0.14);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 16px 40px rgba(42, 31, 89, 0.10);
}

.profile-social-main {
  display: grid;
  gap: 4px;
  min-height: 160px;
  align-content: end;
  border-radius: 18px;
  padding: 20px;
}

.profile-social-main h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.profile-social-main strong {
  font-size: clamp(1.45rem, 2.4vw, 2.25rem);
  line-height: 1.05;
}

.profile-social-main > span {
  color: #6d28d9;
  font-size: 0.95rem;
  font-weight: 900;
}

.profile-social-location {
  color: #5f5878;
}

.profile-social-main p:last-child {
  max-width: 62ch;
  margin: 8px 0 0;
  color: #4b4663;
  font-size: 0.98rem;
  line-height: 1.5;
}

.profile-social-side {
  display: grid;
  gap: 12px;
  border-radius: 18px;
  padding: 16px;
}

.profile-social-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.profile-social-metrics div {
  display: grid;
  gap: 2px;
  min-height: 64px;
  place-items: center;
  border-radius: 14px;
  background: #f3efff;
}

.profile-social-metrics strong {
  font-size: 1.35rem;
  line-height: 1;
}

.profile-social-metrics span {
  color: #6b6384;
  font-size: 0.72rem;
  font-weight: 900;
}

.profile-social-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.profile-social-tabs {
  display: inline-flex;
  width: fit-content;
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(124, 58, 237, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
}

.profile-social-tabs button {
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  padding: 0 18px;
  color: #5d5677;
  background: transparent;
  font-size: 0.86rem;
  font-weight: 900;
  cursor: pointer;
}

.profile-social-tabs button.is-active {
  color: #ffffff;
  background: linear-gradient(180deg, #8b5cf6, #6d28d9);
}

.profile-social-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.profile-social-section,
.profile-social-future {
  border-radius: 18px;
  padding: 18px;
}

.profile-social-feature {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.profile-social-section-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #ffffff;
  background: linear-gradient(135deg, #7c3aed, #312e81);
  font-size: 1.5rem;
}

.profile-social-section h3,
.profile-social-feature p {
  margin: 0 0 10px;
  color: #5b35d5;
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.profile-social-feature strong {
  display: block;
  font-size: 1.45rem;
}

.profile-social-wide {
  grid-column: 1 / -1;
}

.profile-social-chip-list,
.profile-social-goals {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.profile-social-chip,
.profile-social-goal {
  border: 1px solid rgba(124, 58, 237, 0.16);
  border-radius: 999px;
  color: #3b286d;
  background: #f4f0ff;
  font-weight: 850;
}

.profile-social-chip {
  padding: 8px 12px;
  font-size: 0.86rem;
}

.profile-social-goal {
  display: inline-grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 9px 13px 9px 9px;
  border-radius: 14px;
}

.profile-social-goal span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: #7c3aed;
  font-weight: 950;
}

.profile-social-goal strong {
  font-size: 0.9rem;
}

.profile-social-empty-inline {
  color: #6b6384;
  font-size: 0.9rem;
  font-weight: 750;
}

.profile-social-future {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}

.profile-social-future span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #7c3aed;
  background: #f0e7ff;
  font-size: 1.4rem;
}

.profile-social-future p {
  max-width: 520px;
  margin: 0;
  color: #6b6384;
}

body[data-theme="dark"] .profile-social-panel {
  color: #f8f7ff;
}

body[data-theme="dark"] .profile-social-main,
body[data-theme="dark"] .profile-social-side,
body[data-theme="dark"] .profile-social-section,
body[data-theme="dark"] .profile-social-future,
body[data-theme="dark"] .profile-social-tabs {
  border-color: rgba(129, 140, 248, 0.18);
  background: rgba(17, 16, 46, 0.86);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

body[data-theme="dark"] .profile-social-avatar,
body[data-theme="dark"] .profile-social-photo-edit {
  border-color: #12112f;
}

body[data-theme="dark"] .profile-social-main p:last-child,
body[data-theme="dark"] .profile-social-location,
body[data-theme="dark"] .profile-social-metrics span,
body[data-theme="dark"] .profile-social-future p,
body[data-theme="dark"] .profile-social-empty-inline {
  color: #c9c3e8 !important;
}

body[data-theme="dark"] .profile-social-metrics div,
body[data-theme="dark"] .profile-social-chip,
body[data-theme="dark"] .profile-social-goal,
body[data-theme="dark"] .profile-social-future span {
  color: #f8f7ff;
  background: rgba(124, 58, 237, 0.18);
  border-color: rgba(167, 139, 250, 0.24);
}

body[data-theme="dark"] .profile-social-tabs button {
  color: #d8d2f0;
}

/* Corre??o dos cards de resumo: sem corte de texto na home */
.app-shell.is-home-active .vibra-home .hero-panel > div {
  overflow: hidden !important;
  align-items: start !important;
}

.app-shell.is-home-active .vibra-home .stat-value,
.app-shell.is-home-active .vibra-home .stat-label {
  min-width: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
  word-break: normal !important;
}

.app-shell.is-home-active .vibra-home .stat-label {
  display: block !important;
  line-height: 1.15 !important;
}

@media (min-width: 761px) {
  .app-shell.is-home-active .vibra-home .hero-panel > div {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    min-height: 88px !important;
  }

  .app-shell.is-home-active .vibra-home .stat-value {
    font-size: 1.24rem !important;
  }

  .app-shell.is-home-active .vibra-home .stat-label {
    font-size: clamp(0.5rem, 0.65vw, 0.62rem) !important;
  }
}

/* Corre??o final dos cards de m?tricas da home */
.app-shell.is-home-active .vibra-home .hero-panel > div {
  display: grid !important;
  grid-template-columns: 34px 1fr !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 10px !important;
  row-gap: 4px !important;
  min-width: 0 !important;
  min-height: 88px !important;
  padding: 14px 12px 12px !important;
  overflow: hidden !important;
}

.app-shell.is-home-active .vibra-home .hero-panel > div::before {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 32px !important;
  height: 32px !important;
}

.app-shell.is-home-active .vibra-home .hero-panel .stat-value {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: block !important;
  min-width: 0 !important;
  color: #221a48 !important;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem) !important;
  line-height: 1 !important;
}

.app-shell.is-home-active .vibra-home .hero-panel .stat-label {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  color: #5b35d5 !important;
  font-size: clamp(0.54rem, 0.72vw, 0.68rem) !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  text-transform: uppercase !important;
  word-break: keep-all !important;
}

@media (min-width: 761px) {
  .app-shell.is-home-active .vibra-home .hero-panel {
    grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
  }
}

/* Cards de m?tricas em largura total no desktop */
@media (min-width: 761px) {
  .app-shell.is-home-active .vibra-home > .hero-panel {
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-panel > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 98px !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    align-content: center !important;
    align-items: center !important;
    padding: 18px 20px !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-panel > div::before {
    width: 40px !important;
    height: 40px !important;
    grid-row: 1 / span 2 !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-panel .stat-value {
    font-size: 1.55rem !important;
    line-height: 1 !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-panel .stat-label {
    font-size: 0.78rem !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow: visible !important;
  }
}

/* Acabamento fiel dos blocos abaixo do banner */
.app-shell.is-home-active .vibra-home > .hero-source-box {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  width: 100% !important;
  min-height: auto !important;
  padding: 18px !important;
  border: 1px solid rgba(124, 58, 237, 0.12) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,248,255,0.96)) !important;
  box-shadow: 0 18px 44px rgba(70, 43, 145, 0.09) !important;
}

.app-shell.is-home-active .vibra-home > .hero-source-box::before {
  top: 18px !important;
  left: 18px !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 13px !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / 18px 18px no-repeat,
    linear-gradient(180deg, #8b5cf6, #6d28d9) !important;
  box-shadow: 0 12px 22px rgba(109, 40, 217, 0.28) !important;
}

.app-shell.is-home-active .vibra-home > .hero-source-box::after {
  top: 18px !important;
  right: 18px !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 13px !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h10'/%3E%3Ccircle cx='17' cy='7' r='2'/%3E%3Cpath d='M20 17H10'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3C/svg%3E") center / 20px 20px no-repeat,
    #f1eaff !important;
  box-shadow: 0 8px 18px rgba(109, 40, 217, 0.1) !important;
}

.app-shell.is-home-active .vibra-home > .hero-source-box .hero-view-context {
  min-height: 42px !important;
  padding: 0 58px !important;
  color: #27213f !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  line-height: 42px !important;
}

.app-shell.is-home-active .vibra-home > .hero-source-box .source-picker-button {
  min-height: 54px !important;
  border-radius: 15px !important;
  padding: 0 22px !important;
  color: #171337 !important;
  background: #ffffff !important;
  box-shadow: 0 10px 26px rgba(36, 24, 80, 0.08) !important;
  font-size: 0.98rem !important;
  font-weight: 900 !important;
}

.app-shell.is-home-active .vibra-home > .hero-panel {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.app-shell.is-home-active .vibra-home > .hero-panel > div {
  min-height: 118px !important;
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  align-content: center !important;
  column-gap: 14px !important;
  row-gap: 3px !important;
  padding: 20px 18px 16px !important;
  border: 1px solid rgba(124, 58, 237, 0.12) !important;
  border-bottom: 3px solid #7c3aed !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 16px 36px rgba(70, 43, 145, 0.1) !important;
}

.app-shell.is-home-active .vibra-home > .hero-panel > div::before {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 13px !important;
  box-shadow: 0 12px 22px rgba(109, 40, 217, 0.22) !important;
}

.app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(1)::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E") center / 23px 23px no-repeat,
    linear-gradient(180deg, #8b5cf6, #6d28d9) !important;
}

.app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(2)::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E") center / 23px 23px no-repeat,
    linear-gradient(180deg, #8b5cf6, #6d28d9) !important;
}

.app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(3)::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z'/%3E%3C/svg%3E") center / 23px 23px no-repeat,
    linear-gradient(180deg, #8b5cf6, #6d28d9) !important;
}

.app-shell.is-home-active .vibra-home > .hero-panel .stat-value {
  grid-column: 2 !important;
  grid-row: 1 !important;
  color: #171337 !important;
  font-size: 1.45rem !important;
  font-weight: 950 !important;
}

.app-shell.is-home-active .vibra-home > .hero-panel .stat-label {
  grid-column: 2 !important;
  grid-row: 2 !important;
  color: #5b35d5 !important;
  font-size: 0.72rem !important;
  font-weight: 950 !important;
}

.app-shell.is-home-active .vibra-home > .hero-panel small {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  margin-top: 10px !important;
  color: #6f6985 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
}

.app-shell.is-home-active .vibra-connect-card {
  min-height: 116px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 9% 50%, rgba(124,58,237,0.2), transparent 0 42px, transparent 43px),
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(168,85,247,0.75) 9px 11px, transparent 11px 16px),
    linear-gradient(135deg, #150632 0%, #08031f 100%) !important;
  background-size: auto, 42% 58%, auto !important;
  background-position: 0 0, right center, 0 0 !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 18px 36px rgba(12, 4, 38, 0.22) !important;
}

/* Mobile: cards de m?tricas ocupam toda a largura */
@media (max-width: 760px) {
  .vibra-home > .hero-panel {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .vibra-home > .hero-panel > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 86px !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    align-content: center !important;
    column-gap: 12px !important;
    padding: 16px 14px !important;
  }

  .vibra-home > .hero-panel > div::before {
    width: 40px !important;
    height: 40px !important;
    grid-row: 1 / span 2 !important;
  }

  .vibra-home > .hero-panel .stat-value {
    font-size: 1.35rem !important;
  }

  .vibra-home > .hero-panel .stat-label {
    font-size: 0.72rem !important;
  }

  .vibra-home > .hero-panel small {
    grid-column: 1 / -1 !important;
    margin-top: 8px !important;
    font-size: 0.72rem !important;
  }
}

:root {
  --vibra-purple: #7c3aed;
  --vibra-indigo: #4f46e5;
  --vibra-light-purple: #a78bfa;
  --vibra-pink: #ec4899;
  --vibra-dark: #0f0b2d;
  --vibra-dark-secondary: #17113f;
  --vibra-text: #ffffff;
  --vibra-muted: #b8b4d1;
}

.vibra-footer {
  position: relative;
  width: 100%;
  margin-top: 48px;
  padding: 32px;
  overflow: hidden;

  color: var(--vibra-text);

  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(124, 58, 237, 0.24),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      var(--vibra-dark) 0%,
      var(--vibra-dark-secondary) 55%,
      #121044 100%
    );

  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 28px 28px 0 0;

  box-shadow:
    0 -12px 40px rgba(79, 70, 229, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);

  isolation: isolate;
}

.vibra-footer__content {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;

  width: min(1200px, 100%);
  min-height: 150px;
  margin: 0 auto;
}

.vibra-footer__message {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.vibra-footer__message h2 {
  margin: 0 0 10px;

  font-family: "Inter", "Poppins", sans-serif;
  font-size: clamp(1.45rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.04em;
}

.vibra-footer__message h2 strong {
  display: block;
  color: transparent;

  background: linear-gradient(
    90deg,
    var(--vibra-light-purple),
    #c084fc,
    #818cf8
  );

  background-clip: text;
  -webkit-background-clip: text;
}

.vibra-footer__message p {
  margin: 0;

  color: var(--vibra-muted);

  font-family: "Inter", "Poppins", sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
}

.vibra-footer__message p span {
  display: block;
  color: #ddd6fe;
  font-weight: 600;
}

/* ?cone circular com pequenas barras de ?udio */
.vibra-footer__icon {
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;

  width: 68px;
  height: 68px;

  background:
    linear-gradient(var(--vibra-dark), var(--vibra-dark)) padding-box,
    linear-gradient(
      135deg,
      var(--vibra-purple),
      var(--vibra-indigo),
      var(--vibra-pink)
    ) border-box;

  border: 2px solid transparent;
  border-radius: 50%;

  box-shadow:
    0 0 24px rgba(124, 58, 237, 0.3),
    inset 0 0 20px rgba(124, 58, 237, 0.1);
}

.vibra-footer__icon span {
  width: 4px;
  min-height: 10px;

  background: linear-gradient(
    180deg,
    #c084fc,
    var(--vibra-purple),
    #60a5fa
  );

  border-radius: 999px;

  animation: vibra-icon-wave 1.1s ease-in-out infinite alternate;
}

.vibra-footer__icon span:nth-child(1),
.vibra-footer__icon span:nth-child(5) {
  height: 14px;
}

.vibra-footer__icon span:nth-child(2),
.vibra-footer__icon span:nth-child(4) {
  height: 25px;
  animation-delay: -0.2s;
}

.vibra-footer__icon span:nth-child(3) {
  height: 36px;
  animation-delay: -0.4s;
}

/* Onda sonora principal */
.vibra-wave {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, 0.5vw, 7px);

  width: min(480px, 45vw);
  height: 125px;
  padding: 12px;

  border-radius: 24px;
}

.vibra-wave::before {
  content: "";

  position: absolute;
  top: 50%;
  left: 0;

  width: 100%;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(167, 139, 250, 0.25),
    transparent
  );
}

.vibra-wave::after {
  content: "";

  position: absolute;
  inset: 20% 5%;

  background: linear-gradient(
    90deg,
    rgba(79, 70, 229, 0.15),
    rgba(236, 72, 153, 0.12),
    rgba(96, 165, 250, 0.12)
  );

  border-radius: 50%;
  filter: blur(25px);
  pointer-events: none;
}

.vibra-wave span {
  position: relative;
  z-index: 2;

  width: clamp(4px, 0.6vw, 7px);
  height: var(--height);

  min-height: 10px;
  max-height: 100%;

  background: linear-gradient(
    180deg,
    #e879f9 0%,
    #a855f7 32%,
    #7c3aed 62%,
    #4f46e5 82%,
    #60a5fa 100%
  );

  border-radius: 999px;

  box-shadow:
    0 0 8px rgba(168, 85, 247, 0.65),
    0 0 18px rgba(79, 70, 229, 0.3);

  transform-origin: center;

  animation: vibra-sound-wave 1.25s ease-in-out infinite;
  animation-delay: var(--delay);
}

/* Brilho superior nas barras */
.vibra-wave span::after {
  content: "";

  position: absolute;
  top: 3px;
  left: 50%;

  width: 45%;
  height: 35%;

  background: rgba(255, 255, 255, 0.35);
  border-radius: inherit;

  filter: blur(1px);
  transform: translateX(-50%);
}

.vibra-footer__bottom {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  width: min(1200px, 100%);
  margin: 26px auto 0;
  padding-top: 20px;

  color: rgba(221, 214, 254, 0.6);

  font-family: "Inter", "Poppins", sans-serif;
  font-size: 0.78rem;

  border-top: 1px solid rgba(167, 139, 250, 0.12);
}

/* Luzes decorativas */
.vibra-footer__glow {
  position: absolute;
  z-index: 0;

  width: 280px;
  height: 280px;

  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}

.vibra-footer__glow--left {
  bottom: -180px;
  left: -100px;
  background: rgba(124, 58, 237, 0.28);
}

.vibra-footer__glow--right {
  top: -180px;
  right: -80px;
  background: rgba(79, 70, 229, 0.28);
}

/* Animações */
@keyframes vibra-sound-wave {
  0%,
  100% {
    transform: scaleY(0.55);
    opacity: 0.68;
  }

  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

@keyframes vibra-icon-wave {
  from {
    transform: scaleY(0.5);
    opacity: 0.65;
  }

  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

/* Tablet e celular */
@media (max-width: 768px) {
  .vibra-footer {
    margin-top: 32px;
    padding: 28px 20px 22px;
    border-radius: 24px 24px 0 0;
  }

  .vibra-footer__content {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .vibra-footer__message {
    align-items: flex-start;
  }

  .vibra-footer__icon {
    width: 56px;
    height: 56px;
  }

  .vibra-wave {
    width: 100%;
    height: 100px;
    padding-inline: 0;
  }

  .vibra-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

@media (max-width: 480px) {
  .vibra-footer__message {
    gap: 14px;
  }

  .vibra-footer__message h2 {
    font-size: 1.4rem;
  }

  .vibra-footer__message p {
    font-size: 0.85rem;
  }

  .vibra-wave {
    gap: 3px;
    height: 82px;
  }

  .vibra-wave span {
    width: 4px;
  }
}

/* Acessibilidade: desativa animações quando solicitado */
@media (prefers-reduced-motion: reduce) {
  .vibra-wave span,
  .vibra-footer__icon span {
    animation: none;
  }
}

/* Ajuste do rodap? Vibra: t?tulo compacto em uma linha no desktop */
@media (min-width: 769px) {
  .vibra-footer {
    padding: 24px 32px;
  }

  .vibra-footer__content {
    min-height: 116px;
  }

  .vibra-footer__message h2 {
    font-size: clamp(1.15rem, 1.75vw, 1.55rem);
    line-height: 1.2;
    white-space: nowrap;
  }

  .vibra-footer__message h2 strong {
    display: inline;
  }

  .vibra-footer__message p {
    font-size: 0.88rem;
  }

  .vibra-footer__bottom {
    margin-top: 18px;
  }
}

/* Refinamento da home Vibra conforme refer?ncia desktop compacta */
:root {
  --vibra-home-max-width: 1500px;
  --vibra-home-page-gutter: 48px;
}

.app-shell.is-home-active {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  width: calc(100% - var(--vibra-home-page-gutter)) !important;
  max-width: var(--vibra-home-max-width) !important;
  margin: 0 auto !important;
  padding: 14px 0 0 !important;
}

.app-shell.is-home-active .top-session {
  min-height: 62px !important;
  padding: 9px 16px !important;
  margin: 0 0 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border-radius: 18px !important;
}

.app-shell.is-home-active .top-session .nav-session-user,
.app-shell.is-home-active .top-session .plan-badge,
.app-shell.is-home-active .top-session .subscription-status-text,
.app-shell.is-home-active .top-session .plan-action-button,
.app-shell.is-home-active .top-session .theme-switch,
.app-shell.is-home-active .top-session .nav-logout-button {
  align-self: center !important;
}

.app-shell.is-home-active .top-session .plan-action-button,
.app-shell.is-home-active .top-session .nav-logout-button {
  min-height: 36px !important;
  padding-block: 0 !important;
  padding-inline: 14px !important;
}

.app-shell.is-home-active .vibra-home {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.app-shell.is-home-active .vibra-home-top {
  min-height: 62px !important;
  padding: 10px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-radius: 18px !important;
}

.app-shell.is-home-active .vibra-logo-mark,
.app-shell.is-home-active .vibra-logo-mark svg {
  width: 34px !important;
  height: 34px !important;
}

.app-shell.is-home-active .vibra-logo-text {
  font-size: 1.55rem !important;
  line-height: 1 !important;
}

.app-shell.is-home-active .vibra-top-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.app-shell.is-home-active .vibra-plus-pill,
.app-shell.is-home-active .vibra-manage-button {
  min-height: 32px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 10px !important;
  font-size: 0.72rem !important;
  line-height: 1 !important;
}

.app-shell.is-home-active .vibra-icon-button,
.app-shell.is-home-active .vibra-avatar {
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.app-shell.is-home-active .vibra-avatar img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
}

.app-shell.is-home-active .vibra-home .hero {
  min-height: 292px !important;
  padding: 34px clamp(34px, 3.4vw, 48px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.85fr) !important;
  align-items: center !important;
  gap: clamp(26px, 4vw, 64px) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
}

.app-shell.is-home-active .vibra-home .hero-copy {
  width: 100% !important;
  max-width: 820px !important;
  gap: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.app-shell.is-home-active .vibra-home .hero-copy::before {
  width: max-content !important;
  margin: 0 !important;
  padding: 7px 11px !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
}

.app-shell.is-home-active .vibra-home .hero-brand-row {
  margin: 0 !important;
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
}

.app-shell.is-home-active .vibra-home .hero-brand {
  width: 34px !important;
  height: 34px !important;
}

.app-shell.is-home-active .vibra-home .hero-wordmark {
  font-size: 1.55rem !important;
  line-height: 1 !important;
}

.app-shell.is-home-active .vibra-home .hero h1 {
  max-width: 18.5ch !important;
  margin: 0 !important;
  font-size: clamp(38px, 3.3vw, 62px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.04em !important;
}

.app-shell.is-home-active .vibra-home .hero h1 strong {
  color: #7c3aed !important;
}

.app-shell.is-home-active .vibra-home .hero .subtitle {
  max-width: 66ch !important;
  margin: 0 !important;
  font-size: clamp(0.94rem, 1vw, 1.05rem) !important;
  line-height: 1.45 !important;
}

.app-shell.is-home-active .vibra-home .hero-mascot {
  justify-self: center !important;
  align-self: center !important;
  width: min(100%, 390px) !important;
  max-height: 280px !important;
  object-fit: contain !important;
  margin: 0 !important;
}

.app-shell.is-home-active .vibra-home > .hero-source-box {
  min-height: 58px !important;
  padding: 0 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  border-radius: 18px !important;
}

.app-shell.is-home-active .vibra-home > .hero-source-box .hero-view-context {
  flex: 1 1 auto !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 0 56px !important;
  display: flex !important;
  align-items: center !important;
  color: #27213f !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.app-shell.is-home-active .vibra-home > .hero-source-box::before,
.app-shell.is-home-active .vibra-home > .hero-source-box::after {
  top: 50% !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  transform: translateY(-50%) !important;
}

.app-shell.is-home-active .vibra-home > .hero-source-box::before {
  left: 18px !important;
}

.app-shell.is-home-active .vibra-home > .hero-source-box::after {
  right: calc(min(360px, 32vw) + 34px) !important;
}

.app-shell.is-home-active .vibra-home .source-picker {
  flex: 0 0 min(360px, 32vw) !important;
  display: flex !important;
  align-items: center !important;
}

.app-shell.is-home-active .vibra-home > .hero-source-box .source-picker-button {
  width: 100% !important;
  min-height: 54px !important;
  padding: 0 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-radius: 15px !important;
  font-size: 0.96rem !important;
  line-height: 1.1 !important;
}

.app-shell.is-home-active .vibra-home > .hero-panel {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin: 0 !important;
}

.app-shell.is-home-active .vibra-home > .hero-panel > div,
.app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(2),
.app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(3) {
  position: relative !important;
  min-height: 118px !important;
  height: 100% !important;
  padding: 20px 26px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 4px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(110, 70, 255, 0.12) !important;
  border-bottom: 0 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 12px 32px rgba(43, 32, 90, 0.08) !important;
  overflow: hidden !important;
}

.app-shell.is-home-active .vibra-home > .hero-panel > div::before,
.app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(2)::before,
.app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(3)::before {
  content: "" !important;
  position: absolute !important;
  top: 14px !important;
  bottom: 14px !important;
  left: 0 !important;
  width: 4px !important;
  height: auto !important;
  border-radius: 0 8px 8px 0 !important;
  background: linear-gradient(180deg, #7962ff, #5d3df5) !important;
  box-shadow: none !important;
}

.app-shell.is-home-active .vibra-home > .hero-panel > div::after,
.app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(2)::after,
.app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(3)::after {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 0 !important;
  height: 3px !important;
  border-radius: 8px 8px 0 0 !important;
  background: linear-gradient(90deg, #633df5, #914cff) !important;
}

.app-shell.is-home-active .vibra-home > .hero-panel .stat-value,
.app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(2) .stat-value,
.app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(3) .stat-value {
  order: 1 !important;
  color: #171337 !important;
  font-size: clamp(1.85rem, 2.4vw, 2.45rem) !important;
  font-weight: 950 !important;
  line-height: 0.95 !important;
}

.app-shell.is-home-active .vibra-home > .hero-panel .stat-label {
  order: 2 !important;
  color: #633df5 !important;
  font-size: 0.76rem !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.app-shell.is-home-active .vibra-home > .hero-panel small {
  order: 3 !important;
  margin: 4px 0 0 !important;
  color: #6f6985 !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

.app-shell.is-home-active .vibra-footer {
  width: 100% !important;
  margin: 14px 0 0 !important;
  padding: 20px 28px !important;
  border-radius: 22px 22px 0 0 !important;
}

.app-shell.is-home-active .vibra-footer__content {
  width: min(1320px, 100%) !important;
  min-height: 94px !important;
  gap: 32px !important;
}

.app-shell.is-home-active .vibra-footer__message {
  gap: 16px !important;
}

.app-shell.is-home-active .vibra-footer__icon {
  width: 52px !important;
  height: 52px !important;
}

.app-shell.is-home-active .vibra-footer__message h2 {
  margin: 0 0 6px !important;
  font-size: clamp(1.05rem, 1.35vw, 1.35rem) !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

.app-shell.is-home-active .vibra-footer__message h2 strong {
  display: inline !important;
}

.app-shell.is-home-active .vibra-footer__message p {
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
}

.app-shell.is-home-active .vibra-wave {
  width: min(520px, 42vw) !important;
  height: 82px !important;
  padding: 8px !important;
}

.app-shell.is-home-active .vibra-footer__bottom {
  width: min(1320px, 100%) !important;
  margin-top: 12px !important;
  padding-top: 12px !important;
}

@media (min-width: 1200px) and (max-height: 920px) {
  .app-shell.is-home-active {
    padding-top: 10px !important;
  }

  .app-shell.is-home-active .top-session,
  .app-shell.is-home-active .vibra-home-top {
    min-height: 58px !important;
    margin-bottom: 12px !important;
    padding-block: 8px !important;
  }

  .app-shell.is-home-active .vibra-home {
    gap: 14px !important;
  }

  .app-shell.is-home-active .vibra-home .hero {
    min-height: 258px !important;
    padding-block: 28px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-mascot {
    width: min(100%, 350px) !important;
    max-height: 240px !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-panel > div {
    min-height: 106px !important;
    padding-block: 18px 16px !important;
  }

  .app-shell.is-home-active .vibra-footer {
    padding-block: 18px !important;
  }

  .app-shell.is-home-active .vibra-footer__content {
    min-height: 82px !important;
  }

  .app-shell.is-home-active .vibra-wave {
    height: 74px !important;
  }
}

@media (max-width: 900px) {
  :root {
    --vibra-home-page-gutter: 32px;
  }

  .app-shell.is-home-active {
    width: calc(100% - var(--vibra-home-page-gutter)) !important;
    padding-top: 12px !important;
  }

  .app-shell.is-home-active .vibra-home .hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding: 28px 22px !important;
    gap: 22px !important;
  }

  .app-shell.is-home-active .vibra-home .hero h1 {
    max-width: 16ch !important;
    font-size: clamp(2.2rem, 9vw, 3.2rem) !important;
  }

  .app-shell.is-home-active .vibra-home .hero-mascot {
    width: min(78vw, 300px) !important;
    max-height: 230px !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-source-box {
    min-height: auto !important;
    padding: 14px !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-source-box .hero-view-context {
    min-height: 42px !important;
    padding: 0 48px !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-source-box::after {
    right: 14px !important;
  }

  .app-shell.is-home-active .vibra-home .source-picker {
    flex: 1 1 auto !important;
    width: 100% !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-panel {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .app-shell.is-home-active .vibra-footer__content {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
  }

  .app-shell.is-home-active .vibra-footer__message h2 {
    white-space: normal !important;
  }

  .app-shell.is-home-active .vibra-wave {
    width: 100% !important;
  }
}

@media (max-width: 560px) {
  :root {
    --vibra-home-page-gutter: 24px;
  }

  .app-shell.is-home-active .vibra-home-top,
  .app-shell.is-home-active .top-session {
    flex-wrap: wrap !important;
    height: auto !important;
  }

  .app-shell.is-home-active .vibra-top-actions {
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
  }

  .app-shell.is-home-active .vibra-home .hero h1 {
    max-width: 100% !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-source-box .hero-view-context {
    padding-right: 14px !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-source-box::after {
    display: none !important;
  }
}

/* Corre??o: a home desktop deve respeitar a sidebar fixa */
@media (min-width: 901px) {
  :root {
    --vibra-sidebar-width: 236px;
    --vibra-desktop-gap: 24px;
  }

  .app-shell.is-home-active {
    width: min(
      var(--vibra-home-max-width),
      calc(100vw - var(--vibra-sidebar-width) - (var(--vibra-desktop-gap) * 2))
    ) !important;
    max-width: min(
      var(--vibra-home-max-width),
      calc(100vw - var(--vibra-sidebar-width) - (var(--vibra-desktop-gap) * 2))
    ) !important;
    margin-left: calc(var(--vibra-sidebar-width) + var(--vibra-desktop-gap)) !important;
    margin-right: var(--vibra-desktop-gap) !important;
  }
}

@media (min-width: 1600px) {
  .app-shell.is-home-active {
    width: min(
      var(--vibra-home-max-width),
      calc(100vw - var(--vibra-sidebar-width) - 64px)
    ) !important;
    max-width: min(
      var(--vibra-home-max-width),
      calc(100vw - var(--vibra-sidebar-width) - 64px)
    ) !important;
    margin-left: calc(var(--vibra-sidebar-width) + 32px) !important;
    margin-right: 32px !important;
  }
}

/* Home desktop: filtro e indicadores na mesma linha */
@media (min-width: 901px) {
  .app-shell.is-home-active .vibra-home {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "top top"
      "hero hero"
      "source stats" !important;
    align-items: stretch !important;
    gap: 16px 18px !important;
  }

  .app-shell.is-home-active .vibra-home > .vibra-home-top {
    grid-area: top !important;
  }

  .app-shell.is-home-active .vibra-home > .hero {
    grid-area: hero !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-source-box {
    grid-area: source !important;
    width: 100% !important;
    min-height: 118px !important;
    margin: 0 !important;
    padding: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-source-box .hero-view-context {
    min-height: 54px !important;
    padding: 0 50px !important;
    flex: 1 1 52% !important;
  }

  .app-shell.is-home-active .vibra-home .source-picker {
    flex: 1 1 48% !important;
    min-width: 220px !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-source-box::after {
    right: calc(48% + 26px) !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-panel {
    grid-area: stats !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-panel > div,
  .app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(2),
  .app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(3) {
    min-height: 118px !important;
    padding: 18px 18px 16px !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-panel .stat-value,
  .app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(2) .stat-value,
  .app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(3) .stat-value {
    font-size: clamp(1.6rem, 2vw, 2.1rem) !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-panel .stat-label {
    font-size: 0.68rem !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-panel small {
    font-size: 0.74rem !important;
  }
}

/* Compacta??o final da home: tudo vis?vel no desktop sem scroll desnecess?rio */
@media (min-width: 901px) {
  :root {
    --vibra-sidebar-width: 236px;
    --vibra-desktop-gap: 16px;
    --vibra-home-max-width: 1400px;
  }

  .app-shell.is-home-active {
    width: min(
      var(--vibra-home-max-width),
      calc(100vw - var(--vibra-sidebar-width) - (var(--vibra-desktop-gap) * 2))
    ) !important;
    max-width: min(
      var(--vibra-home-max-width),
      calc(100vw - var(--vibra-sidebar-width) - (var(--vibra-desktop-gap) * 2))
    ) !important;
    min-height: 100vh !important;
    margin-left: calc(var(--vibra-sidebar-width) + var(--vibra-desktop-gap)) !important;
    margin-right: var(--vibra-desktop-gap) !important;
    padding-top: 8px !important;
  }

  .app-shell.is-home-active .vibra-home {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .app-shell.is-home-active .top-session {
    min-height: 56px !important;
    height: 56px !important;
    padding: 0 16px !important;
    margin: 0 0 12px !important;
    align-items: center !important;
  }

  .app-shell.is-home-active .vibra-home-top {
    min-height: 56px !important;
    height: 56px !important;
    padding: 0 16px !important;
    align-items: center !important;
    border-radius: 18px !important;
  }

  .app-shell.is-home-active .vibra-logo-mark,
  .app-shell.is-home-active .vibra-logo-mark svg,
  .app-shell.is-home-active .vibra-icon-button,
  .app-shell.is-home-active .vibra-avatar {
    width: 32px !important;
    height: 32px !important;
  }

  .app-shell.is-home-active .vibra-logo-text {
    font-size: 1.45rem !important;
  }

  .app-shell.is-home-active .vibra-plus-pill,
  .app-shell.is-home-active .vibra-manage-button,
  .app-shell.is-home-active .top-session .plan-action-button,
  .app-shell.is-home-active .top-session .nav-logout-button {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  .app-shell.is-home-active .vibra-home .hero {
    min-height: 160px !important;
    height: 160px !important;
    padding: 22px 36px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.55fr) minmax(220px, 0.45fr) !important;
    align-items: center !important;
    gap: 28px !important;
    border-radius: 18px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-copy {
    gap: 8px !important;
    max-width: none !important;
  }

  .app-shell.is-home-active .vibra-home .hero-copy::before {
    padding: 5px 9px !important;
    font-size: 0.64rem !important;
    line-height: 1 !important;
  }

  .app-shell.is-home-active .vibra-home .hero-brand-row {
    display: none !important;
  }

  .app-shell.is-home-active .vibra-home .hero h1 {
    max-width: none !important;
    margin: 0 !important;
    font-size: clamp(1.75rem, 2.15vw, 2.55rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.035em !important;
  }

  .app-shell.is-home-active .vibra-home .hero .subtitle {
    max-width: 78ch !important;
    margin: 0 !important;
    font-size: 0.92rem !important;
    line-height: 1.35 !important;
  }

  .app-shell.is-home-active .vibra-home .hero-mascot {
    width: min(100%, 210px) !important;
    max-height: 132px !important;
    justify-self: center !important;
    object-fit: contain !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-source-box {
    width: 100% !important;
    min-height: 64px !important;
    height: 64px !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    border-radius: 18px !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-source-box .hero-view-context {
    min-height: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 0 0 52px !important;
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    font-size: 0.92rem !important;
    line-height: 1.15 !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-source-box::before,
  .app-shell.is-home-active .vibra-home > .hero-source-box::after {
    top: 50% !important;
    width: 40px !important;
    height: 40px !important;
    transform: translateY(-50%) !important;
    border-radius: 12px !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-source-box::before {
    left: 16px !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-source-box::after {
    right: 16px !important;
  }

  .app-shell.is-home-active .vibra-home .source-picker {
    flex: 0 0 min(44%, 620px) !important;
    min-width: 280px !important;
    display: flex !important;
    align-items: center !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-source-box .source-picker-button {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 46px 0 18px !important;
    align-items: center !important;
    border-radius: 14px !important;
    font-size: 0.9rem !important;
    line-height: 1 !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-panel {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin: 0 !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-panel > div,
  .app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(2),
  .app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(3) {
    min-height: 110px !important;
    height: 110px !important;
    padding: 16px 22px !important;
    border-radius: 18px !important;
    gap: 3px !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-panel .stat-value,
  .app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(2) .stat-value,
  .app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(3) .stat-value {
    font-size: 1.5rem !important;
    line-height: 1 !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-panel .stat-label {
    font-size: 0.74rem !important;
    line-height: 1.1 !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-panel small {
    font-size: 0.76rem !important;
    line-height: 1.15 !important;
  }

  .app-shell.is-home-active .vibra-footer {
    min-height: 80px !important;
    height: 80px !important;
    margin: 20px 0 0 !important;
    padding: 16px 24px !important;
    border-radius: 16px !important;
  }

  .app-shell.is-home-active .vibra-footer__content {
    min-height: 48px !important;
    height: 48px !important;
    width: 100% !important;
    gap: 18px !important;
  }

  .app-shell.is-home-active .vibra-footer__icon {
    width: 40px !important;
    height: 40px !important;
  }

  .app-shell.is-home-active .vibra-footer__message h2 {
    margin: 0 0 3px !important;
    font-size: 1rem !important;
    line-height: 1.1 !important;
  }

  .app-shell.is-home-active .vibra-footer__message p {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
  }

  .app-shell.is-home-active .vibra-wave {
    width: min(520px, 45vw) !important;
    height: 46px !important;
    padding: 0 !important;
  }

  .app-shell.is-home-active .vibra-footer__bottom {
    display: none !important;
  }
}

@media (min-width: 1200px) and (max-height: 820px) {
  .app-shell.is-home-active .vibra-home {
    gap: 10px !important;
  }

  .app-shell.is-home-active .vibra-home .hero {
    min-height: 148px !important;
    height: 148px !important;
    padding-block: 18px !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-panel > div,
  .app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(2),
  .app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(3) {
    min-height: 104px !important;
    height: 104px !important;
  }

  .app-shell.is-home-active .vibra-footer {
    margin-top: 16px !important;
  }
}

/* Corre??o: seletor de acervos dentro do card de filtro compacto */
@media (min-width: 901px) {
  .app-shell.is-home-active .vibra-home > .hero-source-box {
    position: relative !important;
    overflow: visible !important;
  }

  .app-shell.is-home-active .vibra-home .source-picker {
    position: static !important;
    flex: 0 0 min(42%, 520px) !important;
    min-width: 260px !important;
    max-width: 520px !important;
    height: 40px !important;
    margin: 0 52px 0 0 !important;
    align-self: center !important;
    z-index: 3 !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-source-box .source-picker-button {
    position: static !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    transform: none !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-source-box .source-picker-button::after {
    margin-left: auto !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-source-box .hero-view-context {
    min-width: 0 !important;
    padding-right: 16px !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-source-box::after {
    right: 16px !important;
  }
}

/* Corre??o forte: bot?o Todos acervos preso dentro da faixa do filtro */
@media (min-width: 901px) {
  .app-shell.is-home-active .vibra-home > .hero-source-box {
    display: grid !important;
    grid-template-columns: minmax(260px, 1fr) minmax(280px, 520px) 40px !important;
    grid-template-rows: 40px !important;
    align-items: center !important;
    column-gap: 16px !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 12px 16px !important;
    overflow: visible !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-source-box .hero-view-context {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 0 0 52px !important;
    align-self: center !important;
  }

  .app-shell.is-home-active .vibra-home .source-picker,
  .app-shell.is-home-active .vibra-home > .hero-source-box .source-picker {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    align-self: center !important;
    z-index: 4 !important;
  }

  .app-shell.is-home-active .vibra-home .source-picker-button,
  .app-shell.is-home-active .vibra-home > .hero-source-box .source-picker-button {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border-radius: 14px !important;
    line-height: 1 !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-source-box::after {
    grid-column: 3 !important;
    grid-row: 1 !important;
    position: static !important;
    transform: none !important;
    justify-self: end !important;
    align-self: center !important;
  }

  .app-shell.is-home-active .vibra-home .source-picker-panel {
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
  }
}

/* Corre??o de intera??o do seletor de acervos */
.app-shell.is-home-active .vibra-home > .hero-source-box::before,
.app-shell.is-home-active .vibra-home > .hero-source-box::after {
  pointer-events: none !important;
}

.app-shell.is-home-active .vibra-home > .hero-source-box {
  z-index: 20 !important;
}

.app-shell.is-home-active .vibra-home .source-picker {
  pointer-events: auto !important;
  z-index: 30 !important;
}

.app-shell.is-home-active .vibra-home .source-picker-button,
.app-shell.is-home-active .vibra-home > .hero-source-box .source-picker-button {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 31 !important;
}

.app-shell.is-home-active .vibra-home .source-picker-panel,
.app-shell.is-home-active .vibra-home .source-picker-panel.is-floating {
  pointer-events: auto !important;
  z-index: 9999 !important;
}

/* Cards de indicadores compactos com ?cones */
.app-shell.is-home-active .vibra-home > .hero-panel {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.app-shell.is-home-active .vibra-home > .hero-panel > div,
.app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(2),
.app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(3) {
  position: relative !important;
  min-width: 0 !important;
  min-height: 82px !important;
  height: 82px !important;
  padding: 12px 14px !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  align-content: center !important;
  align-items: center !important;
  column-gap: 9px !important;
  row-gap: 2px !important;
  border: 1px solid rgba(124, 58, 237, 0.10) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 5px 16px rgba(45, 31, 87, 0.06) !important;
  overflow: hidden !important;
}

.app-shell.is-home-active .vibra-home > .hero-panel > div::before,
.app-shell.is-home-active .vibra-home > .hero-panel > div::after,
.app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(2)::before,
.app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(2)::after,
.app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(3)::before,
.app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(3)::after {
  content: none !important;
  display: none !important;
}

.app-shell.is-home-active .vibra-home .stat-card-icon {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.22) !important;
}

.app-shell.is-home-active .vibra-home .stat-card-icon svg {
  width: 15px !important;
  height: 15px !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.app-shell.is-home-active .vibra-home > .hero-panel .stat-value,
.app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(2) .stat-value,
.app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(3) .stat-value {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: #19142f !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

.app-shell.is-home-active .vibra-home > .hero-panel .stat-label {
  grid-column: 2 !important;
  grid-row: 2 !important;
  min-width: 0 !important;
  margin: 2px 0 0 !important;
  color: #6d28d9 !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

.app-shell.is-home-active .vibra-home > .hero-panel small {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  min-width: 0 !important;
  margin: 4px 0 0 !important;
  color: #77718c !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
}

@media (max-width: 900px) {
  .app-shell.is-home-active .vibra-home > .hero-panel {
    grid-template-columns: 1fr !important;
  }
}

/* Cabeçalho unificado Vibra e notificações no topo direito */
.notifications-hub > .notification-toggle {
  display: none !important;
}

.app-shell.is-home-active .vibra-theme-switch,
.vibra-theme-switch {
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  border: 1px solid rgba(124, 58, 237, 0.14) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
  cursor: pointer !important;
}

.vibra-theme-switch .theme-switch-label {
  color: #4c426b !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.vibra-theme-switch .theme-switch-track {
  width: 34px !important;
  height: 18px !important;
}

.vibra-theme-switch .theme-switch-thumb {
  width: 14px !important;
  height: 14px !important;
}

.app-shell.is-home-active .vibra-icon-button#notificationToggle,
.vibra-icon-button#notificationToggle {
  position: relative !important;
  border: 0 !important;
  cursor: pointer !important;
  flex: 0 0 auto !important;
}

.vibra-icon-button#notificationToggle .nav-alert-badge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: #ef4444 !important;
  font-size: 0.62rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.vibra-icon-button#notificationToggle .nav-alert-badge.is-hidden {
  display: none !important;
}

.notifications-hub {
  position: relative !important;
  z-index: 300 !important;
}

.notifications-hub .notifications-panel {
  position: fixed !important;
  top: 82px !important;
  right: 24px !important;
  width: min(380px, calc(100vw - 32px)) !important;
  max-height: min(560px, calc(100vh - 110px)) !important;
  overflow: auto !important;
  z-index: 10000 !important;
}

.app-shell.is-home-active :where(
  .indicators-head,
  .setlist-head,
  .saved-head,
  .share-head,
  .section-head,
  .music-form-head,
  .lyrics-head,
  .tuner-head,
  .chord-head,
  .batucada-head,
  .library-head
) {
  min-height: 56px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  border: 1px solid rgba(124, 58, 237, 0.14) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 8% 50%, rgba(124, 58, 237, 0.10), transparent 0 38px, transparent 39px),
    rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 12px 32px rgba(45, 31, 87, 0.08) !important;
}

.app-shell.is-home-active :where(
  .indicators-head,
  .setlist-head,
  .saved-head,
  .share-head,
  .section-head,
  .music-form-head,
  .lyrics-head,
  .tuner-head,
  .chord-head,
  .batucada-head,
  .library-head
) > div:first-child {
  min-width: 0 !important;
}

.app-shell.is-home-active :where(
  .indicators-head,
  .setlist-head,
  .saved-head,
  .share-head,
  .section-head,
  .music-form-head,
  .lyrics-head,
  .tuner-head,
  .chord-head,
  .batucada-head,
  .library-head
) .eyebrow {
  margin: 0 0 2px !important;
  color: #7c3aed !important;
  font-size: 0.64rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
}

.app-shell.is-home-active :where(
  .indicators-head,
  .setlist-head,
  .saved-head,
  .share-head,
  .section-head,
  .music-form-head,
  .lyrics-head,
  .tuner-head,
  .chord-head,
  .batucada-head,
  .library-head
) :where(h2, h3) {
  margin: 0 !important;
  color: #19142f !important;
  font-size: clamp(1.1rem, 1.35vw, 1.45rem) !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
}

.app-shell.is-home-active :where(
  .indicators-head,
  .setlist-head,
  .saved-head,
  .share-head,
  .section-head,
  .music-form-head,
  .lyrics-head,
  .tuner-head,
  .chord-head,
  .batucada-head,
  .library-head
) span {
  color: #746d8f !important;
  font-size: 0.8rem !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

body[data-theme="dark"] .vibra-theme-switch {
  border-color: rgba(167, 139, 250, 0.30) !important;
  background: rgba(15, 11, 45, 0.76) !important;
}

body[data-theme="dark"] .vibra-theme-switch .theme-switch-label {
  color: #ddd6fe !important;
}

body[data-theme="dark"] .app-shell.is-home-active :where(
  .indicators-head,
  .setlist-head,
  .saved-head,
  .share-head,
  .section-head,
  .music-form-head,
  .lyrics-head,
  .tuner-head,
  .chord-head,
  .batucada-head,
  .library-head
) {
  border-color: rgba(167, 139, 250, 0.22) !important;
  background:
    radial-gradient(circle at 8% 50%, rgba(167, 139, 250, 0.12), transparent 0 38px, transparent 39px),
    rgba(15, 11, 45, 0.92) !important;
}

body[data-theme="dark"] .app-shell.is-home-active :where(
  .indicators-head,
  .setlist-head,
  .saved-head,
  .share-head,
  .section-head,
  .music-form-head,
  .lyrics-head,
  .tuner-head,
  .chord-head,
  .batucada-head,
  .library-head
) :where(h2, h3) {
  color: #ffffff !important;
}

@media (max-width: 900px) {
  .vibra-theme-switch {
    order: 5 !important;
  }

  .notifications-hub .notifications-panel {
    top: 76px !important;
    right: 12px !important;
  }
}

/* Cabeçalhos padronizados em todas as seções */
.app-shell :where(
  .indicators-head,
  .setlist-head,
  .saved-head,
  .share-head,
  .section-head,
  .music-form-head,
  .lyrics-head,
  .tuner-head,
  .chord-head,
  .batucada-head,
  .library-head
) {
  min-height: 56px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  border: 1px solid rgba(124, 58, 237, 0.14) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 8% 50%, rgba(124, 58, 237, 0.10), transparent 0 38px, transparent 39px),
    rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 12px 32px rgba(45, 31, 87, 0.08) !important;
}

.app-shell :where(
  .indicators-head,
  .setlist-head,
  .saved-head,
  .share-head,
  .section-head,
  .music-form-head,
  .lyrics-head,
  .tuner-head,
  .chord-head,
  .batucada-head,
  .library-head
) .eyebrow {
  margin: 0 0 2px !important;
  color: #7c3aed !important;
  font-size: 0.64rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
}

.app-shell :where(
  .indicators-head,
  .setlist-head,
  .saved-head,
  .share-head,
  .section-head,
  .music-form-head,
  .lyrics-head,
  .tuner-head,
  .chord-head,
  .batucada-head,
  .library-head
) :where(h2, h3) {
  margin: 0 !important;
  color: #19142f !important;
  font-size: clamp(1.1rem, 1.35vw, 1.45rem) !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
}

body[data-theme="dark"] .app-shell :where(
  .indicators-head,
  .setlist-head,
  .saved-head,
  .share-head,
  .section-head,
  .music-form-head,
  .lyrics-head,
  .tuner-head,
  .chord-head,
  .batucada-head,
  .library-head
) {
  border-color: rgba(167, 139, 250, 0.22) !important;
  background:
    radial-gradient(circle at 8% 50%, rgba(167, 139, 250, 0.12), transparent 0 38px, transparent 39px),
    rgba(15, 11, 45, 0.92) !important;
}

body[data-theme="dark"] .app-shell :where(
  .indicators-head,
  .setlist-head,
  .saved-head,
  .share-head,
  .section-head,
  .music-form-head,
  .lyrics-head,
  .tuner-head,
  .chord-head,
  .batucada-head,
  .library-head
) :where(h2, h3) {
  color: #ffffff !important;
}

/* Notificações: painel sempre ancorado ? direita do sino do cabeçalho */
.notifications-hub .notifications-panel,
.app-shell .notifications-hub .notifications-panel,
body .notifications-panel#notificationsPanel {
  position: fixed !important;
  top: 72px !important;
  left: auto !important;
  right: max(16px, calc((100vw - min(var(--vibra-home-max-width, 1400px), calc(100vw - 236px - 32px))) / 2)) !important;
  width: min(380px, calc(100vw - 32px)) !important;
  max-height: min(560px, calc(100vh - 96px)) !important;
  transform: none !important;
  z-index: 10000 !important;
}

@media (min-width: 901px) {
  body .notifications-panel#notificationsPanel {
    right: 24px !important;
  }
}

@media (max-width: 900px) {
  body .notifications-panel#notificationsPanel {
    top: 76px !important;
    right: 12px !important;
    left: auto !important;
  }
}

/* Cabeçalho Vibra global em todos os módulos */
.app-shell > .top-session {
  display: none !important;
}

.app-shell > .vibra-app-top {
  width: 100% !important;
  min-height: 56px !important;
  height: 56px !important;
  margin: 0 0 12px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  border: 1px solid rgba(124, 58, 237, 0.14) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 12px 32px rgba(45, 31, 87, 0.08) !important;
  z-index: 350 !important;
}

.app-shell > .vibra-app-top .vibra-logo-lockup,
.app-shell > .vibra-app-top .vibra-top-actions {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

.app-shell > .vibra-app-top .vibra-top-actions {
  gap: 10px !important;
  justify-content: flex-end !important;
}

.app-shell > .vibra-app-top .vibra-logo-mark,
.app-shell > .vibra-app-top .vibra-logo-mark svg,
.app-shell > .vibra-app-top .vibra-icon-button,
.app-shell > .vibra-app-top .vibra-avatar {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
}

.app-shell > .vibra-app-top .vibra-logo-text {
  color: #19142f !important;
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.app-shell > .vibra-app-top .vibra-plus-pill,
.app-shell > .vibra-app-top .vibra-manage-button {
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.app-shell > .vibra-app-top + .app-section {
  margin-top: 0 !important;
}

.app-shell:not(.is-home-active) > .app-section:not(.is-hidden) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

body[data-theme="dark"] .app-shell > .vibra-app-top {
  border-color: rgba(167, 139, 250, 0.24) !important;
  background: rgba(15, 11, 45, 0.92) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28) !important;
}

body[data-theme="dark"] .app-shell > .vibra-app-top .vibra-logo-text {
  color: #ffffff !important;
}

@media (max-width: 900px) {
  .app-shell > .vibra-app-top {
    height: auto !important;
    min-height: 56px !important;
    flex-wrap: wrap !important;
    padding: 10px 12px !important;
  }

  .app-shell > .vibra-app-top .vibra-top-actions {
    flex-wrap: wrap !important;
  }
}

/* Alinhamento de topo: todos os módulos iguais ? página inicial */
.app-shell {
  padding-top: 8px !important;
}

.app-shell:not(.is-home-active) {
  padding-top: 8px !important;
}

.app-shell > .vibra-app-top {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

.app-shell:not(.is-home-active) > .app-section:not(.is-hidden) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.app-shell:not(.is-home-active) > .app-section:not(.is-hidden) > :first-child {
  margin-top: 0 !important;
}

.app-shell:not(.is-home-active) :where(
  .indicators-head,
  .setlist-head,
  .saved-head,
  .share-head,
  .section-head,
  .music-form-head,
  .lyrics-head,
  .tuner-head,
  .chord-head,
  .batucada-head,
  .library-head
) {
  margin-top: 0 !important;
}

/* Rodapé Vibra apenas na página inicial */
.app-shell:not(.is-home-active) > .vibra-footer {
  display: none !important;
}

.app-shell.is-home-active > .vibra-footer {
  display: block !important;
}

/* Espaço entre cabeçalho global e conteúdo dos módulos */
.app-shell:not(.is-home-active) > .vibra-app-top {
  margin-bottom: 14px !important;
}

.app-shell:not(.is-home-active) > .app-section:not(.is-hidden) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.app-shell:not(.is-home-active) > .vibra-app-top + .app-section:not(.is-hidden),
.app-shell:not(.is-home-active) > .vibra-app-top ~ .app-section:not(.is-hidden) {
  margin-top: 0 !important;
}

.app-shell:not(.is-home-active) :where(
  .indicators-head,
  .setlist-head,
  .saved-head,
  .share-head,
  .section-head,
  .music-form-head,
  .lyrics-head,
  .tuner-head,
  .chord-head,
  .batucada-head,
  .library-head
) {
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}

/* Estrutura interna dos módulos: cabeçalho da se??o não colado na section */
.app-shell:not(.is-home-active) > .app-section:not(.is-hidden) {
  box-sizing: border-box !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.app-shell:not(.is-home-active) > .app-section:not(.is-hidden) > :first-child {
  margin-top: 0 !important;
}

.app-shell:not(.is-home-active) :where(
  .indicators-head,
  .setlist-head,
  .saved-head,
  .share-head,
  .section-head,
  .music-form-head,
  .lyrics-head,
  .tuner-head,
  .chord-head,
  .batucada-head,
  .library-head
) {
  margin: 0 !important;
  flex: 0 0 auto !important;
}

.app-shell:not(.is-home-active) :where(
  .toolbar,
  .results-head,
  .song-grid,
  .table-wrap,
  .indicators-grid,
  .setlist,
  .saved-layout,
  .share-grid,
  .event-layout,
  .chord-layout,
  .scale-library-layout,
  .audio-library-list,
  .batucada-controls,
  .metronome-stage
) {
  margin-top: 0 !important;
}

/* Mobile home layout hardening - scoped to phones/tablets only */
@media (max-width: 768px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  .app-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 12px 92px !important;
    overflow-x: hidden !important;
  }

  .app-shell > .vibra-app-top {
    width: 100% !important;
    min-width: 0 !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin: 0 0 9px !important;
    padding: 7px 9px !important;
    border-radius: 15px !important;
    overflow: hidden !important;
  }

  .app-shell > .vibra-app-top .vibra-logo-lockup {
    flex: 0 1 84px !important;
    min-width: 0 !important;
    gap: 6px !important;
  }

  .app-shell > .vibra-app-top .vibra-logo-mark,
  .app-shell > .vibra-app-top .vibra-logo-mark svg {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
  }

  .app-shell > .vibra-app-top .vibra-logo-text {
    min-width: 0 !important;
    font-size: 1.06rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .app-shell > .vibra-app-top .vibra-top-actions {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
  }

  .app-shell > .vibra-app-top .vibra-plus-pill,
  .app-shell > .vibra-app-top .vibra-manage-button {
    height: 25px !important;
    min-height: 25px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    font-size: 8px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .app-shell > .vibra-app-top .vibra-manage-button {
    max-width: 104px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .app-shell > .vibra-app-top .vibra-theme-switch {
    width: 36px !important;
    min-width: 36px !important;
    height: 24px !important;
    padding: 2px !important;
    gap: 0 !important;
    border-radius: 999px !important;
  }

  .app-shell > .vibra-app-top .theme-switch-label {
    display: none !important;
  }

  .app-shell > .vibra-app-top .theme-switch-track {
    width: 32px !important;
    height: 18px !important;
    flex: 0 0 32px !important;
  }

  .app-shell > .vibra-app-top .theme-switch-thumb {
    width: 14px !important;
    height: 14px !important;
  }

  .app-shell > .vibra-app-top .theme-switch-input:checked + .theme-switch-track .theme-switch-thumb {
    transform: translateX(14px) !important;
  }

  .app-shell > .vibra-app-top .vibra-icon-button,
  .app-shell > .vibra-app-top .vibra-avatar {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    flex: 0 0 28px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }

  .app-shell > .vibra-app-top .vibra-icon-button svg {
    width: 14px !important;
    height: 14px !important;
  }

  .app-shell > .vibra-app-top + .app-section,
  .app-shell.is-home-active > .vibra-app-top + .vibra-home {
    margin-top: 0 !important;
  }

  .app-shell.is-home-active .vibra-home {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  .app-shell.is-home-active .vibra-home > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .app-shell.is-home-active .vibra-home .hero {
    position: relative !important;
    display: block !important;
    height: 145px !important;
    min-height: 145px !important;
    max-height: 145px !important;
    padding: 16px 42% 14px 16px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .app-shell.is-home-active .vibra-home .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    justify-content: center !important;
    gap: 5px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-brand-row {
    margin: 0 0 1px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-eyebrow {
    padding: 4px 7px !important;
    border-radius: 7px !important;
    font-size: 8px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .app-shell.is-home-active .vibra-home .hero h1 {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(1.26rem, 5.3vw, 1.68rem) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
  }

  .app-shell.is-home-active .vibra-home .hero .subtitle {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(0.72rem, 3vw, 0.86rem) !important;
    line-height: 1.22 !important;
  }

  .app-shell.is-home-active .vibra-home .hero-mascot {
    position: absolute !important;
    right: 10px !important;
    bottom: 6px !important;
    width: 39% !important;
    max-width: 150px !important;
    min-width: 112px !important;
    height: auto !important;
    max-height: 132px !important;
    object-fit: contain !important;
    margin: 0 !important;
    transform: none !important;
    pointer-events: none !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-source-box {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) 28px !important;
    grid-template-rows: 30px 34px !important;
    align-items: center !important;
    gap: 6px 8px !important;
    min-height: 76px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 9px !important;
    border-radius: 15px !important;
    overflow: visible !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-source-box::before,
  .app-shell.is-home-active .vibra-home > .hero-source-box::after {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 9px !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-source-box::before {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-source-box::after {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-source-box .hero-view-context {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.76rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-source-box .source-picker {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    margin: 0 !important;
    z-index: 35 !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-source-box .source-picker-button {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 36px 0 12px !important;
    border-radius: 12px !important;
    font-size: 0.76rem !important;
    line-height: 1 !important;
    text-align: left !important;
    z-index: 36 !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-source-box .source-picker-panel {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    z-index: 80 !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-panel {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-panel > div,
  .app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(2),
  .app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(3) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 76px !important;
    height: 76px !important;
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    grid-template-rows: 22px 15px 12px !important;
    align-items: center !important;
    gap: 2px 6px !important;
    padding: 8px 6px 7px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-panel .stat-card-icon {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border-radius: 8px !important;
    align-self: start !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-panel .stat-card-icon svg {
    width: 13px !important;
    height: 13px !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-panel .stat-value,
  .app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(2) .stat-value,
  .app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(3) .stat-value {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: clamp(0.92rem, 4vw, 1.18rem) !important;
    line-height: 1 !important;
    font-weight: 800 !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-panel .stat-label {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: clamp(0.42rem, 1.95vw, 0.58rem) !important;
    line-height: 1.05 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-panel small {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: clamp(0.42rem, 1.85vw, 0.54rem) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .app-shell.is-home-active > .vibra-footer {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 84px !important;
    min-height: 84px !important;
    margin: 2px 0 0 !important;
    padding: 10px 12px !important;
    border-radius: 15px !important;
    overflow: hidden !important;
  }

  .app-shell.is-home-active .vibra-footer__glow,
  .app-shell.is-home-active .vibra-footer__bottom {
    display: none !important;
  }

  .app-shell.is-home-active .vibra-footer__content {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .app-shell.is-home-active .vibra-footer__message {
    flex: 0 1 56% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
  }

  .app-shell.is-home-active .vibra-footer__icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    flex: 0 0 40px !important;
  }

  .app-shell.is-home-active .vibra-footer__message h2 {
    margin: 0 !important;
    font-size: clamp(0.72rem, 3.1vw, 0.92rem) !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  .app-shell.is-home-active .vibra-footer__message h2 strong {
    display: inline !important;
  }

  .app-shell.is-home-active .vibra-footer__message p {
    margin: 3px 0 0 !important;
    font-size: clamp(0.58rem, 2.25vw, 0.68rem) !important;
    line-height: 1.08 !important;
  }

  .app-shell.is-home-active .vibra-footer__message p span {
    display: block !important;
  }

  .app-shell.is-home-active .vibra-wave {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    width: min(42%, 156px) !important;
    height: 52px !important;
    min-width: 108px !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    opacity: 0.95 !important;
  }

  .bottom-nav-bar {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(7px, env(safe-area-inset-bottom)) !important;
    z-index: 1000 !important;
    width: auto !important;
    height: 61px !important;
    min-height: 61px !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 4px 7px !important;
    border-radius: 18px !important;
    overflow: visible !important;
  }

  .bottom-nav-item {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    gap: 3px !important;
    font-size: 7px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .bottom-nav-item svg {
    width: 17px !important;
    height: 17px !important;
  }

  .bottom-nav-fab {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border-radius: 50% !important;
    transform: translateY(-15px) !important;
  }

  .bottom-nav-fab svg {
    width: 24px !important;
    height: 24px !important;
  }
}

@media (max-width: 390px) {
  .app-shell {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .app-shell > .vibra-app-top {
    gap: 4px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  .app-shell > .vibra-app-top .vibra-logo-lockup {
    flex-basis: 74px !important;
  }

  .app-shell > .vibra-app-top .vibra-logo-text {
    font-size: 0.98rem !important;
  }

  .app-shell > .vibra-app-top .vibra-manage-button {
    max-width: 86px !important;
  }

  .app-shell.is-home-active .vibra-home .hero {
    padding-left: 13px !important;
    padding-right: 41% !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-panel {
    gap: 5px !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-panel > div,
  .app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(2),
  .app-shell.is-home-active .vibra-home > .hero-panel > div:nth-child(3) {
    padding-left: 5px !important;
    padding-right: 5px !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    gap: 2px 5px !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-panel .stat-card-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
  }

  .app-shell.is-home-active .vibra-footer__message {
    flex-basis: 60% !important;
  }

  .app-shell.is-home-active .vibra-wave {
    min-width: 92px !important;
    width: 38% !important;
  }
}

@media (max-width: 360px) {
  .app-shell > .vibra-app-top .vibra-manage-button {
    max-width: 72px !important;
  }

  .app-shell > .vibra-app-top .vibra-plus-pill {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  .app-shell > .vibra-app-top .vibra-theme-switch {
    width: 30px !important;
    min-width: 30px !important;
  }

  .app-shell > .vibra-app-top .theme-switch-track {
    width: 26px !important;
    flex-basis: 26px !important;
  }

  .app-shell > .vibra-app-top .theme-switch-input:checked + .theme-switch-track .theme-switch-thumb {
    transform: translateX(8px) !important;
  }

  .app-shell.is-home-active .vibra-home .hero {
    height: 138px !important;
    min-height: 138px !important;
    max-height: 138px !important;
  }
}

/* Mobile structural reset after audit: header in flow, no ghost top bar, compact home height */
@media (max-width: 768px) {
  .app-shell > .top-session,
  .app-shell.is-home-active > .top-session,
  .app-shell .nav-session.top-session,
  .app-shell.is-home-active .nav-session.top-session {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .app-shell.is-home-active,
  main.app-shell.is-home-active {
    position: relative !important;
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    flex: 0 0 auto !important;
    align-content: start !important;
    padding: 10px 12px 92px !important;
  }

  .app-shell.is-home-active > .vibra-app-top,
  main.app-shell.is-home-active > header.vibra-app-top {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    margin: 0 0 10px !important;
    padding: 7px 9px !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }

  .app-shell.is-home-active > .vibra-app-top .vibra-logo-lockup {
    flex: 0 1 88px !important;
  }

  .app-shell.is-home-active > .vibra-app-top .vibra-logo-mark,
  .app-shell.is-home-active > .vibra-app-top .vibra-logo-mark svg,
  .app-shell.is-home-active > .vibra-app-top .vibra-icon-button,
  .app-shell.is-home-active > .vibra-app-top .vibra-avatar {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    flex-basis: 30px !important;
  }

  .app-shell.is-home-active > .vibra-app-top .vibra-top-actions {
    flex: 0 0 auto !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
  }

  .app-shell.is-home-active > .vibra-app-top .vibra-plus-pill,
  .app-shell.is-home-active > .vibra-app-top .vibra-manage-button {
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    padding: 0 8px !important;
    font-size: 8px !important;
  }

  .app-shell.is-home-active > .vibra-app-top .vibra-manage-button {
    max-width: 106px !important;
  }

  .app-shell.is-home-active > .vibra-app-top .vibra-theme-switch {
    width: 34px !important;
    min-width: 34px !important;
    height: 22px !important;
    min-height: 22px !important;
    padding: 2px !important;
  }

  .app-shell.is-home-active > .vibra-app-top .theme-switch-track {
    width: 30px !important;
    height: 16px !important;
    flex: 0 0 30px !important;
  }

  .app-shell.is-home-active > .vibra-app-top .theme-switch-thumb {
    width: 12px !important;
    height: 12px !important;
  }

  .app-shell.is-home-active > .vibra-app-top .theme-switch-input:checked + .theme-switch-track .theme-switch-thumb {
    transform: translateX(14px) !important;
  }

  .app-shell.is-home-active > .vibra-home,
  .app-shell.is-home-active > section.home-panel.app-section.vibra-home {
    position: relative !important;
    top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
    flex: 0 0 auto !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .app-shell.is-home-active > .vibra-home .hero,
  .app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero {
    position: relative !important;
    top: auto !important;
    height: 168px !important;
    min-height: 168px !important;
    max-height: 168px !important;
    margin: 0 !important;
    padding: 18px 42% 16px 16px !important;
    overflow: hidden !important;
  }

  .app-shell.is-home-active .vibra-home .hero-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: 100% !important;
    gap: 6px !important;
  }

  .app-shell.is-home-active .vibra-home .hero h1 {
    font-size: clamp(1.24rem, 5.1vw, 1.62rem) !important;
    line-height: 1.04 !important;
  }

  .app-shell.is-home-active .vibra-home .hero .subtitle {
    font-size: clamp(0.7rem, 2.9vw, 0.84rem) !important;
    line-height: 1.22 !important;
  }

  .app-shell.is-home-active .vibra-home .hero-mascot {
    position: absolute !important;
    right: 8px !important;
    bottom: 8px !important;
    width: 40% !important;
    min-width: 118px !important;
    max-width: 162px !important;
    max-height: 150px !important;
    object-fit: contain !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-source-box {
    margin: 0 !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-panel {
    margin: 0 !important;
    gap: 7px !important;
  }

  .app-shell.is-home-active > .vibra-footer {
    margin: 0 !important;
    height: 84px !important;
    min-height: 84px !important;
    flex: 0 0 84px !important;
  }

  .app-shell.is-home-active > .app-section.is-hidden,
  .app-shell.is-home-active > section.app-section.is-hidden {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}

@media (max-width: 390px) {
  .app-shell.is-home-active > .vibra-home .hero,
  .app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero {
    height: 160px !important;
    min-height: 160px !important;
    max-height: 160px !important;
    padding-right: 40% !important;
  }

  .app-shell.is-home-active > .vibra-app-top .vibra-manage-button {
    max-width: 88px !important;
  }
}

@media (max-width: 360px) {
  .app-shell.is-home-active > .vibra-home .hero,
  .app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero {
    height: 154px !important;
    min-height: 154px !important;
    max-height: 154px !important;
  }

  .app-shell.is-home-active > .vibra-app-top .vibra-manage-button {
    max-width: 74px !important;
  }
}

/* Mobile home spacing polish: banner breathing room and footer near bottom nav */
@media (max-width: 768px) {
  .app-shell.is-home-active,
  main.app-shell.is-home-active {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100svh !important;
    height: auto !important;
    padding: 12px 14px 82px !important;
  }

  .app-shell.is-home-active > .vibra-app-top,
  main.app-shell.is-home-active > header.vibra-app-top {
    margin-bottom: 12px !important;
  }

  .app-shell.is-home-active > .vibra-home,
  .app-shell.is-home-active > section.home-panel.app-section.vibra-home {
    flex: 0 0 auto !important;
    gap: 12px !important;
  }

  .app-shell.is-home-active > .vibra-home .hero,
  .app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero {
    height: 174px !important;
    min-height: 174px !important;
    max-height: 174px !important;
    padding: 22px 43% 20px 20px !important;
    border-radius: 18px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-copy {
    gap: 8px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-brand-row {
    margin-bottom: 2px !important;
  }

  .app-shell.is-home-active .vibra-home .hero h1 {
    max-width: 100% !important;
  }

  .app-shell.is-home-active .vibra-home .hero .subtitle {
    max-width: 96% !important;
  }

  .app-shell.is-home-active .vibra-home .hero-mascot {
    right: 12px !important;
    bottom: 10px !important;
    max-height: 152px !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-source-box {
    margin: 2px 0 3px !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-panel {
    margin: 3px 0 12px !important;
  }

  .app-shell.is-home-active > .vibra-footer {
    margin-top: auto !important;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 390px) {
  .app-shell.is-home-active,
  main.app-shell.is-home-active {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 80px !important;
  }

  .app-shell.is-home-active > .vibra-home .hero,
  .app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero {
    height: 166px !important;
    min-height: 166px !important;
    max-height: 166px !important;
    padding: 20px 41% 18px 17px !important;
  }

  .app-shell.is-home-active .vibra-home > .hero-panel {
    margin-bottom: 10px !important;
  }
}

@media (max-width: 360px) {
  .app-shell.is-home-active > .vibra-home .hero,
  .app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero {
    height: 158px !important;
    min-height: 158px !important;
    max-height: 158px !important;
    padding: 17px 40% 16px 15px !important;
  }
}

/* Mobile home banner vertical expansion */
@media (max-width: 768px) {
  .app-shell.is-home-active > .vibra-home .hero,
  .app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero {
    height: 198px !important;
    min-height: 198px !important;
    max-height: 198px !important;
    padding-top: 30px !important;
    padding-bottom: 28px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-mascot {
    max-height: 172px !important;
    bottom: 12px !important;
  }
}

@media (max-width: 390px) {
  .app-shell.is-home-active > .vibra-home .hero,
  .app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero {
    height: 188px !important;
    min-height: 188px !important;
    max-height: 188px !important;
    padding-top: 26px !important;
    padding-bottom: 24px !important;
  }
}

@media (max-width: 360px) {
  .app-shell.is-home-active > .vibra-home .hero,
  .app-shell.is-home-active > section.home-panel.app-section.vib-home > .hero,
  .app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero {
    height: 178px !important;
    min-height: 178px !important;
    max-height: 178px !important;
    padding-top: 23px !important;
    padding-bottom: 21px !important;
  }
}

/* Mobile home banner roomy version */
@media (max-width: 768px) {
  .app-shell.is-home-active > .vibra-home .hero,
  .app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero {
    height: 240px !important;
    min-height: 240px !important;
    max-height: 240px !important;
    padding: 38px 42% 34px 28px !important;
    border-radius: 20px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-copy {
    justify-content: center !important;
    gap: 11px !important;
  }

  .app-shell.is-home-active .vibra-home .hero h1 {
    max-width: 100% !important;
  }

  .app-shell.is-home-active .vibra-home .hero .subtitle {
    max-width: 98% !important;
  }

  .app-shell.is-home-active .vibra-home .hero-mascot {
    right: 18px !important;
    bottom: 18px !important;
    width: 39% !important;
    max-height: 202px !important;
    max-width: 184px !important;
  }
}

@media (max-width: 390px) {
  .app-shell.is-home-active > .vibra-home .hero,
  .app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero {
    height: 224px !important;
    min-height: 224px !important;
    max-height: 224px !important;
    padding: 34px 40% 31px 23px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-mascot {
    right: 13px !important;
    bottom: 14px !important;
    max-height: 188px !important;
  }
}

@media (max-width: 360px) {
  .app-shell.is-home-active > .vibra-home .hero,
  .app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero {
    height: 210px !important;
    min-height: 210px !important;
    max-height: 210px !important;
    padding: 30px 39% 28px 20px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-mascot {
    max-height: 176px !important;
  }
}

/* Mobile hero definitive safe spacing */
@media (max-width: 768px) {
  .app-shell.is-home-active > .vibra-home .hero,
  .app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero {
    height: 268px !important;
    min-height: 268px !important;
    max-height: 268px !important;
    padding-top: 44px !important;
    padding-right: max(46%, 156px) !important;
    padding-bottom: 40px !important;
    padding-left: 36px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 12px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-brand-row {
    margin-left: 0 !important;
  }

  .app-shell.is-home-active .vibra-home .hero h1,
  .app-shell.is-home-active .vibra-home .hero .subtitle {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .app-shell.is-home-active .vibra-home .hero-mascot {
    right: 20px !important;
    bottom: 20px !important;
    width: min(39%, 190px) !important;
    max-height: 220px !important;
  }
}

@media (max-width: 390px) {
  .app-shell.is-home-active > .vibra-home .hero,
  .app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero {
    height: 252px !important;
    min-height: 252px !important;
    max-height: 252px !important;
    padding-top: 39px !important;
    padding-right: max(43%, 138px) !important;
    padding-bottom: 36px !important;
    padding-left: 31px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-mascot {
    right: 16px !important;
    bottom: 17px !important;
    width: min(38%, 164px) !important;
    max-height: 202px !important;
  }
}

@media (max-width: 360px) {
  .app-shell.is-home-active > .vibra-home .hero,
  .app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero {
    height: 238px !important;
    min-height: 238px !important;
    max-height: 238px !important;
    padding-top: 35px !important;
    padding-right: max(41%, 126px) !important;
    padding-bottom: 32px !important;
    padding-left: 28px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-copy {
    gap: 10px !important;
  }

  .app-shell.is-home-active .vibra-home .hero-mascot {
    right: 13px !important;
    bottom: 15px !important;
    width: min(37%, 148px) !important;
    max-height: 186px !important;
  }
}

/* Mobile hero final override: stronger selector, real safe area, no edge-hugging text */
@media screen and (max-width: 768px) {
  body main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > div.hero {
    box-sizing: border-box !important;
    block-size: 330px !important;
    min-block-size: 330px !important;
    max-block-size: 330px !important;
    height: 330px !important;
    min-height: 330px !important;
    max-height: 330px !important;
    padding-block-start: 58px !important;
    padding-block-end: 52px !important;
    padding-inline-start: 56px !important;
    padding-inline-end: max(42%, 178px) !important;
    border-radius: 22px !important;
  }

  body main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > div.hero > .hero-copy {
    box-sizing: border-box !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    gap: 14px !important;
  }

  body main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > div.hero .hero-brand-row,
  body main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > div.hero h1,
  body main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > div.hero .subtitle {
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
  }

  body main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > div.hero h1,
  body main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > div.hero .subtitle {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
  }

  body main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > div.hero > img.hero-mascot {
    inset-block-end: 30px !important;
    inset-inline-end: 28px !important;
    width: min(36%, 178px) !important;
    max-height: 250px !important;
  }
}

@media screen and (max-width: 390px) {
  body main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > div.hero {
    block-size: 308px !important;
    min-block-size: 308px !important;
    max-block-size: 308px !important;
    height: 308px !important;
    min-height: 308px !important;
    max-height: 308px !important;
    padding-block-start: 50px !important;
    padding-block-end: 46px !important;
    padding-inline-start: 44px !important;
    padding-inline-end: max(39%, 144px) !important;
  }

  body main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > div.hero > img.hero-mascot {
    inset-block-end: 24px !important;
    inset-inline-end: 20px !important;
    width: min(35%, 150px) !important;
    max-height: 224px !important;
  }
}

@media screen and (max-width: 360px) {
  body main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > div.hero {
    block-size: 292px !important;
    min-block-size: 292px !important;
    max-block-size: 292px !important;
    height: 292px !important;
    min-height: 292px !important;
    max-height: 292px !important;
    padding-block-start: 44px !important;
    padding-block-end: 40px !important;
    padding-inline-start: 38px !important;
    padding-inline-end: max(37%, 126px) !important;
  }

  body main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > div.hero > .hero-copy {
    gap: 12px !important;
  }

  body main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > div.hero > img.hero-mascot {
    inset-block-end: 20px !important;
    inset-inline-end: 16px !important;
    width: min(34%, 132px) !important;
    max-height: 208px !important;
  }
}

/* Mobile hero correction: wider text column, vertical breathing, less unnecessary left inset */
@media screen and (max-width: 768px) {
  body main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > div.hero {
    block-size: 360px !important;
    min-block-size: 360px !important;
    max-block-size: 360px !important;
    height: 360px !important;
    min-height: 360px !important;
    max-height: 360px !important;
    padding-block-start: 48px !important;
    padding-block-end: 48px !important;
    padding-inline-start: 28px !important;
    padding-inline-end: max(32%, 118px) !important;
  }

  body main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > div.hero > .hero-copy {
    justify-content: center !important;
    gap: 16px !important;
  }

  body main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > div.hero .hero-brand-row {
    margin-bottom: 2px !important;
  }

  body main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > div.hero h1 {
    font-size: clamp(1.34rem, 5.4vw, 1.72rem) !important;
    line-height: 1.12 !important;
    max-width: 11.5ch !important;
  }

  body main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > div.hero .subtitle {
    font-size: clamp(0.76rem, 2.9vw, 0.88rem) !important;
    line-height: 1.28 !important;
    max-width: 18ch !important;
  }

  body main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > div.hero > img.hero-mascot {
    inset-block-end: 54px !important;
    inset-inline-end: 18px !important;
    width: min(38%, 170px) !important;
    max-height: 220px !important;
  }
}

/* Home dark mode final pass: keep desktop cards and filters out of light theme colors */
body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero {
  border-color: rgba(167, 139, 250, 0.24) !important;
  background:
    radial-gradient(circle at 78% 54%, rgba(124, 58, 237, 0.30), transparent 34%),
    linear-gradient(135deg, rgba(18, 13, 54, 0.96), rgba(10, 8, 30, 0.98)) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero .hero-wordmark,
body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero h1 {
  color: #f8f7ff !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero h1 strong {
  color: #a78bfa !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero .subtitle {
  color: #c7c2dd !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero .hero-eyebrow,
body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero .hero-copy::before {
  color: #ddd6fe !important;
  background: rgba(124, 58, 237, 0.22) !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero-source-box {
  border-color: rgba(167, 139, 250, 0.22) !important;
  background: linear-gradient(135deg, rgba(18, 13, 48, 0.94), rgba(12, 9, 34, 0.96)) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero-source-box .hero-view-context {
  color: #f2efff !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero-source-box .source-picker-button {
  border-color: rgba(167, 139, 250, 0.24) !important;
  color: #f8f7ff !important;
  background: rgba(22, 17, 50, 0.96) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22) !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero-panel > div,
body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero-panel > div:nth-child(2),
body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero-panel > div:nth-child(3) {
  border-color: rgba(167, 139, 250, 0.20) !important;
  background: linear-gradient(180deg, rgba(18, 13, 48, 0.96), rgba(12, 9, 34, 0.96)) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero-panel .stat-value {
  color: #f8f7ff !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero-panel .stat-label {
  color: #a78bfa !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero-panel small {
  color: #b9b3cf !important;
}

@media screen and (max-width: 390px) {
  body main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > div.hero {
    block-size: 348px !important;
    min-block-size: 348px !important;
    max-block-size: 348px !important;
    height: 348px !important;
    min-height: 348px !important;
    max-height: 348px !important;
    padding-block-start: 44px !important;
    padding-block-end: 44px !important;
    padding-inline-start: 24px !important;
    padding-inline-end: max(31%, 108px) !important;
  }

  body main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > div.hero h1 {
    max-width: 11.2ch !important;
  }

  body main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > div.hero .subtitle {
    max-width: 17.5ch !important;
  }

  body main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > div.hero > img.hero-mascot {
    inset-block-end: 52px !important;
    inset-inline-end: 14px !important;
    width: min(38%, 150px) !important;
    max-height: 202px !important;
  }
}

@media screen and (max-width: 360px) {
  body main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > div.hero {
    block-size: 334px !important;
    min-block-size: 334px !important;
    max-block-size: 334px !important;
    height: 334px !important;
    min-height: 334px !important;
    max-height: 334px !important;
    padding-block-start: 40px !important;
    padding-block-end: 40px !important;
    padding-inline-start: 22px !important;
    padding-inline-end: max(30%, 96px) !important;
  }

  body main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > div.hero > .hero-copy {
    gap: 14px !important;
  }

  body main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > div.hero h1 {
    font-size: clamp(1.22rem, 5.2vw, 1.5rem) !important;
    max-width: 11ch !important;
  }

  body main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > div.hero .subtitle {
    max-width: 16.5ch !important;
  }
}

/* Mobile footer left alignment */
@media screen and (max-width: 768px) {
  body main.app-shell.is-home-active > footer.vibra-footer .vibra-footer__content {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  body main.app-shell.is-home-active > footer.vibra-footer .vibra-footer__message {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  body main.app-shell.is-home-active > footer.vibra-footer .vibra-footer__message > div:last-child {
    text-align: left !important;
    align-items: flex-start !important;
  }

  body main.app-shell.is-home-active > footer.vibra-footer .vibra-footer__message h2,
  body main.app-shell.is-home-active > footer.vibra-footer .vibra-footer__message p {
    text-align: left !important;
  }
}

/* Mobile footer definitive left placement */
@media screen and (max-width: 768px) {
  body main.app-shell.is-home-active > footer.vibra-footer {
    position: relative !important;
    padding-left: 14px !important;
    padding-right: 12px !important;
  }

  body main.app-shell.is-home-active > footer.vibra-footer .vibra-footer__content {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  body main.app-shell.is-home-active > footer.vibra-footer .vibra-footer__message {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: calc(100% - 180px) !important;
    max-width: calc(100% - 180px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    text-align: left !important;
  }

  body main.app-shell.is-home-active > footer.vibra-footer .vibra-footer__message h2,
  body main.app-shell.is-home-active > footer.vibra-footer .vibra-footer__message p {
    text-align: left !important;
  }

  body main.app-shell.is-home-active > footer.vibra-footer .vibra-wave {
    right: 12px !important;
  }
}

@media screen and (max-width: 390px) {
  body main.app-shell.is-home-active > footer.vibra-footer .vibra-footer__message {
    left: 12px !important;
    width: calc(100% - 150px) !important;
    max-width: calc(100% - 150px) !important;
  }

  body main.app-shell.is-home-active > footer.vibra-footer .vibra-wave {
    right: 8px !important;
    width: min(36%, 118px) !important;
    min-width: 92px !important;
  }
}

/* Vibra premium login redesign */
#authShell.auth-shell {
  --login-bg: #070711;
  --login-panel: #0d0c1b;
  --login-panel-light: rgba(22, 18, 48, 0.78);
  --login-purple: #7c3aed;
  --login-purple-light: #a855f7;
  --login-blue: #22d3ee;
  --login-text: #f8f7ff;
  --login-muted: #a9a6bf;
  --login-border: rgba(139, 92, 246, 0.35);
  min-height: 100vh !important;
  padding: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    radial-gradient(circle at 20% 20%, rgba(124, 58, 237, 0.18), transparent 32%),
    radial-gradient(circle at 80% 15%, rgba(34, 211, 238, 0.10), transparent 28%),
    linear-gradient(135deg, rgba(12, 7, 38, 0.94), rgba(3, 3, 10, 1) 58%),
    #05050b !important;
  color: var(--login-text) !important;
  overflow-x: hidden !important;
}

#authShell .auth-card {
  position: relative !important;
  width: min(1450px, calc(100% - 48px)) !important;
  min-height: calc(100vh - 48px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.96fr) !important;
  gap: 0 !important;
  overflow: hidden !important;
  border-radius: 32px !important;
  border: 1px solid rgba(124, 58, 237, 0.45) !important;
  background: linear-gradient(145deg, rgba(13, 12, 27, 0.98), rgba(5, 5, 15, 0.98)) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 40px rgba(124, 58, 237, 0.12) !important;
}

#authShell .auth-card::before,
#authShell .auth-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

#authShell .auth-card::before {
  inset: -30% -10% auto auto;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.34), transparent 68%);
  filter: blur(8px);
}

#authShell .auth-card::after {
  inset: auto auto -26% -18%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.12), transparent 66%);
}

#authShell .login-visual,
#authShell .login-form-panel {
  position: relative !important;
  z-index: 1 !important;
}

#authShell .login-visual {
  min-width: 0 !important;
  padding: 56px !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  gap: 26px !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(7, 7, 17, 0.18), rgba(7, 7, 17, 0.72)),
    radial-gradient(circle at 58% 55%, rgba(124, 58, 237, 0.30), transparent 28%),
    radial-gradient(circle at 52% 70%, rgba(34, 211, 238, 0.12), transparent 30%);
}

#authShell .login-visual::before,
#authShell .login-visual::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

#authShell .login-visual::before {
  left: -10%;
  right: -10%;
  bottom: 25%;
  height: 120px;
  background:
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(124, 58, 237, 0.45) 12px 14px, transparent 14px 26px),
    linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.24), rgba(124, 58, 237, 0.28), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 40%, transparent);
  opacity: 0.58;
}

#authShell .login-visual::after {
  inset: 0;
  background-image:
    radial-gradient(circle at 24% 26%, rgba(124, 58, 237, 0.8) 0 2px, transparent 3px),
    radial-gradient(circle at 66% 18%, rgba(34, 211, 238, 0.55) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 42%, rgba(168, 85, 247, 0.55) 0 2px, transparent 3px);
  opacity: 0.45;
}

#authShell .login-visual__brand,
#authShell .login-visual__copy,
#authShell .login-visual__stage,
#authShell .login-benefits {
  position: relative;
  z-index: 2;
}

#authShell .login-visual__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--login-text);
  font-size: 1.45rem;
  font-weight: 900;
}

#authShell .login-visual__mark {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #c4b5fd;
}

#authShell .login-visual__mark svg {
  width: 34px;
  height: 34px;
  stroke: currentColor;
  stroke-width: 2;
}

#authShell .login-visual__copy h2 {
  margin: 0;
  max-width: 12ch;
  color: var(--login-text);
  font-size: clamp(2.35rem, 4.3vw, 4.4rem);
  line-height: 0.94;
  letter-spacing: 0;
  font-weight: 900;
}

#authShell .login-visual__copy h2 strong {
  color: var(--login-purple-light);
  font-weight: 900;
}

#authShell .login-visual__copy p {
  max-width: 38ch;
  margin: 18px 0 0;
  color: var(--login-muted);
  font-size: 1rem;
  line-height: 1.55;
}

#authShell .login-visual__stage {
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#authShell .login-mascot {
  width: min(420px, 75%);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 35px rgba(124, 58, 237, 0.45));
  transform: translateY(4px);
}

#authShell .login-wave {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 58%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.46), rgba(124, 58, 237, 0.72), transparent);
  box-shadow: 0 0 24px rgba(124, 58, 237, 0.45);
}

#authShell .login-wave--left,
#authShell .login-wave--right {
  opacity: 0.75;
}

#authShell .login-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(139, 92, 246, 0.16);
  background: rgba(18, 15, 40, 0.56);
  backdrop-filter: blur(14px);
}

#authShell .login-benefits div {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: var(--login-muted);
}

#authShell .login-benefits span {
  color: var(--login-purple-light);
  font-size: 1.25rem;
}

#authShell .login-benefits strong {
  color: #c4b5fd;
  font-size: 0.82rem;
}

#authShell .login-benefits small {
  color: var(--login-muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

#authShell .login-form-panel {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 36px !important;
}

#authShell .login-form-panel::before {
  content: "";
  position: absolute;
  inset: 36px;
  z-index: -1;
  border-radius: 28px;
  border: 1px solid rgba(124, 58, 237, 0.25);
  background: rgba(18, 15, 40, 0.76);
  backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#authShell .login-form-panel > .auth-brand-row {
  position: absolute;
  top: 56px;
  left: 56px;
  display: none !important;
}

#authShell .login-form-panel > .auth-copy,
#authShell .login-form-panel > .auth-panels,
#authShell .login-form-panel > .auth-message {
  width: min(520px, 100%) !important;
}

#authShell .login-form-panel {
  flex-direction: column !important;
  gap: 24px !important;
}

#authShell .auth-copy {
  text-align: center !important;
}

#authShell .auth-copy .eyebrow,
#authShell .auth-copy .eyebrow.dark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 0 24px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(139, 92, 246, 0.20) !important;
  background: rgba(124, 58, 237, 0.14) !important;
  color: #c4b5fd !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

#authShell .auth-copy .eyebrow::before {
  content: "⌑";
  color: var(--login-purple-light);
}

#authShell .auth-copy h1 {
  margin: 0 !important;
  color: var(--login-text) !important;
  font-size: clamp(2rem, 3.1vw, 3.35rem) !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

#authShell .auth-copy h1 strong {
  color: var(--login-purple-light) !important;
}

#authShell .auth-subtitle {
  max-width: 40ch !important;
  margin: 18px auto 0 !important;
  color: var(--login-muted) !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
}

#authShell .auth-panels {
  margin: 0 !important;
}

#authShell .auth-form {
  display: grid !important;
  gap: 18px !important;
}

#authShell #loginForm .auth-form-head {
  display: none !important;
}

#authShell .auth-form-head h2 {
  color: var(--login-text) !important;
}

#authShell .auth-form-head span {
  color: var(--login-muted) !important;
}

#authShell .name-field {
  position: relative !important;
  display: grid !important;
  gap: 9px !important;
}

#authShell .name-field > span {
  color: #d8d3ea !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

#authShell .name-field input {
  width: 100% !important;
  height: 64px !important;
  padding: 0 18px 0 54px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(139, 92, 246, 0.28) !important;
  background: rgba(10, 9, 24, 0.72) !important;
  color: #fff !important;
  font-size: 1rem !important;
  outline: none !important;
  box-shadow: none !important;
}

#authShell .login-field--password input {
  padding-right: 54px !important;
}

#authShell .name-field input::placeholder {
  color: rgba(216, 211, 234, 0.50) !important;
}

#authShell .name-field input:focus {
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.12) !important;
}

#authShell .login-field::before {
  content: "";
  position: absolute;
  left: 19px;
  bottom: 20px;
  width: 18px;
  height: 18px;
  opacity: 0.8;
  background: currentColor;
  color: #8b5cf6;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

#authShell .login-field--user::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

#authShell .login-field--password::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

#authShell .login-password-toggle {
  position: absolute !important;
  right: 14px !important;
  bottom: 14px !important;
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--login-muted) !important;
  cursor: pointer !important;
}

#authShell .login-password-toggle svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
}

#authShell .login-form-options {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-top: -2px !important;
  color: var(--login-muted) !important;
  font-size: 0.86rem !important;
}

#authShell .login-remember {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  cursor: pointer !important;
}

#authShell .login-remember input {
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--login-purple) !important;
}

#authShell .login-form-options a,
#authShell .auth-switch-link {
  color: #a78bfa !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

#authShell .auth-submit {
  height: 64px !important;
  border-radius: 16px !important;
  border: 0 !important;
  background: linear-gradient(90deg, #7c3aed, #8b5cf6) !important;
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  box-shadow: 0 14px 40px rgba(124, 58, 237, 0.35) !important;
  transition: transform 160ms ease, filter 160ms ease !important;
}

#authShell .auth-submit:hover,
#authShell .auth-submit:focus-visible {
  transform: translateY(-1px) !important;
  filter: brightness(1.08) !important;
}

#authShell .auth-switch-row {
  margin: 6px 0 0 !important;
  color: var(--login-muted) !important;
  text-align: center !important;
  font-size: 0.92rem !important;
}

#authShell .auth-message {
  min-height: 22px !important;
  margin: 0 !important;
  color: #c4b5fd !important;
  text-align: center !important;
}

#authShell .auth-message.is-error {
  color: #fca5a5 !important;
}

#authShell #registerForm,
#authShell #setupForm {
  padding: 0 !important;
}

#authShell #registerForm:not(.is-hidden),
#authShell #setupForm:not(.is-hidden) {
  display: grid !important;
}

#authShell #registerForm .auth-form-head,
#authShell #setupForm .auth-form-head {
  display: grid !important;
  gap: 6px !important;
  text-align: center !important;
}

@media (max-width: 1100px) {
  #authShell .auth-card {
    grid-template-columns: 0.88fr 1fr !important;
  }

  #authShell .login-visual,
  #authShell .login-form-panel {
    padding: 40px !important;
  }

  #authShell .login-form-panel::before {
    inset: 28px;
  }
}

@media (max-width: 900px) {
  #authShell.auth-shell {
    align-items: flex-start !important;
    padding: 16px !important;
  }

  #authShell .auth-card {
    width: 100% !important;
    min-height: auto !important;
    grid-template-columns: 1fr !important;
    border-radius: 24px !important;
  }

  #authShell .login-visual {
    min-height: 290px !important;
    padding: 28px !important;
    grid-template-rows: auto auto 1fr !important;
  }

  #authShell .login-visual__copy h2 {
    max-width: 16ch;
    font-size: clamp(2rem, 8vw, 3rem);
  }

  #authShell .login-visual__copy p {
    max-width: 42ch;
  }

  #authShell .login-visual__stage {
    position: absolute;
    right: 20px;
    bottom: 12px;
    width: 38%;
    min-height: 0;
  }

  #authShell .login-mascot {
    width: min(210px, 100%);
  }

  #authShell .login-benefits {
    display: none;
  }

  #authShell .login-form-panel {
    padding: 28px !important;
  }

  #authShell .login-form-panel::before {
    inset: 16px;
    border-radius: 22px;
  }
}

@media (max-width: 640px) {
  #authShell.auth-shell {
    padding: 12px !important;
  }

  #authShell .auth-card {
    border-radius: 22px !important;
  }

  #authShell .login-visual {
    min-height: 250px !important;
    padding: 24px !important;
  }

  #authShell .login-visual__brand {
    font-size: 1.15rem;
  }

  #authShell .login-visual__copy h2 {
    max-width: 12ch;
    font-size: 2rem;
  }

  #authShell .login-visual__copy p {
    max-width: 28ch;
    font-size: 0.82rem;
  }

  #authShell .login-form-panel {
    padding: 28px 20px !important;
  }

  #authShell .login-form-panel::before {
    inset: 0;
    border-radius: 0 0 22px 22px;
  }

  #authShell .auth-copy h1 {
    font-size: 1.75rem !important;
  }

  #authShell .auth-subtitle {
    font-size: 0.86rem !important;
  }

  #authShell .name-field input,
  #authShell .auth-submit {
    height: 52px !important;
    border-radius: 13px !important;
  }

  #authShell .login-password-toggle {
    bottom: 8px !important;
  }

  #authShell .login-form-options {
    font-size: 0.78rem !important;
  }
}

/* Login screen fit and two-mode auth only */
#authShell.auth-shell {
  height: 100svh !important;
  min-height: 100svh !important;
  max-height: 100svh !important;
  padding: 16px !important;
  overflow: hidden !important;
}

#authShell .auth-card {
  width: min(1450px, calc(100% - 24px)) !important;
  height: calc(100svh - 32px) !important;
  min-height: 0 !important;
  max-height: calc(100svh - 32px) !important;
}

#authShell .login-visual {
  padding: clamp(28px, 3.5vw, 44px) !important;
  gap: clamp(12px, 1.8vw, 20px) !important;
  grid-template-rows: auto auto minmax(160px, 1fr) auto !important;
}

#authShell .login-visual__copy h2 {
  font-size: clamp(2rem, 3.4vw, 3.65rem) !important;
  line-height: 0.96 !important;
}

#authShell .login-visual__copy p {
  margin-top: 12px !important;
  font-size: 0.92rem !important;
  line-height: 1.45 !important;
}

#authShell .login-visual__stage {
  min-height: 190px !important;
}

#authShell .login-mascot {
  width: min(330px, 68%) !important;
  max-height: 34vh !important;
}

#authShell .login-benefits {
  padding: 13px !important;
  gap: 8px !important;
}

#authShell .login-benefits small {
  font-size: 0.64rem !important;
}

#authShell .login-form-panel {
  padding: clamp(24px, 3vw, 36px) !important;
  gap: 18px !important;
  overflow: hidden !important;
}

#authShell .login-form-panel::before {
  inset: clamp(18px, 2.4vw, 30px) !important;
}

#authShell .auth-copy .eyebrow,
#authShell .auth-copy .eyebrow.dark {
  margin-bottom: 16px !important;
  padding: 7px 12px !important;
}

#authShell .auth-copy h1 {
  font-size: clamp(1.85rem, 2.45vw, 2.75rem) !important;
}

#authShell .auth-subtitle {
  margin-top: 12px !important;
  font-size: 0.9rem !important;
  line-height: 1.42 !important;
}

#authShell .auth-form {
  gap: 13px !important;
}

#authShell .name-field {
  gap: 7px !important;
}

#authShell .name-field input,
#authShell .auth-submit {
  height: 54px !important;
  border-radius: 14px !important;
}

#authShell .login-password-toggle {
  bottom: 9px !important;
}

#authShell #setupForm {
  display: none !important;
}

#authShell #loginForm.is-hidden,
#authShell #registerForm.is-hidden {
  display: none !important;
}

#authShell #loginForm:not(.is-hidden),
#authShell #registerForm:not(.is-hidden) {
  display: grid !important;
}

#authShell #registerForm:not(.is-hidden) {
  gap: 12px !important;
}

#authShell #registerForm:not(.is-hidden) .auth-form-head {
  margin-bottom: 2px !important;
}

@media (max-width: 900px) {
  #authShell.auth-shell {
    min-height: 100svh !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    padding: 12px !important;
  }

  #authShell .auth-card {
    width: 100% !important;
    height: auto !important;
    min-height: calc(100svh - 24px) !important;
    max-height: none !important;
  }
}

@media (max-height: 760px) and (min-width: 901px) {
  #authShell .login-benefits {
    display: none !important;
  }

  #authShell .login-visual__stage {
    min-height: 150px !important;
  }

  #authShell .login-mascot {
    width: min(280px, 60%) !important;
    max-height: 30vh !important;
  }

  #authShell .auth-copy h1 {
    font-size: clamp(1.65rem, 2.15vw, 2.35rem) !important;
  }
}

/* Login logo visibility refinement */
#authShell .login-visual__brand {
  color: #ffffff !important;
  font-size: clamp(1.55rem, 2vw, 2rem) !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 0 18px rgba(167, 139, 250, 0.42) !important;
}

#authShell .login-visual__mark {
  width: 42px !important;
  height: 42px !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  background: rgba(124, 58, 237, 0.18) !important;
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.42), 0 0 24px rgba(124, 58, 237, 0.45) !important;
}

#authShell .login-visual__mark svg {
  width: 32px !important;
  height: 32px !important;
  stroke: #ffffff !important;
}

/* Saved repertoires action buttons as compact icons */
.saved-item .saved-icon-button {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.saved-item .saved-icon-button svg {
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px !important;
}

.saved-item .saved-delete.saved-icon-button svg {
  width: 16px !important;
  height: 16px !important;
}

@media (max-width: 760px) {
  .saved-item .saved-icon-button {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 9px !important;
  }

  .saved-item .saved-icon-button svg {
    width: 15px !important;
    height: 15px !important;
  }
}

/* Auth visibility fix: login must stay hidden after authenticated app loads */
#authShell.auth-shell.is-hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#appShell.app-shell.is-hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Mobile home dark mode tonal correction */
@media screen and (max-width: 768px) {
  body[data-theme="dark"] main.app-shell.is-home-active {
    background:
      radial-gradient(circle at 18% 8%, rgba(124, 58, 237, 0.20), transparent 34%),
      radial-gradient(circle at 88% 24%, rgba(34, 211, 238, 0.10), transparent 30%),
      linear-gradient(180deg, #080717 0%, #0d0a24 44%, #080717 100%) !important;
  }

  body[data-theme="dark"] main.app-shell.is-home-active > header.vibra-app-top {
    border-color: rgba(167, 139, 250, 0.26) !important;
    background: rgba(15, 11, 45, 0.86) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  }

  body[data-theme="dark"] main.app-shell.is-home-active > header.vibra-app-top .vibra-logo-text,
  body[data-theme="dark"] main.app-shell.is-home-active > header.vibra-app-top .vibra-icon-button {
    color: #f8f7ff !important;
  }

  body[data-theme="dark"] main.app-shell.is-home-active > header.vibra-app-top .vibra-logo-mark,
  body[data-theme="dark"] main.app-shell.is-home-active > header.vibra-app-top .vibra-icon-button,
  body[data-theme="dark"] main.app-shell.is-home-active > header.vibra-app-top .vibra-avatar,
  body[data-theme="dark"] main.app-shell.is-home-active > header.vibra-app-top .vibra-theme-switch {
    border-color: rgba(167, 139, 250, 0.28) !important;
    background: rgba(24, 18, 56, 0.78) !important;
  }

  body[data-theme="dark"] main.app-shell.is-home-active > section.vibra-home > .hero {
    border-color: rgba(167, 139, 250, 0.24) !important;
    background:
      radial-gradient(circle at 78% 54%, rgba(124, 58, 237, 0.30), transparent 34%),
      linear-gradient(135deg, rgba(18, 13, 54, 0.96), rgba(10, 8, 30, 0.98)) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  }

  body[data-theme="dark"] main.app-shell.is-home-active > section.vibra-home > .hero .hero-wordmark,
  body[data-theme="dark"] main.app-shell.is-home-active > section.vibra-home > .hero h1 {
    color: #f8f7ff !important;
  }

  body[data-theme="dark"] main.app-shell.is-home-active > section.vibra-home > .hero h1 strong {
    color: #a78bfa !important;
  }

  body[data-theme="dark"] main.app-shell.is-home-active > section.vibra-home > .hero .subtitle {
    color: #c7c2dd !important;
  }

  body[data-theme="dark"] main.app-shell.is-home-active > section.vibra-home > .hero .hero-eyebrow,
  body[data-theme="dark"] main.app-shell.is-home-active > section.vibra-home > .hero .hero-copy::before {
    color: #ddd6fe !important;
    background: rgba(124, 58, 237, 0.22) !important;
  }

  body[data-theme="dark"] main.app-shell.is-home-active > section.vibra-home > .hero-source-box {
    border-color: rgba(167, 139, 250, 0.22) !important;
    background: rgba(14, 10, 38, 0.88) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26) !important;
  }

  body[data-theme="dark"] main.app-shell.is-home-active > section.vibra-home > .hero-source-box .hero-view-context {
    color: #f2efff !important;
  }

  body[data-theme="dark"] main.app-shell.is-home-active > section.vibra-home > .hero-source-box .source-picker-button {
    border-color: rgba(167, 139, 250, 0.24) !important;
    color: #f8f7ff !important;
    background: rgba(22, 17, 50, 0.96) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22) !important;
  }

  body[data-theme="dark"] main.app-shell.is-home-active > section.vibra-home > .hero-panel > div,
  body[data-theme="dark"] main.app-shell.is-home-active > section.vibra-home > .hero-panel > div:nth-child(2),
  body[data-theme="dark"] main.app-shell.is-home-active > section.vibra-home > .hero-panel > div:nth-child(3) {
    border-color: rgba(167, 139, 250, 0.20) !important;
    background: linear-gradient(180deg, rgba(18, 13, 48, 0.96), rgba(12, 9, 34, 0.96)) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24) !important;
  }

  body[data-theme="dark"] main.app-shell.is-home-active > section.vibra-home > .hero-panel .stat-value {
    color: #f8f7ff !important;
  }

  body[data-theme="dark"] main.app-shell.is-home-active > section.vibra-home > .hero-panel .stat-label {
    color: #a78bfa !important;
  }

  body[data-theme="dark"] main.app-shell.is-home-active > section.vibra-home > .hero-panel small {
    color: #b9b3cf !important;
  }

  body[data-theme="dark"] .bottom-nav-bar {
    border-color: rgba(167, 139, 250, 0.28) !important;
    background: rgba(10, 8, 30, 0.94) !important;
    box-shadow: 0 -14px 36px rgba(0, 0, 0, 0.36) !important;
  }
}

/* Mobile login layout matching reference */
@media screen and (max-width: 640px) {
  #authShell.auth-shell {
    min-height: 100svh !important;
    height: auto !important;
    padding: 12px 14px 22px !important;
    overflow-y: auto !important;
    background:
      radial-gradient(circle at 72% 8%, rgba(124, 58, 237, 0.34), transparent 30%),
      radial-gradient(circle at 18% 32%, rgba(34, 211, 238, 0.10), transparent 28%),
      #05050d !important;
  }

  #authShell .auth-card {
    width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #authShell .auth-card::before,
  #authShell .auth-card::after {
    display: none !important;
  }

  #authShell .login-visual {
    min-height: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 16px !important;
    overflow: visible !important;
    background: transparent !important;
  }

  #authShell .login-visual::after {
    display: none !important;
  }

  #authShell .login-visual::before {
    left: -14px !important;
    right: -14px !important;
    top: 158px !important;
    bottom: auto !important;
    height: 86px !important;
    opacity: 0.62 !important;
  }

  #authShell .login-visual__brand {
    font-size: 1.15rem !important;
    gap: 8px !important;
  }

  #authShell .login-visual__mark {
    width: 26px !important;
    height: 26px !important;
  }

  #authShell .login-visual__mark svg {
    width: 21px !important;
    height: 21px !important;
  }

  #authShell .login-visual__copy {
    position: relative !important;
    z-index: 3 !important;
  }

  #authShell .login-visual__copy h2 {
    max-width: 10.5ch !important;
    font-size: clamp(1.8rem, 9vw, 2.35rem) !important;
    line-height: 0.98 !important;
  }

  #authShell .login-visual__copy p {
    max-width: 25ch !important;
    margin-top: 14px !important;
    font-size: 0.74rem !important;
    line-height: 1.45 !important;
  }

  #authShell .login-visual__stage {
    position: absolute !important;
    top: 42px !important;
    right: -6px !important;
    bottom: auto !important;
    width: 58% !important;
    min-height: 220px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
  }

  #authShell .login-mascot {
    width: min(236px, 100%) !important;
    max-height: 236px !important;
    filter: drop-shadow(0 0 30px rgba(124, 58, 237, 0.58)) !important;
  }

  #authShell .login-wave {
    display: none !important;
  }

  #authShell .login-benefits {
    margin-top: 12px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
  }

  #authShell .login-benefits div {
    justify-items: center !important;
    text-align: center !important;
    gap: 5px !important;
  }

  #authShell .login-benefits span {
    font-size: 1.25rem !important;
    color: #8b5cf6 !important;
  }

  #authShell .login-benefits strong {
    font-size: 0.62rem !important;
    color: #a855f7 !important;
  }

  #authShell .login-benefits small {
    max-width: 9ch !important;
    font-size: 0.56rem !important;
    line-height: 1.25 !important;
    color: #b7b0ca !important;
  }

  #authShell .login-form-panel {
    margin-top: 30px !important;
    padding: 0 8px !important;
    gap: 16px !important;
    background: transparent !important;
    align-items: stretch !important;
  }

  #authShell .login-form-panel::before,
  #authShell .login-form-panel > .auth-brand-row {
    display: none !important;
  }

  #authShell .login-form-panel > .auth-copy,
  #authShell .login-form-panel > .auth-panels,
  #authShell .login-form-panel > .auth-message {
    width: 100% !important;
  }

  #authShell .auth-copy .eyebrow,
  #authShell .auth-copy .eyebrow.dark {
    margin-bottom: 14px !important;
    padding: 8px 14px !important;
    font-size: 0.62rem !important;
  }

  #authShell .auth-copy h1 {
    font-size: clamp(1.62rem, 7.8vw, 2.12rem) !important;
    line-height: 1.08 !important;
  }

  #authShell .auth-subtitle {
    max-width: 29ch !important;
    margin-top: 12px !important;
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
  }

  #authShell .auth-form {
    gap: 13px !important;
  }

  #authShell .name-field > span {
    font-size: 0.68rem !important;
  }

  #authShell .name-field input,
  #authShell .auth-submit {
    height: 52px !important;
    border-radius: 11px !important;
  }

  #authShell .name-field input {
    padding-left: 48px !important;
    font-size: 0.9rem !important;
  }

  #authShell .login-field::before {
    left: 17px !important;
    bottom: 17px !important;
  }

  #authShell .login-password-toggle {
    bottom: 8px !important;
    right: 10px !important;
  }

  #authShell .login-form-options {
    font-size: 0.72rem !important;
  }

  #authShell .auth-submit {
    margin-top: 2px !important;
    font-size: 0.95rem !important;
  }

  #authShell .auth-switch-row {
    margin-top: 5px !important;
    font-size: 0.78rem !important;
  }
}

@media screen and (max-width: 360px) {
  #authShell.auth-shell {
    padding-inline: 12px !important;
  }

  #authShell .login-visual__stage {
    right: -12px !important;
    width: 56% !important;
  }

  #authShell .login-mascot {
    width: min(208px, 100%) !important;
  }

  #authShell .login-benefits {
    gap: 5px !important;
  }

  #authShell .login-form-panel {
    padding-inline: 2px !important;
  }
}

/* Dark home override must stay last: desktop was still inheriting light surfaces. */
body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero {
  border-color: rgba(167, 139, 250, 0.24) !important;
  background:
    radial-gradient(circle at 78% 54%, rgba(124, 58, 237, 0.30), transparent 34%),
    linear-gradient(135deg, rgba(18, 13, 54, 0.96), rgba(10, 8, 30, 0.98)) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero .hero-wordmark,
body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero h1 {
  color: #f8f7ff !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero h1 strong {
  color: #a78bfa !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero .subtitle {
  color: #c7c2dd !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero .hero-eyebrow,
body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero .hero-copy::before {
  color: #ddd6fe !important;
  background: rgba(124, 58, 237, 0.22) !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero-source-box {
  border-color: rgba(167, 139, 250, 0.22) !important;
  background: linear-gradient(135deg, rgba(18, 13, 48, 0.94), rgba(12, 9, 34, 0.96)) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero-source-box .hero-view-context {
  color: #f2efff !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero-source-box .source-picker-button {
  border-color: rgba(167, 139, 250, 0.24) !important;
  color: #f8f7ff !important;
  background: rgba(22, 17, 50, 0.96) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22) !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero-panel > div,
body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero-panel > div:nth-child(2),
body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero-panel > div:nth-child(3) {
  border-color: rgba(167, 139, 250, 0.20) !important;
  background: linear-gradient(180deg, rgba(18, 13, 48, 0.96), rgba(12, 9, 34, 0.96)) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero-panel .stat-value {
  color: #f8f7ff !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero-panel .stat-label {
  color: #a78bfa !important;
}

body[data-theme="dark"] main.app-shell.is-home-active > section.home-panel.app-section.vibra-home > .hero-panel small {
  color: #b9b3cf !important;
}

/* Cadastro layout final: fill the circled empty desktop area. */
@media (min-width: 901px) {
  .music-form-panel[data-section-panel="cadastro"] .music-form {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: start !important;
  }

  .music-form-panel[data-section-panel="cadastro"] .harmonic-field {
    grid-column: span 3 !important;
  }

  .music-form-panel[data-section-panel="cadastro"] .video-link-field,
  .music-form-panel[data-section-panel="cadastro"] .excerpt-field {
    grid-column: span 2 !important;
  }

  .music-form-panel[data-section-panel="cadastro"] .excerpt-field textarea {
    min-height: 54px !important;
  }
}

/* Complete profile last cascade guard */
.profile-editor-panel :where(input, select, textarea),
.profile-add-row select {
  width: 100%;
}

.profile-editor-panel :where(button, input, select, textarea):focus-visible {
  outline: 3px solid rgba(124, 58, 237, 0.35);
  outline-offset: 2px;
}

body[data-theme="dark"] .profile-editor-panel :where(input, select, textarea),
body[data-theme="dark"] .profile-add-row select {
  border-color: rgba(167, 139, 250, 0.28) !important;
  color: #f8f7ff !important;
  background: rgba(10, 8, 30, 0.86) !important;
}

body[data-theme="dark"] .profile-field-error {
  color: #fca5a5 !important;
}
/* Profile onboarding visual refinement */
.profile-editor-panel {
  --profile-surface: rgba(255, 255, 255, 0.92);
  --profile-surface-strong: rgba(255, 255, 255, 0.98);
  --profile-muted-surface: rgba(124, 58, 237, 0.07);
  --profile-line: rgba(88, 80, 136, 0.18);
  --profile-line-strong: rgba(124, 58, 237, 0.36);
  --profile-text: #171332;
  --profile-muted: #6b6687;
  --profile-accent: #7c3aed;
  --profile-accent-2: #4f46e5;
  --profile-glow: rgba(124, 58, 237, 0.26);
  --profile-shadow: 0 22px 60px rgba(23, 19, 50, 0.11);
  width: min(100%, 960px);
  justify-self: center;
  gap: 18px;
  padding: 18px;
  border-color: var(--profile-line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 8%, rgba(124, 58, 237, 0.16), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 247, 252, 0.94));
  box-shadow: var(--profile-shadow);
  color: var(--profile-text);
}

.profile-editor-head {
  position: relative;
  overflow: hidden;
  align-items: center;
  padding: 22px;
  border-color: var(--profile-line);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(245, 241, 255, 0.9)),
    radial-gradient(circle at 82% 22%, rgba(124, 58, 237, 0.18), transparent 36%);
  box-shadow: 0 14px 36px rgba(23, 19, 50, 0.08);
}

.profile-editor-title-block {
  max-width: 580px;
}

.profile-editor-kicker {
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.1);
  letter-spacing: 0.06em;
}

.profile-editor-head h2 {
  margin: 0;
  color: var(--profile-text);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  line-height: 1.05;
}

.profile-editor-head span,
.profile-editor-head small {
  color: var(--profile-muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.profile-progress-card {
  min-width: 250px;
  padding: 14px;
  border-color: var(--profile-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: none;
}

.profile-progress-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.profile-progress-card-head span {
  color: var(--profile-muted);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-progress-card strong {
  color: var(--profile-text);
  font-size: 0.9rem;
}

.profile-progress-track {
  height: 11px;
  background: rgba(88, 80, 136, 0.13);
}

.profile-progress-track span {
  background: linear-gradient(90deg, var(--profile-accent), #a855f7 52%, var(--profile-accent-2));
  box-shadow: 0 0 18px var(--profile-glow);
  transition: width 0.28s ease;
}

.profile-head-wave {
  position: absolute;
  right: 24px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.35;
  pointer-events: none;
}

.profile-head-wave span {
  width: 5px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, #c084fc, #6366f1);
}

.profile-head-wave span:nth-child(2n) {
  height: 36px;
}

.profile-head-wave span:nth-child(3n) {
  height: 16px;
}

.profile-editor-form {
  max-width: 900px;
  width: 100%;
  justify-self: center;
  gap: 18px;
}

.profile-stepper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 8px;
  border: 1px solid var(--profile-line);
  border-radius: 16px;
  background: var(--profile-surface);
}

.profile-stepper::before {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.24), transparent);
  transform: translateY(-50%);
  pointer-events: none;
}

.profile-step {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  color: var(--profile-muted);
  background: transparent;
  font-size: 0.92rem;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.profile-step:hover {
  background: rgba(124, 58, 237, 0.08);
  color: var(--profile-text);
}

.profile-step-number {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--profile-line-strong);
  border-radius: 999px;
  background: var(--profile-surface-strong);
  color: var(--profile-accent);
  font-weight: 900;
}

.profile-step.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--profile-accent), var(--profile-accent-2));
  box-shadow: 0 12px 28px var(--profile-glow);
}

.profile-step.is-active .profile-step-number {
  border-color: rgba(255, 255, 255, 0.58);
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.profile-step.is-complete .profile-step-number {
  color: #fff;
  background: #22c55e;
  border-color: #22c55e;
  font-size: 0;
}

.profile-step.is-complete .profile-step-number::before {
  content: "OK";
  font-size: 0.68rem;
}

.profile-step-panel {
  padding: 22px;
  border-color: var(--profile-line);
  border-radius: 18px;
  background: var(--profile-surface);
  box-shadow: 0 16px 44px rgba(23, 19, 50, 0.08);
  animation: profilePanelIn 0.2s ease;
}

.profile-step-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.profile-step-icon,
.profile-id-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--profile-accent), var(--profile-accent-2));
  box-shadow: 0 12px 26px var(--profile-glow);
  font-weight: 900;
}

.profile-step-card-head h3 {
  margin: 0 0 3px;
  color: var(--profile-text);
  font-size: 1.1rem;
}

.profile-step-card-head p {
  margin: 0;
  color: var(--profile-muted);
  font-size: 0.92rem;
}

.profile-form-grid {
  gap: 14px;
}

.profile-editor-panel .name-field {
  gap: 7px;
}

.profile-editor-panel .name-field > span,
.profile-multi-field > label,
.profile-multi-field > span {
  color: var(--profile-text);
  font-size: 0.82rem;
  font-weight: 850;
  text-transform: none;
}

.profile-editor-panel .name-field > small:not(.profile-field-error),
.profile-help,
.profile-bio-field > small:not(.profile-field-error) {
  color: var(--profile-muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.profile-editor-panel :where(input, select, textarea),
.profile-add-row select {
  min-height: 46px;
  border: 1px solid var(--profile-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--profile-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.profile-editor-panel textarea {
  min-height: 132px;
  resize: vertical;
}

.profile-editor-panel :where(input, select, textarea)::placeholder {
  color: rgba(107, 102, 135, 0.72);
}

.profile-editor-panel :where(button, input, select, textarea):focus-visible,
.profile-check:focus-within {
  outline: 3px solid rgba(124, 58, 237, 0.2);
  outline-offset: 2px;
  border-color: var(--profile-line-strong);
}

.profile-readonly-id {
  display: flex;
  align-items: center;
  gap: 12px;
  border-color: var(--profile-line);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(79, 70, 229, 0.06));
}

.profile-nickname-field {
  grid-column: 1 / -1;
}

.profile-nickname-input {
  display: flex;
  align-items: center;
  min-height: 46px;
  border: 1px solid var(--profile-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  overflow: hidden;
}

.profile-nickname-input > span {
  display: grid;
  width: 42px;
  align-self: stretch;
  place-items: center;
  color: var(--profile-accent);
  background: rgba(124, 58, 237, 0.09);
  font-weight: 900;
}

.profile-nickname-input input {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.profile-nickname-input:focus-within {
  border-color: var(--profile-line-strong);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.16);
}

.profile-nickname-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.profile-nickname-field:has(#profileNickname.is-valid) .profile-nickname-input {
  border-color: rgba(34, 197, 94, 0.5);
}

.profile-nickname-field:has(#profileNickname.is-invalid) .profile-nickname-input {
  border-color: rgba(220, 38, 38, 0.52);
}

.profile-nickname-field:has(#profileNickname.is-checking) .profile-nickname-input {
  border-color: rgba(124, 58, 237, 0.48);
}

.profile-readonly-id > div {
  display: grid;
  gap: 4px;
}

.profile-readonly-id span:not(.profile-id-icon) {
  color: var(--profile-muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.profile-readonly-id strong {
  color: var(--profile-text);
  font-size: 1.18rem;
}

.profile-readonly-id small {
  color: var(--profile-muted);
  line-height: 1.35;
}

.profile-check {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 14px;
  border-color: var(--profile-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.68);
  cursor: pointer;
}

.profile-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.profile-check-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.profile-check-copy strong {
  color: var(--profile-text);
  font-size: 0.9rem;
  line-height: 1.3;
}

.profile-check-copy small {
  color: var(--profile-muted);
  line-height: 1.35;
}

.profile-switch-visual {
  position: relative;
  width: 48px;
  height: 28px;
  order: 2;
  border: 1px solid var(--profile-line);
  border-radius: 999px;
  background: rgba(88, 80, 136, 0.16);
  transition: background 0.18s ease, border-color 0.18s ease;
}

.profile-switch-visual::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(23, 19, 50, 0.2);
  transition: transform 0.18s ease;
}

.profile-check input:checked + .profile-switch-visual {
  border-color: transparent;
  background: linear-gradient(135deg, var(--profile-accent), var(--profile-accent-2));
}

.profile-check input:checked + .profile-switch-visual::after {
  transform: translateX(20px);
}

.profile-multi-field {
  border-color: var(--profile-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.68);
}

.profile-add-row {
  gap: 8px;
}

.profile-add-row .secondary-button {
  min-height: 46px;
  border-radius: 12px;
}

.profile-chip-list {
  min-height: 38px;
}

.profile-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 10px;
  border-color: rgba(124, 58, 237, 0.28);
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.09);
  color: var(--profile-text);
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.profile-chip:hover {
  transform: translateY(-1px);
  border-color: var(--profile-line-strong);
  background: rgba(124, 58, 237, 0.14);
}

.profile-chip strong {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 999px;
  background: rgba(23, 19, 50, 0.08);
  font-size: 0.9rem;
}

.profile-option-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-option-button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 12px;
  border-color: var(--profile-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--profile-text);
  line-height: 1.25;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.profile-option-button:hover {
  transform: translateY(-1px);
  border-color: var(--profile-line-strong);
}

.profile-option-button.is-selected {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--profile-accent), var(--profile-accent-2));
  box-shadow: 0 12px 26px var(--profile-glow);
}

.profile-option-check {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 0.75;
}

.profile-option-button.is-selected .profile-option-check::before {
  content: "OK";
  font-size: 0.62rem;
  font-weight: 900;
}

.profile-bio-field {
  position: relative;
}

.profile-bio-count {
  justify-self: end;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--profile-muted-surface);
  color: var(--profile-muted);
}

.profile-field-error {
  min-height: 16px;
  color: #b42318;
}

.profile-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 2px;
}

.profile-editor-actions .primary-button,
.profile-editor-actions .secondary-button {
  min-height: 46px;
  border-radius: 12px;
}

#profileSkip {
  margin-right: auto;
  border-color: transparent;
  background: transparent;
  color: var(--profile-muted);
  box-shadow: none;
}

#profileNextStep,
#profileSave {
  min-width: 160px;
}

body[data-theme="dark"] .profile-editor-panel {
  --profile-surface: rgba(18, 14, 46, 0.9);
  --profile-surface-strong: rgba(26, 21, 62, 0.96);
  --profile-muted-surface: rgba(167, 139, 250, 0.12);
  --profile-line: rgba(190, 176, 255, 0.18);
  --profile-line-strong: rgba(196, 181, 253, 0.44);
  --profile-text: #f8f7ff;
  --profile-muted: #c8c2df;
  --profile-accent: #8b5cf6;
  --profile-accent-2: #6366f1;
  --profile-glow: rgba(139, 92, 246, 0.34);
  --profile-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  border-color: rgba(167, 139, 250, 0.22);
  background:
    radial-gradient(circle at 86% 8%, rgba(139, 92, 246, 0.2), transparent 32%),
    linear-gradient(180deg, rgba(17, 14, 43, 0.96), rgba(13, 17, 33, 0.96));
}

body[data-theme="dark"] .profile-editor-head,
body[data-theme="dark"] .profile-stepper,
body[data-theme="dark"] .profile-step-panel,
body[data-theme="dark"] .profile-progress-card,
body[data-theme="dark"] .profile-readonly-id,
body[data-theme="dark"] .profile-multi-field,
body[data-theme="dark"] .profile-check {
  border-color: var(--profile-line);
  background: var(--profile-surface);
}

body[data-theme="dark"] .profile-editor-head {
  background:
    radial-gradient(circle at 82% 22%, rgba(139, 92, 246, 0.22), transparent 36%),
    linear-gradient(135deg, rgba(22, 17, 50, 0.96), rgba(14, 18, 36, 0.94));
}

body[data-theme="dark"] .profile-editor-head h2,
body[data-theme="dark"] .profile-step-card-head h3,
body[data-theme="dark"] .profile-readonly-id strong,
body[data-theme="dark"] .profile-check-copy strong,
body[data-theme="dark"] .profile-editor-panel .name-field > span,
body[data-theme="dark"] .profile-multi-field > label,
body[data-theme="dark"] .profile-multi-field > span,
body[data-theme="dark"] .profile-chip,
body[data-theme="dark"] .profile-option-button {
  color: var(--profile-text);
}

body[data-theme="dark"] .profile-editor-head span,
body[data-theme="dark"] .profile-editor-head small,
body[data-theme="dark"] .profile-step-card-head p,
body[data-theme="dark"] .profile-readonly-id small,
body[data-theme="dark"] .profile-check-copy small,
body[data-theme="dark"] .profile-editor-panel .name-field > small:not(.profile-field-error),
body[data-theme="dark"] .profile-help,
body[data-theme="dark"] .profile-bio-field > small:not(.profile-field-error) {
  color: var(--profile-muted);
}

body[data-theme="dark"] .profile-editor-panel :where(input, select, textarea),
body[data-theme="dark"] .profile-add-row select,
body[data-theme="dark"] .profile-nickname-input {
  border-color: var(--profile-line);
  background: rgba(11, 15, 30, 0.92);
  color: var(--profile-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-theme="dark"] .profile-nickname-input > span {
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.16);
}

body[data-theme="dark"] .profile-editor-panel :where(input, select, textarea)::placeholder {
  color: rgba(200, 194, 223, 0.68);
}

body[data-theme="dark"] .profile-step-number,
body[data-theme="dark"] .profile-option-button,
body[data-theme="dark"] .profile-chip {
  background: rgba(26, 21, 62, 0.86);
}

body[data-theme="dark"] .profile-check input:checked + .profile-switch-visual::after {
  background: #f8f7ff;
}

body[data-theme="dark"] .profile-chip strong {
  background: rgba(248, 247, 255, 0.12);
}

body[data-theme="dark"] .profile-field-error {
  color: #fca5a5;
}

@keyframes profilePanelIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-step-panel,
  .profile-step,
  .profile-chip,
  .profile-option-button,
  .profile-progress-track span,
  .profile-switch-visual,
  .profile-switch-visual::after {
    animation: none;
    transition: none;
  }
}

@media (max-width: 760px) {
  .profile-social-panel {
    width: 100%;
    padding: 10px 10px calc(108px + env(safe-area-inset-bottom));
  }

  .profile-social-shell {
    gap: 12px;
  }

  .profile-social-cover {
    min-height: 136px;
    border-radius: 18px;
  }

  .profile-social-cover-edit {
    min-height: 30px;
    right: 10px;
    top: 10px;
    padding: 0 10px;
    font-size: 0.7rem;
  }

  .profile-social-card {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: -58px;
    padding: 0 6px;
  }

  .profile-social-avatar-wrap {
    width: 112px;
    height: 112px;
    margin-left: 8px;
  }

  .profile-social-avatar {
    width: 112px;
    height: 112px;
    border-width: 4px;
    font-size: 2rem;
  }

  .profile-social-photo-edit {
    width: 32px;
    height: 32px;
    right: 0;
    bottom: 4px;
  }

  .profile-social-main,
  .profile-social-side,
  .profile-social-section,
  .profile-social-future {
    border-radius: 16px;
  }

  .profile-social-main {
    min-height: 0;
    padding: 16px;
  }

  .profile-social-main strong {
    font-size: 1.55rem;
  }

  .profile-social-main p:last-child {
    font-size: 0.95rem;
  }

  .profile-social-side {
    padding: 12px;
  }

  .profile-social-metrics {
    gap: 6px;
  }

  .profile-social-metrics div {
    min-height: 58px;
    border-radius: 12px;
  }

  .profile-social-metrics strong {
    font-size: 1.18rem;
  }

  .profile-social-metrics span {
    font-size: 0.66rem;
  }

  .profile-social-actions {
    grid-template-columns: 1fr 1fr;
  }

  .profile-social-actions .primary-button,
  .profile-social-actions .secondary-button {
    width: 100%;
    min-width: 0;
    padding-inline: 8px;
  }

  .profile-social-tabs {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .profile-social-tabs button {
    min-width: 0;
    padding: 0 10px;
  }

  .profile-social-grid {
    grid-template-columns: 1fr;
  }

  .profile-social-feature,
  .profile-social-wide {
    grid-column: auto;
  }

  .profile-social-section {
    padding: 16px;
  }

  .profile-social-chip-list,
  .profile-social-goals {
    gap: 8px;
  }

  .profile-social-chip {
    padding: 8px 11px;
  }

  .profile-social-goal {
    width: 100%;
  }

  .app-shell.is-social-profile-active ~ .bottom-nav-bar {
    position: sticky !important;
    left: auto !important;
    right: auto !important;
    bottom: max(7px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    margin: 12px 10px max(7px, env(safe-area-inset-bottom)) !important;
  }

  .profile-editor-panel {
    width: 100%;
    padding: 12px 12px calc(104px + env(safe-area-inset-bottom));
    border-radius: 14px;
  }

  .profile-editor-head {
    align-items: stretch;
    padding: 16px;
  }

  .profile-editor-head h2 {
    font-size: 1.55rem;
  }

  .profile-progress-card {
    min-width: 0;
    width: 100%;
  }

  .profile-head-wave {
    right: 16px;
    bottom: 12px;
    transform: scale(0.78);
    transform-origin: right bottom;
  }

  .profile-stepper {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 6px;
    overflow: hidden;
  }

  .profile-stepper::before {
    left: 18%;
    right: 18%;
  }

  .profile-step {
    flex-direction: column;
    gap: 5px;
    min-height: 64px;
    padding: 7px 4px;
    font-size: 0.76rem;
    line-height: 1.15;
    white-space: normal;
  }

  .profile-step-number {
    width: 28px;
    height: 28px;
  }

  .profile-step-panel {
    padding: 16px;
  }

  .profile-form-grid,
  .profile-option-grid {
    grid-template-columns: 1fr;
  }

  .profile-readonly-id {
    align-items: flex-start;
  }

  .profile-check {
    grid-template-columns: 1fr auto;
  }

  .profile-add-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .profile-add-row select {
    min-width: 0;
  }

  .profile-editor-actions {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    align-items: center;
  }

  #profileSkip {
    grid-column: 1 / -1;
    justify-self: start;
    margin: 0 0 2px;
    min-height: 34px;
    padding-left: 0;
  }

  #profileBackStep,
  #profileNextStep,
  #profileSave {
    width: 100%;
    min-width: 0;
  }

.profile-editor-actions #profileSave {
    grid-column: 2;
  }
}

.profile-message:empty {
  display: none;
}

.profile-editor-panel :where(input, select, textarea, button, .profile-check, .profile-chip, .profile-option-button) {
  scroll-margin-bottom: calc(96px + env(safe-area-inset-bottom));
}

@media (max-width: 760px) {
  .profile-editor-panel {
    gap: 12px;
  }

  .profile-editor-title-block {
    max-width: none;
  }

  .profile-editor-head small {
    display: none;
  }

  .profile-editor-head span {
    font-size: 0.92rem;
  }

  .profile-progress-card-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .profile-head-wave {
    opacity: 0.28;
  }

  .profile-step-card-head {
    align-items: flex-start;
  }

  .profile-switch-visual {
    width: 46px;
    flex: 0 0 auto;
  }

  .app-shell.is-profile-active ~ .bottom-nav-bar {
    position: sticky !important;
    left: auto !important;
    right: auto !important;
    bottom: max(7px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    margin: 12px 10px max(7px, env(safe-area-inset-bottom)) !important;
  }
}

/* Mobile width guard for the profile completion flow */
@media (max-width: 760px) {
  .profile-editor-panel,
  .profile-editor-panel *,
  .profile-editor-panel *::before,
  .profile-editor-panel *::after {
    box-sizing: border-box;
  }

  .profile-editor-panel {
    width: 100% !important;
    max-width: calc(100vw - 20px) !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    overflow-x: hidden !important;
    padding-inline: 10px !important;
  }

  .profile-editor-form,
  .profile-editor-head,
  .profile-stepper,
  .profile-step-panel,
  .profile-form-grid,
  .profile-multi-field,
  .profile-readonly-id,
  .profile-check,
  .profile-photo-editor,
  .profile-editor-actions,
  .profile-add-row,
  .profile-nickname-input,
  .profile-nickname-meta,
  .profile-chip-list,
  .profile-option-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .profile-editor-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    overflow: hidden !important;
  }

  .profile-editor-title-block,
  .profile-progress-card,
  .profile-step-card-head > div,
  .profile-readonly-id > div,
  .profile-check-copy,
  .profile-photo-editor > div,
  .profile-multi-field > label,
  .profile-multi-field > span,
  .profile-nickname-meta > *,
  .profile-chip,
  .profile-option-button {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }

  .profile-editor-head h2 {
    font-size: clamp(1.32rem, 7vw, 1.55rem) !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere;
  }

  .profile-photo-editor {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  .profile-photo-preview {
    width: 56px !important;
    height: 56px !important;
    font-size: 1.25rem !important;
  }

  .profile-step {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .profile-step span:last-child {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .profile-editor-panel :where(input, select, textarea) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .profile-editor-actions {
    grid-template-columns: 1fr !important;
  }

  #profileSkip,
  #profileBackStep,
  #profileNextStep,
  #profileSave {
    grid-column: auto !important;
    justify-self: stretch !important;
    width: 100% !important;
  }
}
/* Cadastro de musica Vibra - escopo isolado */
.vibra-song-form-page {
  --vibra-purple: #6d3df5;
  --vibra-purple-dark: #4c1fd1;
  --vibra-lilac: #f3efff;
  --vibra-border: #e7e4ef;
  --vibra-text: #1f1b2d;
  --vibra-muted: #747080;
  --vibra-background: #f8f7fb;
  max-width: 1320px;
  margin-inline: auto;
  padding: 24px;
  border: 0;
  background: var(--vibra-background);
  box-shadow: none;
}

.vibra-song-form-page .vibra-song-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  margin: 0 0 18px;
  padding: 0;
}

.vibra-song-form-page .vibra-song-title-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.vibra-song-form-page .vibra-song-icon {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: var(--vibra-purple);
  background: var(--vibra-lilac);
}

.vibra-song-form-page .vibra-song-icon svg {
  width: 24px;
  height: 24px;
}

.vibra-song-form-page .vibra-song-subtitle {
  margin: 6px 0 0;
  color: var(--vibra-muted);
  font-size: 0.98rem;
}

.vibra-song-form-page .vibra-song-head-actions {
  display: flex;
  gap: 10px;
}

.vibra-song-form-page #musicMessage {
  grid-column: 1 / -1;
  min-height: 20px;
}

.vibra-song-form-page .music-form {
  display: block;
}

.vibra-song-form-page .vibra-song-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 0.38fr);
  gap: 18px;
  align-items: start;
}

.vibra-song-form-page .vibra-song-main,
.vibra-song-form-page .vibra-song-side {
  display: grid;
  gap: 18px;
}

.vibra-song-form-page .vibra-song-side {
  position: sticky;
  top: 14px;
}

.vibra-song-form-page .vibra-form-card {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--vibra-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(31, 27, 45, 0.07);
}

.vibra-song-form-page .vibra-card-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.vibra-song-form-page .vibra-card-head h3 {
  margin: 0;
  color: var(--vibra-text);
  font-size: 1.02rem;
}

.vibra-song-form-page .vibra-card-head p,
.vibra-song-form-page .vibra-side-note {
  margin: 6px 0 0;
  color: var(--vibra-muted);
  line-height: 1.5;
}

.vibra-song-form-page .vibra-form-grid {
  display: grid;
  gap: 14px;
}

.vibra-song-form-page .vibra-form-grid-main {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.vibra-song-form-page .title-field {
  grid-column: span 3;
}

.vibra-song-form-page .artist-field,
.vibra-song-form-page .video-link-field {
  grid-column: span 2;
}

.vibra-song-form-page .vibra-field {
  display: grid;
  gap: 7px;
  color: var(--vibra-text);
  font-weight: 700;
}

.vibra-song-form-page .vibra-field input,
.vibra-song-form-page .vibra-field select,
.vibra-song-form-page .vibra-field textarea,
.vibra-song-form-page .vibra-theory-box input,
.vibra-song-form-page .vibra-theory-box textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--vibra-border);
  border-radius: 8px;
  background: #fff;
  color: var(--vibra-text);
  font: inherit;
  font-weight: 500;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.vibra-song-form-page .vibra-field input:focus,
.vibra-song-form-page .vibra-field select:focus,
.vibra-song-form-page .vibra-field textarea:focus {
  border-color: var(--vibra-purple);
  box-shadow: 0 0 0 4px rgba(109, 61, 245, 0.14);
  outline: 0;
}

.vibra-song-form-page .field-error {
  min-height: 16px;
  color: #b42318;
  font-size: 0.78rem;
}

.vibra-song-form-page .vibra-lyrics-card textarea {
  min-height: 500px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  line-height: 1.75;
}

.vibra-song-form-page .vibra-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.vibra-song-form-page .vibra-editor-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--vibra-muted);
  font-size: 0.86rem;
}

.vibra-song-form-page .vibra-remember-card {
  background: linear-gradient(180deg, #fbf9ff, #fff);
}

.vibra-song-form-page .vibra-remember-card textarea {
  min-height: 180px !important;
  resize: vertical;
  background: #fdfbff;
}

.vibra-song-form-page .vibra-side-grid {
  grid-template-columns: 1fr 1fr;
}

.vibra-song-form-page .vibra-side-grid small {
  color: var(--vibra-muted);
  font-size: 0.76rem;
  font-weight: 500;
}

.vibra-song-form-page .vibra-theory-box {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(109, 61, 245, 0.16);
  border-radius: 8px;
  background: var(--vibra-lilac);
}

.vibra-song-form-page .vibra-theory-box span {
  color: var(--vibra-purple-dark);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.vibra-song-form-page .vibra-theory-box input,
.vibra-song-form-page .vibra-theory-box textarea {
  background: rgba(255,255,255,0.76);
}

.vibra-song-form-page .vibra-song-summary {
  display: grid;
  gap: 10px;
  margin: 0;
}

.vibra-song-form-page .vibra-song-summary div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--vibra-border);
}

.vibra-song-form-page .vibra-song-summary div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.vibra-song-form-page .vibra-song-summary dt {
  color: var(--vibra-muted);
  font-size: 0.82rem;
}

.vibra-song-form-page .vibra-song-summary dd {
  margin: 0;
  color: var(--vibra-text);
  font-weight: 800;
  text-align: right;
}

.vibra-song-form-page .vibra-tips-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 18px;
  color: var(--vibra-muted);
  line-height: 1.45;
}

.vibra-song-form-page .vibra-song-actions {
  position: sticky;
  bottom: 12px;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(109, 61, 245, 0.14);
  border-radius: 8px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
}

.vibra-song-form-page .primary-button {
  background: linear-gradient(135deg, var(--vibra-purple), #8b5cf6);
}

.song-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
}

.song-preview-modal.is-hidden {
  display: none;
}

.song-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 14, 28, 0.48);
}

.song-preview-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  width: min(860px, 100%);
  max-height: min(86vh, 760px);
  padding: 20px;
  overflow: auto;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}

.song-preview-head,
.song-preview-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.song-preview-sheet h4 {
  margin: 0 0 4px;
  font-size: 1.55rem;
}

.song-preview-sheet p {
  margin: 0;
  color: var(--vibra-muted, #747080);
}

.song-preview-sheet section {
  margin-top: 18px;
}

.song-preview-sheet pre {
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  line-height: 1.75;
}

body[data-theme="dark"] .vibra-song-form-page {
  --vibra-text: #f7f4ff;
  --vibra-muted: #b8b0c8;
  --vibra-background: #13111b;
  --vibra-border: rgba(221, 214, 254, 0.18);
  --vibra-lilac: rgba(109, 61, 245, 0.18);
  background: var(--vibra-background);
}

body[data-theme="dark"] .vibra-song-form-page .vibra-form-card,
body[data-theme="dark"] .song-preview-dialog {
  background: #1c1827;
  border-color: var(--vibra-border);
}

body[data-theme="dark"] .vibra-song-form-page .vibra-field input,
body[data-theme="dark"] .vibra-song-form-page .vibra-field select,
body[data-theme="dark"] .vibra-song-form-page .vibra-field textarea,
body[data-theme="dark"] .vibra-song-form-page .vibra-theory-box input,
body[data-theme="dark"] .vibra-song-form-page .vibra-theory-box textarea {
  background: #151220;
  color: var(--vibra-text);
}

body[data-theme="dark"] .vibra-song-form-page .vibra-song-actions {
  background: rgba(28, 24, 39, 0.92);
}

@media (max-width: 980px) {
  .vibra-song-form-page {
    padding: 18px;
  }

  .vibra-song-form-page .vibra-song-hero,
  .vibra-song-form-page .vibra-song-layout,
  .vibra-song-form-page .vibra-form-grid-main {
    grid-template-columns: 1fr;
  }

  .vibra-song-form-page .title-field,
  .vibra-song-form-page .artist-field,
  .vibra-song-form-page .video-link-field {
    grid-column: auto;
  }

  .vibra-song-form-page .vibra-song-side {
    position: static;
  }
}

@media (max-width: 640px) {
  .vibra-song-form-page {
    padding: 16px;
  }

  .vibra-song-form-page .vibra-card-head,
  .vibra-song-form-page .vibra-editor-meta,
  .vibra-song-form-page .vibra-song-head-actions,
  .vibra-song-form-page .vibra-song-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .vibra-song-form-page .vibra-form-card {
    padding: 16px;
  }

  .vibra-song-form-page .vibra-side-grid {
    grid-template-columns: 1fr;
  }

  .vibra-song-form-page .vibra-lyrics-card textarea {
    min-height: 380px;
  }

  .vibra-song-form-page .vibra-remember-card textarea {
    min-height: 160px !important;
  }

  .vibra-song-form-page .vibra-song-actions {
    bottom: 86px;
  }
}

/* Refinamento premium do cadastro de musica */
.vibra-song-form-page {
  --vibra-card: #ffffff;
  --vibra-soft: #fbfaff;
  --vibra-input: #fdfdff;
  --vibra-shadow: 0 18px 44px rgba(31, 27, 45, 0.075);
  max-width: 1360px;
  padding: 24px 24px 40px;
}

.vibra-song-form-page .vibra-song-hero {
  gap: 24px;
  margin-bottom: 22px;
  padding: 18px 20px;
  border: 1px solid var(--vibra-border);
  border-radius: 16px;
  background: var(--vibra-card);
  box-shadow: var(--vibra-shadow);
}

.vibra-song-form-page .vibra-song-title-group {
  gap: 16px;
}

.vibra-song-form-page .vibra-song-icon {
  flex-basis: 56px;
  width: 56px;
  height: 56px;
  border-radius: 16px;
}

.vibra-song-form-page .music-form-head h2 {
  margin-top: 2px;
  font-size: 1.5rem;
  line-height: 1.18;
}

.vibra-song-form-page .vibra-song-subtitle {
  max-width: 620px;
  font-size: 0.94rem;
  line-height: 1.45;
}

.vibra-song-form-page .vibra-song-head-actions,
.vibra-song-form-page .vibra-song-actions {
  align-items: center;
}

.vibra-song-form-page .primary-button,
.vibra-song-form-page .secondary-button {
  min-height: 44px;
  border-radius: 10px;
  font-size: 0.92rem;
}

.vibra-song-form-page .primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 12px 24px rgba(109, 61, 245, 0.22);
}

.vibra-song-form-page .primary-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vibra-song-form-page .primary-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(109, 61, 245, 0.26);
}

.vibra-song-form-page .primary-button:disabled {
  opacity: 0.7;
  cursor: wait;
}

.vibra-song-form-page .vibra-song-layout {
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
}

.vibra-song-form-page .vibra-song-main,
.vibra-song-form-page .vibra-song-side {
  gap: 20px;
}

.vibra-song-form-page .vibra-form-card {
  gap: 18px;
  padding: 24px;
  border-radius: 16px;
  background: var(--vibra-card);
  box-shadow: var(--vibra-shadow);
}

.vibra-song-form-page .vibra-card-head h3 {
  font-size: 1.08rem;
  line-height: 1.25;
}

.vibra-song-form-page .vibra-card-head p,
.vibra-song-form-page .vibra-side-note,
.vibra-song-form-page .vibra-tips-list {
  font-size: 0.88rem;
  line-height: 1.55;
}

.vibra-song-form-page .vibra-form-grid {
  gap: 16px;
}

.vibra-song-form-page .vibra-form-grid-main {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.vibra-song-form-page .title-field {
  grid-column: span 7;
}

.vibra-song-form-page .artist-field {
  grid-column: span 5;
}

.vibra-song-form-page .category-field {
  grid-column: span 4;
}

.vibra-song-form-page .video-link-field {
  grid-column: span 8;
}

.vibra-song-form-page .vibra-field {
  gap: 9px;
  font-size: 0.82rem;
}

.vibra-song-form-page .vibra-field input,
.vibra-song-form-page .vibra-field select,
.vibra-song-form-page .vibra-field textarea {
  min-height: 48px;
  border-radius: 10px;
  background: var(--vibra-input);
  font-size: 0.94rem;
}

.vibra-song-form-page .vibra-field input::placeholder,
.vibra-song-form-page .vibra-field textarea::placeholder {
  color: #8c88a3;
}

.vibra-song-form-page .vibra-field [aria-invalid="true"] {
  border-color: #d92d20;
  box-shadow: 0 0 0 4px rgba(217, 45, 32, 0.09);
}

.vibra-song-form-page .field-error {
  font-size: 0.8rem;
  line-height: 1.25;
}

.vibra-song-form-page .vibra-lyrics-card {
  background: linear-gradient(180deg, #fff, #fbfaff);
}

.vibra-song-form-page .vibra-lyrics-card .vibra-card-head {
  align-items: center;
}

.vibra-song-form-page .vibra-editor-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
}

.vibra-song-form-page .vibra-editor-actions span {
  margin-right: 4px;
  color: var(--vibra-muted);
  font-size: 0.86rem;
  white-space: nowrap;
}

.vibra-song-form-page .vibra-editor-actions .secondary-button {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 9px;
}

.vibra-song-form-page .vibra-lyrics-card textarea {
  min-height: 540px;
  padding: 18px;
  background: #fbfcff;
  font-size: 0.95rem;
  line-height: 1.7;
}

.vibra-song-form-page .vibra-editor-meta {
  font-size: 0.88rem;
}

.vibra-song-form-page .vibra-side-grid {
  grid-template-columns: 1fr;
}

.vibra-song-form-page .vibra-side-grid select {
  white-space: nowrap;
  text-overflow: ellipsis;
}

.vibra-song-form-page .vibra-theory-box {
  gap: 14px;
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(109, 61, 245, 0.1), rgba(139, 92, 246, 0.06));
}

.vibra-song-form-page .vibra-theory-item {
  display: grid;
  gap: 8px;
}

.vibra-song-form-page .vibra-theory-value {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 38px;
  align-items: center;
}

.vibra-song-form-page .vibra-theory-chip,
.vibra-song-form-page .vibra-theory-empty {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--vibra-purple-dark);
  font-size: 0.86rem;
  font-weight: 750;
}

.vibra-song-form-page .vibra-theory-empty {
  border-radius: 10px;
  color: var(--vibra-muted);
  font-weight: 600;
}

.vibra-song-form-page .vibra-song-summary div {
  align-items: center;
  min-width: 0;
}

.vibra-song-form-page .vibra-song-summary dd {
  max-width: 58%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vibra-song-form-page .vibra-summary-progress {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(109, 61, 245, 0.12);
}

.vibra-song-form-page .vibra-summary-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--vibra-purple), #8b5cf6);
  transition: width 180ms ease;
}

.vibra-song-form-page .vibra-privacy-card .vibra-card-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
}

.vibra-song-form-page .vibra-card-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--vibra-lilac);
  color: var(--vibra-purple);
}

.vibra-song-form-page .vibra-card-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vibra-song-form-page .vibra-remember-card {
  background: linear-gradient(180deg, #fff, #fcf9ff);
}

.vibra-song-form-page .vibra-remember-card textarea {
  min-height: 190px !important;
  padding: 16px;
}

.vibra-song-form-page .vibra-song-actions {
  position: static;
  margin-top: 22px;
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid var(--vibra-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-theme="dark"] .vibra-song-form-page {
  --vibra-card: #1c1827;
  --vibra-soft: #171421;
  --vibra-input: #151220;
  --vibra-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
}

body[data-theme="dark"] .vibra-song-form-page .vibra-lyrics-card,
body[data-theme="dark"] .vibra-song-form-page .vibra-remember-card {
  background: linear-gradient(180deg, #1c1827, #181522);
}

body[data-theme="dark"] .vibra-song-form-page .vibra-lyrics-card textarea,
body[data-theme="dark"] .vibra-song-form-page .vibra-remember-card textarea {
  background: #151220;
}

body[data-theme="dark"] .vibra-song-form-page .vibra-theory-chip,
body[data-theme="dark"] .vibra-song-form-page .vibra-theory-empty {
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 1120px) {
  .vibra-song-form-page .vibra-song-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}

@media (max-width: 980px) {
  .vibra-song-form-page .vibra-song-layout,
  .vibra-song-form-page .vibra-form-grid-main {
    grid-template-columns: 1fr;
  }

  .vibra-song-form-page .title-field,
  .vibra-song-form-page .artist-field,
  .vibra-song-form-page .category-field,
  .vibra-song-form-page .video-link-field {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .vibra-song-form-page {
    padding: 16px 16px 32px;
  }

  .vibra-song-form-page .vibra-song-hero {
    padding: 16px;
  }

  .vibra-song-form-page .vibra-editor-actions {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
  }

  .vibra-song-form-page .vibra-editor-actions span {
    flex: 1 0 100%;
  }

  .vibra-song-form-page .vibra-lyrics-card textarea {
    min-height: 380px;
  }

  .vibra-song-form-page .vibra-song-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* Cadastro de musica - composicao fiel a referencia aprovada */
.vibra-song-form-page {
  --vibra-page-bg: #f6f8fc;
  --vibra-card: #ffffff;
  --vibra-border: #e6ebf5;
  --vibra-text: #10133d;
  --vibra-muted: #63708d;
  --vibra-purple: #5b22f4;
  --vibra-purple-2: #7c3cff;
  --vibra-soft-purple: #f4efff;
  --vibra-blue-soft: #eef6ff;
  max-width: 1368px;
  padding: 18px 26px 34px;
  background: var(--vibra-page-bg);
}

.vibra-song-form-page .vibra-song-hero {
  min-height: 74px;
  margin-bottom: 10px;
  padding: 14px 16px;
  border: 1px solid var(--vibra-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 30px rgba(37, 45, 78, 0.08);
}

.vibra-song-form-page .vibra-song-title-group {
  gap: 14px;
}

.vibra-song-form-page .vibra-song-icon {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  border-radius: 13px;
  color: var(--vibra-purple);
  background: linear-gradient(180deg, #faf7ff, #f1eaff);
  box-shadow: inset 0 0 0 1px #e9ddff;
}

.vibra-song-form-page .vibra-song-icon svg {
  width: 27px;
  height: 27px;
}

.vibra-song-form-page .music-form-head .eyebrow {
  display: none;
}

.vibra-song-form-page .music-form-head h2 {
  margin: 0;
  color: var(--vibra-text);
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: 0;
}

.vibra-song-form-page .vibra-song-subtitle {
  margin-top: 5px;
  color: #405070;
  font-size: 0.91rem;
  font-weight: 500;
}

.vibra-song-form-page .vibra-song-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
}

.vibra-song-form-page .vibra-autosave-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #36435f;
  font-size: 0.92rem;
  white-space: nowrap;
}

.vibra-song-form-page .vibra-autosave-status::before {
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: #ecfff4;
  border: 2px solid #22c55e;
  box-shadow: inset 0 0 0 3px #fff;
}

.vibra-song-form-page #musicMessage {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.vibra-song-form-page .primary-button {
  min-width: 176px;
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--vibra-purple-2), var(--vibra-purple));
  color: #fff;
  font-weight: 800;
  box-shadow: 0 12px 22px rgba(91, 34, 244, 0.23);
}

.vibra-song-form-page .primary-button svg {
  display: none;
}

.vibra-song-form-page .secondary-button {
  min-height: 40px;
  border-radius: 8px;
  border-color: #d9e2f1;
  background: #fff;
  color: var(--vibra-purple);
  font-weight: 750;
}

.vibra-song-form-page .vibra-song-layout {
  display: grid;
  grid-template-columns: minmax(0, 70fr) minmax(300px, 30fr);
  gap: 20px;
  align-items: start;
}

.vibra-song-form-page .vibra-song-main,
.vibra-song-form-page .vibra-song-side {
  display: grid;
  gap: 10px;
}

.vibra-song-form-page .vibra-song-side {
  position: static;
}

.vibra-song-form-page .vibra-form-card,
.vibra-song-form-page .vibra-tip-card {
  padding: 16px;
  border: 1px solid var(--vibra-border);
  border-radius: 16px;
  background: var(--vibra-card);
  box-shadow: 0 10px 28px rgba(37, 45, 78, 0.075);
}

.vibra-song-form-page .vibra-card-head {
  gap: 12px;
  margin-bottom: 2px;
}

.vibra-song-form-page .vibra-card-head h3,
.vibra-song-form-page .vibra-tip-card h3 {
  margin: 0;
  color: var(--vibra-text);
  font-size: 1.02rem;
  font-weight: 800;
}

.vibra-song-form-page .vibra-card-head p {
  margin-top: 2px;
  color: var(--vibra-muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.vibra-song-form-page .vibra-form-card:first-child .vibra-card-head::before,
.vibra-song-form-page .vibra-lyrics-card .vibra-card-head::before,
.vibra-song-form-page .vibra-tone-strip .vibra-card-head::before,
.vibra-song-form-page .vibra-video-card .vibra-card-head::before,
.vibra-song-form-page .vibra-summary-card .vibra-card-head::before {
  content: "";
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--vibra-soft-purple);
  box-shadow: inset 0 0 0 1px #dcccff;
}

.vibra-song-form-page .vibra-form-grid-main {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px 18px;
}

.vibra-song-form-page .title-field,
.vibra-song-form-page .artist-field,
.vibra-song-form-page .category-field,
.vibra-song-form-page .create-category-field,
.vibra-song-form-page .tone-field {
  grid-column: auto;
}

.vibra-song-form-page .category-field {
  grid-column: span 1;
}

.vibra-song-form-page .create-category-field {
  align-self: end;
}

.vibra-song-form-page .tone-field {
  grid-column: span 1;
}

.vibra-song-form-page .vibra-field {
  gap: 8px;
  color: #22304e;
  font-size: 0.82rem;
  font-weight: 800;
}

.vibra-song-form-page .vibra-field > span:not(.sr-only)::after {
  color: #f04438;
}

.vibra-song-form-page .vibra-field input,
.vibra-song-form-page .vibra-field select,
.vibra-song-form-page .vibra-field textarea {
  min-height: 48px;
  border: 1px solid #dbe4f2;
  border-radius: 8px;
  background: #fff;
  color: #1c2745;
  font-size: 0.93rem;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.02);
}

.vibra-song-form-page .vibra-field input::placeholder,
.vibra-song-form-page .vibra-field textarea::placeholder {
  color: #8997b6;
}

.vibra-song-form-page .vibra-field input:focus,
.vibra-song-form-page .vibra-field select:focus,
.vibra-song-form-page .vibra-field textarea:focus {
  border-color: #b89cff;
  box-shadow: 0 0 0 4px rgba(91, 34, 244, 0.09);
}

.vibra-song-form-page .create-category-field .secondary-button {
  width: 100%;
  min-height: 48px;
}

.vibra-song-form-page .vibra-lyrics-card {
  min-height: calc(60vh - 20px);
  background: #fff;
}

.vibra-song-form-page .vibra-lyrics-card .vibra-card-head {
  grid-template-columns: auto 1fr;
  align-items: center;
  padding-bottom: 6px;
}

.vibra-song-form-page .vibra-editor-actions {
  justify-content: flex-start;
  gap: 8px;
}

.vibra-song-form-page .vibra-editor-actions .secondary-button {
  min-width: 38px;
  min-height: 34px;
  padding: 0 10px;
  color: #52617f;
}

.vibra-song-form-page .vibra-editor-actions span {
  margin-left: 10px;
  color: #8390ad;
  font-size: 0.82rem;
  font-weight: 650;
}

.vibra-song-form-page .vibra-lyrics-field textarea {
  min-height: max(360px, calc(60vh - 170px));
  padding: 18px;
  border-radius: 8px;
  background: #fbfdff;
  font-size: 0.96rem;
  line-height: 1.72;
}

.vibra-song-form-page .vibra-editor-meta {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 22px;
  color: #7887a5;
  font-size: 0.84rem;
  font-weight: 700;
}

.vibra-song-form-page #lyricsAutosaveStatus {
  display: none;
}

.vibra-song-form-page #previewMusicButton {
  justify-self: end;
  min-width: 128px;
  color: var(--vibra-purple);
  border-color: #d8c7ff;
}

.vibra-song-form-page .vibra-tone-strip {
  padding-bottom: 18px;
}

.vibra-song-form-page .vibra-tone-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.vibra-song-form-page .vibra-tone-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 94px;
  padding: 14px;
  border: 1px solid #e0d4ff;
  border-radius: 9px;
  background: #f7f1ff;
}

.vibra-song-form-page .vibra-tone-card > span {
  color: #24304f;
  font-size: 0.8rem;
  font-weight: 800;
}

.vibra-song-form-page .vibra-theory-value {
  min-height: 34px;
  gap: 6px;
}

.vibra-song-form-page .vibra-theory-chip,
.vibra-song-form-page .vibra-theory-empty {
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  color: #6b37ff;
  font-size: 0.78rem;
}

.vibra-song-form-page .vibra-tone-card textarea {
  min-height: 48px !important;
  padding: 13px 14px;
  resize: vertical;
  background: #fff;
}

.vibra-song-form-page .vibra-video-card {
  gap: 12px;
}

.vibra-song-form-page .vibra-video-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.vibra-song-form-page .vibra-video-row .secondary-button {
  min-height: 48px;
  padding-inline: 14px;
}

.vibra-song-form-page .vibra-video-preview {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 112px;
  border: 1px dashed #d3dceb;
  border-radius: 8px;
  background: #fbfcff;
  color: #8794ad;
  font-weight: 650;
}

.vibra-song-form-page .vibra-video-preview svg {
  width: 48px;
  height: 48px;
  fill: none;
  stroke: #a6b1c5;
  stroke-width: 1.8;
}

.vibra-song-form-page .vibra-summary-card {
  gap: 12px;
}

.vibra-song-form-page .vibra-preview-title {
  display: grid;
  gap: 3px;
}

.vibra-song-form-page .vibra-preview-title strong {
  color: var(--vibra-text);
  font-size: 1.12rem;
  line-height: 1.1;
}

.vibra-song-form-page .vibra-preview-title span {
  color: #33415f;
  font-size: 0.9rem;
  font-weight: 650;
}

.vibra-song-form-page .vibra-song-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vibra-song-form-page .vibra-song-summary div {
  gap: 0;
  padding: 0;
  border: 0;
}

.vibra-song-form-page .vibra-song-summary dt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.vibra-song-form-page .vibra-song-summary dd {
  max-width: 130px;
  margin: 0;
  padding: 5px 11px;
  border-radius: 999px;
  background: #f1ebff;
  color: #6432fa;
  font-size: 0.78rem;
  font-weight: 800;
}

.vibra-song-form-page .vibra-song-summary div:nth-child(2) dd {
  background: #e9f4ff;
  color: #2374dd;
}

.vibra-song-form-page .vibra-song-summary div:nth-child(n+3) {
  display: none;
}

.vibra-song-form-page .vibra-summary-progress {
  display: none;
}

.vibra-song-form-page .vibra-preview-text {
  display: grid;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid #e7edf6;
  color: #8390ad;
  font-size: 0.83rem;
  font-weight: 650;
}

.vibra-song-form-page .vibra-preview-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.vibra-song-form-page .vibra-preview-tabs .secondary-button {
  min-width: 0;
  color: #2b3652;
}

.vibra-song-form-page .vibra-tip-card {
  display: grid;
  gap: 7px;
  border-color: #ffd27b;
  background: #fff7e7;
  color: #8a5b00;
}

.vibra-song-form-page .vibra-tip-card h3 {
  color: #a36300;
}

.vibra-song-form-page .vibra-tip-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  font-weight: 650;
}

.vibra-song-form-page .vibra-song-actions {
  display: none;
}

.vibra-song-form-page .music-import-panel {
  margin-top: 18px;
}

body[data-theme="dark"] .vibra-song-form-page {
  --vibra-page-bg: #111522;
  --vibra-card: #1b2030;
  --vibra-border: rgba(217, 226, 241, 0.16);
  --vibra-text: #f6f7ff;
  --vibra-muted: #aab5cd;
  background: var(--vibra-page-bg);
}

body[data-theme="dark"] .vibra-song-form-page .vibra-song-hero,
body[data-theme="dark"] .vibra-song-form-page .vibra-form-card {
  background: var(--vibra-card);
}

body[data-theme="dark"] .vibra-song-form-page .vibra-field input,
body[data-theme="dark"] .vibra-song-form-page .vibra-field select,
body[data-theme="dark"] .vibra-song-form-page .vibra-field textarea,
body[data-theme="dark"] .vibra-song-form-page .vibra-lyrics-field textarea {
  background: #151a28;
  border-color: rgba(217, 226, 241, 0.16);
  color: #f6f7ff;
}

body[data-theme="dark"] .vibra-song-form-page .vibra-tone-card {
  background: rgba(91, 34, 244, 0.14);
  border-color: rgba(184, 156, 255, 0.22);
}

body[data-theme="dark"] .vibra-song-form-page .vibra-video-preview {
  background: #151a28;
  border-color: rgba(217, 226, 241, 0.16);
}

body[data-theme="dark"] .vibra-song-form-page .vibra-tip-card {
  background: rgba(120, 78, 0, 0.22);
  border-color: rgba(255, 210, 123, 0.42);
}

@media (max-width: 1100px) {
  .vibra-song-form-page .vibra-song-layout {
    grid-template-columns: 1fr;
  }

  .vibra-song-form-page .vibra-song-side {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .vibra-song-form-page {
    padding: 14px;
  }

  .vibra-song-form-page .vibra-song-hero,
  .vibra-song-form-page .vibra-song-head-actions,
  .vibra-song-form-page .vibra-form-grid-main,
  .vibra-song-form-page .vibra-tone-grid,
  .vibra-song-form-page .vibra-song-side,
  .vibra-song-form-page .vibra-video-row {
    grid-template-columns: 1fr;
  }

  .vibra-song-form-page .vibra-song-head-actions {
    gap: 12px;
    align-items: stretch;
  }

  .vibra-song-form-page .vibra-autosave-status {
    justify-content: flex-start;
  }

  .vibra-song-form-page .primary-button {
    width: 100%;
  }

  .vibra-song-form-page .vibra-lyrics-field textarea {
    min-height: 380px;
  }

  .vibra-song-form-page .vibra-editor-actions {
    overflow-x: auto;
  }
}

/* Ajustes finos do cadastro de musica */
.vibra-song-form-page {
  padding-top: 20px;
}

.vibra-song-form-page .vibra-song-hero {
  padding: 16px 18px;
}

.vibra-song-form-page .vibra-song-title-group {
  gap: 18px;
}

.vibra-song-form-page .vibra-song-subtitle {
  margin-top: 8px;
}

.vibra-song-form-page .vibra-song-head-actions {
  gap: 34px;
}

.vibra-song-form-page .primary-button {
  background: linear-gradient(180deg, #8752ff 0%, #6127f4 52%, #501ce5 100%);
  box-shadow: 0 12px 24px rgba(91, 34, 244, 0.18);
}

.vibra-song-form-page .vibra-song-layout {
  grid-template-columns: minmax(0, 68fr) minmax(320px, 32fr);
  gap: 22px;
}

.vibra-song-form-page .vibra-song-main,
.vibra-song-form-page .vibra-song-side {
  gap: 16px;
}

.vibra-song-form-page .vibra-form-card,
.vibra-song-form-page .vibra-tip-card {
  padding: 18px;
}

.vibra-song-form-page .vibra-field input,
.vibra-song-form-page .vibra-field select,
.vibra-song-form-page .vibra-field textarea,
.vibra-song-form-page .create-category-field .secondary-button {
  height: 48px;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 8px;
}

.vibra-song-form-page .vibra-field textarea {
  padding-top: 13px;
  padding-bottom: 13px;
}

.vibra-song-form-page .tone-field select {
  appearance: none;
  padding-right: 42px;
  background-image:
    linear-gradient(45deg, transparent 50%, #5e6b86 50%),
    linear-gradient(135deg, #5e6b86 50%, transparent 50%);
  background-position:
    calc(100% - 21px) 21px,
    calc(100% - 15px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.vibra-song-form-page .vibra-lyrics-card {
  min-height: 0;
}

.vibra-song-form-page .vibra-lyrics-card .vibra-card-head {
  align-items: center;
}

.vibra-song-form-page .vibra-editor-actions {
  align-items: center;
}

.vibra-song-form-page .vibra-editor-actions .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.vibra-song-form-page .vibra-editor-actions span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  line-height: 1.2;
}

.vibra-song-form-page .vibra-lyrics-field textarea {
  min-height: 340px;
  max-height: 360px;
}

.vibra-song-form-page .vibra-editor-meta {
  margin-top: 2px;
}

.vibra-song-form-page .vibra-tone-grid {
  align-items: stretch;
}

.vibra-song-form-page .vibra-tone-card {
  height: 112px;
  min-height: 112px;
}

.vibra-song-form-page .vibra-tone-card textarea {
  height: 48px;
  min-height: 48px !important;
}

.vibra-song-form-page .vibra-video-card .vibra-card-head h3 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.vibra-song-form-page .vibra-youtube-icon {
  width: 24px;
  height: 24px;
  fill: #ff0000;
}

.vibra-song-form-page .vibra-youtube-icon path:last-child {
  fill: #fff;
}

.vibra-song-form-page .vibra-verify-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 42px;
  min-height: 42px;
  border-color: #cbb8ff;
  color: var(--vibra-purple);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.vibra-song-form-page .vibra-verify-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vibra-song-form-page .vibra-verify-button:hover {
  border-color: #9f7cff;
  box-shadow: 0 8px 18px rgba(91, 34, 244, 0.12);
  transform: translateY(-1px);
}

.vibra-song-form-page .vibra-video-preview {
  background: #fbfdff;
  border-color: #d7dfec;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.vibra-song-form-page .vibra-video-preview:hover {
  background: #f7faff;
  border-color: #bfcbe0;
  transform: translateY(-1px);
}

.vibra-song-form-page .vibra-video-preview svg {
  stroke: #9aa7bd;
}

.vibra-song-form-page .vibra-summary-card {
  padding: 21px;
  gap: 15px;
}

.vibra-song-form-page .vibra-preview-title {
  gap: 5px;
}

.vibra-song-form-page .vibra-preview-title strong {
  font-size: 1.38rem;
  line-height: 1.08;
}

.vibra-song-form-page .vibra-preview-title span {
  font-size: 0.93rem;
}

.vibra-song-form-page .vibra-song-summary {
  gap: 10px;
}

.vibra-song-form-page .vibra-song-summary dd {
  padding: 6px 12px;
  border: 1px solid rgba(91, 34, 244, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.vibra-song-form-page .vibra-song-summary div:nth-child(2) dd {
  border-color: rgba(35, 116, 221, 0.12);
}

.vibra-song-form-page .vibra-tip-card {
  padding: 22px;
  gap: 10px;
}

.vibra-song-form-page .app-nav .nav-button,
.vibra-song-form-page .nav-button {
  min-height: 46px;
}

.vibra-song-form-page .nav-button:hover {
  background: rgba(91, 34, 244, 0.08);
}

@media (max-width: 1100px) {
  .vibra-song-form-page .vibra-song-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .vibra-song-form-page .vibra-song-head-actions {
    gap: 16px;
  }

  .vibra-song-form-page .vibra-lyrics-field textarea {
    min-height: 320px;
    max-height: none;
  }

  .vibra-song-form-page .vibra-tone-card {
    height: auto;
    min-height: 112px;
  }
}

/* Refinamento final: cabecalho e primeira secao */
.vibra-song-form-page {
  --vibra-card-shadow: 0 18px 45px rgba(38, 45, 78, 0.105);
  --vibra-card-shadow-soft: 0 12px 32px rgba(38, 45, 78, 0.08);
}

.vibra-song-form-page .vibra-song-hero {
  min-height: 94px;
  padding: 22px 24px;
  border-radius: 18px;
  border-color: #e4e9f3;
  box-shadow: var(--vibra-card-shadow-soft);
}

.vibra-song-form-page .vibra-song-title-group {
  gap: 18px;
}

.vibra-song-form-page .vibra-song-icon {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 15px;
  background: linear-gradient(145deg, #fbf8ff 0%, #efe7ff 100%);
  box-shadow:
    inset 0 0 0 1px #e3d4ff,
    0 10px 22px rgba(91, 34, 244, 0.1);
}

.vibra-song-form-page .vibra-song-icon svg {
  width: 29px;
  height: 29px;
  stroke: var(--vibra-purple);
  stroke-width: 2.15;
}

.vibra-song-form-page .music-form-head h2 {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.05;
}

.vibra-song-form-page .vibra-song-subtitle {
  margin-top: 10px;
  color: #5c6882;
  font-size: 0.94rem;
  font-weight: 400;
  line-height: 1.45;
}

.vibra-song-form-page .vibra-song-head-actions {
  gap: 42px;
}

.vibra-song-form-page .vibra-autosave-status {
  gap: 10px;
  color: #41506a;
  font-size: 0.94rem;
  font-weight: 500;
}

.vibra-song-form-page .vibra-autosave-status::before {
  display: grid;
  place-items: center;
  content: "✓";
  width: 18px;
  height: 18px;
  border: 0;
  background: #22c55e;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  box-shadow: 0 3px 10px rgba(34, 197, 94, 0.18);
}

.vibra-song-form-page #saveMusicButtonTop.primary-button {
  width: 220px;
  min-width: 220px;
  height: 54px;
  min-height: 54px;
  border-radius: 14px;
  background: linear-gradient(180deg, #8f5cff 0%, #672cf5 54%, #541ee8 100%);
  box-shadow: 0 14px 30px rgba(91, 34, 244, 0.22);
  font-size: 0.96rem;
}

.vibra-song-form-page #saveMusicButtonTop.primary-button svg {
  display: block;
  width: 18px;
  height: 18px;
}

.vibra-song-form-page #saveMusicButtonTop.primary-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(91, 34, 244, 0.25);
}

.vibra-song-form-page .vibra-song-layout {
  gap: 26px;
}

.vibra-song-form-page .vibra-song-main,
.vibra-song-form-page .vibra-song-side {
  gap: 18px;
}

.vibra-song-form-page .vibra-form-card,
.vibra-song-form-page .vibra-tip-card {
  padding: 22px;
  border-radius: 18px;
  box-shadow: var(--vibra-card-shadow);
}

.vibra-song-form-page .vibra-form-card:first-child .vibra-card-head {
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 8px;
}

.vibra-song-form-page .vibra-form-card:first-child .vibra-card-head::before {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background:
    linear-gradient(145deg, #f8f3ff, #efe6ff);
}

.vibra-song-form-page .vibra-card-head h3,
.vibra-song-form-page .vibra-tip-card h3 {
  font-size: 1.06rem;
  font-weight: 800;
}

.vibra-song-form-page .vibra-form-grid-main {
  gap: 18px 20px;
}

.vibra-song-form-page .vibra-field {
  gap: 9px;
  color: #33405a;
  font-size: 0.83rem;
  font-weight: 600;
}

.vibra-song-form-page .vibra-field input,
.vibra-song-form-page .vibra-field select,
.vibra-song-form-page .vibra-field textarea,
.vibra-song-form-page .create-category-field .secondary-button,
.vibra-song-form-page .vibra-video-row .secondary-button {
  height: 52px;
  min-height: 52px;
  border-radius: 12px;
  padding-inline: 18px;
  border-color: #dce4f1;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, transform 160ms ease;
}

.vibra-song-form-page .vibra-field input:hover,
.vibra-song-form-page .vibra-field select:hover,
.vibra-song-form-page .vibra-field textarea:hover {
  border-color: #cdd6e6;
}

.vibra-song-form-page .vibra-field input:focus,
.vibra-song-form-page .vibra-field select:focus,
.vibra-song-form-page .vibra-field textarea:focus {
  border-color: #9d7cff;
  box-shadow: 0 0 0 4px rgba(91, 34, 244, 0.095);
}

.vibra-song-form-page .vibra-field input::placeholder,
.vibra-song-form-page .vibra-field textarea::placeholder {
  color: #8c98b1;
}

.vibra-song-form-page .create-category-field .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-color: #cdbbff;
  background: #fff;
  color: var(--vibra-purple);
  box-shadow: 0 8px 18px rgba(91, 34, 244, 0.07);
}

.vibra-song-form-page .create-category-field .secondary-button span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: 1.15rem;
  line-height: 1;
}

.vibra-song-form-page .tone-field {
  position: relative;
}

.vibra-song-form-page .tone-field::before {
  content: "♪";
  position: absolute;
  left: 16px;
  bottom: 15px;
  z-index: 1;
  color: var(--vibra-purple);
  font-size: 1.05rem;
  font-weight: 800;
  pointer-events: none;
}

.vibra-song-form-page .tone-field select {
  height: 52px;
  padding-left: 44px;
  background-position:
    calc(100% - 24px) 24px,
    calc(100% - 17px) 24px;
}

.vibra-song-form-page .vibra-video-card .vibra-card-head {
  align-items: center;
}

.vibra-song-form-page .vibra-video-card .vibra-card-head::before {
  display: none;
}

.vibra-song-form-page .vibra-video-card .vibra-card-head h3 {
  font-size: 1.08rem;
}

.vibra-song-form-page .vibra-youtube-icon {
  width: 25px;
  height: 25px;
}

.vibra-song-form-page .video-link-field {
  position: relative;
}

.vibra-song-form-page .video-link-field::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  background:
    linear-gradient(#72809a, #72809a) 4px 8px / 9px 2px no-repeat,
    radial-gradient(circle at 4px 9px, transparent 4px, #72809a 4.5px, #72809a 5.8px, transparent 6.2px),
    radial-gradient(circle at 13px 9px, transparent 4px, #72809a 4.5px, #72809a 5.8px, transparent 6.2px);
  pointer-events: none;
}

.vibra-song-form-page .video-link-field input {
  padding-left: 44px;
}

.vibra-song-form-page .vibra-verify-button {
  height: 42px;
  min-height: 42px;
  align-self: center;
  border-radius: 12px;
  border-color: #cdbbff;
}

.vibra-song-form-page .vibra-video-preview {
  min-height: 126px;
  border-radius: 12px;
  background: #fbfdff;
  border-color: #d8e0ee;
}

.vibra-song-form-page .vibra-video-preview svg {
  width: 54px;
  height: 54px;
  padding: 9px;
  border: 3px solid #a8b4c8;
  border-radius: 12px;
  stroke: #9ca8bb;
}

.vibra-song-form-page .vibra-summary-card {
  padding: 24px;
}

.vibra-song-form-page .vibra-summary-card .vibra-card-head h3 {
  font-size: 1.14rem;
}

.vibra-song-form-page .vibra-preview-title strong {
  font-size: 1.625rem;
  font-weight: 800;
}

.vibra-song-form-page .vibra-preview-title span {
  font-size: 1rem;
  font-weight: 500;
}

.vibra-song-form-page .vibra-song-summary dd {
  padding: 7px 13px;
  border-radius: 999px;
  background: #f0eaff;
  color: #6432fa;
}

.vibra-song-form-page .vibra-song-summary div:nth-child(2) dd {
  background: #e8f3ff;
  color: #2475dc;
}

@media (max-width: 760px) {
  .vibra-song-form-page .music-form-head h2 {
    font-size: 2rem;
  }

  .vibra-song-form-page #saveMusicButtonTop.primary-button {
    width: 100%;
    min-width: 0;
  }
}

/* Ajuste fino de escala visual do cadastro */
.vibra-song-form-page {
  --vibra-card-shadow: 0 10px 26px rgba(38, 45, 78, 0.075);
  --vibra-card-shadow-soft: 0 8px 22px rgba(38, 45, 78, 0.06);
  padding: 16px 24px 30px;
}

.vibra-song-form-page .vibra-song-hero {
  min-height: 76px;
  padding: 12px 18px;
  border-radius: 16px;
  box-shadow: var(--vibra-card-shadow-soft);
}

.vibra-song-form-page .vibra-song-title-group {
  gap: 14px;
}

.vibra-song-form-page .vibra-song-icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 14px;
}

.vibra-song-form-page .vibra-song-icon svg {
  width: 25px;
  height: 25px;
}

.vibra-song-form-page .music-form-head h2 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
}

.vibra-song-form-page .vibra-song-subtitle {
  margin-top: 7px;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
}

.vibra-song-form-page .vibra-song-head-actions {
  gap: 30px;
}

.vibra-song-form-page .vibra-autosave-status {
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
}

.vibra-song-form-page .vibra-autosave-status::before {
  width: 18px;
  height: 18px;
  font-size: 0.68rem;
}

.vibra-song-form-page #saveMusicButtonTop.primary-button,
.vibra-song-form-page .primary-button {
  width: auto;
  min-width: 170px;
  height: 44px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  gap: 8px;
  background: linear-gradient(180deg, #7f4dff 0%, #612cf0 56%, #5422df 100%);
  box-shadow: 0 8px 18px rgba(91, 34, 244, 0.14);
}

.vibra-song-form-page #saveMusicButtonTop.primary-button svg {
  width: 17px;
  height: 17px;
}

.vibra-song-form-page .vibra-song-layout {
  gap: 22px;
}

.vibra-song-form-page .vibra-song-main,
.vibra-song-form-page .vibra-song-side {
  gap: 16px;
}

.vibra-song-form-page .vibra-form-card,
.vibra-song-form-page .vibra-tip-card {
  padding: 20px 24px;
  border-radius: 14px;
  box-shadow: var(--vibra-card-shadow);
}

.vibra-song-form-page .vibra-card-head {
  align-items: center;
}

.vibra-song-form-page .vibra-card-head::before,
.vibra-song-form-page .vibra-form-card:first-child .vibra-card-head::before,
.vibra-song-form-page .vibra-lyrics-card .vibra-card-head::before,
.vibra-song-form-page .vibra-tone-strip .vibra-card-head::before,
.vibra-song-form-page .vibra-video-card .vibra-card-head::before,
.vibra-song-form-page .vibra-summary-card .vibra-card-head::before {
  display: none;
}

.vibra-song-form-page .vibra-card-head h3,
.vibra-song-form-page .vibra-tip-card h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.vibra-song-form-page #song-main-info-title::before,
.vibra-song-form-page #song-lyrics-title::before,
.vibra-song-form-page #song-remember-title::before,
.vibra-song-form-page #song-summary-title::before {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--vibra-purple);
  font-size: 1rem;
  line-height: 1;
}

.vibra-song-form-page #song-main-info-title::before {
  content: "â–£";
}

.vibra-song-form-page #song-lyrics-title::before {
  content: "≡";
}

.vibra-song-form-page #song-remember-title::before {
  content: "♪";
}

.vibra-song-form-page #song-summary-title::before {
  content: "⌁";
}

.vibra-song-form-page .vibra-form-grid-main {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px 20px;
}

.vibra-song-form-page .title-field,
.vibra-song-form-page .artist-field {
  grid-column: span 1;
}

.vibra-song-form-page .category-field,
.vibra-song-form-page .create-category-field,
.vibra-song-form-page .tone-field {
  grid-row: 2;
}

.vibra-song-form-page .category-field {
  grid-column: 1 / span 1;
}

.vibra-song-form-page .create-category-field {
  grid-column: 2;
  justify-self: start;
  width: 178px;
}

.vibra-song-form-page .tone-field {
  grid-column: 2;
  justify-self: end;
  width: min(100%, calc(100% - 198px));
  min-width: 220px;
}

.vibra-song-form-page .vibra-field {
  gap: 7px;
  color: #344057;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.015em;
}

.vibra-song-form-page .vibra-field > span:not(.sr-only) {
  text-transform: uppercase;
}

.vibra-song-form-page .vibra-field input,
.vibra-song-form-page .vibra-field select,
.vibra-song-form-page .vibra-field textarea,
.vibra-song-form-page .create-category-field .secondary-button {
  height: 44px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 0.875rem;
  border: 1px solid #dce3ef;
  box-shadow: none;
}

.vibra-song-form-page .vibra-field input::placeholder,
.vibra-song-form-page .vibra-field textarea::placeholder {
  color: #8f9ab0;
  font-size: 0.875rem;
  font-weight: 400;
}

.vibra-song-form-page .title-field,
.vibra-song-form-page .artist-field,
.vibra-song-form-page .category-field,
.vibra-song-form-page .video-link-field,
.vibra-song-form-page .tone-field {
  position: relative;
}

.vibra-song-form-page .title-field::before,
.vibra-song-form-page .artist-field::before,
.vibra-song-form-page .category-field::before,
.vibra-song-form-page .tone-field::before {
  position: absolute;
  left: 14px;
  bottom: 13px;
  z-index: 1;
  color: var(--vibra-purple);
  font-size: 17px;
  line-height: 1;
  pointer-events: none;
}

.vibra-song-form-page .title-field::before {
  content: "♪";
}

.vibra-song-form-page .artist-field::before {
  content: "";
  width: 17px;
  height: 17px;
  background:
    linear-gradient(var(--vibra-purple), var(--vibra-purple)) 7px 3px / 3px 9px no-repeat,
    radial-gradient(ellipse at center, transparent 4px, var(--vibra-purple) 4.5px, var(--vibra-purple) 5.8px, transparent 6.2px) 2px 0 / 13px 13px no-repeat,
    linear-gradient(var(--vibra-purple), var(--vibra-purple)) 4px 15px / 9px 2px no-repeat;
}

.vibra-song-form-page .category-field::before {
  content: "";
  width: 17px;
  height: 17px;
  border: 2px solid var(--vibra-purple);
  border-radius: 4px;
  transform: rotate(-18deg);
}

.vibra-song-form-page .category-field::after {
  content: "";
  position: absolute;
  left: 19px;
  bottom: 23px;
  z-index: 2;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--vibra-purple);
  pointer-events: none;
}

.vibra-song-form-page .title-field input,
.vibra-song-form-page .artist-field input,
.vibra-song-form-page .category-field input {
  padding-left: 42px;
}

.vibra-song-form-page .create-category-field .secondary-button {
  gap: 8px;
  border-color: #c9b8ff;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: none;
}

.vibra-song-form-page .create-category-field .secondary-button span {
  width: 17px;
  height: 17px;
  font-size: 1.05rem;
}

.vibra-song-form-page .tone-field::before {
  content: "♪";
  bottom: 13px;
}

.vibra-song-form-page .tone-field select {
  height: 44px;
  padding-left: 42px;
  padding-right: 38px;
  background-position:
    calc(100% - 21px) 20px,
    calc(100% - 15px) 20px;
  background-size: 6px 6px, 6px 6px;
}

.vibra-song-form-page .vibra-lyrics-card {
  min-height: 0;
}

.vibra-song-form-page .vibra-lyrics-card .vibra-card-head {
  padding-bottom: 4px;
}

.vibra-song-form-page .vibra-editor-actions {
  align-items: center;
  gap: 7px;
}

.vibra-song-form-page .vibra-editor-actions .secondary-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 8px;
}

.vibra-song-form-page .vibra-editor-actions .secondary-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vibra-song-form-page .vibra-editor-actions span {
  min-height: 34px;
  font-size: 0.75rem;
  font-weight: 500;
}

.vibra-song-form-page .vibra-lyrics-field textarea {
  height: 300px;
  min-height: 300px;
  max-height: 340px;
  padding: 14px;
  font-size: 0.875rem;
  line-height: 1.65;
  resize: vertical;
}

.vibra-song-form-page .vibra-video-card .vibra-card-head h3 {
  gap: 9px;
  font-size: 1rem;
}

.vibra-song-form-page .vibra-youtube-icon {
  width: 19px;
  height: 19px;
}

.vibra-song-form-page .video-link-field::before {
  left: 14px;
  width: 17px;
  height: 17px;
  opacity: 0.82;
}

.vibra-song-form-page .video-link-field input {
  padding-left: 42px;
}

.vibra-song-form-page .vibra-video-row {
  gap: 9px;
}

.vibra-song-form-page .vibra-verify-button {
  height: 42px;
  min-height: 42px;
  padding: 0 13px;
  border-radius: 9px;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: none;
}

.vibra-song-form-page .vibra-verify-button svg {
  width: 16px;
  height: 16px;
}

.vibra-song-form-page .vibra-video-preview {
  min-height: 132px;
  border-radius: 10px;
}

.vibra-song-form-page .vibra-video-preview svg {
  box-sizing: border-box;
  width: 46px;
  height: 46px;
  padding: 8px;
  border-width: 2px;
  border-radius: 10px;
}

.vibra-song-form-page .vibra-video-preview span {
  margin-top: 2px;
  font-size: 0.875rem;
  font-weight: 600;
}

.vibra-song-form-page .vibra-preview-title strong {
  font-size: 1.25rem;
  font-weight: 700;
}

.vibra-song-form-page .vibra-preview-title span {
  font-size: 0.8125rem;
  font-weight: 500;
}

.vibra-song-form-page .vibra-song-summary dd {
  min-height: 25px;
  padding: 5px 10px;
  font-size: 0.6875rem;
}

@media (max-width: 760px) {
  .vibra-song-form-page {
    padding: 14px;
  }

  .vibra-song-form-page .music-form-head h2 {
    font-size: 1.5rem;
  }

  .vibra-song-form-page .vibra-form-grid-main {
    grid-template-columns: 1fr;
  }

  .vibra-song-form-page .category-field,
  .vibra-song-form-page .create-category-field,
  .vibra-song-form-page .tone-field {
    grid-row: auto;
    grid-column: auto;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
  }

  .vibra-song-form-page .vibra-lyrics-field textarea {
    height: 300px;
    min-height: 300px;
    max-height: none;
  }
}

/* Correcao de alinhamento da primeira secao */
.vibra-song-form-page .vibra-form-grid-main {
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto) minmax(220px, 1fr);
  gap: 18px 22px;
  align-items: end;
}

.vibra-song-form-page .title-field {
  grid-column: 1 / span 1;
  grid-row: 1;
}

.vibra-song-form-page .artist-field {
  grid-column: 2 / span 2;
  grid-row: 1;
}

.vibra-song-form-page .category-field {
  grid-column: 1;
  grid-row: 2;
}

.vibra-song-form-page .create-category-field {
  grid-column: 2;
  grid-row: 2;
  width: 170px;
  justify-self: stretch;
}

.vibra-song-form-page .tone-field {
  grid-column: 3;
  grid-row: 2;
  width: 100%;
  min-width: 0;
  justify-self: stretch;
}

.vibra-song-form-page .title-field,
.vibra-song-form-page .artist-field,
.vibra-song-form-page .category-field,
.vibra-song-form-page .tone-field,
.vibra-song-form-page .video-link-field {
  position: relative;
}

.vibra-song-form-page .title-field::before,
.vibra-song-form-page .artist-field::before,
.vibra-song-form-page .category-field::before,
.vibra-song-form-page .tone-field::before {
  top: 35px;
  bottom: auto;
  left: 16px;
  transform: none;
}

.vibra-song-form-page .category-field::before {
  top: 36px;
}

.vibra-song-form-page .category-field::after {
  top: 41px;
  bottom: auto;
  left: 21px;
}

.vibra-song-form-page .vibra-field input,
.vibra-song-form-page .vibra-field select {
  box-sizing: border-box;
  width: 100%;
}

.vibra-song-form-page .title-field input,
.vibra-song-form-page .artist-field input,
.vibra-song-form-page .category-field input,
.vibra-song-form-page .tone-field select {
  padding-left: 44px;
}

.vibra-song-form-page .tone-field select {
  padding-right: 40px;
  background-position:
    calc(100% - 22px) 19px,
    calc(100% - 16px) 19px;
}

.vibra-song-form-page .create-category-field .secondary-button {
  width: 100%;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .vibra-song-form-page .vibra-form-grid-main {
    grid-template-columns: 1fr 1fr;
  }

  .vibra-song-form-page .title-field,
  .vibra-song-form-page .artist-field,
  .vibra-song-form-page .category-field,
  .vibra-song-form-page .create-category-field,
  .vibra-song-form-page .tone-field {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .vibra-song-form-page .vibra-form-grid-main {
    grid-template-columns: 1fr;
  }
}

/* Correcao exclusiva dos icones do bloco principal */
.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .vibra-card-head::before,
.vibra-song-form-page #song-main-info-title::before,
.vibra-song-form-page .title-field::before,
.vibra-song-form-page .artist-field::before,
.vibra-song-form-page .category-field::before,
.vibra-song-form-page .category-field::after,
.vibra-song-form-page .tone-field::before {
  content: none !important;
  display: none !important;
}

.vibra-song-form-page #song-main-info-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.vibra-song-form-page .card-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #f4efff;
  color: #6d3df5;
}

.vibra-song-form-page .card-title-icon svg,
.vibra-song-form-page .field-icon,
.vibra-song-form-page .button-icon,
.vibra-song-form-page .select-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.vibra-song-form-page .card-title-icon svg,
.vibra-song-form-page .field-icon,
.vibra-song-form-page .button-icon {
  color: #6d3df5;
}

.vibra-song-form-page .field-with-icon {
  position: relative;
  width: 100%;
}

.vibra-song-form-page .field-with-icon .field-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
}

.vibra-song-form-page .field-with-icon input,
.vibra-song-form-page .field-with-icon select {
  width: 100%;
  padding-left: 38px !important;
}

.vibra-song-form-page .song-key-field select {
  appearance: none;
  padding-left: 14px !important;
  padding-right: 34px !important;
  background-image: none !important;
}

.vibra-song-form-page .song-key-field .select-chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  z-index: 2;
  width: 14px;
  height: 14px;
  color: #6d3df5;
  transform: translateY(-50%);
}

.vibra-song-form-page .create-category-field .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.vibra-song-form-page .create-category-field .secondary-button span {
  display: none !important;
}

.vibra-song-form-page .create-category-field .button-icon {
  width: 15px;
  height: 15px;
}

/* Correcao cirurgica dos icones da coluna direita */
.vibra-song-form-page .vibra-video-card .vibra-card-head::before,
.vibra-song-form-page .vibra-summary-card .vibra-card-head::before,
.vibra-song-form-page .vibra-video-row .video-link-field::before,
.vibra-song-form-page .vibra-video-row .video-link-field::after,
.vibra-song-form-page .video-link-field::before,
.vibra-song-form-page .video-link-field::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

.vibra-song-form-page .vibra-song-side .vibra-card-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vibra-song-form-page .vibra-youtube-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.vibra-song-form-page .vibra-youtube-icon path:first-child,
.vibra-song-form-page .vibra-tab-youtube path:first-child {
  fill: #ff0000;
}

.vibra-song-form-page .vibra-youtube-icon path:last-child,
.vibra-song-form-page .vibra-tab-youtube path:last-child {
  fill: #fff;
}

.vibra-song-form-page .input-with-icon {
  position: relative;
  width: 100%;
}

.vibra-song-form-page .youtube-url-field .field-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  z-index: 2;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: #7f8ba8;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transform: translateY(-50%);
}

.vibra-song-form-page .youtube-url-field input {
  padding-left: 36px !important;
}

.vibra-song-form-page .vibra-verify-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.vibra-song-form-page .vibra-verify-button svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.vibra-song-form-page .vibra-square-play {
  box-sizing: border-box;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  fill: none;
  stroke: #8fa0b8;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vibra-song-form-page .vibra-side-title-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  fill: none;
  stroke: #6d3df5;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.vibra-song-form-page .vibra-preview-tabs .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.vibra-song-form-page .vibra-preview-tabs .secondary-button svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.vibra-song-form-page .vibra-preview-tabs .vibra-tab-youtube {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: none;
}

/* Correcao visual exclusiva da coluna direita */
.vibra-song-form-page .vibra-song-side {
  gap: 12px;
}

.vibra-song-form-page .vibra-song-side .vibra-form-card,
.vibra-song-form-page .vibra-song-side .vibra-tip-card {
  padding: 14px;
  border-radius: 12px;
  border-color: #e5ebf5;
  background: #fff;
  box-shadow: 0 8px 22px rgba(38, 45, 78, 0.065);
}

.vibra-song-form-page .vibra-song-side .vibra-card-head {
  margin-bottom: 8px;
}

.vibra-song-form-page .vibra-song-side .vibra-card-head h3 {
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25;
}

.vibra-song-form-page .vibra-song-side .vibra-youtube-icon {
  width: 17px;
  height: 17px;
}

.vibra-song-form-page .vibra-video-card {
  gap: 10px;
}

.vibra-song-form-page .vibra-video-row {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.vibra-song-form-page .vibra-video-row .video-link-field input {
  height: 36px;
  min-height: 36px;
  padding-left: 32px !important;
  border-radius: 7px;
  font-size: 0.6875rem;
}

.vibra-song-form-page .vibra-video-row .video-link-field input::placeholder {
  font-size: 0.6875rem;
}

.vibra-song-form-page .vibra-video-row .video-link-field::before {
  left: 10px;
  width: 14px;
  height: 14px;
}

.vibra-song-form-page .vibra-video-row .vibra-verify-button {
  width: 100%;
  height: 36px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 7px;
  border-color: #cbb8ff;
  background: #fff;
  box-shadow: none;
  font-size: 0.6875rem;
  font-weight: 600;
}

.vibra-song-form-page .vibra-video-row .vibra-verify-button svg {
  width: 14px;
  height: 14px;
}

.vibra-song-form-page .vibra-video-preview {
  min-height: 98px;
  border-radius: 8px;
  border-color: #d9e1ee;
  background: #fcfdff;
  gap: 7px;
}

.vibra-song-form-page .vibra-video-preview svg {
  width: 34px;
  height: 34px;
  padding: 6px;
  border-width: 1.5px;
  border-radius: 8px;
  stroke: #9aa8be;
}

.vibra-song-form-page .vibra-video-preview span {
  margin-top: 0;
  color: #8190aa;
  font-size: 0.6875rem;
  font-weight: 500;
}

.vibra-song-form-page .vibra-side-title-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #6d3df5;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vibra-song-form-page #song-summary-title::before {
  content: none !important;
  display: none !important;
}

.vibra-song-form-page #song-summary-title .vibra-side-title-icon {
  flex: 0 0 16px;
}

.vibra-song-form-page .vibra-summary-card {
  gap: 10px;
}

.vibra-song-form-page .vibra-preview-title {
  gap: 2px;
}

.vibra-song-form-page .vibra-preview-title strong {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.vibra-song-form-page .vibra-preview-title span {
  color: #66748d;
  font-size: 0.6875rem;
  font-weight: 500;
}

.vibra-song-form-page .vibra-summary-card .vibra-song-summary {
  gap: 6px;
}

.vibra-song-form-page .vibra-summary-card .vibra-song-summary dd {
  min-height: 22px;
  padding: 4px 8px;
  border: 0;
  border-radius: 999px;
  font-size: 0.5625rem;
}

.vibra-song-form-page .vibra-preview-text {
  gap: 4px;
  padding-top: 8px;
  border-top-color: #e6edf6;
  color: #8290aa;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.35;
}

.vibra-song-form-page .vibra-preview-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.vibra-song-form-page .vibra-preview-tabs .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 32px;
  min-height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  box-shadow: none;
  color: #2c3650;
  font-size: 0.625rem;
  font-weight: 600;
}

.vibra-song-form-page .vibra-preview-tabs .secondary-button svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vibra-song-form-page .vibra-preview-tabs .vibra-tab-youtube {
  fill: #ff0000;
  stroke: none;
}

.vibra-song-form-page .vibra-preview-tabs .vibra-tab-youtube path:last-child {
  fill: #fff;
}

.vibra-song-form-page .vibra-tip-card {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 11px;
  min-height: 82px;
  padding: 13px;
  border-radius: 10px;
  border-color: #ffd78a;
  background: #fff8ea;
}

.vibra-song-form-page .vibra-tip-icon {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  fill: none;
  stroke: #f59e0b;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vibra-song-form-page .vibra-tip-card h3 {
  margin: 0 0 3px;
  color: #a36300;
  font-size: 0.75rem;
  font-weight: 700;
}

.vibra-song-form-page .vibra-tip-card p {
  margin: 0;
  color: #8a5b00;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.4;
}

body[data-theme="dark"] .vibra-song-form-page .vibra-song-side .vibra-form-card {
  background: var(--vibra-card);
}

body[data-theme="dark"] .vibra-song-form-page .vibra-video-preview {
  background: #151a28;
}

body[data-theme="dark"] .vibra-song-form-page .vibra-tip-card {
  background: rgba(120, 78, 0, 0.22);
}

/* Ajustes cirurgicos finais: letra e informacoes do tom */
.vibra-song-form-page .vibra-lyrics-card {
  gap: 10px;
  min-height: 0;
  padding: 14px 16px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(38, 45, 78, 0.06);
}

.vibra-song-form-page .vibra-lyrics-card .vibra-card-head {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 0;
  margin: 0;
}

.vibra-song-form-page .vibra-lyrics-card .vibra-card-head > div:first-child {
  min-width: max-content;
}

.vibra-song-form-page #song-lyrics-title,
.vibra-song-form-page #song-remember-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25;
}

.vibra-song-form-page #song-lyrics-title::before,
.vibra-song-form-page #song-remember-title::before {
  content: none !important;
  display: none !important;
}

.vibra-song-form-page .vibra-section-icon,
.vibra-song-form-page .vibra-editor-actions svg,
.vibra-song-form-page .vibra-editor-meta svg,
.vibra-song-form-page .vibra-tone-card-content svg,
.vibra-song-form-page .vibra-compact-textarea svg {
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.vibra-song-form-page .vibra-section-icon {
  width: 16px;
  height: 16px;
  color: #6d3df5;
}

.vibra-song-form-page .vibra-editor-actions {
  display: contents;
}

.vibra-song-form-page .vibra-editor-actions .secondary-button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 7px;
  box-shadow: none;
}

.vibra-song-form-page .vibra-editor-actions .secondary-button + .secondary-button {
  margin-left: -6px;
}

.vibra-song-form-page .vibra-editor-actions .secondary-button svg {
  width: 14px;
  height: 14px;
}

.vibra-song-form-page .vibra-editor-actions span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 32px;
  margin: 0;
  color: #7f8ba8;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vibra-song-form-page .vibra-editor-actions span svg {
  width: 14px;
  height: 14px;
}

.vibra-song-form-page .vibra-lyrics-field textarea {
  width: 100%;
  height: 210px;
  min-height: 210px;
  max-height: 240px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #fbfdff;
  font-size: 0.75rem;
  line-height: 1.6;
  resize: vertical;
}

.vibra-song-form-page .vibra-editor-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.vibra-song-form-page .vibra-editor-counters {
  display: flex;
  align-items: center;
  gap: 14px;
}

.vibra-song-form-page .vibra-editor-counters span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #7f8ba8;
  font-size: 0.625rem;
  font-weight: 600;
}

.vibra-song-form-page .vibra-editor-counters svg {
  width: 13px;
  height: 13px;
}

.vibra-song-form-page #lyricsAutosaveStatus {
  display: inline-flex;
}

.vibra-song-form-page #previewMusicButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 7px;
  border-color: #cbb8ff;
  box-shadow: none;
  color: #6d3df5;
  font-size: 0.6875rem;
  font-weight: 600;
}

.vibra-song-form-page #previewMusicButton svg {
  width: 14px;
  height: 14px;
}

.vibra-song-form-page .vibra-tone-strip {
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
}

.vibra-song-form-page .vibra-tone-strip .vibra-card-head {
  margin: 0;
}

.vibra-song-form-page .vibra-tone-strip .vibra-card-head p {
  margin-top: 2px;
  color: #7f8ba8;
  font-size: 0.625rem;
  font-weight: 500;
}

.vibra-song-form-page .vibra-tone-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}

.vibra-song-form-page .vibra-tone-card {
  min-height: 74px;
  height: 74px;
  padding: 10px 12px;
  border: 1px solid #e0d4ff;
  border-radius: 8px;
  background: #f7f1ff;
  align-content: start;
  gap: 7px;
}

.vibra-song-form-page .vibra-tone-card > span {
  color: #344057;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.15;
}

.vibra-song-form-page .vibra-tone-card-content {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.vibra-song-form-page .vibra-tone-card-content svg {
  width: 14px;
  height: 14px;
  color: #6d3df5;
}

.vibra-song-form-page .vibra-tone-card-content .vibra-theory-value {
  display: block;
  min-height: 0;
  color: #6d3df5;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
}

.vibra-song-form-page .vibra-tone-card-content em {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #efe7ff;
  color: #6d3df5;
  font-size: 0.5rem;
  font-style: normal;
  font-weight: 700;
}

.vibra-song-form-page .vibra-compact-textarea {
  position: relative;
}

.vibra-song-form-page .vibra-compact-textarea svg {
  position: absolute;
  left: 10px;
  top: 50%;
  z-index: 2;
  width: 14px;
  height: 14px;
  color: #6d3df5;
  transform: translateY(-50%);
}

.vibra-song-form-page .vibra-tone-card textarea {
  box-sizing: border-box;
  width: 100%;
  height: 38px;
  min-height: 38px !important;
  max-height: 40px;
  padding: 10px 10px 10px 32px;
  border-radius: 7px;
  font-size: 0.625rem;
  line-height: 1.25;
  resize: vertical;
}

@media (max-width: 980px) {
  .vibra-song-form-page .vibra-tone-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .vibra-song-form-page .vibra-lyrics-card .vibra-card-head,
  .vibra-song-form-page .vibra-tone-grid {
    grid-template-columns: 1fr;
  }

  .vibra-song-form-page .vibra-editor-actions {
    display: flex;
    flex-wrap: wrap;
  }

  .vibra-song-form-page .vibra-editor-actions .secondary-button + .secondary-button {
    margin-left: 0;
  }

  .vibra-song-form-page .vibra-lyrics-field textarea {
    height: 210px;
    min-height: 210px;
    max-height: none;
  }

  .vibra-song-form-page .vibra-tone-card {
    height: auto;
    min-height: 74px;
  }
}

/* Correcao cirurgica: informacoes do tom */
.vibra-song-form-page .vibra-tone-strip {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 12px;
}

.vibra-song-form-page .vibra-tone-strip .vibra-card-head {
  margin: 0;
}

.vibra-song-form-page #song-remember-title {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
}

.vibra-song-form-page #song-remember-title .vibra-section-icon {
  width: 17px;
  height: 17px;
}

.vibra-song-form-page .vibra-tone-strip .vibra-card-head p {
  margin-top: 3px;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.25;
}

.vibra-song-form-page .vibra-tone-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  align-items: stretch;
}

.vibra-song-form-page .vibra-tone-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  width: 100%;
  height: 100%;
  min-height: 92px;
  padding: 12px 14px;
  border: 1px solid #e0d4ff;
  border-radius: 10px;
  background: #f7f1ff;
}

.vibra-song-form-page .vibra-tone-card > span {
  margin-bottom: 8px;
  color: #344057;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
}

.vibra-song-form-page .vibra-tone-card-content {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.vibra-song-form-page .vibra-tone-card-content svg {
  width: 15px;
  height: 15px;
  color: #6d3df5;
}

.vibra-song-form-page .vibra-tone-card-content .vibra-theory-value {
  min-width: 0;
  color: #6d3df5;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vibra-song-form-page .vibra-tone-card-content em {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #efe7ff;
  color: #6d3df5;
  font-size: 0.5625rem;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}

.vibra-song-form-page .vibra-compact-textarea {
  position: relative;
  width: 100%;
}

.vibra-song-form-page .vibra-compact-textarea svg {
  position: absolute;
  left: 11px;
  top: 50%;
  z-index: 2;
  width: 15px;
  height: 15px;
  color: #6d3df5;
  transform: translateY(-50%);
}

.vibra-song-form-page .vibra-tone-card textarea {
  box-sizing: border-box;
  width: 100%;
  height: 38px;
  min-height: 38px !important;
  max-height: 38px;
  padding: 9px 10px 9px 34px;
  overflow-y: hidden;
  resize: none;
  border-radius: 8px;
  background: #fff;
  font-size: 0.6875rem;
  line-height: 1.25;
}

@media (max-width: 980px) {
  .vibra-song-form-page .vibra-tone-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vibra-song-form-page .vibra-tone-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .vibra-song-form-page .vibra-tone-grid {
    grid-template-columns: 1fr;
  }

  .vibra-song-form-page .vibra-tone-card:last-child {
    grid-column: auto;
  }
}

/* Correcao final: informacoes do tom como card unico compacto */
.vibra-song-form-page .vibra-tone-strip {
  box-sizing: border-box;
  width: 100%;
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e5ebf5;
  box-shadow: 0 8px 20px rgba(38, 45, 78, 0.06);
}

.vibra-song-form-page .vibra-tone-strip .vibra-card-head {
  margin: 0;
}

.vibra-song-form-page #song-remember-title {
  gap: 7px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
}

.vibra-song-form-page #song-remember-title .vibra-section-icon {
  width: 16px;
  height: 16px;
  align-self: flex-start;
}

.vibra-song-form-page .vibra-tone-strip .vibra-card-head p {
  margin-top: 1px;
  color: #7f8ba8;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.25;
}

.vibra-song-form-page .vibra-tone-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  align-items: end;
  justify-content: stretch;
}

.vibra-song-form-page .vibra-tone-card {
  box-sizing: border-box;
  display: block;
  min-width: 0;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.vibra-song-form-page .vibra-tone-card > span {
  display: block;
  margin: 0 0 6px;
  color: #344057;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
}

.vibra-song-form-page .vibra-tone-card-content {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  width: 100%;
  height: 46px;
  padding: 0 10px;
  border: 1px solid #e0d4ff;
  border-radius: 7px;
  background: #f7f1ff;
}

.vibra-song-form-page .vibra-tone-card-content svg {
  width: 14px;
  height: 14px;
  color: #6d3df5;
}

.vibra-song-form-page .vibra-tone-card-content .vibra-theory-value {
  min-width: 0;
  color: #6d3df5;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.25;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vibra-song-form-page .vibra-tone-card-content em {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #efe7ff;
  color: #6d3df5;
  font-size: 0.5rem;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}

.vibra-song-form-page .vibra-compact-textarea {
  position: relative;
  width: 100%;
}

.vibra-song-form-page .vibra-compact-textarea svg {
  position: absolute;
  left: 11px;
  top: 50%;
  z-index: 2;
  width: 14px;
  height: 14px;
  color: #6d3df5;
  transform: translateY(-50%);
}

.vibra-song-form-page .vibra-tone-card textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 46px;
  min-height: 46px !important;
  max-height: 46px;
  padding: 16px 10px 0 34px;
  overflow: hidden;
  resize: none;
  border: 1px solid #dbe4f1;
  border-radius: 7px;
  background: #fff;
  color: #25304a;
  font-size: 0.625rem;
  line-height: 1.25;
}

.vibra-song-form-page .vibra-tone-card textarea::placeholder {
  color: #8b98b2;
  font-size: 0.625rem;
}

@media (max-width: 900px) {
  .vibra-song-form-page .vibra-tone-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vibra-song-form-page .vibra-tone-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .vibra-song-form-page .vibra-tone-grid {
    grid-template-columns: 1fr;
  }

  .vibra-song-form-page .vibra-tone-card:last-child {
    grid-column: auto;
  }
}

/* Ajuste final do grid de informacoes do tom */
.vibra-song-form-page .vibra-tone-strip .vibra-tone-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(240px, 1fr);
  gap: 18px;
  width: 100%;
  align-items: end;
  justify-content: stretch;
}

.vibra-song-form-page .vibra-tone-strip .vibra-tone-card,
.vibra-song-form-page .vibra-tone-strip .vibra-tone-card:last-child {
  grid-column: auto;
  min-width: 0;
  width: 100%;
  max-width: none;
}

.vibra-song-form-page .vibra-tone-strip .vibra-tone-card-content {
  width: 100%;
  min-width: 0;
  height: 48px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  box-sizing: border-box;
}

.vibra-song-form-page .vibra-tone-strip .vibra-tone-card-content .vibra-theory-value {
  min-width: 0;
  font-size: 0.625rem;
  line-height: 1.2;
  font-weight: 500;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}

.vibra-song-form-page .vibra-tone-strip .vibra-tone-card-content em {
  height: 18px;
  padding: 0 6px;
  font-size: 0.5rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.vibra-song-form-page .vibra-tone-strip .vibra-tone-card > span {
  margin-bottom: 6px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: none;
}

.vibra-song-form-page .vibra-tone-strip .vibra-tone-card textarea {
  width: 100%;
  height: 48px;
  min-height: 48px !important;
  max-height: 48px;
  padding-left: 34px;
  overflow: hidden;
  resize: none;
  box-sizing: border-box;
  font-size: 0.625rem;
}

@media (max-width: 900px) {
  .vibra-song-form-page .vibra-tone-strip .vibra-tone-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vibra-song-form-page .vibra-tone-strip .vibra-tone-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .vibra-song-form-page .vibra-tone-strip .vibra-tone-grid {
    grid-template-columns: 1fr;
  }

  .vibra-song-form-page .vibra-tone-strip .vibra-tone-card:last-child {
    grid-column: auto;
  }
}

/* Estrutura definitiva: informacoes do tom */
.vibra-song-form-page .tone-info-section {
  grid-column: 1 / -1;
  width: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  box-sizing: border-box;
  background: #fff;
}

.vibra-song-form-page .tone-info-header {
  margin: 0 0 10px;
}

.vibra-song-form-page .tone-info-title-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.vibra-song-form-page .tone-info-title-row .vibra-section-icon {
  width: 16px;
  height: 16px;
  color: #6d3df5;
  margin-top: 1px;
}

.vibra-song-form-page .tone-info-title-row h3 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
}

.vibra-song-form-page .tone-info-title-row p {
  margin: 2px 0 0;
  color: #7f8ba8;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.25;
}

.vibra-song-form-page .tone-info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(280px, 1fr);
  gap: 16px;
  width: 100%;
  align-items: end;
}

.vibra-song-form-page .tone-info-column {
  min-width: 0;
}

.vibra-song-form-page .tone-info-column > label {
  display: block;
  margin-bottom: 6px;
  color: #344057;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
}

.vibra-song-form-page .tone-auto-field {
  width: 100%;
  height: 48px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid #e0d4ff;
  border-radius: 8px;
  background: #f7f1ff;
  box-sizing: border-box;
  min-width: 0;
}

.vibra-song-form-page .tone-auto-field svg,
.vibra-song-form-page .tone-reminder-wrapper svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #6d3df5;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.vibra-song-form-page .tone-auto-field__text {
  min-width: 0;
  color: #6d3df5;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vibra-song-form-page .tone-auto-badge {
  height: 18px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #efe7ff;
  color: #6d3df5;
  font-size: 0.5rem;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.vibra-song-form-page .tone-reminder-wrapper {
  position: relative;
  width: 100%;
}

.vibra-song-form-page .tone-reminder-wrapper svg {
  position: absolute;
  left: 12px;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
}

.vibra-song-form-page .tone-reminder-wrapper textarea {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  min-height: 48px !important;
  max-height: 48px;
  resize: none;
  overflow: hidden;
  border: 1px solid #dbe4f1;
  border-radius: 8px;
  background: #fff;
  color: #25304a;
  font-size: 0.625rem;
  line-height: normal;
  padding: 17px 12px 0 36px;
}

.vibra-song-form-page .tone-reminder-wrapper textarea::placeholder {
  color: #8b98b2;
  font-size: 0.625rem;
}

@media (max-width: 900px) {
  .vibra-song-form-page .tone-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vibra-song-form-page .tone-reminder {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .vibra-song-form-page .tone-info-grid {
    grid-template-columns: 1fr;
  }

  .vibra-song-form-page .tone-reminder {
    grid-column: auto;
  }
}

/* Ajuste solicitado: editor menor e tom em largura total */
.vibra-song-form-page .vibra-lyrics-field textarea {
  min-height: 140px;
}

.vibra-song-form-page .tone-info-section {
  grid-column: 1 / -1;
}

/* Fidelidade visual: cabecalho e informacoes principais */
.vibra-song-form-page .vibra-song-hero {
  min-height: 66px;
  padding: 10px 16px;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(38, 45, 78, 0.065);
}

.vibra-song-form-page .vibra-song-title-group {
  gap: 12px;
}

.vibra-song-form-page .vibra-song-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(145deg, #fbf8ff 0%, #f1eaff 100%);
  box-shadow: inset 0 0 0 1px #e5d8ff;
}

.vibra-song-form-page .vibra-song-icon svg {
  width: 21px;
  height: 21px;
}

.vibra-song-form-page .music-form-head h2 {
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.12;
}

.vibra-song-form-page .vibra-song-subtitle {
  margin-top: 3px;
  font-size: 0.74rem;
  line-height: 1.3;
}

.vibra-song-form-page .vibra-song-head-actions {
  gap: 26px;
}

.vibra-song-form-page .vibra-autosave-status {
  font-size: 0.78rem;
}

.vibra-song-form-page #saveMusicButtonTop.primary-button {
  height: 42px;
  min-height: 42px;
  min-width: 162px;
  padding: 0 20px;
  border-radius: 10px;
}

.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child {
  min-height: 0;
  padding: 14px 16px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(38, 45, 78, 0.06);
}

.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .vibra-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  margin-bottom: 12px;
}

.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .vibra-card-head::before {
  display: block;
  content: "";
  grid-column: 1;
  grid-row: 1;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 5px;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 2px, transparent 2.5px),
    linear-gradient(145deg, #f7f1ff, #eee5ff);
  box-shadow: inset 0 0 0 1.5px var(--vibra-purple);
}

.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .vibra-card-head > div {
  grid-column: 2;
}

.vibra-song-form-page #song-main-info-title {
  gap: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.15;
}

.vibra-song-form-page #song-main-info-title::before {
  display: none;
}

.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .vibra-card-head p {
  margin: 2px 0 0;
  color: #68758f;
  font-size: 0.69rem;
  font-weight: 500;
  line-height: 1.2;
}

.vibra-song-form-page .vibra-required-badge {
  grid-column: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid #dfe8f3;
  border-radius: 999px;
  background: #fff;
  color: #34445f;
  font-size: 0.62rem;
  font-weight: 700;
  white-space: nowrap;
}

.vibra-song-form-page .vibra-required-badge span {
  display: grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: #24c46b;
  color: #fff;
  font-size: 0.52rem;
  line-height: 1;
}

.vibra-song-form-page .vibra-required-badge svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .vibra-form-grid-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px 14px;
  align-items: end;
}

.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .title-field {
  grid-column: 1;
  grid-row: 1;
}

.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .artist-field {
  grid-column: 2;
  grid-row: 1;
}

.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .category-field {
  grid-column: 1;
  grid-row: 2;
}

.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .create-category-field {
  grid-column: 2;
  grid-row: 2;
  width: 122px;
  justify-self: start;
}

.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .tone-field {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  width: calc(100% - 136px);
  min-width: 190px;
}

.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .vibra-field {
  gap: 5px;
  color: #3b465d;
  font-size: 0.61rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .vibra-field b {
  color: #ef3340;
  font-weight: 800;
}

.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .vibra-field input,
.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .vibra-field select,
.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .create-category-field .secondary-button {
  height: 36px;
  min-height: 36px;
  border-radius: 7px;
  padding: 0 10px;
  border: 1px solid #dbe4f1;
  color: #25304a;
  font-size: 0.72rem;
  box-shadow: none;
}

.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .vibra-field input::placeholder {
  color: #8b98b2;
  font-size: 0.72rem;
  font-weight: 400;
}

.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .title-field::before,
.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .artist-field::before,
.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .category-field::before,
.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .tone-field::before {
  top: auto;
  bottom: 10px;
  left: 10px;
  width: 15px;
  height: 15px;
  color: var(--vibra-purple);
  font-size: 15px;
}

.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .artist-field::before {
  background:
    linear-gradient(var(--vibra-purple), var(--vibra-purple)) 6px 2px / 3px 8px no-repeat,
    radial-gradient(ellipse at center, transparent 3.5px, var(--vibra-purple) 4px, var(--vibra-purple) 5px, transparent 5.4px) 1px 0 / 13px 12px no-repeat,
    linear-gradient(var(--vibra-purple), var(--vibra-purple)) 3px 13px / 9px 2px no-repeat;
}

.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .category-field::before {
  top: auto;
  bottom: 11px;
  left: 11px;
  width: 13px;
  height: 13px;
  border-width: 1.8px;
  border-radius: 3px;
  transform: rotate(-18deg);
}

.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .category-field::after {
  top: auto;
  bottom: 19px;
  left: 15px;
  width: 3px;
  height: 3px;
}

.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .title-field input,
.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .artist-field input,
.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .category-field input,
.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .tone-field select {
  padding-left: 32px;
}

.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .tone-field select {
  padding-right: 30px;
  background-position:
    calc(100% - 18px) 16px,
    calc(100% - 13px) 16px;
  background-size: 5px 5px, 5px 5px;
}

.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .create-category-field .secondary-button {
  width: auto;
  min-width: 112px;
  padding: 0 14px;
  gap: 6px;
  border-color: #cab8ff;
  color: var(--vibra-purple);
  font-size: 0.69rem;
  font-weight: 600;
}

.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .create-category-field .secondary-button span {
  width: 14px;
  height: 14px;
  font-size: 0.95rem;
}

.vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .field-error {
  position: absolute;
  margin: 0;
  min-height: 0;
  font-size: 0.62rem;
  transform: translateY(2px);
}

@media (max-width: 900px) {
  .vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .vibra-form-grid-main {
    grid-template-columns: 1fr 1fr;
  }

  .vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .title-field,
  .vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .artist-field,
  .vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .category-field,
  .vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .create-category-field,
  .vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .tone-field {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }
}

@media (max-width: 640px) {
  .vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .vibra-form-grid-main {
    grid-template-columns: 1fr;
  }

  .vibra-song-form-page .vibra-song-main > .vibra-form-card:first-child .vibra-card-head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .vibra-song-form-page .vibra-required-badge {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* Overrides finais da pagina Musicas para preservar a fidelidade visual acima da cascata legada. */
.vibra-music-page #cardsView.song-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 7px !important;
}

.vibra-music-page .song-card {
  display: grid !important;
  grid-template-columns: 46px minmax(260px, 1fr) auto 28px !important;
  min-height: 116px !important;
  padding: 12px 10px 12px 14px !important;
  border: 1px solid #EEEAF8 !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(54, 40, 96, 0.025) !important;
}

.vibra-music-page .song-card-side {
  width: auto !important;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-flow: row nowrap !important;
  justify-content: flex-end !important;
}

.vibra-music-page .vibra-action,
.vibra-music-page .vibra-action:visited {
  width: auto !important;
  min-height: 34px !important;
  border: 1px solid #EEEAF8 !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

/* EOF override: menu Opcoes da tela Musicas. */
.vibra-music-page #cardsView.song-grid,
.vibra-music-page .song-card,
.vibra-music-page .song-card-side,
#cardsView .song-card-side,
#cardsView .song-card-side > *,
#cardsView .song-card-side .song-options-menu {
  overflow: visible !important;
}

.vibra-music-page .song-card {
  grid-template-columns: minmax(0, 1fr) auto 28px !important;
  z-index: 0;
}

.vibra-music-page .song-card:has(.song-options-menu[open]) {
  z-index: 300 !important;
}

.vibra-music-page .song-options-menu {
  position: relative !important;
  z-index: 320 !important;
}

.vibra-music-page .song-options-button {
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 10px !important;
  border: 1px solid #EEEAF8 !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  color: #56537A !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.vibra-music-page .song-options-button::-webkit-details-marker {
  display: none;
}

.vibra-music-page .song-options-popover {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  z-index: 340 !important;
  display: none;
  min-width: 150px;
  padding: 6px;
  border: 1px solid #EEEAF8;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 18px 36px rgba(31, 27, 64, 0.18);
}

.vibra-music-page .song-options-menu[open] .song-options-popover {
  display: block !important;
}

.vibra-music-page .song-options-item {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #343158;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
}

.vibra-music-page .song-options-item.is-danger {
  color: #EF4444;
}

@media (max-width: 760px) {
  .vibra-music-page .song-card {
    grid-template-columns: minmax(0, 1fr) 30px !important;
  }

  .vibra-music-page .song-card-side {
    grid-column: 1 / -1;
    width: 100% !important;
    flex-flow: row wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  .vibra-music-page .song-options-menu {
    margin-left: auto;
  }

  .vibra-music-page .song-options-button {
    width: 34px !important;
    padding: 0 !important;
  }

  .vibra-music-page .song-options-button span {
    display: none !important;
  }
}

@media (max-width: 760px) {
  body[data-theme="dark"] .bottom-nav-bar {
    background: rgb(8, 8, 34) !important;
    color: rgb(15, 23, 42) !important;
    border-color: rgba(139, 92, 246, 0.3) rgb(15, 23, 42) rgb(15, 23, 42) !important;
    box-shadow: rgba(0, 0, 0, 0.3) 0 -4px 24px 0 !important;
  }

  body[data-theme="dark"] .bottom-nav-item,
  body[data-theme="dark"] .bottom-nav-item:hover,
  body[data-theme="dark"] .bottom-nav-item.is-active,
  body[data-theme="dark"] .bottom-nav-item.is-active span,
  body[data-theme="dark"] .bottom-nav-item.is-active svg {
    background: rgba(0, 0, 0, 0) !important;
    color: rgb(155, 92, 255) !important;
    border-color: rgb(155, 92, 255) !important;
    box-shadow: none !important;
  }

  body[data-theme="dark"] .bottom-nav-fab,
  body[data-theme="dark"] .bottom-nav-fab[aria-expanded="true"] {
    background: rgba(0, 0, 0, 0) !important;
    color: rgb(255, 255, 255) !important;
    border-color: rgb(255, 255, 255) !important;
    box-shadow: rgba(109, 40, 217, 0.38) 0 12px 26px 0, rgb(8, 8, 34) 0 0 0 7px !important;
  }
}


body[data-theme="dark"] .vibra-music-page .toolbar label.search-field {
  background: rgba(30, 41, 59, 0.94) !important;
  border-color: rgba(165, 180, 252, 0.34) !important;
}

body[data-theme="dark"] .vibra-music-page .toolbar label.search-field > input#searchInput {
  background: transparent !important;
  border-color: transparent !important;
  color: #f8fafc !important;
  box-shadow: none !important;
}

/* EOF dark guarantee: botoes da lista de Musicas legiveis no tema escuro. */
body[data-theme="dark"] .vibra-music-page .song-card {
  border-color: #2b2a43 !important;
  background: #171a2b !important;
  color: #e8e7ff !important;
}

body[data-theme="dark"] .vibra-music-page .vibra-action,
body[data-theme="dark"] .vibra-music-page .vibra-action:visited,
body[data-theme="dark"] .vibra-music-page .song-options-button,
body[data-theme="dark"] .vibra-music-page .song-select-button,
body[data-theme="dark"] .vibra-music-page .favorite-button,
body[data-theme="dark"] .vibra-music-page .table-action,
body[data-theme="dark"] .vibra-music-page .song-check {
  border-color: #4a4f73 !important;
  background: #20243a !important;
  color: #ddd6fe !important;
}

body[data-theme="dark"] .vibra-music-page .vibra-action span,
body[data-theme="dark"] .vibra-music-page .song-options-button span,
body[data-theme="dark"] .vibra-music-page .song-select-button span,
body[data-theme="dark"] .vibra-music-page .favorite-button span,
body[data-theme="dark"] .vibra-music-page .table-action span,
body[data-theme="dark"] .vibra-music-page .song-check span {
  color: #ddd6fe !important;
}

body[data-theme="dark"] .vibra-music-page .vibra-action .action-icon,
body[data-theme="dark"] .vibra-music-page .song-options-button .action-icon,
body[data-theme="dark"] .vibra-music-page .song-select-button .action-icon,
body[data-theme="dark"] .vibra-music-page .favorite-button .action-icon,
body[data-theme="dark"] .vibra-music-page .table-action .action-icon {
  color: #c4b5fd !important;
  stroke: currentColor !important;
}

body[data-theme="dark"] .vibra-music-page .vibra-action:hover,
body[data-theme="dark"] .vibra-music-page .song-options-button:hover,
body[data-theme="dark"] .vibra-music-page .song-select-button:hover,
body[data-theme="dark"] .vibra-music-page .favorite-button:hover,
body[data-theme="dark"] .vibra-music-page .table-action:hover {
  border-color: #7c6ee6 !important;
  background: #2a2346 !important;
  color: #ffffff !important;
}

body[data-theme="dark"] .vibra-music-page .vibra-action:hover span,
body[data-theme="dark"] .vibra-music-page .song-options-button:hover span,
body[data-theme="dark"] .vibra-music-page .song-select-button:hover span,
body[data-theme="dark"] .vibra-music-page .favorite-button:hover span,
body[data-theme="dark"] .vibra-music-page .table-action:hover span {
  color: #ffffff !important;
}

body[data-theme="dark"] .vibra-music-page .song-options-popover {
  border-color: #4a4f73 !important;
  background: #111827 !important;
}

body[data-theme="dark"] .vibra-music-page .song-options-item {
  color: #ddd6fe !important;
}

/* EOF guarantee: repertorio builder layout must win over legacy duplicates. */
.setlist-panel[data-section-panel="montar"] {
  width: min(100%, 1120px) !important;
  margin-inline: auto !important;
  padding: clamp(18px, 3vw, 32px) !important;
  overflow: hidden !important;
  border: 1px solid #ede7ff !important;
  border-radius: 14px !important;
  background: radial-gradient(circle at 82% 8%, rgba(168, 85, 247, 0.13), transparent 26%), #fff !important;
  box-shadow: 0 18px 46px rgba(80, 58, 140, 0.08) !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: 26px !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-head-actions {
  display: flex !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-name-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 34%) !important;
  gap: 14px 24px !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-empty.is-hidden {
  display: none !important;
}

body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] {
  border-color: rgba(167, 139, 250, 0.32) !important;
  background: radial-gradient(circle at 82% 8%, rgba(139, 92, 246, 0.22), transparent 26%), #0b1024 !important;
}

body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] h2,
body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] h3 {
  color: #f8fafc !important;
}

body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] .setlist-name-card,
body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] .setlist-empty {
  background: rgba(15, 23, 42, 0.74) !important;
  border-color: rgba(167, 139, 250, 0.28) !important;
}

body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] input#repertoireName {
  background: rgba(2, 6, 23, 0.68) !important;
  color: #f8fafc !important;
}

@media (max-width: 760px) {
  .setlist-panel[data-section-panel="montar"] {
    width: 100% !important;
    padding: 18px 14px !important;
  }

  .setlist-panel[data-section-panel="montar"] .setlist-head {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .setlist-panel[data-section-panel="montar"] .setlist-head-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .setlist-panel[data-section-panel="montar"] .setlist-name-card {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
  }

  .setlist-panel[data-section-panel="montar"] .setlist-field-help,
  .setlist-panel[data-section-panel="montar"] .save-message {
    grid-column: 1 / -1 !important;
    text-align: left !important;
  }
}

/* EOF refine: Seu Repertorio com lista selecionada. */
.setlist-panel[data-section-panel="montar"] .setlist-head {
  padding-bottom: 2px !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-kicker {
  letter-spacing: 0 !important;
}

.setlist-panel[data-section-panel="montar"] #setlistCount::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 6px;
  border: 2px solid currentColor;
  border-radius: 999px;
  vertical-align: -2px;
  opacity: 0.7;
}

.setlist-panel[data-section-panel="montar"] .setlist-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 0;
  padding: 14px 18px;
  border: 1px solid #ede7ff;
  border-radius: 12px 12px 0 0;
  background: rgba(255, 255, 255, 0.86);
  color: #777293;
  font-size: 12px;
  font-weight: 800;
}

.setlist-panel[data-section-panel="montar"] .setlist-list-toolbar.is-hidden {
  display: none !important;
}

.setlist-reorder-help,
.setlist-list-actions,
.setlist-list-summary,
.setlist-add-inline-button,
.setlist-bottom-tip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.setlist-reorder-help svg {
  width: 17px;
  height: 17px;
  color: #8b5cf6;
}

.setlist-list-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.setlist-list-summary {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  background: #f1e9ff;
  color: #7c3aed;
  font-size: 12px;
  font-weight: 900;
}

.setlist-add-inline-button {
  min-height: 36px !important;
  padding: 0 14px !important;
  border: 1px solid #d9c8ff !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #7c3aed !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.setlist-panel[data-section-panel="montar"] #setlist.setlist {
  gap: 0 !important;
  border: 1px solid #ede7ff !important;
  border-top: 0 !important;
  border-radius: 0 0 12px 12px !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

.setlist-panel[data-section-panel="montar"] #setlist.setlist:empty {
  display: none !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-item {
  display: grid !important;
  grid-template-columns: 26px 38px minmax(0, 1fr) auto 28px !important;
  gap: 12px !important;
  align-items: center !important;
  min-height: 76px !important;
  padding: 14px 18px !important;
  border: 0 !important;
  border-bottom: 1px solid #f0ebfb !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-item:last-child {
  border-bottom: 0 !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-item:hover {
  background: #fbfaff !important;
}

.setlist-panel[data-section-panel="montar"] .drag-handle {
  min-width: 0 !important;
  width: 24px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #9b8ac3 !important;
  cursor: grab;
}

.setlist-panel[data-section-panel="montar"] .drag-handle .action-icon,
.setlist-panel[data-section-panel="montar"] .setlist-actions .action-icon,
.setlist-panel[data-section-panel="montar"] .setlist-more-button .action-icon {
  width: 15px;
  height: 15px;
}

.setlist-panel[data-section-panel="montar"] .setlist-number {
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  box-shadow: 0 8px 18px rgba(109, 40, 217, 0.2) !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-song strong {
  color: #171433 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-song span {
  color: #777293 !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-actions button,
.setlist-panel[data-section-panel="montar"] .setlist-actions .small-link-button {
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 10px !important;
  border: 1px solid #eee8fb !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #7c3aed !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-actions button:disabled {
  color: #a8a1ba !important;
  background: #f6f3fb !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-actions .setlist-remove-button {
  color: #ef4444 !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-more-button {
  width: 28px !important;
  height: 34px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #8b87a8 !important;
  cursor: pointer;
}

.setlist-bottom-tip {
  width: 100%;
  min-height: 42px;
  margin: 14px 0 0;
  padding: 0 16px;
  border-radius: 8px;
  background: #f7f5fb;
  color: #777293;
  font-size: 12px;
  font-weight: 750;
}

.setlist-bottom-tip.is-hidden {
  display: none !important;
}

.setlist-bottom-tip strong {
  color: #7c3aed;
}

body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] .setlist-list-toolbar,
body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] #setlist.setlist,
body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] .setlist-item {
  border-color: rgba(167, 139, 250, 0.22) !important;
  background: rgba(15, 23, 42, 0.72) !important;
}

body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] .setlist-item:hover {
  background: rgba(30, 41, 59, 0.78) !important;
}

body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] .setlist-song strong {
  color: #f8fafc !important;
}

body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] .setlist-song span,
body[data-theme="dark"] .setlist-reorder-help,
body[data-theme="dark"] .setlist-bottom-tip {
  color: #cbd5e1 !important;
}

body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] .setlist-actions button,
body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] .setlist-actions .small-link-button,
body[data-theme="dark"] .setlist-add-inline-button {
  border-color: rgba(196, 181, 253, 0.3) !important;
  background: rgba(2, 6, 23, 0.45) !important;
  color: #ede9fe !important;
}

body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] .setlist-actions .setlist-remove-button {
  color: #fca5a5 !important;
}

body[data-theme="dark"] .setlist-list-summary {
  background: rgba(124, 58, 237, 0.22) !important;
  color: #ddd6fe !important;
}

body[data-theme="dark"] .setlist-bottom-tip {
  background: rgba(15, 23, 42, 0.72) !important;
}

@media (max-width: 900px) {
  .setlist-panel[data-section-panel="montar"] .setlist-item {
    grid-template-columns: 24px 34px minmax(0, 1fr) 28px !important;
    grid-template-areas:
      "drag number song more"
      "actions actions actions actions" !important;
    gap: 10px !important;
    padding: 13px 12px !important;
  }

  .setlist-panel[data-section-panel="montar"] .drag-handle { grid-area: drag; }
  .setlist-panel[data-section-panel="montar"] .setlist-number { grid-area: number; }
  .setlist-panel[data-section-panel="montar"] .setlist-song { grid-area: song; }
  .setlist-panel[data-section-panel="montar"] .setlist-actions { grid-area: actions; }
  .setlist-panel[data-section-panel="montar"] .setlist-more-button { grid-area: more; }

  .setlist-panel[data-section-panel="montar"] .setlist-actions {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }

  .setlist-panel[data-section-panel="montar"] .setlist-actions button,
  .setlist-panel[data-section-panel="montar"] .setlist-actions .small-link-button {
    flex: 1 1 90px !important;
    min-width: 0 !important;
  }
}

@media (max-width: 640px) {
  .setlist-panel[data-section-panel="montar"] .setlist-list-toolbar {
    align-items: stretch;
    flex-direction: column;
    padding: 12px;
  }

  .setlist-list-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .setlist-list-summary,
  .setlist-add-inline-button {
    width: 100%;
    justify-content: center;
  }

  .setlist-panel[data-section-panel="montar"] .setlist-actions button span,
  .setlist-panel[data-section-panel="montar"] .setlist-actions .small-link-button span {
    display: inline;
  }
}

/* EOF pixel refine: Seu Repertorio alinhado ao design de referencia. */
.setlist-panel[data-section-panel="montar"] {
  max-width: 1120px !important;
  padding: 26px 28px 22px !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 86% 7%, rgba(168, 85, 247, 0.11), transparent 25%),
    radial-gradient(circle at 66% 5%, rgba(124, 58, 237, 0.055), transparent 26%),
    #ffffff !important;
  box-shadow: 0 16px 42px rgba(70, 54, 130, 0.075) !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-head {
  align-items: flex-start !important;
  margin: 0 0 26px !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-kicker {
  gap: 8px !important;
  color: #7c3aed !important;
  font-size: 11px !important;
  font-weight: 950 !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-kicker svg {
  width: 18px !important;
  height: 18px !important;
  padding: 3px !important;
  border-radius: 6px !important;
  background: #f0e7ff !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-head h2 {
  margin: 9px 0 7px !important;
  color: #171433 !important;
  font-size: 34px !important;
  font-weight: 950 !important;
  line-height: 1.03 !important;
}

.setlist-panel[data-section-panel="montar"] #setlistCount {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #65617e !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.setlist-panel[data-section-panel="montar"] #setlistCount::before {
  width: 13px !important;
  height: 13px !important;
  margin: 0 !important;
  border-width: 2px !important;
  opacity: 0.72 !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-head-actions {
  gap: 12px !important;
  padding-top: 15px !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-outline-button {
  min-height: 44px !important;
  padding: 0 18px !important;
  border-color: #dfd1ff !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.88) !important;
  color: #6d28d9 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  box-shadow: 0 8px 18px rgba(109,40,217,.045) !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-outline-button svg {
  width: 16px !important;
  height: 16px !important;
}

.setlist-panel[data-section-panel="montar"] .save-repertoire {
  margin-bottom: 28px !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-name-card {
  grid-template-columns: minmax(0, 1fr) 300px !important;
  gap: 10px 24px !important;
  align-items: end !important;
  padding: 20px 22px 18px !important;
  border: 1px solid #eee7fb !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.84) !important;
  box-shadow: 0 10px 28px rgba(70,54,130,.04) !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-field-label {
  gap: 8px !important;
  color: #5f38d9 !important;
  font-size: 10px !important;
  font-weight: 950 !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-field-label svg {
  width: 15px !important;
  height: 15px !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-name-field {
  gap: 11px !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-input-shell input#repertoireName {
  min-height: 48px !important;
  padding-left: 42px !important;
  padding-right: 74px !important;
  border: 2px solid #c19aff !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  color: #211b3f !important;
  font-size: 14px !important;
  font-weight: 780 !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-input-icon {
  left: 16px !important;
  width: 17px !important;
  height: 17px !important;
  color: #8b87a8 !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-input-count {
  right: 15px !important;
  color: #777293 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-save-button {
  min-height: 50px !important;
  border-radius: 7px !important;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
  box-shadow: 0 12px 22px rgba(109, 40, 217, 0.23) !important;
  font-size: 13px !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-save-button svg {
  width: 16px !important;
  height: 16px !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-field-help {
  margin: 0 !important;
  color: #74708f !important;
  font-size: 11px !important;
  font-weight: 720 !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-list-toolbar {
  min-height: 52px !important;
  margin-top: 0 !important;
  padding: 10px 18px !important;
  border-color: #eee7fb !important;
  border-radius: 12px 12px 0 0 !important;
  background: rgba(255,255,255,.9) !important;
  font-size: 11px !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-reorder-help {
  color: #777293 !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-reorder-help svg {
  width: 15px !important;
  height: 15px !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-list-summary {
  min-height: 31px !important;
  padding: 0 12px !important;
  border-radius: 7px !important;
  background: #f5edff !important;
  color: #7c3aed !important;
  font-size: 11px !important;
  font-weight: 950 !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-add-inline-button {
  min-height: 34px !important;
  padding: 0 15px !important;
  border-color: #d7c6ff !important;
  border-radius: 7px !important;
  color: #7c3aed !important;
  font-size: 11px !important;
  font-weight: 950 !important;
}

.setlist-panel[data-section-panel="montar"] #setlist.setlist {
  border-color: #eee7fb !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-item {
  grid-template-columns: 24px 36px minmax(0, 1fr) auto 24px !important;
  min-height: 73px !important;
  gap: 12px !important;
  padding: 12px 17px !important;
  border-bottom-color: #f0ebfb !important;
}

.setlist-panel[data-section-panel="montar"] .drag-handle {
  width: 22px !important;
  height: 30px !important;
  color: #9588bd !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-number {
  width: 32px !important;
  height: 32px !important;
  font-size: 12px !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-song {
  gap: 4px !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-song strong {
  color: #181433 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-song span {
  color: #777293 !important;
  font-size: 11px !important;
  font-weight: 760 !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-actions {
  gap: 9px !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-actions button,
.setlist-panel[data-section-panel="montar"] .setlist-actions .small-link-button {
  min-height: 32px !important;
  padding: 0 10px !important;
  border-color: #eee8fb !important;
  border-radius: 7px !important;
  color: #7c3aed !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-actions .setlist-remove-button {
  color: #ef4444 !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-actions button:disabled {
  background: #f7f4fb !important;
  color: #b2abc3 !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-more-button {
  width: 24px !important;
  height: 32px !important;
  color: #8f86a8 !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-bottom-tip {
  min-height: 42px !important;
  margin-top: 14px !important;
  padding: 0 16px !important;
  border-radius: 7px !important;
  background: #f7f5fb !important;
  color: #777293 !important;
  font-size: 11px !important;
  font-weight: 760 !important;
}

.setlist-panel[data-section-panel="montar"] .setlist-bottom-tip::before {
  content: "i";
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #7c3aed;
  color: #fff;
  font-size: 10px;
  font-weight: 950;
}

body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] .setlist-head h2,
body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] .setlist-song strong {
  color: #f8fafc !important;
}

body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] #setlistCount,
body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] .setlist-field-help,
body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] .setlist-song span,
body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] .setlist-reorder-help,
body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] .setlist-bottom-tip {
  color: #cbd5e1 !important;
}

body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] .setlist-name-card,
body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] .setlist-list-toolbar,
body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] #setlist.setlist,
body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] .setlist-item,
body[data-theme="dark"] .setlist-panel[data-section-panel="montar"] .setlist-bottom-tip {
  border-color: rgba(167, 139, 250, 0.24) !important;
  background: rgba(15, 23, 42, 0.78) !important;
}

@media (max-width: 760px) {
  .setlist-panel[data-section-panel="montar"] {
    padding: 18px 14px 16px !important;
  }

  .setlist-panel[data-section-panel="montar"] .setlist-head h2 {
    font-size: 28px !important;
  }

  .setlist-panel[data-section-panel="montar"] .setlist-head-actions {
    padding-top: 0 !important;
  }

  .setlist-panel[data-section-panel="montar"] .setlist-name-card {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
  }

  .setlist-panel[data-section-panel="montar"] .setlist-item {
    grid-template-columns: 22px 32px minmax(0, 1fr) 24px !important;
    min-height: 0 !important;
    padding: 12px !important;
  }

  .setlist-panel[data-section-panel="montar"] .setlist-actions {
    gap: 7px !important;
  }

  .setlist-panel[data-section-panel="montar"] .setlist-actions button,
  .setlist-panel[data-section-panel="montar"] .setlist-actions .small-link-button {
    flex-basis: 86px !important;
  }
}

/* EOF tweak: respiro superior do marcador Seu Repertorio. */
.setlist-panel[data-section-panel="montar"] span.setlist-kicker {
  margin-top: 8px !important;
}

/* EOF tweak: mais respiro vertical no marcador Seu Repertorio. */
.setlist-panel[data-section-panel="montar"] span.setlist-kicker {
  margin-top: 14px !important;
  margin-bottom: 6px !important;
}

/* EOF feature: Novo acorde / editor de cifras. */
.new-chord-panel {
  padding: 18px !important;
}

.new-chord-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px;
  border: 1px solid #eee7fb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(70, 54, 130, 0.07);
}

.new-chord-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 6px 0 18px;
}

.new-chord-back {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #eee7fb;
  border-radius: 8px;
  background: #fff;
  color: #7c3aed;
}

.new-chord-back svg { width: 17px; height: 17px; }
.new-chord-breadcrumb { margin: 0 0 10px; color: #777293; font-size: 11px; font-weight: 800; }
.new-chord-head h2 { margin: 0 0 4px; color: #171433; font-size: 28px; line-height: 1.05; }
.new-chord-head span { color: #777293; font-size: 12px; font-weight: 750; }
.new-chord-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.new-chord-actions button { min-height: 38px !important; border-radius: 8px !important; font-size: 12px !important; font-weight: 900 !important; }

.chord-new-button { min-height: 40px !important; border-radius: 8px !important; white-space: nowrap; }

.new-chord-grid {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 230px;
  gap: 14px;
}

.new-chord-side,
.new-chord-summary {
  display: grid;
  gap: 12px;
  align-content: start;
}

.new-chord-card,
.new-chord-editor {
  border: 1px solid #eee7fb;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(70,54,130,.035);
}

.new-chord-card { padding: 14px; }
.new-chord-card h3 { margin: 0 0 12px; color: #5f38d9; font-size: 11px; text-transform: uppercase; }
.new-chord-card label { display: grid; gap: 6px; margin-bottom: 10px; color: #302b52; font-size: 11px; font-weight: 850; }
.new-chord-card input,
.new-chord-card select {
  width: 100%;
  min-height: 36px;
  border: 1px solid #e6def7;
  border-radius: 7px;
  background: #fff;
  color: #27223f;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 750;
}

.new-chord-string-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.new-chord-string-chips span,
#newChordDetectedNotes span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 28px;
  border-radius: 7px;
  background: #f1e9ff;
  color: #7c3aed;
  font-size: 12px;
  font-weight: 900;
}

.new-chord-toggle { grid-template-columns: 1fr auto !important; align-items: center; }
.new-chord-toggle input { width: 36px; min-height: 20px; accent-color: #7c3aed; }

.new-chord-editor { padding: 14px; min-width: 0; }
.new-chord-editor-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.new-chord-editor-head span { display: block; margin-bottom: 7px; color: #777293; font-size: 11px; font-weight: 850; }
.new-chord-segments,
.new-chord-fret-range { display: flex; gap: 6px; flex-wrap: wrap; }
.new-chord-segments button,
.new-chord-fret-range span {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #e6def7;
  border-radius: 7px;
  background: #fff;
  color: #5b5474;
  font-size: 11px;
  font-weight: 850;
}
.new-chord-segments button.is-active { background: #7c3aed; color: #fff; border-color: #7c3aed; }

.new-chord-board {
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(90deg, #9a612b, #b9773d 45%, #8e5528);
  border: 1px solid rgba(96, 57, 24, .35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

.new-chord-fret-labels,
.new-chord-string-row {
  display: grid;
  grid-template-columns: 34px 44px repeat(5, minmax(54px, 1fr));
}

.new-chord-fret-labels span {
  display: grid;
  place-items: center;
  min-height: 24px;
  color: rgba(255,255,255,.85);
  font-size: 11px;
  font-weight: 850;
}

.new-chord-string-row > * {
  min-height: 42px;
  border: 0;
  border-right: 2px solid rgba(230, 235, 245, .75);
  border-bottom: 1px solid rgba(255,255,255,.35);
  background: transparent;
  color: #fff;
  font-size: 11px;
  font-weight: 850;
}

.new-chord-string-state { background: rgba(15, 23, 42, .64) !important; }
.new-chord-string-state.is-muted { color: #fecaca; }
.new-chord-open.is-open { outline: 2px solid #fff; outline-offset: -8px; border-radius: 999px; }
.new-chord-cell { cursor: pointer; }
.new-chord-cell.is-active {
  position: relative;
  background: radial-gradient(circle, #7c3aed 0 36%, rgba(124,58,237,.15) 38%, transparent 45%) !important;
  color: #fff;
}

.new-chord-legend,
.new-chord-detected {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: 12px;
  color: #777293;
  font-size: 11px;
  font-weight: 850;
}
.new-chord-legend span { display: inline-flex; align-items: center; gap: 7px; }
.new-chord-legend b,
.new-chord-legend i { width: 12px; height: 12px; border-radius: 999px; display: inline-block; }
.new-chord-legend b { background: #7c3aed; }
.new-chord-legend i { border: 2px solid #7c3aed; }
.new-chord-legend em { font-style: normal; color: #777293; }

.new-chord-detected {
  justify-content: space-between;
  padding: 14px;
  border: 1px solid #eee7fb;
  border-radius: 10px;
  background: #fff;
}
.new-chord-detected > div { display: grid; gap: 8px; }
#newChordFormula { color: #7c3aed; }

.new-chord-summary .new-chord-card span { display: block; margin-top: 10px; color: #777293; font-size: 11px; font-weight: 800; }
.new-chord-summary .new-chord-card strong { display: block; margin-top: 5px; color: #171433; font-size: 24px; }
.new-chord-summary .new-chord-card p { margin: 5px 0 0; color: #302b52; font-size: 12px; font-weight: 800; }
.new-chord-mini-diagram { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 10px; }
.new-chord-mini-diagram span { min-height: 34px; display: grid; place-items: center; border: 1px solid #e6def7; border-radius: 7px; color: #7c3aed; font-weight: 900; }
.new-chord-personal-note,
.new-chord-tip {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 9px;
  background: #f7f2ff;
  color: #5f5778;
  font-size: 12px;
  font-weight: 750;
}
.new-chord-personal-note strong,
.new-chord-tip strong { display: block; color: #7c3aed; margin-bottom: 3px; }

body[data-theme="dark"] .new-chord-shell,
body[data-theme="dark"] .new-chord-card,
body[data-theme="dark"] .new-chord-editor,
body[data-theme="dark"] .new-chord-detected {
  border-color: rgba(167,139,250,.24);
  background: #0b1024;
}
body[data-theme="dark"] .new-chord-head h2,
body[data-theme="dark"] .new-chord-summary .new-chord-card strong { color: #f8fafc; }
body[data-theme="dark"] .new-chord-head span,
body[data-theme="dark"] .new-chord-breadcrumb,
body[data-theme="dark"] .new-chord-card label,
body[data-theme="dark"] .new-chord-summary .new-chord-card p,
body[data-theme="dark"] .new-chord-legend,
body[data-theme="dark"] .new-chord-detected { color: #cbd5e1; }
body[data-theme="dark"] .new-chord-card input,
body[data-theme="dark"] .new-chord-card select,
body[data-theme="dark"] .new-chord-segments button { background: rgba(2,6,23,.55); color: #f8fafc; border-color: rgba(167,139,250,.24); }

@media (max-width: 980px) {
  .new-chord-grid { grid-template-columns: 1fr; }
  .new-chord-head { grid-template-columns: 34px minmax(0,1fr); }
  .new-chord-actions { grid-column: 1 / -1; justify-content: stretch; }
  .new-chord-actions button { flex: 1 1 150px; }
  .new-chord-editor-head { flex-direction: column; }
  .new-chord-fret-labels,
  .new-chord-string-row { grid-template-columns: 30px 38px repeat(5, minmax(42px, 1fr)); }
}

/* EOF fix: Novo acorde sem overflow interno em mobile. */
.new-chord-card #newChordSuggestion {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 980px) {
  .new-chord-board {
    overflow-x: auto !important;
  }

  .new-chord-fret-labels,
  .new-chord-string-row {
    grid-template-columns: 28px 34px repeat(5, minmax(35px, 1fr)) !important;
    min-width: 0 !important;
  }

  .new-chord-string-row > * {
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 0 !important;
    font-size: 10px !important;
  }
}
/* Repertorios salvos: referencia visual desktop */
body:has(.saved-repertoires-panel[data-section-panel="salvos"]:not(.is-hidden)) {
  background: #F7F4FF;
}

.saved-repertoires-panel[data-section-panel="salvos"] {
  width: calc(100% - 40px);
  max-width: none;
  margin: 18px auto 0;
  padding: 24px 28px 10px;
  border: 1px solid rgba(124, 58, 237, 0.11);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 46px rgba(41, 23, 83, 0.06);
}

.saved-repertoires-panel[data-section-panel="salvos"] .saved-head {
  display: grid;
  grid-template-columns: minmax(450px, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 138px;
  margin: 0 0 14px;
  padding: 0 18px;
}

.saved-repertoires-panel[data-section-panel="salvos"] .saved-head > div:first-child {
  align-self: center;
  padding: 18px 0 18px 22px;
}

.saved-repertoires-panel[data-section-panel="salvos"] .eyebrow.dark {
  margin: 0 0 10px;
  color: var(--accent);
  font-family: var(--font-semi);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0;
}

.saved-repertoires-panel[data-section-panel="salvos"] .saved-head h2 {
  margin: 0;
  color: #09051F;
  font-size: 34px !important;
  line-height: 1.04;
  letter-spacing: 0;
}

.saved-repertoires-panel[data-section-panel="salvos"] .saved-subtitle {
  margin: 12px 0 0;
  color: #64708A;
  font-size: 0.95rem;
  white-space: nowrap;
}

.saved-head-actions {
  display: grid;
  grid-template-columns: 250px 210px;
  align-items: center;
  gap: 16px;
  justify-content: end;
}

.saved-summary-card {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 250px;
  height: 68px;
  min-height: 68px;
  padding: 12px 18px;
  border: 1px solid rgba(124, 58, 237, 0.13);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.045);
}

.saved-summary-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  color: var(--accent);
  background: rgba(124, 58, 237, 0.1);
}

.saved-summary-icon svg {
  width: 24px;
  height: 24px;
}

.saved-summary-card strong,
.saved-summary-card small {
  display: block;
}

.saved-summary-card strong#savedCount {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #11102A;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-semi);
  font-size: 1rem;
  line-height: 1.2;
}

.saved-summary-card small {
  margin-top: 5px;
  color: #6D7892;
  font-size: 0.92rem;
  white-space: nowrap;
}

.saved-new-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 210px;
  height: 68px;
  min-height: 68px;
  padding: 0 22px;
  gap: 9px;
  justify-content: center;
  border-radius: 11px;
  background: linear-gradient(135deg, #7C3AED, #5B21D9);
  box-shadow: 0 16px 30px rgba(91, 33, 217, 0.22);
  font-family: var(--font-semi);
}

.saved-repertoires-panel[data-section-panel="salvos"] .saved-list {
  gap: 7px;
}

.saved-repertoires-panel[data-section-panel="salvos"] .saved-item {
  position: relative;
  display: grid;
  grid-template-columns: 84px 174px minmax(220px, 1fr) 220px 190px;
  align-items: center;
  gap: 0;
  min-height: 76px;
  max-height: 84px;
  padding: 10px 16px 10px 26px;
  overflow: hidden;
  border-color: rgba(124, 58, 237, 0.13);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.035);
}

.saved-repertoires-panel[data-section-panel="salvos"] .saved-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 12px 0 0 12px;
  background: #7C3AED;
}

.saved-repertoires-panel[data-section-panel="salvos"] .saved-item:hover,
.saved-repertoires-panel[data-section-panel="salvos"] .saved-item:focus-within {
  border-color: rgba(124, 58, 237, 0.28);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.065);
  transform: none;
}

.saved-repertoires-panel[data-section-panel="salvos"] .saved-repertoire-icon {
  display: grid;
  place-items: center;
  justify-self: center;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #C4B5FD 0%, #8B5CF6 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.36);
}

.saved-repertoires-panel[data-section-panel="salvos"] .saved-repertoire-icon .action-icon,
.saved-repertoires-panel[data-section-panel="salvos"] .saved-repertoire-music-icon {
  width: 26px;
  height: 26px;
  display: block;
  transform: translate(0, 0);
}

.saved-repertoires-panel[data-section-panel="salvos"] .saved-name strong {
  color: #11102A;
  font-size: 1rem;
  line-height: 1.15;
}

.saved-repertoires-panel[data-section-panel="salvos"] .saved-name,
.saved-repertoires-panel[data-section-panel="salvos"] .saved-name:hover,
body[data-theme="dark"] .saved-repertoires-panel[data-section-panel="salvos"] .saved-name,
body[data-theme="dark"] .saved-repertoires-panel[data-section-panel="salvos"] .saved-name:hover {
  display: grid;
  gap: 4px;
  min-width: 0;
  justify-self: stretch;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.saved-repertoires-panel[data-section-panel="salvos"] .saved-name span {
  color: #5E6A84;
  font-size: 0.86rem;
}

.saved-tags {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
  padding-left: 6px;
}

.saved-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 13px;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 999px;
  color: #6D28D9;
  background: rgba(124, 58, 237, 0.055);
  font-family: var(--font-semi);
  font-size: 0.74rem;
}

.saved-updated {
  justify-self: end;
  align-self: center;
  padding-right: 26px;
  color: #69758E;
  font-size: 0.82rem;
  white-space: nowrap;
}

.saved-actions {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  justify-self: end;
  width: 190px;
  padding-left: 22px;
}

.saved-actions::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 1px;
  background: rgba(100, 116, 139, 0.18);
}

.saved-repertoires-panel[data-section-panel="salvos"] .saved-icon-button,
.saved-more-menu > summary.saved-icon-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(124, 58, 237, 0.13);
  border-color: rgba(124, 58, 237, 0.13);
  border-radius: 9px;
  color: #6D28D9;
  background: #fff;
  box-shadow: none;
}

.saved-repertoires-panel[data-section-panel="salvos"] .saved-icon-button .action-icon,
.saved-more-menu > summary.saved-icon-button .action-icon {
  width: 18px;
  height: 18px;
}

.saved-repertoires-panel[data-section-panel="salvos"] .saved-icon-button:hover,
.saved-more-menu > summary.saved-icon-button:hover {
  border-color: rgba(124, 58, 237, 0.28);
  background: rgba(124, 58, 237, 0.055);
  transform: none;
}

.saved-more-menu {
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}

.saved-more-menu > summary {
  display: inline-grid;
  place-items: center;
  list-style: none;
}

.saved-more-menu > summary::-webkit-details-marker {
  display: none;
}

.saved-tip-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  margin-top: 12px;
  padding: 10px 18px 10px 16px;
  border: 1px solid rgba(124, 58, 237, 0.14);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.025);
}

.saved-tip-bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 10px 0 0 10px;
  background: rgba(124, 58, 237, 0.42);
}

.saved-tip-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #7C3AED;
  background: rgba(124, 58, 237, 0.08);
  font-size: 1.15rem;
}

.saved-tip-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.saved-tip-copy strong {
  color: #6D28D9;
  font-family: var(--font-semi);
  font-size: 0.82rem;
}

.saved-tip-copy small {
  color: #66728B;
  font-size: 0.82rem;
}

.saved-tip-link {
  margin-left: auto;
  border: 0;
  color: #6D28D9;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-semi);
  font-size: 0.84rem;
}

body[data-theme="dark"] .saved-repertoires-panel[data-section-panel="salvos"] {
  border-color: rgba(167, 139, 250, 0.18);
  background: rgba(15, 23, 42, 0.92);
}

body[data-theme="dark"] .saved-summary-card,
body[data-theme="dark"] .saved-tip-bar,
body[data-theme="dark"] .saved-repertoires-panel[data-section-panel="salvos"] .saved-item {
  border-color: rgba(167, 139, 250, 0.18);
  background: rgba(17, 24, 39, 0.96);
}

body[data-theme="dark"] .saved-summary-card strong#savedCount,
body[data-theme="dark"] .saved-repertoires-panel[data-section-panel="salvos"] .saved-head h2,
body[data-theme="dark"] .saved-repertoires-panel[data-section-panel="salvos"] .saved-name strong {
  color: #F8FAFC;
}

@media (max-width: 1120px) {
  .saved-repertoires-panel[data-section-panel="salvos"] .saved-head {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .saved-head-actions {
    justify-content: start;
  }

  .saved-repertoires-panel[data-section-panel="salvos"] .saved-item {
    grid-template-columns: 72px minmax(170px, 1fr) 190px;
  }

  .saved-tags {
    grid-column: 2 / 3;
    margin-top: 8px;
  }

  .saved-updated {
    display: none;
  }

  .saved-actions {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
    width: 190px;
  }
}

@media (max-width: 720px) {
  .saved-repertoires-panel[data-section-panel="salvos"] {
    width: calc(100% - 20px);
    margin-top: 10px;
    padding: 20px 14px 10px;
  }

  .saved-head-actions {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .saved-summary-card,
  .saved-new-button {
    width: 100%;
  }

  .saved-repertoires-panel[data-section-panel="salvos"] .saved-item {
    grid-template-columns: 56px minmax(0, 1fr);
    min-height: 0;
  }

  .saved-tags,
  .saved-actions {
    grid-column: 1 / -1;
    padding-left: 0;
  }

  .saved-actions {
    width: auto;
    justify-content: flex-start;
  }

  .saved-actions::before {
    display: none;
  }

  .saved-tip-bar {
    align-items: flex-start;
  }
}

.saved-mobile-stats {
  display: none;
}

@media (max-width: 600px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .saved-repertoires-panel[data-section-panel="salvos"] {
    width: 100%;
    max-width: 100%;
    margin: 14px 0 0;
    padding: 0 16px calc(118px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .saved-repertoires-panel[data-section-panel="salvos"],
  .saved-repertoires-panel[data-section-panel="salvos"] * {
    box-sizing: border-box;
    max-width: 100%;
  }

  .saved-repertoires-panel[data-section-panel="salvos"] .saved-head {
    display: block;
    min-height: 0;
    margin: 0 0 18px;
    padding: 30px 22px 22px;
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(41, 23, 83, 0.055);
  }

  .saved-repertoires-panel[data-section-panel="salvos"] .saved-head > div:first-child {
    padding: 4px 2px 0 !important;
  }

  .saved-repertoires-panel[data-section-panel="salvos"] .eyebrow.dark {
    margin: 0 0 13px !important;
    color: #7C3AED;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  .saved-repertoires-panel[data-section-panel="salvos"] .saved-head h2 {
    margin: 0;
    color: #15112E;
    font-size: 32px !important;
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  .saved-repertoires-panel[data-section-panel="salvos"] .saved-subtitle {
    margin: 16px 0 0 !important;
    color: #667085;
    font-size: 16px;
    line-height: 1.45;
    white-space: normal;
  }

  .saved-head-actions {
    display: none;
  }

  .saved-mobile-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(124, 58, 237, 0.1);
  }

  .saved-mobile-stats span {
    display: grid;
    justify-items: center;
    gap: 3px;
    min-width: 0;
    padding: 0 8px;
    border-right: 1px solid rgba(124, 58, 237, 0.12);
    text-align: center;
  }

  .saved-mobile-stats span:last-child {
    border-right: 0;
  }

  .saved-mobile-stats strong {
    color: #15112E;
    font-family: var(--font-semi);
    font-size: 18px;
    line-height: 1.1;
  }

  .saved-mobile-stats small {
    color: #667085;
    font-size: 11px;
    line-height: 1.2;
  }

  .saved-repertoires-panel[data-section-panel="salvos"] .saved-layout {
    display: block;
    width: 100%;
  }

  .saved-repertoires-panel[data-section-panel="salvos"] .saved-list {
    display: grid;
    gap: 12px;
    width: 100%;
  }

  .saved-repertoires-panel[data-section-panel="salvos"] .saved-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 94px;
    max-height: none;
    gap: 12px;
    padding: 14px 12px 14px 14px;
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(41, 23, 83, 0.045);
    overflow: hidden;
  }

  .saved-repertoires-panel[data-section-panel="salvos"] .saved-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 4px;
    border-radius: 0 8px 8px 0;
    background: linear-gradient(180deg, #7C3AED, #A78BFA);
  }

  .saved-repertoires-panel[data-section-panel="salvos"] .saved-repertoire-icon {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    min-width: 54px;
    border-radius: 15px;
  }

  .saved-repertoires-panel[data-section-panel="salvos"] .saved-repertoire-music-icon {
    width: 25px;
    height: 25px;
  }

  .saved-repertoires-panel[data-section-panel="salvos"] .saved-name {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 5px;
  }

  .saved-repertoires-panel[data-section-panel="salvos"] .saved-name strong {
    min-width: 0;
    color: #15112E;
    font-size: 18px;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .saved-repertoires-panel[data-section-panel="salvos"] .saved-name span {
    color: #667085;
    font-size: 12px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .saved-tags,
  .saved-updated {
    display: none;
  }

  .saved-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: auto;
    padding-left: 0;
  }

  .saved-actions::before {
    display: none;
  }

  .saved-repertoires-panel[data-section-panel="salvos"] .saved-icon-button,
  .saved-more-menu > summary.saved-icon-button {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: #fff;
  }

  .saved-repertoires-panel[data-section-panel="salvos"] .saved-icon-button .action-icon,
  .saved-more-menu > summary.saved-icon-button .action-icon {
    width: 19px;
    height: 19px;
  }

  .saved-actions .saved-icon-button[data-load-repertoire] {
    display: none;
  }

  .saved-more-menu {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
  }

  .saved-more-popover {
    right: 0;
    max-width: calc(100vw - 48px);
  }

  .saved-tip-bar {
    align-items: flex-start;
    gap: 12px;
    margin-top: 16px;
    padding: 16px;
    border-radius: 20px;
    background: #fff;
  }

  .saved-tip-copy strong {
    font-size: 0.9rem;
  }

  .saved-tip-copy small {
    display: block;
    margin-top: 3px;
    font-size: 0.82rem;
    line-height: 1.35;
    white-space: normal;
  }

  .saved-tip-link {
    align-self: center;
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
  }

  body[data-theme="dark"] .saved-repertoires-panel[data-section-panel="salvos"] .saved-head,
  body[data-theme="dark"] .saved-repertoires-panel[data-section-panel="salvos"] .saved-item,
  body[data-theme="dark"] .saved-tip-bar {
    border-color: rgba(167, 139, 250, 0.22);
    background: rgba(15, 23, 42, 0.96);
  }

  body[data-theme="dark"] .saved-repertoires-panel[data-section-panel="salvos"] .saved-head h2,
  body[data-theme="dark"] .saved-repertoires-panel[data-section-panel="salvos"] .saved-name strong,
  body[data-theme="dark"] .saved-mobile-stats strong {
    color: #F8FAFC;
  }

  body[data-theme="dark"] .saved-repertoires-panel[data-section-panel="salvos"] .saved-subtitle,
  body[data-theme="dark"] .saved-repertoires-panel[data-section-panel="salvos"] .saved-name span,
  body[data-theme="dark"] .saved-mobile-stats small {
    color: #CBD5E1;
  }
}

/* Afinador mobile final guard */
@media (max-width: 768px) {
  .app-shell:not(.is-home-active) .tuner-panel[data-section-panel="afinador"] {
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
  }

  .app-shell:not(.is-home-active) .tuner-panel[data-section-panel="afinador"] .tuner-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    min-height: 0 !important;
    padding: 22px !important;
  }

  .app-shell:not(.is-home-active) .tuner-panel[data-section-panel="afinador"] .tuner-actions,
  .app-shell:not(.is-home-active) .tuner-panel[data-section-panel="afinador"] #toggleTuner {
    width: 100% !important;
    max-width: 100% !important;
  }

  .app-shell:not(.is-home-active) .tuner-panel[data-section-panel="afinador"] .tuner-meter {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .app-shell:not(.is-home-active) .tuner-panel[data-section-panel="afinador"] .meter-scale {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
  }

  .app-shell:not(.is-home-active) .tuner-panel[data-section-panel="afinador"] .meter-scale span {
    position: static !important;
    text-align: center !important;
  }

  .app-shell:not(.is-home-active) .tuner-panel[data-section-panel="afinador"] .note-strip {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    width: 100% !important;
    margin-top: 24px !important;
  }
}

@media (max-width: 430px) {
  .app-shell:not(.is-home-active) .tuner-panel[data-section-panel="afinador"] {
    width: calc(100% - 24px) !important;
  }

  .app-shell:not(.is-home-active) .tuner-panel[data-section-panel="afinador"] .tuner-head,
  .app-shell:not(.is-home-active) .tuner-panel[data-section-panel="afinador"] .tuner-meter {
    padding: 18px !important;
  }
}

/* Dicionario de acordes: redesenho do modulo principal */
.chord-panel[data-section-panel="acordes"] {
  --chord-purple: #6d28f2;
  --chord-purple-2: #8b5cf6;
  --chord-soft: #f4edff;
  --chord-line: #e9ddff;
  --chord-ink: #171433;
  --chord-muted: #667391;
  padding: 12px 14px 18px !important;
  background: #fbfaff !important;
  border: 0 !important;
  box-shadow: none !important;
}

.chord-panel[data-section-panel="acordes"] .chord-head {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 22px !important;
  align-items: stretch !important;
  min-height: 150px;
  margin: 0 0 16px !important;
  padding: 24px 26px !important;
  overflow: visible !important;
  border: 1px solid var(--chord-line);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #fdfbff);
  box-shadow: 0 12px 28px rgba(31, 20, 74, .05);
}

.chord-panel[data-section-panel="acordes"] .chord-head-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  min-width: 0;
}

.chord-panel[data-section-panel="acordes"] .chord-head .eyebrow {
  margin: 0 0 6px !important;
  color: var(--chord-purple) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.chord-panel[data-section-panel="acordes"] .chord-head h2 {
  margin: 0 0 8px !important;
  color: var(--chord-ink) !important;
  font-size: clamp(30px, 3vw, 40px) !important;
  line-height: .98 !important;
  letter-spacing: 0 !important;
}

.chord-panel[data-section-panel="acordes"] .chord-head-copy > span {
  display: block;
  margin: 0 0 12px !important;
  color: #465778 !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  line-height: 1.35 !important;
  text-transform: none !important;
}

.chord-tuning-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--chord-soft);
  color: var(--chord-purple);
  font-size: 12px;
  font-weight: 900;
}

.chord-panel[data-section-panel="acordes"] .chord-filters {
  position: relative;
  z-index: 20;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(160px, .8fr) minmax(150px, 1fr) minmax(170px, 1fr);
  grid-template-areas:
    "new tone variation"
    "search search search";
  gap: 12px 14px !important;
  align-self: center;
  align-items: end !important;
}

.chord-new-button {
  grid-area: new;
  min-height: 50px !important;
  padding-inline: 18px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  box-shadow: 0 12px 24px rgba(109, 40, 242, .22) !important;
}

.chord-panel[data-section-panel="acordes"] .chord-filters .select-field:nth-of-type(1) { grid-area: tone; }
.chord-panel[data-section-panel="acordes"] .chord-filters .select-field:nth-of-type(2) { grid-area: variation; }

.chord-panel[data-section-panel="acordes"] .select-field,
.chord-panel[data-section-panel="acordes"] .search-field {
  border-color: var(--chord-line) !important;
  border-radius: 11px !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(31, 20, 74, .035);
}

.chord-panel[data-section-panel="acordes"] .select-field {
  min-height: 50px !important;
  padding: 7px 12px 6px !important;
}

.chord-panel[data-section-panel="acordes"] .select-field span {
  margin-bottom: 4px !important;
  color: #4f5d7d !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-transform: none !important;
}

.chord-panel[data-section-panel="acordes"] .select-field select {
  min-height: 24px !important;
  color: var(--chord-ink) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

.chord-panel[data-section-panel="acordes"] .select-field .custom-select {
  position: relative;
  z-index: 35;
}

.chord-panel[data-section-panel="acordes"] .select-field .custom-select-button {
  min-height: 30px !important;
  padding: 0 34px 0 0 !important;
  border: 0 !important;
  background:
    linear-gradient(45deg, transparent 50%, var(--chord-purple) 50%) calc(100% - 14px) 50% / 7px 7px no-repeat,
    linear-gradient(135deg, var(--chord-purple) 50%, transparent 50%) calc(100% - 8px) 50% / 7px 7px no-repeat,
    transparent !important;
  color: var(--chord-ink) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  box-shadow: none !important;
}

.chord-panel[data-section-panel="acordes"] .select-field .custom-select-menu {
  z-index: 999 !important;
  min-width: 190px;
  margin-top: 8px;
  border-color: var(--chord-line) !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 42px rgba(31, 20, 74, .18) !important;
}

.chord-panel[data-section-panel="acordes"] .chord-search {
  grid-area: search;
  min-height: 56px !important;
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 0 16px !important;
}

.chord-panel[data-section-panel="acordes"] .chord-search .field-icon {
  width: 20px;
  height: 20px;
  overflow: hidden;
  color: transparent !important;
  font-size: 0 !important;
}

.chord-panel[data-section-panel="acordes"] .chord-search .field-icon::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--chord-purple);
  border-radius: 999px;
  box-shadow: 7px 7px 0 -5px var(--chord-purple);
}

.chord-panel[data-section-panel="acordes"] .chord-search input {
  flex: 1;
  min-height: 42px !important;
  padding: 0 !important;
  color: var(--chord-ink) !important;
  font-size: 14px !important;
  font-weight: 750 !important;
}

.chord-search-example {
  color: #6b7895;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.chord-panel[data-section-panel="acordes"] .chord-layout {
  display: grid !important;
  grid-template-columns: minmax(420px, .94fr) minmax(480px, 1.06fr);
  gap: 16px !important;
  align-items: stretch !important;
}

.chord-list-shell,
.chord-panel[data-section-panel="acordes"] .chord-card {
  min-width: 0;
  border: 1px solid var(--chord-line) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 12px 28px rgba(31, 20, 74, .045) !important;
}

.chord-list-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 620px;
  padding: 20px 16px 14px;
}

.chord-list-head,
.chord-list-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.chord-list-head > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chord-section-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--chord-soft);
  color: var(--chord-purple);
  font-size: 22px;
  font-weight: 900;
}

.chord-list-head strong {
  color: var(--chord-ink);
  font-size: 17px;
  font-weight: 950;
}

.chord-list-head em {
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--chord-soft);
  color: var(--chord-purple);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.chord-view-toggle {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: var(--chord-soft);
}

.chord-view-toggle button {
  min-height: 30px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #4b5878;
  font-size: 12px;
  font-weight: 900;
}

.chord-view-toggle button.is-active {
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #5b21e8);
}

.chord-panel[data-section-panel="acordes"] .chord-list {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
  max-height: 520px !important;
  margin-top: 18px;
  padding: 0 7px 0 0 !important;
  scrollbar-color: var(--chord-purple) #f1eaff !important;
  scrollbar-width: thin;
}

.chord-panel[data-section-panel="acordes"] .chord-list::-webkit-scrollbar { width: 7px; }
.chord-panel[data-section-panel="acordes"] .chord-list::-webkit-scrollbar-track { background: #f1eaff; border-radius: 999px; }
.chord-panel[data-section-panel="acordes"] .chord-list::-webkit-scrollbar-thumb { background: var(--chord-purple); border-radius: 999px; }

.chord-panel[data-section-panel="acordes"] .chord-list-button {
  position: relative;
  min-height: 112px !important;
  align-content: start !important;
  justify-items: start !important;
  gap: 4px !important;
  padding: 15px 12px 10px !important;
  border: 1px solid #e5dafb !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: var(--chord-ink) !important;
  box-shadow: none !important;
}

.chord-panel[data-section-panel="acordes"] .chord-list-button:hover,
.chord-panel[data-section-panel="acordes"] .chord-list-button.is-active {
  border-color: var(--chord-purple) !important;
  background: #fbf7ff !important;
  color: var(--chord-ink) !important;
}

.chord-card-favorite {
  position: absolute;
  top: 9px;
  right: 9px;
  color: var(--chord-purple);
  font-size: 15px !important;
  line-height: 1 !important;
  text-transform: none !important;
}

.chord-panel[data-section-panel="acordes"] .chord-list-button strong {
  color: var(--chord-purple) !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.chord-panel[data-section-panel="acordes"] .chord-list-button span:not(.chord-card-actions):not(.chord-card-favorite),
.chord-panel[data-section-panel="acordes"] .chord-list-button small {
  color: #25314f !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  text-transform: none !important;
}

.chord-card-actions {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}

.chord-card-actions i,
.chord-card-actions b {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid #cdbbff;
  border-radius: 999px;
  color: var(--chord-purple);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

.chord-list-foot {
  margin-top: 14px;
  color: #5c6884;
  font-size: 12px;
  font-weight: 850;
}

.chord-favorites-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--chord-ink);
  font-weight: 900;
}

.chord-favorites-filter input { display: none; }
.chord-favorites-filter i {
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: #d4dae8;
}

.chord-favorites-filter i::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  margin: 2px;
  border-radius: 999px;
  background: #fff;
}

.chord-panel[data-section-panel="acordes"] .chord-card {
  min-height: 620px !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 16px !important;
  padding: 26px 24px 18px !important;
}

.chord-panel[data-section-panel="acordes"] .chord-card-head {
  align-items: start !important;
}

.chord-panel[data-section-panel="acordes"] .chord-card-head > div:first-child {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 14px;
  align-items: center;
}

.chord-panel[data-section-panel="acordes"] .chord-card-head > div:first-child > span {
  grid-column: 1 / -1;
  color: #34405d !important;
  font-size: 11px !important;
  font-weight: 950 !important;
}

.chord-panel[data-section-panel="acordes"] .chord-card-head strong {
  color: var(--chord-ink) !important;
  font-size: clamp(58px, 7vw, 86px) !important;
  letter-spacing: 0 !important;
}

#chordQualityBadge {
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--chord-soft);
  color: var(--chord-purple);
  font-size: 14px;
  font-weight: 900;
}

.chord-panel[data-section-panel="acordes"] .chord-card-meta {
  grid-template-columns: 1fr auto;
  justify-items: end !important;
  align-items: start;
  gap: 5px 12px !important;
}

.chord-panel[data-section-panel="acordes"] .chord-card-meta em {
  color: var(--chord-purple) !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

.chord-panel[data-section-panel="acordes"] .chord-card-meta span {
  grid-column: 1 / 2;
  max-width: 360px !important;
  color: #71809c !important;
  font-size: 12px !important;
  text-transform: none !important;
}

.chord-bookmark {
  grid-row: 1 / span 2;
  grid-column: 2;
  width: 30px;
  height: 36px;
  border: 1px solid var(--chord-line);
  border-radius: 8px;
  background: #fff;
  color: var(--chord-purple);
  font-size: 18px;
}

.chord-detail-body {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 260px;
  gap: 24px;
  align-items: center;
  min-height: 0;
}

.chord-panel[data-section-panel="acordes"] .chord-diagram {
  width: min(360px, 100%) !important;
  gap: 18px !important;
}

.chord-panel[data-section-panel="acordes"] .chord-strings {
  height: 28px !important;
}

.chord-panel[data-section-panel="acordes"] .chord-strings span,
.chord-panel[data-section-panel="acordes"] .chord-open,
.chord-panel[data-section-panel="acordes"] .chord-muted {
  color: #293653 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

.chord-panel[data-section-panel="acordes"] .chord-fretboard {
  height: 360px !important;
  border-top-color: #13172b !important;
  border-top-width: 10px !important;
  background:
    linear-gradient(90deg,
      transparent calc(8% - 1px),
      #9aa7bd calc(8% - 1px) calc(8% + 1px),
      transparent calc(8% + 1px) calc(36% - 1px),
      #9aa7bd calc(36% - 1px) calc(36% + 1px),
      transparent calc(36% + 1px) calc(64% - 1px),
      #9aa7bd calc(64% - 1px) calc(64% + 1px),
      transparent calc(64% + 1px) calc(92% - 1px),
      #9aa7bd calc(92% - 1px) calc(92% + 1px),
      transparent calc(92% + 1px)) !important;
}

.chord-panel[data-section-panel="acordes"] .chord-fret-line {
  height: 1px !important;
  background: #aab5c6 !important;
}

.chord-panel[data-section-panel="acordes"] .chord-dot {
  width: 42px !important;
  height: 42px !important;
  background: linear-gradient(135deg, #8b5cf6, #5b21e8) !important;
  box-shadow: 0 10px 22px rgba(91, 33, 232, .28) !important;
  font-size: 14px !important;
}

.chord-panel[data-section-panel="acordes"] .chord-open {
  top: -37px !important;
  width: 42px !important;
  height: 24px !important;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--chord-purple);
  color: #fff !important;
  text-transform: none !important;
}

.chord-side-info {
  display: grid;
  gap: 16px;
}

.chord-info-card {
  padding: 20px;
  border: 1px solid var(--chord-line);
  border-radius: 12px;
  background: #fff;
}

.chord-info-card h3 {
  margin: 0 0 14px;
  color: var(--chord-ink);
  font-size: 15px;
  font-weight: 950;
}

.chord-info-card ol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chord-info-card li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #4e5c7b;
  font-size: 13px;
  font-weight: 850;
}

.chord-info-card li span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #8b5cf6, #5b21e8);
  color: #fff;
}

.chord-audio-card p {
  margin: 0 0 16px;
  color: #6f7d99;
  font-size: 13px;
  font-weight: 800;
}

.chord-audio-row {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #4e5c7b;
  font-size: 13px;
  font-weight: 850;
}

.chord-audio-row button {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #8b5cf6, #5b21e8);
  color: #fff;
  font-size: 16px;
}

.chord-audio-progress {
  height: 5px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: #eee8ff;
}

.chord-audio-progress span {
  display: block;
  width: 70%;
  height: 100%;
  border-radius: inherit;
  background: var(--chord-purple);
}

.chord-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.chord-actions button {
  min-height: 54px;
  border: 1px solid var(--chord-line);
  border-radius: 10px;
  background: #fff;
  color: var(--chord-ink);
  font-size: 13px;
  font-weight: 900;
}

.chord-actions button.is-primary,
.chord-actions button.is-soft {
  color: var(--chord-purple);
  background: linear-gradient(180deg, #fbf7ff, #f2eaff);
}

body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] {
  background: #0b1020 !important;
}

body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] .chord-head,
body[data-theme="dark"] .chord-list-shell,
body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] .chord-card,
body[data-theme="dark"] .chord-info-card {
  background: #111827 !important;
  border-color: rgba(167, 139, 250, .25) !important;
}

body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] .chord-head h2,
body[data-theme="dark"] .chord-list-head strong,
body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] .chord-card-head strong,
body[data-theme="dark"] .chord-info-card h3,
body[data-theme="dark"] .chord-actions button {
  color: #f8fafc !important;
}

body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] .chord-head-copy > span,
body[data-theme="dark"] .chord-info-card li,
body[data-theme="dark"] .chord-audio-card p,
body[data-theme="dark"] .chord-list-foot,
body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] .chord-card-meta span {
  color: #cbd5e1 !important;
}

body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] .select-field,
body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] .search-field,
body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] .chord-list-button,
body[data-theme="dark"] .chord-bookmark,
body[data-theme="dark"] .chord-actions button {
  background: #0f172a !important;
  border-color: rgba(167, 139, 250, .25) !important;
}

body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] .chord-list-button:hover,
body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] .chord-list-button.is-active {
  background: #1e1b4b !important;
  border-color: rgba(167, 139, 250, .55) !important;
}

body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] .chord-list-button strong,
body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] .chord-card-meta em,
body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] .chord-card-favorite,
body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] .chord-card-actions i,
body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] .chord-card-actions b {
  color: #8b5cf6 !important;
}

body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] .chord-list-button span:not(.chord-card-actions):not(.chord-card-favorite),
body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] .chord-list-button small,
body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] .chord-card-head > div:first-child > span,
body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] .chord-strings span,
body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] .chord-audio-row {
  color: #cbd5e1 !important;
}

body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] .chord-card-actions i,
body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] .chord-card-actions b {
  border-color: rgba(196, 181, 253, .62) !important;
  background: rgba(124, 58, 237, .14) !important;
}

body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] .chord-view-toggle,
body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] .chord-list-head em,
body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] #chordQualityBadge {
  background: rgba(124, 58, 237, .18) !important;
  color: #ddd6fe !important;
}

body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] .chord-view-toggle button {
  color: #cbd5e1 !important;
}

body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] .chord-view-toggle button.is-active {
  color: #ffffff !important;
}

body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] .chord-actions button {
  color: #e9d5ff !important;
}

body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] .chord-actions button.is-primary,
body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] .chord-actions button.is-soft {
  background: rgba(124, 58, 237, .20) !important;
  color: #ffffff !important;
}

body[data-theme="dark"] .chord-panel[data-section-panel="acordes"] .chord-audio-progress {
  background: rgba(167, 139, 250, .18) !important;
}

@media (max-width: 1180px) {
  .chord-panel[data-section-panel="acordes"] .chord-head {
    grid-template-columns: 1fr;
  }

  .chord-panel[data-section-panel="acordes"] .chord-layout,
  .chord-detail-body {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .chord-panel[data-section-panel="acordes"] {
    padding: 10px !important;
  }

  .chord-panel[data-section-panel="acordes"] .chord-head {
    padding: 22px 18px !important;
  }

  .chord-panel[data-section-panel="acordes"] .chord-head h2 {
    font-size: 30px !important;
  }

  .chord-panel[data-section-panel="acordes"] .chord-filters {
    grid-template-columns: 1fr !important;
    grid-template-areas: "new" "tone" "variation" "search" !important;
  }

  .chord-new-button {
    width: 100%;
  }

  .chord-panel[data-section-panel="acordes"] .chord-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-height: 430px !important;
  }

  .chord-list-shell,
  .chord-panel[data-section-panel="acordes"] .chord-card {
    min-height: auto !important;
  }

  .chord-list-head,
  .chord-list-foot,
  .chord-panel[data-section-panel="acordes"] .chord-card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .chord-panel[data-section-panel="acordes"] .chord-card-meta {
    justify-items: start !important;
  }

  .chord-panel[data-section-panel="acordes"] .chord-diagram {
    width: min(300px, 100%) !important;
  }

  .chord-panel[data-section-panel="acordes"] .chord-fretboard {
    height: 300px !important;
  }

  .chord-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Escalas no braco - ajuste final medido em Playwright 1519x768 @ 100% */
main.app-shell:not(.is-home-active):has(.scale-library-panel[data-section-panel="escalas"]:not(.is-hidden)) {
  padding-top: 4px !important;
  padding-bottom: 12px !important;
}

main.app-shell:not(.is-home-active):has(.scale-library-panel[data-section-panel="escalas"]:not(.is-hidden)) .vibra-app-top {
  height: 46px !important;
  min-height: 46px !important;
  margin-bottom: 6px !important;
}

.scale-library-panel[data-section-panel="escalas"] {
  padding: 8px !important;
  gap: 6px !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-library-head.chord-head {
  min-height: 0 !important;
  height: auto !important;
  padding: 7px 16px !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-library-head .chord-head-copy {
  gap: 2px !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-library-head .eyebrow {
  margin: 0 !important;
  font-size: 0.62rem !important;
  line-height: 1 !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-library-head h2 {
  margin: 0 !important;
  font-size: 1.22rem !important;
  line-height: 1 !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-library-head .chord-head-copy > span {
  font-size: 0.72rem !important;
  line-height: 1.12 !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-library-head .chord-tuning-badge {
  min-height: 20px !important;
  margin-top: 3px !important;
  padding: 0 8px !important;
  font-size: 0.68rem !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-tone-toolbar,
.scale-library-panel[data-section-panel="escalas"] .scale-fretboard-toolbar {
  margin: 4px 0 !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-segment button {
  min-height: 25px !important;
  padding: 0 8px !important;
  font-size: 0.72rem !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-tone-list {
  gap: 5px !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-tone-button {
  min-height: 31px !important;
  padding: 3px 7px !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-tone-button strong {
  font-size: 0.8rem !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-tone-button span {
  font-size: 0.5rem !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-viewer {
  padding: 8px 10px !important;
  gap: 5px !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-viewer-head {
  padding-bottom: 4px !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-viewer-head h3 {
  font-size: 1rem !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-viewer-actions .secondary-button {
  min-height: 26px !important;
  padding: 0 8px !important;
  font-size: 0.68rem !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-info-grid {
  margin: 4px 0 !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-info-grid section {
  padding: 5px 6px !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-info-chip {
  min-height: 21px !important;
  padding: 0 6px !important;
  font-size: 0.66rem !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-fretboard-wrap {
  padding: 5px !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-string-row,
.scale-library-panel[data-section-panel="escalas"] .scale-fret {
  min-height: 28px !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-fret strong {
  min-width: 20px !important;
  height: 20px !important;
  font-size: 0.58rem !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-fret.is-root-note strong {
  min-width: 24px !important;
  height: 24px !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-legend,
.scale-library-panel[data-section-panel="escalas"] .scale-note-detail {
  margin-top: 4px !important;
  font-size: 0.68rem !important;
}

.scale-library-panel[data-section-panel="escalas"] .scale-note-detail {
  min-height: 24px !important;
  padding: 4px 7px !important;
}

body[data-theme="dark"] .scale-library-panel[data-section-panel="escalas"] .scale-info-grid section {
  border-color: rgba(167, 139, 250, 0.24) !important;
  background: #0f172a !important;
}

body[data-theme="dark"] .scale-library-panel[data-section-panel="escalas"] .scale-info-grid section > strong {
  color: #c4b5fd !important;
}

body[data-theme="dark"] .scale-library-panel[data-section-panel="escalas"] .scale-info-chip {
  border-color: rgba(167, 139, 250, 0.28) !important;
  background: #1e293b !important;
  color: #f8fafc !important;
}

body[data-theme="dark"] .scale-library-panel[data-section-panel="escalas"] .scale-info-chip small {
  color: #c4b5fd !important;
}

body[data-theme="dark"] .scale-library-panel[data-section-panel="escalas"] .scale-info-chip.is-root {
  border-color: rgba(167, 139, 250, 0.66) !important;
  background: linear-gradient(135deg, #7c3aed, #5b21e8) !important;
  color: #ffffff !important;
}

body[data-theme="dark"] .scale-library-panel[data-section-panel="escalas"] .scale-info-chip.is-root small {
  color: rgba(255, 255, 255, 0.82) !important;
}

@media (max-width: 900px) {
  .scale-library-panel[data-section-panel="escalas"] .scale-fretboard-wrap {
    overflow: hidden !important;
    padding: 5px !important;
  }

  .scale-library-panel[data-section-panel="escalas"] .scale-fretboard-scroll {
    display: block !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    padding-bottom: 4px !important;
  }

  .scale-library-panel[data-section-panel="escalas"] .scale-fretboard-outer {
    display: grid !important;
    grid-template-columns: 8px minmax(0, 1fr) !important;
    min-width: 760px !important;
  }

  .scale-library-panel[data-section-panel="escalas"] .scale-nut {
    display: block !important;
    width: 8px !important;
  }

  .scale-library-panel[data-section-panel="escalas"] .scale-fretboard-grid {
    display: block !important;
  }

  .scale-library-panel[data-section-panel="escalas"] .scale-fret-numbers,
  .scale-library-panel[data-section-panel="escalas"] .scale-string-row {
    display: grid !important;
    grid-template-columns: 30px repeat(13, minmax(48px, 1fr)) !important;
  }

  .scale-library-panel[data-section-panel="escalas"] .scale-mobile-fretboard {
    display: none !important;
  }
}

/* Metronomo - redesenho do modulo */
.metronome-panel[data-section-panel="metronomo"] {
  --metro-purple: #6757f5;
  --metro-purple-dark: #4f34d8;
  --metro-lavender: #f4f2ff;
  --metro-line: rgba(103, 87, 245, 0.18);
  --metro-ink: #111633;
  --metro-muted: #66728a;
  --metro-radius: 8px;
  max-width: none !important;
  margin: 0 !important;
  padding: 14px 20px 18px !important;
  gap: 12px !important;
  color: var(--metro-ink);
}

.metronome-module-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--metro-line);
  border-radius: var(--metro-radius);
  background: rgba(255, 255, 255, 0.94);
}

.metronome-module-head .eyebrow {
  margin: 0 0 4px;
  color: var(--metro-purple);
  font-size: 0.68rem;
  line-height: 1;
  text-transform: uppercase;
}

.metronome-module-head h2 {
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.05;
  font-weight: 900;
}

.metronome-module-head span {
  display: block;
  margin-top: 2px;
  color: var(--metro-muted);
  font-size: 0.84rem;
  font-weight: 750;
}

.metronome-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(34, 197, 94, 0.22);
  border-radius: var(--metro-radius);
  background: #ecfdf5;
  color: #14532d;
  font-size: 0.76rem;
  font-weight: 850;
  white-space: nowrap;
}

.metronome-status-pill > span {
  width: 8px;
  height: 8px;
  margin: 0;
  border-radius: 999px;
  background: #22c55e;
}

.metronome-status-pill.is-running {
  border-color: rgba(103, 87, 245, 0.24);
  background: #f3f0ff;
  color: var(--metro-purple-dark);
}

.metronome-status-pill.is-running > span {
  background: var(--metro-purple);
  animation: metronomeStatusPulse 1s ease-in-out infinite;
}

.metronome-status-pill.is-paused {
  border-color: rgba(245, 158, 11, 0.3);
  background: #fffbeb;
  color: #92400e;
}

.metronome-main {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(300px, 0.9fr);
  gap: 12px;
  align-items: stretch;
}

.metronome-left,
.metronome-settings,
.metronome-presets {
  border: 1px solid var(--metro-line);
  border-radius: var(--metro-radius);
  background: rgba(255, 255, 255, 0.95);
}

.metronome-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

.metronome-stage {
  min-height: 360px !important;
  border: 0 !important;
  border-radius: var(--metro-radius) !important;
  background:
    radial-gradient(circle at 50% 62%, rgba(103, 87, 245, 0.08), transparent 38%),
    linear-gradient(180deg, #ffffff, #fbfbff) !important;
  overflow: hidden;
}

.metronome-arc {
  position: absolute;
  inset: 18px auto auto 50%;
  width: min(620px, 88%);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  border-radius: 999px 999px 0 0;
  background:
    repeating-conic-gradient(from 270deg at 50% 100%, rgba(103, 87, 245, 0.52) 0deg 0.8deg, transparent 0.8deg 3.5deg);
  clip-path: inset(0 0 50% 0);
  opacity: 0.92;
}

.metronome-arc::before {
  content: "";
  position: absolute;
  inset: 18px 18px 0;
  border-radius: inherit;
  background: linear-gradient(180deg, #fff, #fbfbff);
}

.metronome-arc::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 3px;
  height: 26px;
  border-radius: 999px;
  background: var(--metro-ink);
  transform: translateX(-50%);
}

.metronome-arc-label {
  position: absolute;
  z-index: 1;
  color: #28304d;
  font-size: 0.72rem;
  font-weight: 850;
}

.metronome-arc-label.is-min {
  left: 18%;
  top: 45%;
}

.metronome-arc-label.is-mid {
  left: 50%;
  top: -2px;
  transform: translateX(-50%);
}

.metronome-arc-label.is-max {
  right: 18%;
  top: 45%;
}

.metronome-pendulum {
  position: absolute;
  top: 54px;
  left: 50%;
  width: 130px !important;
  height: 168px !important;
  transform: translateX(-50%) rotate(0deg);
  transform-origin: 50% 100% !important;
  transition: transform 80ms ease;
  z-index: 1;
}

.metronome-pendulum::before {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 6px !important;
  height: 146px !important;
  background: linear-gradient(180deg, #8b7cff, var(--metro-purple)) !important;
  box-shadow: 0 6px 18px rgba(103, 87, 245, 0.24) !important;
}

.metronome-pendulum span {
  top: 48px !important;
  bottom: auto !important;
  width: 34px !important;
  height: 34px !important;
  border: 7px solid var(--metro-purple) !important;
  box-shadow: 0 10px 24px rgba(103, 87, 245, 0.26);
}

.metronome-pendulum.is-running {
  animation: metronomePendulum var(--metronome-period, 0.6s) ease-in-out infinite alternate;
}

.metronome-pendulum.is-running.is-right {
  transform: translateX(-50%) rotate(0deg);
}

.metronome-readout {
  inset: 224px auto auto 50% !important;
  transform: translateX(-50%);
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  text-align: center;
  z-index: 2;
}

.metronome-readout strong {
  font-size: clamp(3.4rem, 6.2vw, 4.55rem) !important;
  font-weight: 950;
  letter-spacing: 0 !important;
}

.metronome-readout span {
  color: var(--metro-purple);
  font-size: 1rem;
  font-weight: 950;
}

.metronome-readout em {
  color: #78849c;
  font-size: 0.86rem;
  font-style: normal;
  font-weight: 850;
}

.metronome-beats {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 30px;
  display: grid !important;
  grid-template-columns: repeat(var(--metro-beats, 4), minmax(52px, 1fr));
  gap: 10px !important;
}

.metronome-beat {
  min-height: 46px !important;
  border-color: var(--metro-line) !important;
  border-radius: var(--metro-radius) !important;
  background: var(--metro-lavender) !important;
  color: #17203d !important;
}

.metronome-beat.is-accent {
  box-shadow: inset 0 0 0 2px rgba(103, 87, 245, 0.18);
}

.metronome-beat.is-active {
  background: linear-gradient(135deg, var(--metro-purple), #7d45ee) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.metronome-meter-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  margin: 0;
  text-align: center;
  color: #76839c;
  font-size: 0.76rem;
  font-weight: 850;
}

.metronome-transport {
  justify-content: center !important;
  gap: 14px !important;
}

.metronome-start-button,
.metronome-tap-button {
  min-height: 44px;
  border-radius: var(--metro-radius) !important;
}

.metronome-start-button {
  min-width: 210px;
}

.metronome-start-button span,
.metronome-tap-button span {
  margin-right: 8px;
}

.metronome-shortcuts {
  margin: -3px 0 0;
  text-align: center;
  color: #78849c;
  font-size: 0.74rem;
  font-weight: 750;
}

.metronome-settings {
  padding: 0;
  overflow: hidden;
}

.metronome-settings h3 {
  margin: 0;
  padding: 16px 18px;
  border-bottom: 1px solid var(--metro-line);
  font-size: 1rem;
  font-weight: 900;
}

.metronome-setting-group,
.metronome-select-field,
.metronome-accent-check,
.metronome-volume-row {
  margin: 0 18px;
}

.metronome-setting-group {
  padding: 16px 0 12px;
}

.metronome-field-label,
.metronome-select-field > span {
  color: #465371;
  font-size: 0.76rem;
  font-weight: 900;
}

.metronome-bpm-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 12px;
}

.metronome-bpm-input-row input {
  width: 72px;
  min-height: 40px;
  border: 1px solid var(--metro-line);
  border-radius: var(--metro-radius);
  color: var(--metro-ink);
  text-align: center;
  font-size: 1.15rem;
  font-weight: 900;
}

.metronome-bpm-input-row span,
.metronome-volume-row span {
  color: #5f6d87;
  font-size: 0.78rem;
  font-weight: 850;
}

#metronomeBpmSlider,
#metronomeVolume {
  width: 100%;
  accent-color: var(--metro-purple);
}

.metronome-range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  color: #7c879d;
  font-size: 0.7rem;
  font-weight: 800;
}

.metronome-step-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.metronome-step-buttons button {
  min-height: 30px;
  padding: 0 8px;
  border-radius: var(--metro-radius) !important;
}

.metronome-select-field {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

.metronome-accent-check {
  margin-top: 12px;
}

.metronome-volume-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 42px;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--metro-line);
}

.metronome-mute-button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--metro-ink);
  font-weight: 900;
  cursor: pointer;
}

.metronome-mute-button.is-muted {
  color: #ef4444;
}

.metronome-presets {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
}

.metronome-presets > strong {
  font-size: 0.86rem;
}

.metronome-preset-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(92px, 1fr));
  gap: 10px;
}

.metronome-preset {
  min-height: 42px;
  border: 1px solid var(--metro-line);
  border-radius: var(--metro-radius);
  background: #fff;
  color: var(--metro-ink);
  cursor: pointer;
}

.metronome-preset strong,
.metronome-preset span {
  display: block;
  line-height: 1.05;
}

.metronome-preset strong {
  font-size: 0.92rem;
}

.metronome-preset span {
  color: #69758e;
  font-size: 0.68rem;
  font-weight: 800;
}

.metronome-preset.is-active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--metro-purple), #7d45ee);
  color: #fff;
}

.metronome-preset.is-active span {
  color: rgba(255, 255, 255, 0.82);
}

.metronome-reset-button {
  min-height: 38px;
  border-radius: var(--metro-radius) !important;
  white-space: nowrap;
}

body[data-theme="dark"] .metronome-panel[data-section-panel="metronomo"] {
  --metro-lavender: rgba(124, 58, 237, 0.18);
  --metro-line: rgba(167, 139, 250, 0.26);
  --metro-ink: #f8fafc;
  --metro-muted: #cbd5e1;
  background: #0b1020 !important;
  color: var(--metro-ink) !important;
}

body[data-theme="dark"] .metronome-module-head,
body[data-theme="dark"] .metronome-left,
body[data-theme="dark"] .metronome-settings,
body[data-theme="dark"] .metronome-presets {
  border-color: var(--metro-line) !important;
  background: #111827 !important;
  color: var(--metro-ink) !important;
  box-shadow: none !important;
}

body[data-theme="dark"] .metronome-module-head h2,
body[data-theme="dark"] .metronome-settings h3,
body[data-theme="dark"] .metronome-presets > strong,
body[data-theme="dark"] .metronome-readout strong,
body[data-theme="dark"] .metronome-start-button strong,
body[data-theme="dark"] .metronome-tap-button strong {
  color: #f8fafc !important;
}

body[data-theme="dark"] .metronome-module-head .eyebrow,
body[data-theme="dark"] .metronome-readout span {
  color: #a78bfa !important;
}

body[data-theme="dark"] .metronome-module-head span,
body[data-theme="dark"] .metronome-field-label,
body[data-theme="dark"] .metronome-select-field > span,
body[data-theme="dark"] .metronome-bpm-input-row span,
body[data-theme="dark"] .metronome-volume-row span,
body[data-theme="dark"] .metronome-range-labels,
body[data-theme="dark"] .metronome-readout em,
body[data-theme="dark"] .metronome-meter-label,
body[data-theme="dark"] .metronome-shortcuts,
body[data-theme="dark"] .metronome-preset span {
  color: var(--metro-muted) !important;
}

body[data-theme="dark"] .metronome-stage {
  background:
    radial-gradient(circle at 50% 62%, rgba(124, 58, 237, 0.18), transparent 38%),
    linear-gradient(180deg, #111827, #0f172a) !important;
}

body[data-theme="dark"] .metronome-arc::before {
  background: linear-gradient(180deg, #111827, #0f172a) !important;
}

body[data-theme="dark"] .metronome-arc::after {
  background: #e0e7ff !important;
}

body[data-theme="dark"] .metronome-arc-label {
  color: #cbd5e1 !important;
}

body[data-theme="dark"] .metronome-beat,
body[data-theme="dark"] .metronome-preset,
body[data-theme="dark"] .metronome-step-buttons button,
body[data-theme="dark"] .metronome-tap-button,
body[data-theme="dark"] .metronome-reset-button,
body[data-theme="dark"] .metronome-accent-check {
  border-color: var(--metro-line) !important;
  background: #1e293b !important;
  color: #e9d5ff !important;
}

body[data-theme="dark"] .metronome-beat.is-active,
body[data-theme="dark"] .metronome-preset.is-active,
body[data-theme="dark"] .metronome-start-button {
  border-color: transparent !important;
  background: linear-gradient(135deg, #7c3aed, #5b21e8) !important;
  color: #ffffff !important;
}

body[data-theme="dark"] .metronome-preset.is-active span {
  color: rgba(255, 255, 255, 0.84) !important;
}

body[data-theme="dark"] .metronome-settings h3,
body[data-theme="dark"] .metronome-volume-row {
  border-color: var(--metro-line) !important;
}

body[data-theme="dark"] .metronome-bpm-input-row input,
body[data-theme="dark"] .metronome-select-field select {
  border-color: var(--metro-line) !important;
  background: #0f172a !important;
  color: #f8fafc !important;
}

body[data-theme="dark"] .metronome-accent-check .fake-check {
  border-color: rgba(196, 181, 253, 0.52) !important;
  background: rgba(124, 58, 237, 0.18) !important;
}

body[data-theme="dark"] .metronome-accent-check input:checked + .fake-check {
  background: #8b5cf6 !important;
  border-color: #a78bfa !important;
}

body[data-theme="dark"] .metronome-mute-button {
  color: #ddd6fe !important;
}

body[data-theme="dark"] .metronome-status-pill {
  border-color: rgba(74, 222, 128, 0.30) !important;
  background: rgba(34, 197, 94, 0.12) !important;
  color: #bbf7d0 !important;
}

body[data-theme="dark"] .metronome-status-pill.is-running {
  border-color: rgba(167, 139, 250, 0.42) !important;
  background: rgba(124, 58, 237, 0.18) !important;
  color: #ddd6fe !important;
}

body[data-theme="dark"] .metronome-status-pill.is-paused {
  border-color: rgba(251, 191, 36, 0.34) !important;
  background: rgba(245, 158, 11, 0.14) !important;
  color: #fde68a !important;
}

@keyframes metronomePendulum {
  from {
    transform: translateX(-50%) rotate(-17deg);
  }
  to {
    transform: translateX(-50%) rotate(17deg);
  }
}

@keyframes metronomeStatusPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.75;
  }
  50% {
    transform: scale(1.45);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .metronome-pendulum.is-running,
  .metronome-status-pill.is-running > span {
    animation: none !important;
  }
}

@media (max-width: 980px) {
  .metronome-main {
    grid-template-columns: 1fr;
  }

  .metronome-stage {
    min-height: 430px !important;
  }

  .metronome-presets {
    grid-template-columns: 1fr;
  }

  .metronome-preset-list {
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  }
}

@media (max-width: 640px) {
  .metronome-panel[data-section-panel="metronomo"] {
    padding: 10px !important;
  }

  .metronome-module-head {
    flex-direction: column;
    gap: 10px;
  }

  .metronome-stage {
    min-height: 390px !important;
  }

  .metronome-arc {
    width: 96%;
  }

  .metronome-pendulum {
    top: 46px;
  }

  .metronome-readout {
    inset: 214px auto auto 50% !important;
  }

  .metronome-readout strong {
    font-size: 3.1rem !important;
  }

  .metronome-beats {
    left: 8px;
    right: 8px;
    gap: 6px !important;
  }

  .metronome-beat {
    min-height: 42px !important;
  }

  .metronome-transport {
    grid-template-columns: 1fr;
  }

  .metronome-start-button,
  .metronome-tap-button {
    width: 100%;
    min-width: 0;
  }

  .metronome-preset-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Comunidade e Sintonias */
.community-panel {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 18px 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.community-head,
.community-filters,
.community-suggestions,
.community-view > section,
.community-card {
  border: 1px solid rgba(103, 87, 245, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
}

.community-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
}

.community-head h2 {
  margin: 2px 0;
  color: #111633;
  font-size: 1.8rem;
}

.community-head span,
.community-card p,
.community-card small {
  color: #66728a;
  font-weight: 750;
}

.community-tabs,
.community-subtabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.community-tabs button,
.community-subtabs button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(103, 87, 245, 0.18);
  border-radius: 8px;
  background: #fff;
  color: #4b556f;
  font-weight: 850;
  cursor: pointer;
}

.community-tabs button.is-active,
.community-subtabs button.is-active {
  background: #6757f5;
  color: #fff;
}

.community-tabs span {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  min-height: 22px;
  margin-left: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.community-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(130px, 1fr));
  gap: 12px;
  padding: 14px;
}

.community-filters label {
  display: grid;
  gap: 6px;
}

.community-filters span,
.community-section-head h3 {
  color: #28304d;
  font-weight: 900;
}

.community-filters input,
.community-filters select {
  min-height: 38px;
  border: 1px solid rgba(103, 87, 245, 0.18);
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
}

.community-filter-actions {
  display: flex;
  gap: 8px;
  align-items: end;
  flex-wrap: wrap;
}

.community-section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.community-section-head h3 {
  margin: 0;
  font-size: 1rem;
}

.community-suggestions,
.community-view > section {
  padding: 14px;
}

.community-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.community-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
}

.community-avatar {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #6757f5, #8b5cf6);
  color: #fff;
  font-weight: 950;
  overflow: hidden;
}

.community-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.community-card-title {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}

.community-card-title strong {
  color: #111633;
  font-size: 1rem;
}

.community-card-title span {
  color: #6757f5;
  font-weight: 850;
}

.community-card p {
  margin: 4px 0 8px;
}

.community-chip-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.community-chip-row span {
  padding: 4px 8px;
  border-radius: 999px;
  background: #f4f2ff;
  color: #4f34d8;
  font-size: 0.75rem;
  font-weight: 850;
}

.community-card small {
  display: block;
  margin-top: 8px;
}

.community-card-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.community-danger-link {
  border: 0;
  background: transparent;
  color: #b91c1c;
  font-weight: 850;
  cursor: pointer;
}

.community-load-more {
  margin: 14px auto 0;
}

.community-empty-inline {
  margin: 0;
  color: #66728a;
  font-weight: 750;
}

.profile-social-metric-button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

@media (max-width: 860px) {
  .community-filters {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .community-panel {
    padding: 12px 10px 30px;
  }

  .community-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .community-filters {
    grid-template-columns: 1fr;
  }

  .community-card {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .community-avatar {
    width: 44px;
    height: 44px;
  }
}

/* Comunidade - redesign social */
.community-panel[data-section-panel="comunidade"] {
  --community-purple: #6757f5;
  --community-ink: #111633;
  --community-muted: #66728a;
  --community-line: rgba(103, 87, 245, 0.16);
  --community-soft: #f4f2ff;
  --community-card: #fff;
  --community-radius: 14px;
  max-width: 1460px;
  padding: 16px 34px 34px;
  gap: 14px;
}

.community-panel .community-head {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  align-items: end;
}

.community-head .eyebrow {
  color: var(--community-purple);
  font-size: 0.68rem;
  letter-spacing: 0;
}

.community-head h2 {
  margin: 2px 0 3px;
  font-size: clamp(1.55rem, 2.2vw, 2.05rem);
  line-height: 1.05;
  font-weight: 950;
}

.community-search-shell {
  width: min(430px, 42vw);
  min-height: 48px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--community-line);
  border-radius: 10px;
  background: #fff;
}

.community-search-shell span {
  margin: 0;
  color: var(--community-muted);
}

.community-search-shell input {
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--community-ink);
  font: inherit;
}

.community-tabs {
  position: relative;
  align-items: center;
  gap: 20px;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--community-line);
  border-radius: 10px;
  background: #fff;
}

.community-tabs button {
  min-height: 50px;
  padding: 0 4px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #34405e;
}

.community-tabs button.is-active {
  border-bottom-color: var(--community-purple);
  background: transparent;
  color: var(--community-purple);
}

.community-tabs span {
  min-width: 22px;
  min-height: 20px;
  background: #ede9fe;
  color: #4f34d8;
  font-size: 0.7rem;
}

.community-filter-toggle {
  margin-left: auto;
  min-height: 34px !important;
  padding: 0 14px !important;
  border: 1px solid var(--community-purple) !important;
  border-radius: 8px !important;
  color: var(--community-purple) !important;
}

.community-active-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.community-active-filters.is-empty {
  display: none;
}

.community-active-filters button {
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  padding: 0 10px;
  background: #ede9fe;
  color: #4f34d8;
  font-weight: 850;
}

.community-social-grid {
  display: grid;
  grid-template-columns: minmax(230px, 0.85fr) minmax(560px, 2fr) minmax(270px, 0.95fr);
  gap: 16px;
  align-items: start;
}

.community-left-rail,
.community-center,
.community-right-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.community-me-card,
.community-explore-card,
.community-new-card,
.community-people-section,
.community-side-card,
.community-privacy-card,
.community-view:not(#communityDiscoverView) {
  border: 1px solid var(--community-line);
  border-radius: var(--community-radius);
  background: var(--community-card);
  box-shadow: 0 10px 26px rgba(44, 39, 94, 0.05);
}

.community-me-card {
  padding: 18px 16px;
  text-align: center;
}

.community-me-avatar {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6757f5, #8b5cf6);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 950;
  overflow: hidden;
}

.community-me-avatar img,
.community-new-avatar img,
.community-compact-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.community-me-name {
  display: grid;
  gap: 2px;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.community-me-name strong {
  color: var(--community-ink);
  font-size: 1rem;
}

.community-me-name span,
.community-me-card p {
  color: var(--community-muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.community-me-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 14px 0;
  border-top: 1px solid var(--community-line);
  border-bottom: 1px solid var(--community-line);
}

.community-me-stats button {
  display: grid;
  gap: 2px;
  padding: 12px 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.community-me-stats button + button {
  border-left: 1px solid var(--community-line);
}

.community-me-stats strong {
  color: var(--community-ink);
}

.community-me-stats span {
  color: var(--community-muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.community-explore-card {
  padding: 16px;
}

.community-explore-card h3,
.community-side-head h3,
.community-section-head h3 {
  margin: 0;
  color: var(--community-ink);
  font-size: 0.95rem;
  font-weight: 950;
}

.community-explore-card > button {
  width: 100%;
  min-height: 38px;
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
  border: 0;
  border-radius: 8px;
  padding: 0 10px;
  background: transparent;
  color: #4b556f;
  font-weight: 850;
  cursor: pointer;
}

.community-explore-card > button.is-active {
  background: var(--community-soft);
  color: var(--community-purple);
}

.community-interest-box {
  margin: 14px -16px -16px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--community-line);
}

.community-interest-box strong {
  display: block;
  margin-bottom: 8px;
  color: var(--community-ink);
  font-size: 0.82rem;
}

#communityInterestChips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

#communityInterestChips button {
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  padding: 0 10px;
  background: #ede9fe;
  color: #4f34d8;
  font-size: 0.72rem;
  font-weight: 850;
}

#communityEditInterests,
.community-side-card > button,
.community-privacy-card button {
  margin-top: 10px;
  border: 0;
  background: transparent;
  color: var(--community-purple);
  font-weight: 900;
  cursor: pointer;
}

.community-new-card,
.community-people-section,
.community-view:not(#communityDiscoverView) {
  padding: 14px 16px;
}

.community-new-strip {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 2px 2px;
  scrollbar-width: none;
}

.community-new-strip::-webkit-scrollbar {
  display: none;
}

.community-new-person {
  position: relative;
  min-width: 72px;
  display: grid;
  justify-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--community-ink);
  cursor: pointer;
}

.community-new-avatar {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border: 3px solid var(--community-purple);
  border-radius: 999px;
  background: linear-gradient(135deg, #6757f5, #8b5cf6);
  color: #fff;
  font-weight: 950;
  overflow: hidden;
}

.community-new-person > span {
  position: absolute;
  top: 0;
  right: 4px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--community-purple);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 950;
}

.community-new-person strong {
  max-width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.76rem;
}

.community-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.community-card {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px 12px;
  padding: 96px 14px 12px;
  border-radius: 12px;
  overflow: hidden;
}

.community-card-cover {
  position: absolute;
  inset: 0 0 auto;
  height: 88px;
  background:
    linear-gradient(135deg, rgba(17, 22, 51, 0.15), rgba(103, 87, 245, 0.2)),
    radial-gradient(circle at 18% 20%, rgba(255,255,255,0.4), transparent 26%),
    linear-gradient(135deg, #5b21b6, #312e81);
}

.community-card.is-percussion .community-card-cover { background: linear-gradient(135deg, #7f1d1d, #f97316); }
.community-card.is-voice .community-card-cover { background: linear-gradient(135deg, #0f766e, #38bdf8); }
.community-card.is-keys .community-card-cover { background: linear-gradient(135deg, #1e3a8a, #a78bfa); }
.community-card.is-strings .community-card-cover { background: linear-gradient(135deg, #164e63, #0284c7); }
.community-card.is-cavaco .community-card-cover { background: linear-gradient(135deg, #3b0764, #7c3aed); }

.community-card > .community-avatar {
  position: absolute;
  z-index: 2;
  left: 18px;
  top: 42px;
  width: 70px;
  height: 70px;
  border: 2px solid rgba(255, 255, 255, 0.96);
  outline: 1px solid rgba(196, 181, 253, 0.78);
  box-shadow:
    0 0 0 1px rgba(124, 58, 237, 0.22),
    0 0 16px rgba(167, 139, 250, 0.62),
    0 10px 22px rgba(17, 22, 51, 0.16);
}

.community-card > .community-avatar::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.96), rgba(167,139,250,0.24), rgba(255,255,255,0.76)) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.community-card-main,
.community-card-actions {
  position: relative;
  z-index: 1;
}

.community-card-main {
  grid-column: 2;
}

.community-card-title {
  display: grid;
  gap: 1px;
}

.community-card-title strong {
  font-size: 0.95rem;
}

.community-card-title span,
.community-card p {
  font-size: 0.74rem;
}

.community-card p {
  margin: 2px 0 7px;
}

.community-reason {
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: #f4f2ff;
  color: #4f34d8 !important;
}

.community-card-actions {
  grid-column: 1 / -1;
  justify-content: space-between;
}

.community-card-actions .primary-button,
.community-card-actions .secondary-button {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 0.72rem;
}

.community-side-card {
  padding: 14px;
}

.community-compact-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 10px 0;
}

.community-compact-row + .community-compact-row {
  border-top: 1px solid var(--community-line);
}

.community-compact-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #6757f5, #8b5cf6);
  color: #fff;
  font-weight: 900;
  overflow: hidden;
}

.community-compact-row strong,
.community-compact-row span,
.community-compact-row em {
  display: block;
}

.community-compact-row strong {
  color: var(--community-ink);
  font-size: 0.8rem;
}

.community-compact-row span,
.community-compact-row em {
  color: var(--community-muted);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 750;
}

.community-compact-actions {
  display: grid;
  gap: 4px;
  justify-items: end;
}

.community-compact-actions button,
.community-muted-action {
  min-height: 26px;
  border: 0;
  background: transparent;
  color: var(--community-purple);
  font-size: 0.7rem;
  font-weight: 900;
  cursor: pointer;
}

.community-compact-actions .primary-button {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 7px;
  color: #fff;
}

.community-privacy-card {
  padding: 18px;
}

.community-privacy-card > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--community-soft);
  color: var(--community-purple);
}

.community-privacy-card strong {
  display: block;
  margin-top: 12px;
  color: var(--community-ink);
}

.community-privacy-card p {
  margin: 5px 0 0;
  color: var(--community-muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.community-filter-panel {
  position: fixed;
  top: 78px;
  right: 28px;
  z-index: 60;
  width: min(360px, calc(100vw - 32px));
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--community-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(17, 22, 51, 0.18);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.community-filters {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
}

.community-filters label {
  display: grid;
  gap: 5px;
}

.community-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.community-filter-head button {
  border: 0;
  background: transparent;
  color: var(--community-ink);
  font-size: 1.3rem;
  cursor: pointer;
}

.community-filters input,
.community-filters select {
  width: 100%;
}

.community-filters-open .community-filter-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.community-filter-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: none;
  background: rgba(17, 22, 51, 0.18);
}

.community-filters-open .community-filter-backdrop {
  display: block;
}

.community-empty-state {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  color: var(--community-muted);
  text-align: center;
}

.community-empty-state > span {
  color: var(--community-purple);
  font-size: 1.8rem;
}

.community-empty-state strong {
  color: var(--community-ink);
}

/* Fluxo de treino do Hoje no Vibra */
.training-flow-modal {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  padding: 18px;
}

.training-flow-modal.is-hidden {
  display: none !important;
}

.training-flow-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.training-flow-dialog {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid rgba(103, 87, 245, 0.22);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.25);
}

.training-flow-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
}

.training-flow-head h2 {
  margin: 2px 0 4px;
  color: #111633;
  font-size: 1.55rem;
  line-height: 1.1;
}

.training-flow-head span,
.training-flow-field > span {
  color: #66728a;
  font-weight: 800;
}

.training-flow-close {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(103, 87, 245, 0.18);
  border-radius: 10px;
  background: #fff;
  color: #6757f5;
  font-size: 1.25rem;
  cursor: pointer;
}

.training-flow-section {
  display: grid;
  gap: 14px;
}

.training-flow-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.training-flow-field {
  display: grid;
  gap: 8px;
}

.training-context-card {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid rgba(103, 87, 245, 0.18);
  border-radius: 12px;
  background: #f8f7ff;
}

.training-context-card strong {
  color: #111633;
  font-size: 1rem;
}

.training-context-card span {
  color: #66728a;
  font-weight: 800;
}

.training-context-chips,
.training-focus-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.training-context-chips em {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 9px;
  background: #ede9fe;
  color: #4f34d8;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
}

.training-focus-options label {
  cursor: pointer;
}

.training-focus-options input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.training-focus-options span {
  min-height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(103, 87, 245, 0.2);
  border-radius: 999px;
  padding: 0 12px;
  background: #fff;
  color: #403a65;
  font-weight: 900;
}

.training-focus-options input:checked + span {
  border-color: #6757f5;
  background: #ede9fe;
  color: #4f34d8;
}

.training-difficulty-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.training-difficulty-options label {
  cursor: pointer;
}

.training-difficulty-options input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.training-difficulty-options span {
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(103, 87, 245, 0.22);
  border-radius: 10px;
  background: #f8f7ff;
  color: #403a65;
  font-weight: 900;
}

.training-difficulty-options input:checked + span {
  border-color: #6757f5;
  background: linear-gradient(135deg, #6757f5, #7c3aed);
  color: #fff;
  box-shadow: 0 12px 24px rgba(103, 87, 245, 0.22);
}

.training-check {
  min-height: 44px;
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 0 12px;
  border: 1px solid rgba(103, 87, 245, 0.18);
  border-radius: 10px;
  background: #f8f7ff;
  color: #111633;
  font-weight: 850;
}

.training-auto-time {
  min-height: 54px;
  display: grid;
  gap: 3px;
  align-content: center;
  padding: 8px 12px;
  border: 1px solid rgba(103, 87, 245, 0.18);
  border-radius: 10px;
  background: #f8f7ff;
}

.training-auto-time span {
  color: #66728a;
  font-size: 0.78rem;
  font-weight: 850;
}

.training-auto-time strong {
  color: #4f34d8;
  font-size: 1.05rem;
  font-weight: 950;
}

#fullscreenPracticeSong.is-practice-active {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  box-shadow: 0 12px 24px rgba(34, 197, 94, 0.22);
}

.training-flow-message {
  min-height: 20px;
  margin: 0;
  color: #6757f5;
  font-weight: 850;
}

.training-flow-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

body[data-theme="dark"] .training-flow-dialog,
body[data-theme="dark"] .training-flow-close,
body[data-theme="dark"] .training-difficulty-options span,
body[data-theme="dark"] .training-focus-options span,
body[data-theme="dark"] .training-context-card,
body[data-theme="dark"] .training-auto-time,
body[data-theme="dark"] .training-check {
  border-color: rgba(167, 139, 250, 0.28);
  background: #111827;
  color: #f8fafc;
}

body[data-theme="dark"] .training-flow-head h2 {
  color: #f8fafc;
}

body[data-theme="dark"] .training-context-card strong {
  color: #f8fafc;
}

body[data-theme="dark"] .training-flow-head span,
body[data-theme="dark"] .training-flow-field > span {
  color: #cbd5e1;
}

@media (max-width: 1180px) {
  .community-panel[data-section-panel="comunidade"] {
    padding-inline: 18px;
  }

  .community-social-grid {
    grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1.6fr);
  }

  .community-right-rail {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .community-panel[data-section-panel="comunidade"] {
    width: 100%;
    max-width: 100%;
    padding: 12px 10px calc(96px + env(safe-area-inset-bottom));
    overflow-x: clip;
  }

  .community-panel[data-section-panel="comunidade"] *,
  .community-panel[data-section-panel="comunidade"] *::before,
  .community-panel[data-section-panel="comunidade"] *::after {
    max-width: 100%;
    box-sizing: border-box;
  }

  .community-panel[data-section-panel="comunidade"] .community-head {
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px;
  }

  .community-panel[data-section-panel="comunidade"] .community-search-shell {
    width: 100%;
    min-width: 0;
  }

  .community-panel[data-section-panel="comunidade"] .community-tabs {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 0 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .community-panel[data-section-panel="comunidade"] .community-tabs::-webkit-scrollbar {
    display: none;
  }

  .community-panel[data-section-panel="comunidade"] .community-tabs button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .community-panel[data-section-panel="comunidade"] .community-filter-toggle {
    margin-left: 0;
  }

  .community-panel[data-section-panel="comunidade"] .community-social-grid {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .community-panel[data-section-panel="comunidade"] .community-left-rail,
  .community-panel[data-section-panel="comunidade"] .community-center,
  .community-panel[data-section-panel="comunidade"] .community-right-rail {
    width: 100%;
    min-width: 0;
  }

  .community-panel[data-section-panel="comunidade"] .community-center {
    order: 1;
  }

  .community-panel[data-section-panel="comunidade"] .community-right-rail {
    order: 2;
    display: flex;
    flex-direction: column;
  }

  .community-panel[data-section-panel="comunidade"] .community-left-rail {
    order: 3;
  }

  .community-panel[data-section-panel="comunidade"] .community-card-grid {
    width: 100%;
    min-width: 0;
    grid-template-columns: 1fr;
  }

  .community-panel[data-section-panel="comunidade"] .community-new-strip {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .community-panel[data-section-panel="comunidade"] .community-new-person {
    flex: 0 0 68px;
    min-width: 0;
  }

  .community-panel[data-section-panel="comunidade"] .community-me-card,
  .community-panel[data-section-panel="comunidade"] .community-explore-card,
  .community-panel[data-section-panel="comunidade"] .community-new-card,
  .community-panel[data-section-panel="comunidade"] .community-people-section,
  .community-panel[data-section-panel="comunidade"] .community-side-card,
  .community-panel[data-section-panel="comunidade"] .community-privacy-card,
  .community-panel[data-section-panel="comunidade"] .community-view:not(#communityDiscoverView),
  .community-panel[data-section-panel="comunidade"] .community-card {
    width: 100%;
    min-width: 0;
  }

  .community-panel[data-section-panel="comunidade"] .community-filter-panel {
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 18px 18px 0 0;
  }

  .training-flow-modal {
    align-items: end;
    padding: 12px;
  }

  .training-flow-dialog {
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    padding: 18px;
    border-radius: 18px;
  }

  .training-flow-grid,
  .training-difficulty-options {
    grid-template-columns: 1fr;
  }

  .training-flow-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .community-card {
    grid-template-columns: 74px minmax(0, 1fr);
    padding-top: 98px;
  }

  .community-card-cover {
    height: 88px;
  }

  .community-card > .community-avatar {
    left: 16px;
    top: 40px;
    width: 68px;
    height: 68px;
  }
}
/* Mobile viewport guard: evita zoom de foco e estouro lateral entre modulos */
@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body,
  .app-shell,
  .app-main,
  .app-section,
  .home-dashboard,
  .music-form-panel,
  .saved-repertoires-panel,
  .fullscreen-lyrics,
  .modal-card,
  .confirm-modal,
  .notifications-panel {
    max-width: 100vw !important;
    min-width: 0 !important;
  }

  .app-main,
  .app-section,
  .section-body,
  .share-grid,
  .saved-form,
  .music-form,
  .vibra-song-layout,
  .vibra-song-main,
  .vibra-song-side,
  .profile-form-grid,
  .community-layout,
  .assistant-grid,
  .events-layout,
  .audio-player-body,
  .metronome-shell,
  .scale-library-panel,
  .chord-library-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip;
  }

  input,
  select,
  textarea,
  button {
    max-width: 100%;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  img,
  video,
  iframe,
  canvas,
  svg {
    max-width: 100%;
  }

  .table-scroll,
  .saved-table-scroll,
  .scale-table-wrap,
  .chord-table-wrap,
  .audio-library-list,
  .repertoire-table-wrapper {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .notifications-hub,
  .notifications-panel {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
  }
}

/* Comunidade: cards sociais musicais */
.community-panel[data-section-panel="comunidade"] .community-section-head {
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.community-panel[data-section-panel="comunidade"] .community-section-head h3 {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #17123f;
  font-size: 20px;
  font-weight: 850;
  line-height: 1.2;
}

.community-panel[data-section-panel="comunidade"] .community-section-head h3::before {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(14, 165, 233, 0.1)),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%236d28d9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M3 20c.6-3.2 2.4-5 5-5s4.4 1.8 5 5'/%3E%3Cpath d='M14 19c.5-2.3 1.8-3.6 3.8-3.6 1.8 0 3 1.1 3.7 3.6'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
}

.community-panel[data-section-panel="comunidade"] .community-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.community-panel[data-section-panel="comunidade"] .community-card {
  position: relative;
  min-width: 0;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  padding: 104px 18px 14px;
  border: 1px solid rgba(124, 92, 255, 0.14);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(31, 24, 71, 0.05);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

@media (hover: hover) {
  .community-panel[data-section-panel="comunidade"] .community-card:hover {
    transform: translateY(-2px);
    border-color: rgba(124, 58, 237, 0.22);
    box-shadow: 0 16px 34px rgba(31, 24, 71, 0.08);
  }
}

.community-panel[data-section-panel="comunidade"] .community-card-cover {
  position: absolute;
  inset: 0 0 auto;
  height: 92px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.38), transparent 27%),
    linear-gradient(135deg, #3b0764, #7c3aed);
}

.community-panel[data-section-panel="comunidade"] .community-card-cover::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 0;
  width: 42%;
  height: 58px;
  opacity: 0.14;
  background:
    linear-gradient(to top, rgba(255,255,255,0.75) 0 22%, transparent 22% 100%) 0 100% / 4px 46px repeat-x,
    linear-gradient(to top, rgba(255,255,255,0.48) 0 52%, transparent 52% 100%) 8px 100% / 5px 62px repeat-x,
    linear-gradient(to top, rgba(255,255,255,0.64) 0 36%, transparent 36% 100%) 15px 100% / 3px 54px repeat-x;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 100%);
}

.community-panel[data-section-panel="comunidade"] .community-card.is-percussion .community-card-cover { background: radial-gradient(circle at 18% 20%, rgba(255,255,255,0.3), transparent 27%), linear-gradient(135deg, #991b1b, #ea580c); }
.community-panel[data-section-panel="comunidade"] .community-card.is-voice .community-card-cover { background: radial-gradient(circle at 18% 20%, rgba(255,255,255,0.32), transparent 27%), linear-gradient(135deg, #0f766e, #0891b2); }
.community-panel[data-section-panel="comunidade"] .community-card.is-keys .community-card-cover { background: radial-gradient(circle at 18% 20%, rgba(255,255,255,0.32), transparent 27%), linear-gradient(135deg, #1e3a8a, #7c3aed); }
.community-panel[data-section-panel="comunidade"] .community-card.is-strings .community-card-cover { background: radial-gradient(circle at 18% 20%, rgba(255,255,255,0.32), transparent 27%), linear-gradient(135deg, #075985, #0284c7); }
.community-panel[data-section-panel="comunidade"] .community-card.is-cavaco .community-card-cover { background: radial-gradient(circle at 18% 20%, rgba(255,255,255,0.34), transparent 27%), linear-gradient(135deg, #4c1d95, #6d28d9); }

.community-panel[data-section-panel="comunidade"] .community-card > .community-avatar {
  position: absolute;
  z-index: 2;
  left: 20px;
  top: 18px;
  width: 68px;
  height: 68px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  outline: 2px solid rgba(139, 92, 246, 0.58);
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  box-shadow: 0 10px 20px rgba(31, 24, 71, 0.2);
}

.community-panel[data-section-panel="comunidade"] .community-card > .community-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.community-panel[data-section-panel="comunidade"] .community-card > .community-avatar::after {
  content: none;
}

.community-panel[data-section-panel="comunidade"] .community-card-main {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  gap: 0;
}

.community-panel[data-section-panel="comunidade"] .community-card-title {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding-top: 4px;
}

.community-panel[data-section-panel="comunidade"] .community-card-title strong {
  color: #17123f;
  font-size: 17px;
  font-weight: 850;
  line-height: 1.2;
}

.community-panel[data-section-panel="comunidade"] .community-card-title span {
  color: #6d28d9;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
}

.community-panel[data-section-panel="comunidade"] .community-card p {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 5px 0 9px;
  color: #756d92;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
}

.community-panel[data-section-panel="comunidade"] .community-card p::before {
  content: "⌖";
  flex: 0 0 auto;
  color: #6d28d9;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.community-panel[data-section-panel="comunidade"] .community-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 9px;
}

.community-panel[data-section-panel="comunidade"] .community-chip-row span {
  min-height: 23px;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  color: #5b21b6;
  background: #f2edff;
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
}

.community-panel[data-section-panel="comunidade"] .community-reason {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 9px;
  padding: 9px 12px;
  border-radius: 10px;
  color: #5b21b6;
  background: rgba(124, 58, 237, 0.07);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
}

.community-panel[data-section-panel="comunidade"] .community-reason::before {
  content: "“";
  color: #7c3aed;
  font-size: 20px;
  font-weight: 900;
  line-height: 0.8;
}

.community-panel[data-section-panel="comunidade"] .community-card-main small:not(.community-reason) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  color: #756d92;
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.25;
}

.community-panel[data-section-panel="comunidade"] .community-card-main small:not(.community-reason)::before {
  content: "≋";
  color: #6d28d9;
  font-size: 13px;
  font-weight: 900;
}

.community-panel[data-section-panel="comunidade"] .community-card-actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
}

.community-panel[data-section-panel="comunidade"] .community-card-actions .primary-button,
.community-panel[data-section-panel="comunidade"] .community-card-actions .secondary-button {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0 11px;
  font-size: 11.5px;
  font-weight: 780;
  line-height: 1;
}

.community-panel[data-section-panel="comunidade"] .community-card-actions .secondary-button {
  border: 1px solid rgba(124, 58, 237, 0.22);
  color: #6d28d9;
  background: #ffffff;
}

.community-panel[data-section-panel="comunidade"] .community-card-actions .primary-button {
  min-width: 98px;
  border: 0;
  color: #ffffff;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  box-shadow: 0 10px 22px rgba(79, 70, 229, 0.2);
}

@media (hover: hover) {
  .community-panel[data-section-panel="comunidade"] .community-card-actions .primary-button:hover {
    filter: brightness(1.06);
    box-shadow: 0 12px 24px rgba(79, 70, 229, 0.26);
  }
}

@media (max-width: 760px) {
  .community-panel[data-section-panel="comunidade"] .community-card-grid {
    grid-template-columns: 1fr;
  }

  .community-panel[data-section-panel="comunidade"] .community-card {
    padding: 100px 16px 14px;
  }

  .community-panel[data-section-panel="comunidade"] .community-card-cover {
    height: 88px;
  }

  .community-panel[data-section-panel="comunidade"] .community-card > .community-avatar {
    left: 18px;
    top: 17px;
    width: 66px;
    height: 66px;
  }

  .community-panel[data-section-panel="comunidade"] .community-card-title strong {
    font-size: 17px;
  }

  .community-panel[data-section-panel="comunidade"] .community-card-actions {
    gap: 10px;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
  }

  .community-panel[data-section-panel="comunidade"] .community-card-actions .primary-button,
  .community-panel[data-section-panel="comunidade"] .community-card-actions .secondary-button {
    flex: 1;
    min-width: 0;
    padding-inline: 10px;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }

  .community-panel[data-section-panel="comunidade"] .community-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .community-panel[data-section-panel="comunidade"] .community-card-title strong,
  .community-panel[data-section-panel="comunidade"] .community-card-title span,
  .community-panel[data-section-panel="comunidade"] .community-card p,
  .community-panel[data-section-panel="comunidade"] .community-reason,
  .community-panel[data-section-panel="comunidade"] .community-card-main small:not(.community-reason),
  .community-panel[data-section-panel="comunidade"] .community-compact-row,
  .community-panel[data-section-panel="comunidade"] .community-side-card,
  .community-panel[data-section-panel="comunidade"] .community-privacy-card {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* Visualizador de foto de perfil em tela cheia */
.profile-photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
}

.profile-photo-viewer.is-hidden {
  display: none;
}

.profile-photo-viewer-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(124, 58, 237, 0.28), transparent 36%),
    rgba(5, 5, 12, 0.88);
  backdrop-filter: blur(12px);
  cursor: zoom-out;
}

.profile-photo-viewer-dialog {
  position: relative;
  z-index: 1;
  width: min(92vw, 760px);
  max-height: calc(100vh - 48px);
  display: grid;
  justify-items: center;
  gap: 14px;
}

.profile-photo-viewer-dialog img {
  width: min(82vw, 620px);
  height: min(82vw, 620px);
  max-height: calc(100vh - 130px);
  object-fit: cover;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 0 0 1px rgba(196, 181, 253, 0.5),
    0 0 42px rgba(124, 58, 237, 0.46),
    0 28px 80px rgba(0, 0, 0, 0.52);
}

.profile-photo-viewer-dialog strong {
  max-width: min(88vw, 620px);
  color: #fff;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.46);
}

.profile-photo-viewer-close {
  position: absolute;
  top: -8px;
  right: max(0px, calc((100% - min(82vw, 620px)) / 2));
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(15, 15, 28, 0.72);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}

[data-profile-photo-fullscreen] {
  cursor: zoom-in;
}

/* Escalas mobile: braco do cavaco em pe */
@media (max-width: 768px) {
  .scale-library-panel[data-section-panel="escalas"] .scale-fretboard-scroll,
  .scale-modal .scale-fretboard-scroll {
    display: none !important;
  }

  .scale-library-panel[data-section-panel="escalas"] .scale-mobile-fretboard,
  .scale-modal .scale-mobile-fretboard {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 4px !important;
  }

  .scale-library-panel[data-section-panel="escalas"] .scale-mobile-open-panel,
  .scale-modal .scale-mobile-open-panel {
    display: grid !important;
    grid-template-columns: 34px repeat(4, minmax(0, 1fr)) !important;
    align-items: center !important;
    width: 100% !important;
    padding-bottom: 6px !important;
    border-bottom: 2px solid #64748b !important;
  }

  .scale-library-panel[data-section-panel="escalas"] .scale-mobile-inner,
  .scale-modal .scale-mobile-inner {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .scale-library-panel[data-section-panel="escalas"] .scale-mobile-fret-numbers,
  .scale-modal .scale-mobile-fret-numbers {
    display: grid !important;
    grid-template-rows: 28px repeat(12, 42px) !important;
  }

  .scale-library-panel[data-section-panel="escalas"] .scale-mobile-notes,
  .scale-modal .scale-mobile-notes {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    background: #fff !important;
  }

  .scale-library-panel[data-section-panel="escalas"] .scale-mobile-string,
  .scale-modal .scale-mobile-string {
    display: grid !important;
    grid-template-rows: 28px repeat(12, 42px) !important;
    min-width: 0 !important;
    border-left: 1px solid var(--line) !important;
  }

  .scale-library-panel[data-section-panel="escalas"] .scale-mobile-string:first-child,
  .scale-modal .scale-mobile-string:first-child {
    border-left: 0 !important;
  }

  .scale-library-panel[data-section-panel="escalas"] .scale-mobile-note-list {
    display: grid !important;
    grid-template-rows: repeat(12, 42px) !important;
  }

  .scale-library-panel[data-section-panel="escalas"] .scale-mobile-note,
  .scale-modal .scale-mobile-note {
    min-height: 42px !important;
    height: 42px !important;
    border-top: 2px solid #cbd5e1 !important;
  }

  .scale-library-panel[data-section-panel="escalas"] .scale-position-marker,
  .scale-modal .scale-position-marker {
    display: none !important;
  }

  body[data-theme="dark"] .scale-library-panel[data-section-panel="escalas"] .scale-mobile-notes,
  body[data-theme="dark"] .scale-modal .scale-mobile-notes {
    background: #111827 !important;
  }
}

/* Dark mode hardening: corrige blocos novos que ainda herdavam fundo claro. */
body[data-theme="dark"] {
  --dark-surface: #0f172a;
  --dark-surface-2: #111827;
  --dark-surface-3: #1e293b;
  --dark-border: rgba(148, 163, 184, 0.24);
  --dark-text: #f8fafc;
  --dark-muted: #cbd5e1;
  --dark-soft: #94a3b8;
}

body[data-theme="dark"] :where(
  .app-section,
  .home-dashboard,
  .home-dashboard-card,
  .home-panel-card,
  .dashboard-card,
  .vibra-card,
  .vibra-form-card,
  .vibra-song-hero,
  .vibra-tone-card,
  .vibra-tip-card,
  .vibra-video-preview,
  .vibra-toggle-list,
  .community-panel,
  .community-card,
  .community-card-main,
  .community-reason,
  .community-filter-panel,
  .community-me-card,
  .community-sintonia-card,
  .profile-card,
  .profile-editor-panel,
  .profile-step-panel,
  .profile-progress-card,
  .profile-readonly-id,
  .social-profile-card,
  .social-profile-stats,
  .social-profile-tab-panel,
  .setlist-panel,
  .setlist-name-card,
  .setlist-list-toolbar,
  .setlist-empty,
  .setlist-item,
  .saved-repertoires-panel,
  .saved-summary-card,
  .saved-tip-bar,
  .saved-item,
  .music-library,
  .song-card,
  .toolbar,
  .results-head,
  .table-wrap,
  .lyrics-panel,
  .lyrics-song,
  .fullscreen-lyrics-panel,
  .chord-panel,
  .chord-list-shell,
  .chord-card,
  .chord-info-card,
  .new-chord-shell,
  .new-chord-card,
  .new-chord-editor,
  .new-chord-detected,
  .scale-library-panel,
  .scale-viewer,
  .scale-note-detail,
  .scale-mobile-notes,
  .tuner-panel,
  .detector-panel,
  .detector-result-card,
  .solo-panel,
  .metronome-panel,
  .audio-panel,
  .audio-library-item,
  .event-card,
  .event-request-item,
  .training-flow-dialog,
  .training-context-card,
  .training-auto-time,
  .notifications-panel,
  .notification-item,
  .confirm-modal-card,
  .music-import-panel,
  .repertoire-preview,
  .bottom-nav-overflow-panel
) {
  border-color: var(--dark-border) !important;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.96)) !important;
  color: var(--dark-text) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28) !important;
}

body[data-theme="dark"] :where(
  .home-dashboard h1,
  .home-dashboard h2,
  .home-dashboard h3,
  .home-dashboard strong,
  .vibra-card h2,
  .vibra-card h3,
  .vibra-form-card h2,
  .vibra-form-card h3,
  .community-card-title,
  .community-card strong,
  .community-card h3,
  .profile-editor-panel h2,
  .profile-editor-panel h3,
  .social-profile-card h1,
  .social-profile-card h2,
  .social-profile-card strong,
  .setlist-panel h2,
  .setlist-panel h3,
  .setlist-song strong,
  .saved-repertoires-panel h2,
  .saved-repertoires-panel h3,
  .saved-name strong,
  .song-title,
  .lyrics-song h3,
  .chord-panel h2,
  .chord-card-head strong,
  .new-chord-head h2,
  .new-chord-card strong,
  .scale-library-panel h2,
  .scale-library-panel h3,
  .tuner-panel h2,
  .detector-panel h2,
  .training-flow-head h2,
  .notification-item strong
) {
  color: var(--dark-text) !important;
}

body[data-theme="dark"] :where(
  .home-dashboard p,
  .home-dashboard span,
  .home-dashboard small,
  .home-dashboard time,
  .vibra-card p,
  .vibra-card span,
  .vibra-card small,
  .vibra-field label,
  .vibra-field span,
  .community-card p,
  .community-card small,
  .community-reason,
  .community-card-meta,
  .profile-editor-panel p,
  .profile-editor-panel small,
  .profile-help,
  .social-profile-card p,
  .social-profile-card span,
  .setlist-panel span,
  .setlist-panel small,
  .setlist-field-help,
  .setlist-bottom-tip,
  .saved-repertoires-panel span,
  .saved-repertoires-panel small,
  .song-artist,
  .song-card p,
  .lyrics-song p,
  .chord-panel p,
  .chord-panel li,
  .new-chord-card label,
  .new-chord-card p,
  .scale-library-panel p,
  .scale-library-panel span,
  .tuner-panel span,
  .detector-panel p,
  .audio-library-item-meta span,
  .event-card span,
  .training-flow-field > span
) {
  color: var(--dark-muted) !important;
}

body[data-theme="dark"] :where(
  input,
  textarea,
  select,
  .custom-select-trigger,
  .custom-select-menu,
  .custom-select-option,
  .search-field,
  .search-field input,
  .select-field,
  .name-field input,
  .name-field textarea,
  .name-field select,
  .vibra-field input,
  .vibra-field textarea,
  .vibra-field select,
  .profile-editor-panel input,
  .profile-editor-panel textarea,
  .profile-editor-panel select,
  .new-chord-card input,
  .new-chord-card select
) {
  border-color: var(--dark-border) !important;
  background: rgba(2, 6, 23, 0.68) !important;
  color: var(--dark-text) !important;
}

body[data-theme="dark"] :where(input, textarea)::placeholder {
  color: rgba(203, 213, 225, 0.68) !important;
}

body[data-theme="dark"] :where(
  .secondary-button,
  .text-button,
  .icon-button,
  .small-link-button,
  .table-action,
  .favorite-button,
  .song-edit-button,
  .song-select-button,
  .vibra-toggle-row,
  .chord-actions button,
  .new-chord-segments button,
  .training-difficulty-options span,
  .training-focus-options span,
  .profile-chip,
  .profile-option-button,
  .tag,
  .home-chip,
  .song-tags span,
  .audio-library-badge,
  .shared-pill,
  .favorite-badge
) {
  border-color: rgba(167, 139, 250, 0.28) !important;
  background: rgba(30, 41, 59, 0.72) !important;
  color: #ede9fe !important;
}

body[data-theme="dark"] :where(
  .primary-button,
  .toggle-button.is-active,
  .secondary-button.is-active,
  .song-select-button.is-selected,
  .favorite-button.is-active,
  .vibra-toggle-row.is-active
) {
  border-color: rgba(139, 92, 246, 0.72) !important;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
  color: #ffffff !important;
}

body[data-theme="dark"] :where(table, thead, tbody, tr, th, td) {
  border-color: var(--dark-border) !important;
  background-color: transparent !important;
  color: var(--dark-muted) !important;
}

body[data-theme="dark"] :where(th, td::before) {
  color: var(--dark-text) !important;
}

body[data-theme="dark"] :where(.dashboard-icon, .vibra-row-icon, .field-icon, .action-icon, svg) {
  color: currentColor;
}

/* Comunidade/perfil: dark mode completo para a tela social. */
body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] {
  --community-purple: #a78bfa;
  --community-ink: #f8fafc;
  --community-muted: #cbd5e1;
  --community-line: rgba(167, 139, 250, 0.24);
  --community-soft: rgba(124, 58, 237, 0.18);
  --community-card: rgba(15, 23, 42, 0.96);
  background: #111827 !important;
  color: var(--community-ink) !important;
}

body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] .community-head h2,
body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] .community-section-head h3,
body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] .community-explore-card h3,
body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] .community-side-head h3,
body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] .community-me-name strong,
body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] .community-me-stats strong,
body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] .community-interest-box strong,
body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] .community-compact-row strong,
body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] .community-privacy-card strong,
body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] .community-card-title strong,
body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] .community-new-person strong {
  color: var(--community-ink) !important;
}

body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] .community-head span,
body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] .community-me-name span,
body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] .community-me-card p,
body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] .community-me-stats span,
body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] .community-compact-row span,
body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] .community-compact-row em,
body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] .community-privacy-card p,
body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] .community-card p,
body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] .community-card-main small:not(.community-reason),
body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] .community-empty-inline,
body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] .community-empty-state p,
body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] #communityMessage {
  color: var(--community-muted) !important;
}

body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] :where(
  .community-search-shell,
  .community-tabs,
  .community-me-card,
  .community-explore-card,
  .community-new-card,
  .community-people-section,
  .community-side-card,
  .community-privacy-card,
  .community-view:not(#communityDiscoverView),
  .community-card,
  .community-filter-panel,
  .community-empty-state
) {
  border-color: var(--community-line) !important;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.98)) !important;
  color: var(--community-ink) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.30) !important;
}

body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] .community-search-shell input,
body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] .community-filter-panel input,
body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] .community-filter-panel select {
  background: transparent !important;
  color: var(--community-ink) !important;
}

body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] .community-tabs button,
body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] .community-explore-card > button {
  color: #dbeafe !important;
}

body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] .community-tabs button.is-active,
body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] .community-explore-card > button.is-active {
  color: #ffffff !important;
  background: rgba(124, 58, 237, 0.20) !important;
}

body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] :where(
  .community-tabs span,
  .community-active-filters button,
  #communityInterestChips button,
  .community-chip-row span,
  .community-reason,
  .community-privacy-card > span
) {
  border-color: rgba(167, 139, 250, 0.24) !important;
  background: rgba(124, 58, 237, 0.18) !important;
  color: #ddd6fe !important;
}

body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] .community-card-actions .secondary-button {
  border-color: rgba(167, 139, 250, 0.34) !important;
  background: rgba(15, 23, 42, 0.82) !important;
  color: #ddd6fe !important;
}

body[data-theme="dark"] .community-panel[data-section-panel="comunidade"] .community-card > .community-avatar {
  border-color: rgba(15, 23, 42, 0.96) !important;
  outline-color: rgba(167, 139, 250, 0.72) !important;
}

/* Perfil social: layout definitivo para o DOM atual */
.profile-social-panel[data-section-panel="perfil-social"] {
  width: min(100%, 1400px);
  padding: 12px 24px 48px;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "hero"
    "content"
    "future";
  gap: 24px;
  align-items: start;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-hero {
  grid-area: hero;
  position: relative;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-cover {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 30%, rgba(168, 85, 247, 0.5), transparent 24%),
    radial-gradient(circle at 70% 20%, rgba(236, 72, 153, 0.22), transparent 20%),
    linear-gradient(115deg, #4c1d95 0%, #10073f 46%, #041239 100%);
  box-shadow: 0 12px 32px rgba(31, 24, 71, 0.08);
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-cover::before,
.profile-social-panel[data-section-panel="perfil-social"] .profile-social-cover::after,
.profile-social-panel[data-section-panel="perfil-social"] .profile-social-cover > span {
  content: none;
  display: none;
}

.profile-social-cover-decoration {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.profile-social-cover-decoration::before {
  content: "";
  position: absolute;
  inset: auto 28px 24px;
  height: 132px;
  opacity: 0.1;
  background:
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,0.6) 22px 25px, transparent 25px 36px),
    linear-gradient(180deg, transparent, rgba(139, 92, 246, 0.42));
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.profile-social-cover-decoration span {
  position: absolute;
  bottom: 88px;
  width: 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f0abfc, #60a5fa);
  box-shadow: 0 0 16px rgba(216, 180, 254, 0.62);
  opacity: 0.38;
}

.profile-social-cover-decoration span:nth-child(1) { left: 50%; height: 30px; opacity: 0.22; }
.profile-social-cover-decoration span:nth-child(2) { left: 53%; height: 50px; background: linear-gradient(180deg, #f0abfc, #a78bfa); opacity: 0.48; }
.profile-social-cover-decoration span:nth-child(3) { left: 56%; height: 36px; background: linear-gradient(180deg, #fde68a, #60a5fa); opacity: 0.44; }
.profile-social-cover-decoration span:nth-child(4) { left: 59%; height: 60px; background: linear-gradient(180deg, #f472b6, #818cf8); opacity: 0.5; }
.profile-social-cover-decoration span:nth-child(5) { left: 62%; height: 26px; opacity: 0.2; }

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-cover-edit {
  position: absolute;
  top: 28px;
  right: 28px;
  z-index: 5;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 999px;
  padding: 0 16px;
  color: #ffffff;
  background: rgba(9, 13, 44, 0.32);
  backdrop-filter: blur(10px);
  font-size: 0.78rem;
  font-weight: 900;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-cover-edit svg {
  width: 15px;
  height: 15px;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-cover-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  width: 100%;
  height: 100%;
  min-height: 330px;
  padding: 24px 430px 40px 48px;
  box-sizing: border-box;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-cover-content span {
  position: static;
  bottom: auto;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-avatar-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 165px;
  height: 165px;
  margin: 0;
  z-index: 2;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-avatar {
  width: 165px;
  height: 165px;
  box-sizing: border-box;
  border: 5px solid #ffffff;
  border-radius: 50%;
  box-shadow:
    0 0 0 4px rgba(167, 139, 250, 0.82),
    0 20px 40px rgba(0, 0, 0, 0.26);
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-photo-edit {
  right: 8px;
  bottom: 8px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 3px solid #ffffff;
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  font-size: 0;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-photo-edit svg {
  width: 21px;
  height: 21px;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-identity-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
  transform: translateY(-8px);
  min-width: 0;
  max-width: 560px;
  color: #ffffff;
  text-align: left;
}

.profile-social-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(139, 92, 246, 0.38);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.profile-social-panel[data-section-panel="perfil-social"] #profile-social-title {
  margin: 6px 0 0;
  padding: 0;
  max-width: 620px;
  color: #fff;
  font-size: clamp(30px, 2.2vw, 39px);
  line-height: 1.03;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: none;
}

.profile-social-panel[data-section-panel="perfil-social"] #socialProfileName {
  display: block;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-transform: none;
}

.profile-social-panel[data-section-panel="perfil-social"] #socialProfileNickname {
  display: block;
  position: static;
  color: #c9b7ff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-location,
.profile-social-panel[data-section-panel="perfil-social"] #socialProfileLocation {
  display: flex;
  align-items: center;
  gap: 6px;
  position: static;
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: normal;
}

.profile-social-panel[data-section-panel="perfil-social"] #socialProfileLocation::before {
  content: "📍";
  flex: 0 0 auto;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-hero-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  position: static;
  margin-top: 4px;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-hero-badges span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(109, 40, 217, 0.58);
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-hero-badges span + span {
  background: rgba(255, 255, 255, 0.12);
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-side {
  position: absolute;
  z-index: 10;
  width: 350px;
  right: 36px;
  top: 195px;
  display: grid;
  gap: 12px;
  padding: 14px 12px 12px;
  border: 1px solid rgba(124, 58, 237, 0.1);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(31, 24, 71, 0.06);
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  min-width: 0;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-metric-card,
.profile-social-panel[data-section-panel="perfil-social"] .profile-social-metric-button {
  width: 100%;
  min-width: 0;
  min-height: 88px;
  display: grid;
  grid-template-rows: 36px auto auto;
  place-items: center;
  align-content: center;
  gap: 3px;
  padding: 7px 6px;
  border: 0;
  border-radius: 0;
  background: rgba(248, 246, 255, 0.5);
  color: #140f33;
  box-shadow: none;
  text-align: center;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-metric-card + .profile-social-metric-card,
.profile-social-panel[data-section-panel="perfil-social"] .profile-social-metric-card + .profile-social-metric-button,
.profile-social-panel[data-section-panel="perfil-social"] .profile-social-metric-button + .profile-social-metric-card {
  border-left: 1px solid rgba(124, 58, 237, 0.12);
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-metric-button {
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-metric-button:hover,
.profile-social-panel[data-section-panel="perfil-social"] .profile-social-metric-button:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(124, 58, 237, 0.24);
  box-shadow: 0 14px 28px rgba(124, 58, 237, 0.12);
  outline: none;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-metric-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #6d28d9;
  background: #ece5ff;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-metric-icon svg {
  width: 18px;
  height: 18px;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-metrics strong {
  color: #140f33;
  font-size: 26px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-metrics span:not(.profile-social-metric-icon) {
  max-width: 100%;
  color: #746c9a;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.05;
  white-space: normal;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-action-card {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border-radius: 14px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-action-card.is-primary {
  border: 1px solid rgba(124, 58, 237, 0.08);
  background: linear-gradient(135deg, #3b0ea3 0%, #6d28d9 48%, #8b5cf6 100%);
  color: #ffffff;
  box-shadow: 0 12px 26px rgba(76, 29, 149, 0.18);
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-action-card.is-primary strong,
.profile-social-panel[data-section-panel="perfil-social"] .profile-social-action-card.is-primary small,
.profile-social-panel[data-section-panel="perfil-social"] .profile-social-action-card.is-primary .profile-social-action-arrow {
  color: #ffffff;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-action-card.is-primary small {
  opacity: 1;
  color: rgba(255, 255, 255, 0.8);
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-action-card.is-secondary {
  border: 1px solid rgba(124, 58, 237, 0.42);
  background: #ffffff;
  color: #4c1d95;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-action-card:hover,
.profile-social-panel[data-section-panel="perfil-social"] .profile-social-action-card:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-action-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: currentColor;
  background: rgba(255, 255, 255, 0.16);
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-action-card.is-secondary .profile-social-action-icon {
  background: #f0e9ff;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-action-icon svg {
  width: 20px;
  height: 20px;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-action-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-action-copy strong {
  color: currentColor;
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-action-copy small {
  color: currentColor;
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.25;
  opacity: 0.78;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-action-arrow {
  justify-self: end;
  color: currentColor;
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(124, 58, 237, 0.12);
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-status-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #746c9a;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-status-copy svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: #6d28d9;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-visibility-badge {
  flex: 0 0 auto;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #5b21b6;
  background: #f0e9ff;
  font-size: 12px;
  font-weight: 900;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-visibility-badge svg {
  width: 16px;
  height: 16px;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-content {
  grid-area: content;
  display: grid;
  gap: 16px;
  min-width: 0;
  padding-right: 420px;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-section {
  border: 1px solid rgba(124, 58, 237, 0.09);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(31, 24, 71, 0.06);
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-about {
  padding: 22px 26px;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-about h3,
.profile-social-panel[data-section-panel="perfil-social"] .profile-social-objectives h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  color: #141036;
  font-size: 17px;
  line-height: 1.2;
  text-transform: none;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-about h3 span,
.profile-social-panel[data-section-panel="perfil-social"] .profile-social-objectives h3 span {
  color: #7c3aed;
  font-size: 1.2rem;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-about p {
  margin: 0;
  max-width: 76ch;
  color: #57516f;
  font-size: 14px;
  line-height: 1.5;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-about-facts {
  display: grid;
  grid-template-columns: 1fr 1fr 1.15fr 1fr;
  align-items: stretch;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(124, 58, 237, 0.08);
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-about-facts > div {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 7px;
  align-items: center;
  min-width: 0;
  min-height: 60px;
  height: 100%;
  overflow: hidden;
  padding: 9px 11px;
  border: 1px solid rgba(124, 58, 237, 0.06);
  border-radius: 14px;
  color: #271c62;
  background: #f8f4ff;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-about-facts > div > span {
  grid-row: 1 / 3;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #7c3aed;
  background: #efe6ff;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-about-facts > div > strong {
  grid-column: 2;
  display: block;
  min-width: 0;
  color: #6d54c8;
  font-size: 10.5px;
  line-height: 1.15;
  max-width: 100%;
  word-break: normal;
  overflow-wrap: normal;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-about-facts > div > small {
  grid-column: 2;
  display: block;
  max-width: 100%;
  min-width: 0;
  margin-top: 2px;
  color: #4e4767;
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.15;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-objectives {
  display: block;
  padding: 20px 24px;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-goals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-goal {
  min-width: 0;
  min-height: 38px;
  display: inline-grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(124, 58, 237, 0.11);
  border-radius: 13px;
  color: #3b286d;
  background: #f4f0ff;
  font-weight: 850;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-goal span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: #7c3aed;
  font-weight: 950;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-goal strong {
  min-width: 0;
  font-size: 11px;
  line-height: 1.15;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-hidden-data {
  display: none;
}

.profile-social-panel[data-section-panel="perfil-social"] .profile-social-future {
  grid-area: future;
  display: none;
}

body[data-theme="dark"] .profile-social-panel[data-section-panel="perfil-social"] .profile-social-side,
body[data-theme="dark"] .profile-social-panel[data-section-panel="perfil-social"] .profile-social-section {
  border-color: rgba(129, 140, 248, 0.24);
  background: rgba(17, 16, 46, 0.86);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
}

body[data-theme="dark"] .profile-social-panel[data-section-panel="perfil-social"] .profile-social-about h3,
body[data-theme="dark"] .profile-social-panel[data-section-panel="perfil-social"] .profile-social-objectives h3 {
  color: #f8f7ff;
}

body[data-theme="dark"] .profile-social-panel[data-section-panel="perfil-social"] .profile-social-about p {
  color: #c9c3e8;
}

body[data-theme="dark"] .profile-social-panel[data-section-panel="perfil-social"] .profile-social-about-facts > div,
body[data-theme="dark"] .profile-social-panel[data-section-panel="perfil-social"] .profile-social-goal {
  color: #f8f7ff;
  border-color: rgba(167, 139, 250, 0.24);
  background: rgba(124, 58, 237, 0.18);
}

body[data-theme="dark"] .profile-social-panel[data-section-panel="perfil-social"] .profile-social-about-facts > div > span,
body[data-theme="dark"] .profile-social-panel[data-section-panel="perfil-social"] .profile-social-goal span {
  color: #f8f7ff;
  background: rgba(167, 139, 250, 0.24);
}

body[data-theme="dark"] .profile-social-panel[data-section-panel="perfil-social"] .profile-social-about-facts > div > strong,
body[data-theme="dark"] .profile-social-panel[data-section-panel="perfil-social"] .profile-social-about-facts > div > small {
  color: #f8f7ff;
}

body[data-theme="dark"] .profile-social-panel[data-section-panel="perfil-social"] .profile-social-metric-card,
body[data-theme="dark"] .profile-social-panel[data-section-panel="perfil-social"] .profile-social-metric-button {
  background: rgba(30, 41, 59, 0.72) !important;
  color: #f8fafc !important;
}

body[data-theme="dark"] .profile-social-panel[data-section-panel="perfil-social"] .profile-social-metric-card + .profile-social-metric-card,
body[data-theme="dark"] .profile-social-panel[data-section-panel="perfil-social"] .profile-social-metric-card + .profile-social-metric-button,
body[data-theme="dark"] .profile-social-panel[data-section-panel="perfil-social"] .profile-social-metric-button + .profile-social-metric-card {
  border-left-color: rgba(167, 139, 250, 0.20) !important;
}

body[data-theme="dark"] .profile-social-panel[data-section-panel="perfil-social"] .profile-social-metric-icon {
  background: rgba(167, 139, 250, 0.18) !important;
  color: #ddd6fe !important;
}

body[data-theme="dark"] .profile-social-panel[data-section-panel="perfil-social"] .profile-social-metrics strong {
  color: #ffffff !important;
}

body[data-theme="dark"] .profile-social-panel[data-section-panel="perfil-social"] .profile-social-metrics span:not(.profile-social-metric-icon) {
  color: #cbd5e1 !important;
}

body[data-theme="dark"] .profile-social-panel[data-section-panel="perfil-social"] .profile-social-action-card.is-secondary {
  border-color: rgba(167, 139, 250, 0.34) !important;
  background: rgba(15, 23, 42, 0.86) !important;
  color: #ddd6fe !important;
}

body[data-theme="dark"] .profile-social-panel[data-section-panel="perfil-social"] .profile-social-action-card.is-secondary .profile-social-action-icon {
  background: rgba(167, 139, 250, 0.18) !important;
  color: #ddd6fe !important;
}

body[data-theme="dark"] .profile-social-panel[data-section-panel="perfil-social"] .profile-social-status {
  border-top-color: rgba(167, 139, 250, 0.18) !important;
}

body[data-theme="dark"] .profile-social-panel[data-section-panel="perfil-social"] .profile-social-status-copy {
  color: #c4b5fd !important;
}

body[data-theme="dark"] .profile-social-panel[data-section-panel="perfil-social"] .profile-social-visibility-badge {
  background: rgba(167, 139, 250, 0.16) !important;
  color: #f8fafc !important;
}

@media (max-width: 1180px) {
  .profile-social-panel[data-section-panel="perfil-social"] .profile-social-cover-content {
    padding-right: 388px;
  }

  .profile-social-panel[data-section-panel="perfil-social"] .profile-social-side {
    width: 330px;
  }

  .profile-social-panel[data-section-panel="perfil-social"] .profile-social-content {
    padding-right: 388px;
  }
}

@media (max-width: 980px) {
  .profile-social-panel[data-section-panel="perfil-social"] .profile-social-cover-content {
    padding-right: 48px;
  }

  .profile-social-panel[data-section-panel="perfil-social"] .profile-social-side {
    position: relative;
    top: auto;
    right: auto;
    width: min(100%, 420px);
    margin: -38px auto 0;
  }

  .profile-social-panel[data-section-panel="perfil-social"] .profile-social-content {
    padding-right: 0;
  }

  .profile-social-panel[data-section-panel="perfil-social"] .profile-social-about-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .profile-social-panel[data-section-panel="perfil-social"] {
    padding-inline: 12px;
  }

  .profile-social-panel[data-section-panel="perfil-social"] .profile-social-cover-content {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 62px 20px 30px;
    text-align: center;
  }

  .profile-social-panel[data-section-panel="perfil-social"] .profile-social-identity-content {
    align-items: center;
    text-align: center;
    transform: translateY(0);
  }

  .profile-social-panel[data-section-panel="perfil-social"] .profile-social-avatar-wrap,
  .profile-social-panel[data-section-panel="perfil-social"] .profile-social-avatar {
    width: 150px;
    height: 150px;
  }

  .profile-social-panel[data-section-panel="perfil-social"] #profile-social-title {
    font-size: 30px;
  }

  .profile-social-panel[data-section-panel="perfil-social"] .profile-social-location,
  .profile-social-panel[data-section-panel="perfil-social"] .profile-social-hero-badges {
    justify-content: center;
  }

  .profile-social-panel[data-section-panel="perfil-social"] .profile-social-side {
    margin-top: 16px;
  }

  .profile-social-panel[data-section-panel="perfil-social"] .profile-social-about,
  .profile-social-panel[data-section-panel="perfil-social"] .profile-social-objectives {
    padding: 20px;
  }
}

@media (max-width: 520px) {
  .profile-social-panel[data-section-panel="perfil-social"] .profile-social-about-facts {
    grid-template-columns: 1fr;
  }
}
/* Confirmacao critica: fica acima de fullscreen, menus, players e overlays. */
.confirm-modal {
  z-index: 2147483000 !important;
}

.confirm-modal-backdrop {
  z-index: 1 !important;
}

.confirm-modal-card {
  position: relative;
  z-index: 2 !important;
}