/* Shared selectors preserve the existing studio layout and brand colors. */
.picker-trigger{position:relative;display:flex;flex-direction:column;justify-content:center;gap:7px;width:100%;min-width:0;min-height:76px;border:1px solid #b9dfd8;border-radius:12px;background:#fff;padding:12px 30px 12px 12px;text-align:left;cursor:pointer}
.picker-title{font-size:18px;font-weight:750;line-height:1.4;color:#183d58;word-break:keep-all}
.picker-description{font-size:12px;font-weight:400;line-height:1.65;color:#397e83;white-space:normal;word-break:keep-all}
.picker-chevron{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#008b83}
.sol-token{display:inline-block;white-space:nowrap}.sol-separator{font-weight:400;color:#79a9ad}
.stepper{grid-template-columns:36px minmax(0,1fr) 36px!important;gap:6px}
.stepper>.picker-trigger{height:82px;min-height:82px}.stepper .picker-title,.note-card .selector-title{font-variant-numeric:tabular-nums;font-family:system-ui;letter-spacing:.02em}
.advanced-core label .picker-trigger{margin:0}.advanced-core label:has(.picker-trigger){align-items:center;grid-template-columns:70px minmax(0,1fr)}
.advanced-core label:first-of-type:has(.picker-trigger){grid-template-columns:1fr}
.advanced-core label:not(:first-of-type) .picker-trigger{height:82px;min-height:82px}
.selector-dialog[open]{display:flex;flex-direction:column;gap:14px;width:min(760px,calc(100% - 24px));max-height:90dvh;overflow:hidden;border:1px solid #cde4e3;border-radius:20px;padding:22px;background:#f7fcfc}
.selector-dialog .dialog-heading{margin:0;flex:none;gap:12px}.selector-dialog .dialog-heading h2{font-size:23px;word-break:keep-all}.selector-dialog .icon-btn{flex:none}
.selector-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;flex:none}
.selector-tab{min-height:48px;min-width:0;padding:8px 4px;border:1px solid #d1e4e2;border-radius:10px;background:white;color:#486579;font-size:15px;word-break:keep-all}
.selector-tab[aria-selected=true]{background:#dff7f1;border-color:#009f95;color:#006d68;font-weight:750;box-shadow:inset 0 0 0 1px #009f95}
.selector-list{overflow-y:auto;overscroll-behavior:contain;min-height:0;display:flex;flex-direction:column;gap:10px;padding:2px 4px 3px 1px;scrollbar-gutter:stable}
.selector-row{display:grid;grid-template-columns:minmax(0,1fr) 100px;gap:8px;flex:none}
.selector-card{min-width:0;min-height:86px;padding:16px;border:1px solid #cfdfdf;border-radius:12px;background:white;text-align:left;cursor:pointer}
.selector-title{display:block;font-size:18px;line-height:1.45;font-weight:750;color:#183d58;word-break:keep-all;overflow-wrap:anywhere}
.selector-pattern{display:block;font-size:14px;line-height:1.8;font-weight:400;color:#397e83;margin-top:8px;word-break:keep-all}
.selector-detail{display:block;font-size:12px;line-height:1.6;color:#677f89;margin-top:7px}
.selector-card.active{background:#e4f9f3;border-color:#00a49a;box-shadow:inset 0 0 0 1px #00a49a}
.selector-listen{min-width:0;min-height:48px;align-self:stretch;background:#f0fbf8;border:1px solid #b8e2db;border-radius:12px;color:#007c74;font-size:14px;font-weight:650;padding:8px 5px;word-break:keep-all}
.selector-listen.playing{background:#007f78;color:white;border-color:#007f78}
.selector-dialog .field-note{margin:0;flex:none;font-size:13px;line-height:1.6;word-break:keep-all}
.note-list{display:grid;grid-template-columns:1fr 1fr;align-content:start}.note-row{grid-template-columns:minmax(0,1fr) 90px}
.note-card{height:94px;min-height:94px;padding:12px}.note-card .selector-title{font-size:24px}.note-card .selector-pattern{font-size:13px;white-space:nowrap}
.selected-scale{display:flex;flex-direction:column;gap:7px;align-items:flex-start}.selected-scale>span{font-size:18px;font-weight:750}.selected-scale>small{font-size:12px;font-weight:400;color:#397e83;white-space:normal;word-break:keep-all}
.pronunciation-options{padding:12px;margin-bottom:14px;border:1px solid #bde1da;border-radius:12px;background:#f0fcf8;font-size:14px}
.pronunciation-options label{display:block;font-weight:700;margin-bottom:8px}.pronunciation-options select{width:100%;min-height:44px;font-size:15px}.pronunciation-options p{font-size:12px;line-height:1.75;margin-top:10px;word-break:keep-all}.pronunciation-options button{margin-top:10px;min-height:44px;padding:8px;background:#fff;border:1px solid #b6ddd5;border-radius:8px;color:#007b72}
.automatic-pronunciation .big-vowel{font-size:42px;margin:0 0 10px;line-height:1.2}.active-sol{font-size:44px;font-weight:800;color:#173d58;line-height:1.3;margin-top:10px}.pronunciation-label{font-size:13px;color:#6a8390;margin:6px 0;display:block}
.automatic-pronunciation #solfege,.automatic-pronunciation .current-pitch>#currentSol{display:none}
.pronunciation-sequence{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%;margin:10px 0}
.pronunciation-group{display:flex;gap:2px;padding:3px;border:1px solid #d7e9e5;border-radius:8px;background:#fff}
.pronunciation-cell{display:flex;flex-direction:column;gap:6px;min-width:29px;padding:5px 3px;border-radius:5px;color:#66818c;font-size:12px;line-height:1.3}
.pronunciation-cell b{font-size:15px;color:#386a70}.pronunciation-cell.current{background:#d9f7ed;color:#005e58;box-shadow:inset 0 0 0 1px #00a399}.pronunciation-cell.current b{color:#ce346f}
.fixed-disabled button:disabled{opacity:.5;cursor:default}.current-pitch{flex-wrap:wrap}
@media(max-width:900px){
 .selector-dialog[open]{padding:14px;gap:12px}.selector-tab{font-size:13px;min-height:48px}.selector-row{grid-template-columns:minmax(0,1fr) 78px;gap:6px}
 .selector-card{padding:13px}.selector-title{font-size:17px}.selector-pattern{font-size:13px}.selector-listen{font-size:12px}
 .note-list{grid-template-columns:1fr}.note-card{height:86px;min-height:86px}.note-card .selector-title{font-size:23px}.note-row{grid-template-columns:minmax(0,1fr) 78px}
 .advanced-core label:has(.picker-trigger){grid-template-columns:70px minmax(0,1fr)!important}.advanced-core label:first-of-type:has(.picker-trigger){grid-template-columns:1fr!important}
 .picker-title{font-size:18px}.picker-description{font-size:12px}.stepper{grid-template-columns:28px minmax(0,1fr) 28px!important;gap:4px}.stepper>button:not(.picker-trigger){width:28px;padding:0}.stepper .picker-trigger{padding:9px 18px 9px 8px}.stepper .picker-chevron{right:6px}
 .automatic-pronunciation .big-vowel{font-size:38px}.active-sol{font-size:40px}
}
@media(max-width:360px){.range-grid{grid-template-columns:1fr!important}.selector-dialog[open]{padding:10px}.selector-title{font-size:16px}.selector-tab{font-size:12px}.picker-description{font-size:12px}}

.selector-subtabs{display:flex;gap:6px;flex-wrap:wrap;padding:8px 0;flex-shrink:0}.selector-subtabs button{font-size:12px;padding:8px;min-height:36px}.selector-controls{display:flex;flex-direction:column;gap:8px;width:100px;justify-content:center}.selector-controls select{width:100%;font-size:12px;min-height:40px;border:1px solid #b7dcd8;border-radius:8px;background:white;color:#24445f}.selector-detail{line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}.performance-options{margin-top:16px}.performance-options>select,.performance-options>div>select{width:100%;min-height:44px;border:1px solid #b7dcd8;border-radius:9px;padding:8px;background:white}.performance-options label{display:block;margin:10px 0 5px}.selector-dialog .selector-list{min-height:100px}.selector-controls .selector-listen{width:100%;min-height:48px}@media(max-width:600px){.selector-controls{width:80px}.selector-subtabs{gap:4px}.selector-subtabs button{padding:6px}.selector-detail{font-size:11px}.selector-card{padding:12px 9px}}

/* Keep scale and articulation together in both settings modes. */
.scale-performance-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}.scale-performance-row>*{min-width:0}.scale-performance-row .performance-options{margin:0;padding:0;border:0;background:none;box-shadow:none}.scale-performance-row h2,.scale-performance-row h3{font-size:14px;line-height:1.5;margin:0 0 10px}.scale-performance-row .performance-options>label[for=articulation]{display:none}.scale-performance-row #articulation{min-height:82px;width:100%;font-size:14px;padding:8px 4px}.scale-performance-row .scale-quick{display:block}.scale-performance-row .scale-quick>[data-scale]{display:none}.scale-performance-row #allScales{width:100%;min-height:82px}.scale-performance-row .selected-scale{padding:10px 0}.scale-performance-row .section-heading{flex-wrap:wrap;margin-bottom:8px}.scale-performance-row .number{display:none}.scale-performance-row .field-note{font-size:11px;line-height:1.65;word-break:keep-all}.scale-performance-row .advanced-core label{display:block}.advanced-core .scale-performance-row>label{display:block!important}.scale-performance-row .picker-trigger{width:100%}.scale-performance-row .performance-options select{max-width:100%;font-size:13px}.scale-performance-row #articulationHint{margin-top:8px}.automatic-pronunciation .big-vowel{font-size:68px!important;font-weight:850;line-height:1.15;color:#cf346f}.automatic-pronunciation .active-sol{font-size:30px!important;color:#486778;font-weight:600}.pronunciation-cell b{font-size:21px}.pronunciation-cell>span{font-size:11px}.pronunciation-cell.current b{font-size:23px}@media(max-width:600px){.scale-performance-row{gap:8px}.scale-performance-row h2,.scale-performance-row h3{font-size:13px}.automatic-pronunciation .big-vowel{font-size:58px!important}.automatic-pronunciation .active-sol{font-size:27px!important}.scale-performance-row .performance-options{padding:0!important}.scale-performance-row #articulation{font-size:12px}.pronunciation-cell{min-width:27px}.pronunciation-cell b{font-size:19px}.pronunciation-cell.current b{font-size:21px}}

.scale-choice-column>.section-heading,.scale-performance-row .performance-options>h3{min-height:32px;margin:0 0 8px;align-items:center;display:flex}.scale-choice-column>.section-heading h2{margin:0}.scale-performance-row .scale-quick{margin-top:0}

.scale-choice-column>.section-heading,.scale-performance-row .performance-options>h3{height:40px;min-height:40px}.scale-performance-row .performance-options>label[for=articulation]{display:none!important}.advanced-core .scale-performance-row>label{margin:0!important;padding:0!important;border:0!important;display:flex!important;flex-direction:column;gap:8px!important;align-items:stretch}.scale-field-title{height:40px;display:flex;align-items:center;font-size:14px;font-weight:700}.advanced-core .scale-performance-row .picker-trigger{height:82px;min-height:82px}.scale-choice-column>#previewScale{margin-top:4px}

/* Restore the original compact simple settings; advanced-only paired controls. */
#simpleSettings .stepper>.picker-trigger{height:62px;min-height:62px;text-align:center;align-items:center;padding:7px 20px;gap:2px}
#simpleSettings .selected-scale{display:flex;align-items:baseline;gap:8px;margin-top:8px;padding:0;background:transparent;border:0}
#simpleSettings #selectedScale{font-size:12px;font-weight:500}#simpleSettings #selectedPattern{font-size:11px;font-weight:400}
.advanced-core>label:has(.picker-trigger){display:grid!important;grid-template-columns:70px minmax(0,1fr)!important;align-items:center!important;margin:9px 0 0!important;padding:10px 0 0!important}
.advanced-core>label .picker-trigger{height:62px!important;min-height:62px!important;padding:7px 30px 7px 12px;gap:2px}
.advanced-core .scale-performance-row{border-top:1px solid #b4dfd8;padding-top:10px;margin-top:10px}
.advanced-core .scale-performance-row .picker-trigger,.advanced-core .scale-performance-row #articulation{height:62px;min-height:62px;padding-top:6px;padding-bottom:6px}
.advanced-core .performance-options>h3,.advanced-core .scale-field-title{height:32px;min-height:32px;margin-bottom:8px;font-size:13px;font-weight:600;color:#294b60}
.advanced-core .scale-field-title{margin-bottom:0}.advanced-core #articulationHint{font-size:11px;margin-bottom:0}.advanced-core #techniqueInfo{font-size:11px;margin-top:4px}
.details .detail-card.advanced-core>label:first-of-type:has(.picker-trigger){grid-template-columns:70px minmax(0,1fr)!important}.performance-help{font-size:11px;margin-top:6px;color:#658493}.performance-help summary{cursor:pointer;padding:3px 0;}

/* Keep the selected-scale card fixed; the popup shows the complete text. */
.advanced-core .scale-performance-row #advancedScalePicker{height:62px;min-height:62px;max-height:62px;overflow:hidden;gap:2px}
#advancedScalePicker>.picker-title,#advancedScalePicker>.picker-description{display:block;width:100%;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}