/* Сольфеджист — стили плеера. Всё внутри .solfedgist: страница у плагина
   чужая, и глобальные правила (:root, body, *, голые select и input)
   перекрасили бы весь сайт. Переменные живут на самом корне, а не на :root. */
.solfedgist { --bg: #1a1a2e; --surface: #16213e; --surface2: #0f3460; --accent: #e94560; --accent2: #ff6b6b; --text: #eaeaea; --text2: #a0a0b8; --gold: #f5c842; --radius: 12px; --shadow: 0 4px 24px rgba(0,0,0,.4); }
.solfedgist,
.solfedgist * { box-sizing:border-box; margin:0; padding:0; }
.solfedgist { font-family:'Segoe UI',system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text); padding:16px; border-radius:var(--radius); }
.solfedgist { width:100%; max-width:720px; display:flex; flex-direction:column; gap:20px; }
.solfedgist .header { text-align:center; }
.solfedgist .header h1 { font-size:2rem; font-weight:700; letter-spacing:-0.5px; background:linear-gradient(135deg,var(--accent),var(--accent2),var(--gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.solfedgist .header p { color:var(--text2); font-size:0.9rem; margin-top:2px; }
.solfedgist .drop-zone { border:2px dashed var(--surface2); border-radius:var(--radius); padding:40px 20px; text-align:center; cursor:pointer; transition:all .2s; background:var(--surface); position:relative; }
.solfedgist .drop-zone:hover,
.solfedgist .drop-zone.dragover { border-color:var(--accent); background:#1a1a3e; }
.solfedgist .drop-zone.loaded { border-color:#2ecc71; border-style:solid; }
.solfedgist .drop-zone .icon { font-size:3rem; margin-bottom:8px; }
.solfedgist .drop-zone .label { font-size:1rem; font-weight:600; }
.solfedgist .drop-zone .hint { font-size:0.8rem; color:var(--text2); margin-top:4px; }
.solfedgist .drop-zone input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.solfedgist .controls-row { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.solfedgist .control-group { display:flex; flex-direction:column; gap:4px; flex:1; min-width:140px; }
.solfedgist .control-group label { font-size:0.75rem; color:var(--text2); text-transform:uppercase; letter-spacing:1px; font-weight:600; }
.solfedgist select,
.solfedgist input[type=range] { background:var(--surface); border:1px solid var(--surface2); border-radius:8px; color:var(--text); padding:8px 12px; font-size:0.9rem; outline:none; transition:border-color .2s; }
.solfedgist select:focus,
.solfedgist input[type=range]:focus { border-color:var(--accent); }
.solfedgist input[type=range] { -webkit-appearance:none; appearance:none; height:6px; padding:0; background:var(--surface2); border:none; cursor:pointer; }
.solfedgist input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--accent); cursor:pointer; }
.solfedgist .tempo-display { text-align:center; font-weight:700; font-size:0.9rem; color:var(--accent); }
/* Чекбоксы и радио (NVDA: 18px, видимый фокус) */
.solfedgist input[type=checkbox],
.solfedgist input[type=radio] { width:18px; height:18px; accent-color:var(--accent); cursor:pointer; flex-shrink:0; margin:0; }
.solfedgist .control-group.check { flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px; }
.solfedgist .control-group.check label { text-transform:none; letter-spacing:0; font-size:0.9rem; font-weight:400; }
.solfedgist .hint { font-size:0.75rem; color:var(--text2); width:100%; }
/* Партии */
.solfedgist .parts-panel { background:var(--surface); border:1px solid var(--surface2); border-radius:var(--radius); padding:12px 16px; min-width:0; }
.solfedgist .parts-panel legend { font-size:0.75rem; color:var(--text2); text-transform:uppercase; letter-spacing:1px; font-weight:600; padding:0 6px; }
.solfedgist .part-row { display:flex; flex-direction:column; gap:5px; padding:10px 0; border-top:1px solid var(--surface2); }
.solfedgist .part-row:first-child { border-top:none; padding-top:4px; }
.solfedgist .part-name { font-weight:700; font-size:0.95rem; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.solfedgist .part-reco { color:var(--gold); font-size:0.75rem; font-weight:600; }
.solfedgist .part-stats { font-size:0.78rem; color:var(--text2); }
.solfedgist .part-controls { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.solfedgist .part-controls select { padding:6px 10px; max-width:180px; }
.solfedgist .part-speak-label { display:flex; align-items:center; gap:6px; font-size:0.85rem; cursor:pointer; }
.solfedgist .sf-loader { display:none; flex-direction:column; gap:5px; padding:0 4px; }
.solfedgist .sf-loader.active { display:flex; }
.solfedgist .sf-loader-bar { height:3px; background:var(--surface2); border-radius:2px; overflow:hidden; }
.solfedgist .sf-loader-fill { height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent2)); border-radius:2px; transition:width .3s; }
.solfedgist .sf-loader-text { font-size:0.75rem; color:var(--text2); text-align:center; }
.solfedgist .sf-loader-text.done { color:#2ecc71; }
.solfedgist .transport { display:flex; gap:12px; justify-content:center; align-items:center; }
.solfedgist .transport button { width:56px; height:56px; border-radius:50%; border:none; font-size:1.4rem; cursor:pointer; background:var(--surface); color:var(--text); transition:all .15s; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); }
.solfedgist .transport button:hover { background:var(--surface2); }
.solfedgist .transport button:active { transform:scale(0.95); }
.solfedgist .transport .btn-play { width:72px; height:72px; background:var(--accent); font-size:1.8rem; }
.solfedgist .transport .btn-play:hover { background:var(--accent2); }
.solfedgist .transport .btn-play.playing { background:#f39c12; }
.solfedgist .transport button:disabled { opacity:0.45; cursor:not-allowed; }
.solfedgist .transport .btn-demo { font-size:0.85rem; width:auto; padding:0 20px; border-radius:24px; }
.solfedgist .notes-viz { background:var(--surface); border-radius:var(--radius); padding:16px; min-height:80px; overflow:hidden; }
.solfedgist .notes-scroll { display:flex; gap:6px; flex-wrap:nowrap; align-items:flex-end; height:60px; transition:transform .3s; list-style:none; }
.solfedgist .note-pill { flex-shrink:0; padding:6px 14px; border-radius:20px; font-size:0.85rem; font-weight:700; background:var(--surface2); color:var(--text2); transition:all .2s; white-space:nowrap; cursor:default; }
.solfedgist .note-pill.current { background:var(--accent); color:#fff; transform:scale(1.15); box-shadow:0 0 20px rgba(233,69,96,.5); }
.solfedgist .note-pill.past { background:#1a3a2e; color:#2ecc71; }
.solfedgist .notes-empty { color:var(--text2); font-size:0.85rem; text-align:center; line-height:60px; }
.solfedgist .status { text-align:center; font-size:0.85rem; color:var(--text2); min-height:20px; transition:color .3s; }
.solfedgist .status.warn { color:var(--accent); }
/* Видимый фокус (NVDA) */
.solfedgist .transport button:focus-visible,
.solfedgist select:focus-visible,
.solfedgist input[type=range]:focus-visible,
.solfedgist input[type=checkbox]:focus-visible,
.solfedgist input[type=radio]:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.solfedgist .drop-zone:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
@media (max-width:500px) {
  .solfedgist .controls-row { flex-direction:column; }
  .solfedgist .part-controls { flex-direction:column; align-items:flex-start; }
  .solfedgist .transport button { width:48px; height:48px; font-size:1.2rem; }
  .solfedgist .transport .btn-play { width:60px; height:60px; font-size:1.5rem; }
}