#app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.editor { flex: 1; display: flex; min-height: 0; }

.thumbs { width: 190px; background: #f6f6f6; border-right: 1px solid var(--fo-line); overflow-y: auto; padding: 12px 10px; }
.thumb { position: relative; margin-bottom: 12px; cursor: pointer; }
.thumb .mini {
  width: 100%; aspect-ratio: 16/9; background: #fff; border: 2px solid var(--fo-line); border-radius: 4px;
  overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.08); position: relative;
}
.thumb.active .mini { border-color: var(--app-accent, #c43e1c); }
.thumb .num { position: absolute; left: -2px; top: 4px; font-size: 11px; color: var(--fo-muted); width: 16px; text-align: center; }
.thumb .mini .el { position: absolute; overflow: hidden; }

.stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; background: #e9ebee; overflow: auto; padding: 24px; }
.notes-bar { width: 100%; max-width: 960px; margin-top: 12px; }
.notes-bar textarea { width: 100%; height: 68px; border: 1px solid var(--fo-line); border-radius: 8px; padding: 8px 10px; font: 14px/1.4 "Segoe UI", sans-serif; resize: vertical; background: #fff; }
.notes-bar textarea:focus { outline: none; border-color: var(--app-accent, #c43e1c); }
.notes-bar.expanded textarea { height: 150px; }

/* inking + view toggles */
.ink-layer { z-index: 5; }
#pen-tools { display: flex; align-items: center; }
.pen.sel { outline: 2px solid var(--app-accent, #c43e1c); outline-offset: 1px; }
#canvas.show-grid { background-image: linear-gradient(#0000000d 1px, transparent 1px), linear-gradient(90deg, #0000000d 1px, transparent 1px); background-size: 48px 48px; }
.stage.show-ruler { padding-top: 0; }
.stage.show-ruler::before { content: ""; display: block; width: 960px; height: 18px; background: repeating-linear-gradient(90deg, #fff, #fff 47px, #bbb 47px, #bbb 48px); border: 1px solid var(--fo-line); margin-bottom: 6px; }

/* presenter view */
.presenter { position: fixed; inset: 0; background: #0d0d0d; z-index: 210; display: flex; flex-direction: column; }
.presenter[hidden] { display: none; }
.pv-main { flex: 1; display: flex; gap: 18px; padding: 22px; min-height: 0; }
.pv-cur { flex: 2; background: #000; display: grid; place-items: center; border-radius: 8px; overflow: hidden; }
.pv-cur .pv-slide { width: 100%; aspect-ratio: 16/9; background: #fff; position: relative; overflow: hidden; }
.pv-side { flex: 1; display: flex; flex-direction: column; color: #eaeaea; min-width: 0; }
.pv-next-label, .pv-notes-label { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #9a9a9a; margin-bottom: 6px; }
.pv-next { aspect-ratio: 16/9; background: #fff; position: relative; overflow: hidden; border-radius: 6px; margin-bottom: 14px; }
.pv-notes { flex: 1; background: #1c1c1c; border-radius: 6px; padding: 14px; overflow: auto; font-size: 18px; line-height: 1.5; white-space: pre-wrap; }
.slide-canvas {
  width: 960px; height: 540px; background: #fff; box-shadow: 0 3px 16px rgba(0,0,0,.2); position: relative;
  flex: 0 0 auto; overflow: hidden;
}
.el {
  position: absolute; padding: 6px 8px; outline: none; cursor: move; box-sizing: border-box;
  font-family: "Segoe UI", Calibri, sans-serif;
}
.el.text { min-width: 60px; }
.el.rect { background: var(--app-accent, #c43e1c); border-radius: 4px; }
.el.img img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.el.selected { outline: 2px solid var(--app-accent, #c43e1c); outline-offset: 1px; }
.el[contenteditable="true"] { cursor: text; }

.statusbar { display: flex; align-items: center; gap: 18px; height: 26px; padding: 0 14px; background: var(--app-accent, #c43e1c); color: #fff; font-size: 12px; }

#doc-list button { display: block; width: 100%; text-align: left; padding: 6px 10px; border: none; background: none; border-radius: 4px; cursor: pointer; font-size: 13px; }
#doc-list button:hover { background: var(--fo-hover, #eee); }

/* theme swatches in Design tab */
.theme-chip { width: 74px; height: 42px; border-radius: 4px; border: 1px solid var(--fo-line); cursor: pointer; margin: 0 3px; display: grid; place-items: center; font-size: 10px; color: #fff; }
.theme-chip:hover { outline: 2px solid var(--app-accent,#c43e1c); }

/* presentation mode */
.present { position: fixed; inset: 0; background: #000; z-index: 200; display: grid; place-items: center; }
.present[hidden] { display: none; }
.present-slide { width: 90vw; max-width: 1280px; aspect-ratio: 16/9; background: #fff; position: relative; overflow: hidden; box-shadow: 0 0 40px rgba(0,0,0,.6); }
.present-slide .el { cursor: default; }
.present-nav { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; color: #fff; }
.present-nav button { background: rgba(255,255,255,.15); color: #fff; border: none; width: 40px; height: 40px; border-radius: 50%; font-size: 18px; cursor: pointer; }

/* slide transitions (used in present mode + preview) */
@keyframes tx-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes tx-push { from { transform: translateX(100%) } to { transform: translateX(0) } }
@keyframes tx-wipe { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(0 0 0 0) } }
@keyframes tx-split { from { clip-path: inset(0 50% 0 50%) } to { clip-path: inset(0 0 0 0) } }
@keyframes tx-cover { from { transform: translateY(100%) } to { transform: translateY(0) } }
@keyframes tx-uncover { from { transform: scale(1.15); opacity: .2 } to { transform: scale(1); opacity: 1 } }
@keyframes tx-morph { from { transform: scale(.85); opacity: 0 } to { transform: scale(1); opacity: 1 } }
@keyframes tx-flash { 0% { opacity: 0 } 40% { opacity: 1; filter: brightness(2) } 100% { opacity: 1; filter: none } }
@keyframes tx-fall { from { transform: perspective(900px) rotateX(-90deg); transform-origin: top; opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes tx-reveal { from { transform: translateX(-40%); opacity: 0 } to { transform: none; opacity: 1 } }
.tx-fade { animation: tx-fade var(--tx-dur,.6s) ease both; }
.tx-push { animation: tx-push var(--tx-dur,.6s) ease both; }
.tx-wipe { animation: tx-wipe var(--tx-dur,.6s) ease both; }
.tx-split { animation: tx-split var(--tx-dur,.6s) ease both; }
.tx-cover { animation: tx-cover var(--tx-dur,.6s) ease both; }
.tx-uncover { animation: tx-uncover var(--tx-dur,.6s) ease both; }
.tx-morph { animation: tx-morph var(--tx-dur,.6s) ease both; }
.tx-flash { animation: tx-flash var(--tx-dur,.6s) ease both; }
.tx-fall { animation: tx-fall var(--tx-dur,.6s) ease both; }
.tx-reveal { animation: tx-reveal var(--tx-dur,.6s) ease both; }

/* shape variety */
.el.shape { }
.el.shape.ellipse { border-radius: 50%; }
.el.shape.triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.el.shape.arrow { clip-path: polygon(0 30%, 60% 30%, 60% 0, 100% 50%, 60% 100%, 60% 70%, 0 70%); }
.el.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%); }
.el.shape.line { height: 4px !important; background: currentColor; }

/* element entrance animations (play in present mode) */
@keyframes an-appear { from { opacity: 0 } to { opacity: 1 } }
@keyframes an-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes an-fly { from { transform: translateY(60px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes an-float { from { transform: translateY(24px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes an-split { from { clip-path: inset(0 50% 0 50%) } to { clip-path: inset(0 0 0 0) } }
@keyframes an-wipe { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(0 0 0 0) } }
@keyframes an-zoom { from { transform: scale(.3); opacity: 0 } to { transform: scale(1); opacity: 1 } }
@keyframes an-grow { from { transform: scale(.3) rotate(-90deg); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes an-wheel { from { clip-path: polygon(50% 50%,50% 0,50% 0,50% 0); opacity:.4 } to { clip-path: polygon(50% 50%,50% 0,150% 150%,-50% 150%); opacity:1 } }
.an-appear { animation: an-appear .01s both; } .an-fade { animation: an-fade var(--an-dur,.6s) ease both; }
.an-fly { animation: an-fly var(--an-dur,.6s) ease both; } .an-float { animation: an-float var(--an-dur,.6s) ease both; }
.an-split { animation: an-split var(--an-dur,.6s) ease both; } .an-wipe { animation: an-wipe var(--an-dur,.6s) ease both; }
.an-zoom { animation: an-zoom var(--an-dur,.6s) ease both; } .an-grow { animation: an-grow var(--an-dur,.7s) ease both; }
.an-wheel { animation: an-wheel var(--an-dur,.7s) ease both; }
.anim-badge { position: absolute; left: -10px; top: -8px; background: var(--app-accent,#c43e1c); color: #fff; font-size: 10px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; }
.anim-pane { font-size: 12px; }
.anim-pane .ap-item { display: flex; gap: 6px; padding: 4px 6px; border-radius: 4px; align-items: center; }
.anim-pane .ap-item:hover { background: #f2f2f2; }

/* transition gallery chips */
.tx-chip { width: 78px; height: 52px; border: 1px solid var(--fo-line); border-radius: 4px; cursor: pointer; display: grid; place-items: center; font-size: 11px; margin: 2px; background: #fff; }
.tx-chip:hover { outline: 2px solid var(--app-accent,#c43e1c); }
.tx-chip.sel { border-color: var(--app-accent,#c43e1c); background: #fdeee9; font-weight: 600; }
.shape-btn { width: 30px; height: 28px; border: 1px solid var(--fo-line); border-radius: 4px; cursor: pointer; margin: 2px; background: #fff; display: grid; place-items: center; font-size: 14px; }
.shape-btn:hover { outline: 2px solid var(--app-accent,#c43e1c); }
.theme-g { width: 96px; height: 54px; border: 1px solid var(--fo-line); border-radius: 4px; cursor: pointer; margin: 2px; overflow: hidden; display: flex; flex-direction: column; }
.theme-g:hover { outline: 2px solid var(--app-accent,#c43e1c); }
.theme-g .tg-top { flex: 1; display: grid; place-items: center; font-weight: 700; }
.theme-g .tg-bar { height: 8px; }