* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #0e1117;
  color: #e6edf3;
  min-height: 100vh;
}

header {
  padding: 1.2rem 2rem;
  border-bottom: 1px solid #21262d;
}
header h1 { font-size: 1.3rem; }
header p { color: #8b949e; font-size: 0.85rem; margin-top: 0.2rem; }

main {
  display: grid;
  grid-template-columns: 280px 280px 280px 1fr;
  gap: 1rem;
  padding: 1rem 2rem 2rem;
  height: calc(100vh - 90px);
}

@media (max-width: 1200px) {
  main { grid-template-columns: repeat(2, 1fr); grid-auto-rows: min-content; height: auto; }
  .viewer { grid-column: 1 / -1; min-height: 50vh; }
}

.panel {
  background: #161b22;
  border: 1px solid #21262d;
  border-radius: 10px;
  padding: 1rem;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.panel h2 { font-size: 0.95rem; color: #58a6ff; font-weight: 600; }

.drop {
  border: 2px dashed #30363d;
  border-radius: 8px;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  color: #8b949e;
  font-size: 0.85rem;
  padding: 0.5rem;
  transition: border-color 0.15s;
}
.drop:hover, .drop.over { border-color: #58a6ff; }
.drop img { max-width: 100%; max-height: 160px; border-radius: 6px; }

.thumb {
  max-width: 100%;
  max-height: 140px;
  border-radius: 6px;
  background: repeating-conic-gradient(#30363d 0 25%, #21262d 0 50%) 0 0 / 16px 16px;
  align-self: center;
}

.svgbox {
  max-height: 160px;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.svgbox svg { max-width: 100%; max-height: 160px; }
.svgbox svg path { fill: #e6edf3; }

.slider.check label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: #c9d1d9;
  cursor: pointer;
}
input[type="checkbox"] { accent-color: #58a6ff; width: 14px; height: 14px; }

details { font-size: 0.8rem; color: #8b949e; }
summary { cursor: pointer; }

.slider { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.5rem; }
.slider label { font-size: 0.8rem; color: #c9d1d9; display: flex; justify-content: space-between; }
.slider output { color: #58a6ff; }
input[type="range"] { width: 100%; accent-color: #58a6ff; }

button {
  background: #238636;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.6rem;
  font-size: 0.85rem;
  cursor: pointer;
}
button:hover { background: #2ea043; }
button:disabled { background: #30363d; color: #8b949e; cursor: not-allowed; }
#regen { background: #1f6feb; }
#regen:hover { background: #388bfd; }

.status { font-size: 0.8rem; color: #d29922; min-height: 1.2em; }
.status.error { color: #f85149; }

.viewer {
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 10px;
  overflow: hidden;
  min-height: 400px;
}
#canvas { width: 100%; height: 100%; display: block; }