/* Palette is a visual score. Neutral Note cards keep names prominent. */
#jamApp .jam-popover[data-panel=add] .jam-material-card:before{display:none}
#jamApp .jam-popover[data-panel=add] :is(.jam-material-card,.jam-upload-card){background:#111619;border-color:#ffffff25}
#jamApp .jam-popover[data-panel=add] .jam-material-card b{font-size:18px;line-height:1.2;margin-bottom:8px}
#jamApp .jam-popover[data-panel=add] .jam-material-card small{font-size:10px}
#jamApp .jam-popover[data-panel=add] .jam-upload-card{font-size:20px;min-height:74px}
#jamApp .recipe-summary{font-size:12px;line-height:1.7;color:#dde2df;margin:16px 0}
#jamApp .recipe-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#jamApp .recipe-choice{position:relative;overflow:hidden;text-align:left;padding:14px 10px!important;min-height:140px!important;border:1px solid #ffffff24!important;border-radius:10px}
#jamApp .recipe-choice:before{content:'';position:absolute;inset:0 0 auto;width:auto;height:4px;border-radius:0;filter:none;opacity:1;background:var(--recipe-gradient)}
#jamApp .recipe-choice[aria-pressed=true]{border-color:#e2e8e1!important;box-shadow:inset 0 0 0 1px #e2e8e133}
#jamApp .recipe-choice b{display:block;font-size:14px;margin:2px 0 8px}
#jamApp .recipe-choice small{display:block;font-size:10px;line-height:1.6;white-space:normal;overflow-wrap:anywhere}
#jamApp .recipe-choice .recipe-beats{display:flex;width:100%;gap:3px;align-items:center;margin:12px 0 8px;height:12px;border-radius:0;background:none;box-shadow:none}
#jamApp .recipe-beats i{flex:1;height:3px;background:#ffffff20;min-width:0;border-radius:1px}
#jamApp .recipe-beats i.on{height:7px;background:var(--recipe-gradient)}
#jamApp .recipe-beats i.downbeat.on{height:11px}
#jamApp .recipe-register{margin:18px 0;gap:12px}
#jamApp .recipe-register button,#jamApp .recipe-library button{min-width:40px;min-height:40px}
#jamApp .recipe-register output{min-width:30px;text-align:center;font:14px ui-monospace,monospace}
#jamApp .recipe-library{border-top:1px solid #ffffff20;margin-top:18px;padding-top:14px}
#jamApp .recipe-saved{display:flex;gap:8px;margin-top:8px}
#jamApp .recipe-saved button:first-child{flex:1;text-align:left;font-size:11px}
#jamApp .accord-concentration,#jamApp .accord-description{grid-column:1/-1;display:block;font-size:10px;line-height:1.5}
#jamApp .accord-concentration{color:#d8dfdc}
#jamApp .accord-description{color:#929f99;margin-bottom:10px}
#jamApp :is(.jam-field-volume,.recipe-mix-volume) input{appearance:none;-webkit-appearance:none;background:transparent;accent-color:var(--field-color)}
#jamApp :is(.jam-field-volume,.recipe-mix-volume) input::-webkit-slider-runnable-track{height:5px;border-radius:5px;background:var(--recipe-gradient,var(--field-gradient,var(--field-color)))}
#jamApp :is(.jam-field-volume,.recipe-mix-volume) input::-moz-range-track{height:5px;border-radius:5px;background:var(--recipe-gradient,var(--field-gradient,var(--field-color)))}
#jamApp :is(.jam-field-volume,.recipe-mix-volume) input::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;margin-top:-5px;background:#eef1ed;border:2px solid #18201c;border-radius:50%}
#jamApp :is(.jam-field-volume,.recipe-mix-volume) input::-moz-range-thumb{width:12px;height:12px;background:#eef1ed;border:2px solid #18201c;border-radius:50%}
@media(max-width:360px){#jamApp .recipe-options{gap:6px}#jamApp .recipe-choice{padding:12px 8px!important}#jamApp .recipe-choice small{font-size:9px}}

/* One gradient surface controls both color and audible blend. */
#jamApp .field-palette-editor{position:relative;margin:8px 8px 24px}
#jamApp .field-gradient-bar{height:88px;margin:16px 12px 8px;border-radius:14px}
#jamApp .field-gradient-stop{top:32px}
#jamApp .field-gradient-color-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;padding:0;border:0}
#jamApp .field-gradient-footer{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;height:40px;padding-left:12px;border-radius:0 0 13px 13px;background:linear-gradient(transparent,#0006);pointer-events:none}
#jamApp .field-gradient-amount{font:11px ui-monospace,monospace;color:white;text-shadow:0 1px 3px #000;pointer-events:none}
#jamApp .field-gradient-remove{width:44px;height:40px;min-height:40px;border:0;border-radius:0 0 13px 0;background:#0002;color:white;pointer-events:auto}
#jamApp .field-gradient-remove[hidden]{display:none}
#jamApp .field-gradient-help{display:block;text-align:center;color:#a8b1ac;font-size:10px;line-height:1.5}
#jamApp .field-gradient-stop:focus-visible{outline:2px solid white;outline-offset:2px}

.field-color-picker{display:grid;gap:12px;padding:14px;margin-top:12px;background:#242424;border:1px solid #666;border-radius:12px}
.field-color-plane{position:relative;height:150px;touch-action:none;border-radius:6px;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),hsl(var(--picker-hue) 100% 50%)}
.field-color-plane i{position:absolute;width:16px;height:16px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #222;transform:translate(-50%,-50%);pointer-events:none}
.field-color-picker input[type=range]{width:100%;accent-color:#eee}
.field-color-picker-row{display:flex;gap:12px;align-items:center}
.field-color-picker-row input{min-width:0;flex:1;background:#181818;color:#fff;border:1px solid #777;border-radius:5px;padding:8px;font:inherit}