/* ui.css (Codex-scoped) — editor chrome, thumbnail nav, the context bar + selection
   frame, presenter view. Every selector is scoped under .cdx-deck-editor so the
   editor renders exactly like the standalone mock WITHOUT leaking into the Codex
   page. The mock's viewport-fixed shell (#chrome/#nav/#stagewrap) becomes
   absolute INSIDE the .cdx-deck-editor container (which provides the height).
   #maskpop stays position:fixed: the editor JS anchors it with viewport
   coordinates (getBoundingClientRect), so fixed is correct for it.
   Colours come from the [data-theme] chrome tokens defined in tokens.css. */

/* Box reset scoped to the editor subtree (not the whole document). */
.cdx-deck-editor, .cdx-deck-editor * { box-sizing: border-box; margin: 0; padding: 0; }

/* The container itself: a self-contained editor region with its own height. */
.cdx-deck-editor {
  position: relative;
  overflow: hidden;
  font-family: 'Roboto', system-ui, 'Segoe UI', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* chrome (was position:fixed to the viewport; now absolute within container) */
.cdx-deck-editor #chrome { position: absolute; inset: 0 0 auto 0; min-height: 52px; z-index: 50; display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding: 7px 14px; background: var(--panel); border-bottom: 1px solid var(--border); }
.cdx-deck-editor #chrome .title { font-weight: 700; }
.cdx-deck-editor #chrome .tag { font-size: 11px; color: var(--muted); border: 1px solid var(--btn-bd); border-radius: 999px; padding: 2px 8px; }
.cdx-deck-editor #chrome .spacer { flex: 1; }
.cdx-deck-editor #chrome button, .cdx-deck-editor #chrome select { font: inherit; font-size: 13px; color: var(--text); background: var(--btn-bg); border: 1px solid var(--btn-bd); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.cdx-deck-editor #chrome button:hover { background: var(--btn-hover); }
.cdx-deck-editor #chrome button.primary { background: var(--teal); border: 0; color: #fff; font-weight: 700; }
.cdx-deck-editor #chrome label { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.cdx-deck-editor #chrome input[type=color] { width: 22px; height: 22px; border: 0; background: none; cursor: pointer; padding: 0; }
.cdx-deck-editor #chrome input[type=range] { width: 90px; }

/* nav (left thumbnail rail; absolute within container, below the chrome) */
.cdx-deck-editor #nav { position: absolute; left: 0; top: var(--chrome-h, 52px); bottom: 0; width: 192px; z-index: 40; background: var(--panel-2); border-right: 1px solid var(--border); overflow-y: auto; padding: 0 10px 12px; display: flex; flex-direction: column; gap: 10px; }
/* pinned rail header: slide navigator (◀ pos ▶) + "＋ slide" on ONE row, sticky atop
   the scrolling thumbs. Negative margins span it to the rail's inner edges (cancelling
   the rail's 12/10 padding); its own background covers thumbs sliding under it. The
   controls are compact so the whole row fits the 192px rail; ＋ slide sits at the end. */
.cdx-deck-editor .navhdr { position: sticky; top: 0; z-index: 2; display: flex; flex-direction: row; align-items: center; gap: 6px; margin: 0 -10px 0; padding: 10px; background: var(--panel-2); border-bottom: 1px solid var(--border); }
.cdx-deck-editor .navhdr .navnav { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.cdx-deck-editor .navhdr .pos { min-width: 30px; text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; }
.cdx-deck-editor .navhdr .navbtn { font: inherit; font-size: 12px; line-height: 1; color: var(--text); background: var(--btn-bg); border: 1px solid var(--btn-bd); border-radius: 7px; padding: 4px 7px; cursor: pointer; }
.cdx-deck-editor .navhdr .navbtn:hover:not(:disabled) { background: var(--btn-hover); }
.cdx-deck-editor .navhdr .navbtn:disabled { opacity: .4; cursor: default; }
.cdx-deck-editor .navhdr .navadd { margin-left: auto; flex: 0 0 auto; font-size: 12px; padding: 4px 8px; border-radius: 7px; white-space: nowrap; }
.cdx-deck-editor .thumb { position: relative; border-radius: 8px; border: 2px solid transparent; cursor: pointer; }
.cdx-deck-editor .thumb.active { border-color: var(--teal); }
.cdx-deck-editor .thumb .mini { width: 100%; aspect-ratio: 16/9; background: #fff; border-radius: 6px; overflow: hidden; position: relative; pointer-events: none; }
.cdx-deck-editor .thumb .mini > .scale { position: absolute; top: 0; left: 0; width: 1280px; height: 720px; transform-origin: top left; }
.cdx-deck-editor .thumb .num { position: absolute; left: 6px; top: 5px; font-size: 11px; color: #9fd6cc; background: rgba(0, 0, 0, .45); border-radius: 6px; padding: 1px 6px; z-index: 2; }
.cdx-deck-editor .thumb .tctl { position: absolute; right: 5px; top: 4px; display: flex; gap: 4px; z-index: 2; opacity: 0; transition: .12s; }
.cdx-deck-editor .thumb:hover .tctl { opacity: 1; }
.cdx-deck-editor .thumb .tctl button { font: inherit; font-size: 11px; border: 0; border-radius: 6px; padding: 1px 6px; cursor: pointer; background: rgba(255, 255, 255, .92); color: #134e4a; }
.cdx-deck-editor .thumb.dragover { border-color: var(--teal-l); }
.cdx-deck-editor .navadd { flex: 0 0 auto; font: inherit; font-size: 13px; color: var(--text); background: var(--btn-bg); border: 1px dashed var(--btn-bd); border-radius: 8px; padding: 8px; cursor: pointer; }
.cdx-deck-editor .navadd:hover { background: var(--btn-hover); border-style: solid; }

/* stage (absolute within container, right of the nav) */
.cdx-deck-editor #stagewrap { position: absolute; top: var(--chrome-h, 52px); right: 0; bottom: 0; left: 192px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(1200px 600px at 50% -10%, var(--stage-grad-1), var(--stage-grad-2)); }
.cdx-deck-editor #stagebox { position: relative; }
.cdx-deck-editor.presenting #chrome, .cdx-deck-editor.presenting #nav { display: none; }
.cdx-deck-editor.presenting #stagewrap { inset: 0; }

/* mask popover (viewport-fixed by JS) */
.cdx-deck-editor #maskpop { position: fixed; z-index: 61; display: none; flex-direction: column; gap: 6px; background: var(--panel); border: 1px solid var(--btn-bd); border-radius: 10px; padding: 8px; box-shadow: 0 10px 30px var(--overlay-strong); }
.cdx-deck-editor #maskpop .mp-types { display: flex; gap: 4px; }
.cdx-deck-editor #maskpop button { font: inherit; font-size: 12px; color: var(--text); background: var(--btn-bg); border: 1px solid var(--btn-bd); border-radius: 7px; padding: 4px 8px; cursor: pointer; }
.cdx-deck-editor #maskpop button:hover { background: var(--btn-hover); }
.cdx-deck-editor #maskpop .mp-field { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.cdx-deck-editor #maskpop .mp-field > span { cursor: default; }
.cdx-deck-editor #maskpop input[type=color] { width: 22px; height: 22px; border: 0; background: none; cursor: pointer; padding: 0; }
.cdx-deck-editor #maskpop input[type=range] { width: 110px; }
.cdx-deck-editor #maskpop .mp-g { display: none; }
.cdx-deck-editor #maskpop.grad .mp-g { display: flex; }

/* card "Ajustes" dropdown: a popover hanging under its trigger button (viewport-fixed,
   JS-anchored like #maskpop). Reuses the .ctl / .ctx-toggle control widgets, stacked. */
.cdx-deck-editor .cdx-dropdown { position: fixed; z-index: 62; display: none; flex-direction: column; align-items: flex-start; gap: 8px; background: var(--panel); border: 1px solid var(--btn-bd); border-radius: 10px; padding: 8px; box-shadow: 0 10px 30px var(--overlay-strong); }
.cdx-deck-editor .cdx-dropdown.on { display: flex; }

/* AI-fill overlay: a centered modal above the whole editor (z above chrome=50 and
   the popovers=61/62). Hidden via inline display:none in the markup; openAiOverlay()
   clears that so the CSS flex layout reveals it. */
.cdx-deck-editor #ai-fill-overlay { position: absolute; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: var(--overlay-strong, rgba(0, 0, 0, .5)); padding: 24px; }
.cdx-deck-editor #ai-fill-box { display: flex; flex-direction: column; gap: 10px; width: 480px; max-width: 100%; background: var(--panel); border: 1px solid var(--btn-bd); border-radius: 12px; padding: 16px; box-shadow: 0 16px 48px var(--overlay-strong); }
.cdx-deck-editor #ai-fill-box textarea { font: inherit; font-size: 14px; color: var(--text); background: var(--btn-bg); border: 1px solid var(--btn-bd); border-radius: 8px; padding: 8px 10px; resize: vertical; min-height: 64px; width: 100%; }
.cdx-deck-editor #ai-fill-box .ai-fill-actions { display: flex; gap: 8px; justify-content: flex-end; }
.cdx-deck-editor #ai-fill-box button { font: inherit; font-size: 13px; color: var(--text); background: var(--btn-bg); border: 1px solid var(--btn-bd); border-radius: 8px; padding: 6px 14px; cursor: pointer; }
.cdx-deck-editor #ai-fill-box button:hover { background: var(--btn-hover); }
.cdx-deck-editor #ai-fill-box button#ai-fill-go { background: var(--teal); border: 0; color: #fff; font-weight: 700; }
.cdx-deck-editor #ai-fill-box .ai-fill-error { color: var(--danger); font-size: 12px; min-height: 14px; }

/* +slide picker (edit/addslide.js): a modal of LIVE preview cards grouped by
   category. Each .as-prev is a 16:9 window onto a full 1280x720 .as-scale render
   that JS shrinks with transform:scale; pointer-events:none so the preview never
   eats the card click. Same overlay mechanics as #ai-fill-overlay. */
.cdx-deck-editor #add-slide-overlay { position: absolute; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: var(--overlay-strong, rgba(0, 0, 0, .5)); padding: 24px; }
.cdx-deck-editor #add-slide-box { display: flex; flex-direction: column; gap: 4px; width: 880px; max-width: 100%; max-height: 88%; overflow: auto; background: var(--panel); border: 1px solid var(--btn-bd); border-radius: 12px; padding: 16px 20px 20px; box-shadow: 0 16px 48px var(--overlay-strong); }
.cdx-deck-editor #add-slide-box .as-head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--panel); padding-bottom: 8px; }
.cdx-deck-editor #add-slide-box .as-title { font-size: 15px; font-weight: 700; color: var(--text); }
.cdx-deck-editor #add-slide-close { font: inherit; font-size: 15px; line-height: 1; color: var(--text); background: var(--btn-bg); border: 1px solid var(--btn-bd); border-radius: 8px; padding: 5px 10px; cursor: pointer; }
.cdx-deck-editor #add-slide-close:hover { background: var(--btn-hover); }
.cdx-deck-editor .as-group-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #94a3b8); margin: 12px 2px 8px; }
.cdx-deck-editor .as-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cdx-deck-editor .as-card { display: flex; flex-direction: column; gap: 6px; padding: 0; background: transparent; border: 0; cursor: pointer; text-align: left; }
.cdx-deck-editor .as-prev { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--btn-bd); border-radius: 8px; background: #fff; }
.cdx-deck-editor .as-card:hover .as-prev { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal); }
.cdx-deck-editor .as-prev .as-scale { position: absolute; top: 0; left: 0; width: 1280px; height: 720px; transform-origin: top left; pointer-events: none; }
.cdx-deck-editor .as-label { font-size: 12px; color: var(--text); }
/* Saved-layout cards wrap the preview button with a manage bar (edit / rename /
   delete). Semi-visible by default so it is tappable on touch, full on hover. */
.cdx-deck-editor .as-card-wrap { position: relative; display: block; }
.cdx-deck-editor .as-card-wrap .as-card { width: 100%; }
.cdx-deck-editor .as-actions { position: absolute; top: 4px; right: 4px; display: flex; gap: 3px; opacity: .55; transition: opacity .12s; }
.cdx-deck-editor .as-card-wrap:hover .as-actions { opacity: 1; }
.cdx-deck-editor .as-act { font: inherit; font-size: 11px; line-height: 1; color: var(--text); background: var(--panel); border: 1px solid var(--btn-bd); border-radius: 6px; padding: 3px 5px; cursor: pointer; box-shadow: 0 1px 3px var(--overlay-strong); }
.cdx-deck-editor .as-act:hover { background: var(--btn-hover); border-color: var(--teal); }

/* unified selection model (js/select/): THE context bar + the selection frame.
   The context bar is one lean, content-width PILL overlaying the top of the stage
   (no reflow): menus open their options into it (centered under the menu button),
   and selecting an element fills it with that element's controls (centered). It is
   leaner than the menu bar and scrolls horizontally when crowded. The frame lives
   in #stagebox (UNSCALED), above the stage. SLIDES-EDITOR-INTERNAL. */
.cdx-deck-editor .ctxbar { position: absolute; top: 8px; left: 0; right: 0; z-index: 14; pointer-events: none; overflow-x: auto; overflow-y: visible; scrollbar-width: thin; }
.cdx-deck-editor .ctxpill { display: inline-flex; align-items: center; gap: 6px; pointer-events: auto; background: var(--panel); border: 1px solid var(--btn-bd); border-radius: 10px; padding: 4px 8px; box-shadow: 0 8px 24px var(--overlay-strong); white-space: nowrap; }
.cdx-deck-editor .ctl { font: inherit; font-size: 12px; color: var(--text); background: var(--btn-bg); border: 1px solid var(--btn-bd); border-radius: 7px; padding: 4px 8px; cursor: pointer; line-height: 1.4; white-space: nowrap; }
.cdx-deck-editor .ctl:hover { background: var(--btn-hover); }
.cdx-deck-editor .ctl.on { background: var(--teal); color: #fff; border-color: var(--teal); }
.cdx-deck-editor .ctl.ctl-danger { color: var(--danger); }
.cdx-deck-editor .ctl.bold { font-weight: 900; }
/* colour-swatch chip (preset picker): the gradient is the button background, so the
   label rides on it in white with a readability shadow; the active ring marks the
   current preset. */
.cdx-deck-editor .ctl.ctl-swatch { color: #fff; border: 0; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.cdx-deck-editor .ctl.ctl-swatch.on { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--teal); }
/* per-item theme-colour chips (the text format bar): a compact square swatch per real
   palette colour (Destaque/Texto/Arte), surfaced before the raw "Cor" input so one text
   element can borrow a coordinated theme colour in one click; the reset chip clears the
   pin so the item follows the swatch again. */
.cdx-deck-editor .ctl.ctl-chip { width: 20px; min-width: 20px; height: 20px; padding: 0; border-radius: 6px; }
.cdx-deck-editor .ctl.ctl-chip:hover { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--teal); }
.cdx-deck-editor .ctl.ctl-chipreset { font-size: 11px; padding: 3px 7px; }

/* ── Tema box: a dense settings panel (its own surface, like the +slide modal),
   viewport-fixed + JS-anchored under the "Tema" chrome button. ── */
.cdx-deck-editor .cdx-themebox { position: fixed; z-index: 80; width: 392px; max-height: 80vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--btn-bd); border-radius: 12px; box-shadow: 0 16px 48px var(--overlay-strong); padding: 8px 12px 12px; font-size: 12px; color: var(--text); }
.cdx-deck-editor .cdx-themebox .tb-head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--panel); padding: 4px 0 8px; z-index: 1; }
.cdx-deck-editor .cdx-themebox .tb-title { font-weight: 700; font-size: 14px; }
.cdx-deck-editor .cdx-themebox .tb-x { font: inherit; background: var(--btn-bg); border: 1px solid var(--btn-bd); border-radius: 7px; padding: 2px 9px; cursor: pointer; color: var(--text); }
.cdx-deck-editor .cdx-themebox .tb-sec { margin-top: 12px; }
.cdx-deck-editor .cdx-themebox .tb-sec-h { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.cdx-deck-editor .cdx-themebox .tb-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.cdx-deck-editor .cdx-themebox .tb-saved { position: relative; display: inline-flex; }
.cdx-deck-editor .cdx-themebox .tb-saved .tb-preset { flex: 0 0 auto; padding-right: 22px; }
.cdx-deck-editor .cdx-themebox .tb-saved-x { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; font-size: 10px; line-height: 1; color: #fff; background: rgba(0, 0, 0, .35); border: 0; border-radius: 50%; cursor: pointer; padding: 0; }
.cdx-deck-editor .cdx-themebox .tb-savetheme { margin-top: 7px; font: inherit; font-size: 12px; background: var(--btn-bg); color: var(--text); border: 1px solid var(--btn-bd); border-radius: 7px; padding: 5px 10px; cursor: pointer; }
.cdx-deck-editor .cdx-themebox .tb-savetheme:hover { background: var(--btn-hover); }
.cdx-deck-editor .cdx-themebox .tb-preset { flex: 1; color: #fff; border: 0; border-radius: 8px; padding: 9px 8px; font-weight: 700; cursor: pointer; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.cdx-deck-editor .cdx-themebox .tb-preset.on { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--teal); }
.cdx-deck-editor .cdx-themebox .tb-pal { display: flex; gap: 14px; }
.cdx-deck-editor .cdx-themebox .tb-pal-c { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; font-size: 11px; color: var(--muted); }
.cdx-deck-editor .cdx-themebox .tb-pal-c input { width: 48px; height: 26px; border: 1px solid var(--btn-bd); border-radius: 6px; background: none; cursor: pointer; padding: 0; }
.cdx-deck-editor .cdx-themebox .tb-row { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
.cdx-deck-editor .cdx-themebox .tb-lbl { min-width: 64px; color: var(--muted); }
.cdx-deck-editor .cdx-themebox .tb-sel { font: inherit; font-size: 12px; background: var(--btn-bg); color: var(--text); border: 1px solid var(--btn-bd); border-radius: 6px; padding: 3px 6px; flex: 1; min-width: 0; }
.cdx-deck-editor .cdx-themebox .tb-role { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.cdx-deck-editor .cdx-themebox .tb-role-name { flex: 0 0 64px; font-size: 11px; }
.cdx-deck-editor .cdx-themebox .tb-role .tb-sel { flex: 1 1 80px; }
.cdx-deck-editor .cdx-themebox .tb-size { flex: 0 0 62px; height: 18px; }
.cdx-deck-editor .cdx-themebox .tb-fmt { display: inline-flex; gap: 2px; }
.cdx-deck-editor .cdx-themebox .tb-tg { width: 22px; height: 22px; font-size: 11px; line-height: 1; background: var(--btn-bg); color: var(--text); border: 1px solid var(--btn-bd); border-radius: 5px; cursor: pointer; padding: 0; }
.cdx-deck-editor .cdx-themebox .tb-tg.on { background: var(--teal); color: #fff; border-color: var(--teal); }
.cdx-deck-editor .cdx-themebox .tb-tg.tb-b { font-weight: 900; }
.cdx-deck-editor .cdx-themebox .tb-tg.tb-i { font-style: italic; }
.cdx-deck-editor .cdx-themebox .tb-tg.tb-u { text-decoration: underline; }
.cdx-deck-editor .cdx-themebox .tb-tg.tb-s { text-decoration: line-through; }
.cdx-deck-editor .cdx-themebox .tb-col { flex: 0 0 auto; width: 24px; height: 24px; border: 1px solid var(--btn-bd); border-radius: 5px; background: none; cursor: pointer; padding: 0; }
.cdx-deck-editor .cdx-themebox .tb-arts { display: flex; gap: 6px; }
.cdx-deck-editor .cdx-themebox .tb-art { flex: 1; font: inherit; font-size: 12px; background: var(--btn-bg); color: var(--text); border: 1px solid var(--btn-bd); border-radius: 7px; padding: 7px 6px; cursor: pointer; }
.cdx-deck-editor .cdx-themebox .tb-art:hover { background: var(--btn-hover); }
.cdx-deck-editor .cdx-themebox .tb-art.on { background: var(--teal); color: #fff; border-color: var(--teal); }
.cdx-deck-editor .cdx-themebox .tb-foot { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--btn-bd); padding-top: 9px; }
.cdx-deck-editor .cdx-themebox .tb-allcheck { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); cursor: pointer; }
.cdx-deck-editor .cdx-themebox .tb-clear { font: inherit; font-size: 11px; background: var(--btn-bg); color: var(--text); border: 1px solid var(--btn-bd); border-radius: 6px; padding: 4px 9px; cursor: pointer; white-space: nowrap; }
.cdx-deck-editor .cdx-themebox .tb-clear:hover { background: var(--btn-hover); }

/* ── Gallery box: the image picker (central gallery + Upload + Drive). A context-box
   surface (viewport-fixed, JS-anchored under its trigger), same shell idiom as the Tema
   box. Built via ui/contextbox.js; styles scoped under .cdx-gallerybox. ── */
.cdx-deck-editor .cdx-gallerybox { position: fixed; z-index: 80; width: 340px; max-height: 78vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--btn-bd); border-radius: 12px; box-shadow: 0 16px 48px var(--overlay-strong); padding: 8px 12px 12px; font-size: 12px; color: var(--text); }
.cdx-deck-editor .cdx-gallerybox .gb-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 8px; }
.cdx-deck-editor .cdx-gallerybox .gb-title { font-weight: 700; font-size: 14px; }
.cdx-deck-editor .cdx-gallerybox .gb-x { font: inherit; background: var(--btn-bg); border: 1px solid var(--btn-bd); border-radius: 7px; padding: 2px 9px; cursor: pointer; color: var(--text); }
.cdx-deck-editor .cdx-gallerybox .gb-x:hover { background: var(--btn-hover); }
.cdx-deck-editor .cdx-gallerybox .gb-src { display: flex; gap: 8px; margin-bottom: 10px; }
.cdx-deck-editor .cdx-gallerybox .gb-up,
.cdx-deck-editor .cdx-gallerybox .gb-drive { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: 12px; background: var(--btn-bg); color: var(--text); border: 1px solid var(--btn-bd); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.cdx-deck-editor .cdx-gallerybox .gb-up:hover { background: var(--btn-hover); border-color: var(--teal); }
.cdx-deck-editor .cdx-gallerybox .gb-up-ic { font-size: 13px; }
.cdx-deck-editor .cdx-gallerybox .gb-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cdx-deck-editor .cdx-gallerybox .gb-drive { opacity: .5; cursor: not-allowed; }
.cdx-deck-editor .cdx-gallerybox .gb-empty { color: var(--muted); padding: 18px 4px; text-align: center; }
.cdx-deck-editor .cdx-gallerybox .gb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cdx-deck-editor .cdx-gallerybox .gb-cell { position: relative; }
.cdx-deck-editor .cdx-gallerybox .gb-thumb { display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; background: var(--paper); border: 1px solid var(--btn-bd); border-radius: 8px; cursor: pointer; }
.cdx-deck-editor .cdx-gallerybox .gb-thumb:hover { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal); }
.cdx-deck-editor .cdx-gallerybox .gb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cdx-deck-editor .cdx-gallerybox .gb-del { position: absolute; top: 3px; right: 3px; font: inherit; font-size: 10px; line-height: 1; color: var(--text); background: var(--panel); border: 1px solid var(--btn-bd); border-radius: 5px; padding: 2px 4px; cursor: pointer; opacity: .6; box-shadow: 0 1px 3px var(--overlay-strong); }
.cdx-deck-editor .cdx-gallerybox .gb-cell:hover .gb-del { opacity: 1; }
.cdx-deck-editor .cdx-gallerybox .gb-del:hover { border-color: var(--danger); color: var(--danger); }

.cdx-deck-editor .ctx-choice { display: inline-flex; gap: 3px; }
.cdx-deck-editor .ctx-toggle { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.cdx-deck-editor .ctx-toggle input { cursor: pointer; }
.cdx-deck-editor .ctx-lab { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.cdx-deck-editor .ctx-lab input[type=color] { width: 20px; height: 20px; border: 0; background: none; cursor: pointer; padding: 0; }
.cdx-deck-editor .ctx-lab input[type=range] { width: 88px; }
.cdx-deck-editor .ctx-sep { width: 1px; height: 18px; background: var(--btn-bd); margin: 0 2px; flex: 0 0 auto; }

.cdx-deck-editor .sellayer { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.cdx-deck-editor .selscale { position: absolute; top: 0; left: 0; width: 1280px; height: 720px; transform-origin: top left; pointer-events: none; }
.cdx-deck-editor .selbox { position: absolute; border: 1px solid var(--teal); pointer-events: none; box-sizing: border-box; --hs: 11px; }
.cdx-deck-editor .selh { position: absolute; width: var(--hs); height: var(--hs); background: #fff; border: 1.5px solid var(--teal); border-radius: 3px; transform: translate(-50%, -50%); pointer-events: auto; }
.cdx-deck-editor .selh[data-h="-1,-1"] { left: 0; top: 0; cursor: nwse-resize; }
.cdx-deck-editor .selh[data-h="0,-1"]  { left: 50%; top: 0; cursor: ns-resize; }
.cdx-deck-editor .selh[data-h="1,-1"]  { left: 100%; top: 0; cursor: nesw-resize; }
.cdx-deck-editor .selh[data-h="-1,0"]  { left: 0; top: 50%; cursor: ew-resize; }
.cdx-deck-editor .selh[data-h="1,0"]   { left: 100%; top: 50%; cursor: ew-resize; }
.cdx-deck-editor .selh[data-h="-1,1"]  { left: 0; top: 100%; cursor: nesw-resize; }
.cdx-deck-editor .selh[data-h="0,1"]   { left: 50%; top: 100%; cursor: ns-resize; }
.cdx-deck-editor .selh[data-h="1,1"]   { left: 100%; top: 100%; cursor: nwse-resize; }
.cdx-deck-editor .selh.selrot { left: 50%; top: 0; margin-top: calc(var(--hs) * -2.4); border-radius: 50%; background: var(--teal); cursor: grab; }

/* presenter view (rendered in a separate popup window; kept scoped for parity) */
.cdx-deck-editor.presenter { background: #0a1211; color: #dfeae8; overflow: auto; }
.cdx-deck-editor #pv { display: none; height: 100vh; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto 1fr auto; gap: 18px; padding: 22px; }
.cdx-deck-editor.presenter #chrome, .cdx-deck-editor.presenter #stagewrap, .cdx-deck-editor.presenter #nav { display: none; }
.cdx-deck-editor.presenter #pv { display: grid; }
.cdx-deck-editor #pv .bar { grid-column: 1/-1; display: flex; align-items: center; gap: 20px; }
.cdx-deck-editor #pv .timer { font-size: 30px; font-weight: 700; color: var(--teal-l); font-variant-numeric: tabular-nums; }
.cdx-deck-editor #pv .clock { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cdx-deck-editor #pv .pos { margin-left: auto; font-size: 20px; color: #9fd6cc; }
.cdx-deck-editor #pv .now, .cdx-deck-editor #pv .next { background: #10201d; border: 1px solid #1d3531; border-radius: 14px; padding: 16px; overflow: hidden; }
.cdx-deck-editor #pv .label { font-size: 12px; letter-spacing: 1.5px; color: #6fafa3; text-transform: uppercase; margin-bottom: 10px; }
.cdx-deck-editor #pv .mini { width: 100%; aspect-ratio: 16/9; background: #fff; border-radius: 8px; overflow: hidden; position: relative; }
.cdx-deck-editor #pv .mini > .scale { position: absolute; top: 0; left: 0; width: 1280px; height: 720px; transform-origin: top left; }
.cdx-deck-editor #pv .notes { grid-column: 1/-1; background: #10201d; border: 1px solid #1d3531; border-radius: 14px; padding: 20px 24px; font-size: 22px; line-height: 1.5; color: #d6ece8; min-height: 90px; }
.cdx-deck-editor #pv .hintbar { grid-column: 1/-1; color: #5f9089; font-size: 13px; text-align: center; }