* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: #000; color: #cfd8e6;
  font: 13px/1.5 -apple-system, "PingFang SC", "Helvetica Neue", sans-serif;
  display: flex; overflow: hidden;
}

/* ---------- 舞台 ---------- */
#stage { flex: 1; position: relative; background: #000; display: flex; align-items: center; justify-content: center; }
#screen {
  position: relative; background: #05070c; overflow: hidden;
  box-shadow: 0 0 0 1px #14181f;
}
#glow {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none;
}
#hud {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  text-align: center; pointer-events: none; user-select: none;
}
#hud .st { font-size: 46px; font-weight: 200; letter-spacing: .35em; color: #263041; }
#hud .sub { margin-top: 10px; font-size: 12px; letter-spacing: .2em; color: #1c2431; }
#meta {
  position: absolute; left: 14px; bottom: 12px; font-size: 11px;
  color: #3a4658; letter-spacing: .05em; pointer-events: none;
}

/* ---------- 面板 ---------- */
#panel {
  width: 328px; flex: none; height: 100%; overflow-y: auto;
  background: #0b0e14; border-left: 1px solid #171c25; padding: 14px 14px 60px;
}
#panel h1 { font-size: 13px; font-weight: 600; color: #e8eef7; letter-spacing: .04em; }
#panel h1 span { font-weight: 400; color: #4d5b70; font-size: 11px; margin-left: 6px; }
.sec { margin-top: 16px; }
.sec > .t { font-size: 11px; color: #55637a; letter-spacing: .14em; margin-bottom: 7px; }

.btns { display: flex; flex-wrap: wrap; gap: 5px; }
.btns button {
  flex: 1 1 auto; min-width: 58px; padding: 7px 4px; cursor: pointer;
  background: #131926; color: #93a3ba; border: 1px solid #1e2634; border-radius: 5px;
  font: 12px/1 -apple-system, "PingFang SC", sans-serif;
}
.btns button:hover { background: #18202f; color: #cfdcee; }
.btns button.on { background: #1E7BFF; border-color: #1E7BFF; color: #fff; }

.row { display: flex; align-items: center; gap: 8px; margin: 7px 0; }
.row label { width: 76px; flex: none; color: #7d8b9f; font-size: 11.5px; }
.row input[type=range] { flex: 1; accent-color: #1E7BFF; height: 16px; }
.row .v { width: 46px; flex: none; text-align: right; color: #cfdcee; font-size: 11px; font-variant-numeric: tabular-nums; }
.row input[type=color] { width: 100%; height: 26px; padding: 0; border: 1px solid #1e2634; border-radius: 4px; background: #131926; cursor: pointer; }
.cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 6px; }

.hint { color: #46536a; font-size: 11px; line-height: 1.6; margin-top: 8px; }
.hint b { color: #8ea3bd; font-weight: 500; }

button.wide {
  width: 100%; padding: 9px; margin-top: 8px; cursor: pointer; border-radius: 5px;
  background: #131926; color: #9fb0c6; border: 1px solid #1e2634; font-size: 12px;
}
button.wide:hover { background: #18202f; color: #dce6f3; }
button.primary { background: #1E7BFF; border-color: #1E7BFF; color: #fff; }
button.primary:hover { background: #3d8dff; color: #fff; }
textarea {
  width: 100%; height: 110px; margin-top: 8px; resize: vertical;
  background: #070a0f; color: #7b8ba1; border: 1px solid #1a2130; border-radius: 5px;
  padding: 8px; font: 10px/1.45 ui-monospace, Menlo, monospace;
}