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

:root {
  --bg: #171512;
  --panel: #201d19;
  --panel-edge: #2e2a24;
  --ink: #d8d2c4;
  --ink-dim: #8a8478;
  --accent: #c8a15a;
  --danger: #c85a5a;
  --field: #16130f;
  --sans: "Zen Kaku Gothic New", "Segoe UI", system-ui, sans-serif;
  --serif: "Shippori Mincho", "Segoe UI", serif;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
}

body { display: flex; }

#garden-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
}

#stage {
  position: absolute;
  inset: 0;
  touch-action: none;
  transition: opacity .18s ease;
}
#stage canvas { display: block; }
body.loading #stage { opacity: 0; }

#loading-screen {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: #171512;
  color: var(--ink-dim);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  z-index: 5;
}
body.loading #loading-screen { display: flex; }

/* ─────────── Panel shell ─────────── */
/* A fixed-position overlay, not a flex sibling - #garden-wrap/#stage are
   always full-viewport width, and this just slides on top of the right
   edge via transform. Zen mode toggling never changes the canvas's actual
   size this way, so there's nothing to resize mid-transition (animating
   #panel's layout *width* instead, with the 3D view resizing to match
   every frame, was what caused a black flash - a plain transform slide
   sidesteps that entirely). */
#panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 264px;
  background: var(--panel);
  border-left: 1px solid var(--panel-edge);
  overflow-y: auto;
  user-select: none;
  display: flex;
  flex-direction: column;
  z-index: 4;
  transition: transform .35s ease;
  transform: translateX(0);
}
body.zen #panel {
  transform: translateX(100%);
  pointer-events: none;
}

#panel-head {
  padding: 22px 20px 16px;
}
#panel-head h1 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 6px;
  line-height: 1;
}
#panel-head .subtitle {
  display: block;
  font-size: 11px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: 8px;
}

/* ─────────── Tabs ─────────── */
#tabs {
  display: flex;
  padding: 0 20px;
  gap: 4px;
  border-bottom: 1px solid var(--panel-edge);
}
#tabs .tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 1px;
  padding: 10px 4px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
#tabs .tab:hover { color: var(--ink); }
#tabs .tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ─────────── Panes ─────────── */
.pane { display: none; padding: 0 20px; }
.pane.active { display: block; }

#panel section {
  padding: 16px 0;
  border-top: 1px solid var(--panel-edge);
}
#panel section:first-child { border-top: none; }

#panel h2 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 12px;
}

label {
  display: block;
  font-size: 12.5px;
  color: var(--ink);
  margin-bottom: 12px;
}
label:last-child { margin-bottom: 0; }
label output { float: right; color: var(--accent); font-variant-numeric: tabular-nums; }

input[type="range"] {
  width: 100%;
  margin-top: 6px;
  accent-color: var(--accent);
  height: 18px;
}

select {
  width: 100%;
  margin-top: 6px;
  background: var(--field);
  color: var(--ink);
  border: 1px solid var(--panel-edge);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12.5px;
  font-family: var(--sans);
}

.field-row {
  display: flex;
  gap: 10px;
}
.field-row label { flex: 1; }

/* ─────────── Buttons ─────────── */
button {
  background: var(--field);
  color: var(--ink);
  border: 1px solid var(--panel-edge);
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 12.5px;
  font-family: var(--sans);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button.active {
  border-color: var(--accent);
  color: var(--accent);
  background: #241e14;
}
button.wide { width: 100%; }
button.wide + button.wide { margin-top: 6px; }
button.subtle { color: var(--ink-dim); }
button.primary { color: var(--accent); }
button.sweeping {
  border-color: var(--accent);
  color: #171512;
  background: var(--accent);
}
button.danger:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }

/* ─────────── Rake head grid ─────────── */
.head-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 6px;
  min-height: 64px;
  color: var(--ink);
}
.head span { font-size: 11px; letter-spacing: .5px; }
.head svg { color: var(--ink-dim); transition: color .15s; }
.head:hover svg { color: var(--ink); }
.head.active { color: var(--accent); }
.head.active svg { color: var(--accent); }
.hidden-tool { display: none; }

/* ─────────── Hints ─────────── */
.hint {
  font-size: 11px;
  color: var(--ink-dim);
  line-height: 1.5;
  margin-top: 10px;
}

/* ─────────── Collapsible ─────────── */
.collapsible h2 {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.collapsible h2::after {
  content: "\2212";
  color: var(--accent);
  font-size: 12px;
}
.collapsible.collapsed h2::after { content: "+"; }
.collapsible.collapsed > :not(h2) { display: none; }

/* ─────────── Model grid ─────────── */
.model-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.model-option {
  min-width: 0;
  padding: 6px;
}
.model-option img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 3px;
  background: #100e0b;
  margin-bottom: 5px;
}
.model-option.loading img { opacity: .45; }
.model-option.loading { cursor: wait; }
.model-option.load-error img { filter: grayscale(1); opacity: .45; }
.model-option span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.model-option.delete-option {
  color: var(--ink-dim);
  border-style: dashed;
}
.model-option.delete-option .delete-icon {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  background: #100e0b;
  margin-bottom: 5px;
  font-size: 22px;
  line-height: 2.2;
  text-align: center;
}
.model-option.delete-option:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }
.model-option.delete-option.active {
  border-color: var(--danger);
  color: var(--danger);
  background: #241414;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.check-row input { width: auto; }

/* ─────────── Footer ─────────── */
#panel-foot {
  margin-top: auto;
  padding: 12px 20px;
  border-top: 1px solid var(--panel-edge);
}
#panel-foot .hint { margin-top: 0; }
button.link {
  background: none;
  border: none;
  color: var(--accent);
  padding: 4px 0;
  font-size: 12px;
  white-space: nowrap;
}
button.link:hover { text-decoration: underline; }
button.link:disabled {
  color: var(--ink-dim);
  opacity: .45;
  cursor: default;
  text-decoration: none;
}

/* ─────────── Floating toolbar & zen mode ─────────── */
/* Undo/redo/zen/smooth-all live here, centered over the 3D view, instead
   of tucked in the panel's corner - visible and reachable regardless of
   which tab is open. In zen mode it slides straight down out of view
   ("hides beneath"), the same way #panel slides off to the side - a plain
   transform on a fixed-size overlay, nothing for the canvas to resize
   around. */
#floating-toolbar {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 0);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(23, 21, 18, .82);
  border: 1px solid var(--panel-edge);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
  transition: transform .35s ease;
}
#floating-toolbar .toolbar-divider {
  width: 1px;
  height: 16px;
  background: var(--panel-edge);
}
body.zen #floating-toolbar {
  transform: translate(-50%, 140%);
  pointer-events: none;
}

#zen-exit {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 6;
  padding: 7px 12px;
  border-color: rgba(200, 161, 90, .5);
  color: var(--accent);
  background: rgba(23, 21, 18, .82);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
body.zen #zen-exit {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
body.history-busy #stage, body.history-busy #panel { pointer-events: none; }