:root{
  --paper:#EDE6D6;
  --paper-deep:#E4DCC8;
  --card-bg:#F7F2E7;
  --ink:#23222A;
  --ink-soft:#5B5762;
  --pink:#E85D75;
  --pink-deep:#C7415A;
  --teal:#1F7A73;
  --teal-deep:#145951;
  --plum:#7A4A5E;
  --line:#C9BCA0;

  --font-display:'Fraunces', Georgia, serif;
  --font-sans:'IBM Plex Sans', -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', 'Courier New', monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; font-family:var(--font-sans); color:var(--ink);
  background:var(--paper); height:100vh; overflow:hidden;
}
button{ font-family:inherit; }
::selection{ background:var(--pink); color:var(--paper); }

/* ---------- top bar ---------- */
.topbar{
  height:56px; display:flex; align-items:center; justify-content:space-between;
  padding-inline:1.25rem; border-bottom:1px solid var(--line);
  background:rgba(237,230,214,.9); position:relative; z-index:30;
}
.topbar-left{ display:flex; align-items:center; gap:.75rem; }
.brand-mark{ display:flex; align-items:center; gap:.5rem; text-decoration:none; color:inherit; }
.brand-mark svg{ flex:none; }
.brand-name{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; }
.divider-v{ width:1px; height:20px; background:var(--line); }
.project-name{ font-family:var(--font-mono); font-size:.82rem; color:var(--ink-soft); }
.project-name b{ color:var(--ink); font-weight:600; }
.topbar-right{ display:flex; align-items:center; gap:.6rem; }
.btn{
  display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:.85rem;
  padding:.55rem 1.1rem; border-radius:999px; cursor:pointer; border:2px solid transparent;
  transition:transform .15s ease, background .15s ease;
}
.btn-primary{ background:var(--pink); color:var(--paper); }
.btn-primary:hover{ background:var(--pink-deep); }
.btn-ghost{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); }
.btn-quiet{ background:rgba(35,34,42,.06); border-color:transparent; color:var(--ink); padding-inline:.85rem; }
.btn-quiet:hover{ background:rgba(35,34,42,.13); }
.btn:disabled{ opacity:.4; cursor:default; transform:none; }
.btn:disabled:hover{ background:rgba(35,34,42,.06); color:var(--ink); }
.btn-primary:active, .btn-ghost:active{ transform:scale(.97); }

/* ---------- layout shell ---------- */
.shell{ display:grid; grid-template-columns:64px 1fr 300px; height:calc(100vh - 56px); }

/* ---------- tool rail ---------- */
.tool-rail{
  border-right:1px solid var(--line); display:flex; flex-direction:column;
  align-items:center; gap:.4rem; padding-block:1rem; background:var(--paper-deep);
}
.tool-btn{
  width:42px; height:42px; border-radius:12px; border:none; background:transparent;
  color:var(--ink-soft); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, color .15s ease; position:relative;
}
.tool-btn:hover{ background:rgba(35,34,42,.06); color:var(--ink); }
.tool-btn.is-active{ background:var(--ink); color:var(--paper); }
.tool-btn.is-active::after{
  content:""; position:absolute; left:-9px; top:50%; transform:translateY(-50%);
  width:4px; height:20px; background:var(--pink); border-radius:2px;
}
.tool-sep{ width:28px; height:1px; background:var(--line); margin:.3rem 0; }
.tool-label{
  position:absolute; left:56px; background:var(--ink); color:var(--paper); font-size:.72rem;
  font-family:var(--font-mono); padding:.3rem .6rem; border-radius:6px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .15s ease; z-index:40;
}
.tool-btn:hover .tool-label{ opacity:1; }

/* ---------- page-level effect popovers (Background/Sound/Overlay) ----------
   These live in the tool rail like any other tool, but aren't placement
   tools — clicking them opens a flyout instead of arming activeTool. */
.tool-item{ position:relative; }
.tool-item.is-popover-open .tool-label{ opacity:0; }
.tool-popover{
  display:none; position:absolute; left:calc(100% + 10px); top:0; width:260px;
  background:var(--card-bg); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 20px 40px -16px rgba(35,34,42,.35); padding:.85rem; z-index:60;
}
.tool-popover.is-open{ display:block; }
.tool-popover-title{
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.1em; font-size:.7rem;
  color:var(--ink-soft); margin-bottom:.65rem;
}
.bg-swatches{ display:grid; grid-template-columns:repeat(6,1fr); gap:.4rem; margin:.65rem 0; }
.bg-swatch{
  width:100%; aspect-ratio:1; border-radius:6px; border:2px solid rgba(35,34,42,.1); cursor:pointer;
  padding:0; transition:transform .1s ease, border-color .1s ease;
}
.bg-swatch:hover{ transform:scale(1.1); }
.bg-swatch.is-selected{ border-color:var(--ink); box-shadow:0 0 0 2px var(--card-bg), 0 0 0 3px var(--ink); }

/* ---------- canvas area ---------- */
.canvas-area{
  position:relative; overflow:auto; display:flex; flex-direction:column; align-items:center; justify-content:safe center; gap:1rem;
  padding:1.5rem 1rem;
  background-image:radial-gradient(var(--line) 1px, transparent 1px);
  background-size:22px 22px; background-color:var(--paper);
}
.page-frame{
  position:relative; width:480px; height:620px; background:var(--card-bg);
  border-radius:6px; box-shadow:0 30px 70px -30px rgba(35,34,42,.4), 0 0 0 1px rgba(35,34,42,.06);
  overflow:hidden; user-select:none;
}

/* ---------- panels view toggle (1 page / 2 pages) ---------- */
.panels-view-toggle{
  display:flex; gap:.35rem; padding:.25rem; border-radius:999px; background:var(--card-bg);
  box-shadow:0 0 0 1px rgba(35,34,42,.08);
}
.view-toggle-btn{
  font-family:var(--font-mono); font-size:.72rem; font-weight:600; letter-spacing:.02em;
  padding:.35rem .85rem; border-radius:999px; border:none; background:transparent; color:var(--ink-soft);
  cursor:pointer; transition:background .15s ease, color .15s ease;
}
.view-toggle-btn:hover{ color:var(--ink); }
.view-toggle-btn.is-active{ background:var(--ink); color:var(--paper); }

/* Two-page spread: both frames shrink to fit side by side. The second frame
   is a read-only preview of the next page — click it to jump there instead
   of editing in place, so placed objects on it never receive pointer events. */
.panels-spread{ display:flex; align-items:flex-start; gap:1.5rem; }
.panels-spread.is-spread .page-frame{ width:380px; height:492px; }
.page-frame-secondary{ cursor:pointer; opacity:.85; transition:opacity .15s ease; }
.page-frame-secondary:hover{ opacity:1; }
.page-frame-secondary .placed-object{ cursor:default; pointer-events:none; }

/* Panels edits whichever page is current in Book pages — this is that page,
   full-bleed, with the text/image/panel tools working on top of it. */
.page-frame-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; display:none; }
.page-frame-img.has-page{ display:block; }

/* Static overlay media is used by the read-only second-page preview. The
   current page uses a selectable kind-overlay object instead. */
.page-overlay-media{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:10; pointer-events:none; display:none;
}
.page-overlay-media.is-visible{ display:block; }

.panels-page-nav{
  display:flex; align-items:center; gap:.75rem; font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft);
}
.panels-nav-btn{
  width:32px; height:32px; border-radius:999px; border:1px solid var(--line); background:var(--card-bg);
  color:var(--ink); font-size:1.1rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s ease;
}
.panels-nav-btn:hover{ background:var(--ink); color:var(--paper); }
.panels-nav-btn:disabled{ opacity:.35; cursor:default; }
.panels-nav-btn:disabled:hover{ background:var(--card-bg); color:var(--ink); }

.panel{
  position:absolute; border-radius:8px; overflow:hidden; cursor:grab;
  box-shadow:inset 0 0 0 1px rgba(35,34,42,.12);
  transition:box-shadow .15s ease;
}
.panel:active{ cursor:grabbing; }
.panel.is-selected{ box-shadow:0 0 0 2px var(--pink-deep), inset 0 0 0 1px rgba(35,34,42,.12); }
.panel-fill{ position:absolute; inset:0; display:flex; align-items:flex-end; padding:.6rem; }
.panel-fill span{
  font-family:var(--font-display); font-weight:600; font-size:.85rem; color:var(--paper);
  text-shadow:0 2px 8px rgba(0,0,0,.3);
}

/* Objects placed with the image/video/shape/panel tools — movable,
   resizable boxes over the page, sized/positioned in % so they scale with
   the frame. */
.placed-object{
  position:absolute; z-index:2; cursor:grab; user-select:none; touch-action:none;
  transition:box-shadow .15s ease;
  transform-origin:center;
}
.placed-object:active{ cursor:grabbing; }
.placed-object.is-interacting{ transition:none; will-change:left,top,width,height,transform; }
.page-frame.is-object-interacting{ cursor:grabbing; }
.placed-object.kind-image,
.placed-object.kind-video,
.placed-object.kind-overlay{ box-shadow:inset 0 0 0 1px rgba(35,34,42,.12); }
.placed-object.kind-overlay{ z-index:11; }
.page-frame:not([data-active-tool="overlay"]):not([data-active-tool="select"]) .placed-object.kind-overlay{ pointer-events:none; }
.placed-object.is-selected{ box-shadow:0 0 0 2px var(--pink-deep), inset 0 0 0 1px rgba(35,34,42,.12); }
.placed-media-clip{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.placed-media-clip img,
.placed-media-clip video{ width:100%; height:100%; display:block; object-fit:contain; pointer-events:none; }
.placed-box{ position:absolute; inset:0; pointer-events:none; }
.placed-object.kind-panel .placed-box{
  box-shadow:inset 0 0 0 2px rgba(35,34,42,.35);
  border-radius:6px;
}
.placed-object.kind-panel .placed-box.shape-rect{ border-radius:6px; }

/* Shape presets — shared by the Shapes tool (kind-shape) and Panels
   (kind-panel), since both render into the same .placed-box element. Panel's
   default inset border-radius above is overridden by clip-path shapes. */
.placed-box.shape-ellipse{ border-radius:50%; }
.placed-box.shape-triangle{ clip-path:polygon(50% 0%, 100% 100%, 0% 100%); border-radius:0; }
.placed-box.shape-diamond{ clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); border-radius:0; }
.placed-box.shape-pentagon{ clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); border-radius:0; }
.placed-box.shape-hexagon{ clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); border-radius:0; }
.placed-box.shape-star{ clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); border-radius:0; }
.placed-box.shape-arrow-right{ clip-path:polygon(0% 25%, 60% 25%, 60% 0%, 100% 50%, 60% 100%, 60% 75%, 0% 75%); border-radius:0; }
.placed-box.shape-angled-cut{ clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 20% 100%); border-radius:0; }
.placed-box.shape-notch{ clip-path:polygon(0% 0%, 82% 0%, 100% 18%, 100% 100%, 0% 100%); border-radius:0; }

.placed-del{
  position:absolute; top:-10px; right:-10px; width:22px; height:22px; border-radius:999px;
  border:none; background:var(--ink); color:var(--paper); font-size:.7rem; line-height:1;
  cursor:pointer; display:none; align-items:center; justify-content:center; z-index:3;
}
.placed-object.is-selected .placed-del{ display:flex; }

.placed-rotate{
  position:absolute; left:50%; top:-38px; width:20px; height:20px; margin-left:-10px;
  border:2px solid var(--pink-deep); border-radius:999px; background:var(--paper);
  cursor:grab; display:none; z-index:4; padding:0;
}
.placed-rotate::after{
  content:""; position:absolute; left:50%; top:18px; width:1px; height:17px;
  background:var(--pink-deep); transform:translateX(-50%);
}
.placed-rotate:active{ cursor:grabbing; }
.placed-object.is-selected .placed-rotate{ display:block; }

/* 8-way resize handles: 4 corners + 4 edge midpoints. Position/cursor per
   handle come from data-pos ("n","ne","e","se","s","sw","w","nw"). */
.placed-resize{
  position:absolute; width:12px; height:12px; border-radius:3px;
  background:var(--paper); border:2px solid var(--pink-deep);
  display:none; z-index:3;
}
.placed-resize::after{ content:""; position:absolute; inset:-7px; }
.placed-object.is-selected .placed-resize{ display:block; }
.placed-resize[data-pos="n"]{ top:-7px; left:50%; margin-left:-6px; cursor:ns-resize; }
.placed-resize[data-pos="s"]{ bottom:-7px; left:50%; margin-left:-6px; cursor:ns-resize; }
.placed-resize[data-pos="e"]{ right:-7px; top:50%; margin-top:-6px; cursor:ew-resize; }
.placed-resize[data-pos="w"]{ left:-7px; top:50%; margin-top:-6px; cursor:ew-resize; }
.placed-resize[data-pos="ne"]{ top:-7px; right:-7px; cursor:nesw-resize; }
.placed-resize[data-pos="sw"]{ bottom:-7px; left:-7px; cursor:nesw-resize; }
.placed-resize[data-pos="nw"]{ top:-7px; left:-7px; cursor:nwse-resize; }
.placed-resize[data-pos="se"]{ bottom:-7px; right:-7px; cursor:nwse-resize; }

/* Live drag rectangle shown while drawing a new text box (text tool). */
.text-draw-preview{
  position:absolute; border:1.5px dashed var(--pink-deep); background:rgba(232,93,117,.08);
  pointer-events:none; z-index:5; border-radius:2px;
}

/* Text objects — contenteditable in place, no image/box child. */
.placed-object.kind-text{ min-width:24px; min-height:20px; }
.placed-text{
  width:100%; height:100%; outline:none; overflow:hidden; word-wrap:break-word;
  font-family:var(--font-display); cursor:text;
}
.placed-object.kind-text:not(.is-editing) .placed-text{ cursor:grab; user-select:none; }
.page-frame[data-active-tool="text"] .placed-object.kind-text .placed-text{ cursor:text; user-select:text; }
.placed-object.kind-text.is-editing{ cursor:text; }
.placed-object.kind-text.is-editing .placed-text{ box-shadow:0 0 0 2px var(--pink); border-radius:2px; }

.media-crop-controls{
  margin:.85rem 0; padding:.75rem; border:1px solid var(--line); border-radius:8px;
  background:var(--card-bg); display:grid; gap:.65rem;
}
.media-crop-controls[hidden]{ display:none; }
.crop-control-row{ display:grid; grid-template-columns:minmax(92px,1fr) minmax(90px,1.3fr) auto; gap:.55rem; align-items:center; font-size:.78rem; color:var(--ink-soft); }
.crop-control-row:first-of-type{ grid-template-columns:minmax(92px,1fr) minmax(130px,1.3fr); }
.crop-control-row input[type="range"]{ width:100%; accent-color:var(--pink-deep); }
.crop-control-row output{ min-width:38px; font-family:var(--font-mono); font-size:.72rem; color:var(--ink); text-align:right; }

/* Shape swatch picker — grid of small preview tiles reused by the Add
   shape tool-rail popover and the Selected object shape row. */
.shape-swatches{ display:grid; grid-template-columns:repeat(5,1fr); gap:.4rem; margin:.65rem 0; }
.shape-swatch{
  width:100%; aspect-ratio:1; border-radius:6px; border:2px solid rgba(35,34,42,.1); cursor:pointer;
  padding:.2rem; background:var(--card-bg); transition:transform .1s ease, border-color .1s ease;
  display:flex; align-items:center; justify-content:center;
}
.shape-swatch:hover{ transform:scale(1.08); }
.shape-swatch.is-selected{ border-color:var(--ink); box-shadow:0 0 0 2px var(--card-bg), 0 0 0 3px var(--ink); }
.shape-swatch-fill{ width:100%; height:100%; background:var(--ink-soft); }
.shape-swatch[data-shape="ellipse"] .shape-swatch-fill{ border-radius:50%; }
.shape-swatch[data-shape="triangle"] .shape-swatch-fill{ clip-path:polygon(50% 0%, 100% 100%, 0% 100%); }
.shape-swatch[data-shape="diamond"] .shape-swatch-fill{ clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.shape-swatch[data-shape="pentagon"] .shape-swatch-fill{ clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); }
.shape-swatch[data-shape="hexagon"] .shape-swatch-fill{ clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
.shape-swatch[data-shape="star"] .shape-swatch-fill{ clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.shape-swatch[data-shape="arrow-right"] .shape-swatch-fill{ clip-path:polygon(0% 25%, 60% 25%, 60% 0%, 100% 50%, 60% 100%, 60% 75%, 0% 75%); }
.shape-swatch[data-shape="angled-cut"] .shape-swatch-fill{ clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 20% 100%); }
.shape-swatch[data-shape="notch"] .shape-swatch-fill{ clip-path:polygon(0% 0%, 82% 0%, 100% 18%, 100% 100%, 0% 100%); }

/* Compact object inspector and deliberately small motion timeline. */
.transform-grid,.timeline-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.45rem; margin:.65rem 0; }
.transform-grid label,.timeline-grid label{ display:flex; align-items:center; gap:.25rem; font-size:.68rem; color:var(--ink-soft); min-width:0; }
.transform-grid input,.timeline-grid input{ width:100%; min-width:0; padding:.27rem; border:1px solid var(--line); border-radius:5px; background:var(--card-bg); color:var(--ink); font:inherit; }
.object-actions{ display:flex; flex-wrap:wrap; gap:.35rem; margin:.6rem 0; }
.object-edit-hint{ margin:.35rem 0 .65rem; color:var(--ink-soft); font-size:.72rem; line-height:1.4; }
.timeline-editor{ border-top:1px solid var(--line); margin-top:.75rem; padding-top:.7rem; }
.timeline-heading{ font:600 .72rem var(--font-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--ink); }
.timeline-note{ margin:.35rem 0 .5rem; color:var(--ink-soft); font-size:.72rem; line-height:1.35; }
.timeline-track{ height:24px; display:flex; align-items:center; gap:.3rem; }
.timeline-line{ height:2px; flex:1; background:var(--pink); opacity:.45; }
.keyframe-dot{ flex:none; padding:.2rem .35rem; border-radius:999px; background:var(--pink-deep); color:var(--paper); font:500 .62rem var(--font-mono); }

/* Page background + selected-object rows in the side panel */
.pbc-row{ display:flex; align-items:center; gap:.6rem; margin-top:.6rem; }
.pbc-row[hidden]{ display:none; }
.pbc-label{ font-size:.78rem; color:var(--ink-soft); flex:1; }
.pbc-select{
  font-family:var(--font-mono); font-size:.75rem; color:var(--ink);
  background:var(--card-bg); border:1px solid var(--line); border-radius:6px; padding:.3rem .4rem;
}
.text-font-select{ width:164px; max-width:100%; }
.text-style-buttons{ display:flex; gap:.3rem; }
.text-style-btn{
  width:32px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:6px; background:var(--card-bg); color:var(--ink);
  cursor:pointer; font-family:var(--font-sans); font-size:.85rem;
}
.text-style-btn:hover{ border-color:var(--ink); }
.text-style-btn.is-active{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.underline-mark{ text-decoration:underline; text-underline-offset:2px; }
.pbc-color{
  width:38px; height:28px; padding:2px; border:1px solid var(--line); border-radius:6px;
  background:var(--card-bg); cursor:pointer;
}
.pbc-btn{
  font-family:var(--font-mono); font-size:.72rem; font-weight:600; color:var(--ink);
  background:var(--card-bg); border:1px solid var(--line); border-radius:6px;
  padding:.3rem .6rem; cursor:pointer; flex:none;
}
.pbc-btn:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* Background sound — a page attribute, not a placed object: no position or
   size, so it lives here in the side panel rather than the tool rail. */
.page-audio-file{ display:flex; align-items:center; gap:.5rem; margin-top:.5rem; }
.page-audio-file.hidden{ display:none; }
.page-audio-player{ height:32px; max-width:150px; flex:1; min-width:0; }
.page-audio-name{
  font-size:.72rem; color:var(--ink-soft); flex:none; max-width:80px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------- right panel ---------- */
.side-panel{
  border-left:1px solid var(--line); background:var(--paper-deep); overflow-y:auto;
  padding:1.25rem 1.1rem;
}
.side-section{ margin-bottom:1.75rem; }
.side-title{
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.12em; font-size:.72rem;
  color:var(--ink-soft); margin-bottom:.75rem; display:flex; align-items:center; justify-content:space-between;
}
.effect-row{
  display:flex; align-items:center; justify-content:space-between; padding:.6rem .7rem;
  background:var(--card-bg); border-radius:10px; margin-bottom:.5rem; border:1px solid var(--line);
}
.effect-info{ display:flex; flex-direction:column; }
.effect-name{ font-size:.85rem; font-weight:600; }
.effect-sub{ font-size:.72rem; color:var(--ink-soft); }

.layer-item{
  display:flex; align-items:center; gap:.5rem; padding:.5rem .6rem; border-radius:8px;
  font-size:.82rem; cursor:pointer; margin-bottom:.25rem;
}
.layer-item:hover{ background:rgba(35,34,42,.05); }
.layer-item.is-selected{ background:var(--ink); color:var(--paper); }
.layer-swatch{ width:16px; height:16px; border-radius:4px; flex:none; }

/* preview toggle button */
.preview-btn{
  width:100%; padding:.7rem; border-radius:10px; border:2px solid var(--ink); background:transparent;
  font-weight:600; font-size:.85rem; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:.4rem;
}
.preview-btn:hover{ background:var(--ink); color:var(--paper); }
.side-section .preview-btn + .preview-btn{ margin-top:.5rem; }

/* The reader preview book — same canvas flip engine as the Book pages
   editor (see createFlipBook in book-editor.js); the canvas sizes itself,
   this wrapper just carries the shadow, corner rounding, and rain layer. */
.preview-book{ position:relative; border-radius:8px; box-shadow:0 40px 90px -30px rgba(0,0,0,.6); }
.preview-book canvas{ display:block; border-radius:6px; touch-action:none; cursor:pointer; }
.preview-book .rain-layer{ border-radius:6px; }

/* toast */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px);
  background:var(--ink); color:var(--paper); padding:.7rem 1.2rem; border-radius:999px;
  font-size:.85rem; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
  z-index:200; max-width:min(90vw,420px); text-align:center;
}
.toast.is-visible{ opacity:1; transform:translate(-50%,0); }

/* generic modal — replaces prompt()/confirm() (see projects.js) */
.modal-overlay{
  position:fixed; inset:0; z-index:250; background:rgba(23,22,26,.6);
  display:flex; align-items:center; justify-content:center; padding:1.5rem;
}
.modal-overlay[hidden]{ display:none; }
.modal-box{
  width:100%; max-width:340px; background:var(--card-bg); border-radius:14px;
  padding:1.25rem; box-shadow:0 30px 70px -20px rgba(0,0,0,.5);
}
.modal-message{ margin:0 0 .9rem; font-size:.92rem; color:var(--ink); }
.modal-input{
  width:100%; box-sizing:border-box; font-family:var(--font-sans); font-size:.9rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:.55rem .7rem; margin-bottom:1rem;
}
.modal-actions{ display:flex; gap:.6rem; justify-content:flex-end; }
.modal-btn{
  font-size:.82rem; font-weight:600; padding:.5rem 1.1rem; border-radius:999px; cursor:pointer;
}
.modal-cancel{ border:1px solid var(--line); background:transparent; color:var(--ink); }
.modal-cancel:hover{ background:var(--line); }
.modal-confirm{ border:none; background:var(--ink); color:var(--paper); }
.modal-confirm:hover{ background:var(--pink-deep); }

.save-project-overlay{ overflow:auto; align-items:flex-start; }
.save-project-modal{ max-width:720px; margin:auto; padding:1.5rem; }
.save-project-heading{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1rem; }
.save-project-heading h2{ margin:.1rem 0 0; font-family:var(--font-display); font-size:1.35rem; }
.save-project-eyebrow{ color:var(--pink-deep); font-family:var(--font-mono); font-size:.67rem; letter-spacing:.12em; text-transform:uppercase; }
.save-project-close{ border:0; background:transparent; color:var(--ink-soft); font-size:1.6rem; line-height:1; cursor:pointer; }
.save-project-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem 1rem; }
.save-project-grid label,.save-project-field{ color:var(--ink-soft); font-size:.8rem; font-weight:600; }
.save-project-grid input,.save-project-grid select,.save-project-field textarea{
  display:block; width:100%; box-sizing:border-box; margin-top:.3rem; padding:.58rem .7rem;
  border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); font:inherit;
}
.save-project-field{ display:block; margin-top:.9rem; }
.save-project-field textarea{ min-height:76px; resize:vertical; }
.save-options-grid{ margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); }
.save-project-help{ margin:.9rem 0; color:var(--ink-soft); font-size:.76rem; }
.save-project-status{ margin:.75rem 0; padding:.65rem .75rem; border-radius:8px; font-size:.8rem; }
.save-project-status.error{ color:#8a3345; border:1px solid var(--pink-deep); background:#fbeaec; }
.save-project-status.success{ color:var(--teal-deep); border:1px solid var(--teal); background:#e4f3ef; }
.save-project-actions{ margin-top:1rem; }

@media (max-width:640px){
  .save-project-grid{ grid-template-columns:1fr; }
  .save-project-modal{ padding:1.1rem; }
}

@media (max-width:900px){
  .shell{ grid-template-columns:56px 1fr; }
  .side-panel{ display:none; }
}

/* ---------- project switcher ---------- */
.project-switcher{ position:relative; }
.project-switcher-btn{
  display:flex; align-items:center; gap:.4rem; background:transparent; border:none; cursor:pointer;
  font-family:var(--font-mono); font-size:.82rem; color:var(--ink-soft); padding:.3rem .5rem; border-radius:8px;
}
.project-switcher-btn:hover{ background:rgba(35,34,42,.06); color:var(--ink); }
.project-switcher-label{ opacity:.8; }
.project-switcher-name{ color:var(--ink); font-weight:600; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.project-switcher-btn svg{ flex:none; opacity:.6; }

.project-switcher-menu{
  display:none; position:absolute; top:calc(100% + 8px); left:0; width:260px; background:var(--card-bg);
  border:1px solid var(--line); border-radius:12px; box-shadow:0 20px 40px -16px rgba(35,34,42,.35);
  padding:.5rem; z-index:50;
}
.project-switcher-menu.is-open{ display:block; }
.project-switcher-list{ display:flex; flex-direction:column; gap:.15rem; max-height:280px; overflow-y:auto; margin-bottom:.4rem; }
.project-item{ display:flex; align-items:center; justify-content:space-between; gap:.2rem; border-radius:8px; }
.project-item:hover{ background:rgba(35,34,42,.05); }
.project-item.is-active{ background:var(--ink); }
.project-item.is-active .project-item-name{ color:var(--paper); }
.project-item-name{
  flex:1; min-width:0; text-align:left; background:transparent; border:none; cursor:pointer; padding:.45rem .5rem;
  font-size:.82rem; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.project-item-actions{ display:flex; gap:.1rem; flex:none; padding-right:.3rem; }
.project-item-btn{
  border:none; background:transparent; cursor:pointer; font-size:.72rem; color:var(--ink-soft);
  width:22px; height:22px; border-radius:5px; display:flex; align-items:center; justify-content:center;
}
.project-item-btn:hover{ background:rgba(35,34,42,.1); color:var(--ink); }
.project-item.is-active .project-item-btn{ color:var(--paper); opacity:.8; }
.project-item.is-active .project-item-btn:hover{ background:rgba(237,230,214,.15); opacity:1; }
.project-switcher-new{
  width:100%; padding:.5rem; border-radius:8px; border:1px dashed var(--line); background:transparent;
  font-size:.8rem; font-weight:600; color:var(--ink-soft); cursor:pointer;
}
.project-switcher-new:hover{ background:var(--paper); color:var(--ink); border-color:var(--pink-deep); }

/* ---------- mode tabs ---------- */
.mode-tabs{ display:flex; gap:.2rem; background:var(--paper-deep); border:1px solid var(--line); border-radius:999px; padding:.2rem; }
.mode-tab{
  font-family:inherit; font-size:.8rem; font-weight:600; color:var(--ink-soft); background:transparent;
  border:none; border-radius:999px; padding:.35rem .85rem; cursor:pointer; transition:background .15s ease, color .15s ease;
}
.mode-tab:hover{ color:var(--ink); }
.mode-tab.is-active{ background:var(--ink); color:var(--paper); }

/* ---------- book pages mode ---------- */
.book-shell{ display:none; grid-template-columns:1fr 300px; height:calc(100vh - 56px); }
body.mode-book .shell{ display:none; }
body.mode-book .book-shell{ display:grid; }
body.mode-book #exportProjectBtn{ display:none; }
.book-stage{
  position:relative; display:flex; align-items:center; justify-content:center;
  background-image:radial-gradient(var(--line) 1px, transparent 1px);
  background-size:22px 22px; background-color:var(--paper);
}

/* The book as one bound object. The two pages are sized from their own
   intrinsic aspect ratio (never distorted or cropped to fit a fixed box —
   see pageAspect() in JS) and positioned at a fixed height; only their
   *width* varies, page to page, to match what was actually uploaded. The
   spine sits in a small dedicated gutter gap between them that never
   overlaps either page's artwork — nothing about the binding ever covers
   or crops content. Reading-progress "weight" is conveyed only by the
   gutter's shadow asymmetry and a few px of width, never by eating into
   the pages themselves. .book's width, and both pages' widths, are set
   inline by JS (applySpread()) every render since they depend on the
   current pages' actual dimensions. */
.book{
  position:relative; height:560px;
  perspective:1800px; touch-action:none;
  filter:drop-shadow(0 30px 70px rgba(35,34,42,.35));
}

/* The whole spread — both pages, the spine gutter, and the flipping leaf —
   is drawn on a single canvas now (see book-editor.js), ported from the
   flipbook-viewer bezier page-curl technique. Its pixel size is set inline
   by JS (computeSpread()) every render since it depends on the current
   pages' actual dimensions; this just pins it to fill .book and keeps the
   rounded corners CSS already gave the old DOM pages. */
.book-canvas{ position:absolute; top:0; left:50%; transform:translateX(-50%); border-radius:6px; touch-action:none; }

/* A brief settle bounce right after a flip lands (see settlePage() in JS),
   applied to the canvas itself as a whole rather than to one page div. */
@keyframes page-settle{ 0%{ transform:translateX(-50%) scale(1); } 45%{ transform:translateX(-50%) scale(1.006); } 100%{ transform:translateX(-50%) scale(1); } }
.book-canvas.is-settling{ animation:page-settle .32s ease-out; }

.book-empty{
  position:absolute; inset:0; z-index:5; display:none; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:.4rem; padding:2rem; border:2px dashed var(--line); border-radius:10px; background:var(--card-bg);
}
.book-empty p{ margin:0; font-family:var(--font-display); font-weight:600; font-size:1.1rem; }
.book-empty span{ font-size:.82rem; color:var(--ink-soft); max-width:280px; }
.book:not(.has-pages) .book-empty,
.page-frame:not(.has-pages) .book-empty{ display:flex; }

.flip-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:999px;
  border:1px solid var(--line); background:var(--card-bg); color:var(--ink); font-size:1.3rem; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s ease;
}
.flip-nav:hover{ background:var(--ink); color:var(--paper); }
.flip-nav:disabled{ opacity:.35; cursor:default; }
.flip-nav:disabled:hover{ background:var(--card-bg); color:var(--ink); }
/* left/right are recalculated in JS (applySpread) since .book's width is
   now dynamic — these are just a sane fallback before the first render. */
.flip-prev{ left:calc(50% - 447px); }
.flip-next{ right:calc(50% - 447px); }

.page-indicator{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft);
}

/* ---------- import dropzone ---------- */
.dropzone{
  border:2px dashed var(--line); border-radius:10px; padding:1.1rem .9rem; text-align:center;
  cursor:pointer; display:flex; flex-direction:column; gap:.3rem; transition:background .15s ease, border-color .15s ease;
}
.dropzone:hover, .dropzone.is-dragover{ background:var(--card-bg); border-color:var(--pink-deep); }
.dropzone-title{ font-weight:600; font-size:.85rem; }
.dropzone-sub{ font-size:.72rem; color:var(--ink-soft); }

/* ---------- pages list ---------- */
.pages-heading{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.55rem; }
.pages-heading .side-title{ margin-bottom:0; }
.pages-view-toggle{ display:flex; gap:.15rem; padding:.15rem; border:1px solid var(--line); border-radius:999px; }
.pages-view-btn{
  border:none; border-radius:999px; background:transparent; color:var(--ink-soft); cursor:pointer;
  padding:.25rem .48rem; font:600 .65rem var(--font-mono);
}
.pages-view-btn.is-active{ background:var(--ink); color:var(--paper); }
.pages-list{ display:flex; flex-direction:column; gap:.4rem; }
.page-item{
  display:flex; align-items:center; gap:.5rem; padding:.4rem; border-radius:8px; background:var(--card-bg);
  border:1px solid var(--line); cursor:grab; position:relative;
}
.page-item:active{ cursor:grabbing; }
.page-item.is-current{ box-shadow:0 0 0 2px var(--pink-deep); }
.page-item.is-dragging{ opacity:.45; }
.page-item.is-drop-before::before,.page-item.is-drop-after::after{
  content:""; position:absolute; left:3px; right:3px; height:3px; border-radius:999px; background:var(--pink-deep);
}
.page-item.is-drop-before::before{ top:-4px; }
.page-item.is-drop-after::after{ bottom:-4px; }
.page-thumb{ width:38px; height:50px; object-fit:cover; border-radius:4px; flex:none; background:var(--paper-deep); }
.page-item-info{ flex:1; min-width:0; font-size:.76rem; color:var(--ink-soft); }
.page-item-num{ font-weight:600; color:var(--ink); }
.page-item-name{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.page-item-actions{ display:flex; flex-direction:column; gap:.15rem; }
.page-item-btn{
  border:none; background:transparent; color:var(--ink-soft); cursor:pointer; font-size:.7rem;
  width:20px; height:20px; border-radius:4px; display:flex; align-items:center; justify-content:center;
}
.page-item-btn:hover{ background:rgba(35,34,42,.08); color:var(--ink); }
.pages-empty-hint{ font-size:.78rem; color:var(--ink-soft); }
.pages-list.is-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:.6rem;
}
.pages-list.is-grid .page-item{ flex-direction:column; align-items:stretch; gap:.35rem; min-width:0; padding:.45rem; }
.pages-list.is-grid .page-thumb{ width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; }
.pages-list.is-grid .page-item-info{ text-align:center; }
.pages-list.is-grid .page-item-actions{ flex-direction:row; justify-content:center; }
.pages-list.is-grid .page-item-btn{ width:25px; }
.pages-list.is-grid .page-item.is-drop-before::before,.pages-list.is-grid .page-item.is-drop-after::after{
  top:3px; bottom:3px; width:3px; height:auto; left:auto; right:auto;
}
.pages-list.is-grid .page-item.is-drop-before::before{ left:-5px; }
.pages-list.is-grid .page-item.is-drop-after::after{ right:-5px; }

/* ---------- table of contents ---------- */
.toc-title-label{ display:block; margin-bottom:.35rem; font-size:.75rem; color:var(--ink-soft); }
.toc-title-input{
  width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:7px;
  background:var(--card-bg); color:var(--ink); padding:.5rem .6rem; font:inherit; font-size:.82rem;
}
.toc-title-input:focus{ outline:2px solid var(--pink); outline-offset:1px; }
.toc-title-input:disabled{ opacity:.55; }
.toc-page-select{ cursor:pointer; }
.toc-help{ margin:.45rem 0 .7rem; color:var(--ink-soft); font-size:.72rem; line-height:1.4; }
.toc-list{ display:grid; gap:.35rem; }
.toc-entry{
  display:grid; grid-template-columns:1fr auto; gap:.6rem; align-items:center; padding:.45rem .55rem;
  border:1px solid var(--line); border-radius:7px; background:var(--card-bg); color:var(--ink);
  text-decoration:none; font-size:.78rem;
}
.toc-entry:hover,.toc-entry.is-current{ border-color:var(--pink-deep); background:var(--paper); }
.toc-entry-page{ color:var(--ink-soft); font-family:var(--font-mono); font-size:.7rem; }
.toc-empty{ color:var(--ink-soft); font-size:.75rem; font-style:italic; }

.preview-toc{ position:absolute; top:24px; left:24px; z-index:4; width:min(280px,calc(100vw - 48px)); }
.preview-toc-toggle{
  border:1px solid rgba(255,255,255,.55); border-radius:999px; background:rgba(23,22,26,.82);
  color:var(--paper); padding:.55rem 1rem; font:600 .82rem var(--font-sans); cursor:pointer;
}
.preview-toc-toggle:hover,.preview-toc-toggle[aria-expanded="true"]{ background:var(--paper); color:var(--ink); }
.preview-toc-toggle:disabled{ opacity:.45; cursor:default; }
.preview-toc-list{
  margin-top:.55rem; max-height:min(55vh,420px); overflow:auto; display:grid; gap:.35rem;
  padding:.65rem; border-radius:10px; background:rgba(247,242,231,.97); box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.preview-toc-list[hidden]{ display:none; }
.preview-toc-list .toc-entry{ background:transparent; }

@media (max-width:700px){
  .preview-toc{ top:12px; left:12px; width:calc(100vw - 24px); }
}

@media (max-width:900px){
  .book-shell{ grid-template-columns:1fr; }
  .book-shell .side-panel{ display:none; }
}