:root{
  --accent: #f97316;
  --accent-dark: #c2410c;
  --accent-soft: #fff7ed;
  --surface: rgba(255,255,255,0.98);
  --border: #e8e8e8;
  --text: #1c1c1e;
  --muted: #6b7280;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
  --radius: 14px;
  font-family: 'Nunito', system-ui, sans-serif;
}

/* Additional section-specific accents */
:root{
  --accent-bg: #ffb74d;    /* Background section - warm amber */
  --accent-media: #4fc3f7; /* Media section - sky blue */
  --accent-text: #93c572;  /* Text section - soft green */
  --accent-ai: #ce93d8;    /* AI section - soft violet */
  --accent-questions: #ff8a80; /* Questions chips - coral */
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  /* Page background: use the uploaded botanical image to replace the gradient sky */
  background-color: #cfeeff;
  background-image: url('./blue.jpg');
  background-position: center top;
  /* cover the viewport while allowing the image to repeat vertically for long pages */
  background-size: auto 520px, cover;
  background-repeat: repeat-y, no-repeat;
  /* ensure a fallback solid color while image fails to load */
  background-blend-mode: normal;
}

#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 10px 20px;
  gap: 14px;
  min-height: 100vh;
}

/* Page header */
#page-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
#page-header h1 {
  font-family: 'Space Mono', monospace;
  font-size: clamp(18px, 4vw, 26px);
  font-weight: 700;
  color: var(--accent-dark);
  margin: 0;
  letter-spacing: -0.5px;
}
#page-header p {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

#canvas-wrap {
  width: min(98vw, 900px);
  aspect-ratio: 3/4;
  background: var(--surface);
  padding: 12px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(0,0,0,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  position: relative;
}

#canvas-wrap::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius) + 2px);
  background: linear-gradient(135deg, #fbbf24 0%, #f97316 50%, #fb923c 100%);
  z-index: -1;
  opacity: 0.5;
}

canvas#poster {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 8px;
  background: white;
  touch-action: none;
  object-fit: contain;
  cursor: default;
}

/* Toolbar */
#toolbar {
  width: min(98vw, 900px);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Section dividers within toolbar */
.toolbar-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border-radius: 10px;
}

/* Give each toolbar section a different subtle background and label color */
#toolbar .toolbar-section:nth-of-type(1) { background: linear-gradient(90deg, rgba(255,183,77,0.09), rgba(255,215,140,0.03)); }
#toolbar .toolbar-section:nth-of-type(1) .toolbar-section-label { color: #a75a00; }

#toolbar .toolbar-section:nth-of-type(2) { background: linear-gradient(90deg, rgba(79,195,247,0.06), rgba(79,195,247,0.02)); }
#toolbar .toolbar-section:nth-of-type(2) .toolbar-section-label { color: #0277bd; }

#toolbar .toolbar-section:nth-of-type(3) { background: linear-gradient(90deg, rgba(147,197,114,0.06), rgba(147,197,114,0.02)); }
#toolbar .toolbar-section:nth-of-type(3) .toolbar-section-label { color: #3e7a22; }

#toolbar .toolbar-section:nth-of-type(4) { background: linear-gradient(90deg, rgba(206,147,216,0.06), rgba(206,147,216,0.02)); }
#toolbar .toolbar-section:nth-of-type(4) .toolbar-section-label { color: #6a1b9a; }

/* Questions area styled separately */
#questions-row {
  background: linear-gradient(90deg, rgba(255,138,128,0.06), rgba(255,138,128,0.02));
  border-radius: 10px;
  padding: 10px;
}
.toolbar-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border);
}

.tool-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.tool-row.small {
  font-size: 11px;
  color: var(--muted);
  padding-top: 2px;
  justify-content: center;
  font-style: italic;
}

/* Buttons: make button colors adapt per section so each area gets its own hue */
/* Default button appearance remains but we override color per section */
#toolbar .toolbar-section:nth-of-type(1) button {
  background: linear-gradient(135deg, #ffb74d, #ffcc80);
  box-shadow: 0 2px 6px rgba(255,183,77,0.20);
  color: #4a2d00;
}
#toolbar .toolbar-section:nth-of-type(2) button {
  background: linear-gradient(135deg, #4fc3f7, #81d4fa);
  box-shadow: 0 2px 6px rgba(79,195,247,0.20);
  color: #023b56;
}
#toolbar .toolbar-section:nth-of-type(3) button {
  background: linear-gradient(135deg, #93c572, #c5e1a5);
  box-shadow: 0 2px 6px rgba(147,197,114,0.18);
  color: #254a20;
}
#toolbar .toolbar-section:nth-of-type(4) button {
  background: linear-gradient(135deg, #ce93d8, #e1bee7);
  box-shadow: 0 2px 6px rgba(206,147,216,0.18);
  color: #3b115f;
}

/* Keep special buttons (secondary/danger/save) readable but tint them slightly per section */
#toolbar .toolbar-section:nth-of-type(1) button.btn-secondary { background: #fff7ec; color: #7a4b00; border-color: rgba(255,183,77,0.18); }
#toolbar .toolbar-section:nth-of-type(2) button.btn-secondary { background: #f0fbff; color: #064e70; border-color: rgba(79,195,247,0.18); }
#toolbar .toolbar-section:nth-of-type(3) button.btn-secondary { background: #f6fff1; color: #3b5f2c; border-color: rgba(147,197,114,0.16); }
#toolbar .toolbar-section:nth-of-type(4) button.btn-secondary { background: #fbf3fb; color: #532862; border-color: rgba(206,147,216,0.16); }

#toolbar .toolbar-section:nth-of-type(1) button.btn-danger { background: linear-gradient(135deg,#ff8a65,#ff7043); box-shadow: 0 2px 6px rgba(255,138,101,0.16); }
#toolbar .toolbar-section:nth-of-type(2) button.btn-danger { background: linear-gradient(135deg,#29b6f6,#039be5); box-shadow: 0 2px 6px rgba(41,182,246,0.12); }
#toolbar .toolbar-section:nth-of-type(3) button.btn-danger { background: linear-gradient(135deg,#8bc34a,#7cb342); box-shadow: 0 2px 6px rgba(139,195,74,0.10); }
#toolbar .toolbar-section:nth-of-type(4) button.btn-danger { background: linear-gradient(135deg,#ba68c8,#ab47bc); box-shadow: 0 2px 6px rgba(186,104,200,0.10); }

button#save {
  background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
  font-size: 14px;
  padding: 10px 20px;
  box-shadow: 0 4px 12px rgba(249,115,22,0.35);
  width: 100%;
}

button[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Inputs */
input[type="color"] {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--border);
  padding: 0;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
}

input:not([type="color"]):not([type="range"]):not([type="file"]),
select {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fafafa;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: var(--text);
  min-height: 38px;
  flex: 1;
  outline: none;
  transition: border-color 0.15s;
}
input:focus, select:focus { border-color: var(--accent); background: #fff; }

input[type="file"] {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: var(--muted);
  flex: 1;
}

input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
  height: 4px;
  cursor: pointer;
}

.mini {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  flex: 1;
}

label.mini input[type="range"] { width: 90px; }

/* Question buttons */
.question-btn {
  background: #fff;
  color: #7a2a1f;
  border: 1.5px solid rgba(255,138,128,0.28);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 10px;
  min-height: 32px;
  min-width: auto;
  border-radius: 20px;
  letter-spacing: 0.01em;
}
.question-btn:active { background: rgba(255,138,128,0.06); }

.questions-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-questions);
  margin-bottom: 6px;
}

.questions-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Light borders for inputs inside colored sections to match hue */
#toolbar .toolbar-section:nth-of-type(1) input, 
#toolbar .toolbar-section:nth-of-type(1) select { border-color: rgba(255,183,77,0.12); }

#toolbar .toolbar-section:nth-of-type(2) input, 
#toolbar .toolbar-section:nth-of-type(2) select { border-color: rgba(79,195,247,0.12); }

#toolbar .toolbar-section:nth-of-type(3) input, 
#toolbar .toolbar-section:nth-of-type(3) select { border-color: rgba(147,197,114,0.12); }

#toolbar .toolbar-section:nth-of-type(4) input, 
#toolbar .toolbar-section:nth-of-type(4) select { border-color: rgba(206,147,216,0.12); }

#aiResult {
  background: #fff7ed;
  border: 1.5px solid rgba(249,115,22,0.3);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  color: #1c1c1e;
  line-height: 1.5;
}

#aiResultText {
  font-style: italic;
  margin-bottom: 2px;
}

@media (min-width: 900px) {
  #canvas-wrap, #toolbar { max-width: 900px; }
}