/* ================================================================
   signal.css —— 「信号」星球电台
   独立视觉语言：深空暗底 + 荧光青紫，与站内其它浅色页面刻意区分
   ================================================================ */
:root{
  --s-bg:#07071A;
  --s-panel:rgba(255,255,255,.045);
  --s-line:rgba(160,180,255,.14);
  --s-fg:#E8ECFF;
  --s-fg2:#8C93B8;
  --s-a:#7dd3fc;
  --s-b:#a78bfa;
}

body.signal-page{
  background:var(--s-bg);
  color:var(--s-fg);
  min-height:100vh;
  overflow-x:hidden;
}

/* 深空底：两层径向 + 极细网格 */
body.signal-page::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(58% 46% at 18% 8%,rgba(125,211,252,.13),transparent 66%),
    radial-gradient(52% 44% at 84% 20%,rgba(167,139,250,.15),transparent 66%),
    radial-gradient(60% 50% at 50% 108%,rgba(236,72,153,.09),transparent 68%),
    linear-gradient(180deg,#07071A,#05050F);
}
body.signal-page::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:
    linear-gradient(rgba(160,180,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(160,180,255,.06) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 50% 40%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 40%,#000 0%,transparent 78%);
}

/* 顶部导航在暗底上换色 */
.signal-page .site-nav{
  background:linear-gradient(180deg,rgba(7,7,26,.88),rgba(7,7,26,.55));
  border-bottom-color:rgba(160,180,255,.1);
  backdrop-filter:blur(16px);
}
.signal-page .nav-logo,.signal-page .nav-links a{color:var(--s-fg)}
.signal-page .nav-links a{color:var(--s-fg2)}
.signal-page .nav-links a:hover{color:var(--s-fg);background:rgba(160,180,255,.08)}
.signal-page .nav-links a[aria-current="page"]{color:#fff;background:linear-gradient(120deg,#7dd3fc,#a78bfa)}
.signal-page .nav-quick a{background:rgba(255,255,255,.06);border-color:rgba(160,180,255,.14);color:#c7cdf0}
.signal-page .nav-burger{background:rgba(255,255,255,.06);border-color:rgba(160,180,255,.14)}
.signal-page .nav-burger span,
.signal-page .nav-burger span::before,
.signal-page .nav-burger span::after{background:#c7cdf0}
.signal-page .nav-panel a{background:rgba(255,255,255,.05);border-color:rgba(160,180,255,.12);color:#dfe4ff}
.signal-page .cmdk-trigger{background:rgba(255,255,255,.05);border-color:rgba(160,180,255,.12);color:#9aa2c8}
.signal-page .site-foot{color:var(--s-fg2);border-top-color:rgba(160,180,255,.1)}
.signal-page .site-foot a{color:var(--s-fg2)}
.signal-page .site-foot a:hover{color:var(--s-a)}

/* skip-link：signal.css 未引入 style.css，需要自带一套完整样式 */
.signal-page .skip-link{
  position:fixed;top:-100px;left:16px;z-index:200;
  padding:12px 22px;border-radius:14px;
  text-decoration:none;font-weight:800;font-size:14px;
  background:rgba(20,26,58,.96);color:var(--s-fg);
  border:1px solid rgba(125,211,252,.3);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.8);
  transition:top .25s cubic-bezier(.22,1,.36,1);
}
.signal-page .skip-link:focus-visible{
  top:12px;outline:3px solid var(--s-a);outline-offset:2px;
}
.signal-page .sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}

/* ---------- 示波器画布：满屏背景 ---------- */
#scope{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;opacity:.9;
}
.scope-fallback{
  position:fixed;inset:0;z-index:0;pointer-events:none;display:none;
}

main{position:relative;z-index:2}

/* ---------- 头部 ---------- */
.sig-head{
  text-align:center;padding:clamp(60px,10vh,120px) 20px clamp(20px,4vh,40px);
}
.sig-kicker{
  display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.28em;
  color:var(--s-a);text-transform:uppercase;opacity:.85;
  padding:6px 16px;border:1px solid rgba(125,211,252,.28);border-radius:999px;
  background:rgba(125,211,252,.06);
}
.sig-head h1{
  margin:20px 0 14px;font-size:clamp(48px,9vw,96px);font-weight:900;line-height:1;
  letter-spacing:.12em;
  background:linear-gradient(135deg,#7dd3fc 0%,#a78bfa 55%,#f0abfc 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 40px rgba(125,211,252,.35));
}
.sig-head p{
  color:var(--s-fg2);font-size:clamp(13.5px,1.5vw,15px);
  line-height:1.9;letter-spacing:.02em;
}

/* ---------- 电台主体 ---------- */
.radio{
  max-width:880px;margin:0 auto;padding:0 20px 40px;
  display:flex;flex-direction:column;align-items:center;gap:clamp(28px,4vh,44px);
}

/* 中央转盘 */
.dial-wrap{position:relative}
.dial{
  position:relative;width:clamp(190px,26vw,240px);aspect-ratio:1;
  display:grid;place-items:center;cursor:pointer;
  background:none;border:none;padding:0;
  -webkit-tap-highlight-color:transparent;
}
.dial-ring{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(125,211,252,.28);
  box-shadow:0 0 40px rgba(125,211,252,.12) inset;
}
.dial-ring.r2{
  inset:-14%;border-color:rgba(167,139,250,.14);
  border-style:dashed;
  animation:ringSpin 34s linear infinite;
}
@keyframes ringSpin{to{transform:rotate(360deg)}}

.dial-core{
  position:relative;width:72%;aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  background:
    radial-gradient(circle at 34% 30%,rgba(255,255,255,.22),transparent 52%),
    radial-gradient(circle at 62% 68%,rgba(167,139,250,.35),transparent 56%),
    linear-gradient(150deg,#1a2a5c,#221a4a 55%,#0d1030);
  border:1px solid rgba(160,180,255,.22);
  box-shadow:
    0 0 60px -10px rgba(125,211,252,.35),
    inset 0 0 40px rgba(125,211,252,.12);
  transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s;
}
.dial:hover .dial-core{transform:scale(1.04)}
.dial:focus-visible{outline:2px solid var(--s-a);outline-offset:8px;border-radius:50%}
.playing .dial-core{
  box-shadow:
    0 0 90px -6px rgba(125,211,252,.55),
    inset 0 0 50px rgba(125,211,252,.2);
}

/* 均衡器条 */
.eq{display:flex;align-items:center;gap:4px;height:26px}
.eq i{
  display:block;width:3px;border-radius:2px;height:6px;
  background:linear-gradient(180deg,#7dd3fc,#a78bfa);
  opacity:.55;
  transition:height .18s ease;
}
.playing .eq i{opacity:1;animation:eqBounce 1s ease-in-out infinite}
.playing .eq i:nth-child(2){animation-delay:.12s}
.playing .eq i:nth-child(3){animation-delay:.24s}
.playing .eq i:nth-child(4){animation-delay:.36s}
.playing .eq i:nth-child(5){animation-delay:.48s}
@keyframes eqBounce{
  0%,100%{height:6px}
  50%{height:24px}
}

.dial-hint{
  position:absolute;bottom:-38px;left:50%;transform:translateX(-50%);
  white-space:nowrap;font-size:12px;font-weight:700;color:var(--s-fg2);
  letter-spacing:.06em;transition:color .3s;
}
.playing .dial-hint{color:var(--s-a)}

/* ---------- 频道 ---------- */
.channels{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%;
}
.ch{
  position:relative;padding:16px 12px 14px;border-radius:16px;text-align:center;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(160,180,255,.12);
  color:inherit;font:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  transition:transform .25s cubic-bezier(.22,1,.36,1),border-color .25s,background .25s,box-shadow .25s;
}
.ch:hover{background:rgba(255,255,255,.07);transform:translateY(-3px)}
.ch:focus-visible{outline:2px solid var(--s-a);outline-offset:3px}
.ch.active{
  background:rgba(255,255,255,.09);
  border-color:rgba(125,211,252,.55);
  box-shadow:0 0 0 1px rgba(125,211,252,.2),0 12px 40px -18px rgba(125,211,252,.7);
}
.ch-orb{
  width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 34% 32%,#fff 6%,currentColor 44%,transparent 76%);
  box-shadow:0 0 16px 2px currentColor;
  opacity:.55;transition:opacity .3s,transform .3s;
}
.ch.active .ch-orb{opacity:1;transform:scale(1.1)}

/* 每颗行星的专属色 */
.ch[data-ch="0"]{color:#f5d76e}
.ch[data-ch="1"]{color:#fb7185}
.ch[data-ch="2"]{color:#6ee7b7}
.ch[data-ch="3"]{color:#e2e8f0}
.ch .ch-name{font-size:14px;font-weight:900;color:var(--s-fg);letter-spacing:.04em}
.ch .ch-sub{font-size:11px;color:var(--s-fg2);letter-spacing:.02em;line-height:1.5}

/* ---------- 旋钮 ---------- */
.knobs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;width:100%;
  max-width:620px;
}
.knob{display:flex;flex-direction:column;gap:9px}
.k-label{font-size:11.5px;font-weight:800;letter-spacing:.16em;color:var(--s-fg2)}
.k-val{
  font-size:12px;font-weight:800;color:var(--s-a);
  font-variant-numeric:tabular-nums;letter-spacing:.05em;
}
.knob-row{display:flex;align-items:center;gap:10px}

/* range 滑块：跨浏览器统一样式 */
.knob input[type="range"]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:4px;border-radius:4px;padding:0;min-height:4px;
  background:linear-gradient(90deg,rgba(125,211,252,.85),rgba(167,139,250,.6));
  outline:none;cursor:pointer;
}
.knob input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;border-radius:50%;
  background:#fff;border:2px solid #7dd3fc;
  box-shadow:0 0 14px rgba(125,211,252,.9);
  cursor:pointer;transition:transform .16s;
}
.knob input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.18)}
.knob input[type="range"]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;
  background:#fff;border:2px solid #7dd3fc;
  box-shadow:0 0 14px rgba(125,211,252,.9);
  cursor:pointer;border-radius:50%;
}
.knob input[type="range"]:focus-visible{
  outline:2px solid var(--s-a);outline-offset:6px;
}

/* ---------- 说明与返回 ---------- */
.sig-note{
  max-width:560px;text-align:center;color:var(--s-fg2);
  font-size:12.5px;line-height:1.9;letter-spacing:.02em;
  padding:14px 18px;border-radius:14px;
  border:1px dashed rgba(160,180,255,.16);
  background:rgba(255,255,255,.02);
}
.sig-back{
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap;
  padding:0 20px 80px;
}
.back-link{
  display:inline-flex;align-items:center;padding:11px 22px;border-radius:999px;
  text-decoration:none;font-weight:800;font-size:13.5px;color:var(--s-fg);
  background:rgba(255,255,255,.05);border:1px solid rgba(160,180,255,.18);
  transition:transform .2s cubic-bezier(.22,1,.36,1),background .2s,border-color .2s;
}
.back-link:hover{
  transform:translateY(-2px);background:rgba(255,255,255,.1);
  border-color:rgba(125,211,252,.45);
}

/* ---------- 响应式 ---------- */
@media (max-width:760px){
  .channels{grid-template-columns:1fr 1fr}
  .knobs{grid-template-columns:1fr;gap:16px;max-width:340px}
  .radio{gap:30px}
  .dial-hint{bottom:-32px;font-size:11.5px}
}
@media (max-width:420px){
  .ch{padding:13px 8px 11px}
  .ch .ch-sub{display:none}
  .ch-orb{width:22px;height:22px}
}

@media (prefers-reduced-motion:reduce){
  .dial-ring.r2{animation:none}
  .playing .eq i{animation:none;height:16px}
  .ch,.back-link,.dial-core{transition:none}
  .ch:hover{transform:none}
}