:root {
  /* Light theme: the page and every panel are white. Only the area BEHIND the white
     board (.canvas-area) stays black, so the artwork stands out. */
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-2: #f3f5f9;
  --border: #dde1ea;
  --text: #1b1f2a;
  --text-dim: #667085;
  --accent: #ff3b6b;
  --accent-2: #ffd84d;
  --accent-text: #b45309;   /* readable amber for headings on white (yellow is not) */
  --success: #4cd97b;
  --danger: #ff5757;
  --shadow: 0 4px 16px rgba(16,24,40,.14);
}

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

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: auto;
  user-select: none;
}

/* ============== TOPBAR ============== */
.topbar {
  height: 56px;
  background: linear-gradient(135deg, #ffffff 0%, #f4f6fb 100%);
  border-bottom: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 100;
  position: relative;
}
.brand { display: flex; align-items: center; gap: 12px; }
.logo {
  font-size: 28px;
  filter: drop-shadow(0 0 8px rgba(255,59,107,.5));
}
.brand h1 {
  font-family: 'Bangers', sans-serif;
  font-size: 24px;
  letter-spacing: 2px;
  color: var(--text);
}
.brand h1 span {
  color: var(--accent);
  text-shadow: 2px 2px 0 var(--accent-2);
}

.topbar-actions { display: flex; gap: 8px; align-items: center; }
.topbar-actions button,
.topbar-btn {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.topbar-actions button:hover, .topbar-btn:hover {
  background: var(--panel-2);
  border-color: var(--accent);
}
.topbar-actions button.primary {
  background: linear-gradient(135deg, var(--accent), #d92e5a);
  border-color: var(--accent);
  font-weight: 700;
}
.topbar-actions button.primary:hover {
  background: linear-gradient(135deg, #ff5783, var(--accent));
  box-shadow: 0 0 16px rgba(255,59,107,.4);
}

/* ============== WORKSPACE ============== */
.workspace {
  display: grid;
  grid-template-columns: 280px 1fr 300px;
  height: calc(100vh - 56px);
}

.sidebar {
  background: var(--panel);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 16px;
}
.sidebar.right { border-right: none; border-left: 1px solid var(--border); }
.sidebar h2 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.panel {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 14px;
}
.panel h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-text);
  margin-bottom: 10px;
}
.hint {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 8px;
}

/* ============== ROW LAYOUTS ============== */
.row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  font-size: 12px;
}
.row label {
  flex-shrink: 0;
  color: var(--text-dim);
  min-width: 60px;
}
.row.split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.row.split > div label {
  display: block;
  font-size: 11px;
  margin-bottom: 4px;
}
.row.btn-row { display: flex; flex-wrap: wrap; gap: 6px; }
.row.btn-row button {
  flex: 1;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all .15s;
}
.row.btn-row button:hover { background: var(--accent); border-color: var(--accent); }
.row.btn-row button.danger:hover { background: var(--danger); border-color: var(--danger); }
.toggle-btn { font-weight: bold; }
.toggle-btn.active { background: var(--accent) !important; border-color: var(--accent) !important; color: white; }

input[type="text"], input[type="number"], select, textarea {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
  width: 100%;
}
input[type="number"] { width: 80px; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255,59,107,.2);
}
textarea { resize: vertical; font-family: 'Comic Neue', sans-serif; }
input[type="color"] {
  width: 40px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
}
input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  height: 4px;
  background: var(--panel);
  border-radius: 2px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
}
input[type="checkbox"] { accent-color: var(--accent); }

.upload-btn {
  display: block;
  background: linear-gradient(135deg, var(--accent), #d92e5a);
  color: white;
  text-align: center;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 8px;
  transition: all .15s;
}
.upload-btn:hover { box-shadow: 0 0 16px rgba(255,59,107,.4); }
.ghost {
  background: transparent;
  color: var(--text-dim);
  border: 1px dashed var(--border);
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  width: 100%;
  margin-bottom: 8px;
}
.ghost:hover { color: var(--text); border-color: var(--accent); }
.ghost.has-image {
  color: var(--accent);
  border-color: var(--accent);
  border-style: solid;
  background: rgba(255, 59, 107, 0.1);
}

/* ============== BUBBLE GRID ============== */
.bubble-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.bubble-btn {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--text);
  transition: all .15s;
}
.bubble-btn:hover {
  border-color: var(--accent);
  background: var(--panel-2);
  transform: translateY(-2px);
}
.bubble-btn svg {
  width: 100%;
  height: 36px;
  background: white;
  border-radius: 4px;
}
.bubble-btn span {
  font-size: 10px;
  color: var(--text-dim);
}
.custom-image-btn { cursor: pointer; }
.custom-image-btn:hover {
  border-color: var(--accent);
  background: var(--panel-2);
  transform: translateY(-2px);
}
.bubble-grid.sfx { grid-template-columns: repeat(2,1fr); }
.sfx-btn {
  background: var(--panel);
  color: var(--accent-text);
  border: 1px solid var(--border);
  font-family: 'Bangers', sans-serif;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 10px 4px;
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s;
}
.sfx-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: scale(1.05);
}

/* ============== CANVAS AREA ============== */
.canvas-area {
  background:
    repeating-conic-gradient(#000000 0% 25%, #0d0e12 0% 50%) 0 0/24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.canvas-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  /* Deliberately START-aligned, not centred: the stage is sized by JS to at least
     the wrapper's content box and the board is centred inside it, so centring here
     is redundant — and when the stage is LARGER than the wrapper (zoomed in) flex
     centring resolves to negative offsets whose left/top overflow is excluded from
     scrollWidth/scrollHeight, permanently hiding part of the board. */
  align-items: flex-start;
  justify-content: flex-start;
  overflow: auto;
  /* --fit-pad controls the effective padding area. JS reads this value in fitZoom()
     to calculate available canvas space. Set to 0 here (base rule), overridden in
     media queries so mobile gets more breathing room without double-padding. */
  --fit-pad: 0;
  padding: calc(var(--fit-pad) * 1);
  /* GPU acceleration for smooth scroll/zoom */
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
}
/* Scaled footprint of the board. JS (syncStageSize) keeps this box at
   max(canvasW*zoom, wrapper content width) x max(canvasH*zoom, wrapper content
   height) and positions .canvas centred inside it, so the wrapper's scrollable
   area always matches what is actually visible: no phantom overflow when zoomed
   out, exact 1:1 scrolling with nothing out of reach when zoomed in. */
.canvas-stage {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
}
.canvas {
  /* Absolute inside .canvas-stage and anchored top-left, so the scaled board
     exactly fills the stage box. Bubbles are absolutely positioned children, so
     they keep using canvas-logical coordinates. */
  position: absolute;
  top: 0;
  left: 0;
  width: 1024px;
  height: 1024px;
  /* FIX (mobile): .canvas must never be shrunk by layout — fitZoom() sizes it via
     transform:scale(), which is uniform and keeps the aspect ratio intact. A
     layout-squeezed board desynced state.canvasW from the real width, so
     getSpawnCenter() / clampBubbleToCanvas() computed different x/y scales and
     dropped new bubbles outside the white board. */
  flex: 0 0 auto;
  background: white;
  background-size: cover;
  background-position: center;
  /* Clip to the board, exactly like the exported image does. A bubble's DOM box is
     padded by tailLen on every side, so a bubble sitting against the edge used to
     stick out past the board — which both looked wrong next to the export and added
     that overhang to the wrapper's scrollable area, bringing back a sliver of
     horizontal scroll. */
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--border), 0 10px 40px rgba(0,0,0,.5);
  transform-origin: top left;
  will-change: transform;
  cursor: default;
}
.canvas.has-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,59,107,.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,59,107,.15) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
}
.canvas-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #aaa;
  pointer-events: none;
}
.canvas-placeholder .ph-icon { font-size: 60px; margin-bottom: 16px; opacity: .4; }
.canvas-placeholder h2 { font-size: 22px; margin-bottom: 8px; color: #555; }
.canvas-placeholder p { font-size: 14px; color: #888; }

.canvas-controls {
  height: 44px;
  width: 100%;
  background: var(--panel);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
}
.canvas-controls button {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.canvas-controls button:hover { background: var(--accent); border-color: var(--accent); }
.canvas-controls .sep { width: 1px; height: 20px; background: var(--border); }
.canvas-controls .check-row {
  font-size: 12px; color: var(--text-dim); display:flex; align-items:center; gap:5px;
  cursor: pointer;
}
#zoomLabel { font-size: 12px; color: var(--text-dim); min-width: 50px; text-align: center; }


/* ============== BUBBLE ELEMENTS ============== */
.bubble {
  position: absolute;
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
  overflow: visible;
  will-change: transform;
  /* FIX (mobile issue 3): allow our own pointer-event handlers to receive
     drag/pinch/scroll gestures rather than the browser scrolling the page. */
  touch-action: none;
  -ms-touch-action: none;
}
/* Do not force svg to 100% of body box: viewBox includes tail margin (±tailLen).
   Stretching to b.w×b.h scales the whole graphic when tail length changes. */
.bubble svg {
  overflow: visible;
  pointer-events: none;
  display: block;
}
.bubble svg path,
.bubble svg ellipse,
.bubble svg rect,
.bubble svg circle {
  pointer-events: auto;
}
/* FIX (issue 1, 3, 7): selection rectangle is its own element sized to the bubble BODY,
   not the element's bounding box (which includes tail padding). This way the dashed
   outline matches the visible bubble exactly and does NOT grow when tail length changes.
   FIX (issue 5): the overlay is a sibling of the content wrapper that mirrors the SAME
   rotation/flip transform, so selection rect + handles rotate together with the bubble.
   FIX (issue 2): the overlay sits OUTSIDE the content wrapper, so opacity applied to the
   visual content does NOT fade the selection rect, control points, or tail-target dot. */
.bubble.selected { /* element no longer carries the outline */ }
.bubble .bubble-overlay {
  /* Inherits position/transform from inline styles — declared so it can host handles */
}
.bubble .selection-rect {
  border: 2px dashed var(--accent);
  border-radius: 2px;
  box-sizing: border-box;
  z-index: 999;
}
.bubble .bubble-text {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14% 16%;
  font-family: 'Comic Neue', sans-serif;
  font-size: 22px;
  line-height: 1.15;
  color: black;
  word-break: break-word;
  overflow: hidden;
  pointer-events: none;
  white-space: pre-wrap;
}
.bubble[data-type="narration"] .bubble-text { padding: 8% 10%; text-align: left; }
.bubble[data-type="scream"] .bubble-text,
.bubble[data-type="explosion"] .bubble-text {
  font-family: 'Bangers', sans-serif;
  letter-spacing: 1px;
}
.bubble.editing .bubble-text {
  pointer-events: auto;
  outline: none;
  user-select: text;
  cursor: text;
}
.bubble.vertical .bubble-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

/* SFX text */
.sfx-text {
  position: absolute;
  cursor: move;
  user-select: none;
  white-space: nowrap;
  transform-origin: center center;
  will-change: transform;
  /* FIX (mobile issue 3): same touch-action override as regular bubbles. */
  touch-action: none;
  -ms-touch-action: none;
}
.sfx-text .sfx-content { transform-origin: center center; }
/* FIX (issue 4): selection outline lives on the rotating overlay so it rotates with the text. */
.sfx-text.selected .sfx-overlay {
  outline: 2px dashed var(--accent);
  outline-offset: 6px;
}

/* FIX (issue 2): styling for the plain-text Default SFX button. */
.sfx-btn.sfx-default {
  background: linear-gradient(135deg, #f3f5f9, #e6e9f1);
  color: var(--text);
  font-family: 'Comic Neue', sans-serif;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.5px;
  border: 1px dashed var(--text-dim);
}
.sfx-btn.sfx-default:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Resize Handles */
.handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--accent);
  border: 2px solid white;
  border-radius: 50%;
  pointer-events: auto;
  z-index: 1000;
  /* FIX (mobile issue 3): prevent browser from intercepting touch gestures (pan/zoom)
     when interacting with handles, so drag/resize/rotate work reliably on touch. */
  touch-action: none;
  -ms-touch-action: none;
}
/* FIX (mobile issue 3): invisible expanded hit area around every handle so fingers
   can grab them easily on touch screens. The visual size stays 12px on PC. */
.handle::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}
.handle.tl { cursor: nwse-resize; }
.handle.tr { cursor: nesw-resize; }
.handle.bl { cursor: nesw-resize; }
.handle.br { cursor: nwse-resize; }
.handle.tm { cursor: ns-resize; }
.handle.bm { cursor: ns-resize; }
.handle.lm { cursor: ew-resize; }
.handle.rm { cursor: ew-resize; }
.handle.rotate {
  background: var(--success);
  cursor: grab;
}
.handle.tail-target {
  background: #4cd97b;
  width: 14px;
  height: 14px;
  cursor: move;
  border: 2px solid white;
  z-index: 1001;
}

/* ============== EMPTY STATE / TOAST ============== */
.empty-state {
  text-align: center;
  padding: 30px 20px;
  color: var(--text-dim);
  font-size: 13px;
}
.empty-state p { margin: 8px 0; }

.toast {
  position: fixed;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--panel-2);
  color: var(--text);
  padding: 12px 24px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  box-shadow: var(--shadow);
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: all .3s;
  z-index: 9999;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============== HELP MODAL ============== */
.help-fab {
  position: fixed;
  /* The Oualator feature pop-up button sits in the bottom-right corner (about 76px
     tall), so the "?" is lifted above it and centred over it. */
  bottom: 120px;
  right: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  border: none;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: var(--shadow);
  z-index: 90;
}
.help-fab:hover { background: #ff5783; transform: scale(1.1); }

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 30px;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
}
.modal-card h2 {
  font-family: 'Bangers', sans-serif;
  font-size: 28px;
  letter-spacing: 1px;
  color: var(--accent);
  margin-bottom: 16px;
}
.modal-card h3 {
  margin-top: 16px;
  margin-bottom: 8px;
  color: var(--accent-text);
  font-size: 13px;
  text-transform: uppercase;
}
.modal-card ul { list-style: none; padding-left: 0; }
.modal-card li {
  padding: 6px 0;
  font-size: 13px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.modal-card kbd {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 6px;
  font-family: monospace;
  font-size: 11px;
  margin: 0 2px;
}
.modal-card button {
  margin-top: 20px;
  padding: 10px 20px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  width: 100%;
}

/* ============== HALFTONE ============== */
.halftone-pattern {
  background-image: radial-gradient(circle, rgba(0,0,0,.3) 1px, transparent 1.5px);
  background-size: 6px 6px;
}

/* Scrollbar */
.sidebar::-webkit-scrollbar, .canvas-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
.sidebar::-webkit-scrollbar-track, .canvas-wrap::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb, .canvas-wrap::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.sidebar::-webkit-scrollbar-thumb:hover, .canvas-wrap::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ============================================================================
   EDUCATIONAL SECTION — 2ND FOLD (below the tool)
   ============================================================================ */
.edu-section {
  background: var(--bg);
  padding: 60px 20px 80px;
  border-top: 1px solid var(--border);
}

.edu-container {
  max-width: 1100px;
  margin: 0 auto;
}

.edu-header {
  text-align: center;
  margin-bottom: 50px;
}

.edu-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent), #d92e5a);
  color: white;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.edu-header h2 {
  font-family: 'Bangers', sans-serif;
  font-size: 42px;
  letter-spacing: 2px;
  color: var(--text);
  margin-bottom: 12px;
  text-shadow: 2px 2px 0 var(--accent);
}

.edu-header p {
  font-size: 16px;
  color: var(--text-dim);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Cards */
.edu-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-bottom: 30px;
  overflow: hidden;
}

.edu-card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 28px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}

.edu-icon {
  font-size: 24px;
  filter: drop-shadow(0 0 6px rgba(255,59,107,.4));
}

.edu-card-body {
  padding: 28px;
}

.edu-card-body p {
  font-size: 14px;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 12px;
}

.edu-card-body p:last-child {
  margin-bottom: 0;
}

/* Visual bubble demo */
.edu-visual {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.edu-bubble-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.edu-bubble-demo svg {
  width: 80px;
  height: 60px;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,.3));
}

.edu-bubble-demo span {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 600;
}

/* Comparison */
.edu-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  margin-top: 8px;
}

.edu-compare-col {
  padding: 20px;
  border-radius: 12px;
}

.edu-compare-col.edu-manga {
  background: rgba(255,59,107,.08);
  border: 1px solid rgba(255,59,107,.2);
}

.edu-compare-col.edu-comic {
  background: rgba(255,216,77,.08);
  border: 1px solid rgba(255,216,77,.2);
}

.edu-compare-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.edu-compare-header span {
  font-size: 24px;
}

.edu-compare-header h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.edu-compare-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.edu-compare-col li {
  font-size: 13px;
  color: var(--text);
  padding: 6px 0;
  border-bottom: none;
  line-height: 1.5;
}

.edu-compare-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}

.edu-compare-divider span {
  background: var(--panel-2);
  border: 2px solid var(--border);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  color: var(--text-dim);
}

/* Typography grid */
.edu-typo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.edu-typo-item {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}

.edu-typo-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-text);
  font-weight: 700;
  margin-bottom: 6px;
}

.edu-typo-item p {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0;
}

.edu-typo-preview {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 20px;
  background: var(--panel-2);
  border-radius: 10px;
  border: 1px solid var(--border);
}

.edu-sample {
  font-size: 18px;
  padding: 8px 16px;
  background: white;
  border-radius: 6px;
  color: #333;
}

/* Features grid */
.edu-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.edu-feature {
  display: flex;
  gap: 14px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  transition: border-color .15s;
}

.edu-feature:hover {
  border-color: var(--accent);
}

.edu-feature-icon {
  font-size: 28px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(255,216,77,.3));
}

.edu-feature-info strong {
  display: block;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 4px;
}

.edu-feature-info p {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .edu-section {
    padding: 40px 16px 60px;
  }

  .edu-header h2 {
    font-size: 30px;
  }

  .edu-card-title {
    font-size: 16px;
    padding: 16px 20px;
  }

  .edu-card-body {
    padding: 20px;
  }

  .edu-visual {
    gap: 16px;
    flex-wrap: wrap;
  }

  .edu-bubble-demo svg {
    width: 60px;
    height: 45px;
  }

  .edu-compare {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .edu-compare-divider {
    padding: 0;
  }

  .edu-compare-divider span {
    width: 36px;
    height: 36px;
    font-size: 11px;
  }

  .edu-typo-grid,
  .edu-features {
    grid-template-columns: 1fr;
  }

  .edu-typo-preview {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .edu-sample {
    font-size: 16px;
  }
}

/* ============================================================================
   HELP MODAL — ENHANCED CONTENT
   ============================================================================ */
.modal-card > p {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  margin-top: 6px;
}

/* Comparison grid (Manga vs Comic) */
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
.compare-col {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}
.compare-col h4 {
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 8px;
  font-weight: 700;
}
.compare-col ul { list-style: none; padding: 0; margin: 0; }
.compare-col li {
  font-size: 12px;
  color: var(--text);
  padding: 4px 0;
  border-bottom: none;
  line-height: 1.4;
}

/* Features grid */
.features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}
.feature-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.feature-card strong {
  font-size: 12px;
  color: var(--accent-text);
  font-weight: 700;
}
.feature-card span {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* Shortcuts list */
.shortcuts-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 20px;
}
.shortcuts-list li {
  border-bottom: none;
  padding: 4px 0;
}

/* ============================================================================
   RESPONSIVE LAYOUT
   ============================================================================
   FIX (mobile issue 2): comprehensive mobile/tablet support that does NOT touch
   the desktop layout above. The base styles still drive PC view exactly as
   before — every override here lives inside a @media block. */

/* Mobile-only buttons (hamburger + properties) and backdrop are hidden by
   default; only revealed on small viewports. */
/* FIX (desktop): `.topbar-actions button` (0,1,1) outranks `.mobile-toggle` (0,1,0),
   so the ⚙️ properties toggle — which lives inside .topbar-actions — kept that rule's
   `display: inline-flex` and stayed visible next to Undo/Redo on PC. The ☰ hamburger
   sits in .brand instead, which is why only the gear leaked through. Matching the
   specificity here (and in the two media queries that reveal it) settles it without
   resorting to !important. */
.topbar-actions button.mobile-toggle { display: none; }
.mobile-toggle {
  display: none;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

/* FIX (mobile): mobile-only File & Export panel inside the bubble library drawer.
   Hidden on desktop where these actions live in the topbar instead. */
.mobile-actions-panel { display: none; }
.mobile-actions-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.mobile-action-btn {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 10px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 38px;
  transition: all .15s;
}
.mobile-action-btn:hover {
  background: var(--panel-2);
  border-color: var(--accent);
}
.mobile-action-btn.primary {
  background: linear-gradient(135deg, var(--accent), #d92e5a);
  border-color: var(--accent);
  color: white;
  font-weight: 700;
}
.mobile-action-btn.primary:hover {
  background: linear-gradient(135deg, #ff5783, var(--accent));
  box-shadow: 0 0 12px rgba(255,59,107,.4);
}
.mobile-toggle:hover { border-color: var(--accent); }
.mobile-backdrop {
  display: none;
  position: fixed;
  inset: var(--tb-bottom, 56px) 0 0 0;
  background: rgba(0,0,0,.5);
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.mobile-backdrop.show {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* Tablet — keep three-column layout but tighten the sidebars. */
@media (max-width: 1100px) {
  .workspace { grid-template-columns: 240px 1fr 260px; }
  .canvas-wrap { --fit-pad: 16px; }
}

/* Small tablet / phablet — collapse to single-column slide-in drawers like phones,
   so the canvas owns the full viewport and the white board scales up properly.
   FIX (mobile/tablet): previously this range kept three tight columns which made the
   canvas tiny on iPad / large phablets. Switching to drawers gives the canvas the
   full width — same UX pattern as phones. PC layout above is untouched. */
@media (max-width: 960px) and (min-width: 769px) {
  .topbar-actions button, .topbar-btn { padding: 6px 10px; font-size: 12px; }
  .panel { padding: 10px; margin-bottom: 10px; }
  .bubble-grid { grid-template-columns: repeat(3, 1fr); }
  .canvas-wrap { --fit-pad: 8px; }
  /* Single-column workspace so canvas fills viewport */
  .workspace {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: calc(100vh - 56px);
    height: calc(100dvh - 56px);
  }
  /* Sidebars become slide-in overlays on tablet too */
  .sidebar {
    position: fixed;
    top: var(--tb-bottom, 56px);
    bottom: 0;
    width: 60%;
    max-width: 360px;
    background: var(--panel);
    z-index: 90;
    transform: translateX(-105%);
    transition: transform .25s ease;
    box-shadow: 4px 0 20px rgba(16,24,40,.18);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-right: 1px solid var(--border);
    border-left: none;
    max-height: none;
  }
  .sidebar.right {
    left: auto;
    right: 0;
    transform: translateX(105%);
    border-right: none;
    border-left: 1px solid var(--border);
    box-shadow: -4px 0 20px rgba(16,24,40,.18);
  }
  .sidebar.left.open,
  .sidebar.right.open { transform: translateX(0); }
  .canvas-area { grid-column: 1; grid-row: 1; width: 100%; min-height: 0; height: 100%; }
  .canvas-wrap { min-height: 0; }
  /* Show the mobile-only toggle buttons on tablets too */
  .mobile-toggle,
  .topbar-actions button.mobile-toggle { display: inline-flex; align-items: center; justify-content: center; }
}

/* ============================================================================
   MOBILE — phones / narrow viewports (<= 768px)
   ============================================================================
   Single-column layout: canvas takes the full viewport, sidebars become slide-in
   overlays activated by the topbar toggle buttons. PC layout above is untouched. */
@media (max-width: 768px) {
  /* Allow page-level scroll if a panel ever overflows */
  html, body { overflow: auto; -webkit-text-size-adjust: 100%; }

  /* --- TOPBAR --- shrink + scroll horizontally if action buttons overflow */
  .topbar {
    height: 52px;
    padding: 0 10px;
    gap: 8px;
  }
  .brand { gap: 8px; flex-shrink: 0; }
  .brand h1 { font-size: 18px; letter-spacing: 1px; }
  .brand h1 span { display: inline; }
  .logo { font-size: 22px; }
  .topbar-actions {
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    max-width: 60vw;
  }
  .topbar-actions::-webkit-scrollbar { display: none; }
  .topbar-actions button,
  .topbar-btn {
    padding: 6px 10px;
    font-size: 12px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  /* Show the mobile-only toggle buttons */
  .mobile-toggle,
  .topbar-actions button.mobile-toggle { display: inline-flex; align-items: center; justify-content: center; }

  /* FIX (mobile): hide the desktop-only topbar action buttons (Clear/Save/Load/Export)
     on phones — these are accessible from the bubble library drawer instead. */
  .desktop-only-btn { display: none !important; }

  /* FIX (mobile): Undo / Redo collapse to their icons. With the labels gone the
     three remaining topbar buttons fit any phone width, so the actions row no
     longer scrolls horizontally. The accessible name lives on aria-label. */
  .btn-label { display: none; }
  #undoBtn, #redoBtn { min-width: 34px; font-size: 15px; line-height: 1; padding: 6px 8px; }

  /* FIX (mobile): show the File & Export panel inside the drawer on mobile. */
  .mobile-actions-panel { display: block; }

  /* --- WORKSPACE --- single column, canvas owns the screen */
  .workspace {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: calc(100vh - 52px);
    height: calc(100dvh - 52px); /* dynamic vh for mobile browsers */
  }

  /* --- SIDEBARS --- become slide-in overlays */
  .sidebar {
    position: fixed;
    top: var(--tb-bottom, 52px);
    bottom: 0;
    width: 86%;
    max-width: 320px;
    background: var(--panel);
    z-index: 90;
    transform: translateX(-105%);
    transition: transform .25s ease;
    box-shadow: 4px 0 20px rgba(16,24,40,.18);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-right: 1px solid var(--border);
    border-left: none;
    max-height: none;
  }
  .sidebar.right {
    left: auto;
    right: 0;
    transform: translateX(105%);
    border-right: none;
    border-left: 1px solid var(--border);
    box-shadow: -4px 0 20px rgba(16,24,40,.18);
  }
  .sidebar.left.open,
  .sidebar.right.open { transform: translateX(0); }

  /* --- CANVAS AREA --- always visible, fills remaining space.
     FIX (mobile issue 1): the canvas area must always render the white board even
     when no background image is uploaded, and it should fill the available viewport
     so the 1024x1024 (1:1) default canvas scales down via fitZoom to fit width. */
  .canvas-area {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-height: 0;        /* allow flex/grid child to shrink */
    height: 100%;
      }
  .canvas-wrap {
    padding: calc(var(--fit-pad) * 1);
    /* Make sure the canvas wrapper actually owns the remaining height so the
       white board is visible 1:1 on screen. */
    min-height: 0;
    /* --fit-pad controls effective padding area so fitZoom() accounts for it.
       FIX (mobile): trimmed from 10px to 6px so the white board scales up to fill
       almost the entire viewport on phones, matching the user's expectation. */
    --fit-pad: 6px;
    /* FIX (touch): browser must not hijack one-finger pans / pinch on the canvas
       area — our pointerdown handlers manage drag, resize, rotate. */
    touch-action: none;
    -ms-touch-action: none;
  }
  /* FIX (touch): same on the canvas itself so the wrapper doesn't intercept the
     gesture before our handlers see it. */
  .canvas { touch-action: none; -ms-touch-action: none; }

  /* --- HANDLES --- bigger and easier to tap on touch screens.
     FIX (mobile issue 3): visual size grows slightly and the invisible hit area
     around every handle expands so fingers can reliably grab them. */
  .handle { width: 14px; height: 14px; border-width: 2px; }
  .handle.tail-target { width: 18px; height: 18px; }
  .handle::before { inset: -14px; }

  /* --- CANVAS CONTROLS --- compact + scrollable */
  .canvas-controls {
    height: auto;
    min-height: 40px;
    padding: 6px 8px;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .canvas-controls::-webkit-scrollbar { display: none; }
  .canvas-controls button {
    padding: 6px 10px;
    font-size: 12px;
    flex-shrink: 0;
    min-width: 36px;
    min-height: 32px;
  }
  .canvas-controls .check-row { flex-shrink: 0; white-space: nowrap; }

  /* --- TOUCH-FRIENDLY TARGETS --- bigger taps for buttons & form controls */
  .row.btn-row button,
  .toggle-btn { min-height: 36px; font-size: 13px; }
  input[type="text"], input[type="number"], select, textarea {
    font-size: 14px; /* prevents iOS Safari zoom-on-focus */
    padding: 8px 10px;
  }
  input[type="color"] { width: 44px; height: 32px; }
  input[type="range"] { height: 6px; }
  input[type="range"]::-webkit-slider-thumb { width: 18px; height: 18px; }

  /* --- BUBBLE GRID --- 3-up still works on phones */
  .bubble-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .bubble-grid.sfx { grid-template-columns: repeat(2, 1fr); }
  .bubble-btn { padding: 10px 4px; }
  .bubble-btn svg { height: 40px; }

  /* --- HELP FAB --- nudge above canvas controls so it never overlaps */
  .help-fab {
    bottom: 112px;
    right: 28px;
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  /* --- HELP MODAL --- full-width on tiny screens */
  .modal-card {
    margin: 12px;
    padding: 20px;
    max-height: 85vh;
  }
  .modal-card h2 { font-size: 22px; }

  /* --- TOAST --- nudge above canvas controls */
  .toast { bottom: 90px; font-size: 12px; padding: 10px 18px; }
}

/* Extra-small phones (<= 380px): trim brand text further so the topbar fits. */
@media (max-width: 380px) {
  .brand h1 { font-size: 14px; }
  .brand h1 span { display: none; }
  .topbar-actions { max-width: 50vw; }
  .topbar-actions button,
  .topbar-btn { padding: 5px 8px; font-size: 11px; }
  .sidebar { width: 92%; }
}

/* Landscape phones — keep canvas usable when keyboard / URL bar is hidden. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .topbar { height: 44px; }
  .workspace { height: calc(100vh - 44px); height: calc(100dvh - 44px); }
  .sidebar { top: var(--tb-bottom, 44px); }
  .brand h1 { font-size: 16px; }
  .canvas-controls { min-height: 34px; padding: 4px 8px; }
}

/* FIX (mobile issue 3): coarse-pointer override for touch devices that aren't
   strictly under 768px wide (tablets in landscape, large phones, hybrids).
   PC mice register as `pointer: fine` so this rule never matches on desktop —
   PC layout above stays untouched. */
@media (pointer: coarse) {
  .handle { width: 16px; height: 16px; }
  .handle.tail-target { width: 20px; height: 20px; }
  .handle::before { inset: -14px; }
  .bubble, .sfx-text, .handle { touch-action: none; }
  /* FIX (touch): canvas + wrapper must not let the browser steal one-finger pans /
     double-tap zoom on touch devices, otherwise drag and double-tap-to-edit fail. */
  .canvas-wrap, .canvas { touch-action: none; -ms-touch-action: none; }
  /* FIX (touch): kill the iOS tap-flash highlight on bubbles for a cleaner feel. */
  .bubble, .sfx-text, .handle, .bubble-btn, .sfx-btn,
  .topbar-actions button, .canvas-controls button {
    -webkit-tap-highlight-color: transparent;
  }
}

/* FIX (mobile issue 5): mobile-only block inside the help modal. Hidden on PC. */
.mobile-only-help { display: none; }
@media (max-width: 768px), (pointer: coarse) {
  .mobile-only-help { display: block; }

  /* Help modal grids stack on mobile */
  .comparison-grid,
  .features-grid { grid-template-columns: 1fr; }
  .shortcuts-list { grid-template-columns: 1fr; }
}

/* ============================================================================
   OUALATOR PAGE CHROME — breadcrumb, how-to list and FAQ (added with the rebrand)
   ============================================================================ */
.site-crumbs, .edu-section { user-select: text; -webkit-user-select: text; }
.site-crumbs {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 8px 20px;
  font-size: 13px;
}
.site-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.site-crumbs li { color: var(--text-dim); }
.site-crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--text-dim); }
.site-crumbs a { color: var(--text-dim); text-decoration: none; }
.site-crumbs a:hover { color: var(--accent); }
.site-crumbs [aria-current="page"] span { color: var(--text); font-weight: 600; }

.howto-list { list-style: none; counter-reset: step; display: grid; gap: 14px; }
.howto-list li {
  counter-increment: step;
  position: relative;
  padding-left: 46px;
}
.howto-list li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #d92e5a);
  color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.howto-list strong { display: block; color: var(--text); margin-bottom: 2px; }
.howto-list p { color: var(--text-dim); line-height: 1.6; }

.faq-item {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 10px;
}
.faq-item summary { cursor: pointer; font-weight: 600; color: var(--text); }
.faq-item[open] summary { color: var(--accent); }
.faq-item p { margin-top: 10px; color: var(--text-dim); line-height: 1.65; }