* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, "PingFang SC", "Helvetica Neue", sans-serif;
  background: #16181d; color: #d5d8e0; height: 100vh; overflow: hidden;
}
#layout { display: flex; height: 100vh; }

#sidebar {
  width: 300px; min-width: 300px; padding: 16px; overflow-y: auto;
  background: #1d2027; border-right: 1px solid #2a2e38;
}
#sidebar h1 { font-size: 18px; margin-bottom: 14px; color: #7aa2f7; }
#sidebar h2, #panel h2 { font-size: 13px; color: #8b93a5; margin: 18px 0 8px; }
textarea, input {
  width: 100%; background: #12141a; color: #d5d8e0; border: 1px solid #333948;
  border-radius: 6px; padding: 8px; font-size: 13px; resize: vertical;
}
button {
  width: 100%; margin-top: 8px; padding: 9px; border: none; border-radius: 6px;
  background: #7aa2f7; color: #0d0f14; font-weight: 600; cursor: pointer; font-size: 14px;
}
button:disabled { opacity: 0.4; cursor: not-allowed; }
button:hover:not(:disabled) { background: #93b4fa; }

#history { list-style: none; }
#history li {
  display: flex; gap: 8px; align-items: center; padding: 8px; margin-bottom: 6px;
  background: #12141a; border-radius: 6px; cursor: pointer; font-size: 12px;
  border: 1px solid transparent;
}
#history li:hover, #history li.active { border-color: #7aa2f7; }
#history img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; background: #222; }
#history .meta { flex: 1; min-width: 0; }
#history .p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#history .s { color: #8b93a5; font-size: 11px; }
#history .s.done { color: #9ece6a; }
#history .s.failed { color: #f7768e; }
#history .s.generating, #history .s.validating, #history .s.pending { color: #e0af68; }

#viewer-wrap { flex: 1; position: relative; background: #101218; }
#viewer { width: 100%; height: 100%; }
#viewer-hint {
  position: absolute; bottom: 10px; left: 0; right: 0; text-align: center;
  color: #565f74; font-size: 12px; pointer-events: none;
}

#panel {
  width: 320px; min-width: 320px; padding: 16px; overflow-y: auto;
  background: #1d2027; border-left: 1px solid #2a2e38;
}
#status { font-size: 13px; padding: 8px; background: #12141a; border-radius: 6px; }
#log {
  font-family: Menlo, monospace; font-size: 11px; color: #8b93a5;
  max-height: 160px; overflow-y: auto; margin-top: 6px; white-space: pre-wrap;
  word-break: break-all;
}
#log .err { color: #f7768e; }
#log .ok { color: #9ece6a; }

#validation { width: 100%; font-size: 12px; border-collapse: collapse; }
#validation td { padding: 4px 6px; border-bottom: 1px solid #262b36; }
#validation td:first-child { color: #8b93a5; }
.good { color: #9ece6a; } .bad { color: #f7768e; }

#printcheck { font-size: 12px; }
#printcheck table { width: 100%; border-collapse: collapse; }
#printcheck td { padding: 4px 6px; border-bottom: 1px solid #262b36; }
#printcheck td:first-child { color: #8b93a5; }
.badge {
  display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px;
}
.badge.green { background: #22351f; color: #9ece6a; }
.badge.yellow { background: #3a3118; color: #e0af68; }
#printcheck .warn-line { color: #e0af68; padding: 4px 6px; }

#print-stats { margin-top: 10px; }
#print-stats .time { font-size: 24px; font-weight: 700; color: #7aa2f7; }
#print-stats .sub { font-size: 12px; color: #8b93a5; margin-top: 2px; }
#print-stats .warn { color: #f7768e; font-size: 12px; margin-top: 6px; }

#renders img {
  width: 100%; border-radius: 6px; margin-bottom: 8px; background: #fff;
}
.row { display: flex; gap: 6px; }
.row button { width: 70px; margin-top: 0; }
#slice-result { font-size: 12px; margin-top: 8px; }
#slice-result a { color: #7aa2f7; }