/* ============================================================
   REPERTÓRIO PORTELA SP — Design System v2
   Fonte: DM Sans + DM Mono (Google Fonts)
   Compatível com todas as classes PHP existentes
   ============================================================ */

   @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

   /* ============================================================
      TOKENS — CSS Custom Properties
      ============================================================ */
   :root {
     /* Cores principais */
     --azul:          #1a3d8f;
     --azul-hover:    #15317a;
     --azul-suave:    #eef2ff;
     --azul-borda:    #c7d2f6;
   
     --verde:         #2d7a4f;
     --verde-suave:   #eafaf2;
     --verde-borda:   #9fdec1;
   
     --amarelo:       #c47a1a;
     --amarelo-suave: #fef5e5;
     --amarelo-borda: #f5c87a;
   
     --vermelho:      #991f1f;
     --vermelho-suave:#fce8e8;
     --vermelho-borda:#f5c0c0;
   
     /* Superfícies */
     --bg-page:       #f4f5f7;
     --bg-card:       #ffffff;
     --bg-secondary:  #f8f9fb;
   
     /* Texto */
     --text1:         #111827;
     --text2:         #4b5563;
     --text3:         #9ca3af;
   
     /* Bordas */
     --border:        rgba(0, 0, 0, 0.08);
     --border-md:     rgba(0, 0, 0, 0.14);
   
     /* Navbar */
     --navbar-h:      56px;
   
     /* Tipografia */
     --font-sans:     'DM Sans', system-ui, -apple-system, sans-serif;
     --font-mono:     'DM Mono', 'Courier New', monospace;
   
     /* Raios */
     --r-sm:   6px;
     --r-md:   8px;
     --r-lg:   12px;
     --r-xl:   16px;
   
     /* Sombras */
     --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
     --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
   
     /* Transições */
     --t-fast: 120ms ease;
     --t-mid:  200ms ease;
   }
   
   /* ============================================================
      RESET & BASE
      ============================================================ */
   *, *::before, *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
   
   html {
     -webkit-text-size-adjust: 100%;
     touch-action: manipulation;
   }
   
   body {
     font-family: var(--font-sans);
     font-size: 14px;
     line-height: 1.6;
     color: var(--text1);
     background: var(--bg-page);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   
   a {
     color: var(--azul);
     text-decoration: none;
   }
   a:hover { text-decoration: underline; }
   
   h1, h2, h3, h4 {
     font-weight: 600;
     line-height: 1.3;
     color: var(--text1);
   }
   
   /* ============================================================
      LAYOUT PRINCIPAL
      .container = classe usada pelo header.php
      .main-content = alias mantido por compatibilidade
      ============================================================ */
   .container,
   .main-content {
     max-width: 1100px;
     margin: 0 auto;
     padding: calc(var(--navbar-h) + 24px) 20px 48px;
   }
   
   /* ============================================================
      NAVBAR
      ============================================================ */
   .navbar {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 100;
     height: var(--navbar-h);
     background: var(--bg-card);
     border-bottom: 1px solid var(--border);
     display: flex;
     align-items: center;
     padding: 0 20px;
     gap: 4px;
   }
   
   .navbar-brand {
     display: flex;
     align-items: center;
     gap: 10px;
     text-decoration: none;
     margin-right: 16px;
     color: var(--text1);
     flex-shrink: 0;
   }
   .navbar-brand:hover { text-decoration: none; }
   
   .navbar-logo {
     width: 32px;
     height: 32px;
     background: var(--azul);
     border-radius: var(--r-md);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 16px;
     flex-shrink: 0;
   }
   
   .navbar-brand-text {
     font-size: 14px;
     font-weight: 600;
     color: var(--text1);
   }
   
   .navbar-menu {
     display: flex;
     align-items: center;
     gap: 2px;
     flex: 1;
   }
   
   .navbar-menu a {
     display: flex;
     align-items: center;
     gap: 6px;
     padding: 6px 10px;
     border-radius: var(--r-md);
     font-size: 13px;
     font-weight: 400;
     color: var(--text2);
     text-decoration: none;
     transition: background var(--t-fast), color var(--t-fast);
     white-space: nowrap;
   }
   .navbar-menu a:hover {
     background: var(--bg-secondary);
     color: var(--text1);
     text-decoration: none;
   }
   .navbar-menu a.ativo {
     background: var(--azul-suave);
     color: var(--azul);
     font-weight: 500;
   }
   
   .navbar-right {
     display: flex;
     align-items: center;
     gap: 4px;
     margin-left: auto;
   }
   
   .icon-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 36px;
     height: 36px;
     border-radius: var(--r-md);
     border: 1px solid var(--border);
     color: var(--text2);
     cursor: pointer;
     transition: background var(--t-fast), color var(--t-fast);
     text-decoration: none;
     background: transparent;
     font-size: 18px;
   }
   .icon-btn:hover {
     background: var(--bg-secondary);
     color: var(--text1);
     text-decoration: none;
   }
   
   .navbar-toggle {
     display: none;
     background: none;
     border: 1px solid var(--border);
     border-radius: var(--r-md);
     width: 36px;
     height: 36px;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     color: var(--text2);
     font-size: 18px;
   }
   
   /* ============================================================
      PÁGINA HEADER
      ============================================================ */
   .page-header {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 16px;
     margin-bottom: 24px;
     flex-wrap: wrap;
   }
   
   .page-header h2 {
     font-size: 22px;
     font-weight: 600;
     color: var(--text1);
   }
   
   .page-header p {
     font-size: 13px;
     color: var(--text2);
     margin-top: 2px;
   }
   
   .page-header-acoes {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
     align-items: center;
   }
   
   .section-title {
     font-size: 12px;
     font-weight: 600;
     letter-spacing: 0.07em;
     text-transform: uppercase;
     color: var(--text3);
     margin-bottom: 12px;
     margin-top: 28px;
   }
   
   /* ============================================================
      BOTÕES
      ============================================================ */
   .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     padding: 8px 16px;
     border-radius: var(--r-md);
     font-family: var(--font-sans);
     font-size: 13px;
     font-weight: 500;
     line-height: 1;
     cursor: pointer;
     border: 1px solid transparent;
     text-decoration: none;
     transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
     white-space: nowrap;
     -webkit-tap-highlight-color: transparent;
     touch-action: manipulation;
   }
   .btn:hover { text-decoration: none; }
   .btn:active { opacity: 0.85; transform: scale(0.98); }
   .btn:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
   
   .btn-primary {
     background: var(--azul);
     color: #fff;
     border-color: var(--azul);
   }
   .btn-primary:hover {
     background: var(--azul-hover);
     border-color: var(--azul-hover);
     color: #fff;
   }
   
   .btn-outline {
     background: var(--bg-card);
     color: var(--text1);
     border-color: var(--border-md);
   }
   .btn-outline:hover {
     background: var(--bg-secondary);
     color: var(--text1);
   }
   
   .btn-danger {
     background: var(--vermelho-suave);
     color: var(--vermelho);
     border-color: var(--vermelho-borda);
   }
   .btn-danger:hover {
     background: #f9d4d4;
     color: var(--vermelho);
   }
   
   .btn-block { width: 100%; }
   
   .btn-lg { padding: 11px 20px; font-size: 14px; border-radius: var(--r-lg); }
   .btn-sm { padding: 5px 10px; font-size: 12px; border-radius: var(--r-sm); }
   .btn-xs { padding: 3px 8px; font-size: 11px; border-radius: var(--r-sm); }
   
   /* ============================================================
      CARDS
      ============================================================ */
   .card {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--r-lg);
   }
   
   .card-body {
     padding: 20px;
   }
   
   .card-stat {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--r-lg);
     padding: 20px;
     position: relative;
     overflow: hidden;
   }
   
   .card-stat::before {
     content: '';
     position: absolute;
     top: 0; left: 0; right: 0;
     height: 3px;
     border-radius: var(--r-lg) var(--r-lg) 0 0;
     background: var(--azul);
   }
   
   .card-stat.green::before  { background: var(--verde); }
   .card-stat.amber::before  { background: var(--amarelo); }
   
   .card-icon {
     font-size: 20px;
     color: var(--text3);
     margin-bottom: 10px;
   }
   
   .card-num {
     font-size: 32px;
     font-weight: 600;
     line-height: 1;
     color: var(--text1);
     margin-bottom: 4px;
   }
   
   .card-label {
     font-size: 12px;
     color: var(--text2);
   }
   
   .card-trend {
     margin-top: 10px;
     font-size: 12px;
     color: var(--text3);
     display: flex;
     align-items: center;
     gap: 4px;
   }
   
   .cards-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
     gap: 12px;
   }
   
   /* ============================================================
      TABELA
      ============================================================ */
   .table {
     width: 100%;
     border-collapse: collapse;
     font-size: 13px;
   }
   
   .table th {
     font-size: 11px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.06em;
     color: var(--text3);
     padding: 10px 14px;
     border-bottom: 1px solid var(--border);
     text-align: left;
     background: var(--bg-secondary);
   }
   
   .table th:first-child { border-radius: var(--r-md) 0 0 0; }
   .table th:last-child  { border-radius: 0 var(--r-md) 0 0; }
   
   .table td {
     padding: 11px 14px;
     border-bottom: 1px solid var(--border);
     color: var(--text1);
     vertical-align: middle;
   }
   
   .table tbody tr:last-child td { border-bottom: none; }
   
   .table tbody tr:hover td {
     background: var(--bg-secondary);
   }
   
   .table a {
     color: var(--text1);
     font-weight: 500;
   }
   .table a:hover { color: var(--azul); text-decoration: none; }
   
   .num-col {
     font-family: var(--font-mono);
     font-size: 12px;
     color: var(--text3);
     width: 50px;
   }
   
   .acoes-col {
     width: 1%;
     white-space: nowrap;
   }
   
   /* ============================================================
      FORMULÁRIOS
      ============================================================ */
   .form-group {
     margin-bottom: 16px;
   }
   
   .form-group label {
     display: block;
     font-size: 12px;
     font-weight: 500;
     color: var(--text2);
     margin-bottom: 6px;
   }
   
   .form-group input,
   .form-group select,
   .form-group textarea,
   .form-control {
     width: 100%;
     padding: 8px 12px;
     background: var(--bg-card);
     border: 1px solid var(--border-md);
     border-radius: var(--r-md);
     font-family: var(--font-sans);
     font-size: 14px;
     color: var(--text1);
     transition: border-color var(--t-fast), box-shadow var(--t-fast);
     appearance: none;
     -webkit-appearance: none;
   }
   
   .form-group input:focus,
   .form-group select:focus,
   .form-group textarea:focus,
   .form-control:focus {
     outline: none;
     border-color: var(--azul);
     box-shadow: 0 0 0 3px rgba(26, 61, 143, 0.12);
   }
   
   .form-group input::placeholder,
   .form-group textarea::placeholder { color: var(--text3); }
   
   .form-hint {
     font-size: 12px;
     color: var(--text3);
     margin-top: 4px;
     margin-bottom: 8px;
   }
   
   .form-hint code {
     font-family: var(--font-mono);
     font-size: 11px;
     background: var(--bg-secondary);
     border: 1px solid var(--border);
     border-radius: 4px;
     padding: 1px 5px;
     color: var(--azul);
   }
   
   .form-actions {
     display: flex;
     gap: 10px;
     align-items: center;
     margin-top: 24px;
     flex-wrap: wrap;
   }
   
   .form-grid-2 {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px;
   }
   
   .form-grid-3 {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 16px;
   }
   
   /* ============================================================
      ALERTAS
      ============================================================ */
   .alert {
     padding: 12px 16px;
     border-radius: var(--r-md);
     font-size: 13px;
     line-height: 1.5;
     display: flex;
     align-items: flex-start;
     gap: 8px;
     margin-bottom: 16px;
   }
   
   .alert-erro {
     background: var(--vermelho-suave);
     color: #7a1f1f;
     border: 1px solid var(--vermelho-borda);
   }
   
   .alert-sucesso {
     background: var(--verde-suave);
     color: #1b5e36;
     border: 1px solid var(--verde-borda);
   }
   
   .alert ul {
     margin: 0;
     padding-left: 16px;
   }
   
   /* ============================================================
      BADGES
      ============================================================ */
   .badge-tom {
     display: inline-block;
     font-family: var(--font-mono);
     font-size: 11px;
     font-weight: 500;
     padding: 2px 8px;
     background: var(--azul-suave);
     color: var(--azul);
     border: 1px solid var(--azul-borda);
     border-radius: var(--r-sm);
     letter-spacing: 0.02em;
   }
   
   .badge-ativo {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     font-size: 11px;
     font-weight: 500;
     padding: 2px 8px;
     background: var(--verde-suave);
     color: var(--verde);
     border: 1px solid var(--verde-borda);
     border-radius: 20px;
   }
   
   .badge-pendente {
     display: inline-flex;
     align-items: center;
     font-size: 11px;
     font-weight: 500;
     padding: 2px 8px;
     background: var(--amarelo-suave);
     color: var(--amarelo);
     border: 1px solid var(--amarelo-borda);
     border-radius: 20px;
   }
   
   .badge-oculto {
     display: inline-flex;
     align-items: center;
     font-size: 11px;
     font-weight: 500;
     padding: 2px 8px;
     background: var(--bg-secondary);
     color: var(--text3);
     border: 1px solid var(--border);
     border-radius: 20px;
   }
   
   .badge-perfil {
     display: inline-flex;
     align-items: center;
     font-size: 11px;
     font-weight: 500;
     padding: 2px 8px;
     border-radius: 20px;
     background: var(--bg-secondary);
     color: var(--text2);
     border: 1px solid var(--border);
   }
   
   .badge-coordenador {
     background: var(--azul-suave);
     color: var(--azul);
     border-color: var(--azul-borda);
   }
   
   /* ============================================================
      TEXT UTILITIES
      ============================================================ */
   .text-muted { color: var(--text3); font-size: 13px; }
   
   /* ============================================================
      LOGIN PAGE
      ============================================================ */
   .login-page {
     min-height: 100vh;
     background: var(--bg-page);
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 20px;
   }
   
   .login-container {
     width: 100%;
     max-width: 380px;
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--r-xl);
     padding: 32px 28px;
     box-shadow: var(--shadow-md);
   }
   
   .login-logo {
     text-align: center;
     margin-bottom: 28px;
   }
   
   .login-logo-icon {
     width: 52px;
     height: 52px;
     background: var(--azul);
     border-radius: 14px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 24px;
     margin-bottom: 14px;
   }
   
   .login-logo h1 {
     font-size: 18px;
     font-weight: 600;
     color: var(--text1);
     margin-bottom: 4px;
   }
   
   .login-logo p {
     font-size: 12px;
     color: var(--text3);
     line-height: 1.4;
   }
   
   .login-links {
     text-align: center;
     margin-top: 16px;
     font-size: 12px;
   }
   
   .login-links a {
     color: var(--text2);
     display: inline-flex;
     align-items: center;
     gap: 4px;
   }
   .login-links a:hover { color: var(--azul); }
   
   /* Fundo antigo (compatibilidade) */
   .bg-dark { background: var(--bg-page) !important; }
   
   /* ============================================================
      EVENTOS
      ============================================================ */
   .eventos-lista {
     display: flex;
     flex-direction: column;
     gap: 8px;
   }
   
   .card-evento {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--r-lg);
     padding: 14px 18px;
     display: flex;
     align-items: center;
     gap: 14px;
     transition: border-color var(--t-fast), box-shadow var(--t-fast);
     cursor: pointer;
   }
   
   .card-evento:hover {
     border-color: var(--border-md);
     box-shadow: var(--shadow-sm);
   }
   
   .card-oculto { opacity: 0.55; }
   
   .evento-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--azul);
     flex-shrink: 0;
   }
   
   .evento-info { flex: 1; min-width: 0; }
   
   .evento-nome {
     font-size: 14px;
     font-weight: 500;
     color: var(--text1);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   
   .evento-meta {
     display: flex;
     gap: 12px;
     margin-top: 4px;
     font-size: 12px;
     color: var(--text2);
     flex-wrap: wrap;
   }
   
   .evento-meta span {
     display: flex;
     align-items: center;
     gap: 4px;
   }
   
   .evento-acoes {
     display: flex;
     gap: 6px;
     align-items: center;
     flex-shrink: 0;
   }
   
   /* Lista de eventos no painel */
   .lista-eventos {
     display: flex;
     flex-direction: column;
     gap: 8px;
   }
   
   /* ============================================================
      FILTROS
      ============================================================ */
   .filtros-form {
     margin-bottom: 20px;
   }
   
   .filtros-grid {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     align-items: center;
   }
   
   .filtros-grid .form-control {
     width: auto;
     flex: 1;
     min-width: 160px;
   }
   
   .filtros-grid .btn { flex-shrink: 0; }
   
   /* ============================================================
      MÚSICAS
      ============================================================ */
   .musicas-lista {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--r-lg);
     overflow: hidden;
   }
   
   /* ============================================================
      PÁGINA DE MÚSICA (musica-ver.php)
      ============================================================ */
   .musica-toolbar {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 10px 16px;
     background: var(--bg-card);
     border-bottom: 1px solid var(--border);
     flex-wrap: wrap;
     position: sticky;
     top: var(--navbar-h);
     z-index: 50;
   }
   
   .toolbar-left {
     display: flex;
     align-items: center;
     gap: 8px;
   }
   
   .toolbar-center {
     flex: 1;
     min-width: 0;
   }
   
   .toolbar-center .musica-titulo {
     font-size: 15px;
     font-weight: 600;
     color: var(--text1);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   
   .musica-comp {
     font-size: 11px;
     color: var(--text3);
     display: block;
   }
   
   .toolbar-right {
     display: flex;
     align-items: center;
     gap: 6px;
     flex-wrap: wrap;
   }
   
   .musica-numero {
     font-family: var(--font-mono);
     font-size: 12px;
     color: var(--text3);
     background: var(--bg-secondary);
     border: 1px solid var(--border);
     border-radius: var(--r-sm);
     padding: 2px 8px;
   }
   
   .tom-control {
     display: flex;
     align-items: center;
     gap: 6px;
     font-size: 12px;
     color: var(--text2);
   }
   
   .select-tom {
     font-family: var(--font-mono);
     font-size: 12px;
     font-weight: 500;
     padding: 4px 8px;
     border: 1px solid var(--azul-borda);
     border-radius: var(--r-sm);
     background: var(--azul-suave);
     color: var(--azul);
     cursor: pointer;
     appearance: none;
     -webkit-appearance: none;
   }
   
   .musica-conteudo {
     flex: 1;
     overflow-y: auto;
     padding: 24px 20px;
     background: var(--bg-page);
   }
   
   .musica-conteudo-inner {
     max-width: 860px;
     margin: 0 auto;
   }
   
   /* cifra-render: container raiz gerado pelo cifras.js */
   .cifra-render {
     font-family: var(--font-mono);
     font-size: var(--cifra-font, 1rem);
     color: var(--text1);
     word-break: break-word;
   }
   
   /* cifra-par: bloco de uma estrofe (div wrapper por par acorde+letra) */
   .cifra-par {
     display: block;
     margin-bottom: 2px;
   }
   
   /* cifra-acordes: linha de acordes — span com espaços + spans de acorde */
   .cifra-acordes {
     display: block;
     font-family: var(--font-mono);
     font-size: 0.82em;
     font-weight: 600;
     color: var(--azul);
     line-height: 1.5;
     white-space: pre;
     letter-spacing: 0.01em;
   }
   
   /* cifra-acorde: span individual de cada acorde (clicável) */
   .cifra-acorde {
     color: var(--azul);
     font-weight: 600;
     cursor: pointer;
     border-radius: 3px;
     padding: 0 1px;
     transition: background var(--t-fast), color var(--t-fast);
   }
   .cifra-acorde:hover {
     background: var(--azul-suave);
     color: var(--azul-hover);
   }
   
   /* cifra-letra: linha de letra da música */
   .cifra-letra {
     display: block;
     font-family: var(--font-sans);
     font-size: 1em;
     font-weight: 400;
     color: var(--text1);
     line-height: 1.55;
     white-space: pre-wrap;
   }
   
   /* Modo duas colunas */
   .cifra-duas-colunas .cifra-render {
     columns: 2;
     column-gap: 2.5rem;
   }
   .cifra-duas-colunas .cifra-par {
     break-inside: avoid;
   }
   
   .tp-controle {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 8px 16px;
     background: var(--bg-secondary);
     border-bottom: 1px solid var(--border);
     font-size: 12px;
     color: var(--text2);
   }
   
   .tp-controle input[type="range"] {
     flex: 1;
     max-width: 200px;
   }
   
   .musica-nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px 16px;
     background: var(--bg-card);
     border-top: 1px solid var(--border);
   }
   
   .btn-nav {
     max-width: 200px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
   
   .diagramas-rodape {
     margin-top: 24px;
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
   }
   
   /* ============================================================
      ANOTAÇÃO
      ============================================================ */
   .painel-anotacao {
     background: var(--bg-card);
     border-top: 1px solid var(--border);
     padding: 14px 16px;
   }
   
   .anotacao-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 10px;
     font-size: 13px;
     font-weight: 500;
     color: var(--text1);
   }
   
   .btn-fechar {
     background: none;
     border: none;
     color: var(--text3);
     cursor: pointer;
     font-size: 18px;
     padding: 2px 6px;
     border-radius: var(--r-sm);
     line-height: 1;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   .btn-fechar:hover { color: var(--text1); background: var(--bg-secondary); }
   
   /* ============================================================
      REPERTÓRIO EDITOR
      ============================================================ */
   .repertorio-editor {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--r-lg);
     overflow: hidden;
   }
   
   .repertorio-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 14px 18px;
     border-bottom: 1px solid var(--border);
     background: var(--bg-secondary);
   }
   
   .repertorio-header h3 {
     font-size: 14px;
     font-weight: 600;
     color: var(--text1);
   }
   
   .repertorio-acoes {
     display: flex;
     gap: 6px;
     flex-wrap: wrap;
   }
   
   .lista-itens {
     padding: 8px;
     min-height: 80px;
   }
   
   .item-musica-link {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 11px 14px;
     border-radius: var(--r-md);
     color: var(--text1);
     text-decoration: none;
     transition: background var(--t-fast);
     border: 1px solid transparent;
   }
   
   .item-musica-link:hover {
     background: var(--azul-suave);
     border-color: var(--azul-borda);
     color: var(--text1);
     text-decoration: none;
   }
   
   .musica-num {
     font-family: var(--font-mono);
     font-size: 12px;
     color: var(--text3);
     background: var(--bg-secondary);
     border: 1px solid var(--border);
     border-radius: var(--r-sm);
     padding: 1px 6px;
     min-width: 30px;
     text-align: center;
     flex-shrink: 0;
   }
   
   .musica-nome {
     flex: 1;
     font-size: 14px;
     font-weight: 500;
   }
   
   .musica-comp-pequeno {
     font-size: 12px;
     color: var(--text3);
   }
   
   .bloco-secao {
     margin: 8px 0;
     border: 1px solid var(--border);
     border-radius: var(--r-md);
     overflow: hidden;
   }
   
   .bloco-titulo {
     font-size: 12px;
     font-weight: 600;
     letter-spacing: 0.05em;
     text-transform: uppercase;
     color: var(--text3);
     background: var(--bg-secondary);
     padding: 8px 14px;
     border-bottom: 1px solid var(--border);
   }
   
   .item-intervalo-view {
     padding: 8px 14px;
     font-size: 13px;
     color: var(--text3);
     text-align: center;
     border-top: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
     margin: 4px 0;
     background: var(--bg-secondary);
   }
   
   .item-comentario-view {
     padding: 10px 14px;
     font-size: 13px;
     color: var(--text2);
     border-left: 3px solid var(--amarelo);
     background: var(--amarelo-suave);
     border-radius: 0 var(--r-sm) var(--r-sm) 0;
     margin: 4px 0;
   }
   
   /* ============================================================
      MODAL
      ============================================================ */
   .modal {
     position: fixed;
     inset: 0;
     z-index: 200;
   }
   
   .modal-overlay {
     position: absolute;
     inset: 0;
     background: rgba(0,0,0,0.45);
   }
   
   .modal-box {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--r-xl);
     width: 90%;
     max-width: 520px;
     max-height: 80vh;
     display: flex;
     flex-direction: column;
     box-shadow: var(--shadow-md);
   }
   
   .modal-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 16px 20px;
     border-bottom: 1px solid var(--border);
   }
   
   .modal-header h3 {
     font-size: 15px;
     font-weight: 600;
   }
   
   .modal-body {
     padding: 16px 20px;
     overflow-y: auto;
   }
   
   .lista-busca-musicas {
     display: flex;
     flex-direction: column;
     gap: 4px;
   }
   
   /* ============================================================
      EDITOR DE MÚSICA
      ============================================================ */
   .editor-container {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px;
   }
   
   .editor-textarea {
     font-family: var(--font-mono);
     font-size: 13px;
     line-height: 1.7;
     resize: vertical;
     border: 1px solid var(--border-md);
     border-radius: var(--r-md);
     padding: 12px;
     background: var(--bg-card);
     color: var(--text1);
     width: 100%;
   }
   
   .editor-preview {
     background: var(--bg-secondary);
     border: 1px solid var(--border);
     border-radius: var(--r-md);
     padding: 12px 16px;
     overflow-y: auto;
     max-height: 500px;
   }
   
   .preview-label {
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 0.07em;
     text-transform: uppercase;
     color: var(--text3);
     margin-bottom: 12px;
   }
   
   /* ============================================================
      UPLOAD
      ============================================================ */
   .upload-area {
     border: 2px dashed var(--border-md);
     border-radius: var(--r-lg);
     padding: 24px;
     text-align: center;
     cursor: pointer;
     transition: border-color var(--t-fast), background var(--t-fast);
   }
   
   .upload-area:hover {
     border-color: var(--azul);
     background: var(--azul-suave);
   }
   
   .upload-placeholder {
     font-size: 13px;
     color: var(--text3);
   }
   
   #upload-status {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     font-size: 13px;
     color: var(--text2);
   }
   
   /* ============================================================
      ESTATÍSTICAS
      ============================================================ */
   /* Barra de progresso (reutiliza estilos inline do PHP,
      mas aqui normalizamos os elementos */
   [style*="background:#e0e0e0"] {
     background: var(--bg-secondary) !important;
     border-radius: 4px;
   }
   
   [style*="background:var(--azul)"] {
     border-radius: 4px;
   }
   
   /* ============================================================
      EVENTO VER (repertório de visualização)
      ============================================================ */
   .evento-repertorio {
     display: flex;
     flex-direction: column;
     gap: 4px;
     max-width: 780px;
   }
   
   /* ============================================================
      MODO NOTURNO
      ============================================================ */
   body.modo-noturno {
     --bg-page:      #111827;
     --bg-card:      #1f2937;
     --bg-secondary: #1a2332;
     --text1:        #f9fafb;
     --text2:        #9ca3af;
     --text3:        #6b7280;
     --border:       rgba(255,255,255,0.08);
     --border-md:    rgba(255,255,255,0.14);
     --azul-suave:   #1e2d4a;
     --azul-borda:   #2d4578;
   }
   
   /* ============================================================
      RESPONSIVO
      ============================================================ */
   @media (max-width: 768px) {
     .navbar-menu {
       display: none;
       position: fixed;
       top: var(--navbar-h);
       left: 0;
       right: 0;
       background: var(--bg-card);
       border-bottom: 1px solid var(--border);
       flex-direction: column;
       padding: 10px;
       gap: 2px;
       z-index: 99;
     }
   
     .navbar-menu.aberto { display: flex; }
     .navbar-menu a { padding: 10px 12px; font-size: 14px; }
     .navbar-toggle { display: flex; }
   
     .container,
     .main-content {
       padding: calc(var(--navbar-h) + 16px) 14px 32px;
     }
   
     .page-header {
       flex-direction: column;
       align-items: flex-start;
     }
   
     .form-grid-2,
     .form-grid-3 {
       grid-template-columns: 1fr;
     }
   
     .editor-container {
       grid-template-columns: 1fr;
     }
   
     .card-evento {
       flex-wrap: wrap;
     }
   
     .evento-acoes {
       width: 100%;
       justify-content: flex-end;
     }
   
     .musica-toolbar {
       gap: 6px;
     }
   
     .toolbar-center .musica-titulo {
       font-size: 14px;
     }
   
     .cards-grid {
       grid-template-columns: 1fr 1fr;
     }
   
     .filtros-grid {
       flex-direction: column;
       align-items: stretch;
     }
   
     .filtros-grid .form-control {
       width: 100%;
     }
   
     .modal-box {
       top: auto;
       bottom: 0;
       left: 0;
       right: 0;
       transform: none;
       width: 100%;
       max-width: 100%;
       border-radius: var(--r-xl) var(--r-xl) 0 0;
       max-height: 85vh;
     }
   }
   
   @media (max-width: 480px) {
     .cards-grid { grid-template-columns: 1fr; }
   
     .musica-toolbar {
       position: static;
     }
   
     .toolbar-right .btn-sm:not(:first-child):not(:last-child) {
       display: none;
     }
   
     .login-container {
       padding: 24px 20px;
     }
   }
   
   /* ============================================================
      FOOTER
      ============================================================ */
   .footer {
     text-align: center;
     font-size: 11px;
     color: var(--text3);
     padding: 20px;
     border-top: 1px solid var(--border);
     margin-top: 40px;
   }
   
   /* ============================================================
      PRINT
      ============================================================ */
   @media print {
     .navbar,
     .musica-toolbar,
     .musica-nav,
     .painel-anotacao,
     .tp-controle,
     .btn,
     .filtros-form { display: none !important; }
   
     body { background: white; font-size: 12px; }
     .main-content { padding: 0; max-width: 100%; }
     .card { border: 1px solid #ddd; box-shadow: none; }
     .cifra-render { font-size: 12px; }
   }
   
   /* ============================================================
      REDUCED MOTION
      ============================================================ */
   @media (prefers-reduced-motion: reduce) {
     *, *::before, *::after {
       transition-duration: 0.01ms !important;
       animation-duration: 0.01ms !important;
     }
   }