/* Scoped pad styling; palette fits the existing movable workspace in both themes. */
#jingle-panel { min-width:0; height:100%; }
.peak-guard-badge { display:inline-block; color:#237d5b; font-size:9px; margin-left:5px; white-space:nowrap; }
[data-theme=dark] .peak-guard-badge { color:#76d7ac; }
.jingle-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.jingle-heading .eyebrow { font-size:10px; line-height:1.4; letter-spacing:1.5px; margin:0 0 6px; }
#jingle-count { display:inline-block; font-size:12px; font-weight:500; margin-left:8px; white-space:nowrap; }
.jingle-live-strip { display:flex; align-items:center; gap:10px; min-height:46px; margin:16px 0; padding:10px 12px; border:1px solid #cbd3df; border-radius:8px; background:#f3f6fa; color:#344256; font-size:12px; line-height:1.5; }
.jingle-live-strip #jingle-status { flex:1; min-width:0; overflow-wrap:anywhere; }
.jingle-dot { width:8px; height:8px; flex:none; background:#68778b; border-radius:50%; }
.jingle-active .jingle-dot { background:#17b981; box-shadow:0 0 0 3px #17b98120; }
.jingle-pads { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); justify-content:start; gap:18px 14px; max-height:570px; overflow:auto; padding:5px; margin:-5px; }
.jingle-card { --pad-rgb:181,47,40; min-width:0; max-width:180px; }
.jingle-card[data-colour=violet] { --pad-rgb:107,59,190; }
.jingle-card[data-colour=cyan] { --pad-rgb:9,102,138; }
.jingle-card[data-colour=gold] { --pad-rgb:141,91,0; }
.jingle-card[data-colour=mint] { --pad-rgb:8,108,77; }
.jingle-card[data-colour=rose] { --pad-rgb:162,39,109; }
.jingle-pad { width:100%; height:158px; position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; overflow:hidden; text-align:left; padding:14px; border-radius:10px; border:1px solid rgba(var(--pad-rgb),.55); background:#fafbfe; color:#172235; box-shadow:inset 0 3px 0 rgb(var(--pad-rgb)); transition:border-color .15s,background-color .15s; }

.jingle-pad:hover:not(:disabled) { border-color:rgb(var(--pad-rgb)); background:#eef2f8; }
.jingle-pad:active:not(:disabled) { background:#e4eaf3; }

.jingle-pad.is-playing { border-color:rgb(var(--pad-rgb)); background:#eef3f9; box-shadow:inset 0 3px 0 rgb(var(--pad-rgb)),0 0 0 1px rgb(var(--pad-rgb)); }
.jingle-pad:focus-visible { outline:3px solid rgb(var(--pad-rgb)); outline-offset:4px; }
.jingle-pad-top { position:absolute; top:13px; left:14px; right:14px; display:flex; justify-content:space-between; align-items:center; gap:6px; font:600 11px/1.3 ui-monospace,monospace; color:rgb(var(--pad-rgb)); }
.jingle-pad-state { font:700 9px/1.4 system-ui,sans-serif; letter-spacing:.5px; }
.jingle-symbol { display:block; line-height:1; margin-bottom:auto; padding-top:24px; color:rgb(var(--pad-rgb)); }
.jingle-symbol svg { display:block; width:24px; height:24px; }
.jingle-pad-name { font-size:14px; font-weight:600; line-height:1.3; margin-top:8px; max-width:100%; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; }
.jingle-pad-caption { font-size:10px; font-weight:600; line-height:1.4; letter-spacing:.2px; color:#45536a; margin-top:8px; }
.jingle-progress { position:absolute; bottom:0; left:0; right:0; height:3px; background:rgb(var(--pad-rgb)); transform:scaleX(0); transform-origin:left; transition:transform .5s linear; }
.jingle-bars { display:none; position:absolute; right:14px; top:43px; height:26px; align-items:center; gap:3px; }
.is-playing .jingle-bars { display:flex; }
.jingle-bars i { width:3px; height:100%; background:rgb(var(--pad-rgb)); border-radius:3px; animation:jingle-bounce .75s ease-in-out infinite alternate; }
.jingle-bars i:nth-child(2) { animation-delay:-.3s; }.jingle-bars i:nth-child(3) { animation-delay:-.5s; }.jingle-bars i:nth-child(4) { animation-delay:-.2s; }.jingle-bars i:nth-child(5) { animation-delay:-.6s; }
@keyframes jingle-bounce { from { transform:scaleY(.2); } to { transform:scaleY(1); } }
.jingle-pad.is-missing { border-style:dashed; background:#f3f5f8; }
.jingle-pad.is-waiting { border-style:dashed; }
.jingle-card-actions { display:flex; justify-content:center; gap:6px; margin-top:6px; }
.jingle-card-actions .quiet { display:inline-flex; align-items:center; justify-content:center; padding:7px; min-width:32px; min-height:34px; flex:1; border:1px solid #d2dae5; border-radius:6px; color:#3d4e65; background:#f6f8fb; }
.jingle-card-actions svg { display:block; width:17px; height:17px; flex:none; }
.jingle-next { display:block; text-align:center; font-size:11px; line-height:1.5; color:#45536a; margin:10px 0 3px; min-height:17px; }
.jingle-footnote { margin:18px 0 10px; font-size:12px; line-height:1.6; }
.jingle-details { font-size:12px; color:#45536a; }.jingle-details summary { cursor:pointer; font-weight:600; }.jingle-details .help { margin-top:10px; }
.jingle-empty { grid-column:1/-1; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; min-height:225px; padding:24px; border:1px dashed #c8c8d3; border-radius:15px; gap:10px; }
.jingle-empty strong { font-size:13px; }.jingle-empty-icon { font-size:36px; color:#a5a1b6; }
#jingle-editor { width:min(440px,calc(100vw - 28px)); max-height:calc(100dvh - 28px); overflow:auto; }
#jingle-editor h2 { font-size:18px; font-weight:650; }
.jingle-form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.jingle-editor-actions { display:flex; gap:12px; justify-content:space-between; }
[data-theme=dark] .jingle-live-strip { background:#131b25; border-color:#425167; color:#e0e7f0; }
[data-theme=dark] .jingle-card { --pad-rgb:255,119,102; }
[data-theme=dark] .jingle-card[data-colour=violet] { --pad-rgb:172,138,255; }
[data-theme=dark] .jingle-card[data-colour=cyan] { --pad-rgb:72,195,226; }
[data-theme=dark] .jingle-card[data-colour=gold] { --pad-rgb:239,189,80; }
[data-theme=dark] .jingle-card[data-colour=mint] { --pad-rgb:79,215,166; }
[data-theme=dark] .jingle-card[data-colour=rose] { --pad-rgb:242,124,191; }
[data-theme=dark] .jingle-pad { color:#f4f7fc; background:#1b2533; border-color:rgba(var(--pad-rgb),.6); }
[data-theme=dark] .jingle-pad:hover:not(:disabled) { background:#243247; border-color:rgb(var(--pad-rgb)); }
[data-theme=dark] .jingle-pad:active:not(:disabled) { background:#2b3b51; }
[data-theme=dark] .jingle-pad.is-playing { background:#24364a; border-color:rgb(var(--pad-rgb)); }
[data-theme=dark] .jingle-pad-caption,[data-theme=dark] .jingle-next,[data-theme=dark] .jingle-details { color:#c9d5e4; }
[data-theme=dark] .jingle-card-actions .quiet { color:#dce6f2; background:#17202b; border-color:#405168; }
[data-theme=dark] .jingle-card-actions .quiet:hover:not(:disabled) { color:#fff; background:#2b3b51; border-color:#75879e; }
[data-theme=dark] .jingle-empty { border-color:#4c5a6e; }
@container (max-width:370px) { .jingle-pads { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 10px; }.jingle-pad { padding:12px; }.jingle-pad-top { left:12px;right:12px; }.jingle-pad-name { font-size:13px; } }
@container (max-width:245px) { .jingle-pads { grid-template-columns:minmax(0,180px); } }
@media(max-width:480px) { .jingle-form-row { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .jingle-pad,.jingle-progress { transition:none; }.jingle-bars i { animation:none; }.jingle-bars i:nth-child(even) { transform:scaleY(.5); } }

.jingle-volume-editor output { float:right; font-variant-numeric:tabular-nums; }
/* Match the thin studio fader, including its square thumb, inside sound settings. */
#jingle-editor .jingle-volume-editor input[type=range]{appearance:none;-webkit-appearance:none;display:block;width:100%;height:24px;min-height:24px;margin:8px 0 0;padding:0;background:transparent;border:0;box-shadow:none;cursor:pointer;touch-action:pan-y}
#jingle-editor .jingle-volume-editor input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:0;background:var(--studio-dialog-border,#b9c4d3)}
#jingle-editor .jingle-volume-editor input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:7px;height:12px;margin-top:-4px;border:0;border-radius:1px;background:#9aabc0}
#jingle-editor .jingle-volume-editor input[type=range]::-moz-range-track{height:4px;border-radius:0;background:var(--studio-dialog-border,#b9c4d3)}
#jingle-editor .jingle-volume-editor input[type=range]::-moz-range-progress{height:4px;border-radius:0;background:var(--studio-dialog-border,#b9c4d3)}
#jingle-editor .jingle-volume-editor input[type=range]::-moz-range-thumb{width:7px;height:12px;border:0;border-radius:1px;background:#9aabc0}
.jingle-next { overflow-wrap:anywhere; margin-top:4px; }
.studio-header button,#jingle-panel button { white-space:normal; }


/* Included library: isolated from other studio dialogs and controls. */
.jingle-add-actions{display:flex;flex-wrap:wrap;gap:8px}
#included-sounds{width:min(760px,calc(100vw - 40px));overflow:hidden;max-height:calc(100dvh - 40px)}
#included-sounds[open]{display:flex;flex-direction:column;gap:14px}
#included-sounds .studio-dialog-heading{flex:none}
#included-sounds .included-toolbar{display:flex;gap:16px;align-items:end;flex-wrap:wrap}
#included-sounds .included-toolbar label{flex:1;min-width:160px}
#included-sounds .included-list{min-height:100px;max-height:48dvh;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;flex:1}
#included-sounds .included-list::-webkit-scrollbar{display:none}
#included-sounds .included-row{display:flex;align-items:center;gap:14px;padding:12px 3px;border-bottom:1px solid var(--studio-dialog-border,#46505e)}
#included-sounds .included-row label{display:flex;align-items:center;gap:12px;flex:1;min-width:0;margin:0;cursor:pointer}
#included-sounds .included-row input{flex:none;margin:0}
#included-sounds .included-row strong{display:block;font-size:12px;line-height:1.4;overflow-wrap:anywhere}
#included-sounds .included-row small{display:block;font-size:10px;opacity:.65;margin-top:4px}
#included-sounds .included-row button{flex:none;padding:7px 10px;font-size:11px}
#included-sounds .included-footer{display:flex;gap:14px;justify-content:space-between;align-items:center;flex:none}
#included-sounds .included-footer button{flex:none}
#included-sounds .included-footer p{margin:0}
@media(max-width:600px){#included-sounds{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}#included-sounds .included-list{max-height:none}#included-sounds .included-toolbar{gap:8px}#included-sounds .included-footer{flex-wrap:wrap}}