/* Standalone backing-tracks section, following RealFret's three themes. */
.backing-player{--bt-bg:#fafbfc;--bt-surface:#fff;--bt-ink:#203047;--bt-muted:#6c7789;--bt-line:#e0e5ec;--bt-accent:#276ab1;--bt-track:#dfe5ed;--bt-button:#21364d;--bt-button-ink:#fff;background:var(--bt-bg);color:var(--bt-ink);border:1px solid var(--bt-line);border-radius:18px;padding:22px 24px 12px;margin-bottom:16px;min-width:0}
.backing-player *{box-sizing:border-box;min-width:0}
.backing-player [hidden]{display:none!important}
.backing-player svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.backing-head,.backing-identity,.backing-footer,.backing-library,.backing-transport,.backing-mixer-head{display:flex;align-items:center}
.backing-head{justify-content:space-between;gap:12px;margin-bottom:18px}
.backing-identity{gap:8px;color:var(--bt-muted)}
#backingTracks #backingTitle{font-size:18px;font-weight:650;line-height:1.25;letter-spacing:-.25px;margin:0}
.backing-player.section{margin-bottom:0}
.backing-follow{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--bt-muted);white-space:nowrap}
.backing-follow:before{content:'';width:5px;height:5px;border-radius:50%;background:var(--bt-accent);opacity:.7}
.backing-key{display:block;font-size:25px;font-weight:650;letter-spacing:-.65px;line-height:1.25;overflow-wrap:anywhere}
.backing-player p{margin:0;color:var(--bt-muted);font-size:12px;line-height:1.55}
.backing-player .backing-track-info{margin-top:4px;font-size:12px}
.backing-player button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;border:1px solid var(--bt-line);border-radius:9px;background:var(--bt-surface);color:var(--bt-ink);padding:7px 11px;cursor:pointer;font-size:12px;font-weight:600;line-height:1.3;transition:background .15s,border-color .15s,color .15s}
.backing-player button:hover{border-color:var(--bt-accent)}
.backing-player button:disabled{opacity:.4;cursor:default}
.backing-player :is(button,input):focus-visible{outline:3px solid var(--bt-accent);outline-offset:3px}
.backing-track-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,440px);align-items:center;gap:24px}
.backing-track-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.backing-player .backing-track-choice{justify-content:flex-start;gap:10px;text-align:left;min-height:70px;padding:10px 12px;border-radius:12px;background:transparent;color:var(--bt-muted);font-weight:400}
.backing-player .backing-track-choice[aria-pressed=true]{border-color:var(--bt-accent);box-shadow:0 0 0 1px var(--bt-accent);background:var(--bt-surface);color:var(--bt-ink)}
.backing-choice-art{display:grid;place-items:center;width:36px;height:40px;flex-shrink:0;border-radius:8px;background:#e1edf8;color:#326da5}
.backing-choice-art[data-variant="2"]{background:#e9e6f6;color:#75619b}
.backing-choice-art svg{width:30px;height:30px;stroke-width:1.5}
.backing-choice-copy{display:flex;flex:1;flex-direction:column;gap:5px}
.backing-choice-copy strong{font-size:12px;font-weight:650;line-height:1.3;letter-spacing:-.15px;overflow-wrap:anywhere}
.backing-choice-copy>span{font-size:10px;color:var(--bt-muted);font-variant-numeric:tabular-nums;line-height:1.2}
.backing-choice-check{display:flex;width:14px;flex-shrink:0;opacity:0;color:var(--bt-accent)}
.backing-choice-check svg{width:14px;height:14px;stroke-width:2}
.backing-track-choice[aria-pressed=true] .backing-choice-check{opacity:1}
.backing-player[data-playing=true] .backing-track-choice[aria-pressed=true] .backing-choice-art svg{animation:backing-spin 8s linear infinite}
body.dark-mode .backing-choice-art{background:#2c4359;color:#a3c9ee}
body.dark-mode .backing-choice-art[data-variant="2"]{background:#3b354f;color:#cfbbf1}
body.cyberpunk-mode .backing-choice-art{background:#1d4548;color:#76efdb}
body.cyberpunk-mode .backing-choice-art[data-variant="2"]{background:#3d2c50;color:#e7a8f8}
@media(max-width:800px){.backing-track-row{grid-template-columns:1fr;gap:16px}.backing-track-choices{max-width:480px;width:100%}}
@media(max-width:480px){.backing-player .backing-track-choice{gap:8px;padding:10px;min-height:68px}.backing-choice-art{width:30px;height:36px}.backing-choice-art svg{width:26px;height:26px}.backing-choice-check{display:none}.backing-track-choices{gap:8px}}
@media(max-width:360px){#backingTracks #backingTitle{font-size:16px}.backing-head{gap:8px}.backing-player .backing-track-choice{gap:6px;padding:9px 8px}.backing-choice-art{width:22px;height:30px}.backing-choice-art svg{width:22px;height:22px}.backing-choice-copy strong{font-size:11px}}
.backing-transport{gap:18px;margin:20px 0 17px}
.backing-player .backing-play{width:48px;height:48px;min-width:48px;padding:0;border:0;border-radius:50%;background:var(--bt-button);color:var(--bt-button-ink);box-shadow:0 3px 8px #122b4515}
.backing-play svg{width:20px;height:20px}
.backing-play .backing-play-icon{fill:currentColor;stroke:none;margin-left:2px}
.backing-pause-icon,.backing-cancel-icon{display:none}
.backing-player[data-playing=true] .backing-play-icon,.backing-player[data-loading=true] .backing-play-icon{display:none}
.backing-player[data-playing=true]:not([data-loading=true]) .backing-pause-icon,.backing-player[data-loading=true] .backing-cancel-icon{display:block}
.backing-timeline{flex:1}
.backing-times{display:flex;justify-content:space-between;color:var(--bt-muted);font-size:10px;font-variant-numeric:tabular-nums;margin-top:1px}
.backing-player input[type=range]{--bt-progress:0%;display:block;appearance:none;-webkit-appearance:none;width:100%;height:24px;background:transparent;margin:0;cursor:pointer;accent-color:var(--bt-accent)}
.backing-player input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:10px;background:linear-gradient(to right,var(--bt-accent) var(--bt-progress),var(--bt-track) var(--bt-progress))}
.backing-player input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;margin-top:-4px;background:var(--bt-accent);border:2px solid var(--bt-surface);border-radius:50%;box-shadow:0 0 0 1px var(--bt-accent)}
.backing-player input[type=range]::-moz-range-track{height:4px;border-radius:10px;background:var(--bt-track)}
.backing-player input[type=range]::-moz-range-progress{height:4px;border-radius:10px;background:var(--bt-accent)}
.backing-player input[type=range]::-moz-range-thumb{width:9px;height:9px;border:2px solid var(--bt-surface);border-radius:50%;background:var(--bt-accent)}
.backing-player input[type=range]:disabled{opacity:.4;cursor:default}
.backing-player .backing-repeat{width:36px;padding:7px;border-color:transparent;background:transparent;color:var(--bt-muted);flex-shrink:0}
.backing-player .backing-repeat[aria-pressed=true]{color:var(--bt-accent);border-color:var(--bt-line);background:var(--bt-surface)}
.backing-volume{display:flex;align-items:center;gap:8px;width:110px;color:var(--bt-muted);flex-shrink:0}
.backing-volume svg{width:16px;height:16px}
.backing-footer{border-top:1px solid var(--bt-line);padding-top:10px;gap:10px;justify-content:space-between}
.backing-player .backing-mixer-toggle{font-size:11px;background:transparent;border-color:transparent;padding:6px 0;min-height:34px;color:var(--bt-muted);gap:7px}
.backing-player .backing-mixer-toggle:hover,.backing-player .backing-mixer-toggle[data-active=true]{color:var(--bt-accent)}
.backing-mixer-chevron{width:12px!important;height:12px!important;transition:transform .15s}
.backing-mixer-toggle[aria-expanded=true] .backing-mixer-chevron{transform:rotate(180deg)}
.backing-library{gap:7px}
.backing-player .backing-library p{font-size:10px;white-space:nowrap}
.backing-player .backing-refresh{border:0;background:transparent;padding:6px;min-height:30px;color:var(--bt-muted)}
.backing-refresh svg{width:14px;height:14px}
.backing-refresh[data-busy=true] svg{animation:backing-spin 1.1s linear infinite}
.backing-player .backing-status{font-size:11px;margin:0 0 12px}
.backing-status[data-error=true]{color:#ac3e36}
.backing-available{display:flex;align-items:center;gap:10px;margin-top:12px}
.backing-player .backing-try{min-height:32px;font-size:11px;padding:6px 10px;color:var(--bt-accent)}
.backing-player .backing-available p{font-size:11px}
.backing-mixer-panel{border-top:1px solid var(--bt-line);padding-top:16px;margin-top:8px;padding-bottom:8px}
.backing-mixer-head{justify-content:space-between;gap:10px;margin-bottom:14px}
.backing-mixer-head strong{font-size:13px;font-weight:650}
.backing-player .backing-mixer-reset,.backing-player .backing-original-mix{font-size:11px;min-height:28px;padding:3px 0;border:0;background:transparent;color:var(--bt-muted)}
.backing-instruments{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin-bottom:14px}
.backing-player .backing-instrument-toggle{justify-content:flex-start;gap:7px;width:100%;min-height:36px;padding:0;border:0;background:transparent;font-size:12px}
.backing-instrument-dot{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--bt-line);background:var(--bt-surface);flex-shrink:0}
.backing-instrument[data-enabled=true] .backing-instrument-dot{background:var(--bt-accent);border-color:var(--bt-accent)}
.backing-instrument[data-enabled=true] .backing-instrument-dot:after{content:'';width:5px;height:3px;border-left:1.5px solid white;border-bottom:1.5px solid white;transform:translateY(-1px) rotate(-45deg)}
.backing-instrument[data-enabled=false] .backing-instrument-toggle{color:var(--bt-muted)}
.backing-instrument-level{display:flex;align-items:center;gap:10px}
.backing-instrument-amount{width:30px;flex-shrink:0;text-align:right;font-size:10px;color:var(--bt-muted);font-variant-numeric:tabular-nums}
.backing-mixer-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}
.backing-player .backing-mixer-note{font-size:10px}
.backing-player .backing-mixer-status{padding:8px 0 18px;font-size:12px}
.backing-player .backing-mixer-retry{margin:0 0 12px}
.backing-player audio{display:none}
body.dark-mode .backing-player{--bt-bg:#1b2634;--bt-surface:#243243;--bt-ink:#e4ecf5;--bt-muted:#a1afc1;--bt-line:#354353;--bt-accent:#90bcee;--bt-track:#405064;--bt-button:#d9e8f8;--bt-button-ink:#1c3047}
body.cyberpunk-mode .backing-player{--bt-bg:#141b29;--bt-surface:#1b2937;--bt-ink:#e3f9ff;--bt-muted:#9db7c2;--bt-line:#304653;--bt-accent:#5fe3d1;--bt-track:#365260;--bt-button:#5fe3d1;--bt-button-ink:#102d30}
body.dark-mode .backing-status[data-error=true]{color:#ffb1a9}
@keyframes backing-spin{to{transform:rotate(360deg)}}
@media(max-width:720px){.backing-player{padding:17px 17px 9px;border-radius:14px}.backing-head{margin-bottom:15px}.backing-key{font-size:23px}.backing-transport{gap:12px;margin:16px 0 13px;flex-wrap:wrap}.backing-timeline{flex-basis:calc(100% - 106px);order:1}.backing-player .backing-repeat{order:2;width:36px}.backing-volume{order:3;width:95px;margin-left:auto}.backing-play{order:0}.backing-instruments{grid-template-columns:1fr;gap:3px}.backing-instrument{display:grid;grid-template-columns:minmax(85px,1fr) minmax(130px,1.4fr);gap:18px;align-items:center}.backing-instrument-level{gap:12px}.backing-mixer-head{margin-bottom:7px}.backing-mixer-bottom{align-items:flex-start}.backing-player .backing-mixer-note{max-width:180px}.backing-available{align-items:flex-start;flex-direction:column;gap:7px}}
@media(max-width:400px){.backing-player{padding-left:13px;padding-right:13px}.backing-follow{font-size:9px;gap:4px}.backing-player h3{font-size:11px}.backing-library{gap:2px}.backing-player .backing-library p{font-size:9px}.backing-player .backing-mixer-toggle{font-size:10px;gap:5px}.backing-instrument{gap:12px;grid-template-columns:minmax(73px,1fr) minmax(105px,1.35fr)}}
@media(prefers-reduced-motion:reduce){.backing-player *{scroll-behavior:auto;transition:none!important;animation:none!important}}

/* Full collection: seven arrangements per key and scale. */
.backing-track-row{grid-template-columns:minmax(170px,.65fr) minmax(0,2fr)}
.backing-track-choices{grid-template-columns:repeat(auto-fit,minmax(155px,1fr))}
.backing-choice-art[data-variant="3"]{background:#e5eef6;color:#376583}
.backing-choice-art[data-variant="4"]{background:#f7e8e1;color:#a15942}
.backing-choice-art[data-variant="5"]{background:#eee7f7;color:#81649e}
.backing-choice-art[data-variant="6"]{background:#f2ecdf;color:#927140}
.backing-choice-art[data-variant="7"]{background:#e1efe8;color:#3d8067}
@media(max-width:800px){.backing-track-row{grid-template-columns:1fr}.backing-track-choices{max-width:none}}
@media(max-width:480px){.backing-track-choices{grid-template-columns:repeat(2,minmax(0,1fr))}}