/* FeniksFit — media.css: панель «Медиа» (музыка и приложения), мини-плеер */
#mdOv{position:fixed;inset:0;z-index:55;background:#0007;display:flex;justify-content:flex-end}
.mdPanel{width:min(56vw,940px);height:100%;background:linear-gradient(170deg,#1a1316f7,#0e1117f7);border-left:1px solid #ff7a1a55;box-shadow:-20px 0 60px #000a;
  display:flex;flex-direction:column;gap:10px;padding:clamp(12px,2vh,22px);animation:mdIn .3s cubic-bezier(.2,.8,.2,1) both;min-height:0}
@keyframes mdIn{from{transform:translateX(40px);opacity:0}}
.mdPanel header{display:flex;align-items:center;gap:14px}.mdPanel header b{font:800 clamp(18px,2.8vh,26px) Unbounded,system-ui}
.mdTabs{display:flex;gap:8px}.mdTabs button,.winMode button{background:#161b23;border:1px solid var(--line);border-radius:12px;padding:10px 16px;font-weight:700;font-size:15px;color:#c3cad4}
.mdTabs button.on,.winMode button.on{background:var(--accent);color:#111;border-color:var(--accent)}
.mdX{width:46px;height:46px;border-radius:12px;background:#161b23;border:1px solid var(--line);font-size:20px}
.mdMusic,.mdApps{display:flex;flex-direction:column;gap:10px;min-height:0;flex:1}
.mph{display:grid;place-items:center;background:linear-gradient(140deg,#2a1c18,#141820);color:#ff9a3a;font-size:22px}

/* сейчас играет */
.np{display:flex;gap:16px;background:#0c0f14;border:1px solid var(--line);border-radius:18px;padding:14px;align-items:stretch}
.npArt{width:clamp(110px,16vh,150px);aspect-ratio:1;flex:none;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px #000a}
.npArt img,.npArt .mph{width:100%;height:100%;object-fit:cover;font-size:52px}
.npR{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.npT{font-weight:800;font-size:clamp(16px,2.3vh,21px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#ffd36b}
.npA{font-size:15px;color:#e9edf2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.2em}
.npI{font-size:12.5px;color:#8b95a3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.2em}
.npSeek{display:flex;align-items:center;gap:10px;margin-top:auto;font-size:12.5px;color:#8b95a3;font-variant-numeric:tabular-nums}
.npSeek input{flex:1;accent-color:var(--accent)}
.npC{display:flex;align-items:center;gap:7px;margin-top:4px}.npC button{width:44px;height:44px;border-radius:12px;background:#161b23;border:1px solid var(--line);font-size:17px;padding:0;color:#c3cad4;flex:none}
.npC button.big{width:56px;height:56px;border-radius:50%;background:var(--accent);color:#111;font-size:22px;border:0}.npC button.on{border-color:var(--accent);color:var(--accent);background:#ff7a1a1a}
.npC button:not(.big):not(.on){opacity:.75}.npC button.fav.on{color:#ffc93a;border-color:#ffc93a}.npC button:disabled{opacity:.3}
.npC .vI{margin-left:auto;color:#8b95a3}.npC input{width:min(140px,12vw);accent-color:var(--accent)}.npC span:last-child{min-width:38px;text-align:right;color:#8b95a3;font-size:12.5px}

/* источники */
.srcs{display:flex;flex-wrap:wrap;gap:8px}
.srcs .chip{display:inline-flex;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#161b23;opacity:.6}
.srcs .chip.on{opacity:1;border-color:var(--accent)}.srcs .chip.on button:first-child{color:#fff}.srcs .chip.on button:first-child::before{content:"● ";color:var(--accent)}
.srcs .chip:not(.on) button:first-child::before{content:"○ "}.srcs .chip.need{opacity:1;border-color:#ffb43a}.srcs .chip.need button:first-child::before{content:""}
.srcs .chip button{background:none;border:0;padding:9px 12px;font-weight:700;font-size:14px;color:#c3cad4;max-width:340px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srcs .chip .x{padding:9px 11px;border-left:1px solid var(--line);color:#8b95a3}.srcs .chip .x:hover{color:#ff6b7a}
.srcs .add,.srcs .clr{background:none;border:1px dashed #ffb43a88;border-radius:12px;padding:9px 13px;font-weight:700;font-size:14px;color:#ffb43a}
.srcs .clr{border-color:#ff4d5e66;color:#ff8a94;margin-left:auto}

/* вид, поиск */
.mdBar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mdViews{display:flex;background:#0c0f14;border:1px solid var(--line);border-radius:12px;padding:3px;gap:2px}
.mdViews button{background:none;border:0;border-radius:9px;padding:8px 13px;font-weight:700;font-size:14px;color:#aab3c0}.mdViews button.on{background:var(--accent);color:#111}
#mdSort{margin-left:auto;background:#0c0f14;border:1px solid var(--line);border-radius:10px;padding:9px 10px;color:#c3cad4;font-size:14px}
.mdSearch{flex:1;min-width:200px;background:#0c0f14;border:1px solid #3a4250;border-radius:12px;padding:11px 14px;font-size:15px;color:#fff;outline:none}
.mdCount{color:#8b95a3;font-size:13px}
.mdHint{color:#6f778b;font-size:12px;line-height:1.45}

/* список треков */
.tracks{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin;padding-right:4px;overscroll-behavior:contain}
.tracks .mempty{color:#8b95a3;padding:30px 10px;text-align:center}
.tr{display:grid;grid-template-columns:44px 1fr minmax(0,32%) 48px 40px;align-items:center;gap:12px;padding:6px 8px;border-radius:12px;cursor:pointer;flex:none;position:relative}
.tr:hover{background:#ffffff0a}.tr.on{background:#ff7a1a1f}.tr.on .mtt b{color:#ffd36b}
.tr .tc{width:44px;height:44px;border-radius:8px;object-fit:cover;font-size:16px}
.mtt{min-width:0;display:flex;flex-direction:column}.mtt b{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtt small{font-size:12.5px;color:#8b95a3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr .tm{font-size:12.5px;color:#7d8696;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr .td{font-size:13px;color:#8b95a3;text-align:right;font-variant-numeric:tabular-nums}
.tr .st{background:none;border:0;font-size:20px;color:#5d6676;padding:6px}.tr .st.on{color:#ffc93a}
.tr .eq{position:absolute;left:8px;top:6px;width:44px;height:44px;border-radius:8px;background:#000a;display:none;align-items:flex-end;justify-content:center;gap:3px;padding-bottom:12px}
.tr.on .eq{display:flex}.tr .eq i{width:4px;height:6px;background:var(--accent);border-radius:2px}
.tr.play .eq i{animation:eq .9s ease-in-out infinite alternate}.tr.play .eq i:nth-child(2){animation-delay:-.4s}.tr.play .eq i:nth-child(3){animation-delay:-.7s}
@keyframes eq{0%{height:4px}100%{height:20px}}
.gh{display:grid;grid-template-columns:16px 52px 1fr 46px;align-items:center;gap:12px;padding:8px;border-radius:12px;background:#ffffff06;cursor:pointer;flex:none;margin-top:4px}
.gh:hover{background:#ffffff0d}.gh .car{color:#8b95a3;transition:transform .2s}.gh.open .car{transform:rotate(90deg)}.gh.open{background:#ff7a1a14}
.gh .gc{width:52px;height:52px;border-radius:9px;object-fit:cover;font-size:22px}
.gh .gp{width:42px;height:42px;border-radius:50%;border:0;background:var(--accent);color:#111;font-size:16px}
.mgl{display:flex;flex-direction:column;gap:2px;padding-left:20px;flex:none}
.tracks .mmore{flex:none;margin:8px auto;background:#161b23;border:1px solid var(--line);border-radius:12px;padding:10px 18px;color:#c3cad4;font-weight:700}

/* приложения */
.winMode{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.winMode span{color:#8b95a3;margin-right:4px}
.appGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.appGrid button{display:flex;flex-direction:column;align-items:center;gap:10px;background:#141820;border:1px solid var(--line);border-radius:16px;padding:16px 8px}
.appGrid button:active{transform:scale(.97)}.appGrid b{font-size:14px}
.appGrid .ai{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;font:800 28px system-ui;color:#fff;box-shadow:0 6px 18px #0008}

/* мини-плеер в шапке тренировок: обложка + название/исполнитель */
.miniPl{display:flex;align-items:center;gap:8px;background:#0008;border:1px solid #ffffff1a;border-radius:14px;padding:4px 6px;max-width:min(34vw,480px)}
.miniPl button{background:#161b23;border:1px solid var(--line);border-radius:9px;padding:6px 10px;font-size:13px;font-weight:700;color:#e9edf2;flex:none}
.miniPl .mpC:empty{display:none}.miniPl .mpI{width:40px;height:40px;border-radius:8px;object-fit:cover;display:block;font-size:16px;cursor:pointer}
.miniPl.playing .mpI{box-shadow:0 0 0 2px var(--accent)}
.miniPl .mpT{display:flex;flex-direction:column;min-width:0;max-width:min(18vw,250px);cursor:pointer;line-height:1.2}
.miniPl .mpT b{font-size:13px;color:#ffd36b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.miniPl .mpT small{font-size:11.5px;color:#aab3c0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.miniPl .mpT:empty{display:none}
#ride .top .miniPl{position:absolute;right:16px;top:calc(100% - 2px);z-index:2}
@media (max-width:1100px){.mdPanel{width:100%}.appGrid{grid-template-columns:repeat(2,1fr)}.tr{grid-template-columns:44px 1fr 48px 40px}.tr .tm{display:none}}
/* ---------- шапка тренировки: читаемый мини-плеер и кнопка симуляции ---------- */
#wk .wTop{position:relative}
#wk .miniPl{gap:10px;padding:6px 8px;border-radius:16px;max-width:min(44vw,620px);background:#11151be0}
#wk .miniPl .mpI{width:clamp(44px,6vh,56px);height:clamp(44px,6vh,56px);border-radius:10px;font-size:22px}
#wk .miniPl .mpT{max-width:min(22vw,320px)}
#wk .miniPl .mpT b{font-size:clamp(14px,2vh,18px)}#wk .miniPl .mpT small{font-size:clamp(12px,1.6vh,15px)}
#wk .miniPl .mpV,#wk .miniPl .mpN,#wk .miniPl .mpP{width:clamp(40px,5.6vh,50px);height:clamp(40px,5.6vh,50px);padding:0;font-size:17px;border-radius:12px}
#wk .miniPl .mpP{border-radius:50%;background:var(--accent);border-color:var(--accent);color:#111;font-size:19px}
#wk .miniPl .mpB{padding:10px 12px;font-size:14px}
.simTg{display:flex;align-items:center;gap:6px;background:#161b23;border:1px solid var(--line);border-radius:12px;padding:8px 12px;font-size:13px;font-weight:700;color:#aab3c0;flex:none}
.simTg.on{color:var(--accent);border-color:var(--accent)}.simTg i{font-style:normal;opacity:.7}.simTg.hidden{display:none}
#wk .wSim{position:absolute;right:0;top:calc(100% + 6px);z-index:30;padding:10px 12px;background:#11151bf2;box-shadow:0 12px 30px #000a;font-size:13px}
#wk .wSim.simShut,#ride .sim.simShut{display:none!important}
@media (max-width:1000px){#wk .wSim:not(.simShut){display:flex}}
#wk .soundWrap #bSound{white-space:nowrap;background:#161b23;border:1px solid var(--line);border-radius:12px;padding:8px 14px;font-size:14px;font-weight:700;flex:none}
#wk .wTop .soundWrap{flex:none}
#wk .wTitle{min-width:0;flex:1 1 auto}#wk .wName{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#wk .miniPl{flex:0 1 auto}#wk .miniPl .mpT{min-width:clamp(90px,11vw,220px)}
.tr .st.hd{font-size:18px;color:#5d6676}.tr .st.hd:hover{color:#ff4d5e}
#mdViews [data-v="hid"]{opacity:.85}
.tr{grid-template-columns:44px 1fr minmax(0,32%) 48px 40px 40px}
@media (max-width:1100px){.tr{grid-template-columns:44px 1fr 48px 40px 40px}}

/* Верхняя панель тренировки на экранах ~1280–1700 px (мини-ПК тренажёра): ничего не наезжает друг на друга.
   Название трека сжимается с многоточием, у «Симуляции» остаётся только значок, часы без запаса ширины. */
#wk .miniPl{min-width:0}#wk .miniPl .mpT{min-width:0}
@media (max-width:1700px){
  #wk .wTop{gap:10px}
  #wk .wClock{min-width:0;font-size:clamp(20px,3.8vh,40px)}
  #wk .simTg span,#ride .simTg span{display:none}
  #wk .simTg,#ride .simTg{padding:8px 10px}
  #wk .miniPl{gap:8px;max-width:min(40vw,560px)}
  #wk .miniPl .mpB{padding:8px 10px}
  #wk .miniPl .mpT{max-width:min(16vw,220px)}
}
/* 02.11.2026: вкладка «Радио» (radio.js) */
.mdRadio{display:flex;flex-direction:column;gap:10px;min-height:0;flex:1}
.rdNow{display:flex;align-items:center;gap:12px;background:#0c0f14;border:1px solid var(--line);border-radius:18px;padding:12px 14px}
.rdNow .rdNL{width:64px;height:64px;border-radius:12px;object-fit:contain;background:#fff;flex:none;font-size:30px}
.rdNow .rdNL.mph{background:linear-gradient(140deg,#2a1c18,#141820)}
.rdNow .mtt{flex:1}.rdNow .mtt b{font-size:18px;color:#ffd36b}.rdNow .mtt small{font-size:13px}
.rdNow button{width:46px;height:46px;border-radius:12px;background:#161b23;border:1px solid var(--line);font-size:18px;color:#c3cad4;flex:none;padding:0}
.rdNow button.big{width:56px;height:56px;border-radius:50%;background:var(--accent);color:#111;border:0;font-size:22px}
.rdNow .st{background:none;border:0;font-size:24px;color:#5d6676}.rdNow .st.on{color:#ffc93a}
.rdNow .vI{color:#8b95a3}.rdNow input{width:min(130px,10vw);accent-color:var(--accent)}
.rdDot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ff4d5e;margin-right:6px;animation:rdPulse 1.4s ease-in-out infinite}
@keyframes rdPulse{50%{opacity:.25}}
.rdBack{background:#161b23;border:1px solid var(--accent);border-radius:12px;padding:9px 14px;font-weight:700;font-size:14px;color:var(--accent)}
.rdGrid{flex:1;min-height:0;overflow:auto;display:grid;gap:8px;align-content:start;scrollbar-width:thin;padding-right:4px;overscroll-behavior:contain}
.rdGrid .mempty{grid-column:1/-1;color:#8b95a3;padding:30px 10px;text-align:center;line-height:1.6}
.rdGrid.cty{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.rdC{display:flex;flex-direction:column;align-items:center;gap:6px;background:#11151c;border:1px solid var(--line);border-radius:14px;padding:12px 8px;color:#e9edf2}
.rdC img{width:64px;height:43px;object-fit:cover;border-radius:5px;box-shadow:0 3px 10px #0008}
.rdC b{font-size:14px;text-align:center;line-height:1.2}.rdC small{font-size:12px;color:#8b95a3}
.rdC:active,.rdS:active{transform:scale(.98)}
.rdGrid.st{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.rdS{display:flex;align-items:center;gap:10px;background:#11151c;border:1px solid var(--line);border-radius:14px;padding:8px;cursor:pointer;min-width:0}
.rdS.on{border-color:var(--accent);background:#ff7a1a1f}.rdS.on .mtt b{color:#ffd36b}
.rdS .rdL{width:56px;height:56px;border-radius:10px;object-fit:contain;background:#fff;flex:none;font-size:24px}
.rdS .rdL.mph{background:linear-gradient(140deg,#2a1c18,#141820)}
.rdS .st{background:none;border:0;font-size:22px;color:#5d6676;padding:6px;flex:none}.rdS .st.on{color:#ffc93a}
.rdRetry{margin-top:10px;background:var(--accent);color:#111;border:0;border-radius:10px;padding:10px 18px;font-weight:700}
.miniPl .mpI{object-fit:contain}
.rdOff{color:#ffb43a!important;font-size:16px}
.apNoNet{background:#2a1c10;border:1px solid #ffb43a88;color:#ffb43a;border-radius:12px;padding:10px 14px;font-weight:700;font-size:14px}
