:root {
     --primary: #000;
     --bg: #ffffff;
     --card-bg: #fff;
     --text-dim: #666;
 }

 body {
     font-family: 'Segoe UI', system-ui, sans-serif;
     background: var(--bg);
     margin: 0;
     padding: 10px;
     display: flex;
     flex-direction: column;
     align-items: center;
     color: #000;
 }

 /* Toolbar - Oculta na Impressão */
 .toolbar {
     background: #fff;
     padding: 20px;
     border: 1px solid #ddd;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
     gap: 15px;
     margin: 20px 0 40px;
     width: 100%;
     max-width: 1100px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
     border-radius: 12px;
     box-sizing: border-box;
 }

 .input-group {
     display: flex;
     flex-direction: column;
     gap: 5px;
 }

 label {
     font-size: 10px;
     font-weight: bold;
     color: #888;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 input {
     padding: 12px;
     border: 1px solid #ccc;
     border-radius: 8px;
     font-size: 14px;
     outline: none;
     transition: border 0.2s;
 }

 input:focus {
     border-color: var(--primary);
 }

 .btn-group {
     display: flex;
     gap: 10px;
     grid-column: 1 / -1;
     margin-top: 10px;
     flex-wrap: wrap;
 }

 button {
     flex: 1;
     min-width: 120px;
     padding: 14px;
     border: none;
     border-radius: 8px;
     background: var(--primary);
     color: white;
     cursor: pointer;
     font-weight: bold;
     font-size: 14px;
     transition: opacity 0.2s;
 }

 button:hover {
     opacity: 0.9;
 }

 /* Grid de Acordes */
 #chord-list {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
     width: 100%;
     max-width: 1200px;
     gap: 25px;
     margin-bottom: 50px;
 }

 .section-header {
     grid-column: 1 / -1;
     font-size: 26px;
     font-weight: 900;
     padding: 40px 0 10px 10px;
     border-bottom: 4px solid var(--primary);
     margin-top: 20px;
     text-transform: uppercase;
 }

 .card {
     background: var(--card-bg);
     border: 1px solid #eee;
     padding: 25px 15px;
     border-radius: 12px;
     display: flex;
     flex-direction: column;
     align-items: center;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
     page-break-inside: avoid;
 }

 .chord-title {
     font-size: 26px;
     font-weight: 800;
     margin-bottom: 4px;
     color: var(--primary);
 }

 .chord-notes {
     font-size: 13px;
     color: var(--text-dim);
     margin-bottom: 20px;
     font-weight: 500;
 }

 .hidden {
     display: none !important;
 }

 svg {
     width: 100%;
     height: auto;
     max-width: 340px;
     overflow: visible;
 }

 /* Regras de Impressão (PDF) */
 @media print {

     .toolbar,
     .btn-group {
         display: none !important;
     }

     body {
         padding: 0;
         background: white;
     }

     #chord-list {
         grid-template-columns: 1fr 1fr;
         /* Organiza em 2 colunas no PDF */
         gap: 20px;
     }

     .card {
         box-shadow: none;
         border: 1px solid #ddd;
     }

     .section-header {
         margin-top: 10px;
         padding-top: 20px;
         font-size: 22px;
     }
 }

 @media (max-width: 600px) {
     .section-header {
         font-size: 20px;
     }

     .toolbar {
         grid-template-columns: 1fr;
     }
 }