:root {
  --ink: #20241F;
  --muted: #657067;
  --paper: #F7F5EF;
  --white: #FFFFFF;
  --line: rgba(168, 180, 162, .55);
  --forest: #49614E;
  --lime: #49614E;
  --surface: #E7EBE4;
  --sage: #A8B4A2;
  --accent: #C87552;
  --orange: #C87552;
  --blue: #49614E;
  --shadow: 0 8px 24px rgba(32, 36, 31, .055);
}

body { color: var(--ink); background: var(--paper); }

.topbar {
  background: rgba(247, 245, 239, .96);
  color: var(--ink);
  border-bottom: 1px solid rgba(168, 180, 162, .42);
  backdrop-filter: blur(14px);
}
.brand { gap: 0; font-size: 20px; font-weight: 780; letter-spacing: -.035em; }
.brand-accent { color: var(--accent); font-size: 1.15em; line-height: 0; }
.save-state { color: var(--muted); }

.card {
  border-color: rgba(168, 180, 162, .48);
  border-radius: 20px;
  box-shadow: var(--shadow);
}
.step { border-color: rgba(168, 180, 162, .45); }
.step strong { background: var(--surface); color: var(--forest); }
.step.active { border-color: var(--forest); box-shadow: none; }
.step.active strong { background: var(--forest); color: white; }
.step.done strong { background: var(--sage); color: white; }

.quiz-progress i { background: var(--surface); }
.quiz-progress i.on { background: var(--forest); }
.quiz-choice::before { background: rgba(32, 36, 31, .48); }
.quiz-choice.selected { border-color: var(--forest); box-shadow: 0 0 0 2px rgba(73, 97, 78, .22); }

.btn,
.btn.primary { min-height: 46px; background: var(--forest); color: white; }
.btn.ghost { background: var(--surface); color: var(--ink); }
.btn:hover { transform: none; filter: brightness(.97); }
.btn:focus-visible,
.step:focus-visible,
.quiz-choice:focus-visible { outline: 3px solid rgba(73, 97, 78, .25); outline-offset: 2px; }

.badge,
.bundle-points span { background: var(--surface); color: var(--ink); }
.flow-note,
.choice-field,
.existing-box,
.wish-box,
.photo-input,
.project-plant-card,
.own-plant,
.suggestion-empty { background: var(--surface); border-color: rgba(168, 180, 162, .5); }
.flow-note b { color: var(--forest); }

input,
select { background: white; border-color: rgba(168, 180, 162, .65); color: var(--ink); }
input:focus,
select:focus { outline: 3px solid rgba(73, 97, 78, .18); border-color: var(--forest); }
.choice-tile span { background: white; border-color: rgba(168, 180, 162, .58); color: var(--ink); }
.choice-tile input:checked + span { background: var(--forest); border-color: var(--forest); color: white; box-shadow: none; }
.choice-tile input:focus-visible + span { outline: 3px solid rgba(73, 97, 78, .24); }
.segmented,
.yes-no,
.view-toggle,
.time-toggle { background: var(--surface); }
.segmented button.active,
.yes-no button.active,
.view-toggle button.active,
.time-toggle button.active { background: var(--forest); color: white; box-shadow: none; }
.matches { box-shadow: 0 10px 26px rgba(32, 36, 31, .08); }
.match:hover,
.match.active { background: var(--surface); }
.plant-chip,
.wish-chip { border-color: transparent; background: var(--surface); color: var(--ink); }
.plant-chip small { color: var(--muted); }
.plant-chip button { color: var(--forest); }

.photo-editor { background: var(--surface); }
.photo-editor polygon { fill: rgba(168, 180, 162, .34); stroke: var(--forest); }
.photo-editor circle { fill: white; stroke: var(--forest); }
#areaPoints circle:last-child { fill: var(--accent); stroke: white; }

.garden-stage { background: var(--surface); }
.fence { background: rgba(73, 97, 78, .08); border-color: var(--forest); }
.bed { background: #7A6654; }
.plant::before { box-shadow: 0 5px 12px rgba(32, 36, 31, .12); }
.plant.flamingo { --c: #82917C; }
.plant.added { --c: #78866B; }
.plant:hover::before { outline-color: var(--forest); }
.plant.selected::before { outline-color: var(--accent); }
.plant.sticker span { background: var(--forest); box-shadow: 0 3px 8px rgba(32, 36, 31, .12); }

.plant-row { border-color: rgba(168, 180, 162, .48); }
.plant-row.active { border-color: var(--forest); background: var(--surface); }
.suggestion { background: white; border-color: rgba(168, 180, 162, .48); }
.suggestion.added-card { border-color: var(--sage); background: var(--surface); }
.alert.orange { background: rgba(200, 117, 82, .12); color: #6E3E2C; }
.alert.blue { background: var(--surface); color: var(--forest); }
.accept-card { border: 1px solid var(--forest); }
.final-visual { background: var(--forest); }
.final-visual .eyebrow,
.final-visual p { color: white; }
.drawer-panel { box-shadow: -10px 0 28px rgba(32, 36, 31, .1); }
.icon-btn { background: var(--surface); color: var(--ink); }
.current-plant { background: var(--forest); }
.current-plant small { color: #E7EBE4; }

.plan-scroll { scrollbar-color: var(--sage) var(--surface); }
.dimension-x,
.dimension-y,
.plan::before { color: var(--muted); }
.dimension-x::before,
.dimension-x::after { background: var(--sage); }
.plan {
  background-color: var(--paper);
  background-image: linear-gradient(to right, rgba(168, 180, 162, .28) 1px, transparent 1px), linear-gradient(to bottom, rgba(168, 180, 162, .28) 1px, transparent 1px);
  border-top-color: var(--forest);
}
.dot { box-shadow: 0 2px 6px rgba(32, 36, 31, .1); }
.dot.tree { background: var(--forest) !important; }
.dot.barberry { background: var(--accent) !important; }
.dot.spirea { background: var(--sage) !important; color: var(--ink); }
.dot.light-dot { color: var(--ink); }
.legend .existing-legend i { background: var(--forest) !important; }
.legend [data-legend-code="R1"] i,
.legend [data-legend-code="R5"] i { background: var(--accent) !important; }
.legend [data-legend-code="R2"] i,
.legend [data-legend-code="R4"] i { background: var(--sage) !important; }
.legend [data-legend-code="R3"] i { background: var(--forest) !important; }
.plan .dot.selected { outline: 3px solid var(--accent); outline-offset: 3px; }
.toast { background: var(--ink); box-shadow: 0 8px 20px rgba(32, 36, 31, .12); }

.project-task-progress,
.project-task { background: white; border-color: rgba(168, 180, 162, .48); box-shadow: none; }
.project-task.is-active { border-color: var(--forest); box-shadow: var(--shadow); }
.task-dot { background: var(--surface); }
.task-dot.done { background: var(--sage); }
.task-dot.active { background: var(--forest); }
.task-number,
.task-status { background: var(--surface); color: var(--forest); }
.is-active .task-number { background: var(--forest); color: white; }
.is-complete .task-number { background: var(--sage); color: white; }
.is-active .task-status { background: var(--forest); color: white; }
.is-complete .task-status { background: var(--surface); color: var(--forest); }
.layout-preview-label,
.layout-editor-help { background: var(--surface); }
.layout-controls { background: white; }

@media (max-width: 620px) {
  .project-task-progress { background: rgba(255, 255, 255, .96); }
  .task-next-wrap,
  .project-task[data-task="4"].is-active .accept-actions { box-shadow: 0 -6px 18px rgba(32, 36, 31, .08); }
}