.unified-selector{background:var(--surface-2);border-radius:var(--border-radius-lg);border:1px solid var(--border-color);width:100%;max-width:none;margin-bottom:.5rem;padding:.75rem;position:relative}.unified-selector-content{width:100%;max-width:800px;margin:0 auto}.mode-selector{margin-bottom:.8rem}.selector-title{color:var(--text-primary);text-align:center;margin-bottom:.5rem;font-size:1.2rem;font-weight:600}.mode-buttons{justify-content:center;gap:.5rem;display:flex}.mode-button{border:1px solid var(--border-color);background:var(--surface-2);color:var(--text-secondary);border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-fast);padding:.5rem 1rem;font-weight:600}.mode-button:hover{background:var(--surface-3);color:var(--text-primary)}.mode-button.active{background:var(--surface-3);color:var(--text-primary);border-color:var(--accent-primary)}.selection-controls{flex-direction:column;align-items:center;gap:.75rem;display:flex}.toggle-and-root-row{flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:.25rem;min-height:56px;display:flex}.notation-selection{flex-direction:column;align-items:center;gap:.5rem;height:auto;margin:0;padding:0;display:flex}.notation-selection label{font-weight:var(--font-weight-medium);color:var(--text-primary);white-space:nowrap;font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.5px;margin-bottom:0}.root-selection{flex-direction:column;align-items:center;gap:.5rem;height:auto;margin:0;padding:0;display:flex}.root-selection label{color:var(--text-primary);white-space:nowrap;text-transform:uppercase;letter-spacing:.5px;margin-bottom:0;font-size:.9rem;font-weight:500}.chord-type-selection-inline{flex-direction:column;align-items:center;gap:.5rem;height:auto;margin:0;padding:0;display:flex}.chord-type-selection-inline label{color:var(--text-primary);white-space:nowrap;text-transform:uppercase;letter-spacing:.5px;margin-bottom:0;font-size:.9rem;font-weight:500}.scale-type-selection-inline{flex-direction:column;align-items:center;gap:.5rem;height:auto;display:flex}.scale-type-selection-inline label{color:var(--text-primary);white-space:nowrap;text-transform:uppercase;letter-spacing:.5px;font-size:.9rem;font-weight:500}:root{--dropdown-height:var(--control-md);--dropdown-root-width:84px;--dropdown-type-width:140px;--dropdown-border:1px solid #ffffff1f;--dropdown-background:#ffffff08;--dropdown-background-hover:#ffffff0f;--dropdown-border-hover:#ffffff2e}.unified-selector .root-selection .root-note-dropdown{width:var(--dropdown-root-width);margin:0;padding:0}.unified-selector .chord-type-selection-inline .chord-type-dropdown,.unified-selector .scale-type-selection-inline .scale-type-dropdown{width:var(--dropdown-type-width);margin:0;padding:0}.unified-selector .toggle-and-root-row .notation-toggle{height:var(--dropdown-height);box-sizing:border-box;margin:0;padding:0}.unified-selector .toggle-and-root-row .notation-toggle .notation-toggle-button{padding:var(--input-padding)}.unified-selector .root-selection .root-note-trigger{width:var(--dropdown-root-width);min-width:60px}.unified-selector .chord-type-selection-inline .chord-type-trigger,.unified-selector .scale-type-selection-inline .scale-type-trigger{width:var(--dropdown-type-width);min-width:100px}.chord-type-selection,.scale-type-selection{z-index:var(--z-sidebar);flex-direction:column;align-items:center;gap:.75rem;display:flex;position:relative}.unified-selector .chord-type-grid,.unified-selector .scale-type-grid{max-height:calc(100vh - 120px)}@media (max-width:768px){.unified-selector .chord-type-grid,.unified-selector .scale-type-grid{max-height:calc(100vh - var(--control-xl))}}.chord-type-selection label,.scale-type-selection label{color:var(--text-primary);font-weight:500}.chord-notes-display{border-top:1px solid var(--border-color);flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;width:100%;margin-top:.75rem;padding-top:.75rem;display:flex}.notes-label{color:var(--text-secondary);font-size:1.1rem;font-weight:500}.notes-container{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.note-item{flex-direction:column;align-items:center;gap:.125rem;display:flex}.note-badge{background:var(--color-overlay-medium);color:var(--text-primary);border-radius:var(--border-radius-sm);font-size:var(--font-size-md);border:1px solid var(--border-color);padding:.35rem .6rem;font-weight:600}.note-roman{color:var(--text-secondary);font-size:var(--font-size-xs);font-weight:var(--font-weight-normal)}@media (max-width:768px){.unified-selector{padding:.625rem}.selection-controls{gap:.5rem}.toggle-and-root-row{flex-flow:row;justify-content:center;align-items:center;gap:.375rem;min-height:48px;margin-bottom:.5rem}.notation-selection,.root-selection,.chord-type-selection-inline,.scale-type-selection-inline{flex:none;justify-content:center;width:auto;max-width:none;margin-top:0;overflow:visible}.notation-selection .notation-toggle{width:auto;min-width:70px}.unified-selector .root-selection .root-note-trigger{width:var(--dropdown-root-width);min-width:var(--dropdown-root-width)}.chord-type-selection-inline .chord-type-dropdown,.scale-type-selection-inline .scale-type-dropdown{max-width:none;overflow:visible}.unified-selector .chord-type-selection-inline .chord-type-trigger,.unified-selector .scale-type-selection-inline .scale-type-trigger{width:min(140px,100vw - 200px);min-width:100px}.mode-selector{margin-bottom:.5rem}.mode-buttons{flex-direction:column;align-items:center;gap:.375rem}.mode-button{width:100%;max-width:280px;padding:.625rem 1.25rem}.chord-type-selection,.scale-type-selection{width:100%;max-width:400px}}@media (max-width:400px){.unified-selector{padding:.5rem}.toggle-and-root-row{flex-wrap:wrap;justify-content:center;gap:.375rem;margin-bottom:.375rem}.chord-type-selection-inline,.scale-type-selection-inline{flex:100%;width:100%;margin-top:.375rem}.unified-selector .chord-type-selection-inline .chord-type-trigger,.unified-selector .scale-type-selection-inline .scale-type-trigger{width:100%;min-width:unset;max-width:260px}.chord-type-grid.compact{width:min(95vw,260px)}.notation-selection .notation-toggle{min-width:60px}.mode-button{max-width:260px;padding:.5rem 1rem}}