/* ================= LAN.FM PLAYER ================= */
#lanplayer{
  --lp-hl:#EC065D;
  --lp-c1:#6906FF; --lp-c2:#07FFD9; --lp-c3:#630781; --lp-c4:#EC065D;
  --lp-bg:#1d2028; --lp-mute:#7a89ab;
  position:absolute;left:0;top:0;width:100%;height:100%;z-index:300;overflow:hidden;
  background:linear-gradient(rgba(29,32,40,.5),rgba(29,32,40,1));
  color:#fff;font-family:'Saira Condensed','Roboto Condensed',sans-serif;font-weight:300;
  -webkit-font-smoothing:antialiased;
}
#lanplayer *{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip;overscroll-behavior-x:none;max-width:100%}
html{touch-action:pan-y;-webkit-text-size-adjust:100%;text-size-adjust:100%}
#lp-viz{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:.6}
.lp-inner{
  position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2vh;padding:76px 16px 64px;text-align:center;
}
.lp-inner > *{flex-shrink:0}   /* ничего не сплющивается, если по высоте тесно */
.lp-name{position:absolute;top:14px;left:72px;right:72px;font-size:22px;letter-spacing:.25em;text-transform:uppercase;color:var(--lp-mute)}

.lp-cover{
  display:block;cursor:pointer;transition:transform .4s cubic-bezier(.2,.8,.2,1);
  position:relative;width:min(36vh,66vw);aspect-ratio:1;border-radius:50%;flex:none;
  box-shadow:0 0 calc(30px + var(--lp-beat,0) * 50px) rgba(236,6,93,calc(.25 + var(--lp-beat,0) * .45)),0 0 0 2px rgba(255,255,255,.08);
}
.lp-cover img{
  width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;transition:opacity .45s;
  animation:lp-spin 24s linear infinite;animation-play-state:paused;
}
#lanplayer.is-playing .lp-cover img{animation-play-state:running}
.lp-cover img.fade{opacity:0}
.lp-cover::after{
  content:'';position:absolute;left:50%;top:50%;width:13%;height:13%;transform:translate(-50%,-50%);border-radius:50%;
  background:var(--lp-bg);box-shadow:0 0 0 3px rgba(255,255,255,.15);
}
@keyframes lp-spin{to{transform:rotate(360deg)}}
/* заглушка-логотип: вписываем целиком, без «дырки»; крутится как пластинка во время игры */
.lp-cover.is-logo{background:radial-gradient(circle,#2a2e3a,#1d2028 70%)}
.lp-cover.is-logo img{object-fit:contain;padding:8%}
.lp-cover.is-logo::after{display:none}

.lp-meta{width:100%;max-width:900px;margin-top:min(8vh,13vw)} /* место под полоски визуализатора */
.lp-marquee{overflow:hidden;white-space:nowrap;padding:.12em 0;margin:-.12em 0}  /* запас сверху/снизу, чтобы буквы не обрезались */
.lp-marquee .lp-track{display:inline-flex}
.lp-marquee.run{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.lp-marquee.run .lp-track span{padding-right:3em}
/* движение бегущей строки задаёт player.js (transform), CSS-анимации нет */
@keyframes lp-slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes lp-slide-rev{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
.lp-title{font-weight:100;font-size:calc(clamp(30px,6vh,64px) * var(--lp-tm,1));line-height:1.15}
/* телефон: название трека на 10% мельче */
@media (max-width:768px){#lanplayer{--lp-tm:.9}}
.lp-artist{font-weight:300;font-size:clamp(18px,3vh,30px);line-height:1.25;color:rgba(255,255,255,.7);margin-top:2px}
.lp-progress{max-width:420px;margin:12px auto 0;position:relative;z-index:1;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--lp-mute);font-variant-numeric:tabular-nums}
.lp-air{display:flex;justify-content:center;align-items:center;gap:10px;margin:7px auto 0;font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lp-mute);font-variant-numeric:tabular-nums;position:relative;z-index:1}
.lp-air[hidden],.lp-air [hidden]{display:none}
.lp-air svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;margin-right:-3px}
.lp-bar{flex:1;height:2px;background:rgba(255,255,255,.12);border-radius:1px;overflow:hidden}
.lp-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--lp-c2),var(--lp-c1),var(--lp-hl))}

.lp-controls{display:flex;align-items:center;justify-content:center;gap:clamp(28px,8vw,56px);margin-top:1vh}
/* большая Play по центру: белый круг, значок прорезан насквозь; при наведении — розовая */
.lp-play{
  width:112px;height:112px;flex:none;border-radius:50%;border:0;padding:0;cursor:pointer;
  color:#fff;background:transparent;display:block;
  box-shadow:0 12px 40px rgba(0,0,0,.4);transition:transform .15s,color .25s,box-shadow .3s;
}
#lanplayer.is-playing .lp-play{box-shadow:0 0 calc(24px + var(--lp-beat,0) * 30px) rgba(236,6,93,.5)}
.lp-play:hover,.lp-play:focus-visible{color:var(--lp-hl)}
.lp-play:active{transform:scale(.94)}
.lp-play svg{width:100%;height:100%;display:block}
.lp-play .lp-glyph{display:none}
.lp-play.loading svg{animation:lp-spin 1s linear infinite}
/* значки по бокам: эквалайзер (смена анимации) и LIVE */
.lp-icon{
  position:relative;width:64px;height:64px;flex:none;display:grid;place-items:center;
  background:none;border:0;padding:0;color:var(--lp-hl);
}
.lp-icon svg{width:52px;height:52px;overflow:visible}
button.lp-icon{cursor:pointer;transition:transform .15s,filter .3s}
button.lp-icon:hover{filter:drop-shadow(0 0 8px rgba(236,6,93,.7))}
button.lp-icon:active{transform:scale(.9)}
.lp-live{opacity:.4;transition:opacity .4s}
#lanplayer.is-playing .lp-live{opacity:1}
#lanplayer.is-playing .lp-live .lp-waves{animation:lp-blink 1.6s ease-in-out infinite}
@keyframes lp-blink{50%{opacity:.3}}
.lp-toast{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:4px;white-space:nowrap;
  font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .3s;pointer-events:none;
}
.lp-toast.show{opacity:.85}
/* громкость — только там, где есть мышь; на телефонах громкость кнопками */
.lp-vol{display:flex;align-items:center;gap:8px;color:var(--lp-mute);width:200px;max-width:60vw}
.lp-vol svg{width:20px;height:20px;flex:none}
.lp-vol input{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:2px;cursor:pointer;margin:0;
  background:linear-gradient(90deg,var(--lp-hl) 0 var(--v,90%),rgba(255,255,255,.18) var(--v,90%))}   /* заполненная часть — розовая, как было в Luna */
.lp-vol input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--lp-hl);box-shadow:0 0 10px rgba(236,6,93,.7)}
.lp-vol input::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--lp-hl);box-shadow:0 0 10px rgba(236,6,93,.7)}
.lp-vol svg{color:var(--lp-hl)}
@media (hover:none),(pointer:coarse){.lp-vol{display:none}}
.lp-next{font-size:16px;line-height:1.35;color:var(--lp-mute);max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-next b{font-weight:500;color:#fff}
/* «Что играло ранее» */
.lp-histbtn{
  position:fixed;top:12px;right:12px;z-index:430;width:44px;height:44px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(122,137,171,.4);background:rgba(29,32,40,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#7a89ab;display:grid;place-items:center;transition:color .25s,border-color .25s;
}
.lp-histbtn:hover,.lp-histbtn[aria-expanded="true"]{color:#fff;border-color:rgba(255,255,255,.6)}
.lp-histbtn svg{grid-area:1/1;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:opacity .2s,transform .25s}
.lp-histbtn .ic-x{opacity:0;transform:rotate(-90deg)}
.lp-histbtn[aria-expanded="true"] .ic-x{opacity:1;transform:none}
.lp-histbtn[aria-expanded="true"] .ic-clock{opacity:0;transform:rotate(90deg)}
.lp-histdim{position:fixed;inset:0;z-index:410;background:rgba(10,10,16,.5);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.lp-histdim.open{opacity:1;visibility:visible}
.lp-hist{
  position:fixed;z-index:420;display:flex;flex-direction:column;visibility:hidden;text-align:left;
  background:rgba(24,26,34,.92);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  transition:transform .32s cubic-bezier(.2,.8,.2,1),visibility .32s;
  /* телефон: шторка снизу */
  left:0;right:0;bottom:0;max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);padding:10px 8px calc(14px + env(safe-area-inset-bottom));
  border-radius:26px 26px 0 0;border-top:1px solid rgba(255,255,255,.1);box-shadow:0 -20px 60px rgba(0,0,0,.5);transform:translateY(105%);
}
.lp-hist.open{visibility:visible;transform:translateY(var(--drag,0px))}
.lp-hist-grab{width:44px;height:5px;border-radius:3px;background:rgba(255,255,255,.25);margin:0 auto 10px;flex:none}
.lp-hist-head{padding:4px 12px 10px;flex:none;font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--lp-mute)}
/* компьютер: панель справа, зеркально меню */
@media (min-width:769px) and (hover:hover){
  .lp-hist{top:0;bottom:0;left:auto;right:0;width:380px;max-height:none;padding:72px 10px 20px;border-radius:0;border-top:0;
    border-left:1px solid rgba(255,255,255,.08);box-shadow:-20px 0 60px rgba(0,0,0,.45);transform:translateX(105%)}
  .lp-hist.open{transform:none}
  .lp-hist-grab{display:none}
  .lp-hist-head{padding:0 12px 14px}
}
.lp-hist-list{list-style:none;margin:0;padding:0 8px 10px;overflow-y:auto;overscroll-behavior:contain}
.lp-hist-list li{margin:0}
.lp-hist-list a{
  display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:7px 10px;border-radius:12px;
  color:#fff;text-decoration:none;transition:background .2s;text-align:left;
}
.lp-hist-list a:hover,.lp-hist-list a:focus-visible{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.lp-hist-list img{width:44px;height:44px;border-radius:8px;object-fit:cover;background:#1d2028;display:block}
.lp-hist-list img.logo{object-fit:contain;padding:3px}
.lp-hist-t{display:block;font-size:17px;font-weight:300;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-hist-a{display:block;font-family:'Saira Condensed','Roboto Condensed',sans-serif;font-size:14px;color:var(--lp-mute);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-hist-time{font-size:14px;color:var(--lp-mute);font-variant-numeric:tabular-nums}
.lp-hist-empty{padding:14px 10px;color:var(--lp-mute);font-size:15px}
/* заказ трека */
.lp-rqbtn{
  position:fixed;right:16px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:395;width:56px;height:56px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:#EC065D;color:#fff;display:grid;place-items:center;box-shadow:0 10px 30px rgba(236,6,93,.5);transition:transform .15s,box-shadow .25s;
}
.lp-rqbtn[hidden]{display:none}
.lp-rqbtn:hover{box-shadow:0 12px 36px rgba(236,6,93,.7);transform:translateY(-2px)}
.lp-rqbtn:active{transform:scale(.94)}
.lp-rqbtn svg,.lp-rq svg,.lp-rqbadge svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.lp-rqbtn svg{width:28px;height:28px}
.lp-rqbadge{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:5px 12px;border-radius:999px;background:#EC065D;
  color:#fff;font-size:15px;letter-spacing:.06em;box-shadow:0 2px 10px rgba(0,0,0,.18)}   /* сплошная — поверх визуализации полупрозрачную было не видно */
.lp-rqbadge[hidden]{display:none}
.lp-rqbadge svg{width:15px;height:15px;fill:#fff;stroke:#fff}
.lp-hist-heart{color:#EC065D;margin-left:4px}
.lp-rq{color:#fff}
.lp-rq-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 4px 10px 12px;flex:none}
.lp-rq-head b{display:block;font-size:14px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--lp-mute);line-height:1.3}
.lp-rq-head small{display:block;margin-top:3px;font-size:13px;color:#5d6789;line-height:1.25}
.lp-rq-close{width:32px;height:32px;flex:none;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.07);color:#c9d0e4;cursor:pointer;display:grid;place-items:center}
.lp-rq-close:hover{background:rgba(255,255,255,.14);color:#fff}
.lp-rq-close svg{width:18px;height:18px}
.lp-rq-search{display:flex;align-items:center;gap:8px;margin:0 8px 8px;padding:0 8px 0 12px;border-radius:12px;flex:none;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#7a89ab;cursor:text}
.lp-rq-search:focus-within{border-color:#EC065D}
#lanplayer .lp-rq-search input:focus-visible{outline:none}
/* защита от стилей сайта (landing.css делает поля капсом и жирными) */
#lanplayer .lp-rq-search input,#lanplayer .lp-rq-search input::placeholder{
  font-family:'Saira Condensed','Roboto Condensed',sans-serif!important;font-weight:300!important;font-size:17px!important;
  text-transform:none!important;letter-spacing:normal!important;height:auto!important;margin:0!important;box-shadow:none!important}
.lp-rq-search > svg{width:18px;height:18px}
.lp-rq-search input{flex:1;min-width:0;padding:10px 0;border:0;outline:0;background:none;color:#fff;
  font-family:'Saira Condensed','Roboto Condensed',sans-serif;font-size:19px;-webkit-appearance:none;appearance:none}
.lp-rq-search input::placeholder{color:#7a89ab}
.lp-rq-search input::-webkit-search-cancel-button{display:none}
.lp-rq-clear{width:30px;height:30px;padding:0;border:0;border-radius:50%;background:none;color:#7a89ab;cursor:pointer;display:grid;place-items:center}
.lp-rq-clear[hidden]{display:none}
.lp-rq-clear svg{width:18px;height:18px}
.lp-rq-note{display:flex;align-items:center;gap:10px;margin:0 8px 8px;padding:9px 12px;border-radius:12px;font-size:15px;line-height:1.25;flex:none}
.lp-rq-note[hidden]{display:none}
.lp-rq-note svg{width:18px;height:18px}
.lp-rq-note.ok{background:rgba(7,255,217,.12);color:#9ff7ea}
.lp-rq-note.err{background:rgba(236,6,93,.14);color:#ff9cc1}
.lp-rq-list{list-style:none;margin:0;padding:0 4px;overflow-y:auto;overscroll-behavior:contain}
.lp-rq-list li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;margin:0;padding:7px 10px;border-radius:12px;transition:background .15s}
@media (hover:hover){.lp-rq-list li:not(.lp-rq-morewrap):not(.lp-rq-hint):not(.lp-rq-empty):hover{background:rgba(255,255,255,.07)}}
.lp-rq-list li.is-touch,.lp-rq-list li.is-sel,.lp-hist-list a.is-touch{background:rgba(255,255,255,.09)}   /* строка под пальцем на телефоне */
.lp-rq-list li.lp-rq-hint{display:block;padding:14px 16px 6px;font-size:14px;line-height:1.35;color:#7a89ab;text-align:center}
/* телефон: шторка заказа всегда одной высоты — поле поиска не уезжает вниз, когда результатов мало */
@media not all and (min-width:769px) and (hover:hover){.lp-rq{height:calc(100vh - 76px);height:calc(100dvh - 76px)}}
.lp-rq-list img{width:44px;height:44px;border-radius:8px;object-fit:cover;background:#1d2028;display:block}
.lp-rq-list img.logo{object-fit:contain;padding:3px}
.lp-rq-t{display:block;font-size:17px;font-weight:300;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-rq-a{display:block;font-size:14px;color:#7a89ab;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-rq-go{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border:0;border-radius:999px;background:#EC065D;color:#fff;cursor:pointer;
  font-family:'Saira Condensed','Roboto Condensed',sans-serif;font-size:14px;letter-spacing:.03em;line-height:1.3;white-space:nowrap;transition:background .2s,color .2s}
.lp-rq-go:hover{background:#ff2a7a}
.lp-rq-go[hidden]{display:none}
/* трек недавно играл / в эфире / уже заказан — заказать нельзя */
.lp-rq-list li.is-recent img,.lp-rq-list li.is-recent .lp-rq-t,.lp-rq-list li.is-recent .lp-rq-a{opacity:.5}
.lp-rq-tag{padding:4px 10px;border:1px solid rgba(255,255,255,.16);border-radius:999px;font-size:13px;line-height:1.3;color:var(--lp-mute);white-space:nowrap}
.lp-rq-go svg{width:14px;height:14px}
.lp-rq-go.done{background:rgba(7,255,217,.14);color:#9ff7ea;cursor:default}
.lp-rq-go:disabled:not(.done){background:rgba(255,255,255,.07);color:#5d6789;cursor:default}
.lp-rq-empty{display:block!important;padding:18px 10px;color:#7a89ab;font-size:16px;text-align:center}
.lp-rq-list li.lp-rq-morewrap{display:flex;justify-content:center;padding:10px 8px 4px}
.lp-rq-more{display:block;margin:0;width:min(320px,100%);white-space:nowrap;padding:10px 24px;border:1px solid rgba(122,137,171,.4);border-radius:999px;background:none;color:#c9d0e4;cursor:pointer;
  font-family:'Saira Condensed','Roboto Condensed',sans-serif;font-size:15px}
@media (min-width:769px) and (hover:hover){ .lp-rq{width:420px} .lp-rqbtn{right:28px;bottom:28px} }
@media (max-width:480px){.lp-rq-list li{grid-template-columns:40px minmax(0,1fr) auto;gap:10px}.lp-rq-list img{width:40px;height:40px}
.lp-hist-list a{grid-template-columns:40px minmax(0,1fr) auto;gap:10px}.lp-hist-list img{width:40px;height:40px}}
@media (prefers-reduced-motion:reduce){.lp-hist,.lp-histdim,.lp-histbtn svg{transition:none}}
.lp-down{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%) rotate(90deg);
  color:var(--lp-mute);font-size:30px;line-height:1;text-decoration:none;transition:color .5s;
}
.lp-down:hover{color:#882578;text-decoration:none}
#lanplayer :focus-visible{outline:2px solid var(--lp-c2);outline-offset:3px}
/* ===== меню: телефон — шторка снизу, компьютер — боковая панель ===== */
#lpm,#lpm *{box-sizing:border-box;margin:0;float:none;font-family:'Play','Saira Condensed',sans-serif;letter-spacing:normal;text-transform:none;line-height:1.25;text-align:left}
#lpm a,#lpm a:hover,#lpm a:focus{color:#fff;text-decoration:none}
#lpm svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#lpm .lpm-btn{
  position:fixed;top:12px;left:12px;z-index:430;width:44px;height:44px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(122,137,171,.4);background:rgba(29,32,40,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#7a89ab;display:grid;place-items:center;transition:color .25s,border-color .25s;
}
#lpm .lpm-btn:hover,#lpm.open .lpm-btn{color:#fff;border-color:rgba(255,255,255,.6)}
#lpm .lpm-btn path{transition:transform .25s;transform-origin:12px 12px}
#lpm.open .lpm-btn .m1{transform:translateY(3px) rotate(45deg)}
#lpm.open .lpm-btn .m2{transform:translate(3px,-3px) rotate(-45deg) scaleX(1.6)}
/* угловые кнопки и кнопка заказа — тем же розовым, что Play, эквалайзер и LIVE (--lp-hl) */
#lpm .lpm-btn,.lp-histbtn,.lp-rqbtn{
  color:var(--lp-hl);border:1px solid rgba(236,6,93,.55);background:rgba(29,32,40,.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 0 14px rgba(236,6,93,.22);
  transition:color .25s,border-color .25s,box-shadow .25s,background .25s,transform .15s;
}
#lpm .lpm-btn:hover,#lpm.open .lpm-btn,.lp-histbtn:hover,.lp-histbtn[aria-expanded="true"],.lp-rqbtn:hover,.lp-rqbtn[aria-expanded="true"]{
  color:#fff;border-color:var(--lp-hl);background:rgba(236,6,93,.22);box-shadow:0 0 22px rgba(236,6,93,.45)}
.lp-rqbtn:hover{transform:translateY(-2px)}
#lpm .lpm-dim{position:fixed;inset:0;z-index:410;background:rgba(10,10,16,.5);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
#lpm.open .lpm-dim{opacity:1;visibility:visible}
#lpm .lpm-panel{
  position:fixed;z-index:420;display:flex;flex-direction:column;color:#fff;visibility:hidden;
  background:rgba(24,26,34,.92);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  transition:transform .32s cubic-bezier(.2,.8,.2,1),visibility .32s;
}
#lpm.open .lpm-panel{visibility:visible}

/* --- телефон: шторка снизу --- */
#lpm .lpm-panel{left:0;right:0;bottom:0;max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);overflow-y:auto;padding:10px 16px calc(22px + env(safe-area-inset-bottom));
  border-radius:26px 26px 0 0;border-top:1px solid rgba(255,255,255,.1);box-shadow:0 -20px 60px rgba(0,0,0,.5);transform:translateY(105%)}
#lpm.open .lpm-panel{transform:translateY(var(--drag,0px))}
#lpm .lpm-ver{padding:14px 4px 0;font-size:11px;color:#5d6789;letter-spacing:.04em}
@media (min-width:769px) and (hover:hover){#lpm .lpm-ver{padding:14px 22px 0}}
#lpm .lpm-grab{width:44px;height:5px;border-radius:3px;background:rgba(255,255,255,.25);margin:0 auto 14px;flex:none}
#lpm .lpm-club{display:flex;align-items:center;gap:14px;padding:14px;border-radius:18px;
  background:linear-gradient(120deg,#6906FF 0%,#630781 50%,#EC065D 100%);transition:box-shadow .25s,transform .2s}
#lpm .lpm-club:hover,#lpm .lpm-club:focus-visible{box-shadow:0 0 0 2px #ff5fa2,0 0 22px rgba(236,6,93,.55),0 0 34px rgba(105,6,255,.35);transform:translateY(-1px)}
#lpm .lpm-club img{width:56px;height:56px;border-radius:14px;background:#1d2028;object-fit:contain;padding:4px;flex:none}
#lpm .lpm-clubtxt{display:flex;flex-direction:column;min-width:0}
#lpm .lpm-club b{font-size:19px;font-weight:700}
#lpm .lpm-club small{font-size:14px;color:rgba(255,255,255,.8)}
#lpm .lpm-club > svg{margin-left:auto}
#lpm .lpm-items{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
#lpm .lpm-item{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px;min-height:86px;border-radius:16px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);font-size:16px;color:#fff;transition:background .2s}
#lpm a.lpm-item:active,#lpm a.lpm-item:hover,#lpm .lpm-files:hover,#lpm .lpm-files:focus-within{background:rgba(255,255,255,.1)}
#lpm .lpm-item > svg{color:#07FFD9}
#lpm .lpm-item small{display:flex;gap:12px;margin-top:6px}
#lpm .lpm-item small a{font-size:13px;color:#9aa6c6;letter-spacing:.06em}
#lpm .lpm-item small a:hover{color:#fff}

/* --- компьютер: боковая панель слева --- */
@media (min-width:769px) and (hover:hover){
  #lpm .lpm-panel{top:0;bottom:0;left:0;right:auto;width:340px;max-height:none;padding:72px 0 24px;border-radius:0;border-top:0;
    border-right:1px solid rgba(255,255,255,.08);box-shadow:20px 0 60px rgba(0,0,0,.45);transform:translateX(-105%)}
  #lpm.open .lpm-panel{transform:none}
  #lpm .lpm-grab{display:none}
  #lpm .lpm-club{margin:0 16px 14px;padding:12px}
  #lpm .lpm-club img{width:48px;height:48px}
  #lpm .lpm-club b{font-size:18px;white-space:nowrap}
  #lpm .lpm-mob{display:none}
  #lpm .lpm-club small{font-size:13px;color:rgba(255,255,255,.8)}
  #lpm .lpm-club > svg{width:18px;height:18px;color:#fff}
  #lpm .lpm-items{display:flex;flex-direction:column;gap:0;margin:0}
  #lpm .lpm-item{position:relative;flex-direction:row;align-items:center;gap:14px;min-height:0;padding:14px 22px;border:0;border-radius:0;background:none;font-size:17px;color:#e6e9f2}
  #lpm .lpm-item > svg{color:#7a89ab}
  #lpm a.lpm-item:hover{background:linear-gradient(90deg,rgba(236,6,93,.18),transparent)}
  #lpm a.lpm-item:hover > svg{color:#EC065D}
  #lpm a.lpm-item:hover::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:#EC065D}
  #lpm .lpm-files{margin-top:auto}
  #lpm .lpm-files{flex-direction:column;align-items:flex-start;gap:8px;padding-top:18px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#7a89ab}
  #lpm .lpm-files > svg{display:none}
  #lpm .lpm-files > span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#7a89ab}
  #lpm .lpm-files small{gap:16px;margin:8px 0 0}
  #lpm .lpm-files small a{font-size:15px;color:#c9d0e4;letter-spacing:.04em;text-transform:none}
  #lpm .lpm-files:hover,#lpm .lpm-files:focus-within{background:linear-gradient(90deg,rgba(236,6,93,.18),transparent)}
  #lpm .lpm-files:hover::before,#lpm .lpm-files:focus-within::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:#EC065D}
  #lpm .lpm-items{flex:1}
}
/* «Об авторе» */
.lp-about-dim{position:fixed;inset:0;z-index:440;background:rgba(10,10,16,.6);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.lp-about-dim.open{opacity:1;visibility:visible}
.lp-about{position:fixed;left:50%;top:50%;z-index:450;width:min(420px,calc(100vw - 32px));padding:28px 24px 26px;border-radius:22px;text-align:center;color:#fff;
  background:rgba(24,26,34,.95);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,140,195,.35);
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 40px rgba(255,110,175,.15);
  opacity:0;visibility:hidden;transform:translate(-50%,-46%) scale(.96);transition:opacity .25s,transform .25s,visibility .25s}
.lp-about.open{opacity:1;visibility:visible;transform:translate(-50%,-50%)}
.lp-about h2{margin:0 0 12px;font-family:'Saira Condensed','Roboto Condensed',sans-serif;font-weight:500;font-size:24px;letter-spacing:.08em;text-transform:uppercase;color:#ff9ccb}
.lp-about p{margin:0;font-family:'Saira Condensed','Roboto Condensed',sans-serif;font-weight:300;font-size:19px;line-height:1.45;color:#dfe3ee}
.lp-about-x{position:absolute;top:12px;right:12px}
.lp-about svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
/* качество звука */
#lpm .lpm-quality{margin-top:12px}
#lpm .lpm-quality[hidden]{display:none}
#lpm .lpm-qcap{padding:0 4px 8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#7a89ab}
#lpm .lpm-seg{display:flex;gap:4px;padding:4px;border-radius:14px;background:rgba(255,255,255,.06)}
#lpm .lpm-seg button{flex:1;padding:10px 0;border:0;border-radius:10px;background:none;color:#c9d0e4;cursor:pointer;
  font-family:'Play',sans-serif;font-size:15px;text-align:center;transition:background .2s,color .2s}
#lpm .lpm-seg button small{font-size:11px;color:#7a89ab;margin-left:2px}
#lpm .lpm-seg button:hover{color:#fff}
#lpm .lpm-seg button[aria-checked="true"]{background:#EC065D;color:#fff}
#lpm .lpm-seg button[aria-checked="true"] small{color:rgba(255,255,255,.8)}
@media (min-width:769px) and (hover:hover){
  #lpm .lpm-quality{margin:0;padding:16px 22px 0}
  #lpm .lpm-qcap{padding:0 0 8px}
}
@media (prefers-reduced-motion:reduce){#lpm .lpm-panel,#lpm .lpm-dim,#lpm .lpm-btn path{transition:none}}
.lp-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-height:820px){
  .lp-inner{gap:1.4vh;padding-top:64px;padding-bottom:48px}
  .lp-cover{width:min(31vh,66vw)}
  .lp-meta{margin-top:min(6.5vh,13vw)}
  .lp-play{width:92px;height:92px}
  .lp-controls{margin-top:0}
}
@media (max-height:640px){
  .lp-inner{gap:1.4vh;padding-top:70px}
  .lp-cover{width:min(29vh,60vw)}
  .lp-next{display:none}
  .lp-play{width:84px;height:84px}
  .lp-vol{display:none}
}
@media (max-width:480px){
  .lp-name{font-size:18px;left:64px;right:64px}
  .lp-play{width:96px;height:96px}
}
@media (prefers-reduced-motion:reduce){
  .lp-marquee.run .lp-track,.lp-cover img{animation:none}
}
/* компьютер, режим «Круг»: обложка чуть меньше, чтобы иглам хватало места до надписи и названия — круг ровный */
@media (min-width:769px){ #lanplayer.lp-ring .lp-cover{transform:scale(.8)} #lanplayer.lp-ring .lp-cover:hover{transform:scale(.82)} }
/* телефон, режим «Круг»: обложку опускаем ближе к названию (там больше места) и чуть уменьшаем — иглы длиннее */
@media (max-width:768px){ #lanplayer.lp-ring .lp-cover{transform:translateY(var(--lp-ring-dy,0px)) scale(.86)} }
/* компьютер: прогресс чуть ниже, чтобы «Зеркало» его не перекрывало */
@media (min-width:769px) and (hover:hover){ .lp-progress{margin-top:3.2vh} .lp-cover{width:min(33vh,66vw)} }
/* большие мониторы: крупнее название, кнопки и угловые значки (телефоны не трогаем) */
@media (min-width:1200px) and (hover:hover){
  #lpm .lpm-btn,.lp-histbtn{width:56px;height:56px;top:14px}
  #lpm .lpm-btn{left:14px} .lp-histbtn{right:14px}
  #lpm .lpm-btn svg,.lp-histbtn svg{width:27px;height:27px}
  .lp-name{top:24px;left:86px;right:86px}
  #lpm .lpm-panel,.lp-hist{padding-top:84px}
}
@media (min-width:1200px) and (min-height:1000px) and (hover:hover){
  .lp-title{font-size:clamp(39px,7.8vh,83px)}
  .lp-artist{font-size:clamp(23px,3.9vh,39px)}
  .lp-play{width:140px;height:140px}
  .lp-icon{width:80px;height:80px}
  .lp-icon svg{width:66px;height:66px}
  .lp-next{font-size:21px}
  .lp-progress{font-size:16px}
}

/* ===== обложка-пластинка: классический 7" сингл, глянец, крутится весь диск (во всех режимах, кроме «Круга») ===== */
#lanplayer:not(.lp-ring) .lp-cover{
  background:radial-gradient(circle closest-side,transparent 0 7%,#0c0c0f 7.2%);
  box-shadow:0 0 0 1px rgba(255,255,255,.10),0 18px 50px rgba(0,0,0,.6),
    0 0 calc(30px + var(--lp-beat,0) * 50px) rgba(236,6,93,calc(.18 + var(--lp-beat,0) * .4));
}
/* винил: сверху вниз — глянцевые блики, тонкие линии (вводная канавка, канавки остановки иглы),
   гладкие полосы (край, вводная зона, паузы между треками, зона остановки иглы у лейбла) и сами дорожки */
#lanplayer:not(.lp-ring) .lp-cover::before{
  content:'';position:absolute;inset:0;border-radius:50%;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle closest-side,transparent 0 54.4%,rgba(255,255,255,.13) 54.6% 55%,transparent 55.2% 57.4%,rgba(255,255,255,.10) 57.6% 58%,
      transparent 58.2% 92.2%,rgba(255,255,255,.16) 92.4% 92.8%,transparent 93%),
    radial-gradient(circle closest-side,transparent 0 50%,#141418 50% 61%,transparent 61% 70%,#17171c 70% 71.3%,transparent 71.3% 80.5%,
      #17171c 80.5% 81.8%,transparent 81.8% 92.6%,#111115 92.6% 97.6%,#2c2c33 97.8% 100%),
    repeating-radial-gradient(circle at 50% 50%,#0c0c0f 0 1.2px,#1f1f26 1.2px 2.4px);
  -webkit-mask:radial-gradient(circle closest-side,transparent 0 7%,#000 7.2%);mask:radial-gradient(circle closest-side,transparent 0 7%,#000 7.2%);
  animation:lp-spin 24s linear infinite;animation-play-state:paused;
}
#lanplayer.is-playing:not(.lp-ring) .lp-cover::before{animation-play-state:running}
/* пластинка на 10% крупнее и опущена ровно посередине между LAN STATION и названием; при наведении не меняется — отверстие не «прыгает» */
#lanplayer:not(.lp-ring) .lp-cover,#lanplayer:not(.lp-ring) .lp-cover:hover{transform:translateY(var(--lp-vinyl-dy,0px)) scale(1.1)}
/* лейбл = обложка трека, половина диаметра, как у настоящего 7" */
#lanplayer:not(.lp-ring) .lp-cover img{
  position:absolute;left:25%;top:25%;width:50%;height:50%;z-index:1;
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 0 2px rgba(255,255,255,.06);
  -webkit-mask:radial-gradient(circle closest-side,transparent 0 14%,#000 14.4%);mask:radial-gradient(circle closest-side,transparent 0 14%,#000 14.4%);
}
#lanplayer:not(.lp-ring) .lp-cover.is-logo img{padding:4%;background:#1d2028}
/* верхний слой НЕ крутится: глянцевые блики от лампы (свет падает под углом) + центральное отверстие.
   Маска оставляет блики только на виниле — лейбл с обложкой не засвечивается */
#lanplayer:not(.lp-ring) .lp-cover::after{
  z-index:3;left:0;top:0;width:100%;height:100%;transform:none;border-radius:50%;box-shadow:none;pointer-events:none;
  background:
    radial-gradient(circle closest-side,transparent 0 6.8%,rgba(0,0,0,.55) 7%,rgba(255,255,255,.30) 7.3% 7.8%,transparent 8%),
    conic-gradient(from 300deg,transparent 0 3%,rgba(255,255,255,.07) 6%,rgba(255,255,255,.26) 9%,rgba(255,255,255,.07) 12%,transparent 15% 50%,
      rgba(255,255,255,.06) 53%,rgba(255,255,255,.19) 56%,rgba(255,255,255,.06) 59%,transparent 62%);
  -webkit-mask:radial-gradient(circle closest-side,#000 0 8.1%,transparent 8.2% 50%,#000 50.6%);
          mask:radial-gradient(circle closest-side,#000 0 8.1%,transparent 8.2% 50%,#000 50.6%);
}
@media (prefers-reduced-motion:reduce){#lanplayer .lp-cover::before{animation:none}}

/* ================= ФИШКИ (player/extras.js) ================= */
/* строка под прогрессом: ♥ слева, «поделиться» справа */
.lp-air-btn{display:inline-grid;place-items:center;width:36px;height:36px;margin:-9px 0;padding:0;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer;
  opacity:.9;transition:transform .2s,opacity .2s,color .2s;-webkit-tap-highlight-color:transparent}
.lp-air-btn:hover{opacity:1}
.lp-air .lp-air-btn svg{width:19px;height:19px;margin:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lp-like[aria-pressed="true"]{color:var(--sk-hl,var(--lp-hl));opacity:1}
.lp-like[aria-pressed="true"] svg{fill:currentColor}
.lp-like.pop{animation:lp-pop .45s}
@keyframes lp-pop{35%{transform:scale(1.5)}}
/* pulse.gif: ровная подсветка цветом темы (без пульсации в такт) */
.lf-pulse-m{filter:drop-shadow(0 0 4px var(--sk-sec-a,#4bc172))}
/* тонарм: живёт внутри пластинки (.lp-cover), поэтому масштаб и сдвиг у них общие — ничего не «догоняет» */
.lp-arm{position:absolute;left:76.8%;top:-.5%;width:36%;height:57.6%;z-index:4;pointer-events:none;transform-origin:70% 11.25%;transform:rotate(-21deg);
  transition:transform 1.1s cubic-bezier(.45,.05,.25,1),opacity .5s;opacity:0}
.lp-arm.ready{opacity:1}
#lanplayer.is-playing .lp-arm{transform:rotate(0deg)}
#lanplayer.lp-ring .lp-arm{display:none}
.lp-arm svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(2px 5px 5px rgba(0,0,0,.45))}
.lp-arm{color:var(--sk-arm,var(--sk-hl,#C9CED4))}   /* тонарм в цвет темы; тема может задать свой --sk-arm */
/* вращение пластинки: угол задаёт extras.js (--lp-rot), CSS-анимация остаётся только запасной, если скрипт не загрузился */
#lanplayer.lp-jsspin .lp-cover img,#lanplayer.lp-jsspin:not(.lp-ring) .lp-cover::before{animation:none!important;transform:rotate(var(--lp-rot,0deg))}
/* всплывающие сообщения */
.lp-xtoast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));z-index:540;width:max-content;max-width:min(92vw,420px);
  padding:12px 18px;border-radius:var(--sk-r,14px);background:var(--sk-panel,rgba(24,26,34,.96));color:var(--sk-ptext,#fff);
  border:1px solid var(--sk-line,rgba(255,255,255,.14));box-shadow:0 14px 40px rgba(0,0,0,.4);font-family:var(--sk-font,'Play',sans-serif);
  font-size:15px;line-height:1.35;text-align:center;opacity:0;visibility:hidden;transform:translate(-50%,16px);transition:opacity .3s,transform .3s,visibility .3s}
.lp-xtoast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
.lp-xtoast b{color:var(--sk-hl,#EC065D);font-weight:700}
.lp-xtoast button{margin:10px auto 0;display:block;padding:8px 14px;border:0;border-radius:var(--sk-r,10px);background:var(--sk-hl,#EC065D);color:var(--sk-on,#fff);font:inherit;cursor:pointer}
/* меню: подсказки под пунктами */
#lpm .lpm-hint{display:block;padding:6px 4px 0;font-size:12px;line-height:1.35;color:#7a89ab}
html[data-skin] #lpm .lpm-hint{color:var(--sk-pmute)}
/* история: вкладки «Последние 10» / «♥ Мои треки» */
.lp-hist-head.lp-tabs{display:flex;gap:6px;padding:0 8px 10px;letter-spacing:normal;text-transform:none}
.lp-tabs button{flex:1;padding:9px 6px;border:0;border-radius:12px;background:rgba(255,255,255,.06);color:#c9d0e4;font:15px 'Play',sans-serif;cursor:pointer;transition:background .2s,color .2s}
.lp-tabs button[aria-selected="true"]{background:var(--lp-hl);color:#fff}
html[data-skin] .lp-tabs button{background:var(--sk-chip);color:var(--sk-ptext);font-family:var(--sk-menu-font,var(--sk-font));border-radius:calc(var(--sk-r,14px) * .8)}
html[data-skin] .lp-tabs button[aria-selected="true"]{background:var(--sk-hl);color:var(--sk-on)}
.lp-hist-list[hidden]{display:none}
.lp-likes li{position:relative}
.lp-likes a{padding-right:46px}
.lp-like-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;padding:0;border:0;border-radius:50%;background:none;
  color:var(--sk-pmute,var(--lp-mute));font-size:18px;line-height:36px;cursor:pointer}
.lp-like-x:hover{color:var(--sk-hl,var(--lp-hl))}
@media (prefers-reduced-motion:reduce){.lp-arm{transition:none}}
/* подгонка под низкие экраны (fitLayout в player.js) */
@media (max-width:768px){
  #lanplayer.lp-hasfab .lp-inner{padding-bottom:86px}   /* место под кнопку заказа и стрелку вниз (без env(): на iPhone он меняется при прокрутке) */
}
#lanplayer.lp-t1 .lp-next{display:none}
#lanplayer.lp-t1 .lp-meta{margin-top:min(3vh,6vw)}
#lanplayer.lp-t2{--lp-tm:.78}
#lanplayer.lp-t2 .lp-play{width:76px;height:76px}
#lanplayer.lp-t2 .lp-icon{width:52px;height:52px}
#lanplayer.lp-t2 .lp-icon svg{width:44px;height:44px}
#lanplayer.lp-t2 .lp-rqbadge{margin-top:4px;padding:3px 10px;font-size:13px}
#lanplayer.lp-t2 .lp-progress{margin-top:6px}
#lanplayer.lp-t3 .lp-air,#lanplayer.lp-t3 .lp-rqbadge,#lanplayer.lp-t3 .lp-vol{display:none}
#lanplayer.lp-t4 .lp-cover,#lanplayer.lp-t4 .lp-arm{display:none}
.lp-likes-tail{display:flex;gap:8px;padding:12px 8px 0}
.lp-likes-tail .lp-likes-copy{flex:1 1 0;min-width:0;padding:11px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-likes-copy{padding:9px 14px;border:1px solid var(--sk-line,rgba(255,255,255,.14));border-radius:var(--sk-r,12px);background:var(--sk-chip,rgba(255,255,255,.06));
  color:var(--sk-ptext,#fff);font:14px var(--sk-font,'Play',sans-serif);cursor:pointer}
/* размеры от «малой» высоты экрана (svh): не меняются, когда браузер прячет/показывает панели при прокрутке */
@supports (height:1svh){
  .lp-cover{width:min(36svh,66vw)}
  @media (max-height:820px){ .lp-inner{gap:1.4svh} .lp-cover{width:min(31svh,66vw)} .lp-meta{margin-top:min(6.5svh,13vw)} }
  @media (max-height:640px){ .lp-cover{width:min(29svh,60vw)} }
  @media (min-width:769px) and (hover:hover){ .lp-cover{width:min(33vh,66vw)} }
}
/* окно «Найти трек» */
.lp-find-dim{position:fixed;inset:0;z-index:525;background:rgba(10,10,16,.55);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.lp-find-dim.open{opacity:1;visibility:visible}
.lp-find{position:fixed;z-index:530;left:0;right:0;bottom:0;padding:10px 16px calc(18px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;
  background:var(--sk-panel,rgba(24,26,34,.97));color:var(--sk-ptext,#fff);border-top:1px solid var(--sk-line,rgba(255,255,255,.12));
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 -20px 60px rgba(0,0,0,.5);font-family:var(--sk-menu-font,var(--sk-font,'Play',sans-serif));
  transform:translateY(105%);visibility:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility .3s}
.lp-find.open{transform:translateY(var(--drag,0px));visibility:visible}
.lp-find-grab{width:44px;height:5px;border-radius:3px;background:var(--sk-line,rgba(255,255,255,.25));margin:0 auto 12px}
.lp-find-head{display:flex;align-items:center;gap:12px}
.lp-find-head img{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:none;background:#1d2028}
.lp-find-head > span{flex:1;min-width:0}
.lp-find-head b,.lp-find-head small,.lp-find-head em{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-find-head b{font-size:18px;font-weight:500}
.lp-find-head small{font-size:14px;color:var(--sk-pmute,#7a89ab)}
.lp-find-head em{font-style:normal;font-size:12px;color:var(--sk-pmute,#7a89ab);opacity:.8;margin-top:2px}
.lp-find-x{flex:none;align-self:flex-start}
.lp-find-cap{margin:16px 2px 8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sk-pmute,#7a89ab)}
.lp-find-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lp-find-grid button{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--sk-line,rgba(255,255,255,.12));border-radius:var(--sk-r,14px);
  background:var(--sk-chip,rgba(255,255,255,.06));color:inherit;font:inherit;font-size:15px;text-align:left;cursor:pointer;transition:border-color .2s,transform .1s}
.lp-find-grid button:hover{border-color:var(--sk-hl,#EC065D)}
.lp-find-grid button:active{transform:scale(.97)}
.lp-find-grid i{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--c);color:#fff}
.lp-find-grid button[data-svc="yandex"] i{color:#1d1d1d}
.lp-find-grid svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lp-find-grid span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-find-act{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.lp-find-act button{flex:1 1 auto;padding:9px 10px;border:0;border-radius:calc(var(--sk-r,14px) * .8);background:var(--sk-chip,rgba(255,255,255,.06));color:inherit;font:inherit;font-size:14px;cursor:pointer;white-space:nowrap}
.lp-find-act button:hover{color:var(--sk-hl,#EC065D)}
@media (min-width:769px) and (hover:hover){
  .lp-find{left:50%;right:auto;top:50%;bottom:auto;width:440px;border-radius:var(--sk-r,20px);border:1px solid var(--sk-line,rgba(255,255,255,.12));padding:20px;
    transform:translate(-50%,-46%);opacity:0;transition:opacity .25s,transform .25s,visibility .25s}
  .lp-find.open{transform:translate(-50%,-50%);opacity:1}
  .lp-find-grab{display:none}
}
.lp-find-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
/* история на телефоне: высота шторки постоянная (как у «Заказать трек»), список начинается сверху —
   вкладки «Последние 10» и «♥ Мои треки» больше не прыгают */
@media not all and (min-width:769px) and (hover:hover){#lp-hist{height:calc(100vh - 76px);height:calc(100dvh - 76px)}}
#lp-hist .lp-hist-list{flex:0 1 auto;min-height:0}
.lp-find-act .lp-find-rq{background:var(--sk-hl,#EC065D);color:var(--sk-on,#fff)}
.lp-find-act .lp-find-rq:hover{color:var(--sk-on,#fff);filter:brightness(1.1)}
.lp-find-act .lp-find-rq:disabled{opacity:.85;cursor:default}
/* лёгкая подсказка сверху («скопировано в буфер обмена») */
.lp-xhint{position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top));z-index:545;width:max-content;max-width:94vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:7px 14px;border-radius:999px;
  background:color-mix(in srgb,var(--sk-panel,rgb(20,22,28)) 82%,transparent);color:var(--sk-ptext,rgba(255,255,255,.92));border:1px solid var(--sk-line,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font:13px var(--sk-font,'Play',sans-serif);text-align:center;pointer-events:none;opacity:0;transform:translate(-50%,-6px);transition:opacity .25s,transform .25s}
.lp-xhint.show{opacity:1;transform:translate(-50%,0)}

/* LIVE: число слушателей вместо точки */
.lp-live .lp-live-n{fill:currentColor;letter-spacing:0;font-family:'Saira Condensed','Arial Narrow',sans-serif}
.lp-live.n3 .lp-waves path:nth-child(-n+2){display:none}
.lp-live.has-n .lp-live-dot{display:none}

/* «А какой ты сегодня?»: «☀ Светлые / ☾ Тёмные» над выбором темы */
#lpm .lpm-toneseg{margin-bottom:8px}

/* «Заказать трек»: вместо слова — иконка «в очередь» в рамке цветом темы; заказан — рамка заливается, внутри ✓ */
#lp-rqlist .lp-rq-go{justify-content:center;gap:0;width:38px;height:38px;padding:0;flex:none;border:1.6px solid currentColor;border-radius:calc(var(--sk-r,12px) * .8);
  background:none;color:var(--sk-hl,#EC065D);font-size:16px;line-height:1;transition:background .2s,color .2s,border-color .2s}
#lp-rqlist .lp-rq-go svg{width:20px;height:20px;overflow:visible;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#lp-rqlist .lp-rq-go:hover{background:color-mix(in srgb,var(--sk-hl,#EC065D) 14%,transparent);color:var(--sk-hl,#EC065D);filter:none}
#lp-rqlist .lp-rq-go.done,#lp-rqlist .lp-rq-go.done:hover{background:var(--sk-hl,#EC065D);border-color:transparent;color:var(--sk-on,#fff)}
#lp-rqlist .lp-rq-go:disabled:not(.done){background:none;color:var(--sk-pmute,#5d6789);opacity:.6}
#lp-rqlist .lp-rq-go.busy{opacity:1}

/* «Обновить» под случайным списком заказа */
.lp-rq-list li.lp-rq-hint > span{display:block}
.lp-rq-refresh{display:inline-flex;align-items:center;gap:7px;margin:12px auto 4px;padding:9px 18px;border:1.6px solid currentColor;border-radius:999px;background:none;
  color:var(--sk-hl,#EC065D);font:inherit;font-size:15px;cursor:pointer;transition:background .2s}
.lp-rq-refresh:hover{background:color-mix(in srgb,var(--sk-hl,#EC065D) 12%,transparent)}
.lp-rq-refresh svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lp-rq-refresh.spin svg{animation:lp-rq-spin .8s linear infinite}
@keyframes lp-rq-spin{to{transform:rotate(360deg)}}

.lp-find-act .lp-act-ic{width:15px;height:15px;margin:0 5px -2px 0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* «Свой плеер»: M3U / MP3 / XSPF — одна полоса из трёх сегментов; рамка и скругление из темы */
#lpm .lpm-files small{display:flex;width:max-content;flex-wrap:nowrap;gap:0;margin-top:8px;border:1px solid var(--sk-line,rgba(255,255,255,.22));border-radius:calc(var(--sk-r,14px) * .55);overflow:hidden}
#lpm .lpm-files small a{padding:6px 10px;font-size:12px;font-weight:700;letter-spacing:.06em;line-height:1;text-transform:none;color:var(--sk-ptext,#c9d0e4);transition:background .2s,color .2s}
#lpm .lpm-files small a+a{border-left:1px solid var(--sk-line,rgba(255,255,255,.22))}
#lpm .lpm-files small a:hover{background:color-mix(in srgb,var(--sk-hl,#EC065D) 14%,transparent);color:var(--sk-hl,#EC065D)}
/* телефон: две колонки плиток строго поровну, полоса форматов — во всю ширину плитки */
@media not all and (min-width:769px) and (hover:hover){
  #lpm .lpm-items{grid-template-columns:repeat(2,minmax(0,1fr))}
  #lpm .lpm-files > span{align-self:stretch}
  #lpm .lpm-files small{width:100%}
  #lpm .lpm-files small a{flex:1;padding:7px 4px;text-align:center}
}

/* «Мои треки»: номер слева, «Очистить» рядом с «Скопировать», подсказка про 7 дней */
.lp-likes a{grid-template-columns:22px 44px minmax(0,1fr) auto}
.lp-like-n{font-weight:400;font-size:13px;text-align:right;color:var(--sk-pmute,#7a89ab);font-variant-numeric:tabular-nums}
@media (max-width:480px){.lp-likes a{grid-template-columns:20px 40px minmax(0,1fr) auto;gap:9px}}
.lp-likes-clear{color:var(--sk-pmute,#9aa6c6)}
.lp-likes-clear:hover{color:var(--sk-hl,#EC065D)}
.lp-hist-list li.lp-likes-note{display:block;margin:10px 8px 6px;padding:12px 14px;border-radius:var(--sk-r,12px);background:var(--sk-chip,rgba(255,255,255,.05));
  font-size:13px;line-height:1.45;color:var(--sk-pmute,#9aa6c6);text-align:left}
.lp-likes-note button{display:inline;margin:0;padding:0;border:0;background:none;color:var(--sk-hl,#EC065D);font:inherit;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* меню-плитки (телефон): иконка — еле заметный фон в правом нижнем углу; у «Своего плеера» иконки нет */
@media not all and (min-width:769px) and (hover:hover){
  #lpm .lpm-items .lpm-item{position:relative;overflow:hidden;justify-content:flex-start}
  #lpm .lpm-items .lpm-item > svg{position:absolute;right:-14px;bottom:-16px;width:86px;height:86px;opacity:.07;stroke-width:1.3;pointer-events:none}
  #lpm .lpm-items .lpm-item > span{position:relative;z-index:1}
  #lpm .lpm-items .lpm-files > svg{display:none}
}

/* шторка истории: края обложек, подсказки и кнопок — ровно по краям вкладок «Последние 10 / Мои треки» */
#lp-hist .lp-hist-list{padding-left:0;padding-right:0}
#lp-hist .lp-hist-list a{padding-left:8px;padding-right:8px}
#lp-hist .lp-likes a{padding-right:40px}
#lp-hist .lp-like-x{right:0}
.lp-hist-list li.lp-hist-tip{display:flex;align-items:center;gap:10px;margin:0 8px 8px;font-size:13.5px;line-height:1.35;color:var(--sk-pmute,#9aa6c6)}
.lp-hist-tip svg{flex:none;width:24px;height:24px;fill:none;stroke:var(--sk-hl,#EC065D);stroke-width:4;stroke-linecap:round}
.lp-hist-tip svg .f{fill:var(--sk-hl,#EC065D);stroke:none}
/* шторка «Заказать трек»: заголовок, крестик, поиск, плашки, обложки и кнопки — по одним краям (как в истории) */
#lp-rq .lp-rq-head{padding-left:8px;padding-right:8px}
#lp-rq .lp-rq-list{padding-left:0;padding-right:0}
#lp-rq .lp-rq-list li:not(.lp-rq-hint):not(.lp-rq-morewrap):not(.lp-rq-empty){padding-left:8px;padding-right:8px}
#lpm .lpm-club b,#lpm .lpm-club small{white-space:nowrap}
/* название и исполнитель: края ровно по цифрам времени у полосы прогресса; бегущая строка гаснет только в последних 12px,
   чтобы текст доходил до цифр, а не таял за 6% от края */
#lanplayer .lp-meta .lp-marquee.run{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent);mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent)}
.lp-find-grid i svg.lp-disc{width:100%;height:100%;stroke-width:1.5}
/* история: ссылки и обложки не «перетаскиваются» пальцем (iPhone), иначе Safari перехватывает смахивание шторки */
.lp-hist-list a,.lp-hist-list img{-webkit-user-drag:none;-webkit-touch-callout:none}
/* полосы прокрутки в шторках и окнах: тонкие, цветом темы, без серой дорожки и стрелок (Windows рисовал толстую серую).
   Chrome/Safari — через ::-webkit-scrollbar (там полностью своя отрисовка), Firefox — стандартными свойствами */
.lp-hist-list{overflow-x:hidden}
@supports not selector(::-webkit-scrollbar){
  .lp-hist-list,.lp-rq-list,.lpm-skinlist,#lpm .lpm-panel,.lp-find,.lp-about{scrollbar-width:thin;scrollbar-color:var(--sk-hl,#EC065D) transparent}
}
.lp-hist-list::-webkit-scrollbar,.lp-rq-list::-webkit-scrollbar,.lpm-skinlist::-webkit-scrollbar,#lpm .lpm-panel::-webkit-scrollbar,.lp-find::-webkit-scrollbar,.lp-about::-webkit-scrollbar{width:6px;height:6px;background:transparent}
.lp-hist-list::-webkit-scrollbar-track,.lp-rq-list::-webkit-scrollbar-track,.lpm-skinlist::-webkit-scrollbar-track,#lpm .lpm-panel::-webkit-scrollbar-track,.lp-find::-webkit-scrollbar-track,.lp-about::-webkit-scrollbar-track{background:transparent}
.lp-hist-list::-webkit-scrollbar-thumb,.lp-rq-list::-webkit-scrollbar-thumb,.lpm-skinlist::-webkit-scrollbar-thumb,#lpm .lpm-panel::-webkit-scrollbar-thumb,.lp-find::-webkit-scrollbar-thumb,.lp-about::-webkit-scrollbar-thumb{border-radius:3px;
  background:var(--sk-hl,#EC065D);background:color-mix(in srgb,var(--sk-hl,#EC065D) 70%,transparent)}
.lp-hist-list::-webkit-scrollbar-button,.lp-rq-list::-webkit-scrollbar-button,.lpm-skinlist::-webkit-scrollbar-button,#lpm .lpm-panel::-webkit-scrollbar-button,.lp-find::-webkit-scrollbar-button,.lp-about::-webkit-scrollbar-button{display:none;height:0}
/* «Об авторе» открывается поверх меню; текст абзацами */
.lp-about p + p{margin-top:12px}
/* пасхалка LAN Matrix: «Wake up, Neo…» печатается зелёным моноширинным, с мигающим курсором */
.lp-xtoast .lp-neo{display:block;width:21.5ch;font:15px/1.5 'Share Tech Mono','PT Mono','Courier New',monospace;color:#00FF41;text-align:left;text-shadow:0 0 6px rgba(0,255,65,.7);letter-spacing:.02em}
.lp-xtoast:has(.lp-neo){background:#010A05;border:1px solid #0D3A14;box-shadow:0 0 24px rgba(0,255,65,.25)}
.lp-neo-cur{display:inline-block;width:.55em;height:1em;margin-left:2px;vertical-align:-.15em;background:#00FF41;box-shadow:0 0 6px #00FF41;animation:lp-neo-b 1s steps(1) infinite}
@keyframes lp-neo-b{50%{opacity:0}}
/* матричный дождь (extras.js, только тема LAN Matrix): холст под плеером; внизу приглушён, чтобы не спорил с кнопками */
#lanplayer .lp-rain{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.6;
  -webkit-mask:linear-gradient(180deg,#000 0%,#000 55%,rgba(0,0,0,.35) 100%);mask:linear-gradient(180deg,#000 0%,#000 55%,rgba(0,0,0,.35) 100%)}
/* полоса прокрутки всей страницы — тоже цветом темы (без темы — розовая LAN Station), без серой дорожки и стрелок */
@supports not selector(::-webkit-scrollbar){html{scrollbar-width:thin;scrollbar-color:var(--sk-hl,#EC065D) transparent}}
html::-webkit-scrollbar{width:10px;height:10px;background:transparent}
html::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb{border-radius:5px;border:2px solid transparent;background-clip:padding-box;
  background-color:var(--sk-hl,#EC065D);background-color:color-mix(in srgb,var(--sk-hl,#EC065D) 70%,transparent)}
html::-webkit-scrollbar-button{display:none;height:0}
html::-webkit-scrollbar-corner{background:transparent}
/* место под полосу прокрутки страницы всегда занято: открыли меню/историю — ширина страницы не прыгает */
html{scrollbar-gutter:stable}
/* телефон: системная полоса прокрутки не перекрашивается — прячем её, вместо неё своя цветом темы (extras.js) */
@media (hover:none) and (pointer:coarse){
  html,.lp-hist-list,.lp-rq-list,.lpm-skinlist,#lpm .lpm-panel,.lp-find{scrollbar-width:none}
  html::-webkit-scrollbar,.lp-hist-list::-webkit-scrollbar,.lp-rq-list::-webkit-scrollbar,.lpm-skinlist::-webkit-scrollbar,#lpm .lpm-panel::-webkit-scrollbar,.lp-find::-webkit-scrollbar{display:none;width:0;height:0}
}
.lp-tbar{position:fixed;left:0;top:0;z-index:10000;width:3px;border-radius:2px;pointer-events:none;opacity:0;transition:opacity .35s;
  background:var(--sk-hl,#EC065D);box-shadow:0 0 6px var(--sk-hl,#EC065D)}
.lp-tbar.on{opacity:.85;transition:opacity .1s}
/* бегущая строка (название, исполнитель): слой постоянно на видеокарте — в Safari при перезапуске анимации
   текст иногда пропадал на долю секунды */
.lp-marquee{transform:translateZ(0)}
.lp-marquee .lp-track{will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}
/* окно «Найти трек» / инструкция: прокрутка внутри не утаскивает страницу под окном */
.lp-find{overscroll-behavior:contain}