/* ============================================================
   SCRATCH DJ SCHOOL RADIO — single-file front-end
   Бэкенд: AzuraCast (https://scratchdj.online)
   ============================================================ */

/* ---------- design tokens ---------- */
:root{
  --bg:#08080b;
  --bg-2:#0e0e14;
  --card:#121219;
  --card-2:#181822;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --ink:#f3f3f6;
  --dim:#83838f;
  --dim-2:#5a5a66;

  --acid:#ccff00;
  --mag:#ff2d7e;
  --cy:#22e0ff;
  --amber:#ffab2d;
  --live-red:#ff1a35;
  --live-orange:#ff6a13;
  --chat-yellow:#ffd400;

  --r-s:10px;
  --r-m:18px;
  --r-l:28px;

  --pad: clamp(16px, 4vw, 40px);
  --maxw: 1280px;

  --f-disp:'Oswald', 'Haettenschweiler', 'Arial Narrow', Impact, sans-serif;
  --f-body:'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

/* animated angle for rotating gradient borders */
@property --ang{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
@property --glow{ syntax:'<number>'; initial-value:0; inherits:false; }

*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:92px }
[hidden]{display:none!important}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  padding-bottom:96px; /* место под мини-плеер */
}
img{max-width:100%;display:block}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--acid); outline-offset:3px; border-radius:4px}

/* ---------- ambient background ---------- */
.bg-fx{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.bg-fx .orb{
  position:absolute;border-radius:50%;filter:blur(90px);opacity:.30;
  transition:opacity .8s var(--ease);
}
.orb.a{width:52vw;height:52vw;left:-14vw;top:-16vw;background:radial-gradient(circle,#ccff00,transparent 65%);animation:drift 26s var(--ease-io) infinite alternate}
.orb.b{width:46vw;height:46vw;right:-12vw;top:14vh;background:radial-gradient(circle,#ff2d7e,transparent 65%);animation:drift 32s var(--ease-io) infinite alternate-reverse}
.orb.c{width:40vw;height:40vw;left:24vw;bottom:-18vw;background:radial-gradient(circle,#22e0ff,transparent 65%);animation:drift 38s var(--ease-io) infinite alternate}
body.is-playing .bg-fx .orb{opacity:.46}
@keyframes drift{ to{ transform:translate3d(6vw,5vh,0) scale(1.18) } }

.grain{
  position:fixed;inset:-200%;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,4%)}40%{transform:translate(4%,-2%)}
  60%{transform:translate(-2%,-4%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}
}
.scanlines{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.022) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;
}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* ---------- header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  background:color-mix(in srgb, var(--bg) 76%, transparent);
  border-bottom:1px solid var(--line);
}
.bar{display:flex;align-items:center;gap:clamp(10px,2vw,26px);height:70px}

/* [1] логотип — возврат на главную с любой вкладки */
.logo{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.logo .mark{
  width:38px;height:38px;border-radius:50%;position:relative;flex:0 0 auto;
  background:
    conic-gradient(from var(--ang), var(--acid), var(--mag), var(--cy), var(--acid));
  animation:spinang 6s linear infinite;
  display:grid;place-items:center;
}
@keyframes spinang{ to{ --ang:360deg } }
.logo .mark::after{
  content:"";position:absolute;inset:3px;border-radius:50%;background:var(--bg);
  background-image:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.10) 0 1px,transparent 1px 3px);
}
.logo .mark i{
  position:absolute;width:7px;height:7px;border-radius:50%;background:var(--ink);z-index:2;
}
.logo b{font-family:var(--f-disp);font-size:15px;letter-spacing:.055em;line-height:1;display:block}
.logo span{font:700 9px/1 var(--f-mono);letter-spacing:.26em;color:var(--acid);display:block;margin-top:3px}

/* [1b] ссылка на Android-приложение, справа от логотипа */
.app-link{
  display:flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:5px 12px 5px 5px;border-radius:999px;border:1px solid var(--line);
  color:var(--dim);text-decoration:none;transition:border-color .25s,color .25s,background .25s;
}
.app-link:hover{border-color:var(--line-2);color:var(--ink);background:var(--card)}
.app-link-ic{width:26px;height:26px;flex:0 0 auto;display:grid;place-items:center}
.app-link-ic svg{width:100%;height:100%;display:block}
.app-link-txt{font:700 9.5px/1.22 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;color:var(--acid)}

/* nav [2..5] */
nav.tabs{display:flex;gap:6px;margin-left:auto;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:4px 0;-webkit-mask:linear-gradient(90deg,#000 0 90%,transparent);mask:linear-gradient(90deg,#000 0 90%,transparent)}
@media(min-width:900px){nav.tabs{-webkit-mask:none;mask:none}}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs a{
  position:relative;white-space:nowrap;padding:9px 15px;border-radius:999px;
  font:600 11.5px/1 var(--f-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--dim);
  border:1px solid transparent;transition:color .25s,background .25s,border-color .25s;
}
nav.tabs a:hover{color:var(--ink);border-color:var(--line-2)}
nav.tabs a[aria-current="page"]{background:var(--acid);color:#07070a;font-weight:700}
/* [3] «Эфир» принудительно выглядит неактивным, пока в эфире live-видео или live-аудио */
nav.tabs a.tab-dim{background:none!important;color:var(--dim)!important;font-weight:600!important;border-color:transparent!important}
nav.tabs a.tab-dim:hover{color:var(--ink)!important;border-color:var(--line-2)!important}
nav.tabs a.live-video-btn{background:color-mix(in srgb, var(--mag) 12%, transparent);color:var(--mag);border-color:var(--mag);font-weight:700}
nav.tabs a.live-video-btn:hover{color:var(--mag);border-color:var(--mag);background:color-mix(in srgb, var(--mag) 20%, transparent);box-shadow:0 10px 30px -10px var(--mag)}
nav.tabs a.live-video-btn[aria-current="page"]{background:color-mix(in srgb, var(--mag) 22%, transparent);color:var(--mag)}
@media(max-width:560px){
  .logo .txt{display:none}
  .logo .mark{width:32px;height:32px}
  .app-link-txt{display:none}
  .app-link{padding:5px}
  nav.tabs{gap:2px;-webkit-mask:none;mask:none}
  nav.tabs a{padding:8px 7px;font-size:9.5px;letter-spacing:.03em}
  .bar{gap:6px;height:60px}
}
@media(max-width:380px){ nav.tabs a{padding:8px 5px;font-size:9px} }

.hdr-live{
  display:none;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  border:1px solid var(--line-2);font:700 10px/1 var(--f-mono);letter-spacing:.16em;
  color:var(--dim);transition:color .4s,border-color .4s;
}
body.is-playing .hdr-live{color:var(--ink);border-color:color-mix(in srgb,var(--mag) 45%,transparent)}
@media(min-width:1080px){ .hdr-live{display:flex} }

/* ---------- shared bits ---------- */
.dot{width:7px;height:7px;border-radius:50%;background:var(--dim-2);flex:0 0 auto}
body.is-playing .dot.live,.dot.live.on{background:var(--mag);box-shadow:0 0 0 0 var(--mag);animation:pulse 1.8s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--mag) 70%,transparent)}
  70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}
}

.eyebrow{font:700 10.5px/1 var(--f-mono);letter-spacing:.28em;text-transform:uppercase;color:var(--dim)}
h1,h2,h3{font-family:var(--f-disp);font-weight:700;letter-spacing:.005em;margin:0;text-wrap:balance}
.h-sec{font-size:clamp(30px,5.4vw,60px);line-height:.94;text-transform:uppercase}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.sec-head p{margin:8px 0 0;color:var(--dim);max-width:56ch;font-size:14.5px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:999px;border:1px solid var(--line-2);
  font:700 11.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  transition:transform .2s var(--ease),background .2s,color .2s,border-color .2s;
}
.btn:hover{transform:translateY(-2px);border-color:var(--ink)}
.btn.acid{background:var(--acid);color:#07070a;border-color:var(--acid)}
.btn.acid:hover{box-shadow:0 10px 34px -10px var(--acid)}
.btn.ghost:hover{background:rgba(255,255,255,.05)}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m)}

@keyframes chedge{to{background-position:300% 0}}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- views ---------- */
.view{display:none;padding:clamp(28px,5vw,56px) 0 60px;animation:fadeUp .5s var(--ease)}
.view.active{display:block}

/* ---------- live video tab ---------- */
#v-live{padding:clamp(14px,3vw,28px) 0}
.live-video-stage{
  min-height:calc(100dvh - 160px);
  display:flex;align-items:center;justify-content:center;
}
.live-stage-inner{
  /* доступная высота — та же, что раньше держал одиночный плеер (90dvh),
     но не выше окна минус хедер, чтобы страница не скроллилась */
  --lv-ah: min(90vh, 90dvh, calc(100dvh - 160px));
  /* доступная общая ширина под видео+чат */
  --lv-aw: min(96vw, 2100px);
  /* ширина видео — держит нормальные пропорции 16:9 и не даёт паре
     видео+чат вылезти ни по высоте, ни по ширине экрана */
  --lv-w: min( calc(var(--lv-ah) * 16 / 9), calc((var(--lv-aw) - 18px) * 3 / 4) );
  display:flex;gap:18px;align-items:flex-start;justify-content:center;max-width:100%;
}
.live-video-box{
  width:var(--lv-w);height:calc(var(--lv-w) * 9 / 16);flex:0 0 auto;
  border-radius:var(--r-m);overflow:hidden;background:#000;
  border:1px solid var(--line-2);
  box-shadow:0 40px 100px -40px rgba(0,0,0,.75);
}
.live-video-box iframe{width:100%;height:100%;border:0;display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- чат эфира: справа от live-видео, ширина = 1/3 ширины видео, высота = высоте видео ---------- */
.live-chat{
  width:calc(var(--lv-w) / 3);height:calc(var(--lv-w) * 9 / 16);
  flex:0 0 auto;min-width:230px;position:relative;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-m);
}
.live-chat::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
  background:linear-gradient(90deg,var(--mag),var(--cy),var(--acid),var(--mag));
  background-size:300% 100%;animation:chedge 6s linear infinite;
}
.lc-head{display:flex;align-items:center;gap:9px;padding:14px 16px;border-bottom:1px solid var(--line);flex:0 0 auto}
.lc-dot{width:7px;height:7px;border-radius:50%;background:var(--mag);box-shadow:0 0 0 0 var(--mag);animation:pulse 1.8s infinite}
.lc-title{font:700 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.lc-count{margin-left:auto;font:600 10px/1 var(--f-mono);color:var(--dim)}

.lc-msgs{flex:1 1 auto;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:13px;scrollbar-width:thin}
.lc-msgs::-webkit-scrollbar{width:6px}
.lc-msgs::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:999px}
.lc-empty{margin:auto;text-align:center;color:var(--dim-2);font:500 12px/1.5 var(--f-body);padding:20px}

.lc-msg{display:flex;flex-direction:column;gap:4px;animation:fadeUp .35s var(--ease)}
.lc-msg .lc-meta{display:flex;align-items:baseline;gap:8px}
.lc-msg .lc-name{font:700 11.5px/1 var(--f-mono);color:var(--acid);letter-spacing:.02em;word-break:break-word}
.lc-msg .lc-time{font:500 9.5px/1 var(--f-mono);color:var(--dim-2);flex:0 0 auto}
.lc-msg .lc-text{font:400 13.5px/1.45 var(--f-body);color:var(--ink);word-break:break-word;white-space:pre-wrap}
.lc-msg.lc-me .lc-name{color:var(--mag)}

.lc-reacts{display:flex;flex-wrap:wrap;gap:5px;margin-top:1px}
.lc-react-btn{
  display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:999px;
  border:1px solid var(--line);background:transparent;font:600 10.5px/1.6 var(--f-mono);
  color:var(--dim);cursor:pointer;transition:border-color .2s,color .2s,background .2s,transform .15s;
}
.lc-react-btn:hover{border-color:var(--line-2);color:var(--ink);transform:translateY(-1px)}
.lc-react-btn.on{border-color:var(--acid);color:var(--acid);background:color-mix(in srgb,var(--acid) 14%,transparent)}
.lc-react-btn b{font-weight:700}

.lc-sys{align-self:center;font:600 9.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim-2);padding:6px 12px;border:1px dashed var(--line);border-radius:999px;text-align:center}

.lc-name-gate{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;flex:0 0 auto}
.lc-name-gate.hidden{display:none}
.lc-name-bar{padding:10px 16px;border-top:1px solid var(--line);display:none;align-items:center;gap:8px;flex:0 0 auto;font:600 10px/1 var(--f-mono);color:var(--dim);letter-spacing:.02em}
.lc-name-bar.show{display:flex}
.lc-name-bar b{color:var(--ink);font-weight:700;font-family:var(--f-body);letter-spacing:0;text-transform:none}
.lc-name-bar button{margin-left:auto;background:none;border:0;color:var(--dim);font:600 10px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.lc-name-bar button:hover{color:var(--ink)}

.lc-input{
  flex:1 1 auto;min-width:0;background:var(--bg-2);border:1px solid var(--line);border-radius:999px;
  padding:10px 14px;color:var(--ink);font:400 13px/1.2 var(--f-body);outline:none;transition:border-color .2s;
}
.lc-input:focus{border-color:var(--line-2)}
.lc-input::placeholder{color:var(--dim-2)}

.lc-gatebtn,.lc-send{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:1px solid var(--acid);
  background:var(--acid);color:#07070a;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:15px;transition:transform .2s,box-shadow .2s;
}
.lc-gatebtn:hover,.lc-send:hover{transform:translateY(-2px);box-shadow:0 8px 22px -8px var(--acid)}
.lc-gatebtn:disabled,.lc-send:disabled{opacity:.4;pointer-events:none}

.lc-form{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;flex:0 0 auto}
.lc-form.hidden{display:none}

.lc-close{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);background:transparent;color:var(--dim);font-size:13px;
  cursor:pointer;transition:color .2s,border-color .2s;
}
.lc-close:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- плавающее окно чата (открывается кнопкой «Чат» на главной, во время live-аудио) ---------- */
.chat-float{
  position:fixed;right:var(--pad);z-index:59;
  bottom:calc(96px + env(safe-area-inset-bottom));
  width:min(392px, calc(100vw - var(--pad)*2));
  height:min(620px, calc(100vh - 190px), 80vh, 80dvh);
  opacity:0;transform:translateY(18px) scale(.985);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.chat-float.open{opacity:1;transform:none;pointer-events:auto}
.chat-float-slot{width:100%;height:100%}
.chat-float .live-chat{width:100%;height:100%;box-shadow:0 40px 90px -36px rgba(0,0,0,.9)}
.chat-float .lc-head{cursor:grab;user-select:none}
.chat-float .lc-head:active{cursor:grabbing}
@media(max-width:620px){
  .chat-float{
    left:0!important;right:0;top:auto!important;bottom:0;width:100%;height:80vh;height:80dvh;
  }
  .chat-float .live-chat{border-radius:var(--r-l) var(--r-l) 0 0}
}

/* узкие экраны — видео сверху, чат под ним на всю ширину, без горизонтального деления */
@media(max-width:900px){
  .live-stage-inner{flex-direction:column;max-width:100%}
  .live-video-box{width:100%;height:56vw;min-height:220px;max-height:60vh}
  .live-chat{width:100%;height:min(420px,60vh)}
}

/* ============================================================
   [8] ГЛАВНАЯ — РАДИО-ПЛЕЕР
   ============================================================ */
.hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(24px,4.5vw,60px);align-items:center}
@media(max-width:900px){ .hero{grid-template-columns:1fr;gap:34px} }

/* — вертушка — */
.deck{position:relative;aspect-ratio:1;width:100%;max-width:460px;margin-inline:auto}
@media(max-width:640px){ .deck{max-width:min(268px,66vw)} }
.platter{
  position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, #1b1b22 0 17%, transparent 17%),
    repeating-radial-gradient(circle at 50% 50%, #0a0a0d 0 1.5px, #141419 1.5px 3.4px),
    #0a0a0d;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.07),
    0 40px 90px -30px rgba(0,0,0,.95),
    inset 0 0 70px rgba(0,0,0,.8);
  animation:spin 2.4s linear infinite;animation-play-state:paused;
}
body.is-playing .platter{animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}
.platter::after{ /* блик */
  content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 210deg,transparent 0 12%,rgba(255,255,255,.10) 18%,transparent 26% 62%,rgba(255,255,255,.06) 70%,transparent 78%);
  mix-blend-mode:screen;
}
.label{
  position:absolute;inset:31%;border-radius:50%;overflow:hidden;z-index:2;
  background:linear-gradient(140deg,var(--mag),#7a0f3e 55%,var(--bg-2));
  box-shadow:0 0 0 1px rgba(255,255,255,.12), inset 0 0 30px rgba(0,0,0,.5);
  display:grid;place-items:center;
}
.label img{width:100%;height:100%;object-fit:cover}
.label .fallback{
  font-family:var(--f-disp);font-size:clamp(13px,2.4vw,20px);text-align:center;line-height:.92;
  letter-spacing:.02em;padding:6px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)
}
.spindle{
  position:absolute;left:50%;top:50%;width:3.4%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;background:#c9c9d2;z-index:3;box-shadow:0 0 0 3px rgba(0,0,0,.55)
}
/* кольцо: тонкая база + световой луч, бегущий по кругу при проигрывании */
.ring-base,.ring,.ring-glow{
  position:absolute;inset:-15px;border-radius:50%;pointer-events:none;
  opacity:0;transition:opacity .6s;
}
.ring-base{
  background:rgba(255,255,255,.10);
  -webkit-mask:radial-gradient(circle closest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
  mask:radial-gradient(circle closest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
}
.ring{
  background:conic-gradient(from var(--ang),
     transparent 0 46%,
     color-mix(in srgb, var(--cy) 45%, transparent) 62%,
     var(--acid) 78%, #fff 87%, var(--mag) 93%, transparent 99%);
  animation:spinang 3.2s linear infinite;
  -webkit-mask:radial-gradient(circle closest-side,transparent calc(100% - 6px),#000 calc(100% - 4px));
  mask:radial-gradient(circle closest-side,transparent calc(100% - 6px),#000 calc(100% - 4px));
}
.ring-glow{
  inset:-19px;
  background:conic-gradient(from var(--ang),
     transparent 0 52%,
     color-mix(in srgb, var(--cy) 40%, transparent) 66%,
     var(--acid) 80%, var(--mag) 92%, transparent 99%);
  animation:spinang 3.2s linear infinite;
  filter:blur(16px);
  -webkit-mask:radial-gradient(circle closest-side,transparent calc(100% - 16px),#000 calc(100% - 10px));
  mask:radial-gradient(circle closest-side,transparent calc(100% - 16px),#000 calc(100% - 10px));
}
body.is-playing .ring-base{opacity:1}
body.is-playing .ring{opacity:1}
body.is-playing .ring-glow{opacity:.9}
body.is-playing .ring{opacity:1}
/* тонарм — ведётся по таймкоду трека, как на живом виниле */
.tonearm{
  position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;
  overflow:visible;filter:drop-shadow(0 10px 16px rgba(0,0,0,.8));
}
#toneArm{
  transform-box:view-box;transform-origin:89px 11px;transform:rotate(-54deg);
  transition:transform 1s var(--ease);
}
#stylusGlow{opacity:0;transition:opacity .6s}
body.is-playing #stylusGlow{opacity:1;animation:styl 2.6s ease-in-out infinite}
@keyframes styl{0%,100%{filter:drop-shadow(0 0 2px var(--acid))}50%{filter:drop-shadow(0 0 7px var(--acid))}}

/* — инфопанель — */
.np{min-width:0}
.np .top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.badge{
  display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  border:1px solid var(--line-2);font:700 10px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
}
.badge.live{border-color:var(--mag);color:var(--mag)}
.badge.pl{border-color:var(--acid);color:var(--acid)}
.badge.dj{border-color:var(--cy);color:var(--cy);padding:6px 14px;font-size:10px;gap:7px}

/* кнопка «Чат» рядом с плашкой эфира — появляется во время живого аудио-эфира AzuraCast */
.onair-chat-btn{
  display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;
  border:1px solid var(--chat-yellow);background:color-mix(in srgb, var(--chat-yellow) 12%, transparent);
  color:var(--chat-yellow);font:700 10px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s;
}
.onair-chat-btn:hover{transform:translateY(-1px);background:color-mix(in srgb, var(--chat-yellow) 20%, transparent);box-shadow:0 8px 22px -10px var(--chat-yellow)}
.onair-chat-btn.on{background:var(--chat-yellow);color:#07070a}

.np h1{
  font-size:clamp(30px,6.4vw,72px);line-height:.9;text-transform:uppercase;
  overflow-wrap:break-word;hyphens:none;margin-bottom:8px;
}
.np .artist{font-size:clamp(15px,2vw,21px);color:var(--dim);margin:0 0 22px;font-weight:500}

.prog{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.prog .t{font:400 11.5px/1 var(--f-mono);color:var(--dim);min-width:38px}
.track{position:relative;flex:1;height:5px;border-radius:99px;background:rgba(255,255,255,.10);overflow:hidden}
.track .fill{
  position:absolute;inset:0;width:0%;border-radius:99px;
  background:linear-gradient(90deg,var(--acid),var(--mag));
  transition:width .9s linear;
}
.track .fill::after{
  content:"";position:absolute;right:0;top:-3px;bottom:-3px;width:2px;background:#fff;
  box-shadow:0 0 12px 2px rgba(255,255,255,.7)
}
/* поток без внятного таймкода — показываем бесконечный индикатор эфира */
body.no-timecode #tElapsed{visibility:hidden}
body.no-timecode #tTotal{color:var(--mag);font-weight:700;letter-spacing:.14em}
body.no-timecode .track .fill{
  width:100%!important;transition:none;border-radius:99px;
  background:linear-gradient(90deg,transparent 0%,var(--acid) 35%,var(--mag) 65%,transparent 100%);
  background-size:42% 100%;background-repeat:no-repeat;
  animation:indet 2.6s linear infinite;
}
body.no-timecode .track .fill::after{display:none}
@keyframes indet{from{background-position:-45% 0}to{background-position:145% 0}}

/* ---- перемотка выпусков ---------------------------------- */
/* буфер: сколько уже скачано — видно, куда перемотка будет мгновенной */
.track .buf{position:absolute;inset:0;width:0%;border-radius:99px;background:rgba(255,255,255,.16);opacity:0}
body.seekable .track .buf{opacity:1}
/* в режиме выпуска шкалу двигаем сами каждый кадр — плавный переход только мешает */
body.podcast-mode .track .fill{transition:none}
body.seekable .track{
  cursor:pointer;overflow:visible;touch-action:none;
  transition:height .18s var(--ease);
}
body.seekable .track .fill,
body.seekable .track .buf{height:100%}
/* невидимая «толстая» зона захвата — попасть пальцем в 5px невозможно */
body.seekable .track::before{content:"";position:absolute;left:0;right:0;top:-13px;bottom:-13px}
body.seekable .track:hover,
body.seekable .track.dragging{height:8px}
body.seekable .track:focus-visible{outline:2px solid var(--acid);outline-offset:6px;border-radius:99px}
.track .knob{
  position:absolute;top:50%;left:0;width:14px;height:14px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%) scale(0);transform-origin:center;
  box-shadow:0 2px 10px rgba(0,0,0,.65);pointer-events:none;
  transition:transform .18s var(--ease);
}
body.seekable .track:hover .knob,
body.seekable .track:focus-visible .knob,
body.seekable .track.dragging .knob{transform:translate(-50%,-50%) scale(1)}
body.seekable .track.dragging .knob{transform:translate(-50%,-50%) scale(1.25)}
/* подсказка с временем под курсором */
.track .tip{
  position:absolute;bottom:calc(100% + 12px);left:0;transform:translateX(-50%);
  font:400 11px/1 var(--f-mono);padding:5px 7px;border-radius:6px;white-space:nowrap;
  background:var(--bg-2);border:1px solid var(--line-2);color:#fff;
  opacity:0;pointer-events:none;transition:opacity .15s
}
body.seekable .track.dragging .tip{opacity:1}
/* кнопки ±15 секунд — только когда играет выпуск */
.skip{
  display:none;width:46px;height:46px;border-radius:50%;flex:0 0 auto;place-items:center;
  border:1px solid var(--line-2);color:var(--dim);background:transparent;position:relative;
  transition:color .2s,border-color .2s,transform .2s
}
body.podcast-mode .skip{display:grid}
.skip:hover{color:#fff;border-color:var(--acid);transform:scale(1.07)}
.skip:active{transform:scale(.93)}
.skip:disabled{opacity:.3;pointer-events:none}
.skip svg{width:21px;height:21px}
.skip b{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-42%);
  font:700 8.5px/1 var(--f-mono);letter-spacing:.02em;pointer-events:none
}
/* полоса перемотки в мини-плеере */
.mini .seek{
  position:absolute;left:0;right:0;top:-1px;height:3px;display:none;
  background:rgba(255,255,255,.12);cursor:pointer;touch-action:none
}
body.seekable .mini .seek{display:block}
.mini .seek::before{content:"";position:absolute;left:0;right:0;top:-9px;bottom:-9px}
.mini .seek i{
  position:absolute;left:0;top:0;bottom:0;width:0%;display:block;
  background:linear-gradient(90deg,var(--acid),var(--mag))
}
.mini .seek:hover,.mini .seek.dragging{height:6px}
.mini .seek{transition:height .18s var(--ease)}
/* ждём данные после перемотки — шкала мягко пульсирует */
body.buffering .track{animation:bufpulse 1.1s var(--ease-io) infinite}
@keyframes bufpulse{0%,100%{opacity:1}50%{opacity:.5}}
@media(prefers-reduced-motion:reduce){
  body.buffering .track{animation:none}
  body.seekable .track,.track .knob,.mini .seek{transition:none}
}

.controls{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.play{
  width:78px;height:78px;border-radius:50%;flex:0 0 auto;position:relative;
  background:var(--acid);color:#07070a;display:grid;place-items:center;
  transition:transform .25s var(--ease),box-shadow .3s;
  box-shadow:0 14px 44px -14px var(--acid);
}
.play:hover{transform:scale(1.07)}
.play:active{transform:scale(.95)}
.play svg{width:28px;height:28px;margin-left:3px}
body.is-playing .play svg.i-play{display:none}
.play svg.i-pause{display:none;margin-left:0}
body.is-playing .play svg.i-pause{display:block}
.play::before{
  content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--acid);
  opacity:0;
}
body.is-playing .play::before{animation:ripple 2.2s var(--ease-io) infinite}
@keyframes ripple{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}}
.play.loading{pointer-events:none}
.play.loading svg{opacity:.25}
.play.loading::after{
  content:"";position:absolute;width:26px;height:26px;border-radius:50%;
  border:2px solid rgba(0,0,0,.25);border-top-color:#07070a;animation:sp .7s linear infinite
}
@keyframes sp{to{transform:rotate(360deg)}}

.vol{display:flex;align-items:center;gap:9px;min-width:130px}
.vol svg{width:19px;height:19px;color:var(--dim);flex:0 0 auto}
/* стилизуем только ползунок громкости плеера — иначе правило перебивает
   фейдеры учебного пульта (у input[type=range] специфичность выше, чем у .mx-xf) */
#vol{
  -webkit-appearance:none;appearance:none;height:4px;border-radius:99px;flex:1;
  background:linear-gradient(90deg,var(--acid) var(--p,70%),rgba(255,255,255,.14) var(--p,70%));
}
#vol::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.6);cursor:pointer
}
#vol::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#fff;cursor:pointer}

.stat{display:flex;flex-direction:column;gap:2px}
.stat b{font:700 19px/1 var(--f-mono)}
.stat span{font:400 9.5px/1 var(--f-mono);letter-spacing:.16em;color:var(--dim-2);text-transform:uppercase}

/* режим проигрывания выпуска в общем плеере */
#btnBackLive{display:none;margin-top:22px}
body.podcast-mode #btnBackLive{display:inline-flex}
body.podcast-mode .onair,
body.podcast-mode.is-playing .onair{
  color:var(--acid);border-color:color-mix(in srgb,var(--acid) 55%,transparent);
  background:color-mix(in srgb,var(--acid) 9%,transparent);
}
body.podcast-mode .onair .core,
body.podcast-mode.is-playing .onair .core{fill:var(--acid)}
.pod .pbtn.on{background:var(--acid);border-color:var(--acid);color:#07070a}
.pod .pbtn.soon{opacity:.35;cursor:default}
.pod.playing{border-color:var(--acid);box-shadow:0 0 0 1px color-mix(in srgb,var(--acid) 40%,transparent)}
.pod.playing .cover::after{opacity:.55}
.label .fallback.ep{
  width:100%;height:100%;display:grid;place-items:center;padding:10px;
  font-family:var(--f-disp);font-size:clamp(12px,2.2vw,18px);line-height:.95;text-transform:uppercase;
}

.ahelp{
  margin-top:22px;display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:var(--r-s);
  border:1px solid color-mix(in srgb,var(--mag) 45%,transparent);
  background:color-mix(in srgb,var(--mag) 10%,transparent);
}
.ahelp .ah-i{
  width:22px;height:22px;border-radius:50%;background:var(--mag);color:#fff;flex:0 0 auto;
  display:grid;place-items:center;font:700 13px/1 var(--f-mono);
}
.ahelp b{display:block;font-size:13px;font-weight:600;margin-bottom:3px}
.ahelp a{font:700 11px/1 var(--f-mono);letter-spacing:.1em;color:var(--acid);text-transform:uppercase}
.ahelp button{margin-left:auto;color:var(--dim);font-size:15px;padding:4px 6px}
.ahelp button:hover{color:var(--ink)}

.next{
  margin-top:26px;display:flex;align-items:center;gap:13px;padding:13px 16px;
  border:1px dashed var(--line-2);border-radius:var(--r-s);
}
.next .lbl{font:700 9.5px/1 var(--f-mono);letter-spacing:.18em;color:var(--dim-2);text-transform:uppercase;flex:0 0 auto}
.next .val{font-size:13.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* — визуализатор — */
.viz-wrap{margin-top:clamp(30px,5vw,56px);position:relative;border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line);background:var(--bg-2)}
canvas#viz{display:block;width:100%;height:132px}
.viz-wrap .cap{
  position:absolute;left:16px;top:12px;font:700 9.5px/1 var(--f-mono);letter-spacing:.2em;
  color:var(--dim-2);text-transform:uppercase;pointer-events:none
}

/* — бегущая строка — */
.ticker{
  margin-top:clamp(30px,5vw,56px);border-block:1px solid var(--line);
  padding:15px 0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.ticker .row{display:flex;gap:34px;width:max-content;animation:slide 42s linear infinite}
body.is-playing .ticker .row{animation-duration:26s}
.ticker span{font-family:var(--f-disp);font-size:22px;letter-spacing:.03em;text-transform:uppercase;color:var(--dim-2);white-space:nowrap;display:flex;align-items:center;gap:34px}
.ticker span em{font-style:normal;color:var(--acid)}
.ticker span::after{content:"✳";color:var(--mag);font-size:15px}
@keyframes slide{to{transform:translateX(-50%)}}

/* — история — */
.hist{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:22px}
.hist .it{display:flex;align-items:center;gap:11px;padding:10px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--card);transition:border-color .25s,transform .25s var(--ease)}
.hist .it:hover{border-color:var(--line-2);transform:translateY(-3px)}
.hist .it img,.hist .it .ph{width:42px;height:42px;border-radius:6px;object-fit:cover;flex:0 0 auto;background:linear-gradient(135deg,var(--mag),var(--cy))}
.hist .it .m{min-width:0}
.hist .it .m b{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist .it .m span{display:block;font-size:11px;color:var(--dim-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* — CTA школы — */
.cta{
  margin-top:clamp(40px,6vw,80px);position:relative;overflow:hidden;border-radius:var(--r-l);
  padding:clamp(28px,5vw,54px);border:1px solid var(--line);
  background:linear-gradient(120deg,color-mix(in srgb,var(--acid) 12%,var(--card)),var(--card) 55%);
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
}
.cta h2{font-size:clamp(26px,4.6vw,50px);line-height:.95;text-transform:uppercase;max-width:16ch}
.cta p{color:var(--dim);margin:12px 0 0;max-width:44ch;font-size:14.5px}
.cta::after{
  content:"";position:absolute;right:-60px;bottom:-90px;width:280px;height:280px;border-radius:50%;
  background:repeating-radial-gradient(circle,rgba(255,255,255,.05) 0 2px,transparent 2px 5px);
  animation:spin 9s linear infinite;
}

/* ============================================================
   [9][10] ПОДКАСТЫ
   ============================================================ */
/* фильтр по названию над сеткой аудио-подкастов */
.pod-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.pf-chip{
  padding:7px 15px;border-radius:999px;border:1px solid var(--line);background:none;
  color:var(--dim);font:600 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;transition:color .2s,border-color .2s,background .2s;
}
.pf-chip:hover{color:var(--ink);border-color:var(--line-2)}
.pf-chip.active{background:var(--acid);color:#07070a;border-color:var(--acid);font-weight:700}

.grid-pods{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(14px,2vw,24px)}
.pod{
  container-type:inline-size;overflow:hidden;position:relative;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s;
}
.pod:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:0 26px 60px -30px rgba(0,0,0,.9)}
.pod .cover{position:relative;aspect-ratio:1;overflow:hidden;background:#0b0b0f}
.pod.video .cover{aspect-ratio:16/9}
.pod .cover .art{position:absolute;inset:0;display:grid;place-items:center;padding:18px;text-align:center}
.pod .cover .art .n{font-family:var(--f-disp);font-size:clamp(40px,11cqw,88px);line-height:.82;text-transform:uppercase;mix-blend-mode:overlay;opacity:.95}
.pod .cover::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(6,6,9,.9));
  opacity:.9
}
.pod .cover .grooves{
  position:absolute;inset:0;opacity:.28;
  #background:repeating-linear-gradient(115deg,rgba(0,0,0,.6) 0 2px,transparent 2px 7px);
  mix-blend-mode:multiply;
}
.pod .pbtn{
  position:absolute;right:14px;bottom:14px;z-index:3;width:48px;height:48px;border-radius:50%;
  background:rgba(10,10,14,.6);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(10px);
  display:grid;place-items:center;transition:background .25s,transform .25s var(--ease),border-color .25s;
}
.pod:hover .pbtn{background:var(--acid);border-color:var(--acid);color:#07070a;transform:scale(1.08)}
.pod .pbtn svg{width:17px;height:17px;margin-left:2px}
.pod .meta{padding:16px 17px 18px}
.pod .meta .row{display:flex;gap:9px;align-items:center;font:400 10px/1 var(--f-mono);letter-spacing:.13em;color:var(--dim-2);text-transform:uppercase;margin-bottom:9px;flex-wrap:wrap}
.pod .meta .row .tag{padding:4px 8px;border:1px solid var(--line);border-radius:99px}
.pod .meta h3{font-size:clamp(19px,4.4cqw,25px);line-height:1;text-transform:uppercase;margin-bottom:8px}
.pod .meta h3 a{color:inherit;text-decoration-line:underline;text-decoration-style:dotted;text-decoration-color:var(--dim-2);text-underline-offset:4px;transition:text-decoration-color .2s,color .2s}
.pod .meta h3 a:hover{text-decoration-style:solid;text-decoration-color:var(--acid);color:var(--acid)}
.pod .meta p{margin:0;font-size:13.5px;color:var(--dim);line-height:1.5}

/* страница одного аудио-выпуска: /audio/<номер> — та же карточка, но одна и покрупнее */
.ep-back{display:inline-flex;margin-bottom:22px}
.grid-pods.ep-single{grid-template-columns:minmax(0,440px);justify-content:center}
.grid-pods.ep-single .pod .meta h3{font-size:clamp(22px,5cqw,30px)}
.grid-pods.ep-single .pod .meta p{font-size:15px}
#audioEpisodeNotFound{color:var(--dim);text-align:center;padding:40px 0}
#audioEpisodeNotFound a{color:var(--acid)}

/* ============================================================
   [4] РАСПИСАНИЕ + АВТОРСКИЕ ПРОГРАММЫ
   ============================================================ */
.now-card{
  display:flex;gap:clamp(14px,3vw,34px);flex-wrap:wrap;margin-bottom:22px;
  padding:18px 22px;border-radius:var(--r-m);border:1px solid var(--line);
  background:linear-gradient(110deg,var(--card-2),var(--card) 65%);
}
.now-card .nc-l,.now-card .nc-r{flex:1;min-width:200px;position:relative;padding-left:16px}
.now-card .nc-l::before,.now-card .nc-r::before{
  content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px;border-radius:2px;
  background:var(--gc,var(--dim-2));
}
.now-card .nc-r::before{background:var(--line-2)}
.now-card .nc-cap{display:block;font:700 9px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--dim-2)}
.now-card b{display:block;font-family:var(--f-disp);font-size:clamp(20px,2.6vw,28px);line-height:1.05;text-transform:uppercase;margin:8px 0 5px}
.now-card i{display:block;font-style:normal;font-size:12.5px;color:var(--dim)}

.legend{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.legend i{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:99px;
  border:1px solid var(--line);font:400 10px/1 var(--f-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);font-style:normal
}
.legend i b{width:9px;height:9px;border-radius:3px;display:block}
.legend .lg-prog b{background:linear-gradient(135deg,var(--acid),var(--mag))}
.legend .lg-rep b{background:transparent;border:1px dashed var(--line-2)}

.sched-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-m);background:var(--card)}
table.sched{border-collapse:collapse;width:100%;min-width:940px;font-size:13px}
table.sched th,table.sched td{border:1px solid var(--line);padding:0;vertical-align:top}
table.sched thead th{
  position:sticky;top:0;z-index:3;background:var(--card-2);
  font:700 10px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  padding:12px 8px;text-align:center;
}
table.sched thead th.today{color:var(--acid)}
table.sched td.time,table.sched th.time{
  width:74px;min-width:74px;background:var(--card-2);text-align:center;
  font:400 10.5px/1 var(--f-mono);color:var(--dim-2);padding:0 6px;position:sticky;left:0;z-index:2
}
table.sched tr.hour-now td.time{color:var(--acid);font-weight:700}
table.sched tr.hour-now td.time::after{content:"";position:absolute;right:0;top:0;bottom:0;width:2px;background:var(--acid)}

.slot{
  position:relative;display:flex;flex-direction:column;justify-content:center;
  height:100%;min-height:38px;padding:8px 11px;overflow:hidden;transition:background .3s;
}
.g-slot .g{font:700 10.5px/1.2 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;display:flex;align-items:center;gap:7px;color:var(--dim)}
.g-slot .g b{width:8px;height:8px;border-radius:3px;flex:0 0 auto;background:var(--gc)}
.g-slot .g-range{font:400 9px/1 var(--f-mono);letter-spacing:.12em;color:var(--dim-2);margin-top:6px;padding-left:15px}
.g-slot:hover{background:rgba(255,255,255,.03)}

/* авторская программа в сетке */
.p-slot{
  cursor:pointer;
  background:linear-gradient(100deg,color-mix(in srgb,var(--gc) 22%,transparent),color-mix(in srgb,var(--gc) 6%,transparent));
  box-shadow:inset 3px 0 0 var(--gc);
}
.p-slot:hover{background:linear-gradient(100deg,color-mix(in srgb,var(--gc) 34%,transparent),color-mix(in srgb,var(--gc) 12%,transparent))}
.p-name{font:700 11px/1.25 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.p-auth{font:400 9px/1.3 var(--f-mono);color:var(--dim);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-live{
  margin-top:5px;font:700 8px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gc);
}
/* повтор */
.r-slot{cursor:pointer;border-left:2px dashed var(--gc);background:rgba(255,255,255,.018)}
.r-slot:hover{background:rgba(255,255,255,.05)}
.r-slot .p-name{color:var(--dim)}

.slot.now::before{
  content:"";position:absolute;inset:0;border:2px solid var(--acid);pointer-events:none;z-index:2;
  animation:nowpulse 2.2s var(--ease-io) infinite
}
@keyframes nowpulse{0%,100%{opacity:1}50%{opacity:.35}}
.slot.now::after{
  content:"NOW";position:absolute;right:0;top:0;background:var(--acid);color:#07070a;z-index:2;
  font:700 8px/1 var(--f-mono);letter-spacing:.14em;padding:4px 6px;
}
.tz-note{margin-top:14px;font:400 11px/1.6 var(--f-mono);color:var(--dim-2)}

/* карточки программ */
.progs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(14px,2vw,22px)}
.prg{
  position:relative;overflow:hidden;padding:24px 24px 26px;border-radius:var(--r-m);
  border:1px solid var(--line);background:var(--card);
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s;
}
.prg::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gc)}
.prg:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--gc) 55%,transparent);
  box-shadow:0 26px 60px -32px rgba(0,0,0,.95)}
.prg.flash{animation:progflash 1.4s var(--ease)}
@keyframes progflash{0%{box-shadow:0 0 0 0 var(--gc)}40%{box-shadow:0 0 0 4px color-mix(in srgb,var(--gc) 45%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
.prg .pr-when{display:block;font:700 10px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gc);margin-bottom:13px}
.prg h3{font-size:clamp(24px,3vw,30px);line-height:1;text-transform:uppercase;margin-bottom:11px}
.prg p{margin:0 0 16px;font-size:14px;line-height:1.6;color:var(--dim)}
.prg .pr-chips{display:flex;gap:6px;flex-wrap:wrap}
.prg .chip{
  padding:6px 12px;border-radius:99px;border:1px solid var(--line);
  font:400 10px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim-2);
}
.prg .pr-rep{margin-top:14px;font:700 10px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim-2)}

@media(max-width:620px){
  .now-card{flex-direction:column;gap:16px;padding:16px 18px}
  table.sched{min-width:820px;font-size:12px}
  .slot{padding:7px 9px;min-height:34px}
}

/* ============================================================
   [5] ИГРЫ
   ============================================================ */
.games{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(14px,2vw,22px)}
.game-card{
  position:relative;overflow:hidden;border-radius:var(--r-m);border:1px solid var(--line);
  background:var(--card);padding:24px 22px 26px;text-align:left;
  transition:transform .35s var(--ease),border-color .35s,background .35s;
  display:flex;flex-direction:column;gap:14px;min-height:330px;
}
.game-card:hover{transform:translateY(-7px);border-color:var(--acid);background:var(--card-2)}
.game-card .ill{height:150px;display:grid;place-items:center;color:var(--acid);opacity:.85;transition:opacity .3s,transform .5s var(--ease)}
.game-card:hover .ill{opacity:1;transform:scale(1.05)}
.game-card .ill svg{width:100%;height:100%;max-width:180px}
.game-card h3{font-size:26px;text-transform:uppercase;line-height:1}
.game-card p{margin:0;font-size:13.5px;color:var(--dim);flex:1}
.game-card .go{font:700 10.5px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--acid);display:flex;align-items:center;gap:8px}

/* игровой экран */
.stage{margin-top:26px;display:none;scroll-margin-top:96px}
.stage.open{display:block;animation:fadeUp .45s var(--ease)}
.stage .head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.stage .head h3{font-size:clamp(24px,4vw,40px);text-transform:uppercase;line-height:1}
.hud{display:flex;gap:10px;flex-wrap:wrap}
.hud .c{
  padding:9px 14px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--card);
  text-align:center;min-width:80px
}
.hud .c b{display:block;font:700 18px/1 var(--f-mono);color:var(--acid)}
.hud .c span{display:block;font:400 8.5px/1 var(--f-mono);letter-spacing:.16em;color:var(--dim-2);margin-top:5px;text-transform:uppercase}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:clamp(18px,3vw,30px)}
.hint{font:400 12px/1.6 var(--f-mono);color:var(--dim-2);margin-top:14px}

/* игра 2: скретч-вертушка (модуль из методического пособия) */
.scratch-wrap{display:flex;gap:clamp(18px,3vw,34px);align-items:center;justify-content:center;flex-wrap:wrap}
.sc-platter{
  width:min(280px,66vw);aspect-ratio:1;border-radius:50%;position:relative;flex-shrink:0;
  background:
    radial-gradient(circle,#101014 0 17.5%,transparent 18%),
    repeating-radial-gradient(circle,#08080b 0 2px,#16161c 2px 4px);
  border:1px solid var(--line-2);cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;
  box-shadow:0 18px 50px rgba(0,0,0,.75), 0 0 50px rgba(204,255,0,.07), inset 0 0 60px rgba(0,0,0,.7);
}
.sc-platter:active{cursor:grabbing}
.sc-platter::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 200deg,transparent 0 14%,rgba(255,255,255,.09) 20%,transparent 28% 64%,rgba(255,255,255,.05) 72%,transparent 80%);
  mix-blend-mode:screen;
}
.sc-plabel{
  position:absolute;inset:29%;border-radius:50%;pointer-events:none;z-index:2;
  background:conic-gradient(from 40deg,#8aaa00,#3d4d00,var(--acid),#8aaa00);
  border:4px solid #08080b;display:flex;align-items:center;justify-content:center;
}
.sc-plabel span{
  font-family:var(--f-disp);font-size:16px;letter-spacing:.1em;color:#0a0d00;
  transform:rotate(-14deg);text-transform:uppercase;
}
.sc-pmark{
  position:absolute;left:50%;top:2.5%;width:3px;height:13%;margin-left:-1.5px;z-index:3;
  background:#fff;border-radius:2px;box-shadow:0 0 8px rgba(255,255,255,.65);pointer-events:none;
}
.scratch-side{flex:1;min-width:240px;max-width:380px}
.sc-row{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.sc-btn{
  display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:99px;
  border:1px solid var(--line-2);background:var(--card-2);color:var(--ink);
  font:700 11px/1 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;transition:all .2s var(--ease);
}
.sc-btn svg{width:13px;height:13px}
.sc-btn:hover{transform:translateY(-2px);border-color:var(--ink)}
.sc-btn.primary{background:var(--acid);border-color:var(--acid);color:#07070a}
.sc-btn.on{background:var(--mag);border-color:var(--mag);color:#fff}
.sc-btn[disabled]{opacity:.5;pointer-events:none}
.sc-src{font:400 10.5px/1.6 var(--f-mono);color:var(--dim-2)}
.sc-stats{display:flex;gap:10px;margin-top:14px}
.sc-stat{flex:1;text-align:center;padding:11px 8px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--bg-2)}
.sc-stat .v{font:700 20px/1 var(--f-mono);color:var(--acid)}
.sc-stat .l{font:400 8.5px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2);margin-top:6px}
.sc-note{margin-top:14px;padding:13px 15px;border:1px dashed var(--line-2);border-radius:var(--r-s)}
.sc-note b{display:block;font:700 10px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--acid);margin-bottom:7px}
.sc-note p{margin:0;font-size:12.5px;color:var(--dim);line-height:1.55}

.rowbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;justify-content:center}
.msg{text-align:center;margin-top:16px;font:700 12px/1.6 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--acid);min-height:20px}

/* ============================================================
   мини-плеер / футер / модалка / куки
   ============================================================ */
.mini{
  position:fixed;left:0;right:0;bottom:0;z-index:55;transform:translateY(110%);
  transition:transform .45s var(--ease);
  background:color-mix(in srgb,var(--bg-2) 88%,transparent);
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);
}
.mini.show{transform:none}
.mini .in{display:flex;align-items:center;gap:14px;height:80px}
.mini .mp{width:46px;height:46px;border-radius:50%;background:var(--acid);color:#07070a;display:grid;place-items:center;flex:0 0 auto;transition:transform .2s}
.mini .mp:hover{transform:scale(1.08)}
.mini .mp svg{width:17px;height:17px;margin-left:2px}
body.is-playing .mini .mp svg.i-play{display:none}
.mini .mp svg.i-pause{display:none;margin-left:0}
body.is-playing .mini .mp svg.i-pause{display:block}
.mini .art{width:46px;height:46px;border-radius:8px;object-fit:cover;flex:0 0 auto;background:linear-gradient(135deg,var(--mag),var(--cy))}
.mini .txt{min-width:0;flex:1}
.mini .txt b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .txt span{display:block;font:400 11px/1.4 var(--f-mono);color:var(--dim-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .bars{display:flex;align-items:flex-end;gap:3px;height:22px;flex:0 0 auto}
.mini .bars i{width:3px;background:var(--acid);border-radius:2px;height:20%;display:block}
body.is-playing .mini .bars i{animation:eq .9s var(--ease-io) infinite alternate}
.mini .bars i:nth-child(2){animation-delay:.15s}
.mini .bars i:nth-child(3){animation-delay:.3s}
.mini .bars i:nth-child(4){animation-delay:.45s}
@keyframes eq{to{height:100%}}
@media(max-width:620px){ .mini .art,.mini .bars{display:none} .mini .in{height:70px} }

footer.site{border-top:1px solid var(--line);margin-top:clamp(40px,6vw,80px);padding:40px 0 34px}
.f-in{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:flex-start}
.f-links{display:flex;gap:26px;flex-wrap:wrap}
.f-col{display:flex;flex-direction:column;gap:9px}
.f-col b{font:700 9.5px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim-2);margin-bottom:3px}
.f-col a,.f-col button{font-size:13.5px;color:var(--dim);transition:color .2s;text-align:left;padding:0}
.f-col a:hover,.f-col button:hover{color:var(--acid)}

/* CTA «Стать частью команды» — левая колонка футера */
.join-cta{
  display:flex;align-items:center;gap:14px;width:100%;max-width:380px;margin-top:22px;
  padding:15px 18px;border-radius:var(--r-m);text-align:left;position:relative;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--acid) 40%,transparent);
  background:linear-gradient(115deg,color-mix(in srgb,var(--acid) 13%,var(--card)),var(--card) 70%);
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;
}
.join-cta::after{                       /* блик по наведению */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.10) 50%,transparent 62%);
  transform:translateX(-130%);transition:transform .7s var(--ease);
}
.join-cta:hover{
  transform:translateY(-3px);border-color:var(--acid);
  box-shadow:0 18px 40px -20px var(--acid);
}
.join-cta:hover::after{transform:translateX(130%)}
.join-cta .jc-ic{
  width:42px;height:42px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--acid);color:#07070a;transition:transform .3s var(--ease);
}
.join-cta:hover .jc-ic{transform:rotate(-6deg) scale(1.05)}
.join-cta .jc-ic svg{width:21px;height:21px}
.join-cta .jc-t{flex:1;min-width:0}
.join-cta .jc-t b{
  display:block;font:600 15px/1.25 var(--f-body);letter-spacing:0;text-transform:none;color:var(--ink);
}
.join-cta .jc-t i{
  display:block;font-style:normal;font:400 11px/1.45 var(--f-mono);color:var(--dim-2);margin-top:5px;
}
.join-cta .jc-ar{
  flex:0 0 auto;font-size:19px;color:var(--acid);transition:transform .3s var(--ease);
}
.join-cta:hover .jc-ar{transform:translateX(4px)}
@media(max-width:860px){ .join-cta{max-width:none} }

/* блок контакта внутри модалки */
.m-contact{
  display:flex;align-items:center;gap:13px;margin-top:22px;padding:16px 18px;border-radius:var(--r-m);
  border:1px solid color-mix(in srgb,var(--acid) 40%,transparent);
  background:color-mix(in srgb,var(--acid) 8%,transparent);flex-wrap:wrap;
}
.m-contact .mc-t{flex:1;min-width:170px}
.m-contact .mc-t span{display:block;font:700 9.5px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim-2);margin-bottom:6px}
.m-contact .mc-t b{display:block;font-family:var(--f-disp);font-size:26px;line-height:1;color:var(--acid);letter-spacing:.01em}
.m-join-list{list-style:none;margin:0;padding:0}
.m-join-list li{position:relative;padding-left:20px;margin-bottom:12px;font-size:14px;color:var(--dim);line-height:1.6}
.m-join-list li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:2px;background:var(--acid)}
.m-join-list li b{color:var(--ink);font-weight:600}
.f-bot{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font:400 11px/1.6 var(--f-mono);color:var(--dim-2)}

dialog.modal{
  border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--card);color:var(--ink);
  padding:0;max-width:min(680px,92vw);width:100%;
}
dialog.modal::backdrop{background:rgba(4,4,6,.78);backdrop-filter:blur(6px)}
dialog.modal .m-in{padding:clamp(22px,4vw,34px);max-height:76vh;overflow:auto}
dialog.modal h3{font-size:30px;text-transform:uppercase;margin-bottom:6px}
dialog.modal h4{font:700 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--acid);margin:22px 0 8px}
dialog.modal p{font-size:14px;color:var(--dim);margin:0 0 10px;line-height:1.65}
dialog.modal .x{position:absolute;right:16px;top:16px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--dim)}
dialog.modal .x:hover{color:var(--ink);border-color:var(--ink)}

.cookie{
  position:fixed;left:var(--pad);right:var(--pad);bottom:calc(96px + env(safe-area-inset-bottom));z-index:70;
  max-width:520px;margin-inline:auto;padding:18px 20px;border-radius:var(--r-m);
  background:color-mix(in srgb,var(--card) 94%,transparent);border:1px solid var(--line-2);
  backdrop-filter:blur(16px);box-shadow:0 26px 60px -24px rgba(0,0,0,.95);
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.cookie.hide{opacity:0;transform:translateY(24px);pointer-events:none}
.cookie p{margin:0;flex:1;min-width:200px;font-size:12.5px;color:var(--dim);line-height:1.5}

.toast{
  position:fixed;left:50%;bottom:calc(110px + env(safe-area-inset-bottom));transform:translate(-50%,20px);
  z-index:80;padding:12px 20px;border-radius:999px;background:var(--card-2);border:1px solid var(--line-2);
  font:700 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s var(--ease);max-width:88vw;text-align:center
}
.toast.show{opacity:1;transform:translate(-50%,0)}


/* ============================================================
   МОДУЛЬ: УЧЕБНЫЙ МИКШЕР (перенесён из методического пособия)
   ============================================================ */
#stMix{
  --mxc-primary:#22e0ff; --mxc-primary-deep:#0bb6d8;
  --mxc-ink:#08080b; --mxc-ink-soft:#0f0f15;
  --mxc-panel:#121219; --mxc-panel-2:#181822;
  --mxc-gray:#83838f; --mxc-gray-light:#b7b7c4;
  --mxc-line:rgba(255,255,255,.14);
  --mxc-display:var(--f-disp); --mxc-body:var(--f-body);
}
/* ════════════════════════════════════════════════════════════
   УЧЕБНЫЙ МИКШЕР — DJ-дек на Web Audio
   ════════════════════════════════════════════════════════════ */
.mixer{display:flex;flex-direction:column;gap:14px}
.mixer-decks{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ── дек ── */
.mx-deck{
  background:var(--mxc-panel-2);border:1px solid var(--mxc-line);
  border-radius:14px;padding:15px;display:flex;flex-direction:column;gap:11px;
}
.mx-deck.b{border-color:rgba(0,196,255,.28)}
.mx-deck-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mx-deck-name{
  font-family:var(--mxc-display);font-size:18px;letter-spacing:1px;color:var(--mxc-gray-light);
}
.mx-deck.b .mx-deck-name{color:var(--mxc-primary)}
.mx-track-name{
  font-size:11px;color:var(--mxc-gray);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;text-align:right;
}

/* ── зона загрузки / волна ── */
.mx-wave-wrap{
  position:relative;height:96px;border-radius:10px;
  background:var(--mxc-ink);border:1px solid var(--mxc-line);overflow:hidden;
  touch-action:pan-x;
}
/* внутренняя дорожка волны — может быть шире контейнера при зуме */
.mx-wave-scroll{
  position:absolute;inset:0;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}
.mx-wave-scroll::-webkit-scrollbar{height:5px}
.mx-wave-scroll::-webkit-scrollbar-thumb{background:var(--mxc-line);border-radius:3px}
.mx-wave-track{position:relative;height:100%;min-width:100%}
.mx-wave{display:block;height:100%;width:100%}

/* ── панель зума волны ── */
.mx-wave-zoom{
  position:absolute;top:6px;right:6px;display:none;gap:4px;z-index:4;
}
.mx-wave-wrap.loaded .mx-wave-zoom{display:flex}
.mx-zoom-btn{
  width:26px;height:26px;border-radius:7px;cursor:pointer;
  background:rgba(10,10,11,.82);border:1px solid var(--mxc-line);color:var(--mxc-gray-light);
  font-family:var(--mxc-display);font-size:16px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .12s,color .12s;
}
.mx-zoom-btn:hover{border-color:rgba(0,196,255,.5);color:#fff}
.mx-zoom-btn:disabled{opacity:.3;cursor:not-allowed}
.mx-zoom-lvl{
  min-width:34px;height:26px;border-radius:7px;
  background:rgba(10,10,11,.82);border:1px solid var(--mxc-line);
  color:var(--mxc-primary);font-family:var(--mxc-display);font-size:12px;letter-spacing:.5px;
  display:flex;align-items:center;justify-content:center;
}
.mx-drop{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;cursor:pointer;
  transition:background .15s;text-align:center;padding:8px;
}
.mx-drop:hover,.mx-drop.over{background:rgba(0,196,255,.07)}
.mx-drop svg{width:24px;height:24px;stroke:var(--mxc-primary);fill:none;opacity:.8}
.mx-drop .mxd-main{font-size:12px;color:var(--mxc-gray-light);font-weight:700}
.mx-drop .mxd-sub{font-size:10px;color:var(--mxc-gray)}
.mx-wave-wrap.loaded .mx-drop{display:none}

/* input файла: скрыт, но кликабелен на мобильных (не display:none!) */
.mx-file-input{
  position:absolute;width:1px;height:1px;opacity:0;
  overflow:hidden;pointer-events:none;left:-9999px;
}
/* кнопка «загрузить другой трек» — в шапке деки */
.mx-reload{
  display:none;align-items:center;gap:5px;cursor:pointer;
  background:var(--mxc-panel-2);border:1px solid var(--mxc-line);color:var(--mxc-gray-light);
  border-radius:7px;padding:4px 9px;font-size:10px;font-weight:700;
  letter-spacing:.3px;transition:border-color .12s,color .12s;
}
.mx-reload:hover{border-color:rgba(0,196,255,.5);color:#fff}
.mx-reload svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.2}
.mx-deck.loaded .mx-reload{display:inline-flex}
.mx-playhead{
  position:absolute;top:0;bottom:0;width:2px;background:var(--mxc-primary);
  box-shadow:0 0 8px var(--mxc-primary);left:0;pointer-events:none;display:none;
}
.mx-wave-wrap.loaded .mx-playhead{display:block}
/* ── маркер Cue на волне ── */
.mx-cue-marker{
  position:absolute;top:0;bottom:0;width:2px;background:#ffd24a;
  box-shadow:0 0 7px rgba(255,210,74,.8);left:0;pointer-events:none;display:none;
}
.mx-wave-wrap.loaded .mx-cue-marker.set{display:block}
.mx-cue-marker::before{
  content:"CUE";position:absolute;top:2px;left:3px;
  font-family:var(--mxc-display);font-size:9px;letter-spacing:.5px;color:#ffd24a;
}

/* ── Hot Cue: метки на волне ── */
.mx-hotcue-marker{
  position:absolute;top:0;bottom:0;width:2px;left:0;
  pointer-events:none;display:none;
}
.mx-hotcue-marker.set{display:block}
.mx-hotcue-marker::before{
  content:attr(data-num);position:absolute;top:1px;left:3px;
  font-family:var(--mxc-display);font-size:10px;line-height:1;
  padding:1px 4px;border-radius:3px;color:#000;
}
.mx-hotcue-marker[data-num="1"]{background:#ff5d5d}
.mx-hotcue-marker[data-num="1"]::before{background:#ff5d5d}
.mx-hotcue-marker[data-num="2"]{background:#ffb13d}
.mx-hotcue-marker[data-num="2"]::before{background:#ffb13d}
.mx-hotcue-marker[data-num="3"]{background:#3ddc84}
.mx-hotcue-marker[data-num="3"]::before{background:#3ddc84}
.mx-hotcue-marker[data-num="4"]{background:#3da5ff}
.mx-hotcue-marker[data-num="4"]::before{background:#3da5ff}

/* ── Hot Cue: ряд кнопок ── */
.mx-hotcues{display:flex;gap:7px}
.mx-hotcue-btn{
  flex:1;min-width:0;height:42px;border-radius:9px;cursor:pointer;
  background:var(--mxc-panel);border:1px solid var(--mxc-line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  transition:border-color .12s,background .12s;
  font-family:var(--mxc-display);position:relative;
}
.mx-hotcue-btn .hc-num{font-size:15px;line-height:1;color:var(--mxc-gray-light)}
.mx-hotcue-btn .hc-state{
  font-size:7.5px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--mxc-gray);font-weight:700;
}
.mx-hotcue-btn .hc-key{
  font-size:7px;letter-spacing:.5px;color:var(--mxc-gray);opacity:.7;
}
.mx-hotcue-btn:hover{border-color:rgba(0,196,255,.4)}
/* крестик удаления — виден только когда точка поставлена */
.mx-hotcue-btn .hc-clear{
  position:absolute;top:-7px;right:-7px;width:18px;height:18px;
  border-radius:50%;display:none;align-items:center;justify-content:center;
  background:#ff4d4d;border:2px solid var(--mxc-panel-2);cursor:pointer;
  font-family:var(--mxc-body);font-size:11px;line-height:1;color:#fff;font-weight:700;
  box-shadow:0 2px 5px rgba(0,0,0,.5);transition:transform .1s,background .12s;
  z-index:2;
}
.mx-hotcue-btn.set .hc-clear{display:flex}
.mx-hotcue-btn .hc-clear:hover{background:#ff6868;transform:scale(1.12)}
.mx-hotcue-btn .hc-clear:active{transform:scale(.94)}
.mx-hotcue-btn.set[data-num="1"]{background:rgba(255,93,93,.16);border-color:#ff5d5d}
.mx-hotcue-btn.set[data-num="1"] .hc-num{color:#ff5d5d}
.mx-hotcue-btn.set[data-num="2"]{background:rgba(255,177,61,.16);border-color:#ffb13d}
.mx-hotcue-btn.set[data-num="2"] .hc-num{color:#ffb13d}
.mx-hotcue-btn.set[data-num="3"]{background:rgba(61,220,132,.16);border-color:#3ddc84}
.mx-hotcue-btn.set[data-num="3"] .hc-num{color:#3ddc84}
.mx-hotcue-btn.set[data-num="4"]{background:rgba(61,165,255,.16);border-color:#3da5ff}
.mx-hotcue-btn.set[data-num="4"] .hc-num{color:#3da5ff}
.mx-loading{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  font-size:11px;color:var(--mxc-primary);font-weight:700;letter-spacing:1px;
  background:rgba(10,10,11,.85);text-transform:uppercase;
}
.mx-loading.show{display:flex}

/* ── транспорт ── */
.mx-transport{display:flex;align-items:center;gap:9px}
.mx-play{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;cursor:pointer;
  border:none;background:linear-gradient(135deg,var(--mxc-primary),var(--mxc-primary-deep));
  display:flex;align-items:center;justify-content:center;
  transition:transform .1s,box-shadow .15s;
}
.mx-play:hover{box-shadow:0 4px 18px rgba(0,196,255,.4)}
.mx-play:active{transform:scale(.93)}
.mx-play svg{width:18px;height:18px;fill:#000}
.mx-play:disabled{opacity:.35;cursor:not-allowed}
.mx-cue{
  padding:0 14px;height:46px;border-radius:10px;cursor:pointer;
  background:var(--mxc-panel);border:1px solid var(--mxc-line);color:#fff;
  font-family:var(--mxc-display);font-size:14px;letter-spacing:1px;
  transition:border-color .15s;
}
.mx-cue:hover{border-color:rgba(0,196,255,.45)}
.mx-cue:disabled{opacity:.35;cursor:not-allowed}
.mx-time{
  font-family:var(--mxc-display);font-size:15px;letter-spacing:1px;
  color:var(--mxc-gray-light);margin-left:auto;
}
.mx-time b{color:#fff}

/* ── ряд: темп / громкость ── */
.mx-knob-row{display:flex;gap:14px}
.mx-knob{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.mx-knob .mxk-top{
  display:flex;justify-content:space-between;align-items:baseline;gap:6px;
  font-size:9.5px;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--mxc-gray);font-weight:700;white-space:nowrap;
}
.mx-knob .mxk-val{
  color:var(--mxc-primary);font-family:var(--mxc-display);
  font-size:13px;letter-spacing:.5px;flex-shrink:0;
}

/* ── вертикальный питч-фейдер (как на CDJ) ── */
.mx-pitch-row{display:flex;gap:14px;align-items:stretch}
.mx-pitch{
  flex-shrink:0;width:88px;
  background:var(--mxc-panel);border:1px solid var(--mxc-line);border-radius:10px;
  padding:9px 6px;display:flex;flex-direction:column;align-items:center;gap:7px;
}
.mx-pitch-head{
  display:flex;flex-direction:column;align-items:center;gap:1px;
}
.mx-pitch-head .mxp-cap{
  font-size:9px;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--mxc-gray);font-weight:700;
}
.mx-pitch-head .mxp-val{
  color:var(--mxc-primary);font-family:var(--mxc-display);font-size:17px;letter-spacing:.5px;
}
.mx-pitch-track{
  position:relative;height:120px;width:46px;
  display:flex;align-items:center;justify-content:center;
}
/* центральная риска (0%) */
.mx-pitch-track::before{
  content:"";position:absolute;left:6px;right:6px;top:50%;height:2px;
  background:var(--mxc-line);transform:translateY(-1px);
}
/* вертикальный input range через поворот */
.mx-pitch-track input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:120px;height:8px;margin:0;outline:none;cursor:pointer;
  transform:rotate(90deg);
  background:linear-gradient(90deg,var(--mxc-ink),var(--mxc-panel-2),var(--mxc-ink));
  border:1px solid var(--mxc-line);border-radius:5px;
}
.mx-pitch-track input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:18px;height:34px;
  border-radius:5px;background:linear-gradient(180deg,#fff,#c8c8d0);
  border:2px solid var(--mxc-ink-soft);cursor:pointer;
  box-shadow:0 0 0 1px var(--mxc-line),0 3px 7px rgba(0,0,0,.55);
}
.mx-pitch-track input[type=range]::-moz-range-thumb{
  width:18px;height:34px;border-radius:5px;
  background:linear-gradient(180deg,#fff,#c8c8d0);
  border:2px solid var(--mxc-ink-soft);cursor:pointer;
}
.mx-pitch-foot{display:flex;gap:5px;align-items:center}
.mx-pitch-range,.mx-pitch-reset{
  font-family:var(--mxc-display);letter-spacing:.5px;cursor:pointer;
  background:var(--mxc-panel-2);border:1px solid var(--mxc-line);color:var(--mxc-gray-light);
  border-radius:6px;transition:border-color .12s,color .12s,background .12s;
}
.mx-pitch-range{font-size:10px;padding:4px 7px}
.mx-pitch-reset{font-size:10px;padding:4px 7px}
.mx-pitch-range:hover,.mx-pitch-reset:hover{border-color:rgba(0,196,255,.5);color:#fff}
.mx-pitch-reset:active{background:var(--mxc-primary);color:#000}
.mx-pitch-side{flex:1;min-width:0;display:flex;flex-direction:column;gap:11px;justify-content:center}

/* ── вертикальные фейдеры: громкость + фильтр ── */
.mx-vfaders{display:flex;gap:10px}
.mx-vfader{
  flex:1;min-width:0;
  background:var(--mxc-panel);border:1px solid var(--mxc-line);border-radius:10px;
  padding:9px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;
}
.mx-vfader-head{display:flex;flex-direction:column;align-items:center;gap:1px}
.mx-vfader-head .vf-cap{
  font-size:9px;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--mxc-gray);font-weight:700;
}
.mx-vfader-head .vf-val{
  color:var(--mxc-primary);font-family:var(--mxc-display);font-size:14px;letter-spacing:.5px;
}
.mx-vfader-track{
  position:relative;height:104px;width:42px;
  display:flex;align-items:center;justify-content:center;
}
/* центральная риска — только для фильтра */
.mx-vfader-track.centered::before{
  content:"";position:absolute;left:7px;right:7px;top:50%;height:2px;
  background:var(--mxc-line);transform:translateY(-1px);
}
.mx-vfader-track input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:104px;height:7px;margin:0;outline:none;cursor:pointer;
  transform:rotate(-90deg);
  background:linear-gradient(90deg,var(--mxc-ink),var(--mxc-panel-2),var(--mxc-ink));
  border:1px solid var(--mxc-line);border-radius:5px;
}
.mx-vfader-track input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:16px;height:28px;
  border-radius:5px;background:linear-gradient(180deg,#fff,#c8c8d0);
  border:2px solid var(--mxc-ink-soft);cursor:pointer;
  box-shadow:0 0 0 1px var(--mxc-line),0 3px 7px rgba(0,0,0,.55);
}
.mx-vfader-track input[type=range]::-moz-range-thumb{
  width:16px;height:28px;border-radius:5px;
  background:linear-gradient(180deg,#fff,#c8c8d0);
  border:2px solid var(--mxc-ink-soft);cursor:pointer;
}
.mx-vfader-foot{
  font-size:9px;letter-spacing:.4px;color:var(--mxc-gray);
  display:flex;gap:6px;
}
.mx-filter-reset{
  font-family:var(--mxc-display);font-size:9px;letter-spacing:.5px;cursor:pointer;
  background:var(--mxc-panel-2);border:1px solid var(--mxc-line);color:var(--mxc-gray-light);
  border-radius:6px;padding:3px 8px;transition:border-color .12s,color .12s,background .12s;
}
.mx-filter-reset:hover{border-color:rgba(0,196,255,.5);color:#fff}
.mx-filter-reset:active{background:var(--mxc-primary);color:#000}

/* ── EQ + kill ── */
.mx-eq{display:flex;gap:9px}
.mx-eq-band{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.mx-eq-band .mxe-name{
  font-size:9px;letter-spacing:1px;text-transform:uppercase;
  color:var(--mxc-gray);font-weight:700;
}
.mx-eq-fader{
  height:72px;width:34px;border-radius:8px;position:relative;cursor:pointer;
  background:var(--mxc-panel);border:1px solid var(--mxc-line);
}
.mx-eq-fill{
  position:absolute;left:0;right:0;bottom:0;border-radius:0 0 7px 7px;
  background:linear-gradient(180deg,rgba(0,196,255,.45),rgba(0,196,255,.12));
}
.mx-eq-knob{
  position:absolute;left:50%;transform:translateX(-50%);
  width:28px;height:11px;border-radius:4px;background:var(--mxc-primary);
  box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.mx-kill{
  font-family:var(--mxc-display);font-size:11px;letter-spacing:.5px;
  padding:4px 0;width:34px;border-radius:6px;cursor:pointer;
  background:var(--mxc-panel);border:1px solid var(--mxc-line);color:var(--mxc-gray);
  transition:all .12s;
}
.mx-kill.on{
  background:#ff4d4d;border-color:#ff4d4d;color:#fff;
  box-shadow:0 0 10px rgba(255,77,77,.5);
}

/* ── центральная секция: кроссфейдер ── */
.mx-center{
  background:var(--mxc-panel-2);border:1px solid var(--mxc-line);
  border-radius:14px;padding:16px 20px;
}
.mx-xf-label{
  display:flex;justify-content:space-between;
  font-family:var(--mxc-display);font-size:15px;letter-spacing:1px;
  color:var(--mxc-gray-light);margin-bottom:8px;
}
.mx-xf-label .a{color:#ff8a3d}
.mx-xf-label .b{color:var(--mxc-primary)}
.mx-xf{
  -webkit-appearance:none;appearance:none;width:100%;height:10px;
  border-radius:6px;outline:none;cursor:pointer;
  background:linear-gradient(90deg,#ff8a3d,var(--mxc-panel),var(--mxc-primary));
}
.mx-xf::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:26px;height:26px;
  border-radius:7px;background:#fff;cursor:pointer;
  border:3px solid var(--mxc-ink-soft);box-shadow:0 0 0 1px var(--mxc-line),0 3px 8px rgba(0,0,0,.5);
}
.mx-xf::-moz-range-thumb{
  width:26px;height:26px;border-radius:7px;background:#fff;cursor:pointer;
  border:3px solid var(--mxc-ink-soft);
}
.mx-xf-hint{
  text-align:center;font-size:10px;color:var(--mxc-gray);
  letter-spacing:1px;text-transform:uppercase;font-weight:700;margin-top:8px;
}

@media(max-width:720px){
  .mixer-decks{grid-template-columns:1fr}
  .mx-track-name{max-width:110px}
  /* раскрываем деки в общий поток, чтобы кроссфейдер встал между ними */
  .mixer{display:flex;flex-direction:column;gap:14px}
  .mixer-decks{display:contents}
  .mixer .mx-deck.a{order:1}
  .mixer .mx-center{order:2;margin-block:2px}
  .mixer .mx-deck.b{order:3}
  .mx-xf{height:14px}
  .mx-xf::-webkit-slider-thumb{width:30px;height:30px}
}

/* ============================================================
   МОДУЛЬ: ФИНГЕРДРАММИНГ (перенесён со страницы Moskvin Play)
   ============================================================ */
.fd-machine{border:1px solid var(--line);border-radius:var(--r-m);background:var(--card);overflow:hidden}
.fd-machine-top{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding:15px 20px;border-bottom:1px solid var(--line);background:var(--card-2);
}
.fd-machine-brand{
  font:700 11px/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--ink);
  display:flex;align-items:center;gap:9px;
}
.fd-led{width:8px;height:8px;border-radius:50%;background:var(--acid);box-shadow:0 0 10px var(--acid);animation:fd-blink 2.4s ease-in-out infinite}
@keyframes fd-blink{0%,100%{opacity:1}50%{opacity:.3}}
.fd-tabs{display:flex;gap:6px;flex-wrap:wrap}
.fd-tab{
  border:1px solid var(--line-2);background:transparent;color:var(--dim);
  font:600 11px/1 var(--f-mono);letter-spacing:.09em;padding:9px 15px;border-radius:99px;
  transition:color .2s,background .2s,border-color .2s;text-transform:uppercase;
}
.fd-tab:hover{color:var(--ink)}
.fd-tab.active{background:var(--acid);border-color:var(--acid);color:#07070a;font-weight:700}
.fd-panel{display:none;padding:22px 20px 26px}
.fd-panel.active{display:block}
.fd-hint{font-size:13px;color:var(--dim);margin:0 0 18px;line-height:1.6}
.fd-hint kbd{
  display:inline-block;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;
  padding:1px 7px;font:700 11px/1.5 var(--f-mono);background:var(--card-2);color:var(--ink);
}
.fd-pads{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:540px;margin:0 auto}
.fd-pad{
  aspect-ratio:1;border-radius:12px;border:1px solid var(--line-2);
  background:linear-gradient(180deg,#22222d 0%,#15151d 100%);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  user-select:none;-webkit-user-select:none;touch-action:manipulation;padding:0;
  transition:transform .08s,background .14s,box-shadow .14s,border-color .14s;
}
.fd-pad-key{font:700 10px/1 var(--f-mono);letter-spacing:.1em;color:var(--dim-2)}
.fd-pad-name{font:700 10.5px/1 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--gray-light,#b7b7c4)}
.fd-pad.hit{transform:scale(.93);background:var(--acid);border-color:var(--acid);box-shadow:0 0 30px -4px var(--acid)}
.fd-pad.hit .fd-pad-key,.fd-pad.hit .fd-pad-name{color:#07070a}
.fd-game-head{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;margin-bottom:16px}
.fd-score{text-align:center}
.fd-score-num{font:700 26px/1 var(--f-mono);color:var(--acid)}
.fd-score-label{font:400 9px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dim-2);margin-top:6px}
.fd-gpads{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;max-width:340px;margin:0 auto 18px}
.fd-gpad{
  aspect-ratio:1;border-radius:14px;border:1px solid var(--line-2);
  background:linear-gradient(180deg,#22222d 0%,#15151d 100%);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  font:700 12px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  user-select:none;-webkit-user-select:none;touch-action:manipulation;
  transition:transform .08s,background .12s,box-shadow .12s,border-color .12s;
}
.fd-gpad.hit{transform:scale(.93);background:var(--mag);border-color:var(--mag);color:#fff;box-shadow:0 0 30px -4px var(--mag)}
.fd-status{text-align:center;font:700 12px/1.5 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);min-height:22px;margin-bottom:14px}
.fd-center{text-align:center}
.fd-btn{
  display:inline-flex;align-items:center;gap:8px;background:var(--card-2);color:var(--ink);
  border:1px solid var(--line-2);border-radius:99px;padding:12px 24px;
  font:700 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;transition:all .2s var(--ease);
}
.fd-btn:hover{transform:translateY(-2px);border-color:var(--ink)}
.fd-btn.accent{background:var(--acid);border-color:var(--acid);color:#07070a}
.fd-seq-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.fd-bpm-wrap{display:flex;align-items:center;gap:10px;font:400 12px/1 var(--f-mono);color:var(--dim)}
.fd-bpm-wrap input[type=range]{width:130px;accent-color:var(--acid)}
.fd-bpm-val{color:var(--acid);font-weight:700;min-width:70px}
.fd-presets{display:flex;gap:6px;flex-wrap:wrap}
.fd-preset{
  border:1px solid var(--line);background:transparent;color:var(--dim);
  font:600 10.5px/1 var(--f-mono);letter-spacing:.09em;padding:8px 13px;border-radius:99px;transition:all .2s;
}
.fd-preset:hover{border-color:var(--acid);color:var(--acid)}
.fd-seq-grid{overflow-x:auto;padding-bottom:6px}
.fd-seq-row{display:grid;grid-template-columns:66px repeat(16,minmax(20px,1fr));gap:4px;margin-bottom:5px;min-width:520px}
.fd-seq-label{font:700 9.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim-2);display:flex;align-items:center}
.fd-cell{aspect-ratio:1;border-radius:6px;border:1px solid var(--line);background:linear-gradient(180deg,#1a1a23,#121219);padding:0;touch-action:manipulation;transition:background .12s,border-color .12s}
.fd-cell:nth-child(4n + 2){border-left:2px solid var(--line-2)}
.fd-cell.on{background:var(--acid);border-color:var(--acid)}
.fd-cell.playhead{border-color:var(--mag)}
.fd-cell.on.playhead{background:var(--mag);border-color:var(--mag);box-shadow:0 0 14px -2px var(--mag)}


/* ============================================================
   ON AIR — анимированный бейдж вещания (чистый SVG + CSS)
   ============================================================ */
.onair{
  display:inline-flex;align-items:center;gap:9px;position:relative;
  padding:8px 15px 8px 12px;border-radius:999px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.02);
  font:700 10.5px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim);transition:color .4s,border-color .4s,background .4s;overflow:hidden;
}
.onair svg{width:24px;height:18px;flex:0 0 auto;overflow:visible}
.onair svg path{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.onair svg .core{fill:currentColor;stroke:none}
.onair .w path{opacity:.22}
.onair b{font-weight:700;letter-spacing:.22em}
.onair .cnt{
  padding-left:9px;margin-left:2px;border-left:1px solid var(--line);
  color:var(--dim-2);letter-spacing:.12em;font-weight:400;
}
/* активное состояние */
body.is-playing .onair{
  color:var(--mag);border-color:color-mix(in srgb,var(--mag) 55%,transparent);
  background:color-mix(in srgb,var(--mag) 9%,transparent);
}
body.is-playing .onair .core{animation:oa-core 1.5s var(--ease-io) infinite}
body.is-playing .onair .w path{animation:oa-wave 1.5s var(--ease-io) infinite}
body.is-playing .onair .w path:nth-child(2){animation-delay:.22s}
body.is-playing .onair .w.r path{animation-delay:.11s}
body.is-playing .onair .w.r path:nth-child(2){animation-delay:.33s}
body.is-playing .onair::after{                 /* блик, пробегающий по бейджу */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%);
  transform:translateX(-120%);animation:oa-sheen 3.6s var(--ease-io) infinite;
}
@keyframes oa-core{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.28);opacity:.75}}
.onair svg .core{transform-origin:16px 12px}
@keyframes oa-wave{0%{opacity:.12}35%{opacity:1}100%{opacity:.12}}
@keyframes oa-sheen{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
.onair.big{padding:10px 18px 10px 14px;font-size:11.5px}
.onair.big svg{width:28px;height:21px}
/* особое состояние — идёт настоящий live-эфир (не автопроигрывание) */
.onair.onair-live{
  color:var(--mag)!important;border-color:var(--mag)!important;
  background:color-mix(in srgb, var(--mag) 10%, transparent)!important;
}
@media (prefers-reduced-motion:reduce){
  .onair .core,.onair .w path,.onair::after{animation:none!important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .platter,.logo .mark,.ring{animation:none!important}
}