.chord-selection{background:var(--bg-secondary);border-radius:var(--border-radius-xl);padding:var(--spacing-lg);margin-bottom:var(--spacing-md);border:1px solid var(--border-color);box-shadow:var(--shadow-lg);overflow:visible}.chord-selection h2{color:var(--text-primary);font-size:var(--font-size-5xl);font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-xl);text-align:center}.selection-controls{gap:var(--spacing-md);flex-wrap:wrap;justify-content:center;display:flex;overflow:visible}.root-selection{gap:var(--spacing-sm);min-width:var(--dropdown-root-width);flex-direction:column;display:flex;overflow:visible}.chord-type-selection,.scale-type-selection{gap:var(--spacing-sm);flex-direction:column;min-width:240px;display:flex;overflow:visible}.notation-toggle-section{gap:var(--spacing-sm);min-width:var(--dropdown-type-width);flex-direction:column;display:flex;overflow:visible}.root-selection label,.chord-type-selection label,.scale-type-selection label,.notation-toggle-section label{color:var(--text-secondary);font-weight:var(--font-weight-medium);font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--spacing-xs)}.root-note-dropdown{width:100%;margin:0;padding:0;position:relative}.root-note-trigger{width:var(--dropdown-root-width);-webkit-user-select:none;user-select:none;min-width:60px;height:var(--dropdown-height);padding:var(--input-padding);border:var(--dropdown-border);border-radius:var(--border-radius-lg);background:var(--dropdown-background);color:var(--text-primary);box-sizing:border-box;transition:var(--transition-fast);cursor:pointer;justify-content:center;align-items:center;gap:8px;display:inline-flex}.root-note-trigger:hover{background:var(--dropdown-background-hover);border-color:var(--dropdown-border-hover)}.selected-root-note{flex:1}.root-note-grid{top:calc(100% + var(--spacing-sm));z-index:1000;padding:var(--spacing-lg);box-sizing:border-box;width:260px;min-width:260px;position:absolute;left:50%;transform:translate(-50%)}.root-note-dropdown .dropdown-menu.root-note-grid{padding:var(--spacing-lg)}.root-note-header{margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;display:flex}.root-note-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--text-primary)}.root-note-notation-toggle{transform:scale(.85)}.root-note-buttons{gap:var(--spacing-sm);grid-template-columns:repeat(4,1fr);display:grid}.root-note-button{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--border-radius-md);padding:var(--spacing-md)var(--spacing-sm);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);cursor:pointer;transition:var(--transition-fast);white-space:nowrap;text-align:center;justify-content:center;align-items:center;min-height:44px;display:flex}.root-note-button:hover{background:var(--bg-primary);border-color:var(--accent-primary);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.root-note-button.selected{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff;font-weight:var(--font-weight-semibold);box-shadow:0 2px 8px rgba(var(--accent-primary-rgb),.3)}.root-note-button.selected:hover{background:var(--accent-secondary);border-color:var(--accent-secondary);transform:translateY(-1px)}.chord-type-dropdown{width:100%;margin:0;padding:0;position:relative}.chord-type-trigger{height:var(--dropdown-height);width:var(--dropdown-type-width);min-width:100px;padding:var(--input-padding);border:var(--dropdown-border);border-radius:var(--border-radius-lg);background:var(--dropdown-background);color:var(--text-primary);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);transition:var(--transition-fast);cursor:pointer;box-sizing:border-box;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;display:flex}.chord-type-trigger:hover{background:var(--dropdown-background-hover);border-color:var(--dropdown-border-hover)}.selected-chord-type{flex:1}.chord-type-grid.compact{top:calc(100% + var(--spacing-sm));z-index:var(--z-dropdown);padding:var(--spacing-lg);box-sizing:border-box;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;gap:6px;width:400px;max-width:90vw;max-height:calc(100vh - 420px);display:flex;position:absolute;left:50%;overflow:hidden auto;transform:translate(-50%)}.chord-type-grid .chord-name-hover-display,.chord-name-hover-display{width:100%;margin-bottom:var(--spacing-md);padding:var(--spacing-sm)var(--spacing-md);color:#fff;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);text-align:center;border-radius:var(--border-radius-md);background:#2a2a4a;border:1px solid #404066;flex-shrink:0;order:-1;transition:all .2s;box-shadow:0 1px 3px #0000004d}.chord-type-grid.compact .chord-name-hover-display{color:#fff;background:#2a2a4a;border:1px solid #404066;box-shadow:0 1px 3px #0000004d}@media (min-width:500px){.chord-type-grid.compact{width:480px}}@media (min-width:700px){.chord-type-grid.compact{width:560px}}@media (min-width:900px){.chord-type-grid.compact{width:640px}}.chord-category{background:var(--bg-tertiary);border-radius:var(--border-radius-lg);padding:var(--spacing-lg);border:1px solid var(--border-color);min-width:0;overflow:visible}.category-title{color:var(--text-secondary);font-size:.85rem;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--border-color)}.chord-buttons{gap:var(--spacing-sm);flex-wrap:wrap;display:flex;overflow:visible}.chord-button{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);padding:6px var(--spacing-xs);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);cursor:pointer;white-space:nowrap;min-width:var(--chord-button-min-width);min-height:var(--chord-button-min-height);text-align:center;text-overflow:ellipsis;flex-shrink:0;justify-content:center;align-items:center;transition:all .2s;display:flex;overflow:hidden}.chord-type-grid.compact .chord-button{width:auto;min-width:auto;min-height:var(--control-sm);border-radius:16px;flex-shrink:0;padding:8px 14px;font-size:.8rem;font-weight:500;transition:all .2s;box-shadow:0 1px 3px #0000001a}.chord-type-grid.compact .chord-button:hover{box-shadow:0 2px 8px rgba(var(--accent-primary-rgb),.15);transform:translateY(-1px)}.chord-type-grid.compact .chord-button.selected{box-shadow:0 2px 8px rgba(var(--accent-primary-rgb),.3);transform:none}.chord-button:hover{background:var(--bg-primary);border-color:var(--accent-primary);box-shadow:0 2px 8px rgba(var(--accent-primary-rgb),.2);transform:translateY(-1px)}.chord-button.selected{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff;box-shadow:0 2px 8px rgba(var(--accent-primary-rgb),.3);font-weight:600}.chord-button.selected:hover{background:var(--accent-secondary);border-color:var(--accent-secondary);transform:translateY(-1px)}@media (max-width:768px){.selection-controls{flex-direction:column;align-items:center}.root-selection,.chord-type-selection,.scale-type-selection{width:100%;max-width:320px;overflow:visible}.chord-type-dropdown,.scale-type-dropdown{overflow:visible}.chord-type-grid.compact{gap:5px;width:min(85vw,300px);max-height:calc(100vh - 450px);padding:12px}.chord-type-grid.compact .chord-button{min-height:var(--control-sm);border-radius:14px;padding:6px 10px;font-size:.75rem}.chord-name-hover-display{margin-bottom:10px;padding:6px 10px;font-size:.8rem}.chord-type-grid,.scale-type-grid{white-space:normal;grid-template-columns:1fr;width:min(90vw,350px);min-width:300px;max-height:calc(100vh - 450px);position:absolute;left:50%;overflow-x:hidden;transform:translate(-50%)}.chord-selection .root-note-dropdown .root-note-grid{z-index:1000;box-sizing:border-box;width:300px;min-width:280px;margin-left:-40px;margin-right:0;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%)}.chord-category,.scale-category{padding:12px}.chord-buttons,.scale-buttons{gap:6px}.chord-button,.scale-button{min-width:50px;padding:6px 10px;font-size:.8rem}.root-note-buttons{grid-template-columns:repeat(3,1fr);gap:6px}.root-note-button{min-height:var(--control-lg);padding:10px 6px;font-size:.9rem}.chord-display h2{font-size:1.5rem}.chord-notes ul{gap:12px}.chord-notes li{padding:10px 16px;font-size:1rem}}