:root {
  --void: #07080c;
  --ink: #e8e3d4;
  --mute: #8b907c;
  --citrus: #e4ff3a;
  --teal: #2ee0c0;
  --cabinet: #12151c;
  --frame: #2a3140;
  --danger: #ff6b57;
  font-family: "PingFang SC", "Microsoft YaHei UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--void); color: var(--ink); }
a { color: var(--citrus); text-decoration: none; }
a:hover { text-decoration: underline; }
.hidden { display: none !important; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body {
  background:
    radial-gradient(900px 420px at 8% -10%, rgba(46, 224, 192, .16), transparent 55%),
    radial-gradient(700px 380px at 100% 0%, rgba(228, 255, 58, .08), transparent 48%),
    var(--void);
}

.mast { width: min(1180px, 92vw); margin: 0 auto; padding: 48px 0 18px; }
.kicker {
  margin: 0 0 18px;
  color: var(--teal);
  font: 700 11px/1 "Courier New", monospace;
  letter-spacing: .22em;
}
.mast-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, .8fr);
  gap: 28px;
  align-items: end;
}
h1 {
  margin: 0;
  font: 800 clamp(28px, 5.4vw, 56px)/1.05 "Songti SC", "STSong", serif;
  letter-spacing: .06em;
}
h1 em { font-style: normal; color: var(--citrus); }
.lead { margin: 0; color: var(--mute); font-size: 15px; line-height: 1.7; }

.toolbar {
  width: min(1180px, 92vw);
  margin: 28px auto 18px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--frame);
  padding-top: 18px;
}
.search { display: grid; gap: 8px; flex: 1; }
.search span {
  color: var(--mute);
  font: 700 10px/1 "Courier New", monospace;
  letter-spacing: .16em;
}
.search input {
  width: min(420px, 100%);
  height: 44px;
  padding: 0 14px;
  color: var(--ink);
  background: #0d1016;
  border: 1px solid var(--frame);
  outline: none;
}
.search input:focus { border-color: var(--teal); }
.count {
  margin: 0;
  color: var(--citrus);
  font: 700 12px/1 "Courier New", monospace;
  letter-spacing: .12em;
}

.grid {
  width: min(1180px, 92vw);
  margin: 0 auto 80px;
  display: grid;
  gap: 14px;
}
.slot {
  display: grid;
  grid-template-columns: 72px 56px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  background: linear-gradient(180deg, #161a23, var(--cabinet));
  border: 1px solid var(--frame);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  animation: rise .5s ease both;
}
.slot:nth-child(2) { animation-delay: .06s; }
.slot:nth-child(3) { animation-delay: .12s; }
.slot:hover { border-color: rgba(46, 224, 192, .55); transform: translateY(-1px); }
.idx {
  font: 800 28px/1 "Courier New", monospace;
  color: rgba(228, 255, 58, .28);
  letter-spacing: -.04em;
}
.cover {
  width: 56px;
  height: 56px;
  object-fit: cover;
  background: #090b10;
  border: 1px solid #3a4254;
  image-rendering: auto;
}
.copy { min-width: 0; }
.copy strong {
  display: block;
  font: 800 22px/1.15 "Songti SC", "STSong", serif;
  letter-spacing: .06em;
}
.copy p { margin: 6px 0 0; color: var(--mute); font-size: 13px; }
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.pill {
  padding: 3px 8px;
  border: 1px solid #3a4254;
  color: var(--mute);
  font: 700 10px/1.4 "Courier New", monospace;
  letter-spacing: .08em;
}
.pill.go { color: #08140f; background: var(--teal); border-color: var(--teal); }
.pill.wait { color: #3a2208; background: #eebd4a; border-color: #eebd4a; }
.play {
  display: grid;
  place-items: center;
  min-width: 120px;
  height: 46px;
  color: #111;
  background: var(--citrus);
  font: 800 14px/1 "PingFang SC", sans-serif;
  letter-spacing: .12em;
  text-decoration: none;
}
.play:hover { filter: brightness(1.06); text-decoration: none; }
.play.off {
  color: var(--mute);
  background: #1b202b;
  pointer-events: none;
}

.empty {
  width: min(1180px, 92vw);
  margin: 24px auto;
  color: var(--mute);
}
.foot {
  width: min(1180px, 92vw);
  margin: 0 auto 48px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #5d6358;
  font: 700 11px/1.4 "Courier New", monospace;
  letter-spacing: .08em;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  .mast-row, .foot { grid-template-columns: 1fr; display: grid; }
  .slot { grid-template-columns: 56px minmax(0, 1fr); }
  .slot .idx { display: none; }
  .slot .play { grid-column: 1 / -1; width: 100%; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .search input { width: 100%; }
}