/* Boxes presentation studio — dark editor theme */

html, body { margin: 0; padding: 0; }
body {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    background: #0e1013;
    color: #e8eaee;
    overflow: hidden;
}
.mono { font-family: Consolas, "Courier New", monospace; font-size: 12px; opacity: .8; }
.app-shell { height: 100vh; }

/* ---------- top bar ---------- */
.studio { display: flex; flex-direction: column; height: 100vh; }
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 14px; background: #16181d; border-bottom: 1px solid #262a32;
}
.brand { font-size: 18px; font-weight: 600; }
.brand .logo { color: #4b93ff; }
.brand .sub { font-size: 12px; font-weight: 400; color: #8b93a5; margin-left: 6px; }
.actions { display: flex; gap: 8px; }
.align-group { display: inline-flex; gap: 2px; align-items: center; padding: 0 4px;
    border-left: 1px solid #2b3038; border-right: 1px solid #2b3038; }

.btn {
    background: #2a2f3a; color: #e8eaee; border: 1px solid #3a4150;
    border-radius: 6px; padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.btn:hover { background: #343b48; }
.btn.primary { background: #2f6fe0; border-color: #2f6fe0; color: #fff; }
.btn.primary:hover { background: #3b7ef0; }
.btn.ghost { background: transparent; }
.btn.danger { background: #5a2326; border-color: #7a2f33; color: #ffb4b8; }
.btn.sm { padding: 3px 9px; font-size: 12px; }
.btn-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* Demo picker in the toolbar: a select styled like the other buttons. */
.demo-pick select {
    background: transparent; color: #e8eaee; border: 1px solid #3a4150;
    border-radius: 6px; padding: 6px 8px; font-size: 13px; cursor: pointer;
}
.demo-pick select:hover { background: #343b48; }
.demo-pick option { background: #1e222a; }

/* Upload row in the inspector. The real file input is visually hidden;
   its label is styled as the button that opens the picker. */
.upload-row { display: flex; align-items: center; gap: 8px; margin: -4px 0 10px; flex-wrap: wrap; }
.file-btn { cursor: pointer; display: inline-block; }
.file-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.upload-row .err { color: #ffb4b8; font-size: 12px; }
.upload-row .warn { color: #e8c56a; font-size: 12px; }
.upload-row .dim { color: #8b93a5; font-size: 12px; }

.hint {
    display: flex; align-items: center; justify-content: space-between;
    background: #1d2b45; color: #cfe0ff; font-size: 12.5px;
    padding: 6px 14px; border-bottom: 1px solid #2b3a58;
    /* Never swallow canvas clicks if layout ever overlaps again; the
       "got it" button stays clickable. */
    pointer-events: none;
}
.hint .btn { pointer-events: auto; }

/* ---------- workbench layout ---------- */
.workbench { display: flex; flex: 1; min-height: 0; }
/* Left control bar: a permanent sidebar like the right inspector,
   where the Draw button lives. Draw controls on top; the selected
   box's quick-edit section below. Nothing here floats over the
   canvas. */
.left-bar {
    width: 264px; flex-shrink: 0; background: #14161b;
    border-right: 1px solid #262a32; overflow-y: auto;
    display: flex; flex-direction: column;
}
.bar-sect { padding: 12px; border-bottom: 1px solid #22262f; }
.bar-sect h4 {
    margin: 0 0 8px; font-size: 12px; text-transform: uppercase;
    letter-spacing: .06em; color: #8b93a5;
}
.bar-hint { color: #7c8494; font-size: 12px; line-height: 1.45; margin: 0; }
.bar-shapes { display: flex; gap: 6px; margin-top: 8px; }
.bar-shapes .rail-btn { flex: 1; justify-content: center; }
/* Create panel (left bar): the sequence / loading-indicator makers.
   Same palette as the quick-edit rows; compact two-column rows. */
.create-panel .cr-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.create-panel .cr-row > span:first-child { width: 72px; flex: none; color: #9aa1ad; font-size: 12px; }
.create-panel .cr-row input[type="number"], .create-panel .cr-row input[type="text"] {
    flex: 1; min-width: 0; background: #0d0f13; color: #eee; border: 1px solid #333a45;
    border-radius: 4px; padding: 3px 4px; font-size: 12px;
}
.create-panel .cr-row select {
    flex: 1; min-width: 0; background: #0d0f13; color: #eee; border: 1px solid #333a45;
    border-radius: 4px; padding: 3px 4px; font-size: 12px;
}
.create-panel .cr-lines, .quick-edit .qe-lines {
    width: 100%; box-sizing: border-box; margin-top: 6px; background: #0d0f13; color: #eee;
    border: 1px solid #333a45; border-radius: 4px; padding: 4px 6px; font-size: 12px;
    font-family: inherit; resize: vertical;
}
.create-panel .cr-file {
    display: inline-block; margin-top: 6px; font-size: 12px; color: #9db8e8; cursor: pointer;
    border: 1px dashed #3a4658; border-radius: 6px; padding: 4px 8px;
}
.create-panel .cr-file input { display: none; }
.create-panel .cr-create { margin-top: 10px; width: 100%; }
.create-panel .cr-second { margin-top: 16px; }
/* Cycler box: the current item of the sequence, centered in the box. */
.box-cycler {
    display: flex; align-items: center; justify-content: center;
    white-space: pre-wrap; text-align: center;
}
.box-loader { width: 100%; height: 100%; }
.box-loader svg { width: 100%; height: 100%; display: block; }
.rail-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; width: 100%; font-size: 13px;
    background: transparent; color: #aab2c2; border: 1px solid transparent;
    border-radius: 8px; cursor: pointer;
}
.rail-btn:hover { background: #1d2026; color: #fff; }
.rail-btn.on {
    background: #2a2138; color: #e8cffe; border-color: #8b5fc0;
    box-shadow: 0 0 0 1px #8b5fc0 inset;
}
.rail-glyph { font-size: 17px; line-height: 1; }
.rail-label { font-size: 13px; letter-spacing: .02em; }
.center-col { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.inspector-col {
    width: 300px; flex-shrink: 0; background: #14161b;
    border-left: 1px solid #262a32; overflow-y: auto;
}
.canvas-wrap {
    flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
    padding: 18px; overflow: auto; background: #0e1013;
    /* Query container so the canvas can size itself against the wrap's
       real height (which changes as the timeline is resized). */
    container-type: size;
}

/* ---------- canvas & boxes ---------- */
.box-canvas {
    /* Largest 16:9 rect that fits the wrap: cap the width at both the
       wrap's width and its height*16/9. Shrinks automatically when the
       timeline grows or the hint bar wraps — never slides under its
       neighbors and steals their clicks. */
    width: min(100%, calc(100cqh * 1.7778));
    aspect-ratio: 16 / 9; background: #202329; border-radius: 8px;
    position: relative;
    container-type: size; user-select: none; -webkit-user-select: none;
    touch-action: none; outline: none; overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,.5);
    margin: auto;
}
.canvas-grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 25% 25%;
}

/* ---------- connectors (draw-mode arrows) ---------- */
/* One SVG over the whole stage: the arrows always float above the
   boxes. Inert (pointer-events: none) except for the draw-mode
   children, so an arrow never steals a click meant for a box. */
.connector-layer {
    position: absolute; inset: 0; width: 100%; height: 100%;
    z-index: 50; pointer-events: none; overflow: visible;
}
.box-canvas.draw-mode { cursor: crosshair; }
.box-canvas.draw-mode .box { cursor: crosshair; }
.conn-vis.conn-dim { opacity: .35; }
.conn-under { opacity: .4; }
.conn-draw-bg { pointer-events: all; cursor: crosshair; }
.conn-hit { pointer-events: stroke; cursor: grab; }
.conn-guide {
    stroke: #4b93ff; stroke-width: 1; stroke-dasharray: 3 3;
    opacity: .8; fill: none; pointer-events: none;
}
.conn-handle {
    fill: #fff; stroke: #4b93ff; stroke-width: 1.5;
    pointer-events: all; cursor: grab;
}
.conn-handle.h-p2 { fill: #4b93ff; stroke: #fff; }
.box { position: absolute; cursor: move; }
.box.selected { outline: 2px solid #4b93ff; outline-offset: 0; }
.box-clip { position: absolute; inset: 0; overflow: hidden; }
.box-anim { width: 100%; height: 100%; position: relative; }
.box-color { position: absolute; inset: 0; }
.box-text {
    width: 100%; height: 100%; padding: 0.6cqh 4%; box-sizing: border-box;
    white-space: pre-wrap; overflow: hidden; line-height: 1.25;
}
/* Text FX units (preset text animation): letters and words are
   inline-block so they can rise, pop and step independently; word
   wrappers never break mid-word, so the text wraps exactly like the
   plain single-run rendering it replaces. */
.box-text .tu { display: inline-block; }
.box-text .tu-w { display: inline-block; white-space: nowrap; }
.box-text .tu-line { display: block; }
.box-media { width: 100%; height: 100%; object-fit: cover; display: block; background: #101216; }
/* Edit-mode filmstrip still: covers the element while scrubbing. */
.box-media.strip-frame { position: absolute; inset: 0; background: transparent; }
/* Transparent-backing images (PNG/WebP/SVG — icons, logos, artwork):
   no placeholder backdrop behind their clear parts. */
.box-media.img-clear { background: transparent; }

.box-id {
    position: absolute; top: -22px; left: 0; font-size: 11px;
    background: #4b93ff; color: #fff; padding: 1px 7px; border-radius: 4px;
    pointer-events: none; white-space: nowrap;
}
.box-delete {
    position: absolute; top: -24px; right: -8px; width: 22px; height: 22px;
    border-radius: 50%; border: none; background: #e5484d; color: #fff;
    font-size: 14px; line-height: 1; cursor: pointer; padding: 0;
}
.handle {
    position: absolute; width: 12px; height: 12px; background: #fff;
    border: 2px solid #4b93ff; border-radius: 3px; z-index: 2;
}
.handle.nw { top: -7px; left: -7px; cursor: nwse-resize; }
.handle.n  { top: -7px; left: calc(50% - 6px); cursor: ns-resize; }
.handle.ne { top: -7px; right: -7px; cursor: nesw-resize; }
.handle.e  { top: calc(50% - 6px); right: -7px; cursor: ew-resize; }
.handle.se { bottom: -7px; right: -7px; cursor: nwse-resize; }
.handle.s  { bottom: -7px; left: calc(50% - 6px); cursor: ns-resize; }
.handle.sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.handle.w  { top: calc(50% - 6px); left: -7px; cursor: ew-resize; }

/* ---------- inspector ---------- */
.inspector { padding: 4px 0 20px; }
.insp-section { padding: 12px 14px; border-bottom: 1px solid #22262e; }
.insp-section h3 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #8b93a5; }
.insp-section h3 em { text-transform: none; letter-spacing: 0; font-style: normal; opacity: .7; }
.fld { display: block; margin-bottom: 10px; font-size: 13px; }
.fld > span { display: block; margin-bottom: 4px; color: #aab2c2; font-size: 12px; }
.fld > span em { font-style: normal; float: right; color: #e8eaee; }
.fld input[type="text"], .fld input[type="number"], .fld textarea, .fld select {
    width: 100%; box-sizing: border-box; background: #1e222a; color: #e8eaee;
    border: 1px solid #343b48; border-radius: 6px; padding: 6px 8px; font-size: 13px;
}
.fld input[type="range"] { width: 100%; accent-color: #4b93ff; }
.fld input[type="color"] { width: 44px; height: 30px; padding: 2px; background: #1e222a; border: 1px solid #343b48; border-radius: 6px; }
.seg { display: flex; gap: 4px; }
.seg-btn { flex: 1; background: #1e222a; color: #aab2c2; border: 1px solid #343b48; border-radius: 6px; padding: 5px 2px; font-size: 11.5px; cursor: pointer; }
.seg-btn:hover { border-color: #4b93ff; color: #e8eaee; }
.seg-btn.on { background: #4b93ff; border-color: #4b93ff; color: #fff; }
.fld.row { display: flex; align-items: center; justify-content: space-between; }
.fld.row > span { margin: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grid4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; }
.seg { display: flex; gap: 4px; margin-bottom: 4px; }
.seg button {
    flex: 1; background: #1e222a; color: #aab2c2; border: 1px solid #343b48;
    border-radius: 6px; padding: 6px 0; font-size: 12px; cursor: pointer;
}
.seg button.active { background: #2f6fe0; border-color: #2f6fe0; color: #fff; }
.tips ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: #aab2c2; }
.tips li { margin-bottom: 6px; }
.tips b { color: #e8eaee; }

/* ---------- timeline ---------- */
.timeline {
    flex-shrink: 0; height: 300px; background: #14161b;
    border-top: 1px solid #262a32; display: flex; flex-direction: column;
}
/* Draggable divider: pull up/down to reveal more or fewer tracks. */
.tl-resizer {
    height: 9px; flex-shrink: 0; cursor: ns-resize; touch-action: none;
    position: relative; background: transparent;
}
.tl-resizer::after {
    content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 3px;
    background: #262a32; border-radius: 2px;
}
.tl-resizer:hover::after { background: #4b93ff; }
.tl-head {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 12px; border-bottom: 1px solid #22262e;
}
.tl-time { font-size: 12px; color: #cfd5df; }
.tl-sp { flex: 1; }
.tl-scroll { flex: 1; overflow: auto; touch-action: none; user-select: none; position: relative; }
.tl-content { position: relative; }
.tl-ruler {
    display: flex; height: 24px; border-bottom: 1px solid #22262e;
    position: sticky; top: 0; z-index: 4; background: #14161b; cursor: ew-resize;
}
.tl-corner {
    width: 170px; flex: none; position: sticky; left: 0; z-index: 5; background: #14161b;
    font-size: 10px; color: #8b93a5; display: flex; align-items: center; padding: 0 12px;
    text-transform: uppercase; letter-spacing: .08em; box-sizing: border-box;
}
.tl-ticks { position: relative; flex: 1; }
.tl-tick { position: absolute; top: 0; font-size: 10px; color: #7b8494; white-space: nowrap; }
.tl-tick i { display: block; width: 1px; height: 6px; background: #3a4050; margin: 2px 0 1px; }
.tl-row { display: flex; height: 30px; border-bottom: 1px solid #1b1f26; }
.tl-label {
    width: 170px; flex: none; position: sticky; left: 0; z-index: 3; background: #16181d;
    border: none; color: #aab2c2; font-size: 12px; padding: 0 12px; cursor: pointer;
    display: flex; align-items: center; gap: 8px; text-align: left;
}
.tl-label.active { color: #fff; }
.tl-label-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tl-dot.type-color { background: #c39bd3; }
.tl-dot.type-text { background: #85c1e9; }
.tl-dot.type-image { background: #f39c4a; }
.tl-dot.type-video { background: #82e0aa; }
.tl-dot.type-audio { background: #c05fd0; }
.tl-track { position: relative; flex: 1; background: #101216; }
.tl-bar {
    position: absolute; top: 5px; height: 20px; border-radius: 5px; cursor: grab;
    border: 1px solid rgba(255,255,255,.25); box-sizing: border-box; min-width: 8px;
    overflow: hidden;
}
.tl-bar.active { outline: 2px solid #fff; outline-offset: 1px; }
.tl-bar.type-color { background: #c39bd3; }
.tl-bar.type-text { background: #85c1e9; }
.tl-bar.type-image { background: #f39c4a; }
.tl-bar.type-video { background: #82e0aa; }
.tl-bar.type-arrow { background: #8b5fc0; }
.tl-bar.type-audio {
  background: repeating-linear-gradient(45deg, #7d3f8c 0 8px, #9350a5 8px 16px);
}
.tl-row.audio { background: rgba(192, 95, 208, .05); }
.tl-audio-error { color: #ff9d9d; font-size: 12px; }
.tl-audio-edit {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 5px 10px; background: #191423; border-bottom: 1px solid #2c2140;
  font-size: 12px; color: #cfc4e8;
}
.tl-audio-edit .tae-ic { color: #c05fd0; }
.tl-audio-edit .tae-name {
  background: #0d0f13; color: #eee; border: 1px solid #3a2f52; border-radius: 4px;
  padding: 3px 6px; width: 180px;
}
.tl-audio-edit input[type="number"] {
  background: #0d0f13; color: #eee; border: 1px solid #3a2f52; border-radius: 4px;
  padding: 3px 4px; width: 64px;
}
.tl-audio-edit input[type="range"] { width: 90px; vertical-align: middle; }
.tl-audio-edit .tae-where { color: #9d8fc4; }
.tl-dot.type-arrow { background: #8b5fc0; }
.tl-bar .tl-drawstripe {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: rgba(255,255,255,.28); border-right: 1px solid rgba(255,255,255,.5);
    cursor: ew-resize;
}
.tl-bar-label {
    font-size: 10px; color: #17202b; font-weight: 600; padding: 0 10px; line-height: 18px;
    white-space: nowrap; pointer-events: none;
}
/* Enter/exit animation segments: striped overlays at the bar's ends so the
   timeline shows when a box animates in and out, not just when on screen. */
.tl-anim {
    position: absolute; top: 0; bottom: 0; pointer-events: none;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,.30) 0 3px, rgba(255,255,255,.10) 3px 6px);
    border-right: 1px solid rgba(255,255,255,.55);
}
.tl-anim.exit { border-right: none; border-left: 1px solid rgba(255,255,255,.55); }
.tl-anim-grip {
    position: absolute; top: 0; bottom: 0; width: 12px; cursor: ew-resize;
    pointer-events: auto; /* the stripe itself is pointer-events:none */
}
.tl-anim-grip.r { right: -6px; border-right: 3px solid rgba(255,255,255,.75); }
.tl-anim-grip.l { left: -6px; border-left: 3px solid rgba(255,255,255,.75); }
.tl-anim-grip:hover { background: rgba(255,255,255,.18); }
.tl-grip {
    position: absolute; top: 0; bottom: 0; width: 10px; cursor: ew-resize;
}
.tl-grip.l { left: 0; border-left: 3px solid rgba(255,255,255,.7); }
.tl-grip.r { right: 0; border-right: 3px solid rgba(255,255,255,.7); }
.tl-playhead {
    position: absolute; top: 0; bottom: 0; width: 0; z-index: 6;
    border-left: 2px solid #ff5b5b; pointer-events: none;
}
.tl-playhead-cap {
    position: absolute; top: 0; left: -7px;
    border: 6px solid transparent; border-top: 9px solid #ff5b5b;
}

/* Boxes outside the timeline playhead render as wireframe ghosts: their
   content is hidden so the canvas shows the true frame at the playhead
   and agrees with the timeline. The tag names the box and says when it
   appears. Ghosts stay clickable/selectable for editing. */
.box.offstage { outline: 1px dashed #5b6474; }
.box.offstage .box-clip { display: none; }
.box.offstage.selected { outline: 2px solid #4b93ff; }
.box-ghost-tag {
    position: absolute; top: 2px; left: 3px; z-index: 3;
    max-width: calc(100% - 6px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #aeb6c4; background: #222834; border: 1px solid #3a4150;
    border-radius: 3px; padding: 0 5px; pointer-events: none;
}

/* Marquee (rubber-band) selection rect, drawn while dragging empty canvas. */
.marquee {
    position: absolute; z-index: 60; pointer-events: none;
    border: 1px solid #4b93ff; background: rgba(75, 147, 255, .12);
}

/* Grouped boxes move and animate as one unit. Each group gets its own
   hue (via --gh) so members read as linked at a glance. Selected and
   offstage outlines win over the group outline. */
.box.grouped:not(.selected):not(.offstage) {
    outline: 2px solid hsl(var(--gh, 210), 65%, 55%);
    outline-offset: -2px;
}
.box-group-tag {
    position: absolute; top: 2px; right: 3px; z-index: 3;
    font-size: 10px; line-height: 1.5; pointer-events: none;
    color: hsl(var(--gh, 210), 75%, 72%);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}

/* Inspector group banner. */
.insp-group {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 10px; padding: 8px 10px;
    background: #1b2b4a; border: 1px solid #2c4d8f; border-radius: 6px;
    font-size: 12px; color: #cfe1ff;
}
.box.offstage.selected .box-ghost-tag { color: #cfe1ff; border-color: #4b93ff; }

/* ---------- JSON drawer ---------- */
.json-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 90vw;
    background: #101216; border-left: 1px solid #2b303b; z-index: 90;
    display: flex; flex-direction: column;
}
.json-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; border-bottom: 1px solid #262a32;
}
.json-actions { display: flex; gap: 6px; align-items: center; }
.file-btn { position: relative; overflow: hidden; }
.file-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.json-error { background: #5a2326; color: #ffc9cc; font-size: 12px; padding: 8px 12px; }
.load-error { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    background: #5a2326; color: #ffc9cc; font-size: 13px; padding: 6px 12px; }
.load-progress { background: #1d2b45; color: #bcd6ff; font-size: 13px; padding: 6px 12px; }
.json-ok { background: #1d4030; color: #b8f0d0; font-size: 12px; padding: 8px 12px; }
.json-body {
    flex: 1; overflow: auto; margin: 0; padding: 12px;
    font-family: Consolas, monospace; font-size: 11.5px; line-height: 1.5; color: #c8d3e0;
}
.json-chunk { margin: 0; white-space: pre-wrap; word-break: break-word; }
.json-box {
    border-left: 3px solid transparent;
    padding: 4px 0 4px 9px;
    margin: 4px 0 4px -12px;
    border-radius: 0 6px 6px 0;
}
.json-box.selected {
    background: rgba(59, 130, 246, .13);
    border-left-color: #3b82f6;
}
.json-warn { background: #4a3a1a; color: #ffe1a8; font-size: 12px; padding: 8px 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.json-edit {
    flex: 1; margin: 12px; padding: 10px; resize: none;
    background: #0b0d11; color: #c8d3e0; border: 1px solid #2f6fe0; border-radius: 6px;
    font-family: Consolas, monospace; font-size: 11.5px; line-height: 1.5;
}
.json-edit:focus { outline: none; border-color: #3b82f6; }
.json-edit-hint { padding: 0 12px 10px; color: #8b93a5; font-size: 11.5px; }

/* ---------- box library ---------- */
.lib-list { display: flex; flex-direction: column; gap: 8px; }
.lib-empty { color: #8b93a5; font-size: 12.5px; line-height: 1.6; }
.lib-item { background: #171a20; border: 1px solid #262a32; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.lib-save-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: #1b2b4a; border: 1px solid #2f6fe0; border-radius: 8px; padding: 10px;
}
.lib-save-label { font-size: 12.5px; color: #cfd5df; }
.lib-save-label .dim { color: #8b93a5; }
.lib-name { background: #0e1013; border: 1px solid #2b303b; color: #e8ecf3; border-radius: 6px; padding: 6px 8px; font-size: 13px; width: 100%; box-sizing: border-box; }
.lib-meta { font-size: 11px; color: #8b93a5; }
.lib-actions { display: flex; gap: 6px; }
.lib-saved { margin-top: 8px; font-size: 12px; color: #b8f0d0; }
/* Styles drawer: section headers + read-only names for built-ins. */
.style-kind { font-size: 12px; font-weight: 600; color: #e8ecf3; margin: 4px 0 2px; }
.style-kind .dim { color: #8b93a5; font-weight: 400; }
.lib-name-ro { display: block; font-size: 13px; font-weight: 600; color: #e8ecf3; padding: 2px 0; }

/* ---------- present mode ---------- */
.present-overlay {
    position: fixed; inset: 0; background: #000; z-index: 100;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    outline: none;
}
.present-stage {
    position: relative; width: min(100vw, calc((100vh - 76px) * 1.7778));
    aspect-ratio: 16 / 9; container-type: size; background: #000; overflow: hidden;
}
.present-stage .box { cursor: default; }
.present-controls {
    display: flex; align-items: center; gap: 10px; padding: 12px;
    color: #aab2c2; font-size: 13px;
}
.present-controls .scrub { width: min(50vw, 560px); accent-color: #4b93ff; }

/* ---------- animation catalog ----------
   No CSS keyframes any more: every renderer (studio, player,
   exporter) evaluates AnimationMath.StyleFor at the playhead, so
   composed motions need no keyframe combinatorics. ---------- */

/* ---------- video export renderer (not for humans) ---------- */
.export-page { position: fixed; inset: 0; background: #000; display: grid; place-items: center; overflow: hidden; }
#export-stage { position: relative; overflow: hidden; background: #000; flex: none; }
.export-page.alpha { background: transparent; }
#export-stage .box { cursor: default; }

/* ---------- export dialog (modal) ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(4,6,10,.62); z-index: 3000;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 9vh; }
.modal { background: #171a21; border: 1px solid #2c313d; border-radius: 12px;
  box-shadow: 0 18px 60px rgba(0,0,0,.6); font-size: 13px; line-height: 1.5; color: #dfe5f0; }
.export-dialog { width: 440px; padding: 18px 20px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.modal-head b { font-size: 15px; }
.export-dialog .fld { display: block; margin: 8px 0; }
.export-dialog .fld > span { display: block; color: #9aa4b8; font-size: 12px; margin-bottom: 4px; }
.export-dialog .fld input, .export-dialog .fld select { width: 100%; background: #0d0f14;
  border: 1px solid #2c313d; border-radius: 6px; color: #dfe5f0; padding: 7px 9px; font-size: 13px; }
.export-dialog .fld-row { display: flex; gap: 10px; }
.export-dialog .fld-row .fld { flex: 1; }
.export-dialog code.cmd { display: block; background: #0d0f14; border: 1px solid #2c313d;
  border-radius: 6px; padding: 8px 10px; margin: 8px 0; overflow-wrap: anywhere; color: #9fd0ff; }
.export-dialog .dim { color: #8b93a5; font-size: 12px; }
.export-dialog .row { display: flex; gap: 8px; margin-top: 10px; }
.export-err { background: #3a1418; border: 1px solid #7a2b32; border-radius: 8px;
  padding: 10px 12px; margin: 8px 0; color: #f3c1c6; font-size: 13px; }
.progress { height: 10px; background: #0d0f14; border: 1px solid #2c313d; border-radius: 6px;
  margin: 10px 0 6px; overflow: hidden; }
.progress .bar { height: 100%; background: linear-gradient(90deg,#3f7fe0,#6aa6ff);
  border-radius: 6px; transition: width .3s; }
.mono { font-family: ui-monospace, monospace; }

/* ---------- export popover in the editor toolbar (legacy, unused) ---------- */
.topbar { position: relative; }
.export-pop { position: absolute; top: 54px; right: 12px; width: 400px; z-index: 2000;
  background: #171a21; border: 1px solid #2c313d; border-radius: 10px; padding: 14px 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.55); font-size: 13px; line-height: 1.45; }
.export-pop b.t { font-size: 14px; }
.export-pop code.cmd { display: block; background: #0d0f14; border: 1px solid #2c313d;
  border-radius: 6px; padding: 8px 10px; margin: 8px 0; overflow-wrap: anywhere; color: #9fd0ff; }
.export-pop .dim { color: #8b93a5; font-size: 12px; }
.export-pop .row { display: flex; gap: 8px; margin-top: 10px; }

/* ---------- embedded upload summary (inspector) ---------- */
.embedded-file {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 8px 10px; margin: 6px 0;
    background: #1a2030; border: 1px solid #2c3a55; border-radius: 8px;
    font-size: 12px; color: #b9c6dd;
}

/* ---------- icon picker shelf ---------- */
.icon-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.icon-tab { background: #171a20; border: 1px solid #262a32; color: #b9c0cf;
    border-radius: 8px; padding: 6px 14px; font-size: 12.5px; cursor: pointer; }
.icon-tab.active { background: #1e2c4d; border-color: #4b93ff; color: #e8eaee; }
.icon-search { background: #0d0f14; border: 1px solid #262a32; color: #e8eaee;
    border-radius: 6px; padding: 4px 8px; font-size: 12px; width: 130px; }
.icon-hint { color: #8b93a5; font-size: 12px; line-height: 1.5; margin-bottom: 4px; }
.icon-cat { font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
    color: #8b93a5; margin: 12px 0 6px; }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; }
.icon-cell { background: #171a20; border: 1px solid #262a32; border-radius: 8px;
    min-height: 46px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 6px; }
.icon-cell:hover { border-color: #4b93ff; background: #1e2330; }
.icon-cell img { width: 24px; height: 24px; display: block; pointer-events: none; }
.glyph-cell { font-size: 22px; color: #e8eaee; line-height: 1; font-family: "Segoe UI Symbol", "DejaVu Sans", sans-serif; }

/* ---- Quick-edit section (BoxQuickEdit.razor) ----
   The selector-grade controls for the single selected box: colors,
   animation/easing dropdowns, Z-order. Lives in the left control bar
   (.left-bar), under the Draw controls. (Earlier floating lives, all
   rejected: anchored to the box, window corner, canvas corner, and a
   pop-in column.) */
/* Type color code in the + Add box menu and under the inspector's
   type buttons: one shared language for "what kind of box is this".
   Hex values match BoxTypes.ColorFor (Models/BoxTypes.cs). */
.mi-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.type-swatch { display: block; height: 5px; border-radius: 3px; margin-top: 4px; }

/* Top-bar dropdown menus (File / Resources in Home.razor). Pure CSS:
   hover or keyboard focus inside .menu opens the items. */
.menu { position: relative; }
.menu-items {
    display: none; position: absolute; top: 100%; left: 0; z-index: 1500;
    min-width: 190px; padding: 4px;
    background: #171a21; border: 1px solid #2c313d; border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0,0,0,.6);
}
.menu:hover .menu-items, .menu:focus-within .menu-items { display: block; }
.menu-item {
    display: flex; width: 100%; align-items: center; gap: 8px;
    background: transparent; border: 0; color: #dfe3ea; text-align: left;
    padding: 7px 10px; border-radius: 6px; font-size: 13px; cursor: pointer;
}
.menu-item:hover { background: #232936; }
.quick-edit { color: #dfe3ea; font-size: 12px; }
.qe-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.qe-title { font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 6px; }
.qe-x { flex: none; }
.qe-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.qe-row > span:first-child { width: 52px; flex: none; color: #9aa1ad; }
.qe-row select {
    flex: 1; min-width: 0; background: #0d0f14; color: #dfe3ea;
    border: 1px solid #343b48; border-radius: 6px; padding: 4px 6px; font-size: 12px;
}
.qe-row select.qe-ease { flex: 0 1 88px; }
.opt-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.opt-row > span:first-child { width: 52px; flex: none; color: #9aa1ad; font-size: 12px; }
.opt-row input[type="number"] {
  width: 68px; background: #0d0f13; color: #eee; border: 1px solid #333a45;
  border-radius: 4px; padding: 3px 4px;
}
.opt-row select {
  background: #0d0f13; color: #eee; border: 1px solid #333a45; border-radius: 4px; padding: 3px 4px;
}
.qe-row input[type="color"] { width: 40px; height: 28px; padding: 2px; background: #1e222a; border: 1px solid #343b48; border-radius: 6px; cursor: pointer; }
.qe-colors { display: flex; align-items: center; gap: 6px; }
/* Transparent toggle: checkerboard swatch, ring when active. */
.qe-transparent {
    width: 28px; height: 28px; border-radius: 6px; border: 1px solid #343b48;
    background: repeating-conic-gradient(#3a3f49 0 25%, #22262e 0 50%) 0 0 / 12px 12px;
    color: #cfd5de; font-size: 14px; line-height: 1; cursor: pointer; padding: 0;
}
.qe-transparent.active { outline: 2px solid #4b93ff; outline-offset: 1px; }
.qe-seg { display: flex; gap: 3px; }
.qe-segbtn { width: 24px; height: 24px; background: #1e222a; color: #aab2c2; border: 1px solid #343b48; border-radius: 5px; font-size: 11px; font-weight: 700; cursor: pointer; }
.qe-segbtn.on { background: #4b93ff; border-color: #4b93ff; color: #fff; }
.qe-z { gap: 6px; }
.qe-z .btn { flex: 1; }

/* Dictation mic (inspector Text field). Recording = red pulse. */
.fld-head { display: flex; align-items: center; justify-content: space-between; }
.fld-tools { display: inline-flex; gap: 6px; }
.mic-btn, .caps-btn { background: transparent; border: 1px solid #343b48; color: #e8eaee; border-radius: 999px; padding: 2px 10px; font-size: 12px; line-height: 1.5; cursor: pointer; }
.mic-btn:disabled, .caps-btn:disabled { opacity: .35; cursor: default; }
.mic-btn.rec { background: #5b1f24; border-color: #ff5566; color: #ffd7db; animation: micpulse 1.2s ease-in-out infinite; }
@keyframes micpulse { 50% { background: #7d2a32; } }
.dict-err { color: #ff9aa5; font-size: 12px; margin-top: 4px; }

/* DelooBible branch switching + Share row */
.branch-switch { display:flex; align-items:center; gap:6px; margin-left:14px; }
.branch-switch .cur { font-weight:700; color:#e8cffe; font-size:13px; margin-right:2px; }
.branch-switch a.btn { text-decoration:none; }
.share-row { display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:4px 2px 6px; }
.share-row .share-msg { color:#9fe8b1; font-size:12.5px; }
.lib-row { display:flex; align-items:center; gap:10px; padding:6px 4px; border-bottom:1px solid #23262e; }
.lib-kind { min-width:230px; color:#9fb4d8; font-size:12px; }
.lib-name { flex:1; font-weight:600; }
.lib-date { color:#69707f; font-size:12px; }
.json-hint { padding:10px 6px; color:#8b93a5; font-size:13px; }

/* scene boxes (modeller scenes played live) */
.scene-wait { display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  color:#8b93a5; font-size:13px; background:rgba(20,22,27,.65); }
.scene-measure { position:absolute; left:0; top:0; visibility:hidden; pointer-events:none; }
.scene-measure .sm-line { position:relative; color:#f2f4f8; font-weight:800; letter-spacing:.01em; white-space:nowrap; }
.scene-measure .sm-line + .sm-line { margin-top:4px; }
.scene-measure .sm-u { display:inline-block; }
.box-clip svg { display:block; }

/* collapsible side panels: title bar only until clicked open */
.inspector .insp-section > h3 { cursor: pointer; }
.inspector .insp-section > h3::after { content: " \25B8"; opacity: .55; font-size: 11px; }
.inspector .insp-section.open > h3::after { content: " \25BE"; }
.inspector .insp-section:not(.open) > *:not(h3) { display: none !important; }
.left-bar .qe-head { cursor: pointer; }
.left-bar .qe-head::after { content: " \25B8"; opacity: .55; }
.left-bar .bar-sect.open .qe-head::after { content: " \25BE"; }
.left-bar .bar-sect.quick-edit:not(.open) > *:not(.qe-head) { display: none !important; }
/* New-version notice: fixed top-center above everything; the app
   shows it by itself when a newer build is deployed — one click
   refreshes, nobody is ever asked for Ctrl+Shift+R. */
.update-banner { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 99999; display: flex; align-items: center; gap: 10px; background: #1f2430; color: #f2f4f8; padding: 8px 12px; border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.35); font: 13px/1.4 system-ui, sans-serif; }
.update-banner button { font: inherit; border-radius: 6px; padding: 4px 12px; cursor: pointer; border: 1px solid transparent; }
.update-banner .ub-refresh { background: #4f8ff7; color: #fff; }
.update-banner .ub-refresh:hover { background: #3f7fe0; }
.update-banner .ub-dismiss { background: transparent; color: #c8cfdb; border-color: #3a4152; }

/* Scene box quick-edit: library link status + refresh feedback */
.qe-note { font-size: 11px; line-height: 1.35; opacity: .75; padding: 2px 2px 5px; }
.qe-sub { opacity: .65; font-size: 11px; }

/* ---------- LMS box types: quiz + form ---------- */
.tl-dot.type-quiz { background: #e58ecb; }
.tl-bar.type-quiz { background: #e58ecb; }
.tl-dot.type-form { background: #d9c27f; }
.tl-bar.type-form { background: #d9c27f; }

.check-row { display: inline-flex; align-items: center; gap: 6px; color: #dfe5f0; font-size: 13px; }

.box-quiz, .box-form { width: 100%; height: 100%; overflow: auto; box-sizing: border-box;
    display: flex; flex-direction: column; gap: .5em; }
.quiz-q { font-weight: 600; }
.quiz-opts { display: flex; flex-direction: column; gap: .35em; }
.quiz-opt { text-align: left; background: rgba(255,255,255,.08); color: inherit;
    border: 1px solid rgba(255,255,255,.25); border-radius: 6px; padding: .4em .6em;
    font-size: .85em; cursor: pointer; font-family: inherit; }
.quiz-opt:hover:not(:disabled) { background: rgba(255,255,255,.16); }
.quiz-opt.picked { border-color: #4b93ff; background: rgba(75,147,255,.25); }
.quiz-opt.right { border-color: #52d273; background: rgba(82,210,115,.25); }
.quiz-opt.wrong { border-color: #e05c5c; background: rgba(224,92,92,.25); }
.quiz-opt:disabled { cursor: default; opacity: .9; }
.quiz-short { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25);
    border-radius: 6px; padding: .4em .6em; color: inherit; font-size: .85em; font-family: inherit; }
.quiz-check { align-self: flex-start; }
.quiz-feedback { border-radius: 6px; padding: .4em .6em; font-size: .85em; }
.quiz-feedback.ok { background: rgba(82,210,115,.18); border: 1px solid #52d273; }
.quiz-feedback.no { background: rgba(224,92,92,.14); border: 1px solid #e05c5c; }
.quiz-pts { opacity: .75; margin-left: .5em; font-size: .9em; }
.quiz-opts-static { margin: 0; padding-left: 1.4em; font-size: .85em; }
.quiz-opts-static li { margin: .15em 0; }
.quiz-short-static { font-size: .85em; opacity: .6; letter-spacing: .2em; }
.quiz-meta { font-size: .75em; opacity: .6; }

.form-fld { display: flex; flex-direction: column; gap: .25em; font-size: .85em; }
.form-fld > span { font-weight: 600; }
.form-fld input, .form-fld textarea { background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.25); border-radius: 6px; padding: .4em .6em;
    color: inherit; font-family: inherit; font-size: 1em; }
.form-fld input:disabled, .form-fld textarea:disabled { opacity: .55; }
.form-err { color: #ff9d9d; font-size: .8em; }
.form-done { color: #52d273; font-weight: 600; }

/* ---------- Bible picker ---------- */
.bible-picker { width: 520px; max-width: 94vw; padding: 18px 20px; }
.bible-picker .fld-row { display: flex; gap: 10px; }
.bible-picker .fld-row .fld { flex: 1; }
.bible-picker .fld { display: block; margin: 8px 0; }
.bible-picker .fld > span { display: block; color: #9aa4b8; font-size: 12px; margin-bottom: 4px; }
.bible-picker .fld select, .bible-picker .fld input[type="text"] { width: 100%; background: #0d0f14;
    border: 1px solid #2c313d; border-radius: 6px; color: #dfe5f0; padding: 7px 9px; font-size: 13px; }
.bible-picker .fld.check { display: flex; align-items: flex-end; }
.bible-preview { background: #0d0f14; border: 1px solid #2c313d; border-radius: 8px;
    padding: 10px 12px; margin: 10px 0; max-height: 240px; overflow: auto; font-size: 13px; }
.bible-ref { font-weight: 700; margin-bottom: 6px; }
.bible-line { margin: 3px 0; line-height: 1.45; }
.bible-picker .row { display: flex; gap: 8px; margin-top: 10px; }
.bible-picker .dim { color: #8b93a5; font-size: 12px; margin-top: 6px; }

/* ---------- slides panel ---------- */
.slides-panel { width: 420px; max-width: 94vw; padding: 18px 20px; }
.slides-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; max-height: 300px; overflow: auto; }
.slide-row { display: flex; align-items: center; gap: 8px; }
.slide-jump { background: #0d0f14; border: 1px solid #2c313d; border-radius: 6px; color: #9fd0ff;
    padding: 6px 10px; cursor: pointer; font-size: 12px; }
.slide-jump:hover { border-color: #4b93ff; }
.slide-title { flex: 1; background: #0d0f14; border: 1px solid #2c313d; border-radius: 6px;
    color: #dfe5f0; padding: 6px 9px; font-size: 13px; }
.slides-panel .row { display: flex; gap: 8px; margin-top: 10px; }

/* ---------- study player ---------- */
.study-overlay { position: fixed; inset: 0; background: #0b0d12; z-index: 100;
    display: flex; flex-direction: column; align-items: center; outline: none; color: #dfe5f0; }
.study-topbar { display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 10px 16px; box-sizing: border-box; }
.study-title { font-weight: 700; font-size: 15px; }
.study-progress { flex: 1; height: 8px; background: #1a1e27; border-radius: 5px; overflow: hidden; }
.study-progress .bar { height: 100%; background: linear-gradient(90deg,#3f7fe0,#6aa6ff); border-radius: 5px; }
.study-stage { position: relative; width: min(100vw, calc((100vh - 150px) * 1.7778));
    aspect-ratio: 16 / 9; container-type: size; background: #000; overflow: hidden; }
.study-stage .box { cursor: default; }
.study-controls { display: flex; align-items: center; gap: 10px; padding: 12px; font-size: 13px; }
.study-controls .scrub { width: min(44vw, 480px); accent-color: #4b93ff; }
.study-hint { color: #ffd166; font-size: 12px; padding-bottom: 10px; }
.study-card { background: #171a21; border: 1px solid #2c313d; border-radius: 12px;
    padding: 26px 30px; margin-top: 12vh; width: 440px; max-width: 94vw; }
.study-card h2 { margin: 0 0 8px; font-size: 20px; }
.study-card .fld { display: block; margin: 12px 0; }
.study-card .fld > span { display: block; color: #9aa4b8; font-size: 12px; margin-bottom: 4px; }
.study-card .fld input[type="text"] { width: 100%; box-sizing: border-box; background: #0d0f14;
    border: 1px solid #2c313d; border-radius: 6px; color: #dfe5f0; padding: 8px 10px; font-size: 14px; }
.study-card .row { display: flex; gap: 8px; margin-top: 14px; }
.study-card .dim { color: #8b93a5; font-size: 12px; }
.study-score { font-size: 22px; font-weight: 700; }
.study-results { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; max-height: 260px; overflow: auto; }
.study-result { display: flex; gap: 10px; align-items: baseline; font-size: 13px;
    background: #0d0f14; border: 1px solid #2c313d; border-radius: 6px; padding: 6px 10px; }
.study-result .q { flex: 1; }
.study-result.ok { border-color: #2c6b41; }
.study-result.no { border-color: #7a2b32; }