: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 minmax(0,1fr) 300px; grid-template-rows:minmax(0,1fr) 236px;
  height:calc(100vh - 56px); min-width:0;
}

/* ---------- 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; min-width:0; min-height:0; 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:#FFFFFF;
  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;
}
.page-frame.has-selection-controls{ overflow:visible; }

/* ---------- 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);
}
.workspace-zoom-controls{
  position:absolute; top:1.5rem; right:1rem; z-index:20; display:flex; align-items:center; gap:.25rem;
  padding:.25rem; border-radius:999px; background:var(--card-bg); box-shadow:0 0 0 1px rgba(35,34,42,.08);
}
.workspace-zoom-controls button{
  min-width:30px; height:28px; border:none; border-radius:999px; background:transparent; color:var(--ink);
  font:600 .72rem var(--font-mono); cursor:pointer;
}
.workspace-zoom-controls button:hover{ background:rgba(35,34,42,.08); }
.workspace-zoom-controls output{ min-width:42px; text-align:center; font:500 .68rem var(--font-mono); color:var(--ink-soft); }
.stress-test-controls{
  position:absolute; left:1rem; bottom:1rem; z-index:30; display:flex; align-items:center; gap:.25rem;
  padding:.3rem .45rem; border:1px solid var(--line); border-radius:8px; background:var(--card-bg);
  font:500 .68rem var(--font-mono); color:var(--ink-soft); pointer-events:none;
}
.stress-test-controls[hidden]{ display:none; }
.stress-test-controls button{ border:1px solid var(--line); border-radius:5px; background:var(--paper); color:var(--ink); cursor:pointer; pointer-events:auto; }
.stress-test-controls output{ max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); }
.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{ position:relative; display:flex; flex:none; align-items:flex-start; gap:0; isolation:isolate; }
.panels-spread.is-spread .page-frame{ width:380px; height:492px; }
.panels-spread .page-frame{ z-index:1; }
.panels-spread.has-spread-background .page-frame{ background:transparent!important; }
.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; }
.spread-backdrop,.spread-object-layer,.spread-guide-layer{ position:absolute; inset:0; }
.spread-backdrop{ z-index:0; background-position:center; background-size:cover; pointer-events:none; }
.spread-object-layer{ z-index:12; pointer-events:none; overflow:visible; }
.spread-object-layer .placed-object{ pointer-events:auto; }
.spread-object-layer .placed-object.is-selected{ box-shadow:0 0 0 2px #7d3cff, inset 0 0 0 1px rgba(35,34,42,.12); }
.spread-guide-layer{ z-index:20; pointer-events:none; }
.spread-guide-seam{ position:absolute; top:0; bottom:0; border-left:1px dashed rgba(125,60,255,.9); border-right:1px dashed rgba(125,60,255,.9); background:rgba(125,60,255,.08); }
.spread-guide-bleed,.spread-guide-safe{ position:absolute; display:none; border:1px dashed; }
.spread-guide-bleed{ border-color:#e85d75; }
.spread-guide-safe{ border-color:#28a06a; }
.spread-guide-layer.show-bleed .spread-guide-bleed,.spread-guide-layer.show-safe .spread-guide-safe{ display:block; }
.spread-guide-layer:not(.show-gutter) .spread-guide-seam{ display:none; }
.spread-edit-section .object-actions{ flex-wrap:wrap; }
.spread-field{ display:grid; gap:.35rem; margin:.65rem 0; color:var(--ink-soft); font-size:.78rem; }
.spread-field select,.spread-field input[type="text"]{ width:100%; border:1px solid var(--line); border-radius:6px; background:var(--paper); color:var(--ink); padding:.45rem .55rem; }
.spread-field input[type="color"]{ width:100%; min-height:34px; border:1px solid var(--line); border-radius:6px; background:var(--paper); }
.placement-scope-hint{ margin:.2rem 0 .8rem; }
.spread-quick-add-title{ margin-top:.8rem; font-size:.7rem; }
.spread-guide-controls{ display:grid; gap:.4rem; margin:.75rem 0; font-size:.72rem; color:var(--ink-soft); }
.spread-guide-controls label{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.spread-guide-controls label > span:first-child{ display:flex; align-items:center; gap:.3rem; }
.guide-measure{ display:flex; align-items:center; gap:.2rem; }
.guide-measure input{ width:58px; padding:.28rem .35rem; border:1px solid var(--line); border-radius:5px; background:var(--paper); color:var(--ink); font:500 .68rem var(--font-mono); }
.snap-controls{ display:grid; grid-template-columns:1fr 1fr; gap:.35rem; margin:.7rem 0; padding:.55rem; border:1px solid var(--line); border-radius:7px; background:rgba(255,255,255,.35); }
.snap-controls-title{ grid-column:1/-1; color:var(--ink); font:600 .69rem var(--font-mono); text-transform:uppercase; letter-spacing:.06em; }
.snap-controls label{ display:flex; align-items:center; gap:.3rem; min-width:0; color:var(--ink-soft); font-size:.68rem; }
.snap-controls p{ grid-column:1/-1; margin:.1rem 0 0; color:var(--ink-soft); font-size:.62rem; line-height:1.3; }
.canvas-snap-line{ position:absolute; z-index:60; display:none; pointer-events:none; background:#ff4f83; box-shadow:0 0 0 1px rgba(255,255,255,.65); }
.canvas-snap-line.axis-x{ top:0; bottom:0; width:1px; }
.canvas-snap-line.axis-y{ left:0; right:0; height:1px; }
.spread-selection-controls{ margin-top:.75rem; padding-top:.6rem; border-top:1px solid var(--line); }

/* 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-page-nav .page-indicator{
  position:static;
  transform:none;
}
.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-group-content{ position:absolute; inset:0; overflow:visible; pointer-events:none; }
.placed-group-child{ position:absolute; transform-origin:center; pointer-events:none; user-select:none; }
.placed-object.kind-group{ box-shadow:inset 0 0 0 1px rgba(35,34,42,.16); }
.placed-object.kind-group.is-selected .placed-resize[data-pos="n"],
.placed-object.kind-group.is-selected .placed-resize[data-pos="e"],
.placed-object.kind-group.is-selected .placed-resize[data-pos="s"],
.placed-object.kind-group.is-selected .placed-resize[data-pos="w"]{ display:none; }
.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-compound-shape{ position:absolute; inset:0; pointer-events:none; }
.compound-shape-part{ position:absolute; pointer-events:none; }
.placed-object-fallback{
  display:flex; align-items:center; justify-content:center; box-sizing:border-box; padding:8px;
  border:1px dashed rgba(35,34,42,.4); border-radius:5px; background:rgba(247,242,231,.9);
  color:#4d4a55; font:600 11px/1.25 "IBM Plex Sans",sans-serif; text-align:center;
}
.placed-object-audio{
  display:flex; align-items:center; justify-content:center; box-sizing:border-box; padding:8px;
  border:1px solid #405a75; border-radius:7px; background:#485f77!important;
  color:#eef8ff; font:600 11px/1.25 "IBM Plex Sans",sans-serif; text-align:center;
}
.placed-object.kind-panel .placed-box,
.placed-group-child.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-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-object.has-compact-controls.is-selected .placed-resize[data-pos="n"],
.placed-object.has-compact-controls.is-selected .placed-resize[data-pos="e"],
.placed-object.has-compact-controls.is-selected .placed-resize[data-pos="s"],
.placed-object.has-compact-controls.is-selected .placed-resize[data-pos="w"]{ display:none; }
.placed-object.has-tiny-controls.is-selected .placed-resize:not([data-pos="nw"]):not([data-pos="se"]){ display:none; }
.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; }
.static-export-actions{ display:grid; grid-template-columns:1fr 1fr; gap:.4rem; margin:.55rem 0 .2rem; }
.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-tool-section,.shape-advanced-controls{ display:grid; gap:.45rem; margin:.65rem 0; padding:.6rem; border:1px solid var(--line); border-radius:7px; background:rgba(255,255,255,.35); }
.object-opacity-row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.45rem; color:var(--ink-soft); font-size:.7rem; }
.object-opacity-row output{ min-width:3rem; font:500 .66rem var(--font-mono); text-align:right; }
.object-shadow-toggle{ color:var(--ink-soft); font-size:.72rem; }
.object-shadow-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.4rem; }
.object-shadow-grid label{ display:grid; gap:.25rem; color:var(--ink-soft); font-size:.68rem; }
.object-shadow-grid input{ width:100%; min-width:0; box-sizing:border-box; padding:.28rem; border:1px solid var(--line); border-radius:5px; background:var(--card-bg); color:var(--ink); }
.object-shadow-grid input[type="color"]{ min-height:30px; padding:2px; }
.shape-combine-actions{ margin-top:.15rem; }
.shape-edit-note{ margin:0; color:var(--ink-soft); font-size:.67rem; line-height:1.35; }
.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); }
.pbc-btn.danger{ border-color:#a33b48; color:#8d2634; }
.pbc-btn:disabled{ opacity:.45; cursor:not-allowed; }

/* Semantic scene hierarchy. Containers never establish a transform box: the
   tree controls membership while canvas objects remain in page coordinates. */
.scene-hierarchy-note{ margin:-.25rem 0 .55rem; color:var(--ink-soft); font-size:.7rem; line-height:1.4; }
.scene-tree-root{ min-height:64px; max-height:280px; overflow:auto; border:1px solid var(--line); border-radius:8px; background:var(--card-bg); padding:.3rem; }
.scene-tree-root.is-drop-target{ box-shadow:inset 0 0 0 2px var(--pink-deep); }
.scene-tree{ display:flex; flex-direction:column; gap:2px; }
.scene-tree-children{ margin-left:.8rem; padding-left:.4rem; border-left:1px solid var(--line); }
.scene-tree-item{ display:flex; align-items:center; gap:.25rem; min-width:0; padding:.28rem .35rem; border:0; border-radius:6px; background:transparent; color:var(--ink); font:500 .7rem var(--font-mono); text-align:left; cursor:pointer; }
.scene-tree-item:hover{ background:rgba(35,34,42,.06); }
.scene-tree-item.is-selected{ background:var(--ink); color:var(--paper); }
.scene-tree-item.is-disabled{ opacity:.62; }
.scene-tree-item.is-hidden .scene-tree-label{ text-decoration:line-through; opacity:.7; }
.scene-tree-item.is-locked::after{ content:'Lock'; margin-left:auto; font-size:.56rem; opacity:.7; }
.scene-tree-twist{ width:1rem; border:0; background:transparent; color:inherit; padding:0; cursor:pointer; }
.scene-tree-icon{ width:1rem; text-align:center; opacity:.72; }
.scene-tree-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scene-tree-status{ margin-left:auto; padding:.08rem .25rem; border-radius:999px; background:#f5d3d8; color:#7d2030; font-size:.55rem; }
.scene-tree-empty-item{ color:var(--ink-soft); font-size:.66rem; padding:.25rem 1.5rem; }
.container-controls{ border-top:1px solid var(--line); margin-top:.7rem; padding-top:.65rem; display:grid; gap:.5rem; }
.container-controls[hidden]{ display:none; }
.container-controls>label,.object-container-row{ display:grid; gap:.25rem; color:var(--ink-soft); font-size:.68rem; }
.container-controls input[type="text"],.container-controls textarea{ width:100%; padding:.35rem .45rem; border:1px solid var(--line); border-radius:6px; background:var(--card-bg); color:var(--ink); font:inherit; resize:vertical; }
.container-controls .pbc-select,.object-container-row .pbc-select{ width:100%; }
.container-toggle-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.25rem; font-size:.65rem; }
.container-delete-actions{ display:grid; gap:.35rem; }
.container-delete-actions .pbc-btn{ white-space:normal; text-align:left; }
.object-container-row{ margin:.6rem 0; }
.placed-object.in-selected-container:not(.is-selected){ box-shadow:0 0 0 2px rgba(232,93,117,.65); }

/* 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;
}

/* ---------- timeline panel ---------- */
.timeline-panel{
  --timeline-label-width:176px;
  grid-column:1 / -1; grid-row:2; min-width:0; min-height:0; overflow:hidden;
  display:flex; flex-direction:column; border-top:1px solid rgba(247,242,231,.14);
  background:#201f26; color:var(--paper);
}
.timeline-panel-header{
  height:44px; flex:none; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:0 .75rem 0 1rem; border-bottom:1px solid rgba(247,242,231,.12); background:#292830;
}
.timeline-panel-heading{ display:flex; align-items:baseline; gap:.75rem; min-width:0; }
.timeline-panel-title{ font:600 .72rem var(--font-mono); text-transform:uppercase; letter-spacing:.13em; }
.timeline-time{ color:rgba(247,242,231,.62); font:500 .68rem var(--font-mono); white-space:nowrap; }
.timeline-duration-control{ display:flex; align-items:center; gap:.25rem; color:rgba(247,242,231,.72); font:500 .65rem var(--font-mono); white-space:nowrap; }
.timeline-duration-control input{ width:4.6rem; box-sizing:border-box; border:1px solid rgba(247,242,231,.2); border-radius:5px; background:rgba(247,242,231,.08); color:var(--paper); padding:.22rem .32rem; font:inherit; }
.timeline-duration-control input:focus{ outline:2px solid var(--pink); outline-offset:1px; }
.timeline-duration-control input:disabled{ opacity:.4; }
.timeline-transport-controls{ display:flex; align-items:center; gap:.2rem; }
.timeline-edit-controls{ display:flex; align-items:center; gap:.2rem; }
.timeline-keyframe-controls{ display:flex; align-items:center; gap:.2rem; }
.timeline-auto-key-status{
  padding:.25rem .42rem; border:1px solid rgba(113,215,255,.28); border-radius:999px;
  color:#9fe5ff; background:rgba(113,215,255,.08); font:500 .56rem var(--font-mono); white-space:nowrap;
}
.timeline-marker-controls{ display:flex; align-items:center; gap:.2rem; }
.timeline-zoom-controls{ display:flex; align-items:center; gap:.2rem; }
.timeline-transport-controls button,.timeline-edit-controls button,.timeline-keyframe-controls button,.timeline-marker-controls button,.timeline-zoom-controls button{
  width:28px; height:28px; padding:0; border:1px solid rgba(247,242,231,.14); border-radius:7px;
  background:rgba(247,242,231,.04); color:var(--paper); cursor:pointer; font:600 .9rem var(--font-mono);
}
.timeline-edit-controls button,.timeline-keyframe-controls button,.timeline-marker-controls button{ width:auto; padding:0 .5rem; font-size:.62rem; }
.timeline-keyframe-controls select{
  height:28px; max-width:82px; border:1px solid rgba(247,242,231,.14); border-radius:7px;
  background:#292830; color:var(--paper); font:500 .62rem var(--font-mono);
}
.timeline-transport-controls button:hover:not(:disabled),.timeline-edit-controls button:hover:not(:disabled),.timeline-keyframe-controls button:hover:not(:disabled),.timeline-marker-controls button:hover:not(:disabled),.timeline-zoom-controls button:hover:not(:disabled){ background:rgba(247,242,231,.12); }
.timeline-transport-controls button:disabled,.timeline-edit-controls button:disabled,.timeline-keyframe-controls button:disabled,.timeline-marker-controls button:disabled,.timeline-zoom-controls button:disabled,.timeline-keyframe-controls select:disabled{ opacity:.36; cursor:default; }
.timeline-panel.is-playing [data-timeline-play]{ color:var(--pink); }
.timeline-zoom-controls output{ min-width:42px; color:rgba(247,242,231,.7); text-align:center; font:500 .66rem var(--font-mono); }
.timeline-panel-body{ position:relative; min-width:0; min-height:0; flex:1; display:flex; }
.timeline-scroll{ flex:1; min-width:0; width:auto; height:100%; overflow:auto; outline:none; scrollbar-color:#5d5a67 #292830; }
.timeline-scroll:focus-visible{ box-shadow:inset 0 0 0 2px var(--pink); }
.timeline-grid{ position:relative; display:grid; width:max-content; min-width:100%; align-content:start; }
.timeline-track-label{
  position:sticky; left:0; z-index:4; min-width:0; height:44px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:0 .8rem 0 1rem;
  border-right:1px solid rgba(247,242,231,.12); border-bottom:1px solid rgba(247,242,231,.08); background:#292830;
}
.timeline-ruler-label{ height:32px; color:rgba(247,242,231,.54); font:500 .62rem var(--font-mono); text-transform:uppercase; letter-spacing:.1em; }
.timeline-track-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.75rem; }
.timeline-track-toggle{
  flex:none; width:22px; height:22px; padding:0; border:0; border-radius:5px;
  background:transparent; color:rgba(247,242,231,.72); cursor:pointer; font:700 .8rem var(--font-mono);
}
.timeline-track-toggle:hover{ background:rgba(247,242,231,.1); color:#fff; }
.timeline-track-type{ flex:none; color:rgba(247,242,231,.46); font:500 .58rem var(--font-mono); text-transform:uppercase; }
.timeline-track-label.is-locked .timeline-track-type{ color:#e5b85c; }
.timeline-track-label.is-hidden,.timeline-lane.is-hidden{ opacity:.48; }
.timeline-track-audio-controls{ display:flex; gap:3px; margin-left:auto; }
.timeline-track-state{ min-width:22px; width:22px; height:22px; padding:0; border-radius:5px; font:700 .58rem var(--font-mono); }
.timeline-track-state.is-active{ color:#17151c; background:#e5b85c; border-color:#f5d98e; }
.timeline-ruler{
  position:relative; height:32px; overflow:hidden; border-bottom:1px solid rgba(247,242,231,.12);
  background-color:#25242b; background-image:linear-gradient(90deg,rgba(247,242,231,.06) 1px,transparent 1px); background-size:8px 100%; cursor:crosshair;
}
.timeline-ruler-tick{
  position:absolute; top:0; height:100%; padding:.5rem 0 0 .35rem; box-sizing:border-box;
  border-left:1px solid rgba(247,242,231,.22); color:rgba(247,242,231,.56); font:500 .58rem var(--font-mono); white-space:nowrap;
}
.timeline-marker{
  position:absolute; z-index:4; top:3px; width:12px; height:20px; margin-left:-6px; padding:0;
  border:0; background:transparent; cursor:pointer;
}
.timeline-marker::before{
  content:""; position:absolute; top:0; left:2px; width:8px; height:8px; transform:rotate(45deg);
  border:1px solid rgba(255,255,255,.8); background:#e5b85c; box-shadow:0 1px 3px rgba(0,0,0,.35);
}
.timeline-marker:hover::before,.timeline-marker.is-selected::before{ box-shadow:0 0 0 2px var(--pink),0 1px 3px rgba(0,0,0,.35); }
.timeline-lane{
  position:relative; height:44px; overflow:hidden; border-bottom:1px solid rgba(247,242,231,.08);
  background-color:#201f26; background-image:linear-gradient(90deg,rgba(247,242,231,.035) 1px,transparent 1px); background-size:8px 100%; cursor:crosshair;
}
.timeline-lane.is-muted{ opacity:.55; }
.timeline-lane-empty{ display:flex; align-items:center; padding:0 .8rem; color:rgba(247,242,231,.44); font-size:.7rem; }
.timeline-track-empty-label{ color:rgba(247,242,231,.42); font-size:.7rem; }
.timeline-group-label{ height:30px; justify-content:flex-start; gap:.4rem; color:#f0bfd0; background:#332b38; font:600 .66rem var(--font-mono); letter-spacing:.04em; }
.timeline-group-label.is-selected{ background:#49354c; box-shadow:inset 3px 0 0 var(--pink); }
.timeline-group-toggle{ width:22px; height:22px; padding:0; border:0; border-radius:5px; background:transparent; color:#f0bfd0; cursor:pointer; }
.timeline-group-toggle:hover{ background:rgba(255,255,255,.1); }
.timeline-group-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.timeline-group-count{ margin-left:auto; color:rgba(247,242,231,.45); font:500 .56rem var(--font-mono); white-space:nowrap; }
.timeline-group-lane{ position:relative; height:30px; padding:0; color:rgba(247,242,231,.34); background:#29232d; cursor:default; }
.timeline-group-lane.is-selected{ background:#322735; }
.timeline-group-range{ position:absolute; top:4px; bottom:4px; min-width:18px; overflow:hidden; padding:0 .5rem; border:1px solid rgba(240,191,208,.55); border-radius:5px; background:#704b70; color:#fff; cursor:grab; text-align:left; text-overflow:ellipsis; white-space:nowrap; font:600 .6rem var(--font-mono); }
.timeline-group-range:active{ cursor:grabbing; }
.timeline-panel.is-editing-group,.timeline-panel.is-editing-group *{ cursor:grabbing!important; user-select:none; }
.timeline-property-group-label,.timeline-property-group-lane{ height:26px; background:#25242b; }
.timeline-property-group-label{ justify-content:flex-start; padding-left:2.8rem; color:#d9b7c5; font:600 .62rem var(--font-mono); text-transform:uppercase; letter-spacing:.08em; }
.timeline-property-group-lane{ display:flex; align-items:center; padding-left:.75rem; color:rgba(247,242,231,.28); font:500 .56rem var(--font-mono); text-transform:uppercase; letter-spacing:.08em; }
.timeline-property-label{ height:30px; padding-left:3.15rem; background:#26252c; }
.timeline-property-label.is-active{ background:#302a33; }
.timeline-property-select{ flex:1; min-width:0; padding:0; border:0; background:transparent; color:rgba(247,242,231,.7); cursor:pointer; text-align:left; font:500 .66rem var(--font-mono); }
.timeline-property-label.is-active .timeline-property-select{ color:#fff; }
.timeline-property-add{ flex:none; width:21px; height:21px; padding:0; border:1px solid rgba(247,242,231,.16); border-radius:5px; background:rgba(247,242,231,.04); color:#fff; cursor:pointer; }
.timeline-property-add:hover:not(:disabled){ background:var(--pink-deep); }
.timeline-property-add:disabled{ opacity:.3; cursor:default; }
.timeline-property-lane{ height:30px; background-color:#1e1d23; }
.timeline-property-lane.is-active{ background-color:#242028; }
.timeline-property-segment{ position:absolute; top:50%; height:1px; background:rgba(229,184,92,.55); pointer-events:none; }
.timeline-property-keyframe{ top:50%; width:10px; height:10px; padding:0; }
.object-timeline-actions{ align-items:center; margin:.5rem 0; }
.object-timeline-status{ color:var(--ink-soft); font-size:.68rem; }
.object-motion-note{ margin:.55rem 0 .2rem; color:var(--ink-soft); font-size:.7rem; line-height:1.4; }
.timeline-clip{
  position:absolute; top:6px; bottom:6px; min-width:18px; display:flex; align-items:center; gap:.45rem;
  padding:0 .55rem; overflow:hidden; border:1px solid rgba(255,255,255,.18); border-radius:6px;
  background:#8a4860; color:#fff7f3; box-shadow:0 2px 8px rgba(0,0,0,.18); cursor:grab; text-align:left;
}
.timeline-clip:hover{ filter:brightness(1.12); border-color:rgba(255,255,255,.5); }
.timeline-clip:active,.timeline-clip.is-editing{ cursor:grabbing; filter:brightness(1.16); }
.timeline-clip.is-locked{ cursor:not-allowed; }
.timeline-clip.kind-image{ background:#9d5268; }
.timeline-clip.kind-video{ background:#5c608e; }
.timeline-clip.kind-audio{ background:#485f77; }
.timeline-clip.kind-text{ background:#3d7d78; }
.timeline-clip.kind-shape,.timeline-clip.kind-panel{ background:#9a673c; }
.timeline-clip.kind-group{ background:#6e587f; }
.timeline-clip.is-object-selected{ box-shadow:0 0 0 1px rgba(247,242,231,.78),0 2px 8px rgba(0,0,0,.18); }
.timeline-clip.is-selected{ border-color:#fff; box-shadow:0 0 0 2px var(--pink),0 3px 10px rgba(0,0,0,.3); z-index:2; }
.timeline-clip-name{ position:relative; z-index:2; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 .68rem var(--font-sans); }
.timeline-clip-duration{ position:relative; z-index:2; margin-left:auto; flex:none; opacity:.68; font:500 .58rem var(--font-mono); }
.timeline-waveform{
  position:absolute; z-index:1; inset:2px 8px; width:calc(100% - 16px); height:calc(100% - 4px);
  overflow:visible; opacity:.78; cursor:crosshair; touch-action:none;
}
.timeline-waveform path{ fill:none; stroke:rgba(221,244,255,.82); stroke-width:2.2; vector-effect:non-scaling-stroke; }
.timeline-gain-envelope{ position:absolute; z-index:2; inset:2px 8px; width:calc(100% - 16px); height:calc(100% - 4px); pointer-events:none; overflow:visible; }
.timeline-gain-envelope path{ fill:none; stroke:#f4d06f; stroke-width:1.8; vector-effect:non-scaling-stroke; }
.timeline-fade-handle{ position:absolute; z-index:6; top:2px; width:10px; height:10px; border-radius:50%; background:#f4d06f; border:1px solid #201c15; cursor:ew-resize; touch-action:none; }
.timeline-fade-handle.is-in{ margin-left:-5px; }
.timeline-fade-handle.is-out{ margin-right:-5px; }
.timeline-panel.is-editing-fade{ cursor:ew-resize; }
.timeline-waveform.is-loading{
  opacity:.3; background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  background-size:200% 100%; animation:timeline-waveform-loading 1.2s linear infinite;
}
.timeline-clip.kind-audio .timeline-clip-name,.timeline-clip.kind-audio .timeline-clip-duration{ text-shadow:0 1px 3px rgba(0,0,0,.8); }
@keyframes timeline-waveform-loading{ to{ background-position:-200% 0; } }
.timeline-clip-handle{
  position:absolute; z-index:3; top:0; bottom:0; width:8px; opacity:0; cursor:ew-resize;
  background:rgba(255,255,255,.22); transition:opacity .12s ease,background .12s ease;
}
.timeline-clip-handle.is-left{ left:0; border-radius:5px 0 0 5px; }
.timeline-clip-handle.is-right{ right:0; border-radius:0 5px 5px 0; }
.timeline-clip:hover .timeline-clip-handle,.timeline-clip.is-selected .timeline-clip-handle,.timeline-clip.is-editing .timeline-clip-handle{ opacity:1; }
.timeline-clip-handle:hover{ background:rgba(255,255,255,.5); }
.timeline-audio-controls{ display:flex; align-items:center; gap:.35rem; }
.timeline-audio-controls label{ display:flex; align-items:center; gap:.3rem; font-size:.68rem; }
.timeline-audio-controls input{ width:78px; }
.timeline-audio-controls output{ min-width:2.4rem; font:.62rem var(--font-mono); color:rgba(247,242,231,.7); }
.page-audio-volume{ display:flex; align-items:center; gap:.35rem; font-size:.72rem; }
.page-audio-volume input{ width:90px; }
.audio-container-field{ display:grid; gap:.3rem; margin-top:.55rem; color:var(--ink-soft); font-size:.72rem; }
.media-library{ margin-top:.65rem; padding-top:.6rem; border-top:1px solid rgba(35,34,42,.12); display:grid; gap:.45rem; }
.media-library-heading{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.media-library-heading strong{ font-size:.76rem; }
.media-library-items{ display:grid; gap:.35rem; max-height:190px; overflow:auto; }
.media-library-empty{ margin:0; color:#77727d; font-size:.7rem; line-height:1.35; }
.media-library-item{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(72px,auto) auto; gap:.3rem; align-items:center; padding:.35rem; border:1px solid rgba(35,34,42,.12); border-radius:6px; background:#fff; }
.media-library-item-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.71rem; }
.media-library-item .pbc-btn{ padding:.25rem .38rem; font-size:.68rem; }
.timeline-keyframe{
  position:absolute; z-index:4; top:50%; width:9px; height:9px; margin-left:-4px;
  transform:translateY(-50%) rotate(45deg); border:1px solid rgba(255,255,255,.9);
  background:#e5b85c; box-shadow:0 1px 3px rgba(0,0,0,.45); cursor:ew-resize;
}
.timeline-keyframe:hover,.timeline-keyframe.is-selected{ background:#fff; box-shadow:0 0 0 2px var(--pink),0 1px 3px rgba(0,0,0,.45); }
.timeline-keyframe-preview{
  position:absolute; z-index:1; top:3px; height:20px; overflow:visible; pointer-events:none; opacity:.62;
}
.timeline-keyframe-preview path{ fill:none; stroke:rgba(255,255,255,.78); stroke-width:3; vector-effect:non-scaling-stroke; }
.timeline-keyframe-preview.is-hold path{ stroke-dasharray:3 2; }
.timeline-panel.is-editing-keyframe,.timeline-panel.is-editing-keyframe *{ cursor:ew-resize!important; user-select:none; }
.timeline-panel.is-editing-clip[data-timeline-clip-edit-mode="move"],.timeline-panel.is-editing-clip[data-timeline-clip-edit-mode="move"] *{ cursor:grabbing!important; user-select:none; }
.timeline-panel.is-editing-clip:not([data-timeline-clip-edit-mode="move"]),.timeline-panel.is-editing-clip:not([data-timeline-clip-edit-mode="move"]) *{ cursor:ew-resize!important; user-select:none; }
.timeline-snap-guide{
  position:absolute; z-index:5; top:0; bottom:0; width:1px; margin-left:-1px; pointer-events:none;
  background:#71d7ff; box-shadow:0 0 0 1px rgba(113,215,255,.16);
}
.timeline-playhead{
  position:absolute; z-index:3; top:0; bottom:0; width:11px; margin-left:-5px; cursor:ew-resize;
  background:linear-gradient(90deg,transparent 5px,#ff7188 5px,#ff7188 6px,transparent 6px);
}
.timeline-playhead::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  border-left:5px solid transparent; border-right:5px solid transparent; border-top:7px solid #ff7188;
}
.timeline-panel.is-scrubbing,.timeline-panel.is-scrubbing *{ cursor:ew-resize!important; user-select:none; }
.timeline-curve-panel{
  width:224px; flex:none; box-sizing:border-box; padding:.65rem .75rem; overflow:auto;
  border-left:1px solid rgba(247,242,231,.12); background:#292830;
}
.timeline-curve-panel[hidden]{ display:none; }
.timeline-curve-heading{ display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; margin-bottom:.55rem; }
.timeline-curve-heading strong{ font:600 .68rem var(--font-mono); text-transform:uppercase; letter-spacing:.1em; }
.timeline-curve-help{ margin:0 0 .65rem; color:rgba(247,242,231,.58); font-size:.64rem; line-height:1.4; }
.timeline-curve-heading output{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:rgba(247,242,231,.58); font-size:.58rem; }
.timeline-curve-easing-label{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.5rem; color:rgba(247,242,231,.68); font-size:.62rem; }
.timeline-curve-easing-label select{ width:118px; padding:.3rem; border:1px solid rgba(247,242,231,.16); border-radius:6px; background:#201f26; color:var(--paper); font:500 .62rem var(--font-mono); }
.timeline-curve-graph{ width:100%; height:auto; overflow:visible; border:1px solid rgba(247,242,231,.12); border-radius:6px; background:#201f26; touch-action:none; }
.timeline-curve-axis{ stroke:rgba(247,242,231,.12); stroke-width:1; }
.timeline-curve-path{ fill:none; stroke:#ff7188; stroke-width:3; }
.timeline-curve-handle-line{ stroke:#71d7ff; stroke-width:1.5; }
.timeline-curve-handle{ fill:#71d7ff; stroke:#fff; stroke-width:1.5; cursor:grab; }
.timeline-curve-handle:hover,.timeline-curve-handle.is-selected{ fill:#fff; stroke:#ff7188; stroke-width:3; }
.timeline-curve-panel.is-hold .timeline-curve-handle,.timeline-curve-panel.is-hold .timeline-curve-handle-line{ display:none; }
.timeline-curve-values{ display:block; margin-top:.4rem; color:rgba(247,242,231,.56); font:500 .56rem var(--font-mono); text-align:center; }
.timeline-empty{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:.75rem;
  color:rgba(247,242,231,.56); font-size:.75rem; background:#201f26;
}
.timeline-empty[hidden]{ display:none; }
.timeline-start-btn{
  border:1px solid rgba(247,242,231,.34); border-radius:999px; padding:.4rem .8rem;
  background:transparent; color:var(--paper); cursor:pointer; font:600 .68rem var(--font-sans);
}
.timeline-start-btn:hover{ border-color:var(--pink); background:rgba(232,93,117,.16); }
.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-spread-layer{ position:absolute; inset:0; overflow:hidden; pointer-events:none; border-radius:6px; }
.preview-spread-layer .placed-object{ pointer-events:none; }
.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; }

/* post-save confirmation — swaps in over the editable form so the settings the
   save applied are actually shown (replaces the old ~550ms auto-close). */
.save-project-modal.is-saved .save-project-grid,
.save-project-modal.is-saved .save-project-field,
.save-project-modal.is-saved .save-project-help,
.save-project-modal.is-saved .save-project-status,
.save-project-modal.is-saved .save-project-actions{ display:none; }
.modal-ghost{ border:1px solid var(--ink); background:transparent; color:var(--ink); }
.modal-ghost:hover{ background:var(--ink); color:var(--paper); }
.save-project-confirm{ padding-top:.25rem; }
.save-confirm-heading{ display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; }
.save-confirm-check{
  flex:none; width:2rem; height:2rem; border-radius:999px; background:var(--teal); color:var(--paper);
  display:flex; align-items:center; justify-content:center; font-size:1rem; font-weight:700;
}
.save-confirm-titles{ flex:1; min-width:0; }
.save-confirm-eyebrow{ display:block; color:var(--teal-deep); font-family:var(--font-mono); font-size:.67rem; letter-spacing:.12em; text-transform:uppercase; }
.save-confirm-heading h3{ margin:.1rem 0 0; font-family:var(--font-display); font-size:1.2rem; }
.save-confirm-details{ margin:0; display:grid; gap:.6rem; }
.save-confirm-details > div{ display:grid; grid-template-columns:6rem 1fr; gap:.5rem; align-items:baseline; }
.save-confirm-details dt{ color:var(--ink-soft); font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; }
.save-confirm-details dd{ margin:0; color:var(--ink); font-size:.85rem; }
.save-confirm-help{ margin:1rem 0 0; color:var(--ink-soft); font-size:.76rem; }
.save-confirm-actions{ margin-top:1rem; }
.badge{
  display:inline-block; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.25rem .55rem; border-radius:999px; font-weight:600; white-space:nowrap;
  border:1px solid var(--line); background:var(--paper-deep); color:var(--ink-soft);
}
.badge.draft{ background:var(--paper-deep); color:var(--ink-soft); }
.badge.ready{ background:var(--teal); color:var(--paper); border-color:var(--teal); }

@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 minmax(0,1fr); grid-template-rows:minmax(0,1fr) 210px; }
  .side-panel{ display:none; }
  .timeline-panel{ --timeline-label-width:138px; }
}

@media (max-width:1100px){
  .topbar{ padding-inline:.65rem; gap:.4rem; }
  .topbar-left,.topbar-right{ gap:.25rem; min-width:0; }
  .brand-name,.project-switcher-label{ display:none; }
  .project-switcher-name{ max-width:145px; }
  .topbar .btn{ padding-inline:.65rem; }
}

@media (max-width:760px){
  .workspace-zoom-controls{ position:static; }
}

/* ---------- 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; }
}
.publish-catalog-fields{max-height:46vh;overflow:auto;margin:18px 0;padding-right:8px}.publish-catalog-fields .publish-summary-field{grid-column:1/-1}.publish-catalog-fields textarea{min-height:84px;resize:vertical}.publish-check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;align-self:end;min-height:42px}.publish-check input{width:auto!important}.publish-catalog-fields select[multiple]{min-height:76px}