/* ============================================================
   CookieCutCo - Design System & Layout
   ============================================================ */

:root {
  /* ── Cookie Cut Co. brand palette ── */
  --ink:         #15313D;
  --cream:       #FBF7F2;
  --sea:         #81B1C5;
  --berry:       #BA6969;
  --honey:       #EDB061;

  /* ── Tonal scale - warm ink-teal (not cold blue-grey) ── */
  --bg:          #0d1f29;   /* deep ink backdrop - viewport + page */
  --bg2:         #15313D;   /* ink - topbar & sidebar */
  --bg3:         #1c3e4e;   /* mid-tone panel background */
  --bg4:         #234c5e;   /* inputs, buttons, cards */
  --border:      #2d5f74;
  --border2:     #3a7490;

  /* ── Text - cream-tinted ── */
  --text:        #FBF7F2;   /* cream */
  --text2:       #a8c6d0;   /* sea-tinted muted */
  --text3:       #5f8fa0;   /* very muted */

  /* ── Brand accents ── */
  --accent:      #EDB061;        /* honey - primary CTA */
  --accent-hover:#f5c484;
  --accent-dim:  rgba(237,176,97,0.14);
  --success:     #3ecf8e;
  --warn:        #EDB061;        /* honey doubles as warn */
  --danger:      #BA6969;        /* berry */
  --danger-dim:  rgba(186,105,105,0.14);

  --radius:    8px;
  --radius-sm: 5px;
  --radius-lg: 12px;
  --shadow:    0 4px 20px rgba(13,31,41,0.6);
  --sidebar-w: 300px;
  --topbar-h:  52px;
  --font:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  'JetBrains Mono', 'Fira Code', monospace;
  --transition: 0.18s ease;
}

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

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---- TOPBAR ---- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 8px;
  z-index: 100;
}

.topbar-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.topbar-center { display: flex; align-items: center; gap: 4px; }
.topbar-right { display: flex; align-items: center; gap: 6px; flex: 1; justify-content: flex-end; position: relative; }

.logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.logo-text {
  font-size: 15px;
  font-weight: 700;
  background: linear-gradient(135deg, #EDB061, #81B1C5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.3px;
}

.project-name-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 2px 4px;
  max-width: 200px;
  transition: border-color var(--transition);
  outline: none;
}
.project-name-input:hover { border-bottom-color: var(--border); }
.project-name-input:focus { border-bottom-color: var(--accent); }

.tb-btn {
  display: flex; align-items: center; justify-content: center;
  gap: 5px;
  height: 30px;
  padding: 0 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text2);
  font: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.tb-btn:hover { background: var(--bg4); color: var(--text); border-color: var(--border); }
.tb-btn-label { padding: 0 10px; }
.tb-btn-primary {
  background: var(--accent);
  color: #15313D;
  border-color: var(--accent);
  font-weight: 600;
}
.tb-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.tb-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }

.export-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 180px;
  padding: 4px;
  z-index: 200;
}
.export-item {
  display: block; width: 100%;
  padding: 8px 12px;
  background: transparent; border: none; border-radius: var(--radius-sm);
  color: var(--text); font: inherit; font-size: 12.5px;
  cursor: pointer; text-align: left; transition: background var(--transition);
}
.export-item:hover { background: var(--bg4); }
.export-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* ---- APP BODY ---- */
.app-body {
  display: flex;
  height: calc(100vh - var(--topbar-h));
  margin-top: var(--topbar-h);
  overflow: hidden;
}

/* ---- SIDEBAR ---- */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 40px;
}

.sidebar-scroll::-webkit-scrollbar { width: 4px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }

/* ---- PANELS ---- */
.panel { border-bottom: 1px solid var(--border); }
.panel.hidden { display: none; }

.panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition);
}
.panel-header:hover { background: var(--bg3); }

.panel-icon { font-size: 14px; line-height: 1; }
.panel-title { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--text); letter-spacing: 0.2px; }

.panel-chevron {
  color: var(--text3);
  transition: transform var(--transition);
}
.panel-header.collapsed .panel-chevron { transform: rotate(-90deg); }

.panel-body {
  padding: 4px 14px 14px;
  overflow: hidden;
}
.panel-body.collapsed {
  display: none;
}

/* ---- FORM ELEMENTS ---- */
.field { margin-bottom: 12px; }
.field:last-child { margin-bottom: 0; }
.field-row { display: flex; gap: 8px; margin-bottom: 12px; }
.field.half { flex: 1; min-width: 0; }

.field-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text2);
  margin-bottom: 5px;
  letter-spacing: 0.15px;
}

/* "Auto" inline toggle (e.g. auto threshold) - sits at the right of a label */
.auto-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text3);
  cursor: pointer;
  user-select: none;
}
.auto-toggle input { cursor: pointer; margin: 0; }

.help-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  background: var(--bg4);
  border-radius: 50%;
  font-size: 9px;
  color: var(--text3);
  cursor: help;
  flex-shrink: 0;
}

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

.slider {
  flex: 1;
  height: 4px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg4);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg2);
  box-shadow: 0 0 0 1px var(--accent);
  cursor: pointer;
  transition: box-shadow var(--transition);
}
.slider::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 3px rgba(91,140,255,0.3);
}

.num-input {
  width: 54px;
  flex-shrink: 0;
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: var(--mono); font-size: 11px;
  padding: 4px 6px;
  text-align: right;
  outline: none;
  transition: border-color var(--transition);
}
.num-input:focus { border-color: var(--accent); }
.num-input.sm { width: 42px; }
.num-input.full { width: 100%; text-align: left; }

.unit-label {
  font-size: 10.5px;
  color: var(--text3);
  flex-shrink: 0;
  margin-left: -4px;
}

.text-input, .select-input {
  width: 100%;
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit; font-size: 12.5px;
  padding: 6px 8px;
  outline: none;
  transition: border-color var(--transition);
}
.text-input:focus, .select-input:focus { border-color: var(--accent); }
.select-input { cursor: pointer; }
.select-input option { background: var(--bg3); }

.color-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.color-input {
  width: 36px;
  height: 28px;
  flex-shrink: 0;
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
  cursor: pointer;
}
.color-input::-webkit-color-swatch-wrapper { padding: 0; }
.color-input::-webkit-color-swatch {
  border: none;
  border-radius: 3px;
}
.color-text {
  height: 28px;
  font: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
}

.textarea-input {
  width: 100%;
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit; font-size: 12.5px;
  padding: 6px 8px;
  resize: vertical;
  min-height: 60px;
  outline: none;
  transition: border-color var(--transition);
}
.textarea-input:focus { border-color: var(--accent); }

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  min-height: 26px;
}
.toggle-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text);
  flex: 1;
}

.toggle {
  position: relative;
  display: inline-block;
  width: 32px; height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--bg4);
  border: 1px solid var(--border2);
  border-radius: 18px;
  transition: all var(--transition);
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  left: 2px; top: 2px;
  background: var(--text3);
  border-radius: 50%;
  transition: all var(--transition);
}
.toggle input:checked + .toggle-slider { background: var(--accent); border-color: var(--accent); }
.toggle input:checked + .toggle-slider::before { transform: translateX(14px); background: white; }

.seg-control {
  display: flex;
  background: var(--bg4);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
}
.seg-btn {
  flex: 1;
  height: 24px;
  padding: 0 8px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text2);
  font: inherit; font-size: 11.5px; font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.seg-btn.active, .seg-btn:hover { background: var(--bg2); color: var(--text); }
.seg-btn.active { color: var(--accent); font-weight: 600; }

.btn-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.ctrl-btn {
  flex: 1;
  height: 28px;
  padding: 0 8px;
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}
.ctrl-btn:hover { background: var(--bg3); border-color: var(--border2); }
.ctrl-btn.full { width: 100%; flex: none; }
.ctrl-btn.primary { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.ctrl-btn.danger { background: var(--danger-dim); border-color: var(--danger); color: var(--danger); }

.subsection-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text3);
  margin: 14px 0 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.subsection-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* ---- UPLOAD ZONE ---- */
.upload-zone {
  border: 2px dashed var(--border2);
  border-radius: var(--radius);
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  background: var(--bg3);
}
.upload-zone:hover, .upload-zone.drag-over {
  border-color: var(--accent);
  background: var(--accent-dim);
}
.upload-inner p { font-size: 12.5px; color: var(--text2); margin-top: 8px; }
.upload-link {
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--transition);
}
.upload-link:hover { text-decoration-color: var(--accent); }
.upload-hint { font-size: 11px; color: var(--text3); }

.source-canvas {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #000;
  margin-bottom: 10px;
  display: block;
}

.size-readout {
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text2);
  background: var(--bg3);
  border-radius: var(--radius-sm);
  padding: 6px;
  margin-top: 10px;
}

/* ---- PRESET GRID ---- */
.preset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.preset-btn {
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit; font-size: 11.5px; font-weight: 600;
  padding: 8px 6px;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
  line-height: 1.3;
}
.preset-btn span { font-size: 10px; font-weight: 400; color: var(--text3); }
.preset-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

/* ---- VIEWPORT ---- */
.viewport-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #0a1d27;
}

#viewport3d {
  width: 100%;
  height: 100%;
}

#viewport3d canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Viewport toolbar */
.vp-toolbar {
  position: absolute;
  top: 12px;
  left: 12px; right: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.vp-toolbar-left, .vp-toolbar-right {
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(13,31,41,0.88);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 6px;
  pointer-events: all;
  backdrop-filter: blur(8px);
}

.vp-btn {
  display: flex; align-items: center; justify-content: center;
  min-width: 28px; height: 26px;
  padding: 0 6px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text2);
  font: inherit; font-size: 11px; font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
.vp-btn:hover { background: var(--bg4); color: var(--text); }
.vp-btn.active { background: var(--accent-dim); color: var(--accent); }
.vp-sep { width: 1px; height: 16px; background: var(--border); margin: 0 2px; }

.vp-info {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text2);
  padding: 0 6px;
}

/* Loading */
.vp-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(13,31,41,0.72);
  backdrop-filter: blur(4px);
  color: var(--text2);
  font-size: 13px;
  z-index: 20;
}
.vp-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Warnings */
.vp-warnings {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
  pointer-events: none;
}

.warning-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(13,31,41,0.92);
  border: 1px solid;
  border-radius: var(--radius);
  padding: 8px 12px;
  pointer-events: all;
  backdrop-filter: blur(8px);
  animation: slideUp 0.2s ease;
}
@keyframes slideUp { from { opacity:0; transform:translateY(6px); } }

.warning-card.warn { border-color: var(--warn); }
.warning-card.error { border-color: var(--danger); }
.warning-card.info { border-color: var(--accent); }

.warning-icon { font-size: 14px; margin-top: 1px; flex-shrink: 0; }
.warning-body { flex: 1; }
.warning-title { font-size: 12px; font-weight: 600; }
.warning-card.warn .warning-title { color: var(--warn); }
.warning-card.error .warning-title { color: var(--danger); }
.warning-card.info .warning-title { color: var(--accent); }
.warning-desc { font-size: 11.5px; color: var(--text2); margin-top: 2px; }
.warning-fix {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  padding: 3px 8px;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 4px;
  font: inherit; font-size: 11px; font-weight: 600;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity var(--transition);
}
.warning-fix:hover { opacity: 1; }
.warning-card.warn .warning-fix { color: var(--warn); }
.warning-card.error .warning-fix { color: var(--danger); }

/* Empty state */
.vp-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
}
.vp-empty.hidden { display: none; }
.vp-empty-inner {
  text-align: center;
  pointer-events: all;
}
.vp-empty-inner h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text2);
  margin: 16px 0 6px;
}
.vp-empty-inner p { font-size: 13px; color: var(--text3); margin-bottom: 18px; }

.preset-shapes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.shape-preset {
  padding: 8px 16px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text2);
  font: inherit; font-size: 13px;
  cursor: pointer;
  transition: all var(--transition);
}
.shape-preset:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

/* ---- MODAL ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13,31,41,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.15s ease;
}
@keyframes fadeIn { from { opacity: 0; } }

.modal {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 90%;
  max-width: 680px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  animation: scaleIn 0.15s ease;
}
.modal.sm { max-width: 420px; }
@keyframes scaleIn { from { opacity:0; transform:scale(0.96); } }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.modal-header h2 { font-size: 16px; font-weight: 700; }
.modal-close {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg4); border: none; border-radius: 50%;
  color: var(--text2); font-size: 16px; cursor: pointer;
  transition: all var(--transition);
}
.modal-close:hover { background: var(--danger-dim); color: var(--danger); }

/* Mode grid */
.mode-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.mode-card {
  background: var(--bg3);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 10px;
  cursor: pointer;
  text-align: center;
  transition: all var(--transition);
}
.mode-card:hover { border-color: var(--accent); background: var(--accent-dim); }
.mode-card.active { border-color: var(--accent); background: var(--accent-dim); }
.mode-icon { font-size: 22px; margin-bottom: 6px; }
.mode-name { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.mode-desc { font-size: 10.5px; color: var(--text3); line-height: 1.4; }

/* Share modal */
.share-body { }
.share-desc { font-size: 13px; color: var(--text2); margin-bottom: 10px; }
.share-url-row { display: flex; gap: 8px; margin-bottom: 8px; }
.share-url-row .text-input { font-family: var(--mono); font-size: 11.5px; }
.share-url-row .ctrl-btn { flex: 0 0 auto; width: auto; padding: 0 14px; }
.share-note { font-size: 11.5px; color: var(--text3); }

/* ---- TOAST ---- */
.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  box-shadow: var(--shadow);
  z-index: 500;
  animation: toastIn 0.2s ease;
}
.toast.hidden { display: none; }
@keyframes toastIn { from { opacity:0; transform: translateX(-50%) translateY(8px); } }

/* ---- UTILITY ---- */
.hidden { display: none !important; }

/* Scrollbar for viewport warnings */
.vp-warnings::-webkit-scrollbar { width: 3px; }
.vp-warnings::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

/* Source controls */
.source-controls {}

/* ---- RESPONSIVE: collapse sidebar on narrow viewports ---- */
/* Tablets: a narrower sidebar still leaves a usable viewport. Below 860px the
   sidebar becomes a bottom sheet instead - see MOBILE / TOUCH LAYOUT. */
@media (max-width: 1100px) {
  :root { --sidebar-w: 260px; }
}

/* ---- HEIGHT LAYER COLORS ---- */
.layer-0 { color: #5b8cff; }
.layer-1 { color: #a78bfa; }
.layer-2 { color: #3ecf8e; }
.layer-3 { color: #f59e0b; }

/* Crosshair cursor in viewport when adding bridges */
.viewport-container.adding-bridge { cursor: crosshair; }

/* ---- VECTORIZE STATUS ---- */
#vectorizeStatus {
  font-size: 11px;
  color: var(--text3);
  margin-top: 5px;
  text-align: center;
  min-height: 14px;
}

/* ---- SIDEBAR PRESET SHAPES ---- */
.preset-shapes-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}
.shape-preset-sm {
  padding: 4px 8px;
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text2);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.shape-preset-sm:hover,
.shape-preset-sm.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

/* ---- TOOLTIP (for help tips) ---- */
.help-tip {
  position: relative;
}
.help-tip::after {
  content: attr(title);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text);
  white-space: nowrap;
  max-width: 220px;
  white-space: normal;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.help-tip:hover::after { opacity: 1; }

/* ---- ACTIVE STATE FOR TOGGLE CTRL BTNS (Invert, Mirror) ---- */
.ctrl-btn.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

/* ---- MULTI-SHAPE MODAL ---- */
.modal-desc {
  font-size: 13px;
  color: var(--text2);
  margin-bottom: 12px;
  line-height: 1.5;
}

.multi-shape-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.multi-shape-grid .mode-card {
  text-align: left;
  padding: 12px 14px;
}

.multi-shape-grid .mode-name {
  font-size: 13px;
  margin-bottom: 2px;
}

.multi-shape-grid .mode-desc {
  font-size: 11.5px;
  color: var(--text3);
  line-height: 1.4;
  margin: 0;
}

#outlineShapeRow {
  margin-bottom: 4px;
}

/* ---------------------------------------------------- bridge list rows */
/* One editable row per placed bridge (see renderBridgeList in main.js) so a
   design can mix a thick structural bar with thin detail ties. */
.bridge-list { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }

.bridge-row {
  border: 1px solid var(--border, rgba(255, 255, 255, .1));
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .03);
}

.bridge-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
}
.bridge-row-head strong { font-weight: 600; }
.bridge-row-head .field-hint { margin: 0; flex: 1; }

.pricing-summary {
  margin-top: 8px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  line-height: 1.55;
}

.pricing-summary.pricing-out-of-range {
  color: #f0a58e;
  border-color: rgba(240, 165, 142, .35);
  background: rgba(240, 165, 142, .08);
}

.ctrl-btn.xs {
  padding: 2px 7px;
  font-size: 11px;
  line-height: 1.4;
  min-width: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE / TOUCH LAYOUT
   ═══════════════════════════════════════════════════════════════════════════
   The Studio is a three-region desktop app: fixed topbar, 300px settings
   sidebar, and the 3D viewport taking the rest. On a phone that arithmetic
   collapses - the sidebar ate 260 of 375 available pixels, leaving the model
   in a slither too narrow to read, while the topbar's eight labelled buttons
   piled on top of each other.

   The phone layout keeps the model as the whole screen (it is what the
   customer is judging) and moves the settings into a bottom sheet, which is
   the established pattern for editor tools on touch: viewport-first, controls
   summoned. The sheet overlays rather than resizes, so the WebGL canvas never
   has to reflow while it is open.

   Everything below is additive - the desktop layout above is untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Shown only on small screens; hidden here so they never flash on desktop. */
.sheet-head,
.sheet-backdrop,
.mobile-bar { display: none; }

@media (max-width: 860px) {

  /* ---- app shell ---------------------------------------------------------
     dvh, not vh: mobile browser chrome slides away as you scroll, and vh
     measures the *largest* viewport, which pushes the bottom bar off-screen. */
  .app-body {
    height: calc(100vh - var(--topbar-h));
    height: calc(100dvh - var(--topbar-h));
    position: relative;
  }

  /* ---- topbar ------------------------------------------------------------
     Down to the four things that matter in a session: get out, undo, mode,
     and the actions. Everything else moves into the sheet or the bottom bar. */
  .topbar { padding: 0 8px; gap: 4px; }
  .topbar-left { gap: 8px; }
  .logo-text,
  .version-badge,
  .project-name-input { display: none; }
  .topbar-center { gap: 2px; }
  .topbar-right { gap: 2px; }
  /* Labels off, icons on - a 36px tap target instead of a 12px word. */
  .tb-btn { height: 36px; min-width: 36px; padding: 0 8px; }
  .tb-btn-label { padding: 0 8px; font-size: 0; gap: 0; }
  .tb-btn-label svg { font-size: 12px; }
  #btnMode { font-size: 12px; padding: 0 10px; max-width: 42vw; }
  #btnMode #modeLabelText {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* The primary action lives in the bottom bar on mobile, where the thumb is. */
  #btnCart { display: none; }
  .back-link { height: 32px; }

  /* ---- viewport ----------------------------------------------------------- */
  .viewport-container { width: 100%; }

  /* Toolbar wraps to its own scrollable row so a narrow screen never clips the
     view buttons, and the dimension readout sits under it rather than fighting
     for the same line. */
  .vp-toolbar {
    top: 8px; left: 8px; right: 8px;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .vp-toolbar-left {
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: flex-start;
  }
  .vp-toolbar-left::-webkit-scrollbar { display: none; }
  .vp-toolbar-right { align-self: flex-start; }
  .vp-btn { min-width: 34px; height: 32px; }

  /* Leave room for the bottom bar so the empty-state and warnings are not
     hidden behind it. */
  .vp-empty { padding-bottom: 84px; }
  .vp-warnings { bottom: 84px; }

  /* ---- settings sheet ----------------------------------------------------- */
  .sidebar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 78dvh;
    max-height: 78dvh;
    border-right: none;
    border-top: 1px solid var(--border2);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 50px rgba(0,0,0,0.55);
    transform: translateY(100%);
    transition: transform 0.26s cubic-bezier(.32,.72,0,1);
    z-index: 200;
    /* Never sits under the iOS home indicator. */
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sidebar.sheet-open { transform: none; }

  .sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px 10px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
  }
  .sheet-grip {
    position: absolute;
    top: 6px; left: 50%;
    transform: translateX(-50%);
    width: 38px; height: 4px;
    border-radius: 4px;
    background: var(--border2);
  }
  .sheet-title { font-size: 13px; font-weight: 700; padding-top: 6px; }
  .sheet-close {
    height: 32px; padding: 0 14px;
    background: var(--bg4);
    border: 1px solid var(--border);
    border-radius: 16px;
    color: var(--text);
    font: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer;
    margin-top: 6px;
  }

  .sidebar-scroll {
    /* Scrolling the panels must not drag the page behind the sheet. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 24px;
  }

  .sheet-backdrop {
    display: block;
    position: fixed;
    inset: var(--topbar-h) 0 0;
    background: rgba(13,31,41,0.55);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.26s ease;
    z-index: 199;
  }
  .sheet-backdrop.visible { opacity: 1; pointer-events: all; }

  /* ---- bottom action bar --------------------------------------------------
     Primary action within thumb reach, and the way back into the settings. */
  .mobile-bar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--bg2) 72%, rgba(21,49,61,0));
    z-index: 150;
  }
  .mobile-bar-btn {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 7px;
    height: 46px;
    background: var(--bg4);
    border: 1px solid var(--border2);
    border-radius: 23px;
    color: var(--text);
    font: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer;
  }
  .mobile-bar-btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #15313D;
    font-weight: 700;
  }
  .mobile-bar-btn:active { transform: scale(.985); }
  /* While the sheet is up the bar would just cover its controls. */
  body.sheet-is-open .mobile-bar { display: none; }

  /* ---- modals -------------------------------------------------------------
     Bottom-anchored like the sheet, full width, and never taller than the
     visible viewport. */
  .modal-overlay { align-items: flex-end; }
  .modal, .modal.sm {
    width: 100%;
    max-width: 100%;
    max-height: 90dvh;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0;
    border-left: none; border-right: none; border-bottom: none;
  }
  .modal-header { margin-bottom: 14px; }
  .modal-close { width: 34px; height: 34px; font-size: 20px; }
  .mode-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .mode-card { padding: 12px 8px; }
  .export-dropdown { min-width: 200px; }
  .export-item { padding: 11px 12px; }

  /* ---- touch-friendly controls ------------------------------------------- */
  .panel-header { padding: 13px 14px; }
  .ctrl-btn { min-height: 36px; }
  .num-input, .text-input, .select-input { min-height: 36px; }
  .slider { height: 22px; }
  .shape-preset-sm { padding: 7px 11px; font-size: 12px; }
  /* Hover-only help tooltips are unreachable on touch - the title attribute
     still carries the text for assistive tech. */
  .help-tip::after, .help-tip::before { display: none; }
}

/* Very small phones: the mode label is the first thing to go. */
@media (max-width: 400px) {
  #btnMode #modeLabelText { display: none; }
  .vp-btn { min-width: 32px; }
}

/* Landscape phone: height is the scarce axis, so the settings come in from the
   side instead of the bottom - a 78dvh sheet would bury the model entirely -
   and the action bar shrinks to sit in the corner rather than banding the
   whole width. */
@media (max-width: 900px) and (max-height: 520px) {
  .sidebar {
    top: var(--topbar-h);
    bottom: 0;
    left: auto; right: 0;
    width: min(340px, 82vw);
    height: auto;
    max-height: none;
    border-radius: 16px 0 0 16px;
    border-top: none;
    border-left: 1px solid var(--border2);
    box-shadow: -18px 0 50px rgba(0,0,0,0.55);
    transform: translateX(100%);
  }
  .sidebar.sheet-open { transform: none; }
  .sheet-grip { display: none; }
  .sheet-title { padding-top: 0; }
  .sheet-close { margin-top: 0; }
  .mobile-bar {
    left: auto;
    width: auto;
    gap: 6px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: none;
  }
  .mobile-bar-btn { flex: 0 0 auto; height: 40px; padding: 0 16px; }
  .vp-empty { padding-bottom: 64px; }
}