/* ============================================================================
 * NEON HORIZON — style.css
 * 视觉方向：live-coding 终端 × trance rave 海报。
 * 深空藏蓝底 / 霓虹青主色 / 品红强调；全等宽字栈；CRT 扫描线；辉光克制。
 * ==========================================================================*/

:root {
  --bg: #04060c;
  --panel: rgba(7, 11, 22, .82);
  --ink: #b9c9e2;
  --dim: #46557a;
  --cyan: #22e6ff;
  --mag: #ff3ec8;
  --amber: #ffb347;
  --line: rgba(34, 230, 255, .25);
  --mono: "Cascadia Code", "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.45;
}

/* ---- 背景可视化画布：铺满全屏，置于 UI 之后 ---- */
#bgfx {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: 0;
}

/* ---- CRT 扫描线（纯装饰，极淡） ---- */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 30;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, .022) 0 1px,
    transparent 1px 3px);
  mix-blend-mode: overlay;
}

/* ---- 应用层 ---- */
#app {
  position: relative; z-index: 10;
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 20px 26px;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 100vh;
}

/* ---- 横幅 ---- */
#banner {
  margin: 0;
  font-size: clamp(9px, 1.55vw, 19px);
  line-height: 1.04;
  color: var(--cyan);
  text-shadow: 0 0 14px rgba(34, 230, 255, .55), 0 0 42px rgba(34, 230, 255, .22);
  user-select: none;
  overflow-x: auto;
}
.subtitle {
  color: var(--dim);
  letter-spacing: .28em;
  font-size: 11px;
  margin-top: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.subtitle b { color: var(--mag); font-weight: 600; }

/* ---- 面板 ---- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 12px 44px rgba(0, 0, 0, .45);
  padding: 10px 12px;
}
.ptitle {
  color: var(--cyan);
  font-size: 11px;
  letter-spacing: .22em;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 6px; margin-bottom: 8px;
}
.plabel {
  color: var(--dim); font-size: 10px; letter-spacing: .2em;
  margin: 8px 0 2px;
}

main {
  display: grid;
  grid-template-columns: minmax(340px, 11fr) minmax(320px, 9fr);
  gap: 14px;
  align-items: stretch;
}

/* ---- SONG CODE ---- */
#codeView {
  margin: 0;
  max-height: 380px;
  overflow: auto;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre;
}
#codeView .c { color: var(--dim); }
#codeView .s { color: var(--amber); }
#codeView .f { color: var(--cyan); }
#codeView .n { color: var(--mag); }

/* ---- LIVE PATTERN ---- */
#drumGrid, #pianoRoll, #spectrum, #vuLine {
  margin: 0;
  font-size: 13px;
  line-height: 1.32;
  white-space: pre;
  overflow-x: auto;
}
#pianoRoll { color: var(--mag); }
#spectrum  { color: var(--cyan); }
#vuLine    { color: var(--ink); }

.drow { display: block; }
.dlab {
  display: inline-block;
  width: 3.4em;
  color: var(--dim);
}
.dcells span { color: #233149; }
.dcells span.beat { box-shadow: inset 1px 0 0 rgba(34, 230, 255, .12); }
.dcells span.on   { color: var(--cyan); text-shadow: 0 0 8px rgba(34, 230, 255, .5); }
.dcells span.hit  { color: #000; background: var(--mag); text-shadow: none; }

/* ---- 传输条 ---- */
.transportPanel { display: flex; flex-direction: column; gap: 10px; }
#transport {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
button {
  font-family: var(--mono);
  background: transparent;
  border: 1px solid var(--line);
  color: var(--cyan);
  padding: 6px 14px;
  cursor: pointer;
  letter-spacing: .12em;
  transition: box-shadow .15s, border-color .15s, color .15s;
}
button:hover { border-color: var(--cyan); box-shadow: 0 0 16px rgba(34, 230, 255, .35); }
button:focus-visible { outline: 2px solid var(--mag); outline-offset: 2px; }
#btnPlay { color: var(--mag); border-color: rgba(255, 62, 200, .5); }
#btnPlay:hover { border-color: var(--mag); box-shadow: 0 0 16px rgba(255, 62, 200, .4); }

#timeline {
  position: relative;
  flex: 1 1 220px;
  height: 18px;
  border: 1px solid var(--line);
  cursor: pointer;
  touch-action: none;
  background:
    repeating-linear-gradient(to right, transparent 0 calc(6.25% - 1px), rgba(34,230,255,.14) calc(6.25% - 1px) 6.25%);
}
#tlFill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--cyan), var(--mag));
  box-shadow: 0 0 14px rgba(255, 62, 200, .55);
}
#tCur, #tTotal { color: var(--ink); font-variant-numeric: tabular-nums; }
#barLabel { color: var(--amber); letter-spacing: .08em; margin-left: auto; }

/* ---- 段落 chips ---- */
#sections { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: 10.5px;
  padding: 3px 9px;
  color: var(--dim);
  border-color: rgba(70, 85, 122, .5);
  letter-spacing: .14em;
}
.chip:hover { color: var(--cyan); }
.chip.active {
  color: var(--mag);
  border-color: var(--mag);
  box-shadow: 0 0 14px rgba(255, 62, 200, .35);
  text-shadow: 0 0 8px rgba(255, 62, 200, .6);
}

/* ---- 旋钮 ---- */
#knobs { display: flex; gap: 26px; flex-wrap: wrap; align-items: center; }
#knobs label {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--dim); font-size: 11px; letter-spacing: .18em;
}
#knobs span { color: var(--cyan); width: 3.2em; }
input[type="range"] {
  appearance: none; -webkit-appearance: none;
  width: 150px; height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--mag));
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  background: var(--bg);
  border: 2px solid var(--cyan);
  box-shadow: 0 0 10px rgba(34, 230, 255, .7);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px;
  background: var(--bg);
  border: 2px solid var(--cyan);
  cursor: pointer;
}
input[type="range"]:focus-visible { outline: 2px solid var(--mag); outline-offset: 4px; }

/* ---- AUDIT 报告 ---- */
#auditPanel {
  margin: 0;
  padding: 10px;
  border: 1px dashed rgba(255, 179, 71, .4);
  color: var(--amber);
  font-size: 12px;
  line-height: 1.55;
  max-height: 260px;
  overflow: auto;
  white-space: pre;
}
.hidden { display: none; }

/* ---- 页脚状态行 ---- */
footer { color: var(--dim); font-size: 12px; }
#statusLine b { color: var(--cyan); font-weight: 600; }
.cursor { animation: blink 1.05s steps(1) infinite; color: var(--cyan); }
@keyframes blink { 50% { opacity: 0; } }

/* ---- 响应式 ---- */
@media (max-width: 900px) {
  main { grid-template-columns: 1fr; }
  #codeView { max-height: 240px; }
  #app { padding: 12px 10px 20px; }
}

/* ---- 降低动效偏好 ---- */
@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
  * { transition: none !important; }
}