* { box-sizing: border-box; }
body {
  margin: 0; background: #111; overflow: hidden;
  display: flex; height: 100vh;
  font: 13px/1.5 monospace; color: #ccc;
}
#canvas-wrap { flex: 1; position: relative; }
#canvas-wrap canvas { display: block; width: 100% !important; height: 100% !important; }

#panel {
  width: 280px; min-width: 280px;
  background: #161616; border-left: 1px solid #2a2a2a;
  display: flex; flex-direction: column; overflow-y: auto;
}
#panel-header {
  padding: 10px 12px 8px;
  border-bottom: 1px solid #2a2a2a;
  font-size: 12px; color: #888;
}
#panel-header span { font-size: 14px; font-weight: bold; color: #ccc; display: block; }

.section { padding: 10px 12px; border-bottom: 1px solid #222; }
.section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: #666; margin-bottom: 6px;
}
.toggle-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.toggle-row label { flex: 1; font-size: 12px; cursor: pointer; }
.swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.action-btn {
  width: 100%;
  background: #1a3a28;
  border: 1px solid #2a6040;
  color: #6da;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font: 12px monospace;
}
.action-btn:hover { background: #245038; }
.action-btn:disabled {
  background: #1b1b1b;
  border-color: #333;
  color: #666;
  cursor: default;
}

#info-block {
  font-size: 11px; line-height: 1.7; color: #aaa;
  white-space: pre; padding: 4px 0;
}
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }