/* Sound source browser — shared in Basic and Advanced synth modes. */
#synth .synth-source-control{min-width:0}
#synth .synth-source-control>label{display:block}
#synth #synth-source{display:none!important}
#synth .ss-source-trigger{display:flex;width:100%;min-height:54px;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding:8px 11px;border:1px solid #596672;border-radius:8px;background:linear-gradient(145deg,#26313b,#1d2730);color:#f2f4f6;text-align:left;cursor:pointer}
#synth .ss-source-trigger:hover{border-color:#d9a363;background:linear-gradient(145deg,#303943,#222c35)}
#synth .ss-source-trigger:focus-visible,#synth .ss-source-dialog button:focus-visible,#synth .ss-source-dialog input:focus-visible{outline:3px solid #ffd28d;outline-offset:2px}
#synth .ss-source-trigger-copy{display:grid;min-width:0;gap:3px}
#synth .ss-source-trigger-copy strong{overflow:hidden;font-size:14px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
#synth .ss-source-trigger-copy small{overflow:hidden;color:#c49a68;font-size:10px;font-weight:800;letter-spacing:.1em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}
#synth .ss-source-trigger-action{display:flex;flex:none;align-items:center;gap:7px;color:#f4c789;font-size:11px;font-weight:800;letter-spacing:.04em}
#synth .ss-source-trigger-action span:first-child{display:grid;width:27px;height:27px;place-items:center;border:1px solid #775e3e;border-radius:50%;font-size:16px}
#synth .ss-source-dialog{width:min(800px,calc(100vw - 28px));max-width:none;max-height:min(820px,calc(100dvh - 28px));margin:auto;padding:0;overflow:hidden;border:1px solid #57636e;border-radius:16px;background:#141b22;color:#edf1f5;box-shadow:0 28px 90px rgba(0,0,0,.58)}
#synth .ss-source-dialog::backdrop{background:rgba(5,9,14,.74);backdrop-filter:blur(5px)}
#synth .ss-source-browser{display:flex;max-height:min(820px,calc(100dvh - 28px));flex-direction:column}
#synth .ss-source-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 22px 15px;border-bottom:1px solid #303a44;background:radial-gradient(ellipse at 0 0,rgba(236,169,92,.1),transparent 48%),#192129}
#synth .ss-source-heading{display:grid;min-width:0;gap:4px}
#synth .ss-source-eyebrow{color:#e9b575;font-size:10px;font-weight:900;letter-spacing:.18em}
#synth .ss-source-heading h2{margin:0;color:#f5f2ed;font-size:23px;line-height:1.15}
#synth .ss-source-heading p{margin:0;color:#aab5bf;font-size:12px;line-height:1.4}
#synth .ss-source-close{display:grid;width:38px;height:38px;flex:none;place-items:center;border:1px solid #43505b;border-radius:10px;background:#232d36;color:#e7edf1;font-size:21px;cursor:pointer}
#synth .ss-source-tools{display:grid;gap:12px;padding:14px 22px 12px;border-bottom:1px solid #303a44;background:#171f27}
#synth .ss-source-search-wrap{position:relative;display:block}
#synth .ss-source-search-wrap>span{position:absolute;top:50%;left:13px;color:#b5c0c9;font-size:17px;transform:translateY(-50%);pointer-events:none}
#synth #synth-source-search{box-sizing:border-box;width:100%;min-height:44px;margin:0;padding:10px 13px 10px 40px;border:1px solid #46535e;border-radius:9px;background:#0f161d;color:#f5f6f7;font-size:14px}
#synth #synth-source-search::placeholder{color:#8996a1}
#synth .ss-source-filters{display:flex;gap:7px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#5e4b35 transparent}
#synth .ss-source-filters button{display:flex;min-height:34px;flex:none;align-items:center;gap:7px;padding:6px 10px;border:1px solid #394651;border-radius:20px;background:#202a33;color:#c5ced6;font-size:11px;font-weight:800;white-space:nowrap;cursor:pointer}
#synth .ss-source-filters button[aria-pressed="true"]{border-color:#d8a05b;background:#453522;color:#ffe0b4}
#synth .ss-source-filters [data-filter-count]{display:grid;min-width:18px;height:18px;place-items:center;border-radius:10px;background:rgba(255,255,255,.08);color:#f1c17f;font-size:10px}
#synth .ss-source-results{min-height:150px;flex:1;overflow:auto;padding:15px 22px 20px;overscroll-behavior:contain;scrollbar-color:#56616c #192129}
#synth .ss-source-group{margin:0 0 16px;padding:12px;border:1px solid #333f49;border-radius:12px;background:linear-gradient(145deg,#1b242d,#161e26)}
#synth .ss-source-group:last-child{margin-bottom:0}
#synth .ss-source-group-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;padding:0 2px 9px;border-bottom:1px solid #34404a}
#synth .ss-source-group-heading h3{margin:0;color:#f1d1a2;font-size:13px;font-weight:900;letter-spacing:.07em}
#synth .ss-source-group-heading>span{display:grid;min-width:23px;height:23px;place-items:center;border:1px solid #5d4a33;border-radius:20px;color:#f4c27d;font-size:10px;font-weight:800}
#synth .ss-source-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
#synth .ss-source-row{display:flex;min-width:0;min-height:54px;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid #35424c;border-radius:9px;background:#202a33;color:#e9edf0;text-align:left;cursor:pointer;transition:background .14s,border-color .14s,transform .14s}
#synth .ss-source-row:hover{transform:translateY(-1px);border-color:#92734f;background:#28333d}
#synth .ss-source-row.is-selected{border-color:#e4af6b;background:linear-gradient(120deg,#403323,#26303a);box-shadow:inset 3px 0 #e9b16b}
#synth .ss-source-copy{display:grid;min-width:0;gap:3px}
#synth .ss-source-copy strong{overflow:hidden;color:#f4f5f5;font-size:12px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
#synth .ss-source-copy small{overflow:hidden;color:#9eabb5;font-size:10px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
#synth .ss-source-marker{display:grid;width:21px;height:21px;flex:none;place-items:center;border:1px solid #47545f;border-radius:50%;color:#e7b577;font-size:12px;font-weight:900}
#synth .ss-source-row.is-selected .ss-source-marker{border-color:#c79455;background:#dfaa64;color:#18212a}
#synth .ss-source-family{margin-top:10px}
#synth .ss-source-family:first-of-type{margin-top:0}
#synth .ss-source-family h4{margin:0 0 6px 2px;color:#e7b578;font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
#synth .ss-source-empty{margin:0;padding:22px;border:1px dashed #4a5661;border-radius:10px;color:#bdc7d0;font-size:13px;line-height:1.5;text-align:center}
#synth .ss-source-footer{display:flex;min-height:44px;align-items:center;justify-content:space-between;gap:12px;padding:9px 22px;border-top:1px solid #303a44;background:#171f27}
#synth #synth-source-status{margin:0;color:#9ba8b2;font-size:11px}
#synth .ss-source-footer button{min-height:34px;padding:7px 15px;border:1px solid #4b5965;border-radius:8px;background:#26313a;color:#edf0f2;font-size:11px;font-weight:800;cursor:pointer}
@media(max-width:600px){
 #synth .ss-source-dialog{width:calc(100vw - 14px);max-height:calc(100dvh - 14px);border-radius:12px}
 #synth .ss-source-browser{max-height:calc(100dvh - 14px)}
 #synth .ss-source-header{padding:15px 15px 12px}
 #synth .ss-source-heading h2{font-size:20px}
 #synth .ss-source-tools{gap:9px;padding:11px 14px}
 #synth .ss-source-results{padding:11px 13px 15px}
 #synth .ss-source-grid{grid-template-columns:minmax(0,1fr)}
 #synth .ss-source-footer{padding:8px 14px}
}
@media(prefers-reduced-motion:reduce){#synth .ss-source-row{transition:none}#synth .ss-source-row:hover{transform:none}}

/* Basic synth source area: clearer hierarchy and a more inviting Browse action. */
#synth[data-mode="basic"] .synth-top{align-items:stretch;gap:16px}
#synth[data-mode="basic"] .synth-source-control{flex:1 1 420px;max-width:640px;min-width:260px}
#synth[data-mode="basic"] .synth-source-control>label{margin:0 0 8px;color:#f3f8f6;font-size:11px;font-weight:900;letter-spacing:.11em}
#synth[data-mode="basic"] .synth-source-control>.ss-source-trigger{min-height:64px;margin-top:0;padding:10px 12px 10px 15px;border:1px solid rgba(165,217,225,.55);border-radius:12px;background:linear-gradient(135deg,#173c4c,#214a58);box-shadow:inset 0 1px rgba(255,255,255,.07),0 3px 10px rgba(9,30,40,.2);transition:border-color .16s,box-shadow .16s,transform .16s}
#synth[data-mode="basic"] .synth-source-control>.ss-source-trigger:hover{border-color:#ffd18a;background:linear-gradient(135deg,#1a4352,#285765);box-shadow:0 0 0 2px rgba(255,177,71,.13),0 5px 13px rgba(9,30,40,.24)}
#synth[data-mode="basic"] .synth-source-control>.ss-source-trigger:active{transform:translateY(1px)}
#synth[data-mode="basic"] .ss-source-trigger-copy{gap:5px}
#synth[data-mode="basic"] .ss-source-trigger-copy strong{font-size:16px;letter-spacing:.01em}
#synth[data-mode="basic"] .ss-source-trigger-copy small{color:#bfdae0;font-size:9px;letter-spacing:.12em}
#synth[data-mode="basic"] .ss-source-trigger-action{gap:7px;padding:4px 10px 4px 5px;border:1px solid #ffd38e;border-radius:999px;background:linear-gradient(180deg,#ffc56b,#ff9e3d);color:#183544;font-size:12px;font-weight:900;letter-spacing:.015em;box-shadow:0 2px 5px rgba(5,20,29,.24)}
#synth[data-mode="basic"] .ss-source-trigger-action span:first-child{width:23px;height:23px;border-color:rgba(24,53,68,.25);background:rgba(24,53,68,.1);color:#173544;font-size:15px}
#synth[data-mode="basic"] .synth-root{flex:0 1 270px;align-self:stretch;align-content:center;border-left:1px solid rgba(205,238,240,.22);padding:8px 4px 8px 20px}
#synth[data-mode="basic"][data-source="instrument"] .synth-source-control>.sub{display:none}
@media(max-width:700px){#synth[data-mode="basic"] .synth-source-control{flex-basis:100%;max-width:none}#synth[data-mode="basic"] .synth-root{flex-basis:100%;border-left:0;border-top:1px solid rgba(205,238,240,.22);padding:10px 0 0}}

/* Modal polish: full-width search, aligned header, and clearer close actions. */
#synth .ss-source-header{align-items:center;gap:18px;padding:16px 20px 14px}
#synth .ss-source-heading{gap:5px}
#synth .ss-source-heading h2{font-size:22px}
#synth .ss-source-heading p{max-width:54ch}
#synth .ss-source-close{display:flex;width:auto;min-width:78px;height:42px;min-height:42px;align-items:center;justify-content:center;gap:7px;padding:0 12px;border:1px solid #52616c;border-bottom:1px solid #52616c;border-radius:11px;background:linear-gradient(145deg,#293844,#1f2c36);color:#f0d3a8;font-size:18px;line-height:1;font-weight:900;box-shadow:0 2px 5px rgba(0,0,0,.2);cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .15s}
#synth .ss-source-close::after{content:"Close";font-size:11px;font-weight:850;letter-spacing:.02em}
#synth .ss-source-close:hover{transform:translateY(-1px);border-color:#ffd18a;border-bottom-color:#ffd18a;background:linear-gradient(135deg,#f6c36d,#e99c43);color:#1b303c;box-shadow:0 3px 8px rgba(0,0,0,.24)}
#synth .ss-source-close:active{transform:translateY(0)}
#synth .ss-source-tools{gap:10px;padding:12px 20px 11px}
#synth .ss-source-search-wrap{width:100%;min-width:0}
#synth #synth-source-search{display:block;width:100%;max-width:none;min-height:44px;border-radius:10px;background:linear-gradient(180deg,#101a22,#0e161d)}
#synth .ss-source-filters{gap:8px;padding-bottom:1px}
#synth .ss-source-filters button{min-height:36px;padding:6px 10px}
#synth .ss-source-results{min-height:0;padding:12px 20px 16px}
#synth .ss-source-group{margin-bottom:12px;padding:10px}
#synth .ss-source-group-heading{margin-bottom:8px;padding-bottom:7px}
#synth .ss-source-row{min-height:50px;padding:7px 9px}
#synth .ss-source-empty{padding:14px 16px}
#synth .ss-source-footer{padding:8px 20px}
#synth .ss-source-footer button{min-height:38px;padding:7px 14px;border:1px solid #53616b;border-bottom:1px solid #53616b;border-radius:9px;background:#26343e;color:#edf0f2}
@media(max-width:600px){#synth .ss-source-header{gap:12px;padding:14px 14px 12px}#synth .ss-source-heading h2{font-size:19px}#synth .ss-source-heading p{font-size:11px}#synth .ss-source-tools{gap:9px;padding:10px 14px}#synth .ss-source-filters{gap:6px}#synth .ss-source-filters button{min-height:34px;padding:5px 9px}#synth .ss-source-results{padding:10px 13px 13px}#synth .ss-source-footer{padding:8px 14px}}
#synth .ss-source-heading p{max-width:none}
#synth .ss-source-empty{padding:8px 12px;font-size:11px;line-height:1.35}
#synth .ss-source-grid{gap:6px}
#synth .ss-source-row{min-height:44px;padding:6px 9px}
#synth .ss-source-copy{gap:2px}
#synth .ss-source-family{margin-top:8px}