/* ── LIGHT THEME (default: warm almond/brown) ── */
:root {
  --bg: #f5f0e8;
  --bg-grad1: #f7f1e6;
  --bg-grad2: #f0e5d6;
  --surface: #fdfbf7;
  --surface2: #f0e4d4;
  --surface3: #f9f3ea;
  --surface-hover: #fff;
  --surface-accent: #fff8ef;
  --surface-edit: #eee8dc;
  --border: #d2bfa4;
  --border2: #d4c6b4;
  --accent: #b67835;
  --accent2: #d28b3f;
  --text: #3f2a1e;
  --text2: #846a52;
  --danger: #c0392b;
  --success: #2e7d32;
  --radius: 0px;
  --canvas-shadow: 0 16px 40px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.02);
  --swatch-border: rgba(0,0,0,0.25);
  --scrollbar-thumb: rgba(0,0,0,0.25);
  --input-bg: #f9f3ea;
  --input-focus-bg: #fff;
  --btn-hover-bg: #f8efe2;
  --danger-bg: #fdf3f2;
  --color-bar-bg: #f8f4ee;
}

/* ── DARK THEME (Adobe Illustrator CS6 style) ── */
[data-theme="dark"] {
  --bg: #535353;
  --bg-grad1: #4a4a4a;
  --bg-grad2: #3d3d3d;
  --surface: #3a3a3a;
  --surface2: #4a4a4a;
  --surface3: #444;
  --surface-hover: #555;
  --surface-accent: #4f4538;
  --surface-edit: #3e3830;
  --border: #5a5550;
  --border2: #5a5550;
  --accent: #d4943c;
  --accent2: #e6a84e;
  --text: #e0d8cc;
  --text2: #a89880;
  --danger: #e05545;
  --success: #5aad5e;
  --canvas-shadow: 0 16px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,0.15);
  --swatch-border: rgba(255,255,255,0.2);
  --scrollbar-thumb: rgba(255,255,255,0.25);
  --input-bg: #505050;
  --input-focus-bg: #5a5a5a;
  --btn-hover-bg: #554d42;
  --danger-bg: #4a3030;
  --color-bar-bg: #3a3a3a;
}

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

body {
  font-family: 'Outfit', sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
}

/* Header placeholder */
.app-header { display: none; }

/* Unified Toolbar */
.toolbar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  flex-shrink: 0;
}

.toolbar-brand {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
  margin: 0;
}
.brand-graphic { color: #f0a830; } /* amber — contrasts on light toolbar */
.brand-draw { color: #fff; }
[data-theme="dark"] .brand-graphic { color: #ffc555; }
[data-theme="dark"] .brand-draw { color: #fff; }

.toolbar-divider {
  width: 1px;
  align-self: stretch;
  min-height: 24px;
  background: var(--border);
  margin: 0 6px;
}

.header-actions {
  display: flex; gap: 6px; align-items: center; margin-left: auto;
}
.toolbar-spacer { width: 30px; }

.toolbar-select-group {
  display: flex; gap: 3px; align-items: center;
  background: var(--surface2); border: 1px solid var(--border);
  padding: 2px 4px;
}
.toolbar-select-group .btn { font-size: 0.68rem; padding: 3px 7px; white-space: nowrap; }

/* Secondary toolbar removed - styles kept minimal */
.toolbar-secondary { display: none; }

/* Floating text edit bar (merged into text-toolbar) */
.text-edit-bar { display: none; }
.text-edit-bar.visible { display: none; }
.text-edit-bar label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  white-space: nowrap;
}
.text-edit-bar input[type='text'] {
  flex: 1;
  padding: 6px 10px;
  font-size: 0.9rem;
  background: var(--input-focus-bg);
  border: 1px solid var(--border);
  color: var(--text);
}
.text-edit-bar input[type='text']:focus {
  border-color: var(--text2);
  outline: none;
}

/* Layout */
.app-layout {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* Center column: text bar + canvas + color bar */
.center-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Sidebars */
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.sidebar-left { width: 300px; min-width: 300px; overflow: hidden; }
.sidebar-left-scroll { flex: 1; overflow-y: auto; }
.sidebar-right {
  width: 260px; min-width: 260px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
.sidebar-right-scroll {
  flex: 1; overflow-y: auto; min-height: 0;
}

.sidebar-section {
  padding: 16px;
  border-bottom: 1px solid var(--border);
}
.sidebar-section h3 {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text2);
  margin-bottom: 10px;
  font-family: 'Space Mono', monospace;
}

/* Canvas area — fixed viewport, no scrollbars */
.canvas-area {
  flex: 1;
  position: relative;
  padding: 0;
  overflow: hidden;
  min-height: 0;
  background: radial-gradient(circle at 50% 30%, var(--bg-grad1) 0%, var(--bg-grad2) 30%, var(--bg) 80%);
}
.canvas-container-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.canvas-info {
  display: flex; gap: 16px; margin-top: 12px; align-items: center;
  font-size: 0.75rem; color: var(--text2);
  font-family: 'Space Mono', monospace;
}
.zoom-controls {
  display: flex; align-items: center; gap: 4px;
}
.zoom-btn {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--surface2);
  color: var(--text); font-size: 0.9rem; cursor: pointer;
  font-family: 'Space Mono', monospace; padding: 0;
  transition: all 0.15s;
}
.zoom-btn:hover { border-color: var(--text2); color: var(--text); background: var(--surface-hover); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 1px solid var(--border); border-radius: 0;
  background: var(--surface2); color: var(--text);
  font-family: 'Outfit', sans-serif; font-size: 0.85rem;
  cursor: pointer; transition: all 0.15s;
}
.btn:hover { border-color: var(--text2); color: var(--text); background: var(--surface-hover); }
.btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.btn-accent:hover { background: var(--accent2); border-color: var(--accent2); color: #fff; }
.btn-danger { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-sm { padding: 5px 10px; font-size: 0.78rem; }
.full-width { margin-top: 8px; width: 100%; }

/* Form controls */
select,
input[type='text'],
input[type='number'],
input[type='email'],
input[type='url'],
textarea {
  width: 100%; padding: 8px 10px;
  background: var(--input-bg); border: 1px solid var(--border); border-radius: 0;
  color: var(--text); font-family: 'Outfit', sans-serif; font-size: 0.85rem;
  outline: none; transition: border-color 0.15s, background 0.15s;
}
select:focus, input:focus, textarea:focus { border-color: var(--text2); background: var(--input-focus-bg); }

label { display: block; font-size: 0.8rem; color: var(--text2); margin-bottom: 4px; }
.row { display: flex; gap: 8px; align-items: center; }
.row > * { flex: 1; }
.form-group { margin-bottom: 14px; }
.button-row { margin-top: 6px; }
.hint-text { font-size: 0.72rem; color: var(--text2); margin-top: 4px; }

/* Sign size presets */
.size-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.size-btn {
  padding: 8px; background: var(--input-bg); border: 1px solid var(--border);
  border-radius: 0; color: var(--text); font-size: 0.78rem;
  cursor: pointer; text-align: center; transition: all 0.15s;
}
.size-btn:hover, .size-btn.active {
  border-color: var(--text2); color: var(--text); background: var(--surface-hover);
}

/* Color swatches */
.swatch-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.swatch {
  width: 28px; height: 28px; border-radius: 0;
  cursor: pointer; border: 2px solid transparent; transition: all 0.15s;
}
.swatch:hover, .swatch.active { border-color: var(--text2); transform: scale(1.04); }
.color-input { width: 36px; height: 36px; padding: 0; border: none; cursor: pointer; }

/* Clipart grid */
.clipart-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.clipart-btn {
  width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: var(--input-bg); border: 1px solid var(--border); border-radius: 0;
  font-size: 1.4rem; cursor: pointer; transition: all 0.15s;
}
.clipart-btn:hover { border-color: var(--text2); background: var(--surface-hover); transform: scale(1.03); }

/* Object controls */
.obj-controls { display: none; }
.obj-controls.visible { display: block; }

/* Layers panel */
.layers-toolbar {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.layers-toolbar .btn { font-size: 0.72rem; padding: 3px 8px; }
.layers-drag-hint { font-size: 0.68rem; color: var(--text2); margin-left: auto; font-style: italic; }
.layers-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 190px; overflow-y: auto; font-size: 0.78rem;
}
.layer-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px; border-radius: 0; background: var(--input-bg);
  border: 1px solid var(--border); cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  user-select: none; position: relative;
}
.layer-drag-handle {
  cursor: grab; color: var(--text2); margin-right: 6px; display: flex; align-items: center;
  opacity: 0.5; transition: opacity 0.15s;
}
.layer-drag-handle:hover { opacity: 1; }
.layer-drag-handle:active { cursor: grabbing; }
.layer-item.dragging { opacity: 0.4; border-style: dashed; }
.layer-item.drag-over { border-color: var(--text2); box-shadow: 0 -2px 0 var(--text2); }
.layer-item:hover { background: var(--surface-hover); }
.layer-item.active { border-color: var(--text2); box-shadow: 0 0 0 1px rgba(100,100,100,0.15); }
.layer-name { flex: 1; margin-right: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.75rem; }
.layer-actions { display: flex; gap: 2px; align-items: center; }
.layer-btn {
  border: none; background: transparent; cursor: pointer;
  padding: 2px 3px; color: var(--text2); display: flex; align-items: center;
}
.layer-btn:hover { color: var(--text); }

/* Template thumbnails */
.template-grid { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 10px; }
.template-card {
  border: 1px solid var(--border); background: var(--surface-hover); padding: 0;
  cursor: pointer; text-align: left; display: block;
  border-radius: 0; transition: background 0.15s, border-color 0.15s;
  overflow: hidden; position: relative;
}
.template-card:hover { border-color: var(--text2); }
.template-card.active {
  border-color: var(--text2);
  box-shadow: 0 0 0 1px rgba(100,100,100,0.2);
}
.template-grid {
  overflow-y: visible;
}
.template-thumb {
  width: 100%; background: var(--surface-hover);
  overflow: hidden; display: block; line-height: 0;
}
.template-thumb img { width: 100%; height: auto; display: block; }
.template-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* Templates button in sidebar */
.btn-templates {
  width: 100%;
  padding: 10px 16px;
  background: #7a6652;
  color: #fff;
  border: none;
  font-family: 'Outfit', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-templates:hover { opacity: 0.85; }
.template-badge {
  background: rgba(255,255,255,0.25);
  padding: 1px 7px;
  font-size: 0.72rem;
  font-weight: 400;
}

/* Template Gallery Modal */
.template-gallery-modal {
  width: 1100px;
  max-width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.template-gallery-header {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 12px;
}
.template-gallery-header h2 { font-size: 1.05rem; margin: 0; white-space: nowrap; }
.template-gallery-search-wrap {
  position: relative;
  flex: 1;
  max-width: 280px;
}
.template-gallery-search-wrap input {
  width: 100%;
  padding: 7px 30px 7px 28px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.template-gallery-search-wrap input:focus {
  border-color: var(--text2);
  background: var(--input-focus-bg);
}
.template-gallery-search-wrap input::placeholder { color: var(--text2); }
.template-gallery-search-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  pointer-events: none;
  opacity: 0.6;
}
.template-gallery-search-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text2);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 2px 4px;
  line-height: 1;
}
.template-gallery-search-clear:hover { color: var(--danger); }
.template-gallery-count {
  font-size: 0.75rem;
  color: var(--text2);
  margin: 0;
  white-space: nowrap;
  font-family: 'Space Mono', monospace;
}
.template-gallery-body {
  overflow-y: auto;
  padding: 16px 20px;
  flex: 1;
}
.template-gallery-no-results {
  text-align: center;
  color: var(--text2);
  padding: 40px 0;
  font-size: 0.9rem;
}
.template-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.template-gallery-card {
  border: 2px solid var(--border);
  background: var(--surface-hover);
  padding: 0;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  overflow: hidden;
}
.template-gallery-card:hover {
  border-color: var(--text2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.template-gallery-card.active {
  border-color: var(--text2);
  box-shadow: 0 0 0 2px rgba(100,100,100,0.2);
}
.template-gallery-thumb {
  width: 100%;
  background: #fff;
  overflow: hidden;
  line-height: 0;
}
.template-gallery-thumb img {
  width: 100%;
  height: auto;
  display: block;
}
.template-gallery-label {
  padding: 6px 8px;
  font-size: 0.7rem;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

@media (max-width: 900px) {
  .template-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .template-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .template-gallery-grid { grid-template-columns: 1fr; }
}

/* Alignment grid */
.align-grid { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.align-grid .btn { flex: 1 0 calc(33.33% - 4px); padding: 5px 2px; font-size: 0.72rem; text-align: center; justify-content: center; }

/* Accordion */
.accordion-header {
  width: 100%; border: 1px solid var(--border); background: var(--surface2);
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px; cursor: pointer; font-size: 0.8rem;
  color: var(--text); font-family: 'Outfit', sans-serif;
}
.accordion-body { display: none; margin-top: 8px; }
.accordion.open .accordion-body { display: block; }
.accordion-header span:last-child { font-family: 'Space Mono', monospace; }

/* Modal */
.modal-overlay {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--surface); border: 1px solid var(--border); border-radius: 0;
  padding: 24px 24px 20px; width: 90%; max-width: 480px;
}
.modal.template-gallery-modal { max-width: 1100px; }

/* Inline SVG Icons */
.ico { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; }
.ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico-sm { width: 12px; height: 12px; vertical-align: -1px; }
.template-gallery-search-icon .ico,
.help-search-icon .ico { margin-right: 0; }
.modal h2 { font-size: 1.2rem; margin-bottom: 12px; }
.modal-intro { color: var(--text2); font-size: 0.85rem; margin-bottom: 16px; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* Toast */
.toast {
  position: fixed; bottom: 24px; right: 24px; background: var(--success); color: #fff;
  padding: 12px 20px; border-radius: 0; font-weight: 500;
  transform: translateY(100px); opacity: 0; transition: all 0.3s; z-index: 2000;
}
.toast.show { transform: translateY(0); opacity: 1; }

/* Font selector dropdown — show each option in its own font */
#fontSelect option {
  padding: 4px 8px;
  font-size: 14px;
}

/* Quick Help button (top of left sidebar) */
.sidebar-help-top {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* Zoom controls pinned to bottom of right sidebar */
/* Object transform (W/H/X/Y) pinned panel */
.sidebar-transform-pinned {
  flex-shrink: 0; padding: 8px 12px; border-top: 1px solid var(--border);
  background: var(--surface); display: flex; flex-direction: column; gap: 5px;
}
.transform-row {
  display: flex; align-items: center; gap: 4px;
}
.transform-lbl {
  font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 600;
  color: var(--text2); min-width: 14px; text-align: right;
}
.transform-input {
  width: 68px; padding: 3px 5px; border: 1px solid var(--border);
  background: var(--input-bg); color: var(--text); font-family: 'Outfit', sans-serif;
  font-size: 0.75rem; text-align: right; outline: none;
}
.transform-input:focus { border-color: var(--text2); background: var(--input-focus-bg); }
.transform-lock-lbl {
  display: flex; align-items: center; gap: 2px; cursor: pointer; margin-left: 2px;
  color: var(--text2); font-size: 0.72rem;
}
.transform-lock-lbl input { display: none; }
.transform-lock-lbl .ico { opacity: 0.5; transition: opacity 0.15s; }
.transform-lock-lbl input:checked + .ico { opacity: 1; color: var(--text); }
.transform-origin-hint {
  font-size: 0.62rem; color: var(--text2); margin-left: auto; font-style: italic; opacity: 0.7;
}

.sidebar-zoom-pinned {
  flex-shrink: 0;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
}
.sidebar-zoom-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  color: var(--text);
  margin-right: 2px;
}
.sidebar-zoom-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sidebar-zoom-pct {
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  color: var(--text);
  min-width: 38px;
  text-align: center;
}
.btn-help {
  width: 100%;
  padding: 10px 16px;
  background: #3d7a48;
  color: #fff;
  border: none;
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  letter-spacing: 0.02em;
}
.btn-help:hover { background: #2e6438; }

/* Help Modal */
.help-modal {
  width: 900px;
  max-width: 95vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.help-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.help-header h2 { font-size: 1.1rem; margin: 0; }
.help-body {
  overflow-y: auto;
  padding: 20px;
  flex: 1;
}
.help-section {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.help-section:last-child { border-bottom: none; margin-bottom: 0; }
.help-section h3 {
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 10px;
  font-weight: 600;
}
.help-section p { margin: 8px 0; line-height: 1.6; font-size: 0.88rem; }
.help-section ol, .help-section ul { margin: 8px 0 8px 20px; font-size: 0.88rem; line-height: 1.7; }
.help-visual {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0;
  flex-wrap: wrap;
}
.help-btn-example {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  color: var(--text);
}
.help-btn-example.active {
  border-color: var(--text2);
  background: var(--surface-hover);
  color: var(--text);
}
.btn-danger-example { border-color: var(--danger); color: var(--danger); }
.help-inline-btn {
  display: inline;
  padding: 1px 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
}
.btn-danger-text { color: var(--danger); }
.help-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 0.85rem;
}
.help-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.5;
}
.help-table td:first-child {
  width: 110px;
  white-space: nowrap;
  font-weight: 500;
}
.help-tips { list-style: none; margin: 0; padding: 0; }
.help-tips li {
  padding: 6px 0 6px 20px;
  position: relative;
  font-size: 0.88rem;
  line-height: 1.6;
}
.help-tips li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: bold;
}

/* ── Help Search ── */
.help-search-wrap {
  position: relative;
  margin-left: 16px;
  flex: 1;
  max-width: 260px;
}
.help-search-wrap input {
  width: 100%;
  padding: 7px 30px 7px 28px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.help-search-wrap input:focus {
  border-color: var(--text2);
  background: var(--input-focus-bg);
}
.help-search-wrap input::placeholder { color: var(--text2); }
.help-search-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  pointer-events: none;
  opacity: 0.6;
}
.help-search-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text2);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 2px 4px;
  line-height: 1;
}
.help-search-clear:hover { color: var(--danger); }

.help-no-results {
  padding: 30px 20px;
  text-align: center;
  color: var(--text2);
  font-size: 0.9rem;
}

.help-section.help-search-hidden { display: none; }
.help-section .help-search-highlight {
  background: rgba(182,120,53,0.25);
  border-radius: 2px;
  padding: 0 1px;
}
[data-theme="dark"] .help-section .help-search-highlight {
  background: rgba(212,148,60,0.3);
}

/* ── Help TOC ── */
.help-toc { padding-bottom: 16px !important; }
.help-toc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.help-toc-link {
  display: block;
  padding: 6px 10px;
  font-size: 0.8rem;
  color: var(--text);
  cursor: pointer;
  background: var(--surface2);
  border: 1px solid transparent;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s;
  text-align: center;
}
.help-toc-link:hover {
  background: var(--surface-hover);
  border-color: var(--text2);
}

/* ── Keyboard Shortcuts ── */
.help-shortcut-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 10px 0;
}
.help-shortcut-row {
  display: flex;
  align-items: center;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
}
.help-shortcut-row:last-child { border-bottom: none; }
.help-shortcut-keys {
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
}
.help-shortcut-desc {
  font-size: 0.84rem;
  color: var(--text2);
}
kbd {
  display: inline-block;
  padding: 2px 7px;
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  line-height: 1.4;
  white-space: nowrap;
}

/* ── Animated Demo Walkthroughs ── */
.help-demo {
  margin: 14px 0;
  padding: 16px;
  background: var(--surface3);
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}
.help-demo-caption {
  text-align: center;
  font-size: 0.76rem;
  color: var(--text2);
  margin-top: 10px;
  font-style: italic;
}

/* Shared cursor for all demos */
.help-demo-cursor {
  position: absolute;
  width: 16px;
  height: 16px;
  z-index: 10;
  pointer-events: none;
}
.help-demo-cursor::before {
  content: '';
  display: block;
  width: 0; height: 0;
  border-left: 6px solid var(--text2);
  border-right: 6px solid transparent;
  border-bottom: 10px solid transparent;
  border-top: 6px solid var(--text2);
  filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
}
.help-demo-cursor::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(182,120,53,0.3);
  transform: scale(0);
  animation: cursorRipple 3s ease-in-out infinite;
}

@keyframes cursorRipple {
  0%, 40% { transform: scale(0); opacity: 0.6; }
  50% { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(0); opacity: 0; }
}

/* Demo 1: Interface overview – cursor tours the layout */
.help-demo-canvas {
  position: relative;
  height: 120px;
  background: #fff;
  border: 1px solid #ccc;
  margin: 0 auto;
  max-width: 360px;
}
.help-demo-label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.8rem;
  color: #999;
  font-style: italic;
}
.help-demo-toolbar {
  position: absolute;
  top: -18px; left: 0; right: 0;
  height: 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  font-size: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text2);
}
.help-demo-sidebar-left, .help-demo-sidebar-right {
  position: absolute;
  top: 0;
  width: 55px;
  height: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  font-size: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text2);
}
.help-demo-sidebar-left { left: -60px; }
.help-demo-sidebar-right { right: -60px; }
.help-demo-cursor-tour {
  animation: cursorTour 6s ease-in-out infinite;
}
@keyframes cursorTour {
  0%   { top: -12px; left: 120px; }
  15%  { top: -12px; left: 200px; }
  30%  { top: 30px;  left: -50px; }
  50%  { top: 50px;  left: 180px; }
  70%  { top: 30px;  left: 330px; }
  85%  { top: 80px;  left: 180px; }
  100% { top: -12px; left: 120px; }
}

/* Demo 2: Size selection */
.help-demo-size-pick {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 8px 0;
}
.help-demo-size-btn {
  padding: 5px 14px;
  font-size: 0.75rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  transition: all 0.2s;
}
.help-demo-size-target {
  animation: sizeTargetPulse 4s ease-in-out infinite;
}
@keyframes sizeTargetPulse {
  0%, 30% { border-color: var(--border); background: var(--surface2); color: var(--text); }
  40%, 70% { border-color: var(--accent); background: var(--surface-accent); color: var(--accent); }
  80%, 100% { border-color: var(--border); background: var(--surface2); color: var(--text); }
}
.help-demo-cursor-sizeclick {
  animation: cursorSizeClick 4s ease-in-out infinite;
}
@keyframes cursorSizeClick {
  0%, 15% { top: 30px; left: 50px; opacity: 1; }
  35% { top: 16px; left: 215px; opacity: 1; }
  40%, 65% { top: 16px; left: 215px; opacity: 1; }
  80%, 100% { top: 30px; left: 50px; opacity: 0.4; }
}
.help-demo-canvas-resize {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  height: 50px;
}
.help-demo-canvas-box {
  height: 30px;
  background: #fff;
  border: 2px solid #bbb;
}
.help-demo-canvas-grow {
  animation: canvasGrow 4s ease-in-out infinite;
}
@keyframes canvasGrow {
  0%, 35% { width: 80px; height: 25px; }
  50%, 75% { width: 180px; height: 45px; }
  90%, 100% { width: 80px; height: 25px; }
}

/* Demo 3: Add text */
.help-demo-addtext {
  position: relative;
  min-height: 80px;
}
.help-demo-toolbar-mini {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.help-demo-tb-btn {
  padding: 4px 12px;
  font-size: 0.72rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
}
.help-demo-tb-target {
  animation: tbBtnFlash 5s ease-in-out infinite;
}
@keyframes tbBtnFlash {
  0%, 20% { background: var(--surface2); }
  30%, 50% { background: var(--surface-accent); border-color: var(--accent); }
  60%, 100% { background: var(--surface2); }
}
.help-demo-addtext-canvas {
  background: #fff;
  border: 1px solid #ccc;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.help-demo-text-appear {
  font-size: 0.85rem;
  font-weight: 600;
  color: #333;
  opacity: 0;
  animation: textAppear 5s ease-in-out infinite;
}
@keyframes textAppear {
  0%, 30% { opacity: 0; transform: scale(0.7); }
  45%, 80% { opacity: 1; transform: scale(1); }
  95%, 100% { opacity: 0; transform: scale(0.7); }
}
.help-demo-handles {
  position: absolute;
  top: 10px; left: 25%; right: 25%;
  bottom: 10px;
  border: 1.5px dashed #1e78dc;
  opacity: 0;
  animation: handlesAppear 5s ease-in-out infinite;
}
@keyframes handlesAppear {
  0%, 35% { opacity: 0; }
  50%, 80% { opacity: 1; }
  95%, 100% { opacity: 0; }
}
.help-demo-handles::before, .help-demo-handles::after {
  content: '';
  position: absolute;
  width: 8px; height: 8px;
  background: #1e78dc;
  border-radius: 50%;
}
.help-demo-handles::before { top: -4px; left: -4px; }
.help-demo-handles::after { bottom: -4px; right: -4px; }
.help-demo-cursor-addtext {
  animation: cursorAddText 5s ease-in-out infinite;
}
@keyframes cursorAddText {
  0%, 5% { top: 10px; left: 5px; opacity: 1; }
  25% { top: 4px; left: 15px; opacity: 1; }
  30%, 55% { top: 4px; left: 15px; opacity: 0; }
  60% { top: 50px; left: 150px; opacity: 0; }
  65%, 85% { top: 50px; left: 150px; opacity: 1; }
  100% { top: 10px; left: 5px; opacity: 0.3; }
}

/* Demo 4: Style text – color/size morph */
.help-demo-style {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}
.help-demo-style-text {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 3px;
}
.help-demo-style-animate {
  animation: styleMorph 8s ease-in-out infinite;
}
@keyframes styleMorph {
  0%   { color: #333;    font-size: 1.2rem; letter-spacing: 2px; transform: rotate(0deg); }
  15%  { color: #c0392b; font-size: 1.8rem; letter-spacing: 4px; transform: rotate(0deg); }
  30%  { color: #2980b9; font-size: 1.4rem; letter-spacing: 8px; transform: rotate(-2deg); }
  45%  { color: #f39c12; font-size: 2rem;   letter-spacing: 1px; transform: rotate(0deg);
         text-shadow: 2px 2px 0 #333; }
  60%  { color: #27ae60; font-size: 1.6rem; letter-spacing: 6px; transform: rotate(2deg);
         text-shadow: none; }
  75%  { color: #8e44ad; font-size: 1.3rem; letter-spacing: 3px; transform: rotate(0deg);
         font-style: italic; }
  90%  { font-style: normal; }
  100% { color: #333;    font-size: 1.2rem; letter-spacing: 2px; transform: rotate(0deg); }
}

/* Demo 5: Color pick */
.help-demo-colorpick {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  min-height: 80px;
}
.help-demo-colorpick-obj {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 3px;
  transition: color 0.3s;
}
.help-demo-colorpick-animate {
  animation: colorPickObj 6s ease-in-out infinite;
}
@keyframes colorPickObj {
  0%, 25% { color: #333; }
  35%, 65% { color: #f39c12; }
  80%, 100% { color: #333; }
}
.help-demo-colorpick-bar {
  display: flex;
  gap: 3px;
}
.help-demo-swatch {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(0,0,0,0.15);
  transition: transform 0.15s;
}
.help-demo-swatch-target {
  animation: swatchPulse 6s ease-in-out infinite;
}
@keyframes swatchPulse {
  0%, 25% { transform: scale(1); box-shadow: none; }
  35%, 55% { transform: scale(1.25); box-shadow: 0 0 8px rgba(243,156,18,0.5); }
  70%, 100% { transform: scale(1); box-shadow: none; }
}
.help-demo-cursor-colorpick {
  animation: cursorColorPick 6s ease-in-out infinite;
}
@keyframes cursorColorPick {
  0%, 10% { top: 15px; left: 140px; opacity: 1; }
  25% { top: 52px; left: 175px; opacity: 1; }
  35%, 55% { top: 52px; left: 175px; opacity: 1; }
  70%, 100% { top: 15px; left: 140px; opacity: 0.3; }
}

/* Responsive */
@media (max-width: 1024px) {
  .app-layout { flex-direction: column; flex: 1; }
  .sidebar-left, .sidebar-right { width: 100%; min-width: 100%; border-right: none; border-left: none; }
  .canvas-area { padding: 0; }
}

/* Right-click context menu */
.context-menu {
  display: none; position: fixed; z-index: 3000;
  background: var(--surface); border: 1px solid var(--border);
  min-width: 160px; box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  font-family: 'Outfit', sans-serif; font-size: 0.82rem;
  padding: 4px 0;
}
.ctx-item {
  display: block; width: 100%; text-align: left;
  padding: 6px 14px; border: none; background: none;
  color: var(--text); cursor: pointer; font-family: inherit; font-size: inherit;
}
.ctx-item:hover { background: var(--surface-hover); color: var(--text); }
.ctx-item.disabled { color: var(--text2); opacity: 0.5; cursor: default; }
.ctx-item.disabled:hover { background: none; color: var(--text2); }
.ctx-divider { height: 1px; background: var(--border); margin: 3px 0; }

/* Bottom color bar (contained in center column, not fixed) */
.color-bar {
  display: flex;
  align-items: center;
  padding: 4px 0;
  background: var(--color-bar-bg);
  border-top: 1px solid var(--border2);
  flex-shrink: 0;
}
.palette-arrow {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  color: var(--text2); font-size: 0.9rem; cursor: pointer;
  padding: 0; transition: color 0.15s;
}
.palette-arrow:hover { color: var(--text); }
.color-row {
  display: flex; flex-wrap: nowrap; gap: 2px;
  overflow-x: auto; padding-bottom: 2px; flex: 1;
}
.color-row::-webkit-scrollbar { height: 6px; }
.color-row::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); }
.color-bar .swatch {
  width: 18px; height: 18px; border-radius: 0;
  border: 1px solid var(--swatch-border); cursor: pointer; flex: 0 0 auto;
}
/* No Fill swatch - white with red diagonal slash */
.swatch-nofill {
  background: #fff;
  position: relative;
  overflow: hidden;
}
.swatch-nofill::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 141%;
  height: 1px;
  background: #cc3333;
  transform-origin: 0 0;
  transform: rotate(45deg);
}

/* ── v20 NEW STYLES ── */

/* Submit Order button - full-width sidebar CTA */
.sidebar-submit-top {
  padding: 10px 16px 0 16px;
  flex-shrink: 0;
}
.btn-submit-order {
  display: block;
  width: 100%;
  padding: 10px 16px;
  background: #2e7d32;
  border: none;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: .5px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-submit-order:hover {
  background: #388e3c;
}
.btn-submit-order.has-changes {
  animation: submitPulse 2s ease-in-out 1;
}
@keyframes submitPulse {
  0% { background: #2e7d32; }
  50% { background: #43a047; }
  100% { background: #2e7d32; }
}

/* Clear All muted danger */
.btn-danger-muted {
  border-color: var(--border);
  color: var(--danger);
  background: var(--surface2);
  opacity: 0.8;
}
.btn-danger-muted:hover {
  border-color: var(--danger);
  color: #fff;
  background: var(--danger);
  opacity: 1;
}

/* (toolbar-group removed) */

/* Pinned text toolbar (always visible between sidebars) */
.text-toolbar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
  min-height: 36px;
}

/* Uniform toolbar button size */
.btn-tb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-tb:hover { border-color: var(--text2); background: var(--surface-hover); }
.text-toolbar .btn-tb { font-size: 0.82rem; padding: 5px 10px; }

/* Override global label display:block and margin for toolbar labels */
.text-toolbar-lbl {
  display: inline !important;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text2);
  white-space: nowrap;
  margin: 0 2px !important;
}

/* Override global width:100% for text toolbar inputs */
.text-toolbar-font {
  width: 140px !important;
  padding: 5px 6px !important;
  font-size: 0.82rem;
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text);
}
.text-toolbar-input {
  width: 56px !important;
  padding: 5px 6px !important;
  font-size: 0.82rem;
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text);
  text-align: center;
}
.text-toolbar-input-sm {
  width: 42px !important;
}
.text-toolbar-color {
  width: 30px !important;
  height: 28px;
  padding: 0 !important;
  border: 1px solid var(--border);
  cursor: pointer;
  background: none;
}
.text-toolbar-checkbox {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  font-size: 0.78rem;
  color: var(--text2);
  cursor: pointer;
  margin: 0 !important;
}
.text-toolbar-checkbox input[type="checkbox"] {
  width: auto !important;
  margin: 0;
}

/* (toolbar opacity slider removed - opacity now in Transform accordion) */

/* Draw mode active state */
#drawModeBtn.active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}
/* Eraser mode active state */
#eraserModeBtn.active {
  background: var(--danger) !important;
  color: #fff !important;
  border-color: var(--danger) !important;
}

/* Transform accordion inputs */
.transform-input-side {
  width: 100% !important;
  padding: 5px 6px !important;
  font-size: 0.78rem;
  text-align: center;
}
.transform-grid .row { gap: 6px; }
.transform-grid .form-group { margin-bottom: 0; }

/* Selection tools grid */
.selection-tools-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.selection-tools-grid .btn { margin-top: 0; }

/* Drawing tools 2-column grid */
.drawing-tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.btn-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 8px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-tool:hover {
  border-color: var(--text2);
  background: var(--surface-hover);
}

/* Primary action buttons - warm cohesive style */
.btn-text-add {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-text-add:hover {
  background: var(--surface-hover);
  border-color: var(--text2);
  color: var(--text);
}

/* Live text input inline in text toolbar */
.text-toolbar-live {
  width: 180px !important;
  padding: 5px 8px !important;
  font-size: 0.85rem;
  background: var(--input-focus-bg);
  border: 1px solid var(--border);
  color: var(--text);
}
.text-toolbar-live:focus {
  border-color: var(--text2);
  outline: none;
}

/* Sidebar help row — Quick Help + Dark toggle side by side */
.sidebar-help-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.sidebar-help-row .btn-help { flex: 1; }

/* Dark mode toggle pinned to bottom of left sidebar */
.sidebar-theme-toggle {
  padding: 0;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.btn-theme-bottom {
  width: 100%;
  padding: 6px 8px !important;
  font-size: 0.8rem !important;
  font-family: 'Outfit', sans-serif;
  background: var(--surface2);
  border: none;
  border-top: none;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.15s;
}
.btn-theme-bottom:hover { background: var(--surface-hover); }
.btn-theme-bottom::after { content: '☾'; font-size: 0.9rem; }

/* Text-specific transform fields (Line Height, Spacing) - hidden by default */
.text-transform-fields { /* shown via JS when text selected */ }

/* Browse Templates emphasis */
.btn-templates {
  font-weight: 700;
  padding: 12px 16px;
}

/* Canvas artboard shadow enhancement */
[data-theme="dark"] .canvas-area {
  background: radial-gradient(circle at 50% 30%, #4a4a4a 0%, #3d3d3d 30%, #353535 80%);
}