:root{
  --bg:#0a0b10;
  --panel:#12131b;
  --line:#2a2c3a;
  --text:#f2f3ff;
  --muted:#a9abc3;
  --accent:#a855f7;
  --accent2:#22d3ee;
  --shadow: 0 26px 90px rgba(0,0,0,.65);
  --radius: 18px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:
    radial-gradient(900px 650px at 18% 10%, rgba(168,85,247,.18), transparent 60%),
    radial-gradient(900px 650px at 88% 20%, rgba(34,211,238,.12), transparent 60%),
    linear-gradient(180deg, #05060a, var(--bg));
}
.mono{font-family:var(--mono)}
.tv{max-width:1180px;margin:0 auto;padding:18px 18px 40px}
.hdr{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 14px;
  border-radius:20px;
  background:rgba(18,19,27,.65);
  border:1px solid rgba(42,44,58,.85);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.left{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.name{font-weight:950;letter-spacing:.2px}
.meta{color:rgba(169,171,195,.92);font-size:12px}
.grid{margin-top:14px;display:grid;grid-template-columns: 1fr 320px;gap:14px}
@media (max-width: 980px){.grid{grid-template-columns:1fr}}
.player,.list{
  border-radius:22px;
  background:rgba(18,19,27,.55);
  border:1px solid rgba(42,44,58,.85);
  box-shadow: var(--shadow);
  overflow:hidden;
  backdrop-filter: blur(10px);
}
.screen{
  height:420px;
  position:relative;
  background:
    radial-gradient(900px 420px at 30% 0%, rgba(168,85,247,.22), transparent 60%),
    radial-gradient(900px 420px at 70% 0%, rgba(34,211,238,.14), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.75));
  border-bottom:1px solid rgba(42,44,58,.85);
}
@media (max-width: 560px){.screen{height:320px}}
.osd{
  position:absolute;left:14px;bottom:48px;
  max-width:min(680px, calc(100% - 28px));
  padding:10px 12px;
  border-radius:16px;
  background:rgba(10,11,16,.55);
  border:1px solid rgba(42,44,58,.85);
  backdrop-filter: blur(10px);
}
.chName{font-weight:950}
.chDesc{margin-top:6px;color:rgba(169,171,195,.92);font-size:12px;line-height:1.55}
.progress{
  position:absolute;left:0;right:0;bottom:0;height:8px;background:rgba(255,255,255,.08)
}
.progress span{
  display:block;height:100%;width:18%;
  background:linear-gradient(90deg, rgba(168,85,247,.95), rgba(34,211,238,.85));
  transition:width .2s ease;
}
.hint{
  position:absolute;right:14px;top:14px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(42,44,58,.85);
  background:rgba(10,11,16,.45);
  color:rgba(169,171,195,.92);
  font-size:12px;
}
.controls{
  padding:12px 12px;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.btn{
  cursor:pointer;
  border-radius:14px;
  padding:10px 12px;
  border:1px solid rgba(42,44,58,.85);
  background:rgba(10,11,16,.25);
  color:rgba(242,243,255,.92);
}
.btn:hover{border-color:rgba(168,85,247,.45)}
.badge{
  margin-left:auto;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(42,44,58,.85);
  background:rgba(10,11,16,.35);
  color:rgba(169,171,195,.92);
  font-size:12px;
}
.search{padding:12px;border-bottom:1px solid rgba(42,44,58,.85)}
.search input{
  width:100%;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid rgba(42,44,58,.85);
  background:rgba(10,11,16,.25);
  color:rgba(242,243,255,.92);
  outline:none;
}
.search input::placeholder{color:rgba(169,171,195,.55)}
.search input:focus{border-color:rgba(34,211,238,.55);box-shadow:0 0 0 4px rgba(34,211,238,.10)}
.chs{padding:12px;display:grid;gap:10px}
.ch{
  cursor:pointer;
  text-align:left;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(42,44,58,.85);
  background:rgba(10,11,16,.18);
  color:rgba(242,243,255,.92);
  font-weight:850;
}
.ch:hover{border-color:rgba(168,85,247,.45)}
.ch.isOn{
  background:linear-gradient(135deg, rgba(168,85,247,.18), rgba(34,211,238,.10));
  border-color:rgba(168,85,247,.55);
}
.foot{
  padding:12px;
  border-top:1px solid rgba(42,44,58,.85);
  color:rgba(169,171,195,.92);
  font-size:12px;
}