:root {
  color-scheme: dark;
  --bg: #16181d;
  --panel: #1f2229;
  --line: #30343d;
  --text: #e6e8ec;
  --muted: #9aa1ad;
  --accent: #4f8ef7;
  --good: #3fb97a;
  --warn: #e0a83e;
  --bad: #e5604f;
}

* { box-sizing: border-box }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.6 "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
}

h1 { margin: 0; font-size: 18px; font-weight: 600 }
h1 span { margin-left: 8px; color: var(--muted); font-weight: 400 }

.chip { padding: 3px 12px; border-radius: 999px; background: var(--line); font-size: 13px }
.chip.good { background: #173a2a; color: #7fe0ae }
.chip.bad { background: #47211c; color: #ffb0a5 }

main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 16px;
  max-width: 1500px;
  margin: 0 auto;
  padding: 16px 24px 40px;
}

@media (max-width: 1000px) {
  main { grid-template-columns: minmax(0, 1fr); padding: 12px 16px 32px }
}

.left, .right { display: flex; flex-direction: column; gap: 16px; min-width: 0 }

.panel { padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel) }
.panel-title { margin-bottom: 10px; font-weight: 600 }
.panel-title small { margin-left: 10px; color: var(--muted); font-weight: 400 }
.panel p { margin: 0 0 10px }

.muted { color: var(--muted) }

#viewport { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: #000 }
#scene { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; border: 0; transform-origin: 0 0 }

.transport { display: flex; align-items: center; gap: 12px; margin-top: 10px }
.transport input { flex: 1; min-width: 60px; accent-color: var(--accent) }
#clock, #fps { font-variant-numeric: tabular-nums; white-space: nowrap }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px }

button, .button, select {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #2a2e37;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
button:hover:not(:disabled), .button:hover { background: #343945 }
button:disabled { opacity: 0.45; cursor: not-allowed }
button.primary { border-color: var(--accent); background: var(--accent); color: #fff }
button.primary:hover:not(:disabled) { background: #6aa0f9 }

.bar { height: 6px; margin-top: 12px; overflow: hidden; border-radius: 3px; background: var(--line) }
#progress-fill { width: 0; height: 100%; background: var(--accent) }

#output { display: block; width: 100%; margin-top: 12px; border-radius: 6px; background: #000 }
#output[hidden] { display: none }
#output-info { margin-top: 8px }

#steps { margin: 12px 0 0; padding: 0; list-style: none }
#steps li { display: grid; grid-template-columns: 20px 1fr; gap: 4px 8px; padding: 7px 0; border-top: 1px solid var(--line) }
#steps .mark { font-weight: 700; text-align: center }
#steps .name { font-weight: 500 }
#steps .detail { grid-column: 2; color: var(--muted); font-size: 13px; overflow-wrap: anywhere }
#steps li.running .mark { color: var(--accent) }
#steps li.good .mark { color: var(--good) }
#steps li.warn .mark { color: var(--warn) }
#steps li.bad .mark { color: var(--bad) }

details { margin-top: 10px }
summary { color: var(--muted); cursor: pointer }
pre { max-height: 280px; margin: 8px 0 0; padding: 10px; overflow: auto; border-radius: 6px; background: #14161a; font-size: 12px }