/* Creative module guest demos — Stitch Modern Luxury Edition */

.demo-creative-scope {
  --cre-accent: #8b5cf6;
  --cre-accent-2: #06b6d4;
  --cre-accent-glow: rgba(139, 92, 246, 0.22);
}

.demo-docx-scope {
  --cre-accent: #2563eb;
  --cre-accent-glow: rgba(37, 99, 235, 0.22);
}

.demo-excel-scope {
  --cre-accent: #10b981;
  --cre-accent-glow: rgba(16, 185, 129, 0.22);
}

.demo-pptx-scope {
  --cre-accent: #f97316;
  --cre-accent-glow: rgba(249, 115, 22, 0.22);
}

.demo-pdf-scope {
  --cre-accent: #ef4444;
  --cre-accent-glow: rgba(239, 68, 68, 0.22);
}

.demo-mustamsak-scope {
  --cre-accent: #0f766e;
  --cre-accent-glow: rgba(15, 118, 110, 0.22);
}

/* Shared mobile rail-switch docks */
.cre-mobile-rail-switch {
  display: none;
}
.cre-mobile-rail-switch-btn {
  pointer-events: auto;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: .68rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  padding: 0 .6rem;
  flex: 1 0 auto;
  min-width: 3.4rem;
  transition: all .16s ease;
}
.cre-mobile-rail-switch-btn.is-active {
  color: var(--cre-accent);
  border-color: var(--cre-accent);
  background: color-mix(in srgb, var(--cre-accent) 14%, var(--surface));
  box-shadow: 0 4px 12px var(--cre-accent-glow);
}

.demo-creative .demo-stage-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 1.35rem;
}
@media (max-width: 900px) {
  .demo-stage.demo-creative {
    padding-inline: .75rem !important;
    padding-bottom: 4rem !important;
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: clip;
  }
  .demo-stage.demo-creative .demo-stage-head,
  .demo-stage.demo-creative .demo-word-multi,
  .demo-stage.demo-creative .demo-pptx-shell,
  .demo-stage.demo-creative .demo-word-ribbon:not(.is-docked),
  .demo-stage.demo-creative .docx-contextual,
  .demo-stage.demo-creative .demo-pptx-main,
  .demo-stage.demo-creative .pptx-ai-rail {
    max-width: 100%;
    box-sizing: border-box;
  }
  .demo-stage.demo-creative .demo-word-ribbon:not(.is-docked) {
    margin-inline: 0;
  }
  /* Action buttons: exactly two rows on mobile */
  .demo-creative-scope .demo-creative-actions,
  .demo-stage.demo-creative .demo-creative-actions,
  .demo-docx-scope .demo-creative-actions,
  .demo-pptx-scope .demo-creative-actions,
  .demo-excel-scope .demo-creative-actions,
  .demo-pdf-scope .demo-creative-actions,
  .demo-mustamsak-scope .demo-creative-actions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(2.15rem, auto);
    gap: .32rem !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    flex-wrap: unset !important;
  }
  .demo-creative-scope .demo-creative-actions > *,
  .demo-stage.demo-creative .demo-creative-actions > *,
  .demo-docx-scope .demo-creative-actions > *,
  .demo-pptx-scope .demo-creative-actions > *,
  .demo-excel-scope .demo-creative-actions > *,
  .demo-pdf-scope .demo-creative-actions > *,
  .demo-mustamsak-scope .demo-creative-actions > * {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    justify-content: center !important;
    white-space: nowrap;
    font-size: .62rem !important;
    padding: .32rem .2rem !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .demo-creative-scope .demo-creative-actions .cre-flyout,
  .demo-pptx-scope .demo-creative-actions .cre-flyout,
  .demo-docx-scope .demo-creative-actions .cre-flyout,
  .demo-creative-scope .demo-creative-actions .cre-actions-dd,
  .demo-docx-scope .demo-creative-actions .cre-actions-dd,
  .demo-excel-scope .demo-creative-actions .cre-actions-dd,
  .demo-pdf-scope .demo-creative-actions .cre-actions-dd,
  .demo-mustamsak-scope .demo-creative-actions .cre-actions-dd {
    display: flex !important;
    width: 100% !important;
    overflow: visible !important;
    position: relative !important;
  }
  .demo-creative-scope .demo-creative-actions .cre-flyout > .btn,
  .demo-creative-scope .demo-creative-actions .cre-actions-dd > .btn,
  .demo-pptx-scope .demo-creative-actions .cre-flyout > .btn,
  .demo-docx-scope .demo-creative-actions .cre-flyout > .btn,
  .demo-docx-scope .demo-creative-actions .cre-actions-dd > .btn,
  .demo-excel-scope .demo-creative-actions .cre-actions-dd > .btn,
  .demo-pdf-scope .demo-creative-actions .cre-actions-dd > .btn,
  .demo-mustamsak-scope .demo-creative-actions .cre-actions-dd > .btn {
    width: 100% !important;
  }
}

.demo-creative-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.demo-creative-actions .cre-flyout {
  position: relative;
  display: inline-flex;
}
.demo-creative-actions .cre-flyout-menu {
  min-width: 200px;
}
.cre-actions-dd {
  position: relative;
  display: inline-flex;
}
.cre-actions-dd-menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  z-index: 99999 !important;
  min-width: 10.5rem;
  padding: .4rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-elevated, #1e293b);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
  display: grid;
  gap: .25rem;
}
.cre-actions-dd-menu[hidden] { display: none !important; }
.cre-actions-dd-item {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
  text-align: start;
  padding: .48rem .65rem;
  cursor: pointer;
}
.cre-actions-dd-item:hover {
  background: var(--bg-soft);
  color: var(--primary);
}

.demo-creative-hint {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: .65rem 0 0;
  font-size: .84rem;
  color: var(--muted);
}

.demo-creative-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1rem;
}

.demo-creative-field-inline {
  min-width: 140px;
  flex: 1;
}

.demo-sub-gate {
  display: grid;
  gap: .65rem;
  justify-items: center;
  text-align: center;
  padding: 1.5rem 1rem;
  border-radius: var(--radius);
  border: 1px dashed color-mix(in srgb, var(--cre-accent) 45%, var(--border));
  background: color-mix(in srgb, var(--cre-accent) 8%, var(--surface));
}

.demo-sub-gate[hidden] { display: none !important; }

.demo-sub-gate h3 { margin: 0; font-size: 1.05rem; }
.demo-sub-gate p { margin: 0; color: var(--muted); max-width: 28rem; line-height: 1.5; }

/* ?? Social ?? */
.demo-social-shell {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.1fr);
  gap: 1.25rem;
  align-items: start;
}

.demo-social-preview {
  position: sticky;
  top: 5.5rem;
}

.demo-social-canvas-wrap {
  position: relative;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
}

.demo-social-canvas-wrap canvas {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, .12);
}

.demo-social-size-badge {
  position: absolute;
  top: .65rem;
  right: .65rem;
  font-size: .72rem;
  font-weight: 700;
  padding: .2rem .45rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
}

.demo-social-carousel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .5rem;
  font-weight: 700;
}

.demo-social-dots {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: 1rem;
}

.demo-social-dots button {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.demo-social-dots button.active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
}

.demo-social-dots button.locked::after {
  content: '??';
  font-size: .55rem;
}

/* ?? PPTX ?? */
.demo-pptx-shell {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 1rem;
  min-height: 420px;
}

.demo-pptx-thumbs {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  --pptx-thumb-row: 3.35rem;
  --pptx-thumb-gap: .45rem;
  max-height: calc(var(--pptx-thumb-row) * 9 + var(--pptx-thumb-gap) * 8);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.demo-pptx-thumbs button {
  display: grid;
  gap: .15rem;
  text-align: start;
  padding: .45rem .5rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-size: .72rem;
}

.demo-pptx-thumbs button .n {
  font-weight: 800;
  color: var(--primary);
}

.demo-pptx-thumbs button.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent);
}

.demo-pptx-thumbs button.locked { opacity: .72; }

.demo-pptx-stage {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
}

.demo-pptx-slide {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #1e3a8a, #0f766e);
  color: #fff;
  border-radius: 10px;
  padding: 1.5rem 1.75rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.demo-pptx-slide h2 {
  margin: 0 0 .75rem;
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
}

.demo-pptx-slide.is-title-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 2.5rem;
}

.demo-pptx-slide.is-title-slide h2 {
  margin: 0;
  font-size: clamp(1.7rem, 4.2vw, 2.6rem);
  line-height: 1.25;
  max-width: 16ch;
}

.demo-pptx-slide.is-title-slide ul,
.demo-pptx-slide.is-title-slide ol {
  margin-top: 1rem;
  padding-inline-start: 1.25rem;
  font-size: clamp(1rem, 2vw, 1.2rem);
  opacity: .9;
}

.demo-pptx-slide ul,
.demo-pptx-slide ol {
  margin: 0;
  padding-inline-start: 1.35rem;
  line-height: 1.55;
  font-size: .95rem;
  color: inherit;
}
.demo-pptx-slide ul { list-style: disc; }
.demo-pptx-slide ol { list-style: decimal; }
.demo-pptx-slide li::marker { color: inherit; font-weight: 700; }

.demo-pptx-gate { margin-top: .5rem; }

/* ?? DOCX ?? */
.demo-docx-modes {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}

.demo-docx-mode {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-weight: 600;
  font-size: .86rem;
}

.demo-docx-mode.active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--primary);
}

.demo-docx-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.demo-docx-page {
  background: #fff;
  color: #111;
  border: 1px solid #ddd;
  border-radius: 4px;
  min-height: 360px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, .08);
  padding: 2rem 2.25rem;
}

[data-theme="dark"] .demo-docx-page {
  background: #f8fafc;
}

.demo-docx-page-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: .75rem;
  margin-bottom: 1rem;
  font-size: .8rem;
  color: #64748b;
}

.demo-docx-page-body h3 {
  margin: 1rem 0 .35rem;
  font-size: 1.05rem;
}

.demo-docx-page-body p {
  margin: 0 0 .65rem;
  line-height: 1.6;
}

.demo-docx-page-body ul,
.demo-docx-page-body ol {
  margin: 0 0 .75rem;
  padding-inline-start: 1.25rem;
}

.demo-docx-page-body h2 {
  margin: 0 0 .65rem;
  font-size: 1.35rem;
  color: #0f172a;
}

.demo-docx-page[data-mode="fix"] .demo-docx-page-body h3 {
  color: #1d4ed8;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: .25rem;
}

.demo-docx-page[data-mode="summary"] .demo-docx-page-body {
  font-size: .95rem;
}

.demo-docx-page.demo-docx-flash {
  animation: demo-docx-flash .55s ease;
}

@keyframes demo-docx-flash {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .45); }
  100% { box-shadow: 0 8px 30px rgba(15, 23, 42, .08); }
}

.demo-docx-gate-inline {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  text-align: start;
  justify-items: unset;
}

.demo-docx-gate-inline p { margin: .15rem 0 0; font-size: .86rem; }

/* ?? Design ?? */
.demo-design-shell {
  display: grid;
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.demo-design-sidebar {
  display: grid;
  gap: .75rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.demo-design-tools,
.demo-design-overlays {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.demo-design-tools-label {
  width: 100%;
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.demo-design-overlay {
  padding: .35rem .65rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  cursor: pointer;
  font-size: .82rem;
}
.demo-design-overlay.is-active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary);
}

.demo-design-swatches,
.demo-design-patterns {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .65rem;
}

.demo-design-swatch {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

.demo-design-swatch.is-active {
  border-color: var(--primary);
  outline: 2px solid color-mix(in srgb, var(--primary) 35%, transparent);
}

.demo-design-layers li button.is-active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}

.demo-design-canvas-wrap canvas {
  cursor: grab;
  touch-action: none;
}
.demo-design-canvas-wrap canvas:active { cursor: grabbing; }

.demo-social-typo {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: .85rem;
}

.demo-social-canvas-wrap canvas {
  cursor: grab;
  touch-action: none;
}
.demo-social-canvas-wrap canvas:active { cursor: grabbing; }

.demo-design-layers h3 {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: .5rem 0 .35rem;
  font-size: .88rem;
}

.demo-design-layers ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .25rem;
}

.demo-design-layers li button {
  width: 100%;
  text-align: start;
  padding: .35rem .5rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  cursor: pointer;
  font-size: .82rem;
}

.demo-design-canvas-wrap {
  background: repeating-conic-gradient(#e2e8f0 0% 25%, #f8fafc 0% 50%) 50% / 16px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  justify-content: center;
}

[data-theme="dark"] .demo-design-canvas-wrap {
  background: repeating-conic-gradient(#1e293b 0% 25%, #0f172a 0% 50%) 50% / 16px 16px;
}

.demo-design-canvas-wrap canvas {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 12px 36px rgba(15, 23, 42, .15);
}

.demo-design-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  padding: .85rem 1rem;
  flex-wrap: wrap;
}

/* Icon picker modal (creative-icons.js) */
.cre-icon-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(15, 23, 42, .55);
}
.cre-icon-dialog {
  width: min(520px, 96vw);
  max-height: min(80vh, 640px);
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: .65rem;
  padding: 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
}
.cre-icon-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.cre-icon-close {
  border: none;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
}
.cre-icon-tools {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: center;
}
.cre-icon-search {
  flex: 1;
  min-width: 140px;
  padding: .45rem .65rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
}
.cre-icon-color {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  font-weight: 600;
}
.cre-icon-color input[type="color"] {
  width: 36px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.cre-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: .35rem;
  overflow-y: auto;
  padding: .25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-soft);
  min-height: 180px;
  max-height: 340px;
}
.cre-icon-btn {
  display: grid;
  place-items: center;
  padding: .55rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--surface);
  cursor: pointer;
}
.cre-icon-btn:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.demo-design-bg-block { display: grid; gap: .35rem; }

.demo-design-edit input[type="color"] {
  width: 100%;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* PPTX live edit + design tools */
.demo-pptx-slide[contenteditable="true"]:focus,
.demo-pptx-slide h2[contenteditable="true"]:focus,
.demo-pptx-slide li[contenteditable="true"]:focus {
  outline: 2px solid rgba(56, 189, 248, .75);
  outline-offset: 3px;
}
.demo-pptx-slide h2[contenteditable="true"],
.demo-pptx-slide li[contenteditable="true"] {
  cursor: text;
}
.demo-pptx-slide.has-bg-image {
  background-size: cover, cover !important;
  background-position: center, center !important;
}
.demo-pptx-slide.has-bg-image.cre-pat-solid,
.demo-pptx-slide.has-bg-image.cre-pat-mesh,
.demo-pptx-slide.has-bg-image.cre-pat-stripes,
.demo-pptx-slide.has-bg-image.cre-pat-dots,
.demo-pptx-slide.has-bg-image.cre-pat-waves,
.demo-pptx-slide.has-bg-image.cre-pat-grid {
  /* Image + tint layers come from inline styles; do not force solid gradient */
  background-color: transparent !important;
}
.demo-pptx-slide-icon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  opacity: .92;
  pointer-events: none;
}
.demo-pptx-slide { position: relative; }
.demo-pptx-design-tools {
  display: grid;
  gap: .65rem;
  margin-bottom: 1rem;
  padding: .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.demo-pptx-swatches { display: flex; flex-wrap: wrap; gap: .35rem; }
.demo-pptx-swatch {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
}
.demo-pptx-swatch.is-active {
  border-color: var(--primary);
}

.demo-pptx-print-area { display: none; }
.demo-pptx-print-slide {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  color: #fff;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.demo-pptx-print-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8% 7%;
  min-height: 0;
}
.demo-pptx-print-body h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  font-weight: 800;
  color: #fff;
}
.demo-pptx-print-body ul,
.demo-pptx-print-body ol {
  margin: 0;
  padding-inline-start: 1.4rem;
  font-size: clamp(1rem, 2.4vw, 1.45rem);
  line-height: 1.55;
  color: #fff;
}
.demo-pptx-print-body li { margin: .35rem 0; }
.demo-pptx-print-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem 1.1rem;
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,.18);
}
.demo-pptx-print-chrome.is-header { border-bottom: 1px solid rgba(255,255,255,.18); }
.demo-pptx-print-chrome.is-footer { border-top: 1px solid rgba(255,255,255,.18); margin-top: auto; }
.demo-pptx-print-chrome img { height: 28px; width: auto; border-radius: 4px; }
.demo-pptx-print-icon { position: absolute; top: 12%; inset-inline-end: 6%; opacity: .9; }

@media print {
  @page { margin: 0; }
  html, body {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Hide page chrome for Word/PPTX print ? mustamsak/excel use their own classes.
     Prefer display:none on body children when is-docx/pptx-printing (see JS).
     Visibility fallback must beat the hide rule or print areas stay blank. */
  body:not(.msk-printing):not(.excel-printing):not(.is-docx-printing):not(.is-pptx-printing) * {
    visibility: hidden !important;
  }
  body:not(.msk-printing):not(.excel-printing) .demo-pptx-print-area,
  body:not(.msk-printing):not(.excel-printing) .demo-pptx-print-area *,
  body:not(.msk-printing):not(.excel-printing) .demo-docx-print-area,
  body:not(.msk-printing):not(.excel-printing) .demo-docx-print-area *,
  html.is-docx-printing .demo-docx-print-area,
  html.is-docx-printing .demo-docx-print-area *,
  body.is-docx-printing .demo-docx-print-area,
  body.is-docx-printing .demo-docx-print-area *,
  html.is-pptx-printing .demo-pptx-print-area,
  html.is-pptx-printing .demo-pptx-print-area *,
  body.is-pptx-printing .demo-pptx-print-area,
  body.is-pptx-printing .demo-pptx-print-area * {
    visibility: visible !important;
  }
  body.is-docx-printing > *:not(.demo-docx-print-area),
  body.is-pptx-printing > *:not(.demo-pptx-print-area) {
    display: none !important;
  }
  body.msk-printing,
  body.msk-printing .msk-a4-host,
  body.msk-printing .msk-a4-host *,
  body.msk-printing .msk-a4,
  body.msk-printing .msk-a4 * {
    visibility: visible !important;
  }
  body.msk-printing .msk-a4-mark,
  body.msk-printing .msk-a4-mark *,
  body.msk-printing .msk-card-del,
  body.msk-printing .msk-card-del * {
    visibility: hidden !important;
    display: none !important;
  }

  .demo-pptx-print-area,
  .demo-pptx-print-area[hidden],
  .demo-docx-print-area,
  .demo-docx-print-area[hidden] {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    visibility: visible !important;
    background: transparent !important;
    z-index: 99999 !important;
  }
  .demo-pptx-print-slide {
    page-break-after: always;
    break-after: page;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    aspect-ratio: auto;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .demo-pptx-print-slide:last-child { page-break-after: auto; }
  .demo-docx-print-page {
    page-break-after: always;
    break-after: page;
    width: 210mm;
    min-height: 297mm;
    margin: 0 auto !important;
    padding: 22mm 18mm;
    background: #fff;
    color: #111827;
    box-sizing: border-box;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .demo-docx-print-page:last-child { page-break-after: auto; }
}

@media (max-width: 900px) {
  .demo-social-shell,
  .demo-docx-layout,
  .demo-design-shell,
  .demo-pptx-shell {
    grid-template-columns: 1fr;
  }

  .demo-social-preview { position: static; }
}

/* Icon picker modal */
.cre-icon-modal {
  position: fixed; inset: 0; z-index: 240;
  background: rgba(8, 12, 24, .55);
  display: grid; place-items: center; padding: 1rem;
  backdrop-filter: blur(3px);
}
.cre-icon-dialog {
  width: min(640px, 100%);
  max-height: min(82vh, 720px);
  overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
}
.cre-icon-dialog header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1rem; border-bottom: 1px solid var(--border);
}
.cre-icon-close {
  border: 0; background: transparent; color: var(--muted);
  font-size: 1.4rem; cursor: pointer; line-height: 1;
}
.cre-icon-tools {
  display: flex; gap: .65rem; flex-wrap: wrap; align-items: center;
  padding: .75rem 1rem; border-bottom: 1px solid var(--border);
}
.cre-icon-search {
  flex: 1; min-width: 160px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-soft); color: var(--text);
  padding: .5rem .75rem; font: inherit;
}
.cre-icon-color {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 700; color: var(--muted);
}
.cre-icon-color input { width: 40px; height: 32px; border: 0; background: none; cursor: pointer; }
.cre-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: .45rem;
  padding: .85rem 1rem 1.1rem;
  overflow-y: auto;
}
.cre-icon-btn {
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-soft);
  cursor: pointer;
  display: grid; place-items: center;
  transition: border-color .15s, transform .15s;
}
.cre-icon-btn:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}
.cre-icon-btn svg { display: block; }

/* ?? Creative studio ribbon ?? */
.cre-studio-toolbar-host { margin-bottom: .85rem; }
.cre-studio-toolbar, .demo-word-ribbon {
  display: flex; flex-wrap: wrap; gap: .45rem .65rem; align-items: center;
  padding: .65rem .85rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); margin-bottom: .85rem;
}
.cre-studio-ribbon { display: contents; }
.cre-studio-toolbar button, .demo-word-ribbon button[data-cmd] {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-soft); color: var(--text); font: inherit; cursor: pointer;
}
.cre-studio-toolbar button.is-active, .demo-word-ribbon button.is-active {
  border-color: var(--primary); background: var(--primary-soft); color: var(--primary);
}
.cre-studio-toolbar label, .demo-word-ribbon label {
  display: inline-flex; flex-direction: column; gap: .15rem;
  font-size: .72rem; font-weight: 700; color: var(--muted);
}
.cre-studio-toolbar select, .cre-studio-toolbar input[type="number"],
.demo-word-ribbon select, .demo-word-ribbon input[type="number"] {
  min-width: 90px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-soft); color: var(--text); padding: .3rem .45rem; font: inherit;
}
.cre-sep { width: 1px; height: 28px; background: var(--border); margin: 0 .2rem; }
.cre-inline-edit { box-shadow: 0 12px 40px rgba(15,23,42,.2); }

.demo-social-assist {
  margin-top: 1rem; padding: .9rem 1rem; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--cre-accent) 35%, var(--border));
  background: color-mix(in srgb, var(--cre-accent) 8%, var(--surface));
  display: grid; gap: .55rem;
}
.demo-social-assist strong { display: inline-flex; align-items: center; gap: .35rem; }
.demo-social-assist p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }

.demo-design-custom-size {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .65rem;
}
.demo-design-canvas-wrap { position: relative; }

/* Word A4 stage ? rulers fixed in frame; pages scroll inside */
.demo-word-stage {
  display: grid; place-items: stretch;
  padding: .65rem; background:
    radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 40%),
    var(--bg-soft);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  min-height: 0;
}
.demo-word-a4 {
  width: min(100%, 210mm);
  box-shadow: 0 18px 50px rgba(15,23,42,.18);
  background: #fff;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.docx-page-header,
.docx-page-footer {
  width: 210mm; margin: 0 auto; box-sizing: border-box;
  padding: 8mm 18mm 4mm; color: #475569; font-size: .85rem;
  background: #fff; outline: none;
  border-bottom: 1px solid #e2e8f0;
}
.docx-page-footer {
  border-bottom: 0; border-top: 1px solid #e2e8f0;
  padding: 4mm 18mm 8mm;
  display: grid; gap: .35rem; justify-items: center; text-align: center;
}
.docx-page-header:focus,
.docx-page-footer-text:focus {
  box-shadow: inset 0 0 0 2px rgba(56,189,248,.35);
}
.docx-page-num {
  font-weight: 800; font-variant-numeric: tabular-nums; color: #0f172a; font-size: .9rem;
}
.docx-page-header[hidden],
.docx-page-footer[hidden],
.docx-page-num[hidden] { display: none !important; }
.demo-word-page {
  width: 210mm; height: 297mm; min-height: 297mm; max-height: 297mm;
  margin: 0 auto;
  background: #fff; color: #111827;
  padding: 22mm 18mm; box-sizing: border-box;
  outline: none; line-height: 1.5;
  overflow: hidden;
}
.demo-word-page.is-landscape {
  /* dimensions applied inline from JS paper/orient */
}
.docx-print-header,
.docx-print-footer {
  margin: 0 0 .75rem; color: #475569; font-size: .85rem; text-align: center;
}
.docx-print-footer {
  margin: .75rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1rem;
  justify-content: center; align-items: center;
}
.docx-print-num { font-weight: 800; color: #0f172a; }
.demo-word-page:focus { box-shadow: inset 0 0 0 2px rgba(56,189,248,.45); }
.demo-word-page h1 { margin: 0 0 1rem; font-size: 1.7rem; }
.demo-word-page h2 { margin: 1.1rem 0 .55rem; font-size: 1.25rem; }
.demo-word-page p { margin: 0 0 .75rem; }
.demo-word-page ul { margin: 0 0 .75rem; padding-inline-start: 1.2rem; }

.demo-pptx-shape {
  position: absolute; left: 1.25rem; bottom: 1.25rem;
  width: 72px; height: 72px; opacity: .85; pointer-events: none;
}

.demo-social-editor .form-field input,
.demo-social-editor .form-field textarea,
.demo-pptx-editor .form-field input,
.demo-pptx-editor .form-field textarea {
  text-align: start;
  direction: rtl;
}

@media (max-width: 720px) {
  .demo-word-page { width: 100%; min-height: 70vh; padding: 1.25rem; }
  .demo-docx-scope .demo-word-page {
    width: min(100%, 210mm);
    height: auto;
    min-height: 0;
    max-height: none;
    /* JS sets exact paper height; keep overflow clipped for auto-page */
    overflow: hidden;
    padding: 14mm 12mm;
  }
}

/* ?? Chip bars & editor chrome polish ?? */
.cre-top-stack { display: grid; gap: .55rem; margin-bottom: 1rem; }
.cre-chip-bar {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  padding: .55rem .7rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
}
.cre-chip-bar-compact { padding: .4rem; }
.cre-chip-bar-label {
  font-size: .72rem; font-weight: 800; color: var(--muted);
  margin-inline-end: .25rem; min-width: 3.2rem;
}
.cre-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-soft); color: var(--text);
  padding: .28rem .55rem; cursor: pointer; font: inherit;
  transition: border-color .15s, transform .15s, background .15s;
}
.cre-chip small { font-size: .72rem; font-weight: 700; }
.cre-chip:hover { border-color: var(--primary); transform: translateY(-1px); }
.cre-chip.is-active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);
}
.cre-chip-swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); flex-shrink: 0; }
.cre-chip-pattern {
  width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0;
  border: 1px solid rgba(15,23,42,.15);
  background: #334155;
}
.cre-chip-pattern.cre-pat-solid,
.cre-pat-solid:not(.demo-pptx-slide):not(.demo-word-page) { background: #475569 !important; }
.cre-chip-pattern.cre-pat-mesh,
.cre-pat-mesh:not(.demo-pptx-slide):not(.demo-word-page) { background: radial-gradient(circle at 70% 30%, #94a3b8, #334155 60%) !important; }
.cre-chip-pattern.cre-pat-stripes,
.cre-pat-stripes:not(.demo-pptx-slide):not(.demo-word-page) { background: repeating-linear-gradient(45deg,#334155,#334155 3px,#64748b 3px,#64748b 6px) !important; }
.cre-chip-pattern.cre-pat-dots,
.cre-pat-dots:not(.demo-pptx-slide):not(.demo-word-page) { background: radial-gradient(circle, #cbd5e1 1.2px, #334155 1.3px) 0 0/8px 8px !important; }
.cre-chip-pattern.cre-pat-waves,
.cre-pat-waves:not(.demo-pptx-slide):not(.demo-word-page) { background: repeating-radial-gradient(circle at 0 0, #64748b, #334155 8px) !important; }
.cre-chip-pattern.cre-pat-grid,
.cre-pat-grid:not(.demo-pptx-slide):not(.demo-word-page) { background: linear-gradient(#64748b 1px,transparent 1px) 0 0/8px 8px, linear-gradient(90deg,#64748b 1px,transparent 1px) 0 0/8px 8px, #334155 !important; }

/* Slides: keep chosen gradient; patterns are ::before overlays only */
.demo-pptx-slide.cre-pat-solid:not(.has-bg-image),
.demo-pptx-slide.cre-pat-mesh:not(.has-bg-image),
.demo-pptx-slide.cre-pat-stripes:not(.has-bg-image),
.demo-pptx-slide.cre-pat-dots:not(.has-bg-image),
.demo-pptx-slide.cre-pat-waves:not(.has-bg-image),
.demo-pptx-slide.cre-pat-grid:not(.has-bg-image) {
  background: linear-gradient(135deg, var(--pptx-bg-a, #1e3a8a), var(--pptx-bg-b, #0f766e)) !important;
}
.demo-pptx-slide.cre-pat-mesh::before,
.demo-pptx-slide.cre-pat-stripes::before,
.demo-pptx-slide.cre-pat-dots::before,
.demo-pptx-slide.cre-pat-waves::before,
.demo-pptx-slide.cre-pat-grid::before,
.demo-pptx-slide.cre-pat-solid::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .28; border-radius: inherit;
  z-index: 0;
}
.demo-pptx-slide.cre-pat-mesh::before { background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.45), transparent 42%); }
.demo-pptx-slide.cre-pat-stripes::before { background: repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 10px, transparent 10px 22px); }
.demo-pptx-slide.cre-pat-dots::before { background: radial-gradient(circle, rgba(255,255,255,.35) 1.2px, transparent 1.3px) 0 0/16px 16px; }
.demo-pptx-slide.cre-pat-waves::before { background: repeating-linear-gradient(0deg, transparent, transparent 14px, rgba(255,255,255,.12) 14px, rgba(255,255,255,.12) 16px); }
.demo-pptx-slide.cre-pat-grid::before { background: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px) 0 0/24px 24px, linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px) 0 0/24px 24px; }
.demo-pptx-slide > * { position: relative; z-index: 1; }
.demo-pptx-slide #pptxSlideTitle,
.demo-pptx-slide #pptxSlideBullets,
.demo-pptx-slide #pptxSlideMediaHost,
.demo-pptx-slide .demo-pptx-xform,
.demo-pptx-slide .demo-pptx-chrome {
  position: absolute !important;
  z-index: 2;
}
.demo-pptx-slide #pptxSlideMediaHost {
  inset: 0; pointer-events: none; margin: 0;
}
.demo-pptx-slide #pptxSlideMediaHost > * { pointer-events: auto; }
.demo-pptx-slide #pptxSlideTitle,
.demo-pptx-slide #pptxSlideBullets {
  overflow: visible; padding: .25rem .4rem;
  overflow-wrap: anywhere; word-break: break-word;
  color: inherit;
}

.cre-project-name {
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-soft);
  color: var(--text); padding: .4rem .7rem; font: inherit; min-width: 160px;
}
.cre-editor-panel { display: grid; gap: 1rem; }
.cre-field-stack { display: grid; gap: .85rem; }
.cre-field-full { display: grid; gap: .35rem; }
.cre-field-full textarea { min-height: 7.5rem; width: 100%; resize: vertical; line-height: 1.55; }
.cre-add-tools { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.cre-bg-upload { cursor: pointer; margin: .35rem 0 .15rem; display: inline-flex; align-items: center; gap: .35rem; }
.cre-size-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-bottom: .65rem; }
.cre-size-btn {
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-soft);
  color: var(--text); padding: .45rem .5rem; font-size: .78rem; font-weight: 700; cursor: pointer; text-align: start;
}
.cre-size-btn.is-active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.cre-layer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.cre-layer-item {
  display: grid; gap: .1rem; padding: .55rem .65rem; border: 1px solid var(--border);
  border-radius: 10px; background: var(--bg-soft); cursor: pointer;
}
.cre-layer-item strong { font-size: .84rem; }
.cre-layer-item span { font-size: .75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cre-layer-item.is-active { border-color: var(--primary); box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent); }
.cre-inline-edit { box-shadow: 0 10px 30px rgba(15,23,42,.18); backdrop-filter: blur(2px); }

.demo-social-shell { direction: rtl; }
.demo-social-preview { direction: ltr; }
.demo-design-patterns { display: flex; flex-wrap: wrap; gap: .35rem; }

/* Fullscreen creative workspace */
.cre-fullscreen-scope .demo-main,
.cre-fullscreen-scope .demo-stage.cre-workspace { max-width: none; }
.cre-shell-fill {
  min-height: calc(100vh - 280px);
  align-items: stretch;
}
.cre-preview-fill, .cre-canvas-stage {
  min-height: min(70vh, 820px);
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center;
  position: relative;
}
.cre-canvas-stage canvas {
  max-width: 100%;
  max-height: min(70vh, 820px);
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  box-shadow: 0 16px 40px rgba(15,23,42,.18);
}
.cre-layers-host { position: absolute; top: .65rem; left: .65rem; z-index: 5; }
.cre-layers-host.cre-layers-br,
.demo-social-scope .cre-layers-host {
  top: auto; left: auto; right: .75rem; bottom: .75rem;
}
.cre-layers-fab-wrap { position: relative; }
.cre-layers-fab {
  width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 8px 20px rgba(15,23,42,.12);
}
.cre-layers-pop {
  position: absolute; top: 48px; left: 0; width: min(260px, 70vw);
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(15,23,42,.18); padding: .55rem;
  z-index: 6;
}
.cre-layers-host.cre-layers-br .cre-layers-pop,
.demo-social-scope .cre-layers-pop {
  top: auto; bottom: 48px; left: auto; right: 0;
}
.cre-layers-pop header {
  display: flex; justify-content: space-between; align-items: center;
  padding: .25rem .35rem .45rem; font-size: .9rem;
}
.cre-layers-close { border: 0; background: transparent; font-size: 1.2rem; cursor: pointer; color: var(--muted); }
.cre-layers-dnd { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; max-height: 280px; overflow: auto; }
.cre-layers-item {
  display: flex; gap: .45rem; align-items: center; padding: .45rem .5rem;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-soft);
  cursor: grab; font-size: .8rem;
}
.cre-layers-item.is-bg { opacity: .8; cursor: default; }
.cre-layers-item.is-over { border-color: var(--primary); }
.cre-layers-item.is-dragging { opacity: .5; }
.cre-layers-hint { margin: .45rem .2rem 0; font-size: .72rem; color: var(--muted); }
.cre-hist-btn { min-width: 38px; font-size: 1.1rem; font-weight: 700; }
.cre-hist-actions { gap: .4rem; }
.cre-assist-layout { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 1rem; }
.cre-assist-preview {
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem; display: grid; place-items: center; min-height: 420px;
}
.cre-assist-preview canvas { max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 12px 30px rgba(15,23,42,.16); }
.cre-assist-form { padding: 1rem; display: grid; gap: .85rem; align-content: start; }
.cre-assist-actions-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.cre-file-field { display: grid; gap: .4rem; }
.cre-file-btn {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1rem; border-radius: 14px; cursor: pointer;
  border: 1.5px dashed color-mix(in srgb, var(--primary) 55%, var(--border));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--primary) 12%, var(--surface)), var(--surface));
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.cre-file-btn:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}
.cre-file-btn-ico {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #38bdf8, #2563eb); color: #fff;
}
.cre-file-btn-text { display: grid; gap: .1rem; text-align: start; min-width: 0; }
.cre-file-btn-text strong { font-size: .92rem; }
.cre-file-btn-text small { color: var(--muted); font-size: .75rem; }
.cre-ba-host { margin-top: .65rem; }
.cre-product-types {
  display: flex; flex-wrap: nowrap; gap: .45rem; overflow-x: auto;
  padding: .35rem 0 .75rem; margin-bottom: .25rem;
  scroll-snap-type: x mandatory;
}
.cre-product-chip {
  flex: 0 0 auto; scroll-snap-align: start;
  display: grid; justify-items: center; gap: .2rem;
  min-width: 76px; padding: .45rem .5rem;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); cursor: pointer; font: inherit; color: inherit;
}
.cre-product-chip small { font-size: .68rem; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.25; }
.cre-product-ico { font-size: 1.15rem; line-height: 1; }
.cre-product-chip.is-active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent);
}

/* Logo studio options */
.cre-logo-types {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .4rem;
}
.cre-logo-type {
  display: grid; justify-items: center; gap: .15rem;
  padding: .4rem .2rem;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); cursor: pointer; font: inherit; color: inherit;
}
.cre-logo-type small { font-size: .62rem; font-weight: 700; color: var(--muted); text-align: center; line-height: 1.2; }
.cre-logo-type-ico { font-size: 1.05rem; line-height: 1; }
.cre-logo-type.is-active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 28%, transparent);
}
.cre-logo-opts {
  display: flex; flex-wrap: wrap; gap: .35rem;
}
.cre-logo-opt {
  display: grid; justify-items: center; gap: .1rem;
  min-width: 3.1rem; padding: .35rem .45rem;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); cursor: pointer; font: inherit; color: inherit;
}
.cre-logo-opt-ico { font-size: .95rem; line-height: 1; opacity: .85; }
.cre-logo-opt small { font-size: .68rem; font-weight: 700; color: var(--muted); }
.cre-logo-opt.is-active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
}
.cre-logo-colors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem .65rem;
}
.cre-logo-color {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  font-size: .78rem; font-weight: 700; color: var(--muted);
}
.cre-logo-color input[type="color"] {
  width: 2.4rem; height: 2rem; padding: 0; border: 1px solid var(--border);
  border-radius: 8px; background: transparent; cursor: pointer;
}
.cre-logo-check { margin: 0; }
.cre-logo-check span { display: flex; align-items: center; gap: .45rem; font-size: .86rem; font-weight: 600; }
@media (max-width: 520px) {
  .cre-logo-types { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* PPTX ? left vertical ribbon + right AI */
.demo-pptx-scope {
  --pptx-sticky-top: 5.5rem;
}
body.byb-work-fullscreen .demo-pptx-scope,
body.byb-pptx-present .demo-pptx-scope {
  --pptx-sticky-top: .65rem;
}
.demo-pptx-scope .demo-creative {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: .75rem;
  align-items: start;
}
.demo-pptx-scope .demo-stage-head { grid-column: 1 / -1; }
.demo-pptx-scope #pptxRibbon.demo-word-ribbon {
  position: sticky;
  top: var(--pptx-sticky-top);
  z-index: 12;
  grid-row: 2 / span 3;
  display: flex; flex-direction: column; flex-wrap: nowrap;
  gap: .35rem; width: 72px; padding: .45rem .35rem !important;
  max-height: calc(100vh - var(--pptx-sticky-top) - 1.5rem);
  overflow: auto;
  align-self: start;
}
.demo-pptx-scope #pptxRibbon .cre-ribbon-group {
  display: flex; flex-direction: column; gap: .3rem;
  padding: .25rem; border: 0; background: transparent;
}
.demo-pptx-scope #pptxRibbon .cre-ribbon-label { display: none; }
.demo-pptx-scope #pptxRibbon label,
.demo-pptx-scope #pptxRibbon select,
.demo-pptx-scope #pptxRibbon input { display: none !important; }
.demo-pptx-scope #pptxRibbon .cre-ribbon-text { display: none; }
.demo-pptx-scope #pptxRibbon button,
.demo-pptx-scope #pptxRibbon .cre-hist-btn,
.demo-pptx-scope #pptxRibbon .demo-docx-mode,
.demo-pptx-scope #pptxRibbon [data-pptx-trans],
.demo-pptx-scope #pptxRibbon [data-pptx-align],
.demo-pptx-scope #pptxRibbon [data-cmd] {
  width: 40px; height: 40px; min-width: 40px; padding: 0;
  border-radius: 11px; font-size: .9rem !important; font-weight: 800; gap: 0;
  display: grid !important; place-items: center;
  color: var(--text) !important; line-height: 1;
}
.demo-pptx-scope #pptxRibbon button .byb-icon,
.demo-pptx-scope #pptxRibbon button svg {
  width: 18px; height: 18px; display: block;
}
.demo-pptx-scope #pptxRibbon button b,
.demo-pptx-scope #pptxRibbon button i,
.demo-pptx-scope #pptxRibbon button u { font-size: .95rem !important; display: inline-block; }
.demo-pptx-scope #pptxRibbon .cre-hist-actions,
.demo-pptx-scope #pptxRibbon .cre-align-group,
.demo-pptx-scope #pptxRibbon .cre-dir-group,
.demo-pptx-scope #pptxRibbon .demo-docx-modes {
  display: flex; flex-direction: column; gap: .3rem; align-items: center;
}
.demo-pptx-scope #pptxRibbon .ribbon-glyph {
  font-size: .95rem; line-height: 1;
  font-family: "Segoe UI Symbol", "Noto Sans Symbols", Cairo, sans-serif;
}
.demo-pptx-scope .demo-creative,
.demo-pptx-scope .demo-pptx-shell {
  overflow: visible;
}
.demo-pptx-scope .demo-pptx-shell {
  grid-column: 2; min-width: 0;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 200px;
  grid-template-areas:
    "thumbs stage design"
    "thumbs under design"
    "thumbs editor design"
    "thumbs chrome design"
    "thumbs gate design";
  gap: .65rem;
  align-items: start;
}
.demo-pptx-scope .demo-pptx-thumbs {
  grid-area: thumbs;
  --pptx-thumb-row: 3.35rem;
  --pptx-thumb-gap: .45rem;
  max-height: calc(var(--pptx-thumb-row) * 9 + var(--pptx-thumb-gap) * 8);
  overflow-y: auto;
  overscroll-behavior: contain;
  align-self: start;
  z-index: 2;
}
.demo-pptx-scope .demo-pptx-stage {
  grid-area: stage; min-width: 0; align-self: start;
  display: grid; gap: .55rem;
}
.demo-pptx-scope .demo-pptx-under-stage {
  grid-area: under;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
}
.demo-pptx-scope .demo-pptx-under-stage .pptx-des-box {
  margin: 0;
  padding: .5rem .55rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 4px 14px rgba(15,23,42,.04);
}
.demo-pptx-scope .demo-pptx-under-stage .pptx-des-box strong {
  display: block;
  font-size: .72rem;
  font-weight: 900;
  color: var(--cre-accent);
  margin-bottom: .35rem;
  padding-bottom: .2rem;
  border-bottom: 1px solid color-mix(in srgb, var(--cre-accent) 28%, var(--border));
}
.demo-pptx-scope .pptx-font-card {
  grid-column: 1 / -1;
  display: grid;
  gap: .45rem;
  padding: .55rem;
  border: 1px solid color-mix(in srgb, #007cff 30%, var(--border));
  border-radius: 14px;
  background:
    linear-gradient(165deg, color-mix(in srgb, #007cff 10%, var(--surface)), var(--surface));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.demo-pptx-scope .pptx-font-field {
  display: grid;
  gap: .22rem;
  margin: 0;
}
.demo-pptx-scope .pptx-font-label {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  font-size: .68rem;
  font-weight: 900;
  color: var(--muted);
}
.demo-pptx-scope .pptx-font-label .byb-icon { width: 13px; height: 13px; color: var(--cre-accent); }
.demo-pptx-scope .pptx-font-field select,
.demo-pptx-scope .pptx-size-row input[type="number"] {
  width: 100%;
  height: 2.05rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-soft);
  color: var(--text);
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  padding: 0 .5rem;
}
.demo-pptx-scope .pptx-size-row {
  display: grid;
  grid-template-columns: 2rem 1fr 2rem;
  gap: .3rem;
  align-items: center;
}
.demo-pptx-scope .pptx-size-btn {
  height: 2.05rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--cre-accent);
  font-size: 1.05rem;
  font-weight: 900;
  cursor: pointer;
  line-height: 1;
}
.demo-pptx-scope .pptx-size-btn:hover {
  background: color-mix(in srgb, var(--cre-accent) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--cre-accent) 40%, var(--border));
}
.demo-pptx-scope .demo-pptx-design-tools {
  grid-area: design;
  position: sticky;
  top: var(--pptx-sticky-top);
  z-index: 11;
  align-self: start;
  max-width: 200px;
  max-height: calc(100vh - var(--pptx-sticky-top) - 1rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  gap: .5rem;
  align-content: start;
}
.demo-pptx-scope .pptx-design-main.pptx-des-box {
  margin: 0;
  padding: .5rem;
  display: grid;
  gap: .4rem;
}
.demo-pptx-scope .pptx-design-main > strong {
  display: block;
  font-size: .72rem;
  font-weight: 900;
  color: var(--cre-accent);
  margin: 0;
  padding-bottom: .25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--cre-accent) 28%, var(--border));
}
.demo-pptx-scope .demo-pptx-design-tools .pptx-ai-rail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem;
  justify-items: stretch;
  align-content: start;
  padding: .5rem;
  margin: 0;
  max-width: none;
}
.demo-pptx-scope .demo-pptx-chrome-tools {
  grid-area: chrome;
  z-index: 1;
}
.demo-pptx-scope .demo-pptx-editor.pptx-des-box {
  display: grid;
  gap: .45rem;
  padding: .55rem .65rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 4px 14px rgba(15,23,42,.04);
}
.demo-pptx-scope .demo-pptx-editor.pptx-des-box > strong {
  display: block;
  font-size: .72rem;
  font-weight: 900;
  color: var(--cre-accent);
  margin: 0;
  padding-bottom: .25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--cre-accent) 28%, var(--border));
}
.demo-pptx-scope .demo-pptx-editor .form-field { gap: .25rem; }
.demo-pptx-scope .demo-pptx-editor .form-field span {
  font-size: .72rem; font-weight: 800; color: var(--muted);
}
.demo-pptx-scope .demo-pptx-design-tools .pptx-ai-rail .btn,
.demo-pptx-scope .demo-pptx-chrome-tools .btn {
  width: 100%;
  min-width: 0;
  justify-content: center;
  padding-inline: .35rem;
  font-size: .68rem;
}
.demo-pptx-scope .demo-pptx-design-tools .pptx-ai-rail #pptxAiApply {
  grid-column: 1 / -1;
}
.demo-pptx-scope .demo-pptx-design-tools .pptx-ai-rail > strong,
.demo-pptx-scope .demo-pptx-chrome-tools > strong {
  grid-column: 1 / -1;
  font-size: .75rem;
}
.demo-pptx-scope .demo-pptx-editor { grid-area: editor; min-width: 0; z-index: 1; }
.demo-pptx-scope .demo-pptx-gate { grid-area: gate; }
.demo-pptx-scope .demo-pptx-chrome-tools,
.demo-pptx-scope .demo-pptx-editor {
  position: relative; z-index: 1;
  pointer-events: auto;
}
.demo-pptx-scope .demo-design-tools-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem;
  align-items: stretch;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.demo-pptx-scope .cre-des-chip--full {
  grid-column: 1 / -1;
  width: 100%;
  height: auto !important;
  min-height: 2.4rem;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: .15rem !important;
  padding: .3rem .4rem !important;
}
.demo-pptx-scope .cre-des-chip--full > span {
  font-size: .62rem;
  font-weight: 900;
  color: var(--muted);
  line-height: 1;
}
.demo-pptx-scope .cre-des-chip--full select,
.demo-pptx-scope .cre-des-chip--full input[type="number"] {
  width: 100%;
  max-width: none;
  height: 1.7rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-soft);
  font: inherit;
  font-size: .72rem;
  font-weight: 800;
  color: var(--text);
  pointer-events: auto;
  cursor: pointer;
}
.demo-pptx-scope .pptx-des-box {
  display: grid;
  gap: .3rem;
  padding: .4rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-soft);
}
.demo-pptx-scope .demo-pptx-design-tools .pptx-des-box {
  grid-column: 1 / -1;
}
.demo-pptx-scope .pptx-des-box strong {
  font-size: .68rem;
  font-weight: 900;
  color: var(--muted);
}
.demo-pptx-scope .cre-des-chip {
  margin: 0 !important;
  height: 30px;
  min-height: 30px;
  padding: 0 .35rem !important;
  font-size: .68rem !important;
  font-weight: 800;
  gap: .2rem !important;
  border-radius: 9px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  pointer-events: auto;
}
.demo-pptx-scope .demo-pptx-thumbs button .n {
  display: grid; place-items: center;
  font-size: 1rem; font-weight: 900; min-width: 1.6rem;
}
.demo-pptx-scope .demo-pptx-thumbs button small {
  display: block; text-align: center; font-size: .68rem;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.demo-pptx-scope #pptxRibbon.demo-word-ribbon button {
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--bg-soft) 55%, var(--surface));
}
.demo-pptx-scope #pptxRibbon.demo-word-ribbon button .byb-icon {
  width: 16px; height: 16px; color: var(--primary);
}
.demo-pptx-scope .cre-des-chip select,
.demo-pptx-scope .cre-des-chip input[type="number"] {
  border: 0; background: transparent; font: inherit; font-weight: 800;
  max-width: 5.5rem; min-width: 0;
}
.demo-pptx-scope .cre-des-chip input[type="color"] {
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px;
  background: transparent;
}
.demo-pptx-scope .demo-pptx-chrome-tools.pptx-des-box,
.demo-pptx-scope #pptxChromeTools {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .4rem;
  align-items: stretch;
  justify-items: stretch;
  padding: .55rem .65rem;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  position: relative;
}
.demo-pptx-scope .demo-pptx-chrome-tools > strong {
  grid-column: 1 / -1;
  font-size: .72rem;
  font-weight: 900;
  color: var(--cre-accent);
  margin: 0;
  padding-bottom: .2rem;
  border-bottom: 1px solid color-mix(in srgb, var(--cre-accent) 28%, var(--border));
}
.demo-pptx-scope .pptx-chrome-flow {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .3rem;
  min-width: 0;
  position: relative;
  overflow: visible;
  width: 100%;
}
.demo-pptx-scope .pptx-chrome-row {
  display: contents;
}
.demo-pptx-scope .cre-chrome-chip {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: .68rem; font-weight: 800; margin: 0;
  height: 28px; padding: 0 .32rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-soft);
  white-space: nowrap;
  min-width: 0;
  flex: 0 0 auto;
  position: relative;
}
.demo-pptx-scope .cre-chrome-input {
  width: 5.5rem;
  min-width: 4.5rem;
  max-width: 6.5rem;
  flex: 0 0 5.5rem;
  height: 28px;
  padding: .15rem .35rem;
  font-size: .72rem;
  box-sizing: border-box;
  position: relative;
}
@media (min-width: 901px) {
  .demo-pptx-scope .demo-pptx-chrome-tools {
    overflow: visible !important;
  }
  .demo-pptx-scope .pptx-chrome-flow {
    flex-wrap: nowrap !important;
    overflow: visible !important;
    gap: .28rem;
  }
  .demo-pptx-scope .cre-chrome-input {
    width: 5rem;
    min-width: 4.2rem;
    max-width: 5.5rem;
    flex: 0 0 5rem;
  }
  .demo-pptx-scope .cre-chrome-chip {
    height: 28px;
    padding: 0 .28rem;
    font-size: .66rem;
  }
}
.demo-pptx-scope .cre-mobile-rail-switch { display: none; }
.demo-pptx-scope .pptx-style-card {
  grid-column: 1 / -1;
  display: grid;
  gap: .45rem;
  padding: .55rem;
  border: 1px solid color-mix(in srgb, #007cff 30%, var(--border));
  border-radius: 14px;
  background:
    linear-gradient(165deg, color-mix(in srgb, #007cff 10%, var(--surface)), var(--surface));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  min-width: 0;
}
.demo-pptx-scope .pptx-style-card > strong {
  display: block;
  font-size: .68rem;
  font-weight: 900;
  color: var(--muted);
  margin: 0;
}
.demo-pptx-scope .pptx-tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem;
  min-width: 0;
}
.demo-pptx-scope .demo-pptx-swatch--image {
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cre-accent) 35%, #fff), color-mix(in srgb, var(--primary) 40%, #cbd5e1));
  color: var(--text);
}
.demo-pptx-scope .pptx-swatch-image-ico {
  display: grid;
  place-items: center;
  line-height: 0;
}
.demo-pptx-scope .pptx-swatch-image-ico .byb-icon {
  width: 16px;
  height: 16px;
  color: var(--primary);
}
.demo-pptx-scope .pptx-bg-modal-panel {
  width: min(420px, calc(100vw - 1.5rem));
  max-width: 100%;
}
.demo-pptx-scope .pptx-bg-modal-body {
  display: grid;
  gap: .65rem;
  padding: .25rem 0 .5rem;
}
.demo-pptx-scope .pptx-bg-preview {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  border: 1px solid var(--border);
  background-size: cover, cover;
  background-position: center, center;
}
.demo-pptx-scope .pptx-bg-field {
  display: grid;
  gap: .25rem;
  font-size: .78rem;
  font-weight: 800;
  color: var(--muted);
  min-width: 0;
}
.demo-pptx-scope .pptx-bg-field input[type="color"] {
  width: 100%;
  height: 2.2rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-soft);
  padding: .15rem;
}
.demo-pptx-scope .pptx-bg-field input[type="range"] {
  width: 100%;
}
.demo-pptx-scope .pptx-bg-check {
  display: flex;
  align-items: center;
  gap: .45rem;
  grid-template-columns: none;
}
.demo-pptx-scope .pptx-bg-grad-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
}
#pptxBgImageModal[hidden] { display: none !important; }
.demo-pptx-scope .demo-pptx-design-tools .cre-chip,
.demo-pptx-scope .demo-pptx-swatch,
.demo-pptx-scope .demo-pptx-design-tools .btn {
  pointer-events: auto;
  cursor: pointer;
}
@media (max-width: 900px) {
  .demo-pptx-scope .demo-stage.demo-creative {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding-bottom: calc(6.6rem + env(safe-area-inset-bottom, 0px));
  }
  .demo-pptx-scope .demo-stage-head {
    display: flex;
    flex-direction: column;
    gap: .4rem;
  }
  .demo-pptx-scope .demo-stage-head h1 { font-size: 1.05rem; margin: 0; }
  .demo-pptx-scope .demo-stage-lead { display: none !important; }
  /* Mobile: Open/Export first, then Save project, then Print */
  .demo-pptx-scope .demo-creative-actions .cre-act-open { order: 1; }
  .demo-pptx-scope .demo-creative-actions .cre-act-export { order: 2; }
  .demo-pptx-scope .demo-creative-actions .cre-act-save-project { order: 3; }
  .demo-pptx-scope .demo-creative-actions .cre-act-print { order: 4; }
  .demo-pptx-scope .demo-creative-actions > :not(.cre-act-open):not(.cre-act-export):not(.cre-act-save-project):not(.cre-act-print) { order: 5; }
  .demo-pptx-scope .demo-creative,
  .demo-pptx-scope .demo-pptx-shell {
    display: flex !important;
    flex-direction: column !important;
    gap: .45rem !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    padding-bottom: calc(7.2rem + env(safe-area-inset-bottom, 0px));
    overflow: visible !important;
  }
  .demo-pptx-scope .demo-pptx-shell > .demo-pptx-thumbs,
  .demo-pptx-scope .demo-pptx-shell > .demo-pptx-stage {
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto;
    z-index: 1;
    grid-area: auto !important;
  }
  .demo-pptx-scope .demo-pptx-thumbs {
    order: 1;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: .35rem;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: 3.2rem !important;
    height: 3.2rem !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: .2rem .1rem !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    align-self: stretch !important;
  }
  .demo-pptx-scope .demo-pptx-thumbs > * {
    flex: 0 0 auto !important;
  }
  .demo-pptx-scope .demo-pptx-thumbs button.is-num-only {
    width: 40px; min-width: 40px; height: 40px;
    padding: 0; justify-content: center;
  }
  .demo-pptx-scope .demo-pptx-thumbs button.is-num-only small { display: none; }
  .demo-pptx-scope .demo-pptx-thumbs button.is-num-only .n {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    border-radius: 10px;
  }
  .demo-pptx-scope .demo-pptx-stage {
    order: 2;
    width: 100% !important;
    min-height: 0 !important;
    height: auto;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    position: relative !important;
    padding: .65rem !important;
    margin: 0 0 .15rem !important;
    background: var(--bg-soft) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .1) !important;
    box-sizing: border-box !important;
  }
  .demo-pptx-scope .demo-pptx-gate { order: 3; }
  /* Keep design/under panels out of document flow on mobile */
  .demo-pptx-scope .demo-pptx-under-stage,
  .demo-pptx-scope .demo-pptx-design-tools,
  .demo-pptx-scope .demo-pptx-editor,
  .demo-pptx-scope .demo-pptx-chrome-tools {
    flex: none !important;
  }

  /* Bottom rail-switch dock ? always under panels, never over the slide */
  .demo-pptx-scope .cre-mobile-rail-switch,
  .demo-pptx-scope #pptxRailSwitch {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    z-index: 95;
    display: flex;
    flex-wrap: nowrap;
    gap: .22rem;
    padding: .3rem .4rem calc(.3rem + env(safe-area-inset-bottom, 0px));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: color-mix(in srgb, var(--surface) 96%, #fff);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 18px rgba(15,23,42,.1);
    pointer-events: auto;
    scrollbar-width: none;
  }
  .demo-pptx-scope #pptxRailSwitch::-webkit-scrollbar { display: none; }
  .demo-pptx-scope #pptxRailSwitch .cre-mobile-rail-switch-btn {
    pointer-events: auto;
    flex: 1 0 auto;
    min-width: 3rem;
    height: 2.15rem;
  }

  .demo-pptx-scope .demo-pptx-under-stage:not([hidden]) {
    display: contents;
  }
  .demo-pptx-scope .demo-pptx-under-stage[hidden],
  .demo-pptx-scope .demo-pptx-under-stage[hidden] > * {
    display: none !important;
  }
  .demo-pptx-scope .demo-pptx-design-tools:not([hidden]) {
    display: contents !important;
    position: static !important;
    max-width: none;
    max-height: none;
    overflow: visible;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .demo-pptx-scope .demo-pptx-design-tools[hidden],
  .demo-pptx-scope .demo-pptx-design-tools[hidden] > *,
  .demo-pptx-scope .demo-pptx-editor[hidden],
  .demo-pptx-scope .demo-pptx-chrome-tools[hidden],
  .demo-pptx-scope #pptxRailSwitch[hidden] {
    display: none !important;
  }
  .demo-pptx-scope .cre-mobile-rail-panel[data-rail],
  .demo-pptx-scope [data-rail="design"],
  .demo-pptx-scope [data-rail="colors"],
  .demo-pptx-scope [data-rail="pattern"],
  .demo-pptx-scope [data-rail="chrome"],
  .demo-pptx-scope [data-rail="ai"],
  .demo-pptx-scope [data-rail="editor"] {
    display: none !important;
  }
  /* Design tools: always under the stage (not in bottom dock) */
  .demo-pptx-scope .demo-pptx-shell [data-rail="design"],
  .demo-pptx-scope .pptx-design-main[data-rail="design"] {
    display: grid !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 2;
    order: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: .35rem 0 0 !important;
    padding: .5rem .55rem !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    background: color-mix(in srgb, var(--surface) 96%, #fff) !important;
    box-shadow: 0 6px 18px rgba(15,23,42,.08) !important;
  }
  .demo-pptx-scope .demo-pptx-design-tools {
    display: contents !important;
    width: auto !important;
    height: auto !important;
  }
  .demo-pptx-scope .demo-pptx-shell[data-rail-panel="colors"] [data-rail="colors"],
  .demo-pptx-scope .demo-pptx-shell[data-rail-panel="pattern"] [data-rail="pattern"],
  .demo-pptx-scope .demo-pptx-shell[data-rail-panel="chrome"] [data-rail="chrome"],
  .demo-pptx-scope .demo-pptx-shell[data-rail-panel="ai"] [data-rail="ai"],
  .demo-pptx-scope .demo-pptx-shell[data-rail-panel="editor"] [data-rail="editor"] {
    display: grid !important;
    position: fixed !important;
    left: 0; right: 0;
    bottom: calc(2.75rem + env(safe-area-inset-bottom, 0px));
    z-index: 90;
    width: 100%;
    max-width: none;
    max-height: min(34vh, 220px);
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    gap: .35rem;
    padding: .4rem .55rem .45rem;
    margin: 0;
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    background: color-mix(in srgb, var(--surface) 96%, #fff);
    box-shadow: 0 -8px 28px rgba(15,23,42,.16);
  }
  .demo-pptx-scope .pptx-under-colors .demo-pptx-swatches {
    display: flex;
    flex-wrap: nowrap;
    gap: .4rem;
    width: 100%;
    max-width: none;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    padding-bottom: .15rem;
  }
  .demo-pptx-scope .pptx-under-colors .demo-pptx-swatch {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.4rem;
    border-radius: 10px;
    flex: 0 0 auto;
  }
  .demo-pptx-scope .pptx-under-pattern #pptxPatternBar,
  .demo-pptx-scope .pptx-under-pattern .cre-chip-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .28rem;
    width: 100%;
    max-width: none;
    overflow: visible;
  }
  .demo-pptx-scope .pptx-under-pattern .cre-chip {
    flex: 1 1 calc(33.333% - .28rem);
    min-width: 4.5rem;
    justify-content: center;
  }
  .demo-pptx-scope .demo-pptx-design-tools .pptx-ai-rail,
  .demo-pptx-scope #pptxAiRail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .demo-pptx-scope #pptxAiRail > strong { grid-column: 1 / -1; }
  .demo-pptx-scope #pptxAiRail .btn {
    width: 100%;
    min-width: 0;
    flex: none;
    font-size: .62rem;
    padding-inline: .2rem;
  }
  /* Design cards: one row side-by-side on mobile */
  .demo-pptx-scope .demo-design-tools-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: .4rem;
    overflow: visible;
    padding: 0;
    background: transparent;
    border: 0;
  }
  .demo-pptx-scope .demo-design-tools-row .pptx-font-card,
  .demo-pptx-scope .demo-design-tools-row .pptx-tools-card,
  .demo-pptx-scope .demo-design-tools-row .pptx-style-card {
    grid-column: auto !important;
    min-width: 0;
  }
  .demo-pptx-scope .pptx-font-card { grid-column: auto !important; }
  .demo-pptx-scope .pptx-tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-pptx-scope .cre-des-chip {
    height: 34px; min-height: 34px;
    font-size: .68rem !important;
    padding: 0 .35rem !important;
  }
  /* Header/Footer mobile: 3 fields per row, no overlap */
  .demo-pptx-scope .pptx-chrome-flow {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .35rem;
    align-items: stretch;
    overflow: visible;
  }
  .demo-pptx-scope .pptx-chrome-flow .cre-chrome-input {
    width: 100%;
    max-width: none;
    min-width: 0;
    flex: none;
    height: 30px;
    font-size: .68rem;
  }
  .demo-pptx-scope .pptx-chrome-flow .cre-chrome-chip {
    height: 30px;
    padding: 0 .28rem;
    font-size: .62rem;
    border-radius: 7px;
    white-space: nowrap;
    width: 100%;
    flex: none;
    justify-content: center;
    min-width: 0;
  }
  /* Responsive 16:9 slide ? same layout model as desktop (% boxes) */
  .demo-pptx-scope .demo-pptx-slide {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    inset: auto !important;
    inset-inline: unset !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 !important;
    transform: none !important;
    transform-origin: center !important;
    overflow: hidden;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    color: #fff !important;
    border-radius: 10px !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 8px 22px rgba(15, 23, 42, .18) !important;
  }
  .demo-pptx-scope .demo-pptx-slide #pptxSlideTitle,
  .demo-pptx-scope .demo-pptx-slide #pptxSlideBullets,
  .demo-pptx-scope .demo-pptx-slide #pptxSlideBullets li {
    color: #fff !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 3 !important;
  }
  .demo-pptx-scope .demo-pptx-editor textarea {
    min-height: 5rem;
    resize: vertical;
  }
}

/* Word ribbon groups */
.demo-word-ribbon { gap: .55rem .75rem; }
.cre-ribbon-group {
  display: inline-flex; flex-wrap: wrap; align-items: flex-end; gap: .35rem .45rem;
  padding-inline: .35rem;
}
.cre-ribbon-group + .cre-ribbon-group {
  border-inline-start: 1px solid var(--border);
  padding-inline-start: .75rem;
}
.cre-ribbon-label {
  width: 100%; font-size: .68rem; font-weight: 800; color: var(--muted); margin-bottom: .1rem;
  padding-bottom: .2rem; border-bottom: 1px solid var(--border);
}
.cre-flyout { position: relative; display: inline-flex; }
.cre-flyout-menu {
  position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 80;
  min-width: 240px; max-width: 300px; padding: .45rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(15,23,42,.2), 0 0 0 1px rgba(255,255,255,.04) inset;
  display: grid; gap: .15rem;
}
.cre-flyout-menu--rich { padding: .5rem; gap: .2rem; }
.cre-flyout-menu--form { min-width: 280px; max-width: 320px; gap: .45rem; }
.cre-flyout-title {
  display: flex; align-items: center; gap: .45rem;
  padding: .2rem .35rem .45rem; margin-bottom: .1rem;
  border-bottom: 1px solid var(--border);
  font-size: .78rem; font-weight: 900; color: var(--text);
}
.cre-flyout-title .byb-icon { width: 15px; height: 15px; color: var(--primary); flex: none; }
.cre-flyout-hint {
  margin: 0; padding: .15rem .4rem .25rem;
  font-size: .7rem; color: var(--muted); line-height: 1.35;
}
.cre-flyout-divider {
  height: 1px; margin: .35rem .2rem; background: var(--border);
}
.cre-flyout-item {
  display: flex; gap: .55rem; align-items: center; width: 100%;
  border: 0; background: transparent; text-align: start; padding: .48rem .55rem;
  border-radius: 10px; cursor: pointer; font: inherit; color: inherit;
}
.cre-flyout-item > .byb-icon,
.cre-flyout-item > svg {
  width: 16px; height: 16px; flex: none; color: var(--muted);
}
.cre-flyout-copy { display: grid; gap: .05rem; min-width: 0; }
.cre-flyout-copy strong { font-size: .82rem; font-weight: 800; line-height: 1.2; }
.cre-flyout-copy small { display: block; color: var(--muted); font-size: .7rem; line-height: 1.25; }
.cre-flyout-item:hover { background: var(--bg-soft); }
.cre-flyout-item:hover > .byb-icon,
.cre-flyout-item:hover > svg { color: var(--primary); }
.cre-flyout-field {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .4rem .5rem; border-radius: 10px; background: var(--bg-soft);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.cre-flyout-field--stack { display: grid; gap: .4rem; }
.cre-flyout-field-label {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; color: var(--text);
}
.cre-flyout-field-label .byb-icon { width: 14px; height: 14px; color: var(--muted); }
.cre-flyout-field input[type="color"] {
  width: 36px; height: 28px; padding: 0; border: 1px solid var(--border);
  border-radius: 8px; background: transparent; cursor: pointer;
}
.cre-flyout-input {
  width: 100%; padding: .55rem .65rem; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); color: var(--text);
  font: inherit; font-size: .86rem; outline: none;
  box-shadow: 0 1px 0 rgba(15,23,42,.03);
}
.cre-flyout-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.cre-flyout-actions {
  display: grid; grid-template-columns: 1fr auto; gap: .4rem; margin-top: .1rem;
}
.cre-flyout-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  border-radius: 10px; border: 1px solid var(--border); padding: .5rem .7rem;
  font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer;
  background: var(--surface); color: var(--text);
}
.cre-flyout-btn .byb-icon { width: 14px; height: 14px; }
.cre-flyout-btn--primary {
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  color: var(--primary);
}
.cre-flyout-btn--primary:hover { background: color-mix(in srgb, var(--primary) 22%, var(--surface)); }
.cre-flyout-btn--ghost:hover { border-color: #ef4444; color: #dc2626; }
.cre-num-preview {
  min-width: 2.4rem; height: 2rem; padding: 0 .35rem;
  display: grid; place-items: center;
  border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-soft);
  font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--primary); font-size: .78rem;
}
.cre-flyout-item.is-active,
.cre-flyout-item.is-num-style.is-active {
  background: var(--primary-soft);
  outline: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
}
.cre-flyout-item.is-active .cre-num-preview {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, #fff);
}
.cre-flyout-menu[hidden] { display: none !important; }
.demo-word-pages-nav {
  position: sticky; top: 5.5rem; display: grid; gap: .35rem; align-content: start;
}
.demo-word-page-btn {
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); cursor: pointer; font-weight: 800;
}
.demo-word-page-btn.is-active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.demo-word-multi {
  display: grid; grid-template-columns: 48px 1fr; gap: .75rem; align-items: start;
}
.demo-word-stage { min-width: 0; }
.demo-word-pages { display: grid; gap: 1rem; justify-items: center; }
.demo-word-pages .demo-word-page { box-shadow: 0 14px 36px rgba(15,23,42,.14); }

/* Microsoft Word?style FIXED ruler frame (H/V rulers stay put, pages scroll) */
.demo-docx-scope .demo-word-stage {
  position: sticky;
  top: 5.25rem;
  z-index: 6;
  align-self: start;
}
.docx-ruler-frame,
.docx-ruler-shell {
  --docx-ruler-size: 24px;
  --docx-ruler-face: #ffffff;
  --docx-ruler-tick: #64748b;
  --docx-ruler-shade: rgba(148, 163, 184, .32);
  --docx-ruler-accent: #0ea5e9;
  direction: ltr;
  display: grid;
  grid-template-columns: var(--docx-ruler-size) minmax(0, 1fr);
  grid-template-rows: var(--docx-ruler-size) minmax(0, 1fr);
  width: 100%;
  max-width: calc(210mm + var(--docx-ruler-size) + 48px);
  margin-inline: auto;
  height: calc(100vh - 6.5rem);
  max-height: calc(100vh - 6.5rem);
  min-height: 360px;
  background: #d9dee7;
  border: 1px solid #94a3b8;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
.docx-ruler-corner {
  grid-column: 1; grid-row: 1;
  display: grid; place-items: center;
  background: #e8edf3;
  border-right: 1px solid #94a3b8;
  border-bottom: 1px solid #94a3b8;
  color: #475569; font-size: .55rem; font-weight: 800; letter-spacing: .02em;
  user-select: none; z-index: 4;
}
.docx-ruler-h {
  grid-column: 2; grid-row: 1;
  position: sticky;
  top: 0;
  z-index: 5;
  height: var(--docx-ruler-size);
  background: linear-gradient(180deg, #f8fafc 0%, #e8edf3 100%);
  border-bottom: 1px solid #94a3b8;
  overflow: visible;
  align-self: start;
}
.docx-ruler-v {
  grid-column: 1; grid-row: 2;
  position: relative;
  z-index: 3;
  width: var(--docx-ruler-size);
  height: 100%;
  min-height: 0;
  background: linear-gradient(90deg, #f8fafc 0%, #e8edf3 100%);
  border-right: 1px solid #94a3b8;
  overflow: hidden;
}
.demo-word-pages-scroll {
  grid-column: 2; grid-row: 2;
  min-height: 0;
  overflow: auto;
  padding: 1rem 1.25rem 1.5rem;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.35), transparent 42%),
    #c5ccd6;
  scroll-behavior: smooth;
}
.demo-word-pages-scroll .demo-word-pages {
  width: 100%;
}
.docx-ruler-track {
  position: relative;
  width: min(100%, 210mm);
  height: 100%;
  margin-inline: auto;
  background:
    linear-gradient(180deg, transparent 0 4px, var(--docx-ruler-face) 4px calc(100% - 3px), transparent calc(100% - 3px)),
    transparent;
}
.docx-ruler-track-v {
  width: 100%;
  height: min(100%, 297mm);
  max-height: 100%;
  margin: 0;
  background:
    linear-gradient(90deg, transparent 0 4px, var(--docx-ruler-face) 4px calc(100% - 3px), transparent calc(100% - 3px)),
    transparent;
}
.docx-ruler-h .docx-ruler-track {
  /* Align track with the A4 page width inside the scroll pane (match pages padding) */
  width: min(100%, 210mm);
  max-width: calc(100% - 2.5rem);
  margin-inline: 1.25rem auto;
  box-sizing: border-box;
}
.docx-ruler-shade {
  position: absolute; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(
    -45deg,
    rgba(148,163,184,.22) 0 4px,
    rgba(148,163,184,.08) 4px 8px
  );
}
.docx-ruler-v .docx-ruler-shade.is-header-band,
.docx-ruler-shell.has-header-zone .docx-ruler-v .docx-ruler-shade-start {
  background: repeating-linear-gradient(
    -45deg,
    rgba(14,165,233,.28) 0 4px,
    rgba(14,165,233,.1) 4px 8px
  );
}
.docx-ruler-v .docx-ruler-shade.is-footer-band,
.docx-ruler-shell.has-footer-zone .docx-ruler-v .docx-ruler-shade-end {
  background: repeating-linear-gradient(
    -45deg,
    rgba(100,116,139,.3) 0 4px,
    rgba(100,116,139,.1) 4px 8px
  );
}
.demo-word-a4.has-header-on .docx-page-header:not([hidden]) {
  background: color-mix(in srgb, #e0f2fe 55%, #fff);
  border-bottom-color: color-mix(in srgb, #0ea5e9 35%, #e2e8f0);
}
.docx-ruler-h .docx-ruler-shade-start { inset: 0 auto 0 0; }
.docx-ruler-h .docx-ruler-shade-end { inset: 0 0 0 auto; }
.docx-ruler-v .docx-ruler-shade-start { inset: 0 0 auto 0; width: 100%; }
.docx-ruler-v .docx-ruler-shade-end { inset: auto 0 0 0; width: 100%; }
.docx-ruler-ticks { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.docx-ruler-tick {
  position: absolute; width: 1px; height: 4px; bottom: 2px;
  background: var(--docx-ruler-tick); transform: translateX(-50%);
}
.docx-ruler-tick.is-half { height: 7px; background: #64748b; }
.docx-ruler-tick.is-cm { height: 11px; background: #334155; }
.docx-ruler-tick.is-cm i {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  font-style: normal; font-size: .58rem; font-weight: 700; color: #475569;
  line-height: 1; white-space: nowrap;
}
.docx-ruler-track-v .docx-ruler-tick {
  width: 4px; height: 1px; left: auto; right: 2px; bottom: auto;
  transform: translateY(-50%);
}
.docx-ruler-track-v .docx-ruler-tick.is-half { width: 7px; }
.docx-ruler-track-v .docx-ruler-tick.is-cm { width: 11px; }
.docx-ruler-track-v .docx-ruler-tick.is-cm i {
  bottom: auto; left: auto; right: 13px; top: 50%;
  transform: translateY(-50%);
}
.docx-ruler-handle {
  position: absolute; z-index: 5; border: 0; padding: 0; cursor: ew-resize;
  width: 12px; height: 14px; background: transparent;
  transform: translateX(-50%);
}
.docx-ruler-handle::before {
  content: ""; position: absolute; inset: 0;
  background: var(--docx-ruler-accent);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  box-shadow: 0 1px 2px rgba(15,23,42,.25);
}
.docx-ruler-handle:hover::before,
.docx-ruler-handle:focus-visible::before { background: #0284c7; }
.docx-ruler-handle-left,
.docx-ruler-handle-right { top: 1px; }
.docx-ruler-handle-top,
.docx-ruler-handle-bottom {
  left: 50%; cursor: ns-resize; width: 14px; height: 12px;
  transform: translate(-50%, -50%);
}
.docx-ruler-handle-top::before { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.docx-ruler-handle-bottom::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.docx-ruler-indent {
  position: absolute; z-index: 4; width: 10px; height: 10px;
  transform: translateX(-50%); cursor: ew-resize;
}
.docx-ruler-indent-first {
  top: 1px;
  background: #334155;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.docx-ruler-indent-left {
  bottom: 1px; top: auto;
  background: #0f172a;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.docx-ruler-indent-right {
  bottom: 1px; top: auto;
  background: #0f172a;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.docx-ruler-indent:hover { filter: brightness(1.25); }
.docx-ruler-readout {
  position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  z-index: 8; padding: .15rem .4rem; border-radius: 6px;
  background: #0f172a; color: #fff; font-size: .68rem; font-weight: 800;
  white-space: nowrap; pointer-events: none;
  box-shadow: 0 6px 16px rgba(15,23,42,.25);
}
.docx-ruler-readout-v {
  top: 50%; left: calc(100% + 6px); transform: translateY(-50%);
}
[data-theme="dark"] .docx-ruler-frame,
[data-theme="dark"] .docx-ruler-shell,
html.dark .docx-ruler-frame,
html.dark .docx-ruler-shell,
html[data-theme="dark"] .docx-ruler-frame,
html[data-theme="dark"] .docx-ruler-shell {
  --docx-ruler-face: #475569;
  --docx-ruler-tick: #cbd5e1;
  --docx-ruler-shade: rgba(15,23,42,.55);
  border-color: #475569;
  background: #0f172a;
}
[data-theme="dark"] .docx-ruler-corner,
[data-theme="dark"] .docx-ruler-h,
[data-theme="dark"] .docx-ruler-v,
html.dark .docx-ruler-corner,
html.dark .docx-ruler-h,
html.dark .docx-ruler-v,
html[data-theme="dark"] .docx-ruler-corner,
html[data-theme="dark"] .docx-ruler-h,
html[data-theme="dark"] .docx-ruler-v {
  background: linear-gradient(180deg, #334155, #1e293b);
  border-color: #64748b;
  color: #e2e8f0;
}
[data-theme="dark"] .docx-ruler-tick.is-cm i,
html.dark .docx-ruler-tick.is-cm i,
html[data-theme="dark"] .docx-ruler-tick.is-cm i {
  color: #e2e8f0;
}
[data-theme="dark"] .demo-word-pages-scroll,
html.dark .demo-word-pages-scroll,
html[data-theme="dark"] .demo-word-pages-scroll {
  background: #0b1220;
}
@media (max-width: 900px) {
  .demo-docx-scope .demo-word-stage {
    position: sticky;
    top: 4.5rem;
  }
  .docx-ruler-v { display: flex !important; }
  .docx-ruler-corner { display: grid !important; }
  .docx-ruler-frame,
  .docx-ruler-shell {
    grid-template-columns: var(--docx-ruler-size, 24px) minmax(0, 1fr) !important;
    grid-template-rows: var(--docx-ruler-size, 24px) minmax(0, 1fr) !important;
    height: calc(100vh - 8.5rem);
    max-height: calc(100vh - 8.5rem);
  }
  .docx-ruler-h { grid-column: 2 !important; }
  .demo-word-pages-scroll { grid-column: 2 !important; padding: .5rem; }
  .docx-ruler-h .docx-ruler-track {
    margin-inline: .5rem auto;
    max-width: calc(100% - 1rem);
  }
}
.demo-word-add-page {
  border: 1px dashed var(--border); border-radius: 12px; padding: .75rem 1rem;
  background: var(--surface); cursor: pointer; font-weight: 700;
}
@media (max-width: 900px) {
  .cre-assist-layout { grid-template-columns: 1fr; }
  /* Keep Word page sidebar visible on mobile (horizontal strip without background) */
  .demo-docx-scope .demo-word-multi {
    grid-template-columns: 1fr;
    gap: .45rem;
  }
  .demo-docx-scope .demo-word-pages-nav,
  .demo-word-pages-nav {
    position: sticky;
    top: 4.35rem;
    z-index: 7;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: .3rem;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: none;
    padding: .25rem 0;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }
  .demo-docx-scope .demo-word-page-btn { flex: 0 0 auto; }
  .cre-shell-fill { min-height: auto; }
}

/* Word helper flyouts + page chrome */
.demo-word-helper-tools { display: none; } /* folded into ribbon */
.demo-word-helper-row {
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
}
.demo-word-helper-row .btn { margin: 0; }

/* Word ribbon ? NOT docked: row1 = Page, row2 = Format|AI one line */
.demo-docx-scope .demo-word-ribbon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "page insert"
    "combo combo";
  gap: .4rem;
  align-items: start;
  padding: .45rem !important;
  margin-bottom: .5rem !important;
  background: color-mix(in srgb, var(--surface) 92%, #fff);
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(15,23,42,.05);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .cre-ribbon-section[data-section="page"] {
  grid-area: page;
}
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .cre-ribbon-section[data-section="insert"] {
  grid-area: insert;
}
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .cre-ribbon-section[data-section="format-ai"],
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .cre-ribbon-combo {
  grid-area: combo;
}
.demo-docx-scope .cre-mobile-rail-switch { display: none; }
.demo-docx-scope .demo-word-ribbon .cre-ribbon-group,
.demo-docx-scope .demo-word-ribbon .cre-ribbon-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .25rem;
  min-width: 0;
  min-height: 0;
  height: auto;
  flex: unset;
  border-inline-start: 0;
  padding: .4rem .5rem .45rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-soft) 60%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  box-sizing: border-box;
}
.demo-docx-scope .demo-word-ribbon .cre-ribbon-label {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 0;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 0;
  text-align: start;
  flex: none;
  line-height: 1.2;
}
.demo-docx-scope .demo-word-ribbon .cre-ribbon-section[data-section="page"] > .cre-ribbon-label {
  border-bottom: 1px solid var(--border);
  width: 100%;
  padding-bottom: .2rem;
  margin-bottom: .1rem;
  text-align: center;
}
.demo-docx-scope .demo-word-ribbon .cre-ribbon-combo-labels {
  display: none !important;
}
.demo-docx-scope .demo-word-ribbon .cre-ribbon-label--inline {
  display: none !important;
}
.demo-docx-scope .demo-word-ribbon .cre-ribbon-sep {
  color: var(--muted); font-weight: 800; opacity: .55; user-select: none;
}
.demo-docx-scope .demo-word-ribbon .cre-ribbon-sep--body {
  align-self: stretch;
  display: inline-flex; align-items: center;
  padding: 0 .35rem; font-size: 1rem;
  border-inline: 0;
}
.demo-docx-scope .demo-word-ribbon.is-docked .cre-ribbon-sep,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-ribbon-sep--body {
  display: none !important;
}
/* Horizontal section dividers via section label border (no empty ::before/::after grid rows) */
@media (max-width: 900px) {
  .demo-docx-scope .demo-word-ribbon.is-docked .cre-ribbon-section[data-section="format-ai"] > .cre-ribbon-label,
  .demo-docx-scope .demo-word-ribbon.is-docked .cre-ribbon-combo > .cre-ribbon-combo-labels {
    border-top: 1px solid color-mix(in srgb, var(--border) 85%, var(--primary));
    padding-top: .35rem;
    margin-top: .2rem;
  }
}
.demo-docx-scope .demo-word-ribbon.is-docked {
  /* visible so flyout menus can escape the dock */
  overflow: visible !important;
  scrollbar-width: thin;
}
.demo-docx-scope .demo-word-ribbon.is-docked .cre-ribbon-chip.cre-icon-only {
  width: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
}
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .cre-ribbon-chip.cre-icon-only {
  min-width: 34px;
  width: 34px;
  height: 34px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .1rem;
  position: relative;
}
.demo-docx-scope .demo-word-ribbon:not(.is-docked) #docxBulletList,
.demo-docx-scope .demo-word-ribbon:not(.is-docked) #docxNumberList {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px;
  padding: 0 !important;
  justify-content: center;
  margin: 0;
}
.demo-docx-scope .demo-word-ribbon:not(.is-docked) #docxBulletList .ribbon-mini-label,
.demo-docx-scope .demo-word-ribbon:not(.is-docked) #docxNumberList .ribbon-mini-label {
  display: none !important;
}
.demo-docx-scope .demo-word-ribbon .cre-ribbon-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: .3rem;
  flex: 0 1 auto;
  min-height: 0;
}
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .cre-ribbon-body--combo {
  flex-wrap: nowrap;
  overflow: visible;
  gap: .22rem;
  align-items: flex-end;
}
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .cre-ribbon-cluster {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: .22rem;
  flex: 0 0 auto;
}
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .cre-ribbon-field {
  gap: .08rem;
  font-size: .62rem;
}
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .cre-ribbon-field select,
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .docx-size-combo {
  height: 30px;
  max-width: 7.2rem;
}
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .cre-ribbon-field input[type="range"] {
  width: 4.2rem;
  max-width: 4.2rem;
}
.demo-docx-scope .demo-word-ribbon:not(.is-docked) #docxBulletList,
.demo-docx-scope .demo-word-ribbon:not(.is-docked) #docxNumberList {
  height: 34px !important;
  min-height: 34px !important;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .ribbon-glyph {
  font-size: .72rem;
  font-weight: 900;
}
.demo-docx-scope .demo-word-ribbon .cre-ribbon-cluster {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .28rem;
  flex: 0 0 auto;
}
/* Labeled chips ? same footprint as "???", unique icons per tool */
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .cre-ribbon-chip,
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .cre-flyout-toggle.cre-ribbon-chip {
  height: 34px;
  min-height: 34px;
  min-width: 4.6rem;
  padding: 0 .6rem !important;
  gap: .35rem !important;
  border-radius: 10px;
  font-size: .74rem;
  font-weight: 800;
  white-space: nowrap;
}
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .cre-ribbon-chip .byb-icon,
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .cre-ribbon-chip svg {
  width: 14px; height: 14px; flex: none;
  color: var(--primary);
}
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .cre-ribbon-text {
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1;
}
.demo-docx-scope .demo-word-ribbon .demo-word-ai-prompt {
  display: grid;
  grid-template-columns: 1fr;
  gap: .3rem;
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  margin-top: .15rem;
}
.demo-docx-scope .demo-word-ribbon .demo-word-ai-prompt[hidden] {
  display: none !important;
}
.demo-docx-scope .demo-word-ribbon .demo-word-ai-prompt-label {
  display: block;
  font-size: .68rem;
  font-weight: 800;
  color: var(--muted);
  line-height: 1.2;
}
.demo-docx-scope .demo-word-ribbon .demo-word-ai-prompt-row {
  display: flex;
  align-items: center;
  gap: .35rem;
  width: 100%;
}
.demo-docx-scope .demo-word-ribbon .demo-word-ai-prompt textarea {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 34px !important;
  height: 34px;
  resize: none;
  margin: 0;
  padding: .4rem .55rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .8rem;
}
.demo-docx-scope .demo-word-ribbon .demo-word-ai-send {
  flex: none;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 10px !important;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border)) !important;
  background: color-mix(in srgb, var(--primary) 16%, var(--surface)) !important;
  color: var(--primary) !important;
  display: grid !important;
  place-items: center;
  cursor: pointer;
}
.demo-docx-scope .demo-word-ribbon .demo-word-ai-send:hover {
  background: color-mix(in srgb, var(--primary) 28%, var(--surface)) !important;
}
.demo-docx-scope .demo-word-ribbon .demo-word-ai-send .byb-icon {
  width: 16px; height: 16px;
}
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .cre-size-field {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: .15rem;
  font-size: .68rem;
  font-weight: 800;
  color: var(--muted);
}
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .docx-size-combo {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow: visible;
}
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .docx-size-combo #docxSize {
  width: 3.6rem;
  height: 100%;
  border: 0;
  border-radius: 10px 0 0 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .85rem;
  font-weight: 800;
  padding: 0 .2rem 0 .4rem;
  text-align: center;
}
html[dir="rtl"] .demo-docx-scope .demo-word-ribbon:not(.is-docked) .docx-size-combo #docxSize {
  border-radius: 0 10px 10px 0;
  padding: 0 .4rem 0 .2rem;
}
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .docx-size-caret {
  width: 22px;
  border: 0;
  border-inline-start: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-soft) 70%, var(--surface));
  color: var(--muted);
  cursor: pointer;
  font-size: .7rem;
  line-height: 1;
  border-radius: 0 10px 10px 0;
}
html[dir="rtl"] .demo-docx-scope .demo-word-ribbon:not(.is-docked) .docx-size-caret {
  border-radius: 10px 0 0 10px;
  border-inline-start: 0;
  border-inline-end: 1px solid var(--border);
}
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .docx-size-caret:hover {
  color: var(--primary);
  background: var(--primary-soft);
}
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .docx-size-menu {
  position: absolute;
  top: calc(100% + 4px);
  inset-inline-start: 0;
  z-index: 80;
  width: 4.8rem;
  max-height: 220px;
  overflow-y: auto;
  padding: .25rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 14px 32px rgba(15,23,42,.18);
  display: grid;
  gap: .1rem;
}
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .docx-size-menu[hidden] {
  display: none !important;
}
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .docx-size-menu button {
  height: 28px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--text) !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  cursor: pointer;
}
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .docx-size-menu button:hover,
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .docx-size-menu button.is-active {
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
}
@media (max-width: 900px) {
  /* Word mobile: Excel-like bottom rail-switch (desktop left dock unchanged) */
  .demo-docx-scope .cre-mobile-rail-switch,
  .demo-docx-scope #docxRailSwitch {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    z-index: 95;
    display: flex;
    flex-wrap: nowrap;
    gap: .22rem;
    padding: .3rem .4rem calc(.3rem + env(safe-area-inset-bottom, 0px));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: color-mix(in srgb, var(--surface) 96%, #fff);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 18px rgba(15,23,42,.1);
    pointer-events: auto;
    scrollbar-width: none;
  }
  .demo-docx-scope #docxRailSwitch::-webkit-scrollbar { display: none; }
  .demo-docx-scope #docxRailSwitch .cre-mobile-rail-switch-btn { pointer-events: auto; }

  .demo-docx-scope #docxRibbon.demo-word-ribbon,
  .demo-docx-scope #docxRibbon.demo-word-ribbon.is-mobile-rail,
  .demo-docx-scope #docxRibbon.demo-word-ribbon.is-docked {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(2.75rem + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(34vh, 220px) !important;
    z-index: 90;
    margin: 0 !important;
    padding: .35rem .45rem .4rem !important;
    border-radius: 14px 14px 0 0 !important;
    border: 1px solid var(--border) !important;
    border-bottom: 0 !important;
    background: color-mix(in srgb, var(--surface) 96%, #fff) !important;
    box-shadow: 0 -8px 28px rgba(15,23,42,.16) !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: .3rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
  }
  .demo-docx-scope #docxRibbon .ribbon-dock-close,
  .demo-docx-scope #docxRibbon .cre-ribbon-label,
  .demo-docx-scope #docxRibbon .cre-ribbon-combo-labels,
  .demo-docx-scope #docxRibbon .cre-ribbon-sep,
  .demo-docx-scope #docxRibbon .cre-cluster-label,
  .demo-docx-scope #docxRibbon .cre-ribbon-text {
    display: none !important;
  }
  .demo-docx-scope #docxRibbon .cre-ribbon-section,
  .demo-docx-scope #docxRibbon .cre-ribbon-group,
  .demo-docx-scope #docxRibbon .cre-ribbon-combo,
  .demo-docx-scope #docxRibbon .cre-ribbon-body,
  .demo-docx-scope #docxRibbon .cre-ribbon-body--combo {
    display: contents !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }
  .demo-docx-scope #docxRibbon .cre-mobile-rail-panel,
  .demo-docx-scope #docxRibbon [data-rail] {
    display: none !important;
  }
  .demo-docx-scope #docxRibbon[data-rail-panel="page"] [data-rail="page"],
  .demo-docx-scope #docxRibbon[data-rail-panel="format"] [data-rail="format"],
  .demo-docx-scope #docxRibbon[data-rail-panel="listdir"] [data-rail="listdir"],
  .demo-docx-scope #docxRibbon[data-rail-panel="insert"] [data-rail="insert"],
  .demo-docx-scope #docxRibbon[data-rail-panel="ai"] [data-rail="ai"] {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: .28rem;
    width: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .demo-docx-scope #docxRibbon[data-rail-panel="listdir"] .cre-list-group,
  .demo-docx-scope #docxRibbon[data-rail-panel="listdir"] .cre-dir-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: .22rem !important;
    padding: 0 !important;
    min-height: 0 !important;
    position: static !important;
  }
  .demo-docx-scope #docxRibbon .cre-hist-actions,
  .demo-docx-scope #docxRibbon .cre-align-group,
  .demo-docx-scope #docxRibbon .cre-list-group,
  .demo-docx-scope #docxRibbon .cre-dir-group,
  .demo-docx-scope #docxRibbon .cre-text-style-cluster,
  .demo-docx-scope #docxRibbon .demo-docx-modes {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: .22rem;
  }
  .demo-docx-scope #docxRibbon .cre-flyout {
    display: inline-flex !important;
    position: relative;
    width: auto !important;
    height: auto !important;
  }
  .demo-docx-scope #docxRibbon .cre-flyout-menu[hidden],
  body > .cre-flyout-menu[hidden] {
    display: none !important;
  }
  .demo-docx-scope #docxRibbon .cre-ribbon-chip,
  .demo-docx-scope #docxRibbon .cre-flyout-toggle,
  .demo-docx-scope #docxRibbon .cre-hist-btn,
  .demo-docx-scope #docxRibbon button[data-cmd],
  .demo-docx-scope #docxRibbon button[data-align],
  .demo-docx-scope #docxRibbon .demo-docx-mode,
  .demo-docx-scope #docxRibbon #docxAiApply,
  .demo-docx-scope #docxRibbon #docxDirRtl,
  .demo-docx-scope #docxRibbon #docxDirLtr {
    flex: 0 0 auto !important;
    width: 2.85rem !important;
    min-width: 2.85rem !important;
    height: 44px !important;
    padding: .15rem !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .1rem !important;
  }
  .demo-docx-scope #docxRibbon .cre-ribbon-field {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    margin: 0;
  }
  .demo-docx-scope #docxRibbon .cre-ribbon-field > span,
  .demo-docx-scope #docxRibbon .cre-ribbon-field .cre-cluster-label {
    display: none !important;
  }
  .demo-docx-scope #docxRibbon .cre-field-spacing,
  .demo-docx-scope #docxRibbon input#docxLine,
  .demo-docx-scope #docxRibbon label.cre-field-spacing,
  .demo-docx-scope #docxRibbon input[type="range"] {
    display: none !important;
  }
  .demo-docx-scope #docxRibbon .cre-ribbon-field select#docxFont {
    display: block !important;
    width: auto !important;
    min-width: 78px !important;
    max-width: 95px !important;
    height: 38px !important;
    padding: 0 0.5rem !important;
    border-radius: 10px !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    box-sizing: border-box !important;
  }
  .demo-docx-scope #docxRibbon .docx-size-combo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 38px !important;
    padding: 0 4px !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    background: var(--surface) !important;
    box-sizing: border-box !important;
  }
  .demo-docx-scope #docxRibbon input#docxSize {
    display: block !important;
    width: 26px !important;
    height: 34px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    text-align: center !important;
    color: var(--text) !important;
  }
  .demo-docx-scope #docxRibbon #docxSizeCaret {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 14px !important;
    height: 34px !important;
    font-size: 0.65rem !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-soft) !important;
    cursor: pointer !important;
  }
  .demo-docx-scope #docxRibbon .cre-ribbon-field input[type="color"] {
    display: block !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    padding: 3px !important;
    box-sizing: border-box !important;
  }
  .demo-docx-scope #docxRibbon[data-rail-panel="ai"] .demo-word-ai-prompt:not([hidden]) {
    display: flex !important;
    min-width: 10rem;
  }
  .demo-docx-scope #docxRibbon .ribbon-mini-label {
    display: none !important;
  }
  .demo-docx-scope .demo-word-ribbon-spacer { display: none !important; }
  .demo-docx-scope .demo-word-multi {
    padding-inline-start: 0 !important;
    padding-bottom: calc(6.4rem + env(safe-area-inset-bottom, 0px)) !important;
  }
  .demo-docx-scope .demo-word-stage {
    position: relative !important;
    top: auto !important;
    width: 100%;
  }
  .demo-docx-scope .docx-ruler-frame,
  .demo-docx-scope .docx-ruler-shell {
    max-width: 100% !important;
    width: 100% !important;
    height: calc(100vh - 11rem) !important;
    max-height: calc(100vh - 11rem) !important;
  }
  .demo-docx-scope .demo-word-page {
    width: min(100%, 210mm) !important;
    max-width: 100% !important;
    transform: none;
  }

  /* PPTX mobile: never show vertical side ribbon over the slide */
  .demo-pptx-scope #pptxRibbon.demo-word-ribbon,
  .demo-pptx-scope #pptxRibbon {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: fixed !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    z-index: -1 !important;
  }
  .demo-pptx-scope[data-rail-panel="format"] #pptxRibbon.demo-word-ribbon,
  .demo-pptx-scope[data-rail-panel="format"] #pptxRibbon {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    max-height: min(38vh, 220px) !important;
    z-index: 90 !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: .3rem !important;
    padding: .4rem .55rem calc(3.35rem + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
    border: 1px solid var(--border) !important;
    border-bottom: 0 !important;
    border-radius: 14px 14px 0 0 !important;
    background: color-mix(in srgb, var(--surface) 96%, #fff) !important;
    box-shadow: 0 -8px 28px rgba(15,23,42,.16) !important;
  }
  .demo-pptx-scope[data-rail-panel="format"] #pptxRibbon .cre-ribbon-group,
  .demo-pptx-scope[data-rail-panel="format"] #pptxRibbon .cre-hist-actions,
  .demo-pptx-scope[data-rail-panel="format"] #pptxRibbon .cre-align-group,
  .demo-pptx-scope[data-rail-panel="format"] #pptxRibbon .cre-dir-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: .22rem !important;
    width: auto !important;
  }
  .demo-pptx-scope[data-rail-panel="format"] #pptxRibbon button,
  .demo-pptx-scope[data-rail-panel="format"] #pptxRibbon .cre-hist-btn {
    width: 2.6rem !important;
    min-width: 2.6rem !important;
    height: 2.6rem !important;
    flex: 0 0 auto !important;
  }
  .demo-pptx-scope #pptxRibbon label,
  .demo-pptx-scope #pptxRibbon select,
  .demo-pptx-scope #pptxRibbon input { display: none !important; }

  .demo-docx-scope .demo-creative-actions,
  .demo-pptx-scope .demo-creative-actions {
    /* keep shared 2-row grid from the global mobile creative-actions rule */
    position: relative;
    z-index: 50;
  }
  .demo-docx-scope .demo-creative-actions .btn,
  .demo-pptx-scope .demo-creative-actions .btn,
  .demo-docx-scope .demo-creative-actions a.btn,
  .demo-pptx-scope .demo-creative-actions a.btn {
    white-space: nowrap;
    font-size: .62rem;
    padding: .32rem .2rem;
  }
  .demo-pptx-scope .demo-creative-actions .cre-act-export,
  .demo-pptx-scope .demo-creative-actions #pptxExportToggle {
    position: relative;
    z-index: 60;
    pointer-events: auto;
  }
  .demo-pptx-scope #pptxExportFlyout:not([hidden]) {
    position: fixed !important;
    z-index: 120 !important;
    pointer-events: auto !important;
    max-width: min(92vw, 280px);
  }
}
.demo-docx-scope .demo-word-ribbon.is-docked {
  display: grid !important;
  grid-template-columns: repeat(2, 40px) !important;
  grid-auto-rows: 40px;
  justify-content: center;
  align-content: start;
  gap: .32rem;
  width: auto;
  padding: .45rem !important;
  overflow: visible !important;
  scrollbar-width: thin;
  border: 0;
  background: color-mix(in srgb, var(--surface) 94%, #fff);
}
.demo-docx-scope .demo-word-ribbon .ribbon-dock-close { display: none; }
.demo-docx-scope .demo-word-ribbon.is-docked .ribbon-dock-close {
  display: grid;
  place-items: center;
  width: 40px; height: 40px; min-width: 40px; margin: 0;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, #ef4444 45%, var(--border));
  background: color-mix(in srgb, #ef4444 12%, var(--surface));
  color: #dc2626;
  font-weight: 900;
  cursor: pointer; font-size: 1.25rem; line-height: 1;
  grid-column: 1 / -1; justify-self: center;
}
.demo-docx-scope .demo-word-ribbon.is-docked .ribbon-dock-close:hover {
  background: #ef4444;
  border-color: #dc2626;
  color: #fff;
}
.demo-docx-scope .demo-word-ribbon .cre-ribbon-btn,
.demo-docx-scope .demo-word-ribbon button[data-cmd],
.demo-docx-scope .demo-word-ribbon .cre-align-group button,
.demo-docx-scope .demo-word-ribbon .cre-dir-group button,
.demo-docx-scope .demo-word-ribbon .cre-hist-btn,
.demo-docx-scope .demo-word-ribbon .cre-flyout-toggle,
.demo-docx-scope .demo-word-ribbon .demo-docx-mode,
.demo-docx-scope .demo-word-ribbon .btn {
  height: 34px; min-width: 34px; margin: 0;
  border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  padding: 0 .55rem; font: inherit; font-size: .78rem; font-weight: 700;
  cursor: pointer; box-shadow: none;
}
.demo-docx-scope .demo-word-ribbon .cre-ribbon-btn:hover,
.demo-docx-scope .demo-word-ribbon button[data-cmd]:hover,
.demo-docx-scope .demo-word-ribbon .btn:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}
.demo-docx-scope .demo-word-ribbon .is-active,
.demo-docx-scope .demo-word-ribbon .demo-docx-mode.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}
/* Docked Word ribbon on WEB/desktop ONLY ? physical LEFT (previous behavior).
   Mobile keeps the shared bottom bar (same position as #pptxRibbon). */
@media (min-width: 901px) {
  .demo-docx-scope #docxRibbon.demo-word-ribbon.is-docked,
  .demo-docx-scope .demo-word-ribbon.is-docked {
    position: fixed !important;
    top: calc(50% + 52px) !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    z-index: 40;
    width: auto !important;
    height: auto !important;
    max-height: calc(100vh - 5.5rem);
    overflow: visible !important;
    box-shadow: 0 16px 40px rgba(15,23,42,.18);
    border: 1px solid var(--border);
    border-left: 0 !important;
    border-right: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 94%, #fff);
    border-radius: 0 16px 16px 0;
    display: grid !important;
    grid-template-columns: repeat(2, 40px) !important;
    flex-direction: unset !important;
  }
  html[dir="rtl"] .demo-docx-scope #docxRibbon.demo-word-ribbon.is-docked,
  html[dir="rtl"] .demo-docx-scope .demo-word-ribbon.is-docked {
    left: 0 !important;
    right: auto !important;
  }
}
/* Mobile Word is-docked position = same as pptxRibbon (bottom bar) ? see block above.
   Do NOT re-pin Word to the left on mobile. */
.demo-docx-scope .demo-word-ribbon.is-docked .cre-ribbon-group,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-ribbon-section,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-ribbon-body {
  display: contents;
  border: 0;
  padding: 0;
  background: transparent;
  min-height: 0;
  height: auto;
}
.demo-docx-scope .demo-word-ribbon.is-docked .cre-hist-actions,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-align-group,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-dir-group,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-list-group,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-text-style-cluster,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-ribbon-cluster,
.demo-docx-scope .demo-word-ribbon.is-docked .demo-docx-modes {
  display: contents !important;
  position: static !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.demo-docx-scope .demo-word-ribbon.is-docked .cre-cluster-label,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-list-group > .cre-cluster-label,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-align-group > .cre-cluster-label,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-dir-group > .cre-cluster-label,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-text-style-cluster > .cre-cluster-label {
  display: none !important;
  position: static !important;
}
.demo-docx-scope .demo-word-ribbon.is-docked .demo-word-ai-prompt,
.demo-docx-scope .demo-word-ribbon.is-docked .demo-word-ai-prompt-label,
.demo-docx-scope .demo-word-ribbon.is-docked .demo-word-ai-prompt-row,
.demo-docx-scope .demo-word-ribbon.is-docked .demo-word-ai-send {
  display: none !important;
}
.demo-docx-scope .demo-word-ribbon.is-docked .cre-flyout {
  display: block;
  position: relative;
  width: 40px;
  height: 40px;
}
.demo-docx-scope .demo-word-ribbon.is-docked .cre-ribbon-field,
.demo-docx-scope .demo-word-ribbon.is-docked .demo-word-ai-prompt,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-ribbon-text,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-ribbon-section > label.cre-ribbon-field select,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-ribbon-field input[type="number"],
.demo-docx-scope .demo-word-ribbon.is-docked .cre-ribbon-field input[type="color"],
.demo-docx-scope .demo-word-ribbon.is-docked .cre-ribbon-field input[type="range"] {
  display: none !important;
}
/* Desktop docked ribbon: icon-only 2-col grid ? no labels/mini-labels */
@media (min-width: 901px) {
  .demo-docx-scope .demo-word-ribbon.is-docked .cre-ribbon-label,
  .demo-docx-scope .demo-word-ribbon.is-docked .cre-ribbon-combo-labels,
  .demo-docx-scope .demo-word-ribbon.is-docked .cre-cluster-label,
  .demo-docx-scope .demo-word-ribbon.is-docked .ribbon-mini-label,
  .demo-docx-scope .demo-word-ribbon.is-docked .cre-ribbon-text,
  .demo-docx-scope .demo-word-ribbon.is-docked .cre-ribbon-field > span {
    display: none !important;
  }
  .demo-docx-scope .demo-word-ribbon.is-docked {
    grid-template-columns: repeat(2, 40px) !important;
    grid-auto-flow: row dense;
    gap: .28rem !important;
    padding: .4rem !important;
    align-content: start;
    justify-content: center;
  }
  /* Logical visual order: undo/redo ? B/I/U ? align?4 ? dir ? lists ? inserts ? header/footer ? AI */
  .demo-docx-scope .demo-word-ribbon.is-docked #docxUndo { order: 1; }
  .demo-docx-scope .demo-word-ribbon.is-docked #docxRedo { order: 2; }
  .demo-docx-scope .demo-word-ribbon.is-docked button[data-cmd="bold"] { order: 3; }
  .demo-docx-scope .demo-word-ribbon.is-docked button[data-cmd="italic"] { order: 4; }
  .demo-docx-scope .demo-word-ribbon.is-docked button[data-cmd="underline"] { order: 5; }
  .demo-docx-scope .demo-word-ribbon.is-docked button[data-align="right"] { order: 6; }
  .demo-docx-scope .demo-word-ribbon.is-docked button[data-align="center"] { order: 7; }
  .demo-docx-scope .demo-word-ribbon.is-docked button[data-align="left"] { order: 8; }
  .demo-docx-scope .demo-word-ribbon.is-docked button[data-align="justify"] { order: 9; }
  .demo-docx-scope .demo-word-ribbon.is-docked #docxDirRtl { order: 10; }
  .demo-docx-scope .demo-word-ribbon.is-docked #docxDirLtr { order: 11; }
  .demo-docx-scope .demo-word-ribbon.is-docked #docxBulletList { order: 12; }
  .demo-docx-scope .demo-word-ribbon.is-docked #docxNumberList { order: 13; }
  .demo-docx-scope .demo-word-ribbon.is-docked #docxBulletList,
  .demo-docx-scope .demo-word-ribbon.is-docked #docxNumberList,
  .demo-docx-scope .demo-word-ribbon.is-docked #docxDirRtl,
  .demo-docx-scope .demo-word-ribbon.is-docked #docxDirLtr {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    z-index: auto !important;
  }
  .demo-docx-scope .demo-word-ribbon.is-docked [data-flyout="docxImgFlyout"] { order: 14; }
  .demo-docx-scope .demo-word-ribbon.is-docked [data-flyout="docxTableFlyout"] { order: 15; }
  .demo-docx-scope .demo-word-ribbon.is-docked [data-flyout="docxShapeFlyout"] { order: 16; }
  .demo-docx-scope .demo-word-ribbon.is-docked [data-flyout="docxPaperFlyout"] { order: 17; }
  .demo-docx-scope .demo-word-ribbon.is-docked [data-flyout="docxBorderFlyout"] { order: 18; }
  .demo-docx-scope .demo-word-ribbon.is-docked [data-flyout="docxLayoutFlyout"] { order: 19; }
  .demo-docx-scope .demo-word-ribbon.is-docked [data-flyout="docxPatternFlyout"] { order: 20; }
  .demo-docx-scope .demo-word-ribbon.is-docked #docxHeaderEnable { order: 21; }
  .demo-docx-scope .demo-word-ribbon.is-docked [data-flyout="docxHeaderFlyout"] { order: 22; }
  .demo-docx-scope .demo-word-ribbon.is-docked [data-flyout="docxFooterFlyout"] { order: 23; }
  .demo-docx-scope .demo-word-ribbon.is-docked #docxPageNumToggle { order: 24; }
  .demo-docx-scope .demo-word-ribbon.is-docked [data-flyout="docxNumStyleFlyout"] { order: 25; }
  .demo-docx-scope .demo-word-ribbon.is-docked .demo-docx-mode[data-ai="polish"] { order: 26; }
  .demo-docx-scope .demo-word-ribbon.is-docked .demo-docx-mode[data-ai="format"] { order: 27; }
  .demo-docx-scope .demo-word-ribbon.is-docked .demo-docx-mode[data-ai="summary"] { order: 28; }
  .demo-docx-scope .demo-word-ribbon.is-docked .demo-docx-mode[data-ai="describe"] { order: 29; }
  .demo-docx-scope .demo-word-ribbon.is-docked #docxAiApply { order: 30; }
  .demo-docx-scope .demo-word-ribbon.is-docked > .ribbon-dock-close { order: 99; }
  .demo-docx-scope .demo-word-ribbon.is-docked .cre-flyout,
  .demo-docx-scope .demo-word-ribbon.is-docked .cre-ribbon-body > button,
  .demo-docx-scope .demo-word-ribbon.is-docked .cre-hist-btn,
  .demo-docx-scope .demo-word-ribbon.is-docked .cre-flyout-toggle,
  .demo-docx-scope .demo-word-ribbon.is-docked .cre-align-group > button,
  .demo-docx-scope .demo-word-ribbon.is-docked .cre-dir-group > button,
  .demo-docx-scope .demo-word-ribbon.is-docked .cre-text-style-cluster > button,
  .demo-docx-scope .demo-word-ribbon.is-docked .cre-list-group > button,
  .demo-docx-scope .demo-word-ribbon.is-docked button[data-cmd],
  .demo-docx-scope .demo-word-ribbon.is-docked button[data-align],
  .demo-docx-scope .demo-word-ribbon.is-docked .demo-docx-mode,
  .demo-docx-scope .demo-word-ribbon.is-docked .cre-ribbon-chip,
  .demo-docx-scope .demo-word-ribbon.is-docked #docxAiApply {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}
.demo-docx-scope .demo-word-ribbon.is-docked .cre-flyout-menu[hidden] { display: none !important; }
.demo-docx-scope .demo-word-ribbon.is-docked > .ribbon-dock-close,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-ribbon-body > button,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-hist-btn,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-flyout-toggle,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-align-group > button,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-dir-group > button,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-text-style-cluster > button,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-list-group > button,
.demo-docx-scope .demo-word-ribbon.is-docked button[data-cmd],
.demo-docx-scope .demo-word-ribbon.is-docked button[data-align],
.demo-docx-scope .demo-word-ribbon.is-docked .demo-docx-mode,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-ribbon-body > .btn,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-ribbon-chip,
.demo-docx-scope .demo-word-ribbon.is-docked #docxAiApply {
  width: 40px !important; min-width: 40px !important; height: 40px !important;
  padding: 0 !important; margin: 0 !important;
  font-size: .9rem !important; font-weight: 800;
  gap: 0 !important; line-height: 1;
  display: grid !important; place-items: center;
  color: var(--text) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--bg-soft) 70%, var(--surface)) !important;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset;
}
.demo-docx-scope .demo-word-ribbon.is-docked .cre-ribbon-body > button:hover,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-flyout-toggle:hover,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-hist-btn:hover,
.demo-docx-scope .demo-word-ribbon.is-docked .demo-docx-mode:hover,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-ribbon-chip:hover,
.demo-docx-scope .demo-word-ribbon.is-docked button[data-cmd]:hover,
.demo-docx-scope .demo-word-ribbon.is-docked button[data-align]:hover {
  border-color: var(--primary) !important;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface)) !important;
}
/* Flyout panels must keep their own Office-like layout (never 40?40 dock tiles) */
.demo-docx-scope .demo-word-ribbon.is-docked .cre-flyout-menu,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-flyout-menu button,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-flyout-menu .cre-flyout-item,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-flyout-menu .cre-flyout-btn,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-flyout-menu label {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  place-items: unset !important;
  padding: .48rem .55rem !important;
  margin: 0 !important;
  gap: .55rem !important;
  line-height: 1.25 !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
  color: inherit !important;
  text-align: start !important;
}
.demo-docx-scope .demo-word-ribbon.is-docked .cre-flyout-menu:not([hidden]) {
  display: grid !important;
  padding: .5rem !important;
  gap: .2rem !important;
  width: min(300px, calc(100vw - 120px)) !important;
  min-width: 248px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 40px rgba(15,23,42,.22) !important;
}
.demo-docx-scope .demo-word-ribbon.is-docked .cre-flyout-menu[hidden] {
  display: none !important;
}
.demo-docx-scope .demo-word-ribbon.is-docked .cre-flyout-menu .cre-flyout-btn {
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  justify-content: center !important;
  padding: .5rem .7rem !important;
}
.demo-docx-scope .demo-word-ribbon.is-docked .cre-flyout-menu .cre-flyout-btn--primary {
  background: color-mix(in srgb, var(--primary) 14%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border)) !important;
  color: var(--primary) !important;
}
.demo-docx-scope .demo-word-ribbon.is-docked .cre-flyout-menu .cre-flyout-item:hover {
  background: var(--bg-soft) !important;
}
.demo-docx-scope .demo-word-ribbon.is-docked .cre-flyout-menu .cre-flyout-field,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-flyout-menu .cre-flyout-actions {
  display: flex !important;
  width: 100% !important;
  height: auto !important;
  padding: .4rem .5rem !important;
  background: var(--bg-soft) !important;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent) !important;
}
.demo-docx-scope .demo-word-ribbon.is-docked .cre-flyout-menu .cre-flyout-actions {
  display: grid !important;
  grid-template-columns: 1fr auto;
  gap: .4rem !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.demo-docx-scope .demo-word-ribbon.is-docked .cre-flyout-menu input.cre-flyout-input,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-flyout-menu input[type="color"] {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 36px !important;
  padding: .55rem .65rem !important;
}
/* Red close X ? after generic docked button colors so it wins */
.demo-docx-scope #docxRibbon.is-docked button.ribbon-dock-close,
.demo-docx-scope .demo-word-ribbon.is-docked button.ribbon-dock-close {
  color: #dc2626 !important;
  background: color-mix(in srgb, #ef4444 16%, var(--surface)) !important;
  border: 1px solid #ef4444 !important;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}
.demo-docx-scope #docxRibbon.is-docked button.ribbon-dock-close:hover,
.demo-docx-scope .demo-word-ribbon.is-docked button.ribbon-dock-close:hover {
  color: #fff !important;
  background: #ef4444 !important;
  border-color: #b91c1c !important;
}
.demo-docx-scope .demo-word-ribbon.is-docked .cre-ribbon-body > button .byb-icon,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-flyout-toggle .byb-icon,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-hist-btn .byb-icon,
.demo-docx-scope .demo-word-ribbon.is-docked .demo-docx-mode .byb-icon,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-align-group > button .byb-icon,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-dir-group > button .byb-icon,
.demo-docx-scope .demo-word-ribbon.is-docked .cre-ribbon-chip .byb-icon {
  width: 17px; height: 17px; min-width: 17px; min-height: 17px;
  display: block; flex: none;
  stroke: currentColor; color: inherit;
}
.demo-docx-scope .demo-word-ribbon.is-docked .cre-flyout-menu .byb-icon {
  width: 15px !important; height: 15px !important; min-width: 15px !important; min-height: 15px !important;
  display: block; flex: none;
}
.demo-docx-scope .demo-word-ribbon.is-docked button b,
.demo-docx-scope .demo-word-ribbon.is-docked button i,
.demo-docx-scope .demo-word-ribbon.is-docked button u {
  font-size: .95rem !important; line-height: 1; display: inline-block;
  color: inherit;
}
.demo-docx-scope .demo-word-ribbon.is-docked .ribbon-glyph {
  font-size: .62rem !important; font-weight: 800; letter-spacing: .02em; line-height: 1;
  color: inherit;
}
.demo-pptx-scope #pptxRibbon .ribbon-glyph {
  font-size: .62rem; font-weight: 800; letter-spacing: .02em;
}
/* Docked ribbon is on physical LEFT ? always open menus to the physical RIGHT */
.demo-docx-scope .demo-word-ribbon.is-docked {
  overflow: visible !important;
}
.demo-docx-scope .demo-word-ribbon.is-docked .cre-flyout {
  overflow: visible;
}
.demo-docx-scope .demo-word-ribbon.is-docked .cre-flyout-menu {
  /* Physical position is applied by JS (fixed + left) so menus never clip off-screen */
  z-index: 120;
  min-width: 240px;
}
.demo-docx-scope .demo-word-ribbon-spacer {
  height: 0; transition: height .2s;
}
.demo-docx-scope .demo-word-ribbon.is-docked + .demo-word-ribbon-spacer {
  height: 0;
}
.demo-word-page.has-border { box-shadow: inset 0 0 0 3px var(--docx-border, #cbd5e1); }
.demo-word-page.border-thick { box-shadow: inset 0 0 0 6px var(--docx-border, #94a3b8); }
.demo-word-page.border-double {
  box-shadow: inset 0 0 0 2px var(--docx-border, #64748b), inset 0 0 0 5px #fff, inset 0 0 0 7px var(--docx-border, #64748b);
}
.demo-word-page.cre-pat-mesh,
.demo-word-page.cre-pat-stripes,
.demo-word-page.cre-pat-dots,
.demo-word-page.cre-pat-waves,
.demo-word-page.cre-pat-grid { position: relative; overflow: hidden; }
.demo-word-page.cre-pat-mesh::before,
.demo-word-page.cre-pat-stripes::before,
.demo-word-page.cre-pat-dots::before,
.demo-word-page.cre-pat-waves::before,
.demo-word-page.cre-pat-grid::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .12; z-index: 0;
}
.demo-word-page.cre-pat-mesh::before { background: radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--docx-bg, #fff) 35%, #64748b), transparent 42%); }
.demo-word-page.cre-pat-stripes::before { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--docx-bg, #fff) 40%, #64748b) 0 10px, transparent 10px 22px); }
.demo-word-page.cre-pat-dots::before { background: radial-gradient(circle, color-mix(in srgb, var(--docx-bg, #fff) 30%, #475569) 1.2px, transparent 1.3px) 0 0/16px 16px; }
.demo-word-page.cre-pat-waves::before { background: repeating-linear-gradient(0deg, transparent, transparent 14px, color-mix(in srgb, var(--docx-bg, #fff) 35%, #64748b) 14px, color-mix(in srgb, var(--docx-bg, #fff) 35%, #64748b) 16px); }
.demo-word-page.cre-pat-grid::before { background: linear-gradient(color-mix(in srgb, var(--docx-bg, #fff) 35%, #64748b) 1px, transparent 1px) 0 0/24px 24px, linear-gradient(90deg, color-mix(in srgb, var(--docx-bg, #fff) 35%, #64748b) 1px, transparent 1px) 0 0/24px 24px; }
.demo-word-page > * { position: relative; z-index: 1; }
.demo-word-page img.docx-inline-img {
  max-width: 100%; height: auto; display: block; margin: .75rem auto; border-radius: 6px;
}
.demo-word-ai-prompt {
  display: grid; gap: .35rem; min-width: min(320px, 100%);
}
.demo-word-ai-prompt textarea {
  min-height: 2.6rem; resize: vertical; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg-soft); color: var(--text);
  padding: .4rem .55rem; font: inherit; line-height: 1.45;
}
.cre-align-group { display: inline-flex; gap: .2rem; }
.cre-align-group button[data-align] { width: 34px; height: 34px; font-size: .82rem; }
.cre-dir-group { display: inline-flex; gap: .2rem; }
.cre-dir-group button.is-active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }

/* PPTX slide transitions + inline media */
.demo-pptx-slide.pptx-trans-fade-out { animation: pptx-fade-out .28s ease forwards; }
.demo-pptx-slide.pptx-trans-fade-in { animation: pptx-fade-in .32s ease forwards; }
.demo-pptx-slide.pptx-trans-slide-out { animation: pptx-slide-out .3s ease forwards; }
.demo-pptx-slide.pptx-trans-slide-in { animation: pptx-slide-in .34s ease forwards; }
.demo-pptx-slide.pptx-trans-zoom-out { animation: pptx-zoom-out .28s ease forwards; }
.demo-pptx-slide.pptx-trans-zoom-in { animation: pptx-zoom-in .34s ease forwards; }
@keyframes pptx-zoom-out { to { opacity: 0; transform: scale(.86); } }
@keyframes pptx-zoom-in { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }
@keyframes pptx-fade-out { to { opacity: 0; } }
@keyframes pptx-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pptx-slide-out { to { opacity: 0; transform: translateX(-28px); } }
@keyframes pptx-slide-in { from { opacity: 0; transform: translateX(28px); } }
[dir="rtl"] .demo-pptx-slide.pptx-trans-slide-out { animation-name: pptx-slide-out-rtl; }
[dir="rtl"] .demo-pptx-slide.pptx-trans-slide-in { animation-name: pptx-slide-in-rtl; }
@keyframes pptx-slide-out-rtl { to { opacity: 0; transform: translateX(28px); } }
@keyframes pptx-slide-in-rtl { from { opacity: 0; transform: translateX(-28px); } }
.demo-pptx-slide-media {
  position: absolute; max-width: 38%; max-height: 42%; object-fit: contain;
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.22); z-index: 2;
}
.demo-pptx-slide-media.is-icon { background: rgba(255,255,255,.12); padding: .35rem; }
.demo-pptx-slide-media.pos-tr { top: 1rem; right: 1rem; left: auto; bottom: auto; }
.demo-pptx-slide-media.pos-tl { top: 1rem; left: 1rem; right: auto; bottom: auto; }
.demo-pptx-slide-media.pos-br { bottom: 1rem; right: 1rem; top: auto; left: auto; }
.demo-pptx-slide-media.pos-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* Assist before/after + region */
.cre-assist-stage { position: relative; width: 100%; max-width: 720px; }
.cre-assist-stage canvas { display: block; width: 100%; height: auto; border-radius: 12px; }
.cre-url-short {
  width: 100%;
  max-width: 100%;
  min-height: 2.4rem;
  height: 2.4rem;
  resize: none;
  font-size: .78rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cre-region-layer {
  position: absolute; border: 2px dashed #38bdf8; background: rgba(56,189,248,.18);
  pointer-events: none; border-radius: 4px;
}
.cre-assist-video { width: min(100%, 720px); border-radius: 12px; background: #0f172a; }
.cre-ba-host, .cre-ba-wrap { width: min(100%, 720px); }
.cre-ba {
  position: relative; width: 100%; aspect-ratio: 1; overflow: hidden;
  border-radius: 14px; touch-action: none; user-select: none;
  direction: ltr;
  box-shadow: 0 14px 36px rgba(15,23,42,.16);
  background-color: #f1f5f9;
  background-image:
    linear-gradient(45deg, #e2e8f0 25%, transparent 25%),
    linear-gradient(-45deg, #e2e8f0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e2e8f0 75%),
    linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}
.cre-ba-after {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: fill; z-index: 0; pointer-events: none;
}
.cre-ba-before-clip {
  position: absolute; top: 0; bottom: 0; left: 0; width: 50%;
  overflow: hidden; border-right: 2px solid #fff; z-index: 1;
  pointer-events: none;
}
.cre-ba-before {
  position: absolute; top: 0; left: 0; height: 100%;
  width: 100%; /* JS overrides to full BA width in px */
  max-width: none;
  object-fit: fill;
  pointer-events: none;
}
.cre-ba-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px;
  background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.2);
  pointer-events: none; z-index: 2;
}
.cre-ba-handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 34px; height: 34px; border-radius: 50%; background: #fff;
  box-shadow: 0 4px 14px rgba(15,23,42,.25);
  background-image: linear-gradient(#64748b,#64748b), linear-gradient(#64748b,#64748b);
  background-size: 2px 12px, 12px 2px; background-repeat: no-repeat; background-position: center;
}
.cre-ba-range {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; z-index: 3;
}
.cre-ba-tag {
  position: absolute; top: .65rem; z-index: 2; font-size: .72rem; font-weight: 800;
  padding: .2rem .5rem; border-radius: 999px; background: rgba(15,23,42,.7); color: #fff;
}
.cre-ba-tag-b { inset-inline-start: .65rem; }
.cre-ba-tag-a { inset-inline-end: .65rem; }

/* PPTX transform + chrome */
.demo-pptx-slide { position: relative; overflow: hidden; }
@media (max-width: 900px) {
  .demo-pptx-scope .demo-pptx-slide {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    inset-inline: unset !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }
}
.demo-pptx-slide #pptxSlideTitle,
.demo-pptx-slide #pptxSlideBullets,
.demo-pptx-xform {
  position: absolute; cursor: move; outline: none;
  box-sizing: border-box; min-width: 80px; min-height: 32px;
}
.demo-pptx-slide #pptxSlideTitle.is-selected,
.demo-pptx-slide #pptxSlideBullets.is-selected,
.demo-pptx-xform.is-selected {
  outline: 2px solid rgba(56,189,248,.95);
  outline-offset: 2px;
}
.demo-pptx-rh {
  position: absolute; width: 14px; height: 14px; border-radius: 2px;
  background: #38bdf8; border: 2px solid #fff; z-index: 5; display: none;
  touch-action: none; user-select: none;
}
.demo-pptx-textbox {
  color: #fff;
  font-weight: 700;
  font-size: clamp(.85rem, 2.4vw, 1.35rem);
  line-height: 1.35;
  padding: .35rem .5rem;
  border: 1px dashed rgba(255,255,255,.35);
  border-radius: 8px;
  background: rgba(15,23,42,.18);
  outline: none;
  overflow: visible;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
}
.demo-pptx-textbox.is-selected {
  border-style: solid;
  border-color: rgba(56,189,248,.95);
}
.demo-pptx-xform.is-selected .demo-pptx-rh,
.demo-pptx-slide #pptxSlideTitle.is-selected .demo-pptx-rh,
.demo-pptx-slide #pptxSlideBullets.is-selected .demo-pptx-rh { display: block; }
.demo-pptx-rh.br { right: -6px; bottom: -6px; cursor: nwse-resize; }
.demo-pptx-chrome {
  position: absolute; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem 1rem; font-size: .78rem; font-weight: 700;
  color: rgba(255,255,255,.9); pointer-events: none;
}
.demo-pptx-chrome.is-header { top: 0; border-bottom: none; }
.demo-pptx-slide.has-chrome-header .demo-pptx-chrome.is-header:not([hidden]) {
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.demo-pptx-chrome.is-header[hidden],
.demo-pptx-chrome.is-header[hidden] * {
  display: none !important;
  border: none !important;
}
.demo-pptx-chrome.is-footer { bottom: 0; border-top: 1px solid rgba(255,255,255,.18); justify-content: space-between; }
.demo-pptx-chrome img { height: 28px; width: auto; border-radius: 4px; }
.demo-pptx-scope .demo-pptx-chrome-tools.cre-chrome-rail,
.demo-pptx-scope #pptxChromeTools {
  margin: 0;
}


/* ===== DOCX picture / shape / table objects ===== */
.docx-contextual {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .75rem;
  margin: 0 0 .65rem; padding: .45rem .65rem;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  box-shadow: 0 8px 20px rgba(15,23,42,.06);
}
.docx-contextual[hidden] { display: none !important; }
.docx-contextual-head {
  display: grid; gap: .1rem; min-width: 8rem; padding-inline-end: .5rem;
  border-inline-end: 1px solid var(--border);
}
.docx-contextual-head strong {
  font-size: .78rem; font-weight: 900; color: var(--primary);
}
.docx-contextual-sub { font-size: .65rem; color: var(--muted); font-weight: 700; }
.docx-contextual-body {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; flex: 1;
}
.docx-contextual .cre-ribbon-chip,
.docx-contextual .cre-flyout-toggle {
  height: 32px; min-height: 32px; padding: 0 .55rem;
  border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  display: inline-flex; align-items: center; gap: .3rem;
  font: inherit; font-size: .72rem; font-weight: 800; cursor: pointer;
}
.docx-contextual .cre-ribbon-chip .byb-icon { width: 14px; height: 14px; color: var(--primary); }
.docx-contextual .cre-flyout { position: relative; }
.docx-contextual .cre-flyout-menu {
  position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 120;
  max-height: min(60vh, 360px); overflow: auto;
}
.docx-ctx-color, .docx-ctx-num {
  display: inline-flex; align-items: center; gap: .3rem;
  height: 32px; padding: 0 .45rem; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: .68rem; font-weight: 800; color: var(--muted);
}
.docx-ctx-color input[type="color"] {
  width: 28px; height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer;
}
.docx-ctx-num input[type="number"] {
  width: 3.2rem; border: 0; background: transparent; font: inherit; font-weight: 800; color: var(--text);
}

.docx-pic, .docx-shape {
  position: relative; display: inline-block; max-width: 100%;
  vertical-align: middle; margin: .35rem; line-height: 0;
  user-select: none; -webkit-user-drag: none; -webkit-user-select: none;
  touch-action: none; cursor: move;
}
.docx-pic img {
  width: 100%; height: auto; display: block; border-radius: inherit;
  pointer-events: none; -webkit-user-drag: none; user-select: none;
}
.docx-obj-handle { cursor: nwse-resize; pointer-events: auto !important; }
.docx-pic.is-selected, .docx-shape.is-selected, .docx-table.is-selected {
  outline: 2px solid #38bdf8; outline-offset: 2px;
}
.docx-obj-handle {
  position: absolute; width: 12px; height: 12px; border-radius: 2px;
  background: #38bdf8; border: 2px solid #fff; z-index: 6;
  display: none; box-shadow: 0 1px 3px rgba(15,23,42,.35);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.docx-pic.is-selected .docx-obj-handle,
.docx-shape.is-selected .docx-obj-handle { display: block; }
.docx-obj-handle-nw { top: -5px; left: -5px; cursor: nwse-resize; }
.docx-obj-handle-ne { top: -5px; right: -5px; cursor: nesw-resize; }
.docx-obj-handle-sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.docx-obj-handle-se { bottom: -5px; right: -5px; cursor: nwse-resize; }

/* Wrap text */
.docx-pic.wrap-inline { float: none; display: inline-block; }
.docx-pic.wrap-square-left { float: left; margin: .35rem 1rem .35rem 0; shape-outside: margin-box; }
.docx-pic.wrap-square-right { float: right; margin: .35rem 0 .35rem 1rem; shape-outside: margin-box; }
.docx-pic.wrap-tight { float: left; margin: .25rem .75rem .25rem 0; shape-outside: content-box; }
.docx-pic.wrap-front { float: none; position: relative; z-index: 8; display: block; margin: .5rem auto; }
.docx-pic.wrap-behind {
  float: none; position: absolute; z-index: 0; opacity: .9; pointer-events: auto;
  left: 18%; top: 22%;
}
.demo-word-page { position: relative; }
.demo-word-page > *:not(.docx-pic.wrap-behind) { position: relative; z-index: 1; }

/* Picture styles */
.docx-pic.style-shadow img { box-shadow: 0 14px 28px rgba(15,23,42,.28); }
.docx-pic.style-soft img { filter: none; box-shadow: 0 0 18px rgba(15,23,42,.2); border-radius: 10px; }
.docx-pic.style-reflect { padding-bottom: 18%; }
.docx-pic.style-reflect::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 35%;
  background: linear-gradient(to bottom, rgba(255,255,255,.15), transparent);
  transform: scaleY(-1); transform-origin: top; opacity: .45;
  pointer-events: none;
}
.docx-pic.style-round img { border-radius: 16px; }
.docx-pic.style-circle img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
.docx-pic.style-bevel img {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 8px 18px rgba(15,23,42,.22);
}
.docx-pic.style-glow img { box-shadow: 0 0 0 3px rgba(56,189,248,.35), 0 0 22px rgba(56,189,248,.55); }

/* Frames */
.docx-pic.frame-thin img { outline: 2px solid var(--pic-frame-color, #334155); outline-offset: 2px; }
.docx-pic.frame-thick img { outline: 6px solid var(--pic-frame-color, #334155); outline-offset: 3px; }
.docx-pic.frame-double img {
  outline: 2px solid var(--pic-frame-color, #334155);
  box-shadow: 0 0 0 5px #fff, 0 0 0 7px var(--pic-frame-color, #334155);
}
.docx-pic.frame-gold img {
  outline: 5px solid #d4a017; outline-offset: 3px;
  box-shadow: 0 0 0 1px #7a5a08;
}
.docx-pic.frame-mat {
  padding: 12px; background: #f8fafc;
  box-shadow: 0 0 0 1px #cbd5e1, 0 10px 24px rgba(15,23,42,.12);
}
.docx-pic.frame-mat img { outline: 1px solid #94a3b8; }

.docx-wrap-ico {
  width: 28px; height: 22px; border-radius: 4px; flex: none;
  border: 1px solid var(--border); background: var(--bg-soft);
  position: relative; overflow: hidden;
}
.docx-wrap-ico::before {
  content: ""; position: absolute; inset: 4px; background:
    repeating-linear-gradient(0deg, #94a3b8 0 1px, transparent 1px 4px);
  opacity: .7;
}
.docx-wrap-left::after, .docx-wrap-right::after, .docx-wrap-inline::after,
.docx-wrap-front::after, .docx-wrap-behind::after, .docx-wrap-tight::after {
  content: ""; position: absolute; width: 10px; height: 10px; background: #38bdf8; border-radius: 2px;
}
.docx-wrap-inline::after { left: 9px; top: 6px; }
.docx-wrap-left::after { left: 3px; top: 6px; }
.docx-wrap-right::after { right: 3px; top: 6px; }
.docx-wrap-front::after { left: 9px; top: 4px; box-shadow: 0 0 0 2px #fff; z-index: 2; }
.docx-wrap-behind::after { left: 9px; top: 4px; opacity: .45; }
.docx-wrap-tight::after { left: 4px; top: 5px; border-radius: 50%; }

.docx-pic-style-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; padding: .2rem;
}
.docx-pic-style {
  border: 1px solid var(--border); border-radius: 8px; padding: .3rem;
  background: var(--bg-soft); cursor: pointer;
}
.docx-pic-style span {
  display: block; width: 100%; aspect-ratio: 1.2; border-radius: 4px;
  background: linear-gradient(135deg, #94a3b8, #475569);
}
.docx-pic-style .is-shadow { box-shadow: 0 6px 10px rgba(15,23,42,.35); }
.docx-pic-style .is-soft { border-radius: 10px; filter: blur(.2px); }
.docx-pic-style .is-reflect { box-shadow: 0 10px 0 -4px rgba(148,163,184,.45); }
.docx-pic-style .is-round { border-radius: 12px; }
.docx-pic-style .is-circle { border-radius: 50%; }
.docx-pic-style .is-bevel { box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
.docx-pic-style .is-glow { box-shadow: 0 0 10px #38bdf8; }
.docx-pic-style:hover { border-color: var(--primary); }

/* Shapes */
.docx-shape { color: #38bdf8; }
.docx-shape svg { width: 100%; height: 100%; display: block; overflow: visible; }
.docx-shape-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: .35rem; max-width: 320px;
}
.docx-shape-btn {
  aspect-ratio: 1; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-soft); cursor: pointer; padding: .3rem; color: #0ea5e9;
}
.docx-shape-btn:hover { border-color: var(--primary); background: var(--primary-soft); }
.docx-shape-btn svg { width: 100%; height: 100%; display: block; }
.cre-flyout-menu--shapes { min-width: 300px; max-width: 340px; }

/* Tables */
.cre-flyout-menu--table { min-width: 280px; }
.docx-table-picker {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px;
  padding: .2rem; width: 100%; max-width: 220px;
}
.docx-table-pick-cell {
  width: 100%; aspect-ratio: 1; border: 1px solid var(--border);
  border-radius: 3px; background: var(--surface); cursor: pointer; padding: 0;
}
.docx-table-pick-cell.is-hot {
  background: color-mix(in srgb, var(--primary) 35%, var(--surface));
  border-color: var(--primary);
}
.docx-table-quick {
  display: flex; flex-wrap: wrap; align-items: end; gap: .4rem;
}
.docx-table-quick .cre-flyout-field { flex: 0 0 auto; }
.demo-word-page table.docx-table {
  width: 100%; border-collapse: collapse; margin: .75rem 0;
  table-layout: fixed; background: #fff; color: #0f172a;
  box-shadow: 0 1px 0 rgba(15,23,42,.04);
}
.demo-word-page table.docx-table td {
  border: 1px solid #94a3b8; padding: .45rem .55rem;
  min-width: 2rem; vertical-align: top; position: relative;
  word-break: break-word; font-size: .95em; line-height: 1.45;
  cursor: text;
}
.demo-word-page table.docx-table td.is-header,
.demo-word-page table.docx-table.has-header tr:first-child td {
  background: #e2e8f0; font-weight: 800;
}
.demo-word-page table.docx-table td.is-cell-selected {
  outline: 2px solid #38bdf8; outline-offset: -2px;
  background: color-mix(in srgb, #38bdf8 12%, #fff) !important;
}
.demo-word-page table.docx-table.borders-out td { border-color: transparent; }
.demo-word-page table.docx-table.borders-out { border: 2px solid #334155; }
.demo-word-page table.docx-table.borders-none td { border-color: transparent; }
.demo-word-page table.docx-table td:hover { cursor: cell; }
.demo-word-page table.docx-table.is-selected td { border-color: #64748b; }

@media (max-width: 900px) {
  .docx-shape-grid { grid-template-columns: repeat(4, 1fr); }
  .docx-contextual-head { border: 0; width: 100%; padding: 0; }
}

/* -- Excel spreadsheet demo -- */
.demo-excel-scope {
  --cre-accent: #0f766e;
  --cre-accent-2: #15803d;
  --excel-rail-w: 76px;
}
.demo-excel-scope .excel-workspace {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
}

/* Compact top ribbon ? wrap professionally, never horizontal-scroll */
.demo-excel-scope .excel-ribbon {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .15rem 0;
  overflow: visible; padding: .35rem .4rem .3rem; margin-bottom: 0;
  border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cre-accent) 4%, var(--surface)), var(--surface));
}
.demo-excel-scope .excel-ribbon::-webkit-scrollbar { display: none; }
.demo-excel-scope .excel-ribbon-group {
  flex: 0 1 auto; min-width: 0; padding-inline: .35rem .45rem;
}
.demo-excel-scope .excel-ribbon-group + .excel-ribbon-group {
  border-inline-start: 1px solid var(--border);
  padding-inline-start: .55rem;
}
.demo-excel-scope .excel-ribbon .cre-ribbon-label {
  font-size: .62rem; margin-bottom: .15rem; padding-bottom: .12rem;
  letter-spacing: .02em; text-transform: uppercase;
}
.demo-excel-scope .excel-ribbon-row {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .2rem;
}
.demo-excel-scope .excel-chip {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .08rem; min-width: 2.35rem; max-width: 3.4rem; height: 2.55rem;
  padding: .18rem .22rem .12rem; border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 9px; background: color-mix(in srgb, var(--bg-soft) 60%, var(--surface));
  color: inherit; cursor: pointer; font: inherit; line-height: 1;
  transition: background .15s, border-color .15s, transform .12s;
}
.demo-excel-scope .excel-chip:hover {
  background: color-mix(in srgb, var(--cre-accent) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--cre-accent) 35%, var(--border));
  transform: translateY(-1px);
}
.demo-excel-scope .excel-chip:active { transform: translateY(0); }
.demo-excel-scope .excel-chip .byb-icon,
.demo-excel-scope .excel-chip svg { width: 14px; height: 14px; color: var(--cre-accent); flex: none; }
.demo-excel-scope .excel-chip b,
.demo-excel-scope .excel-chip i,
.demo-excel-scope .excel-chip u { font-size: .88rem; font-weight: 900; }
.demo-excel-scope .excel-glyph {
  font-size: .72rem; font-weight: 900; line-height: 1;
  font-family: "Segoe UI", Cairo, sans-serif;
}
.demo-excel-scope .excel-glyph.good { color: #15803d; }
.demo-excel-scope .excel-glyph.pie { color: var(--cre-accent); font-size: .95rem; }
.demo-excel-scope .excel-chip-label {
  font-size: .56rem; font-weight: 800; color: var(--muted);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.1;
}
.demo-excel-scope .excel-chip--field,
.demo-excel-scope .excel-chip--color {
  min-width: 2.6rem; padding-inline: .15rem;
}
.demo-excel-scope .excel-chip--field .excel-ribbon-select {
  width: 100%; min-width: 0; max-width: 3rem; border: 0; background: transparent;
  font: inherit; font-size: .62rem; font-weight: 800; color: var(--text);
  padding: 0; text-align: center; cursor: pointer;
}
.demo-excel-scope .excel-chip--color { position: relative; }
.demo-excel-scope .excel-chip--color input[type="color"] {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer;
}
.demo-excel-scope .excel-chip--dir .excel-dir-label {
  font-size: .82rem; font-weight: 900; color: var(--cre-accent);
}

/* Formula bar ? single full-width row */
.demo-excel-scope .excel-formula-row {
  display: flex; align-items: center; gap: 0;
  padding: .28rem .45rem; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-soft) 40%, var(--surface));
}
.demo-excel-scope .excel-cell-ref {
  flex: none; font-weight: 800; font-size: .76rem; min-width: 2.6rem;
  padding: .32rem .45rem; text-align: center;
  border-inline-end: 1px solid var(--border);
  background: color-mix(in srgb, var(--cre-accent) 10%, var(--surface));
  color: var(--cre-accent); font-variant-numeric: tabular-nums;
}
.demo-excel-scope .excel-fx-mark {
  flex: none; width: 1.8rem; text-align: center;
  font-size: .68rem; font-weight: 900; font-style: italic; color: var(--muted);
  border-inline-end: 1px solid var(--border);
  padding: .32rem 0;
}
.demo-excel-scope .excel-formula-input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent;
  font-family: ui-monospace, Consolas, monospace; font-size: .84rem;
  padding: .32rem .55rem; color: inherit; outline: none;
}
.demo-excel-scope .excel-formula-ok,
.demo-excel-scope .excel-formula-cancel {
  flex: none; display: grid; place-items: center;
  width: 2rem; height: 2rem; margin-inline-start: .25rem;
  border: 1px solid color-mix(in srgb, var(--cre-accent) 40%, var(--border));
  border-radius: 8px; background: color-mix(in srgb, var(--cre-accent) 12%, var(--surface));
  color: var(--cre-accent); cursor: pointer;
}
.demo-excel-scope .excel-formula-cancel {
  border-color: color-mix(in srgb, #dc2626 40%, var(--border));
  background: color-mix(in srgb, #ef4444 10%, var(--surface));
  color: #dc2626;
  font-size: 1.15rem; font-weight: 900; line-height: 1;
}
.demo-excel-scope .excel-formula-ok:hover {
  background: color-mix(in srgb, var(--cre-accent) 22%, var(--surface));
}
.demo-excel-scope .excel-formula-cancel:hover {
  background: #ef4444; color: #fff; border-color: #b91c1c;
}
.demo-excel-scope .excel-formula-ok .byb-icon { width: 14px; height: 14px; }
.demo-excel-scope .excel-formula-cancel {
  opacity: 1 !important;
  visibility: visible !important;
  display: grid !important;
}

/* Main layout: left rail | grid | right rail */
.demo-excel-scope .excel-main {
  display: grid;
  grid-template-columns: var(--excel-rail-w) minmax(0, 1fr) var(--excel-rail-w);
  align-items: stretch; min-height: 0;
}
.demo-excel-scope .excel-rail {
  display: flex; flex-direction: column; gap: 0;
  padding: .35rem .25rem; border-inline-end: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-soft) 35%, var(--surface));
  overflow-y: auto; max-height: min(70vh, 720px);
}
.demo-excel-scope .excel-rail--right {
  border-inline-end: 0; border-inline-start: 1px solid var(--border);
}
.demo-excel-scope .excel-rail-head {
  display: flex; align-items: center; justify-content: center; gap: .2rem;
  font-size: .58rem; font-weight: 900; text-transform: uppercase;
  color: var(--muted); padding: .2rem .1rem .35rem;
  border-bottom: 1px solid var(--border); margin-bottom: .3rem;
}
.demo-excel-scope .excel-rail-head--sub {
  margin-top: .45rem; border-top: 1px solid var(--border); padding-top: .4rem;
}
.demo-excel-scope .excel-rail-head .byb-icon { width: 12px; height: 12px; color: var(--cre-accent); }
.demo-excel-scope .excel-rail-body {
  display: flex; flex-direction: column; align-items: stretch; gap: .22rem;
}
.demo-excel-scope .excel-rail .excel-chip {
  max-width: none; width: 100%; min-width: 0; height: 2.45rem;
  padding-inline: .12rem;
}
.demo-excel-scope .excel-rail .excel-chip-label {
  font-size: .48rem;
  max-width: 100%;
}

/* Grid */
.demo-excel-scope .excel-sheet-wrap {
  border: 0; border-radius: 0; background: var(--surface); overflow: hidden; min-width: 0;
}
.demo-excel-scope .excel-sheet-scroll {
  overflow: auto; max-height: min(70vh, 720px); -webkit-overflow-scrolling: touch;
}
.demo-excel-scope .excel-grid {
  border-collapse: collapse; width: max-content; min-width: 100%;
  font-size: .82rem; background: #fff; color: #0f172a;
}
[data-theme="dark"] .demo-excel-scope .excel-grid { background: #0f172a; color: #e2e8f0; }
.demo-excel-scope .excel-grid th,
.demo-excel-scope .excel-grid td {
  border: 1px solid #cbd5e1; padding: .28rem .4rem;
  min-width: 4.5rem; height: 1.7rem; vertical-align: middle;
}
[data-theme="dark"] .demo-excel-scope .excel-grid th,
[data-theme="dark"] .demo-excel-scope .excel-grid td { border-color: #334155; }
.demo-excel-scope .excel-grid thead th,
.demo-excel-scope .excel-row-head,
.demo-excel-scope .excel-corner {
  background: #e2e8f0; font-weight: 700; text-align: center;
  position: sticky; z-index: 2; user-select: none;
}
[data-theme="dark"] .demo-excel-scope .excel-grid thead th,
[data-theme="dark"] .demo-excel-scope .excel-row-head,
[data-theme="dark"] .demo-excel-scope .excel-corner { background: #1e293b; }
.demo-excel-scope .excel-grid thead th { top: 0; }
.demo-excel-scope .excel-row-head,
.demo-excel-scope .excel-corner {
  inset-inline-start: 0; min-width: 2.2rem; width: 2.2rem;
}
.demo-excel-scope .excel-corner { z-index: 3; }
.demo-excel-scope .excel-grid td {
  cursor: cell; outline: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.demo-excel-scope .excel-grid td.is-editing {
  cursor: text;
  user-select: text; -webkit-user-select: text;
}
.demo-excel-scope .excel-grid td:not(.is-editing)::selection { background: transparent; }
.demo-excel-scope .excel-grid td.is-active {
  outline: 2px solid var(--cre-accent); outline-offset: -2px;
  background: color-mix(in srgb, var(--cre-accent) 10%, transparent);
}
.demo-excel-scope .excel-grid td.is-bold { font-weight: 800; }
.demo-excel-scope .excel-grid td.is-italic { font-style: italic; }
.demo-excel-scope .excel-grid td.is-underline { text-decoration: underline; }
.demo-excel-scope .excel-grid td.align-left { text-align: start; }
.demo-excel-scope .excel-grid td.align-center,
.demo-excel-scope .excel-grid td.is-merged { text-align: center; }
.demo-excel-scope .excel-grid td.align-right { text-align: end; }
.demo-excel-scope .excel-grid td.valign-top { vertical-align: top; }
.demo-excel-scope .excel-grid td.valign-middle { vertical-align: middle; }
.demo-excel-scope .excel-grid td.valign-bottom { vertical-align: bottom; }
.demo-excel-scope .excel-grid td.is-wrap {
  white-space: normal; overflow-wrap: break-word; word-wrap: break-word;
  height: auto; min-height: 1.7rem;
}
.demo-excel-scope .excel-grid td.is-selected {
  background: color-mix(in srgb, var(--cre-accent) 18%, transparent);
}
.demo-excel-scope .excel-grid td.excel-header-row {
  font-weight: 800; background: #f1f5f9;
}
[data-theme="dark"] .demo-excel-scope .excel-grid td.excel-header-row { background: #1e293b; }
.demo-excel-scope .excel-grid td.excel-style-total {
  font-weight: 800; border-top: 2px double #64748b !important;
}
.demo-excel-scope .excel-grid td.excel-style-good {
  background: #dcfce7 !important; color: #166534;
}
.demo-excel-scope .excel-grid td.excel-style-bad {
  background: #fee2e2 !important; color: #991b1b;
}
[data-theme="dark"] .demo-excel-scope .excel-grid td.excel-style-good {
  background: #14532d !important; color: #bbf7d0;
}
[data-theme="dark"] .demo-excel-scope .excel-grid td.excel-style-bad {
  background: #7f1d1d !important; color: #fecaca;
}
.demo-excel-scope .excel-grid td.has-border {
  box-shadow: inset 0 0 0 1px #64748b;
}

/* Chart area */
.demo-excel-scope .excel-chart-wrap {
  margin: 0; padding: .85rem 1rem; border-top: 1px solid var(--border);
  background: var(--surface);
}
.demo-excel-scope .excel-chart-wrap[hidden] { display: none !important; }
.demo-excel-scope .excel-chart-title {
  margin: 0 0 .65rem; font-size: .92rem; font-weight: 800; color: var(--text);
}
.demo-excel-scope .excel-chart-canvas {
  display: block; width: 100%; max-width: 640px; height: auto;
  border-radius: 8px; background: var(--surface);
}

@media (max-width: 900px) {
  .demo-excel-scope { --excel-rail-w: 64px; }
  .demo-excel-scope .excel-chip { min-width: 2.1rem; max-width: 2.8rem; height: 2.35rem; }
  .demo-excel-scope .excel-chip-label { font-size: .52rem; }
}
@media (max-width: 700px) {
  .demo-excel-scope .excel-grid th,
  .demo-excel-scope .excel-grid td { min-width: 3.4rem; font-size: .75rem; }
}

/* Excel v2 chrome: fixed two-row ribbon and slim side rails */
.demo-excel-scope {
  --excel-rail-w: 64px;
  --excel-sheet-tabs-w: 40px;
  --excel-blue: #2563eb;
  --excel-violet: #7c3aed;
  --excel-teal: #0f766e;
  --excel-orange: #c2410c;
  --excel-red: #dc2626;
  --excel-green: #15803d;
}
.demo-excel-scope .excel-accent-blue { --group-accent: var(--excel-blue); }
.demo-excel-scope .excel-accent-violet { --group-accent: var(--excel-violet); }
.demo-excel-scope .excel-accent-teal { --group-accent: var(--excel-teal); }
.demo-excel-scope .excel-accent-orange { --group-accent: var(--excel-orange); }
.demo-excel-scope .excel-accent-red { --group-accent: var(--excel-red); }
.demo-excel-scope .excel-accent-green { --group-accent: var(--excel-green); }

.demo-excel-scope .excel-ribbon {
  display: grid;
  grid-template-rows: repeat(2, auto);
  gap: 0;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-soft) 45%, var(--surface));
}
.demo-excel-scope .excel-ribbon-line {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .42rem;
  min-width: 0;
  padding: .48rem .6rem .42rem;
}
.demo-excel-scope .excel-ribbon-line + .excel-ribbon-line {
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}
.demo-excel-scope .excel-ribbon-line--formulas {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.demo-excel-scope .excel-ribbon-line--formulas .excel-tool-group {
  flex: 0 1 auto;
  min-width: 0;
}
.demo-excel-scope .excel-ribbon-line--formulas .excel-tool-group--formulas {
  flex: 1 1 auto;
}
.demo-excel-scope .excel-ribbon-line--formulas .excel-tool-list {
  flex-wrap: nowrap;
}
.demo-excel-scope .excel-rail--home,
.demo-excel-scope .excel-rail--formulas,
.demo-excel-scope .excel-rail--page {
  display: none;
}
.demo-excel-scope .excel-tool-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-inline: .12rem .62rem;
  border-inline-end: 1px solid color-mix(in srgb, var(--group-accent, var(--cre-accent)) 22%, var(--border));
}
.demo-excel-scope .excel-tool-group:last-child { border-inline-end: 0; }
.demo-excel-scope .excel-group-title {
  position: relative;
  margin: 0 0 .34rem;
  padding: .18rem .34rem .27rem;
  border-radius: 5px 5px 0 0;
  background: color-mix(in srgb, var(--group-accent, var(--cre-accent)) 7%, transparent);
  color: var(--group-accent, var(--cre-accent));
  font-size: .62rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: .035em;
  text-transform: uppercase;
  white-space: nowrap;
}
.demo-excel-scope .excel-group-title::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  width: auto;
  height: 2px;
  border-radius: 2px;
  background: var(--group-accent, var(--cre-accent));
}
.demo-excel-scope .excel-tool-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .22rem;
}
.demo-excel-scope .excel-chip {
  --tool-accent: var(--group-accent, var(--cre-accent));
  min-width: 2.7rem;
  max-width: 4.25rem;
  height: 2.55rem;
  padding: .2rem .32rem .14rem;
  border-radius: 7px;
  border-color: color-mix(in srgb, var(--tool-accent) 16%, var(--border));
  background: var(--surface);
}
.demo-excel-scope .excel-chip:hover,
.demo-excel-scope .excel-chip.is-on {
  border-color: color-mix(in srgb, var(--tool-accent) 58%, var(--border));
  background: color-mix(in srgb, var(--tool-accent) 10%, var(--surface));
}
.demo-excel-scope .excel-chip .byb-icon,
.demo-excel-scope .excel-chip svg,
.demo-excel-scope .excel-glyph {
  color: var(--tool-accent);
}
.demo-excel-scope .excel-chip-label {
  font-size: .55rem;
  font-weight: 750;
}
.demo-excel-scope .excel-chip--field { min-width: 3.7rem; max-width: 4.8rem; }
.demo-excel-scope .excel-chip--field .excel-ribbon-select { max-width: 4.2rem; }

.demo-excel-scope .excel-formula-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  min-height: 2.7rem;
  box-shadow: inset 0 -1px 0 var(--border);
  transition: background .15s, box-shadow .15s;
}
.demo-excel-scope .excel-formula-row.is-range-picking {
  background: color-mix(in srgb, var(--excel-blue) 9%, var(--surface));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--excel-blue) 65%, transparent);
}
.demo-excel-scope .excel-formula-row.is-range-picking .excel-fx-mark,
.demo-excel-scope .excel-formula-row.is-range-picking .excel-cell-ref {
  color: var(--excel-blue);
}
.demo-excel-scope .excel-formula-hint {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 22rem;
  padding-inline: .45rem;
  color: var(--excel-blue);
  font-size: .64rem;
  font-weight: 750;
  line-height: 1.2;
  text-align: end;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.demo-excel-scope .excel-formula-cancel,
.demo-excel-scope .excel-formula-ok {
  flex: none;
  display: grid;
  visibility: visible;
  opacity: 1;
}

.demo-excel-scope .excel-main {
  grid-template-columns: var(--excel-sheet-tabs-w) var(--excel-rail-w) minmax(0, 1fr) var(--excel-rail-w);
  grid-template-areas: "tabs left sheet right";
}
.demo-excel-scope .excel-sheet-tabs { grid-area: tabs; }
.demo-excel-scope .excel-rail--left { grid-area: left; }
.demo-excel-scope .excel-sheet-wrap { grid-area: sheet; }
.demo-excel-scope .excel-rail--right { grid-area: right; }
.demo-excel-scope .excel-sheet-tabs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .4rem;
  min-width: 0;
  max-height: min(72vh, 740px);
  padding: .5rem .32rem;
  overflow-x: hidden;
  overflow-y: auto;
  border-inline-end: 1px solid var(--border);
  background: color-mix(in srgb, var(--excel-green) 7%, var(--surface));
}
.demo-excel-scope .excel-sheet-tab-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .34rem;
}
.demo-excel-scope .excel-sheet-tab,
.demo-excel-scope .excel-sheet-add {
  display: grid;
  place-items: center;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--excel-green) 28%, var(--border));
  border-radius: 5px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.demo-excel-scope .excel-sheet-tab {
  min-height: 5.4rem;
  padding: .4rem .12rem;
}
.demo-excel-scope .excel-sheet-tab span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: .66rem;
  line-height: 1;
  letter-spacing: .035em;
  white-space: nowrap;
}
.demo-excel-scope .excel-sheet-tab:hover,
.demo-excel-scope .excel-sheet-tab.is-active {
  border-color: var(--excel-green);
  background: color-mix(in srgb, var(--excel-green) 13%, var(--surface));
  color: var(--excel-green);
}
.demo-excel-scope .excel-sheet-tab.is-active {
  box-shadow: inset 3px 0 0 var(--excel-green);
}
.demo-excel-scope .excel-sheet-add {
  flex: none;
  min-height: 2.1rem;
  font-size: 1.1rem;
  color: var(--excel-green);
}
.demo-excel-scope .excel-sheet-add:hover {
  border-color: var(--excel-green);
  background: color-mix(in srgb, var(--excel-green) 12%, var(--surface));
}
.demo-excel-scope .excel-rail {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  max-height: min(72vh, 740px);
  padding: .55rem .45rem;
  overflow-x: hidden;
  overflow-y: auto;
}
.demo-excel-scope .excel-rail-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.demo-excel-scope .excel-rail-group + .excel-rail-group {
  padding-top: .55rem;
  border-top: 1px solid var(--border);
}
.demo-excel-scope .excel-rail-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .28rem;
}
.demo-excel-scope .excel-rail .excel-chip {
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 2.72rem;
  padding-inline: .08rem;
}
.demo-excel-scope .excel-rail-footer { display: none; }
.demo-excel-scope .excel-chip--dir strong {
  display: grid;
  place-items: center;
  min-width: 1.55rem;
  min-height: 1.15rem;
  border-radius: 5px;
  background: var(--excel-teal);
  color: #fff;
  font-size: .68rem;
  font-weight: 900;
}
.demo-excel-scope .excel-rail-switch { display: none; }

.demo-excel-scope .excel-grid td.is-formula-range {
  position: relative;
  background: color-mix(in srgb, var(--excel-blue) 17%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--excel-blue) 65%, transparent);
}
.demo-excel-scope .excel-grid td.is-formula-range::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  pointer-events: none;
  border: 1px dashed var(--excel-blue);
  animation: excel-range-march .65s linear infinite;
}
@keyframes excel-range-march {
  to { border-color: #fff; outline: 1px dashed var(--excel-blue); }
}
.demo-excel-scope .excel-sheet-wrap.is-frozen .excel-grid tbody tr:first-child td {
  position: sticky;
  top: 1.72rem;
  z-index: 1;
  box-shadow: 0 2px 0 var(--excel-teal);
}

@media (max-width: 1050px) {
  .demo-excel-scope { --excel-rail-w: 58px; }
  .demo-excel-scope .excel-rail-tools { grid-template-columns: minmax(0, 1fr); }
  .demo-excel-scope .excel-formula-hint { max-width: 15rem; }
}
@media (max-width: 900px) {
  /* Bottom dock + tool panel; sheet fills remaining space (no phantom grid rows) */
  .demo-excel-scope {
    --excel-rail-w: 100%;
    --excel-sheet-tabs-w: 100%;
    --excel-dock-h: 2.85rem;
    --excel-panel-h: 4.85rem;
  }
  .demo-excel-scope .demo-stage-head p { display: none; }
  .demo-excel-scope .excel-ribbon,
  .demo-excel-scope #excelRibbon {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    visibility: hidden;
    pointer-events: none;
  }
  .demo-excel-scope .excel-formula-row {
    position: sticky;
    top: 4.2rem;
    z-index: 17;
    flex-wrap: nowrap;
    min-height: 2.2rem;
    padding-block: .15rem;
  }
  .demo-excel-scope .excel-formula-hint { max-width: 5.5rem; }
  .demo-excel-scope .excel-formula-cancel,
  .demo-excel-scope .excel-formula-ok {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: none !important;
  }
  /* Flex (not grid): fixed rails must not create empty tracks above sheet tabs */
  .demo-excel-scope .excel-main {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    gap: 0;
    padding-bottom: calc(var(--excel-dock-h) + var(--excel-panel-h) + env(safe-area-inset-bottom, 0px));
    min-height: 0;
  }
  .demo-excel-scope .excel-sheet-wrap {
    order: 1;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }
  .demo-excel-scope .excel-sheet-tabs {
    order: 2;
    flex: 0 0 auto;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    width: 100%;
    max-height: none;
    min-height: 2.15rem;
    padding: .28rem .4rem;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    border-inline-end: 0;
    border-inline-start: 0;
    border-top: 1px solid var(--border);
    border-bottom: 0;
    gap: .28rem;
    background: color-mix(in srgb, var(--excel-green) 6%, var(--surface));
  }
  .demo-excel-scope .excel-sheet-tab-list {
    flex-direction: row;
    align-items: center;
    gap: .28rem;
  }
  .demo-excel-scope .excel-sheet-tab {
    min-height: 0;
    width: auto;
    min-width: 3.8rem;
    height: 1.85rem;
    padding: .15rem .45rem;
  }
  .demo-excel-scope .excel-sheet-tab span {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: .7rem;
  }
  .demo-excel-scope .excel-sheet-tab.is-active {
    box-shadow: inset 0 -3px 0 var(--excel-green);
  }
  .demo-excel-scope .excel-sheet-add {
    min-height: 1.85rem;
    width: 1.85rem;
    flex: none;
  }
  /* Fixed docks ? explicitly out of flex flow */
  .demo-excel-scope .excel-rail-switch {
    position: fixed !important;
    left: 0; right: 0;
    bottom: 0;
    z-index: 52;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .2rem;
    padding: .22rem .3rem calc(.22rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 96%, #fff);
    box-shadow: 0 -6px 22px rgba(15, 23, 42, .12);
    pointer-events: auto;
    width: 100%;
    height: auto;
    flex: none !important;
    order: 99;
  }
  .demo-excel-scope .excel-rail-switch-btn {
    height: 2.2rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .6rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: none;
  }
  .demo-excel-scope .excel-rail-switch-btn.is-active {
    color: var(--excel-teal);
    border-color: color-mix(in srgb, var(--excel-teal) 40%, var(--border));
    background: color-mix(in srgb, var(--excel-teal) 12%, var(--surface));
  }
  .demo-excel-scope .excel-rail {
    position: fixed !important;
    left: 0; right: 0;
    bottom: calc(var(--excel-dock-h) + env(safe-area-inset-bottom, 0px));
    z-index: 51;
    display: none !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: .3rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    height: var(--excel-panel-h);
    max-height: var(--excel-panel-h);
    min-height: var(--excel-panel-h);
    padding: .3rem .4rem;
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    background: color-mix(in srgb, var(--surface) 96%, #fff);
    box-shadow: 0 -8px 28px rgba(15, 23, 42, .14);
    width: 100%;
    flex: none !important;
    order: 98;
    box-sizing: border-box;
  }
  .demo-excel-scope .excel-rail--home,
  .demo-excel-scope .excel-rail--formulas,
  .demo-excel-scope .excel-rail--page,
  .demo-excel-scope .excel-rail--left,
  .demo-excel-scope .excel-rail--right {
    display: none !important;
  }
  .demo-excel-scope .excel-main[data-rail-panel="home"] .excel-rail--home,
  .demo-excel-scope .excel-main[data-rail-panel="formulas"] .excel-rail--formulas,
  .demo-excel-scope .excel-main[data-rail-panel="insert"] .excel-rail--left,
  .demo-excel-scope .excel-main[data-rail-panel="data"] .excel-rail--right,
  .demo-excel-scope .excel-main[data-rail-panel="page"] .excel-rail--page {
    display: flex !important;
  }
  .demo-excel-scope .excel-mobile-slot {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: .3rem;
    width: max-content;
    min-width: 100%;
    height: 100%;
  }
  .demo-excel-scope .excel-rail-group,
  .demo-excel-scope .excel-rail .excel-tool-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    justify-content: center;
    width: auto;
    min-width: 0;
    max-width: none;
    height: 100%;
    padding: 0 .28rem 0 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-inline-end: 1px solid color-mix(in srgb, var(--group-accent, var(--border)) 28%, var(--border)) !important;
    position: static !important;
    overflow: visible;
  }
  .demo-excel-scope .excel-rail-group + .excel-rail-group,
  .demo-excel-scope .excel-rail .excel-tool-group + .excel-tool-group {
    padding-inline-start: .28rem !important;
  }
  .demo-excel-scope .excel-rail .excel-group-title {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 .12rem !important;
    padding: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    font-size: .5rem !important;
    line-height: 1 !important;
    background: transparent !important;
    white-space: nowrap;
  }
  .demo-excel-scope .excel-rail .excel-group-title::after { display: none !important; }
  .demo-excel-scope .excel-rail-tools,
  .demo-excel-scope .excel-rail .excel-tool-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: .28rem !important;
    grid-template-columns: none !important;
    width: auto;
    height: auto;
    min-height: 0;
  }
  .demo-excel-scope .excel-rail .excel-chip {
    flex: 0 0 auto !important;
    width: 2.55rem !important;
    min-width: 2.55rem !important;
    max-width: 2.55rem !important;
    height: 2.55rem !important;
    min-height: 2.55rem !important;
    max-height: 2.55rem !important;
    padding: .12rem !important;
    margin: 0 !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .08rem !important;
    box-sizing: border-box;
  }
  .demo-excel-scope .excel-rail .excel-chip-label {
    font-size: .45rem !important;
    line-height: 1 !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .demo-excel-scope .excel-rail .excel-chip--field,
  .demo-excel-scope .excel-rail .excel-chip--color {
    width: 2.85rem !important;
    min-width: 2.85rem !important;
    max-width: 2.85rem !important;
  }
  .demo-excel-scope .excel-formula-hint {
    max-width: 9rem;
    padding-inline: .2rem;
    font-size: .52rem;
  }
  .demo-excel-scope .excel-sheet-scroll {
    max-height: none;
    height: min(58vh, calc(100dvh - 15rem));
  }
}
@media (max-width: 520px) {
  .demo-excel-scope .excel-rail .excel-chip-label { font-size: .49rem; }
  .demo-excel-scope .excel-formula-row { top: 4.2rem; }
  .demo-excel-scope .excel-formula-hint { max-width: 4.2rem; }
  .demo-excel-scope .excel-rail-switch-btn { font-size: .56rem; }
}
@media print {
  body.excel-printing .demo-banner,
  body.excel-printing .demo-stage-head,
  body.excel-printing .excel-ribbon,
  body.excel-printing .excel-formula-row,
  body.excel-printing .excel-rail,
  body.excel-printing .excel-rail-switch,
  body.excel-printing .excel-sheet-tabs,
  body.excel-printing .public-footer,
  body.excel-printing .public-header { display: none !important; }
  body.excel-printing .excel-main { display: block; }
  body.excel-printing .excel-sheet-scroll { max-height: none; overflow: visible; }
  body.excel-printing .excel-chart-wrap[hidden] { display: none !important; }
}

/* -- PDF editor demo -- */
.demo-pdf-scope {
  --cre-accent: #2563eb; --cre-accent-2: #1d4ed8;
  --pdf-blue: #2563eb; --pdf-green: #16a34a; --pdf-violet: #7c3aed;
  --pdf-cyan: #0891b2; --pdf-orange: #ea580c;
}
.demo-pdf-scope .pdf-stage-head { margin-bottom: .55rem; }
.demo-pdf-scope .cre-mobile-rail-switch { display: none; }
.demo-pdf-scope .cre-mobile-rail-switch-btn.is-active {
  color: var(--pdf-blue);
  border-color: color-mix(in srgb, var(--pdf-blue) 45%, var(--border));
  background: color-mix(in srgb, var(--pdf-blue) 12%, var(--surface));
}

/* One-row top ribbon ? groups stretch across available width */
.demo-pdf-scope .pdf-ribbon,
.pdf-ribbon {
  display: flex; flex-flow: row nowrap; align-items: stretch; gap: .55rem;
  padding: .42rem .55rem; margin-bottom: .7rem; min-height: 66px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--pdf-blue));
  border-radius: 14px; background: color-mix(in srgb, var(--surface) 96%, #dbeafe);
  box-shadow: 0 8px 24px rgba(15,23,42,.08); overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--pdf-blue) 35%, transparent) transparent;
}
.pdf-ribbon[hidden] { display: none !important; }
.demo-pdf-scope .pdf-ribbon-group,
.pdf-ribbon-group {
  --pdf-group-color: var(--pdf-blue);
  position: relative; display: flex; flex: 1 1 0; align-items: flex-end; justify-content: center; gap: .28rem;
  min-width: 0; min-height: 56px; padding: 1.05rem .55rem .12rem;
  border-inline-end: 1px solid var(--border);
}
.pdf-ribbon-group:last-child { border-inline-end: 0; }
.pdf-ribbon-group::before {
  content: attr(data-label); position: absolute; top: .02rem;
  inset-inline: .4rem; height: .82rem; padding-bottom: .2rem;
  border-bottom: 2px solid var(--pdf-group-color);
  color: var(--pdf-group-color); font-size: .59rem; font-weight: 800;
  letter-spacing: .055em; line-height: 1; text-transform: uppercase;
  white-space: nowrap; pointer-events: none;
}
.pdf-group-file { --pdf-group-color: var(--pdf-blue); }
.pdf-group-history { --pdf-group-color: var(--pdf-orange); }
.pdf-group-tools { --pdf-group-color: var(--pdf-violet); }
.pdf-group-format { --pdf-group-color: var(--pdf-cyan); }
.pdf-rib-btn {
  display: inline-grid; place-items: center; min-width: 2rem; height: 2rem;
  padding: 0 .35rem; border: 1px solid transparent; border-radius: 7px;
  background: transparent; color: var(--text); font: inherit; font-size: .82rem;
  cursor: pointer; line-height: 1; transition: .16s ease;
}
.pdf-rib-btn.pdf-rib-item {
  grid-template-rows: 18px auto; gap: 2px; min-width: 2.65rem;
  height: 36px; padding: .14rem .3rem; font-size: .78rem;
}
.pdf-rib-btn.pdf-rib-item > span:not(.pdf-tool-glyph) {
  max-width: 3.8rem; overflow: hidden; color: var(--muted);
  font-size: .5rem; font-weight: 700; line-height: 1; text-overflow: ellipsis; white-space: nowrap;
}
.pdf-tool-glyph { color: currentColor; font-size: .9rem; }
.pdf-rib-btn.pdf-rib-mini { min-width: 1.7rem; height: 1.7rem; padding: 0 .2rem; font-size: .6rem; }
.pdf-rib-btn:hover { border-color: color-mix(in srgb, var(--pdf-blue) 25%, var(--border)); background: color-mix(in srgb, var(--pdf-blue) 9%, var(--surface)); transform: translateY(-1px); }
.pdf-rib-btn.is-active { border-color: color-mix(in srgb, var(--pdf-blue) 45%, var(--border)); background: color-mix(in srgb, var(--pdf-blue) 15%, var(--surface)); color: var(--pdf-blue); }
.pdf-rib-btn.pdf-rib-primary { background: var(--pdf-blue); border-color: #1d4ed8; color: #fff !important; }
.pdf-rib-btn.pdf-rib-print { background: var(--pdf-green); border-color: #15803d; color: #fff !important; }
/* Beat muted span rule ? download/print label + icon must stay white */
.pdf-rib-btn.pdf-rib-primary.pdf-rib-item > span,
.pdf-rib-btn.pdf-rib-print.pdf-rib-item > span,
.pdf-rib-btn.pdf-rib-primary > span,
.pdf-rib-btn.pdf-rib-print > span,
.pdf-rib-btn.pdf-rib-primary.pdf-rib-item .byb-icon,
.pdf-rib-btn.pdf-rib-print.pdf-rib-item .byb-icon,
.pdf-rib-btn.pdf-rib-primary .byb-icon,
.pdf-rib-btn.pdf-rib-print .byb-icon,
.pdf-rib-btn.pdf-rib-primary svg,
.pdf-rib-btn.pdf-rib-print svg {
  color: #fff !important;
  stroke: currentColor !important;
  fill: none;
}
.pdf-rib-btn.pdf-rib-primary:hover,
.pdf-rib-btn.pdf-rib-print:hover { filter: brightness(1.06); transform: translateY(-1px); }
.pdf-rib-btn:disabled { opacity: .55; cursor: wait; }
.pdf-rib-label { margin: 0; cursor: pointer; }
.pdf-rib-field {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 2px; height: 36px; color: var(--muted); font-size: .5rem; font-weight: 800;
}
.pdf-rib-field > span { line-height: 1; }
.pdf-rib-select {
  width: 3.25rem; height: 22px; padding: 0 .2rem; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface); color: var(--text); font-size: .69rem;
}
.pdf-rib-color {
  width: 1.7rem; height: 22px; padding: 2px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface); cursor: pointer;
}

/* Workspace + exact seven-tool side rails */
.pdf-workspace { display: grid; grid-template-columns: 72px minmax(0,1fr) 72px; gap: .65rem; align-items: start; }
.pdf-workspace[hidden] { display: none !important; }
.pdf-side-rail {
  position: sticky; top: 5.5rem; display: grid; gap: .3rem; padding: .4rem;
  border: 1px solid var(--border); border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 96%, #dbeafe);
  box-shadow: 0 8px 24px rgba(15,23,42,.08);
}
.pdf-rail-title {
  margin-bottom: .12rem; padding: .15rem .1rem .35rem; border-bottom: 2px solid currentColor;
  color: var(--pdf-violet); font-size: .6rem; font-weight: 900; text-align: center;
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}
.pdf-rail-title-view { color: var(--pdf-cyan); }
.pdf-rail-title-shape { width: 100%; color: var(--pdf-orange); }
.pdf-rail-btn {
  display: grid; place-items: center; grid-template-rows: 18px auto; gap: 2px;
  min-width: 0; min-height: 43px; padding: .28rem .15rem;
  border: 1px solid transparent; border-radius: 8px; background: transparent;
  color: var(--text); font: inherit; cursor: pointer; transition: .16s ease;
}
.pdf-rail-btn > span { font-size: 1rem; font-weight: 700; line-height: 1; }
.pdf-rail-btn > b { max-width: 100%; overflow: hidden; color: var(--muted); font-size: .5rem; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.pdf-rail-btn:hover { border-color: color-mix(in srgb, var(--pdf-blue) 28%, var(--border)); background: color-mix(in srgb, var(--pdf-blue) 10%, var(--surface)); color: var(--pdf-blue); transform: translateY(-1px); }
.pdf-rail-btn.is-active { border-color: color-mix(in srgb, var(--pdf-violet) 40%, var(--border)); background: color-mix(in srgb, var(--pdf-violet) 13%, var(--surface)); color: var(--pdf-violet); }
.pdf-rail-btn:disabled { opacity: .5; cursor: wait; }
.pdf-rail-btn.is-busy .pdf-ocr-mark::after { content: "..."; }
.pdf-rail-readout { cursor: default; border-color: color-mix(in srgb, var(--pdf-cyan) 20%, var(--border)); background: color-mix(in srgb, var(--pdf-cyan) 7%, var(--surface)); }
.pdf-rail-readout > span { color: var(--pdf-cyan); font-size: .68rem; font-variant-numeric: tabular-nums; }
.pdf-ocr-mark { color: var(--pdf-violet); font-size: .55rem !important; letter-spacing: -.02em; }
.pdf-shape-rotate {
  display: grid; gap: .3rem; margin-top: .25rem; padding-top: .35rem;
  border-top: 1px solid var(--border);
}
.pdf-shape-rotate[hidden] { display: none !important; }
.pdf-rotate-presets { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem; }
.pdf-free-rotate { display: grid; gap: .15rem; color: var(--muted); font-size: .52rem; font-weight: 800; text-align: center; }
.pdf-rib-rotate-in {
  width: 100%; height: 1.7rem; padding: 0 .15rem; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface); color: var(--text); font-size: .65rem; text-align: center;
}

/* Empty state */
.pdf-empty {
  padding: 2.5rem 1rem; text-align: center; border: 1px dashed var(--border);
  border-radius: var(--radius); color: var(--muted); margin-bottom: 1rem;
  min-height: 42vh; display: grid; place-items: center;
}
.pdf-empty-card {
  display: grid; gap: .65rem; justify-items: center;
  max-width: 360px; padding: 1.25rem 1.5rem;
  border-radius: 16px; border: 1px solid var(--border);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.pdf-empty-card strong { font-size: 1.15rem; color: var(--text); }
.pdf-empty-card p { margin: 0; font-size: .9rem; }
.pdf-empty[hidden] { display: none !important; }

/* Viewport & pages */
.pdf-viewport {
  overflow: auto; max-height: calc(100vh - 12rem);
  padding: .5rem; border-radius: var(--radius);
  background: color-mix(in srgb, var(--border) 30%, var(--bg));
  min-width: 0;
}
.pdf-viewport[hidden] { display: none !important; }
.pdf-pages {
  display: grid; gap: 1.25rem; justify-items: center;
  transform-origin: top center; transition: transform .2s ease;
}
.pdf-page-wrap { width: 100%; max-width: 100%; overflow: visible; }
.pdf-page-label {
  font-size: .75rem; font-weight: 700; color: var(--muted); margin-bottom: .35rem;
}
.pdf-page-surface {
  position: relative; margin: 0 auto;
  box-shadow: 0 8px 28px rgba(15,23,42,.12);
  background: #fff; max-width: 100%; overflow: hidden;
}
.pdf-page-canvas {
  display: block; width: 100%; height: auto;
  pointer-events: none; user-select: none; image-rendering: auto;
}
.pdf-text-layer {
  /* Below overlays so drag/move never hits invisible text spans first */
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
}
.pdf-analyze-overlay {
  position: fixed; inset: 0; z-index: 240;
  display: grid; place-items: center;
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(2px);
}
.pdf-analyze-overlay[hidden] { display: none !important; }
.pdf-analyze-card {
  display: grid; gap: .45rem; justify-items: center;
  min-width: min(20rem, 88vw);
  padding: 1.15rem 1.35rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 18px 40px rgba(15, 23, 42, .22);
  text-align: center;
}
.pdf-analyze-card strong { font-size: 1rem; }
.pdf-analyze-card p { margin: 0; color: var(--muted); font-size: .82rem; }
.pdf-analyze-spinner {
  width: 1.65rem; height: 1.65rem;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--primary) 25%, var(--border));
  border-top-color: var(--primary);
  animation: pdf-analyze-spin .8s linear infinite;
}
@keyframes pdf-analyze-spin { to { transform: rotate(360deg); } }
.demo-pdf-scope.is-analyzing .pdf-text-layer,
.demo-pdf-scope.is-analyzing .pdf-overlay-layer {
  pointer-events: none !important;
}
.pdf-text-hit {
  position: absolute; margin: 0; padding: 0;
  background: transparent !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
  overflow: hidden; white-space: nowrap;
  pointer-events: none; cursor: text;
  border: 1px solid transparent; border-radius: 2px;
  line-height: 1.2; box-sizing: border-box;
  /* Hit layer is an invisible target only ? never show broken/OCR-looking glyphs */
  caret-color: transparent;
  user-select: none;
}
.pdf-text-hit--paragraph { white-space: pre-wrap; }
.pdf-text-hit::selection {
  background: transparent !important;
  color: transparent !important;
}
.demo-pdf-scope[data-pdf-tool="select"]:not(.is-analyzing) .pdf-text-hit {
  pointer-events: auto;
}
.pdf-text-hit:hover {
  background: rgba(37,99,235,.08) !important;
  border-color: rgba(37,99,235,.28);
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
.pdf-text-hit.is-paragraph-selected {
  background: rgba(37,99,235,.14) !important;
  border-color: rgba(37,99,235,.55);
  box-shadow: inset 0 0 0 1px rgba(37,99,235,.2);
}
.pdf-text-hit.is-edited {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.pdf-image-marker {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  border: 1px dashed rgba(14, 116, 144, .35);
  border-radius: 3px;
  background: transparent;
  box-sizing: border-box;
}
.pdf-overlay-layer {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
}
.demo-pdf-scope:not([data-pdf-tool="select"]) .pdf-overlay-layer {
  pointer-events: auto;
}
.pdf-overlay-layer .pdf-drag-preview,
.pdf-overlay-layer .pdf-pen-preview { pointer-events: none; }
.pdf-overlay-layer[data-tool="pen"],
.pdf-overlay-layer:has(+ *) { cursor: crosshair; }

/* Overlays ? shared */
.pdf-overlay {
  position: absolute; z-index: 4; min-width: 1rem; cursor: move;
  touch-action: none; user-select: none; box-sizing: border-box;
  transform-origin: center center; pointer-events: auto;
}
.pdf-overlay.pdf-native-replacement { min-width: 0 !important; }
.pdf-overlay.is-selected { outline: 2px solid #2563eb; outline-offset: 1px; z-index: 50 !important; }
.pdf-ov-handle {
  display: grid; place-items: center; padding: 0 .25rem;
  background: color-mix(in srgb, var(--cre-accent) 18%, #fff);
  color: var(--cre-accent-2); font-size: 10px; cursor: grab; user-select: none;
  letter-spacing: -1px; position: absolute; top: 0; inset-inline-start: 0;
  height: 100%; width: 1.1rem; z-index: 2;
}
.pdf-ov-del {
  position: absolute; top: -10px; inset-inline-end: -10px;
  width: 22px; height: 22px; border-radius: 50%; border: 0;
  background: #dc2626; color: #fff; font-size: 14px; line-height: 1;
  cursor: pointer; display: none; z-index: 5;
}
.pdf-overlay.is-selected .pdf-ov-del,
.pdf-overlay:hover .pdf-ov-del { display: grid; place-items: center; }

/* Resize handles */
.pdf-resize-handle {
  position: absolute; width: 10px; height: 10px;
  background: #2563eb; border: 1px solid #fff; border-radius: 2px;
  z-index: 6; display: none;
}
.pdf-overlay.is-selected .pdf-resize-handle { display: block; }
.pdf-resize-nw { top: -5px; inset-inline-start: -5px; cursor: nwse-resize; }
.pdf-resize-ne { top: -5px; inset-inline-end: -5px; cursor: nesw-resize; }
.pdf-resize-sw { bottom: -5px; inset-inline-start: -5px; cursor: nesw-resize; }
.pdf-resize-se { bottom: -5px; inset-inline-end: -5px; cursor: nwse-resize; }

/* Text overlay */
.pdf-overlay-text {
  min-width: 6rem; min-height: 1.6rem;
  background: rgba(255,255,255,.88); border: 1px dashed var(--cre-accent);
  border-radius: 4px; color: #0f172a;
  font-family: "Cairo", "Segoe UI", Tahoma, sans-serif;
  padding-inline-start: 1.2rem;
}
.pdf-overlay-text .pdf-ov-body {
  padding: .35rem .5rem; font-size: 14px; line-height: 1.45;
  user-select: text; outline: none; min-height: 1.4rem; cursor: text;
  width: 100%; height: 100%; box-sizing: border-box;
}
.pdf-overlay-text.is-selected .pdf-ov-body,
.pdf-overlay-text .pdf-ov-body:focus { background: transparent; }
.pdf-overlay-text.is-committed {
  border-color: transparent !important; border-radius: 0; cursor: move;
  background: transparent !important; padding-inline-start: 0; box-shadow: none !important;
}
.pdf-overlay-text.pdf-native-replacement,
.pdf-overlay-text.pdf-native-replacement.is-editing,
.pdf-overlay-text.pdf-native-replacement.is-committed,
.pdf-overlay-text.pdf-native-replacement .pdf-ov-body {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}
.pdf-overlay-text.pdf-native-replacement,
.pdf-overlay-text.pdf-native-replacement.is-committed,
.pdf-overlay-text.pdf-native-replacement.is-editing {
  min-width: 0 !important;
  isolation: auto;
  text-shadow: none !important;
  filter: none !important;
}
/* Canvas glyphs are erased on edit ? no white plate / stroke / halo on overlay text */
.pdf-overlay-text.pdf-native-replacement .pdf-ov-body,
.pdf-overlay-text.pdf-native-replacement.is-committed .pdf-ov-body,
.pdf-overlay-text.pdf-native-replacement.is-editing .pdf-ov-body {
  background: transparent !important;
  background-color: transparent !important;
  -webkit-text-stroke: 0 !important;
  -webkit-text-fill-color: currentColor !important;
  paint-order: normal;
  text-shadow: none !important;
  filter: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
  white-space: nowrap;
  min-width: 0 !important;
  line-height: 1.15;
}
.pdf-overlay-text.is-committed .pdf-ov-body {
  background: transparent !important; cursor: move; user-select: none;
}
.pdf-overlay-text.is-committed .pdf-ov-handle,
.pdf-overlay-text.is-committed .pdf-ov-del,
.pdf-overlay-text.is-committed .pdf-resize-handle { display: none !important; }
.pdf-overlay-text.is-editing {
  background: transparent !important;
  border: 1px dashed color-mix(in srgb, var(--pdf-blue) 70%, transparent);
  border-radius: 2px;
  padding-inline-start: 0;
  box-shadow: none;
}
.pdf-overlay-text.is-editing.pdf-native-replacement .pdf-ov-handle { display: none !important; }
.pdf-overlay-text.is-editing .pdf-ov-body {
  cursor: text; user-select: text; background: transparent !important;
}
.pdf-rib-btn.pdf-rib-feature {
  background: linear-gradient(160deg, #7c3aed, #5b21b6);
  border-color: #6d28d9; color: #fff; min-width: 3.4rem;
}
.pdf-rib-btn.pdf-rib-feature > span { color: rgba(255,255,255,.92) !important; }
.pdf-group-ai { --pdf-group-color: #7c3aed; }

/* Image */
.pdf-overlay-image {
  border: 1px dashed #64748b; background: rgba(255,255,255,.4); padding: 2px;
  padding-inline-start: 1.2rem;
}
.pdf-overlay-image img { display: block; width: 100%; height: auto; pointer-events: none; }

/* Shapes */
.pdf-overlay-shape,
.pdf-overlay-ellipse { padding-inline-start: 1.2rem; min-height: 2rem; }
.pdf-overlay-shape .pdf-ov-shape {
  width: 100%; height: 100%; min-height: 2rem;
  border: 2px solid #2563eb; background: rgba(37,99,235,.1); border-radius: 6px;
}
.pdf-overlay-ellipse .pdf-ov-shape { border-radius: 50%; }

/* Line & arrow */
.pdf-overlay-line,
.pdf-overlay-arrow { min-height: 1rem; padding-inline-start: 1.2rem; }
.pdf-overlay-line .pdf-ov-line {
  width: 100%; height: 3px; margin-top: .35rem;
  background: #0f172a; border-radius: 2px;
}
.pdf-overlay-arrow .pdf-ov-arrow-svg {
  display: block; width: 100%; height: 12px; margin-top: 2px;
}

/* Highlight */
.pdf-overlay-highlight { pointer-events: auto; }
.pdf-overlay-highlight .pdf-ov-highlight {
  width: 100%; height: 100%; min-height: .8rem;
  background: rgba(250,204,21,.45); border-radius: 2px;
}

/* Sticky note */
.pdf-overlay-sticky {
  padding-inline-start: 1.2rem;
  background: #fef08a; border: 1px solid #eab308;
  box-shadow: 2px 3px 8px rgba(15,23,42,.12); border-radius: 2px;
}
.pdf-overlay-sticky .pdf-ov-sticky-body {
  padding: .4rem .5rem; font-size: 13px; line-height: 1.4;
  outline: none; cursor: text; user-select: text; min-height: 2rem;
}

/* Table */
.pdf-overlay-table {
  background: rgba(255,255,255,.92); padding-inline-start: 1.2rem;
}
.pdf-ov-table {
  width: 100%; height: 100%; border-collapse: collapse;
  font-size: 12px; color: #0f172a;
}
.pdf-ov-table td {
  border: 1px solid #94a3b8; padding: .25rem .35rem; min-width: 2rem;
  outline: none; user-select: text; cursor: text;
}

/* Pen / draw ? tight bbox hit-target; selectable / movable / deletable */
.pdf-overlay-draw {
  pointer-events: auto;
  cursor: move;
  min-width: 0.8rem;
  min-height: 0.8rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
}
.pdf-overlay-draw.is-selected {
  border-color: color-mix(in srgb, var(--pdf-blue) 55%, transparent);
  background: color-mix(in srgb, var(--pdf-blue) 6%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pdf-blue) 25%, transparent);
}
.pdf-overlay-draw .pdf-ov-draw-svg {
  display: block; width: 100%; height: 100%; pointer-events: none;
}
.pdf-overlay-draw .pdf-ov-draw-svg path { pointer-events: none; }
.pdf-overlay-draw .pdf-ov-handle { opacity: 0; }
.pdf-overlay-draw.is-selected .pdf-ov-handle,
.pdf-overlay-draw:hover .pdf-ov-handle { opacity: 1; }

/* Drag preview (while creating) */
.pdf-drag-preview {
  position: absolute; pointer-events: none; z-index: 20;
  border: 2px dashed #2563eb; background: rgba(37,99,235,.08); border-radius: 4px;
}
.pdf-drag-preview.is-highlight {
  border: none; background: rgba(250,204,21,.4); border-radius: 2px;
}
.pdf-pen-preview {
  position: absolute; inset: 0; pointer-events: none; z-index: 20;
}

@media (max-width: 900px) {
  .demo-pdf-scope .demo-stage-head p { display: none; }

  /* Mobile rail-switch: hide desktop ribbon chrome + side rails in place */
  .demo-pdf-scope .cre-mobile-rail-switch,
  .demo-pdf-scope #pdfRailSwitch:not([hidden]) {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(3.45rem + env(safe-area-inset-bottom, 0px));
    z-index: 41;
    display: flex;
    flex-wrap: nowrap;
    gap: .28rem;
    padding: .28rem .45rem 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: transparent;
    pointer-events: none;
    scrollbar-width: none;
  }
  .demo-pdf-scope #pdfRailSwitch::-webkit-scrollbar { display: none; }
  .demo-pdf-scope #pdfRailSwitch .cre-mobile-rail-switch-btn { pointer-events: auto; }
  .demo-pdf-scope #pdfRailSwitch[hidden] { display: none !important; }

  .demo-pdf-scope .pdf-ribbon,
  .pdf-ribbon {
    position: static;
    display: contents;
    border: 0;
    padding: 0;
    margin: 0;
    min-height: 0;
    box-shadow: none;
    background: transparent;
    overflow: visible;
  }
  .demo-pdf-scope .pdf-ribbon[hidden] { display: none !important; }
  .demo-pdf-scope .pdf-ribbon-group,
  .demo-pdf-scope .pdf-side-rail {
    display: none !important;
  }
  /* File: one combined bottom dock (ribbon becomes the dock host) */
  .demo-pdf-scope[data-rail-panel="file"] .pdf-ribbon:not([hidden]) {
    display: flex !important;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    flex-flow: row nowrap;
    align-items: stretch;
    gap: .35rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    padding: .35rem .45rem calc(.4rem + env(safe-area-inset-bottom, 0px));
    border-radius: 14px 14px 0 0;
    border: 1px solid var(--border);
    border-bottom: 0;
    background: color-mix(in srgb, var(--surface) 96%, #fff);
    box-shadow: 0 -8px 28px rgba(15,23,42,.16);
    min-height: 0;
  }
  .demo-pdf-scope[data-rail-panel="file"] .pdf-group-file,
  .demo-pdf-scope[data-rail-panel="file"] .pdf-group-history {
    display: flex !important;
    position: static;
    flex: 0 0 auto;
    align-items: flex-end;
    gap: .28rem;
    min-height: 0;
    padding: .2rem .35rem 0;
    border: 0;
    border-inline-end: 1px solid var(--border);
    background: transparent;
    box-shadow: none;
  }
  .demo-pdf-scope[data-rail-panel="edit"] .pdf-group-tools,
  .demo-pdf-scope[data-rail-panel="format"] .pdf-group-format,
  .demo-pdf-scope[data-rail-panel="feature"] .pdf-group-ai,
  .demo-pdf-scope[data-rail-panel="insert"] .pdf-left-rail,
  .demo-pdf-scope[data-rail-panel="page"] .pdf-right-rail {
    display: flex !important;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: .28rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    min-height: 0;
    max-height: none;
    padding: .35rem .45rem calc(.4rem + env(safe-area-inset-bottom, 0px));
    border-radius: 14px 14px 0 0;
    border: 1px solid var(--border);
    border-bottom: 0;
    background: color-mix(in srgb, var(--surface) 96%, #fff);
    box-shadow: 0 -8px 28px rgba(15,23,42,.16);
  }
  .demo-pdf-scope .pdf-ribbon-group::before,
  .pdf-ribbon-group::before { display: none; }
  .pdf-rib-btn.pdf-rib-item { min-width: 2.55rem; height: 44px; flex: 0 0 auto; }
  .pdf-rib-btn.pdf-rib-item > span:not(.pdf-tool-glyph):not(.pdf-ocr-mark) {
    display: block; font-size: .45rem; color: inherit;
  }
  .pdf-rib-btn.pdf-rib-primary.pdf-rib-item > span,
  .pdf-rib-btn.pdf-rib-print.pdf-rib-item > span,
  .pdf-rib-btn.pdf-rib-primary > span,
  .pdf-rib-btn.pdf-rib-print > span { color: #fff !important; }
  .demo-pdf-scope .pdf-workspace,
  .pdf-workspace {
    display: flex; flex-direction: column; gap: .45rem;
    padding-bottom: calc(6.4rem + env(safe-area-inset-bottom, 0px));
  }
  .pdf-viewport { order: 1; max-height: 62vh; width: 100%; }
  .pdf-rail-title {
    display: grid; place-items: center; min-width: 2.6rem; margin: 0;
    padding: .2rem .3rem; border-bottom: 0; border-inline-end: 2px solid currentColor;
    font-size: .55rem;
  }
  .pdf-rail-btn { flex: 0 0 3rem; min-height: 44px; width: 3rem; }
  .pdf-shape-rotate {
    flex: 0 0 9rem; grid-template-columns: auto 1fr; align-items: center;
    margin: 0; padding: 0 0 0 .35rem; border-top: 0; border-inline-start: 1px solid var(--border);
  }
  .pdf-shape-rotate .pdf-rail-title { display: none; }
  .pdf-free-rotate { grid-column: 2; grid-row: 1; }
}

@media (max-width: 520px) {
  .pdf-ribbon { border-radius: 10px; padding: .3rem; }
  .pdf-ribbon-group { padding-inline: .25rem; }
  .pdf-page-label { padding-inline: .2rem; }
}

@media print {
  @page { margin: 0; size: auto; }

  body.pdf-printing {
    background: #fff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body.pdf-printing .demo-banner,
  body.pdf-printing .demo-stage-head,
  body.pdf-printing .pdf-ribbon,
  body.pdf-printing #pdfRailSwitch,
  body.pdf-printing .pdf-side-rail,
  body.pdf-printing .pdf-empty,
  body.pdf-printing .public-footer,
  body.pdf-printing .public-header,
  body.pdf-printing .demo-nav,
  body.pdf-printing nav { display: none !important; }

  body.pdf-printing .demo-stage,
  body.pdf-printing .demo-creative,
  body.pdf-printing .pdf-viewport,
  body.pdf-printing #pdfPages,
  body.pdf-printing .pdf-pages {
    display: block !important;
    overflow: visible !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.pdf-printing .pdf-viewport { max-height: none !important; overflow: visible !important; }
  body.pdf-printing .pdf-page-wrap {
    display: block !important;
    overflow: visible !important;
    page-break-after: always;
    break-after: page;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.pdf-printing .pdf-page-wrap:last-child {
    page-break-after: auto;
    break-after: auto;
  }
  body.pdf-printing .pdf-page-label { display: none !important; }

  body.pdf-printing .pdf-page-surface {
    position: relative !important;
    box-shadow: none !important;
    margin: 0 auto !important;
    overflow: visible !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  body.pdf-printing .pdf-page-canvas {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body.pdf-printing .pdf-text-layer,
  body.pdf-printing .pdf-text-hit { display: none !important; }

  body.pdf-printing .pdf-overlay-layer {
    position: absolute !important;
    inset: 0 !important;
    overflow: visible !important;
  }

  body.pdf-printing .pdf-overlay {
    position: absolute !important;
    outline: none !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body.pdf-printing .pdf-ov-del,
  body.pdf-printing .pdf-ov-handle,
  body.pdf-printing .pdf-resize-handle,
  body.pdf-printing .pdf-drag-preview,
  body.pdf-printing .pdf-pen-preview { display: none !important; }

  body.pdf-printing .pdf-overlay-text {
    border-style: solid !important;
    background: rgba(255,255,255,.95) !important;
  }
  body.pdf-printing .pdf-overlay-text.pdf-native-replacement,
  body.pdf-printing .pdf-overlay-text.pdf-native-replacement.is-committed,
  body.pdf-printing .pdf-overlay-text.pdf-native-replacement .pdf-ov-body {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
  body.pdf-printing .pdf-overlay-highlight .pdf-ov-highlight {
    background: rgba(250,204,21,.5) !important;
  }
  body.pdf-printing .pdf-overlay-sticky {
    background: #fef08a !important;
    box-shadow: none !important;
  }
  body.pdf-printing .pdf-overlay-shape .pdf-ov-shape,
  body.pdf-printing .pdf-overlay-ellipse .pdf-ov-shape {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* -- ????????? A4 composer -- */
.demo-mustamsak-scope { --cre-accent: #0e7490; --cre-accent-2: #155e75; }
.demo-mustamsak-scope .msk-export-mobile { display: none; }
.msk-layout {
  display: grid;
  grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
  gap: 1rem; align-items: start;
}
.msk-palette {
  display: grid; gap: .55rem; padding: .85rem;
  position: sticky; top: 5.5rem;
}
.msk-palette-title { font-size: .92rem; }
.msk-palette-hint { margin: 0; font-size: .75rem; color: var(--muted); }
.msk-palette-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: .45rem; align-items: center; text-align: start;
  padding: .45rem .55rem; border-radius: 10px; cursor: grab;
  border: 1px solid var(--border); background: var(--bg-soft);
  color: inherit; font: inherit;
}
.msk-palette-item:active { cursor: grabbing; }
.msk-palette-ico {
  width: 52px; height: 34px; display: grid; place-items: center;
  border-radius: 6px; overflow: hidden; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.08);
}
.msk-palette-ico svg { width: 100%; height: 100%; display: block; }
.msk-palette-meta { display: grid; gap: .1rem; min-width: 0; }
.msk-palette-name { font-size: .8rem; font-weight: 800; line-height: 1.2; }
.msk-palette-item small { color: var(--muted); font-size: .68rem; }
.msk-palette-item.tone-id { border-color: color-mix(in srgb, #0e7490 45%, var(--border)); }
.msk-palette-item.tone-res { border-color: color-mix(in srgb, #15803d 45%, var(--border)); }
.msk-palette-item.tone-pass { border-color: color-mix(in srgb, #b45309 45%, var(--border)); }
.msk-palette-item.tone-photo { border-color: color-mix(in srgb, #7c3aed 45%, var(--border)); }
.msk-palette-item.tone-drv { border-color: color-mix(in srgb, #2563eb 45%, var(--border)); }
.msk-palette-item.tone-food { border-color: color-mix(in srgb, #ca8a04 45%, var(--border)); }
.msk-img-holder {
  position: relative; width: 100%; min-height: 48%;
  border: 1.5px dashed #94a3b8; border-radius: 4px;
  background: rgba(255,255,255,.65); overflow: hidden;
  display: grid; place-items: center;
}
.msk-img-holder.has-image { border-style: solid; border-color: #64748b; }
.msk-card.has-image {
  border-color: transparent;
  background: transparent;
  padding: 0;
}
.msk-card.has-image .msk-card-inner {
  padding: 0;
  display: block;
  height: 100%;
  gap: 0;
}
.msk-card.has-image .msk-card-title,
.msk-card.has-image .msk-size,
.msk-card.has-image .msk-holder-empty { display: none !important; }
.msk-card.has-image .msk-img-holder {
  position: absolute;
  inset: 0;
  min-height: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}
.msk-card.has-image .msk-img-holder.has-image { border: none; }
.msk-img-holder .msk-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.msk-holder-empty {
  display: grid; gap: .35rem; justify-items: center; padding: .35rem;
  text-align: center; font-size: .68rem; color: #475569;
}
.msk-holder-actions { display: flex; flex-wrap: wrap; gap: .25rem; justify-content: center; }
.msk-holder-actions .btn { font-size: .62rem; padding: .2rem .4rem; min-height: 0; height: auto; }
.msk-card-title { font-size: .85em; margin-bottom: .15rem; }
.msk-crop-modal {
  position: fixed; inset: 0; z-index: 9600;
  display: grid; place-items: center; padding: .75rem;
  background: rgba(15,23,42,.55);
}
.msk-crop-modal[hidden] { display: none !important; }
.msk-crop-dialog {
  width: min(760px, 96vw); background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px;
  padding: .75rem; display: grid; gap: .65rem;
  box-shadow: 0 20px 50px rgba(15,23,42,.28);
}
.msk-crop-dialog header { display: flex; justify-content: space-between; align-items: center; }
.msk-crop-stage {
  position: relative; width: 100%; max-height: 58vh;
  overflow: auto; background: #0f172a; border-radius: 10px;
  display: grid; place-items: center;
}
.msk-crop-stage canvas { max-width: 100%; display: block; }
.msk-crop-box {
  position: absolute; left: 8%; top: 8%; width: 84%; height: 84%;
  border: 2px solid #38bdf8; box-shadow: 0 0 0 9999px rgba(15,23,42,.45);
  cursor: move; touch-action: none;
}
.msk-crop-box::after {
  content: ''; position: absolute; right: 0; bottom: 0;
  width: 16px; height: 16px; background: #38bdf8; border-radius: 2px 0 0 0;
  cursor: nwse-resize;
}
.msk-crop-actions {
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
}
.msk-crop-actions label { font-size: .75rem; display: inline-flex; gap: .3rem; align-items: center; }
.msk-stage-wrap {
  overflow: auto; padding: .5rem; background:
    linear-gradient(135deg, color-mix(in srgb, var(--cre-accent) 6%, var(--bg)) 0%, var(--bg-soft) 100%);
  border-radius: var(--radius); border: 1px solid var(--border);
}
.msk-a4-host {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: center;
  min-width: min(100%, 210mm);
}
.msk-a4 {
  position: relative; width: min(100%, 210mm);
  aspect-ratio: 210 / 297; margin: 0 auto;
  background: #fff; color: #0f172a;
  box-shadow: 0 12px 40px rgba(15,23,42,.14);
  overflow: hidden;
  flex-shrink: 0;
}
.msk-a4-mark {
  position: absolute; inset-inline-start: .5rem; top: .35rem;
  font-size: .65rem; color: #94a3b8; pointer-events: none; z-index: 0;
}
.msk-page-del {
  position: absolute; top: .28rem; inset-inline-end: .3rem; z-index: 4;
  width: 1.1rem; height: 1.1rem; border: 0; border-radius: 999px;
  background: color-mix(in srgb, #dc2626 88%, #fff); color: #fff;
  font-size: .78rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(220,38,38,.25);
  padding: 0;
}
.msk-page-del[hidden],
.msk-a4:first-child .msk-page-del { display: none !important; }
.msk-page-del:hover { filter: brightness(1.08); }
body.msk-printing .msk-page-del { display: none !important; }
.msk-chooser {
  position: fixed; inset: 0; z-index: 9550;
  display: grid; place-items: center; padding: .75rem;
  background: rgba(15,23,42,.45);
}
.msk-chooser[hidden] { display: none !important; }
.msk-chooser-card {
  width: min(340px, 94vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: .7rem;
  display: grid;
  gap: .55rem;
  box-shadow: 0 18px 40px rgba(15,23,42,.22);
}
.msk-chooser-card header {
  display: flex; justify-content: space-between; align-items: center;
}
.msk-chooser-list { display: grid; gap: .4rem; }
.msk-chooser-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: .45rem; align-items: center; text-align: start;
  padding: .45rem .55rem; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-soft);
  color: inherit; font: inherit;
}
.msk-chooser-item:hover {
  border-color: color-mix(in srgb, var(--cre-accent) 45%, var(--border));
  background: color-mix(in srgb, var(--cre-accent) 8%, var(--bg-soft));
}
.msk-palette-opt { display: none !important; }
.msk-card {
  position: absolute; z-index: 1; box-sizing: border-box;
  border: 1.5px solid #334155; border-radius: 3px;
  background: linear-gradient(160deg, #f8fafc 0%, #e2e8f0 100%);
  touch-action: none; cursor: grab; overflow: hidden;
}
.msk-card.is-dragging { cursor: grabbing; z-index: 5; box-shadow: 0 8px 20px rgba(15,23,42,.2); }
.msk-card.tone-id { background: linear-gradient(160deg, #ecfeff, #cffafe); border-color: #0e7490; }
.msk-card.tone-res { background: linear-gradient(160deg, #f0fdf4, #dcfce7); border-color: #15803d; }
.msk-card.tone-pass { background: linear-gradient(160deg, #fff7ed, #ffedd5); border-color: #b45309; }
.msk-card.tone-photo { background: linear-gradient(160deg, #f5f3ff, #ede9fe); border-color: #7c3aed; }
.msk-card.tone-drv { background: linear-gradient(160deg, #eff6ff, #dbeafe); border-color: #2563eb; }
.msk-card.tone-food { background: linear-gradient(160deg, #fefce8, #fef9c3); border-color: #ca8a04; }
.msk-card-inner {
  height: 100%; padding: 4%; display: grid; align-content: start; gap: 3%;
  font-size: clamp(7px, 1.6vw, 11px); line-height: 1.25;
}
.msk-card-inner strong { font-size: 1.05em; }
.msk-ph { color: #64748b; }
.msk-size { color: #94a3b8; margin-top: auto; }
.msk-card-del {
  position: absolute; top: 2px; inset-inline-end: 2px;
  width: 18px; height: 18px; border: 0; border-radius: 50%;
  background: #dc2626; color: #fff; font-size: 12px; line-height: 1;
  cursor: pointer; display: none;
}
.msk-card:hover .msk-card-del { display: grid; place-items: center; }
#mskScale {
  border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer;
}
@media (max-width: 800px) {
  .msk-layout { grid-template-columns: 1fr; }
  .msk-palette {
    position: static;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .4rem;
  }
  .msk-palette-title, .msk-palette-hint { grid-column: 1 / -1; }
  .msk-palette-hint { display: none; }
  .msk-palette-item {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: .4rem .25rem;
    gap: .25rem;
  }
  .msk-palette-ico {
    width: 40px; height: 28px;
  }
  .msk-palette-meta { justify-items: center; }
  .msk-palette-name {
    font-size: .65rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .msk-palette-item small { display: none; }
  .demo-mustamsak-scope .demo-stage-head p { display: none; }
  .demo-mustamsak-scope .demo-creative-actions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: .32rem;
    width: 100%;
  }
  .demo-mustamsak-scope .demo-creative-actions > .btn,
  .demo-mustamsak-scope .demo-creative-actions > label.btn,
  .demo-mustamsak-scope .demo-creative-actions > .cre-actions-dd,
  .demo-mustamsak-scope .demo-creative-actions > .msk-export-mobile {
    width: 100%;
    min-width: 0;
  }
  .demo-mustamsak-scope .demo-creative-actions .btn {
    width: 100%;
    justify-content: center;
    font-size: .68rem;
    padding: .4rem .3rem;
    white-space: nowrap;
  }
  .demo-mustamsak-scope .demo-creative-actions .msk-export-dd,
  .demo-mustamsak-scope .demo-creative-actions .cre-actions-dd.msk-export-dd {
    display: none !important;
  }
  .demo-mustamsak-scope .msk-export-mobile {
    display: contents;
  }
  .demo-mustamsak-scope .msk-export-mobile .btn {
    width: 100%;
  }
  .demo-mustamsak-scope .demo-creative-actions #mskScale {
    width: 100%;
    font-size: .68rem;
  }
}
@media print {
  @page { size: A4 portrait; margin: 0; }
  html body.msk-printing {
    width: 210mm !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  body.msk-printing .site-header,
  body.msk-printing .header-inner,
  body.msk-printing .demo-banner,
  body.msk-printing .demo-banner-inner,
  body.msk-printing .demo-stage-head,
  body.msk-printing .msk-palette,
  body.msk-printing .msk-crop-modal,
  body.msk-printing .public-footer,
  body.msk-printing .public-header,
  body.msk-printing .site-footer,
  body.msk-printing .demo-creative-actions,
  body.msk-printing .app-nav,
  body.msk-printing .nav-drawer,
  body.msk-printing .msk-a4-mark { display: none !important; visibility: hidden !important; }
  body.msk-printing .demo-main,
  body.msk-printing .demo-stage,
  body.msk-printing .demo-creative,
  body.msk-printing .msk-layout,
  body.msk-printing .container {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: #fff !important;
    box-shadow: none !important;
    max-width: none !important;
    width: 210mm !important;
  }
  body.msk-printing .msk-stage-wrap {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: visible !important;
    border-radius: 0 !important;
    width: 210mm !important;
  }
  body.msk-printing .msk-a4-host {
    display: block !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 210mm !important;
  }
  body.msk-printing .msk-a4 {
    width: 210mm !important;
    height: 297mm !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    page-break-after: always;
    break-after: page;
    position: relative !important;
    background: #fff !important;
    visibility: visible !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  body.msk-printing .msk-card,
  body.msk-printing .msk-card * {
    visibility: visible !important;
  }
  body.msk-printing .msk-a4:last-child {
    page-break-after: auto;
    break-after: auto;
  }
  body.msk-printing .msk-card-del { display: none !important; }
  body.msk-printing .msk-card {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  body.msk-printing .msk-card.has-image {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.msk-printing .msk-card.has-image .msk-card-inner {
    padding: 0 !important;
    height: 100% !important;
  }
  body.msk-printing .msk-card.has-image .msk-img-holder {
    position: absolute !important;
    inset: 0 !important;
    border: none !important;
    background: transparent !important;
    display: block !important;
  }
  body.msk-printing .msk-card.has-image .msk-img {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  body.msk-printing .msk-card.has-image .msk-card-title,
  body.msk-printing .msk-card.has-image .msk-size,
  body.msk-printing .msk-card.has-image .msk-holder-empty { display: none !important; }
  body.msk-printing .msk-card:not(.has-image) {
    border: 1px solid #94a3b8 !important;
    background: #f8fafc !important;
  }
}

/* Word demo enhancements: paper, fullscreen, dock, describe */
.demo-docx-scope .cre-cluster-label,
.demo-docx-scope .cre-text-style-cluster > .cre-cluster-label {
  display: block;
  width: 100%;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.1;
  margin: 0 0 .1rem;
  text-align: center;
}
.demo-docx-scope .cre-text-style-cluster,
.demo-docx-scope .cre-list-group,
.demo-docx-scope .cre-align-group,
.demo-docx-scope .cre-dir-group,
.demo-docx-scope .cre-ai-cluster {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem;
  padding: 1.1rem .3rem .2rem;
  border-radius: 0;
  background: transparent;
  position: relative;
  border-top: 0;
}
.demo-docx-scope .cre-text-style-cluster > .cre-cluster-label { color: #7c3aed; }
.demo-docx-scope .cre-list-group > .cre-cluster-label { color: #0f766e; }
.demo-docx-scope .cre-align-group > .cre-cluster-label { color: #0369a1; }
.demo-docx-scope .cre-dir-group > .cre-cluster-label { color: #b45309; }
.demo-docx-scope .cre-ai-cluster > .cre-cluster-label { color: #7c3aed; }
.demo-docx-scope .cre-text-style-cluster > .cre-cluster-label,
.demo-docx-scope .cre-list-group > .cre-cluster-label,
.demo-docx-scope .cre-align-group > .cre-cluster-label,
.demo-docx-scope .cre-dir-group > .cre-cluster-label,
.demo-docx-scope .cre-ai-cluster > .cre-cluster-label {
  position: absolute;
  top: 0;
  inset-inline: 0;
  margin: 0 .15rem;
  padding: 0;
  border-bottom: none !important;
  width: auto;
  border-radius: 0;
  background: transparent;
  font-size: .62rem;
  font-weight: 800;
}
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .demo-docx-mode .cre-ribbon-text,
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .cre-ai-cluster #docxAiApply .cre-ribbon-text {
  display: none !important;
}
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .demo-docx-mode {
  min-width: 34px;
  width: 34px;
  height: 34px;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center;
}
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .cre-ribbon-field {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: .12rem;
  min-height: 3.35rem;
  padding: .95rem .3rem .2rem;
  margin: 0;
}
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .cre-ribbon-field > .cre-cluster-label,
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .cre-ribbon-field > span.cre-cluster-label {
  position: absolute;
  top: 0;
  inset-inline: 0;
  margin: 0 .15rem;
  padding: 0 0 .12rem;
  border-bottom: 2px solid currentColor;
  width: auto;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.1;
  text-align: center;
  background: transparent;
}
.demo-docx-scope .cre-field-font > .cre-cluster-label { color: #0369a1; }
.demo-docx-scope .cre-field-size > .cre-cluster-label { color: #0f766e; }
.demo-docx-scope .cre-field-color > .cre-cluster-label { color: #be123c; }
.demo-docx-scope .cre-field-spacing > .cre-cluster-label { color: #b45309; }
.demo-docx-scope .cre-list-group,
.demo-docx-scope .cre-align-group,
.demo-docx-scope .cre-dir-group {
  position: relative;
  padding-top: .95rem;
  align-items: flex-end;
  min-height: 3.35rem;
}
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .cre-list-group .cre-ribbon-chip,
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .cre-align-group > button,
.demo-docx-scope .demo-word-ribbon:not(.is-docked) .cre-dir-group > button {
  height: 34px !important;
  min-height: 34px !important;
  min-width: 34px;
  width: 34px;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center;
}
.demo-docx-scope .demo-word-page-btn.demo-word-page-add {
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  color: var(--primary);
  font-size: 1.15rem;
  line-height: 1;
}
.demo-docx-scope .demo-word-pages-nav {
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: .35rem;
  -webkit-overflow-scrolling: touch;
}
.demo-docx-scope .cre-ribbon-field input[type="color"] {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.demo-docx-scope .cre-ribbon-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.demo-docx-scope .cre-ribbon-field input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: 8px;
}
.demo-docx-scope .cre-ribbon-chip.cre-icon-only {
  min-width: 34px;
  width: 34px;
  padding: 0 !important;
}
.demo-docx-scope .cre-orient-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: .35rem !important;
}
.demo-docx-scope .cre-flyout-menu {
  max-width: min(320px, calc(100vw - 24px));
  padding: .55rem;
  z-index: 300;
}
.demo-docx-scope .cre-flyout-menu--rich {
  display: grid;
  gap: .22rem;
}
.docx-size-menu {
  z-index: 9999;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 14px 32px rgba(15,23,42,.2);
  overflow-y: auto;
  padding: .25rem;
}
.docx-size-menu button {
  display: block;
  width: 100%;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}
.docx-size-menu button:hover,
.docx-size-menu button.is-active {
  background: var(--primary-soft);
  color: var(--primary);
}
.ribbon-mini-label { display: none; }

/* Hide stage lead on mobile (docx + pptx) */
@media (max-width: 900px) {
  .demo-docx-scope .demo-stage-lead,
  .demo-pptx-scope .demo-stage-lead {
    display: none !important;
  }
  .demo-docx-scope .demo-word-multi,
  .demo-pptx-scope .demo-pptx-shell {
    padding-bottom: calc(6.4rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Fullscreen work mode */
body.byb-work-fullscreen .site-header .header-inner,
body.byb-work-fullscreen .demo-banner,
body.byb-work-fullscreen .demo-banner-inner,
body.byb-work-fullscreen .demo-stage-head h1,
body.byb-work-fullscreen .demo-stage-lead {
  display: none !important;
}
body.byb-work-fullscreen .demo-stage-head {
  margin-bottom: .35rem;
}
body.byb-work-fullscreen .demo-creative-actions {
  width: 100%;
}
#docxFullscreenExit[hidden],
#pptxFullscreenExit[hidden] { display: none !important; }

/* PPTX slideshow / presentation mode */
body.byb-pptx-present .demo-banner,
body.byb-pptx-present .demo-banner-inner,
body.byb-pptx-present .site-header .header-inner,
body.byb-pptx-present .demo-stage-head h1,
body.byb-pptx-present .demo-stage-lead {
  display: none !important;
}
body.byb-pptx-present .demo-pptx-scope #pptxRibbon,
body.byb-pptx-present .demo-pptx-scope .demo-pptx-thumbs,
body.byb-pptx-present .demo-pptx-scope .demo-pptx-design-tools,
body.byb-pptx-present .demo-pptx-scope .demo-pptx-chrome-tools,
body.byb-pptx-present .demo-pptx-scope .demo-pptx-editor,
body.byb-pptx-present .demo-pptx-scope .demo-pptx-gate,
body.byb-pptx-present .demo-pptx-scope .pptx-ai-rail,
body.byb-pptx-present .demo-pptx-scope #pptxRailSwitch,
body.byb-pptx-present .demo-pptx-scope .demo-pptx-under-stage {
  display: none !important;
}
body.byb-pptx-present .demo-pptx-scope .demo-creative {
  display: block;
}
body.byb-pptx-present .demo-pptx-scope .demo-pptx-shell {
  display: block;
  padding: 0;
}
body.byb-pptx-present .demo-pptx-scope .demo-pptx-stage {
  position: fixed;
  inset: 0;
  z-index: 9500;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #0f172a;
  display: grid;
  place-items: center;
}
body.byb-pptx-present .demo-pptx-scope .demo-pptx-slide {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  inset-inline: auto !important;
  width: min(96vw, calc(96vh * 16 / 9)) !important;
  height: auto !important;
  max-height: 96vh;
  transform: none !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .45);
}
body.byb-pptx-present .demo-stage-head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9600;
  margin: 0;
  padding: .45rem .75rem;
  background: linear-gradient(to bottom, rgba(15, 23, 42, .92), transparent);
}
body.byb-pptx-present .demo-creative-actions {
  justify-content: flex-end;
}

/* Portaled flyouts (body) ? clean Office-like list layout */
body > .cre-flyout-menu:not([hidden]) {
  position: fixed !important;
  z-index: 9200 !important;
  display: grid !important;
  gap: .22rem !important;
  width: min(300px, calc(100vw - 20px)) !important;
  min-width: 240px !important;
  max-width: min(320px, calc(100vw - 20px)) !important;
  padding: .55rem !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 40px rgba(15,23,42,.22) !important;
}
body > .cre-flyout-menu[hidden] { display: none !important; }
body > .cre-flyout-menu .cre-flyout-item,
body > .cre-flyout-menu .cre-flyout-btn {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  gap: .55rem !important;
  text-align: start !important;
  white-space: normal !important;
}
body > .cre-flyout-menu .cre-flyout-copy {
  display: grid !important;
  gap: .05rem !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
body > .cre-flyout-menu .cre-flyout-copy strong {
  font-size: .82rem !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}
body > .cre-flyout-menu .cre-flyout-copy small {
  display: block !important;
  font-size: .7rem !important;
  color: var(--muted) !important;
  white-space: normal !important;
}
body > .cre-flyout-menu .cre-flyout-actions {
  display: grid !important;
  grid-template-columns: 1fr auto;
  gap: .4rem !important;
}
body > .cre-flyout-menu .cre-orient-actions {
  grid-template-columns: 1fr 1fr !important;
}

/* Describe modal */
.docx-describe-modal {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(15, 23, 42, .55);
}
.docx-describe-modal[hidden] { display: none !important; }
.docx-describe-dialog {
  width: min(520px, 96vw);
  display: grid;
  gap: .75rem;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
}
.docx-describe-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.docx-describe-close {
  border: 0;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
}
.docx-describe-dialog textarea {
  width: 100%;
  min-height: 140px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .7rem .8rem;
  font: inherit;
  background: var(--bg-soft);
  color: var(--text);
  box-sizing: border-box;
}
.docx-describe-actions {
  display: flex;
  justify-content: flex-end;
  gap: .45rem;
}

/* Touch long-press floating toolbar */
.docx-touch-ctx {
  position: fixed;
  z-index: 9600;
  display: inline-flex;
  gap: .25rem;
  padding: .3rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .22);
}
.docx-touch-ctx[hidden] { display: none !important; }
.docx-touch-ctx button {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.docx-touch-ctx button:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.docx-touch-ctx button[hidden] { display: none !important; }

.demo-docx-scope .demo-word-a4 {
  width: min(100%, 210mm);
}
.demo-docx-scope .docx-page-header,
.demo-docx-scope .docx-page-footer {
  width: 100%;
  max-width: 100%;
}

/* ===== Final mobile overrides (must win cascade) ===== */
@media (max-width: 900px) {
  /* PPTX: single-column shell ? thumbs on TOP, slide visible */
  .demo-pptx-scope .demo-creative {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: .4rem !important;
  }
  .demo-pptx-scope .demo-stage-head {
    grid-column: auto !important;
    width: 100% !important;
  }
  .demo-pptx-scope .demo-pptx-shell {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    grid-column: auto !important;
    width: 100% !important;
    min-height: 0 !important;
    gap: .4rem !important;
  }
  .demo-pptx-scope .demo-pptx-thumbs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    order: 1 !important;
    grid-area: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 3rem !important;
    max-height: 3rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  .demo-pptx-scope .demo-pptx-thumbs button,
  .demo-pptx-scope .demo-pptx-thumbs button.is-num-only {
    flex: 0 0 auto !important;
    width: 2.5rem !important;
    min-width: 2.5rem !important;
    height: 2.5rem !important;
    display: grid !important;
    place-items: center !important;
  }
  .demo-pptx-scope .demo-pptx-stage {
    order: 2 !important;
    grid-area: auto !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: .65rem !important;
    margin: 0 0 .15rem !important;
    background: var(--bg-soft) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .1) !important;
    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
  }
  .demo-pptx-scope .demo-pptx-slide {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    transform: none !important;
    zoom: normal !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    color: #fff !important;
    border-radius: 10px !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 8px 22px rgba(15, 23, 42, .18) !important;
  }
  .demo-pptx-scope .demo-pptx-slide #pptxSlideTitle,
  .demo-pptx-scope .demo-pptx-slide #pptxSlideBullets,
  .demo-pptx-scope .demo-pptx-slide #pptxSlideBullets li {
    color: #fff !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 3 !important;
  }
  .demo-pptx-scope .demo-pptx-under-stage,
  .demo-pptx-scope .demo-pptx-design-tools,
  .demo-pptx-scope .demo-pptx-editor,
  .demo-pptx-scope .demo-pptx-chrome-tools,
  .demo-pptx-scope .demo-pptx-gate {
    grid-area: auto !important;
  }
  .demo-pptx-scope .pptx-design-main[data-rail="design"] {
    order: 3 !important;
  }

  /* Compact demo banner ? Word / Excel / PPTX / PDF / Mustamsak */
  .demo-docx-scope .demo-banner-burger,
  .demo-excel-scope .demo-banner-burger,
  .demo-pptx-scope .demo-banner-burger,
  .demo-pdf-scope .demo-banner-burger,
  .demo-mustamsak-scope .demo-banner-burger,
  .demo-docx-scope .demo-banner-backdrop,
  .demo-excel-scope .demo-banner-backdrop,
  .demo-pptx-scope .demo-banner-backdrop,
  .demo-pdf-scope .demo-banner-backdrop,
  .demo-mustamsak-scope .demo-banner-backdrop,
  .demo-docx-scope .demo-banner-actions > .nav-close,
  .demo-excel-scope .demo-banner-actions > .nav-close,
  .demo-pptx-scope .demo-banner-actions > .nav-close,
  .demo-pdf-scope .demo-banner-actions > .nav-close,
  .demo-mustamsak-scope .demo-banner-actions > .nav-close,
  .demo-docx-scope .demo-banner-extra,
  .demo-excel-scope .demo-banner-extra,
  .demo-pptx-scope .demo-banner-extra,
  .demo-pdf-scope .demo-banner-extra,
  .demo-mustamsak-scope .demo-banner-extra,
  .demo-docx-scope .demo-banner-sub,
  .demo-excel-scope .demo-banner-sub,
  .demo-pptx-scope .demo-banner-sub,
  .demo-pdf-scope .demo-banner-sub,
  .demo-mustamsak-scope .demo-banner-sub,
  .demo-docx-scope .demo-banner-title,
  .demo-excel-scope .demo-banner-title,
  .demo-pptx-scope .demo-banner-title,
  .demo-pdf-scope .demo-banner-title,
  .demo-mustamsak-scope .demo-banner-title {
    display: none !important;
  }
  .demo-docx-scope .demo-banner-title-short[hidden],
  .demo-excel-scope .demo-banner-title-short[hidden],
  .demo-pptx-scope .demo-banner-title-short[hidden],
  .demo-pdf-scope .demo-banner-title-short[hidden],
  .demo-mustamsak-scope .demo-banner-title-short[hidden] {
    display: inline !important;
  }
  .demo-docx-scope .demo-banner-title-short,
  .demo-excel-scope .demo-banner-title-short,
  .demo-pptx-scope .demo-banner-title-short,
  .demo-pdf-scope .demo-banner-title-short,
  .demo-mustamsak-scope .demo-banner-title-short {
    font-size: .9rem !important;
    font-weight: 800;
  }
  .demo-docx-scope .demo-banner-inner,
  .demo-excel-scope .demo-banner-inner,
  .demo-pptx-scope .demo-banner-inner,
  .demo-pdf-scope .demo-banner-inner,
  .demo-mustamsak-scope .demo-banner-inner {
    padding: .45rem 0 !important;
    gap: .45rem !important;
    align-items: center !important;
  }
  .demo-docx-scope .demo-banner-copy,
  .demo-excel-scope .demo-banner-copy,
  .demo-pptx-scope .demo-banner-copy,
  .demo-pdf-scope .demo-banner-copy,
  .demo-mustamsak-scope .demo-banner-copy {
    min-width: 0 !important;
    gap: .15rem !important;
  }
  .demo-docx-scope .demo-banner-actions,
  .demo-excel-scope .demo-banner-actions,
  .demo-pptx-scope .demo-banner-actions,
  .demo-pdf-scope .demo-banner-actions,
  .demo-mustamsak-scope .demo-banner-actions {
    position: static !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: .35rem !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  .demo-docx-scope .demo-banner-actions .btn,
  .demo-excel-scope .demo-banner-actions .btn,
  .demo-pptx-scope .demo-banner-actions .btn,
  .demo-pdf-scope .demo-banner-actions .btn,
  .demo-mustamsak-scope .demo-banner-actions .btn {
    width: auto !important;
    min-height: 2rem;
    padding: .28rem .4rem !important;
    font-size: .66rem !important;
  }
  /* Keep banner compact: icon-only except Back */
  .demo-docx-scope .demo-banner-actions .btn:not([data-byb-back]) span,
  .demo-excel-scope .demo-banner-actions .btn:not([data-byb-back]) span,
  .demo-pptx-scope .demo-banner-actions .btn:not([data-byb-back]) span,
  .demo-pdf-scope .demo-banner-actions .btn:not([data-byb-back]) span,
  .demo-mustamsak-scope .demo-banner-actions .btn:not([data-byb-back]) span {
    display: none !important;
  }
  .demo-docx-scope .demo-banner-actions [data-byb-back],
  .demo-excel-scope .demo-banner-actions [data-byb-back],
  .demo-pptx-scope .demo-banner-actions [data-byb-back],
  .demo-pdf-scope .demo-banner-actions [data-byb-back],
  .demo-mustamsak-scope .demo-banner-actions [data-byb-back] {
    display: inline-flex !important;
    align-items: center;
    gap: .28rem;
    order: -1;
  }
  .demo-docx-scope .demo-banner-actions [data-byb-back] span,
  .demo-excel-scope .demo-banner-actions [data-byb-back] span,
  .demo-pptx-scope .demo-banner-actions [data-byb-back] span,
  .demo-pdf-scope .demo-banner-actions [data-byb-back] span,
  .demo-mustamsak-scope .demo-banner-actions [data-byb-back] span {
    display: inline !important;
    font-size: .72rem;
    font-weight: 800;
  }
  .demo-docx-scope .demo-banner-pill,
  .demo-excel-scope .demo-banner-pill,
  .demo-pptx-scope .demo-banner-pill,
  .demo-pdf-scope .demo-banner-pill,
  .demo-mustamsak-scope .demo-banner-pill,
  .demo-docx-scope .demo-banner-copy > .demo-pill,
  .demo-excel-scope .demo-banner-copy > .demo-pill,
  .demo-pptx-scope .demo-banner-copy > .demo-pill,
  .demo-pdf-scope .demo-banner-copy > .demo-pill,
  .demo-mustamsak-scope .demo-banner-copy > .demo-pill {
    display: none !important;
  }
  .demo-docx-scope .demo-banner-actions a[href*="user-login"],
  .demo-excel-scope .demo-banner-actions a[href*="user-login"],
  .demo-pptx-scope .demo-banner-actions a[href*="user-login"],
  .demo-pdf-scope .demo-banner-actions a[href*="user-login"],
  .demo-mustamsak-scope .demo-banner-actions a[href*="user-login"],
  .demo-docx-scope .demo-banner-actions a[href*="user-portal"],
  .demo-excel-scope .demo-banner-actions a[href*="user-portal"],
  .demo-pptx-scope .demo-banner-actions a[href*="user-portal"],
  .demo-pdf-scope .demo-banner-actions a[href*="user-portal"],
  .demo-mustamsak-scope .demo-banner-actions a[href*="user-portal"],
  .demo-docx-scope .demo-banner-home,
  .demo-excel-scope .demo-banner-home,
  .demo-pptx-scope .demo-banner-home,
  .demo-pdf-scope .demo-banner-home,
  .demo-mustamsak-scope .demo-banner-home {
    display: none !important;
  }
  /* site-header burger stays visible; only hide the demo-banner burger */
  .demo-docx-scope .demo-banner-burger,
  .demo-excel-scope .demo-banner-burger,
  .demo-pptx-scope .demo-banner-burger,
  .demo-pdf-scope .demo-banner-burger,
  .demo-mustamsak-scope .demo-banner-burger {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  .demo-docx-scope .site-header .nav-burger,
  .demo-excel-scope .site-header .nav-burger,
  .demo-pptx-scope .site-header .nav-burger,
  .demo-pdf-scope .site-header .nav-burger,
  .demo-mustamsak-scope .site-header .nav-burger {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Excel rail: icon-only chips ? no label overlap */
  .demo-excel-scope .excel-rail .excel-chip-label {
    display: none !important;
  }
  .demo-excel-scope .excel-rail .excel-chip,
  .demo-excel-scope .excel-rail .excel-tool-list .excel-chip,
  .demo-excel-scope .excel-rail .excel-rail-tools .excel-chip {
    flex: 0 0 2.45rem !important;
    width: 2.45rem !important;
    min-width: 2.45rem !important;
    max-width: 2.45rem !important;
    height: 2.45rem !important;
    min-height: 2.45rem !important;
    max-height: 2.45rem !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    display: inline-grid !important;
    place-items: center !important;
  }
  .demo-excel-scope .excel-rail .excel-tool-list,
  .demo-excel-scope .excel-rail .excel-rail-tools {
    gap: .35rem !important;
  }
  .demo-excel-scope .excel-rail .excel-tool-group,
  .demo-excel-scope .excel-rail .excel-rail-group {
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: max-content !important;
    overflow: visible !important;
  }
  .demo-excel-scope .excel-rail .excel-group-title {
    font-size: .48rem !important;
    margin-bottom: .1rem !important;
  }
  .demo-excel-scope .excel-sheet-tabs {
    order: 2 !important;
    z-index: 1;
  }
}

/* PPTX desktop Header/Footer: compact logo + fit in bounds */
@media (min-width: 901px) {
  .demo-pptx-scope .demo-pptx-chrome-tools.pptx-des-box,
  .demo-pptx-scope #pptxChromeTools {
    overflow: hidden !important;
    max-width: 100%;
  }
  .demo-pptx-scope .pptx-chrome-flow {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: .25rem !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .demo-pptx-scope .cre-chrome-input {
    width: 4.4rem !important;
    min-width: 3.6rem !important;
    max-width: 5rem !important;
    flex: 0 0 4.4rem !important;
    height: 26px !important;
    font-size: .68rem !important;
  }
  .demo-pptx-scope .cre-chrome-chip {
    height: 26px !important;
    padding: 0 .28rem !important;
    font-size: .62rem !important;
    flex: 0 0 auto !important;
    max-width: 5.5rem;
  }
  .demo-pptx-scope .cre-chrome-logo-btn {
    width: 2.6rem !important;
    min-width: 2.6rem !important;
    max-width: 2.6rem !important;
    padding: 0 !important;
    justify-content: center !important;
    gap: 0 !important;
  }
  .demo-pptx-scope .cre-chrome-logo-btn > span {
    display: none !important;
  }
  .demo-pptx-scope .cre-chrome-logo-btn .byb-icon {
    width: 14px;
    height: 14px;
  }
}

@media (min-width: 769px) {
  .cre-align-group-mobile {
    display: none !important;
  }

  .demo-docx-scope .demo-word-ribbon.is-docked .cre-align-group-mobile {
    display: none !important;
  }

  /* Desktop docked vertical side menu - Floating cleanly BELOW top header & banner bar */
  .demo-docx-scope .demo-word-ribbon.is-docked {
    position: fixed !important;
    top: 125px !important;
    inset-inline-start: 1rem !important;
    height: calc(100vh - 140px) !important;
    max-height: calc(100vh - 140px) !important;
    z-index: 95 !important;
    background: var(--surface-elevated, #ffffff) !important;
    border: 1px solid var(--border, #cbd5e1) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    padding: 0.6rem 0.4rem !important;
    overflow-y: auto !important;
  }

  [data-theme="dark"] .demo-docx-scope .demo-word-ribbon.is-docked {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.4) !important;
  }
}

/* Mobile Word Demo stage width, page nav below stage, alignment group, export menu */
@media (max-width: 768px) {
  /* Hide primary CTA button and Menu Mode toggle button in Word header on mobile */
  .demo-docx-scope .demo-creative-actions .btn-primary,
  .demo-creative-scope .demo-creative-actions .btn-primary,
  #docxMenuModeToggle {
    display: none !important;
  }

  .demo-stage-head h1 {
    font-size: 1.05rem !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: 100% !important;
  }

  /* Mobile Word Ribbon Rail Panels - Single horizontal row with scroll, identical to Insert tab */
  .cre-mobile-rail-panel,
  .cre-ribbon-cluster.cre-mobile-rail-panel {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.45rem !important;
    padding: 0.55rem 0.65rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
    height: 54px !important;
    max-height: 54px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .cre-mobile-rail-panel::-webkit-scrollbar,
  .cre-ribbon-cluster.cre-mobile-rail-panel::-webkit-scrollbar {
    display: none !important;
  }

  .cre-mobile-rail-panel *,
  .cre-ribbon-cluster.cre-mobile-rail-panel * {
    box-sizing: border-box !important;
  }

  .cre-mobile-rail-panel .cre-ribbon-cluster,
  .cre-mobile-rail-panel .cre-text-style-cluster,
  .cre-text-style-cluster,
  .cre-mobile-rail-panel .cre-ribbon-group,
  .cre-mobile-rail-panel .cre-hist-actions,
  .cre-mobile-rail-panel .cre-list-group,
  .cre-mobile-rail-panel .cre-align-group,
  .cre-mobile-rail-panel .cre-align-group-mobile,
  .cre-mobile-rail-panel .cre-dir-group,
  .cre-mobile-rail-panel .cre-ai-cluster,
  .cre-mobile-rail-panel .demo-docx-modes {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.45rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    position: static !important;
    flex-shrink: 0 !important;
  }

  .cre-mobile-rail-panel .cre-cluster-label {
    display: none !important;
  }

  .cre-mobile-rail-panel button,
  .cre-mobile-rail-panel .cre-ribbon-chip,
  .cre-mobile-rail-panel .cre-hist-btn,
  .cre-mobile-rail-panel .demo-docx-mode,
  .cre-mobile-rail-panel button[data-align],
  .cre-mobile-rail-panel button[data-cmd],
  .cre-mobile-rail-panel #docxAiApply,
  .cre-mobile-rail-panel #docxDirRtl,
  .cre-mobile-rail-panel #docxDirLtr {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 38px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
  }

  /* Hide floating text labels and mini labels inside ribbon rail panels on mobile */
  .ribbon-mini-label,
  .cre-mobile-rail-panel .cre-cluster-label,
  .cre-mobile-rail-panel .cre-ribbon-text {
    display: none !important;
  }

  /* Specific Sizing & Layout for Mobile Format Rail Panel (Word/Docs) */
  .cre-mobile-rail-panel[data-rail="format"] {
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 0.35rem 0.5rem !important;
  }

  /* Text style cluster: B, I, U */
  .cre-mobile-rail-panel .cre-text-style-cluster {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: unset !important;
  }

  .cre-mobile-rail-panel .cre-text-style-cluster > button {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    border-radius: 10px !important;
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 38px !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
  }

  /* Font selector on mobile */
  .cre-mobile-rail-panel[data-rail="format"] .cre-field-font {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 76px !important;
    max-width: 95px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }

  .cre-mobile-rail-panel[data-rail="format"] select#docxFont {
    width: 100% !important;
    min-width: 76px !important;
    max-width: 95px !important;
    height: 38px !important;
    padding: 0 0.5rem !important;
    border-radius: 10px !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    text-align: start !important;
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    flex: none !important;
    box-sizing: border-box !important;
  }

  /* Font size combo on mobile */
  .cre-mobile-rail-panel[data-rail="format"] .cre-field-size,
  .cre-mobile-rail-panel[data-rail="format"] .cre-size-field {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 52px !important;
  }

  .cre-mobile-rail-panel[data-rail="format"] #docxSizeCombo {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex: 0 0 52px !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    background: var(--surface) !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
  }

  .cre-mobile-rail-panel[data-rail="format"] input#docxSize {
    width: 26px !important;
    height: 34px !important;
    padding: 0 !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    text-align: center !important;
    border: none !important;
    background: transparent !important;
    color: var(--text) !important;
  }

  .cre-mobile-rail-panel[data-rail="format"] #docxSizeCaret {
    width: 14px !important;
    height: 34px !important;
    padding: 0 !important;
    font-size: 0.65rem !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-soft) !important;
  }

  /* Color picker on mobile */
  .cre-mobile-rail-panel[data-rail="format"] .cre-field-color {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 38px !important;
  }

  .cre-mobile-rail-panel[data-rail="format"] input#docxColor {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    border-radius: 10px !important;
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    padding: 3px !important;
    cursor: pointer !important;
    flex: 0 0 38px !important;
    box-sizing: border-box !important;
  }

  /* Line spacing slider is hidden on mobile format rail */
  .cre-mobile-rail-panel .cre-field-spacing,
  .cre-mobile-rail-panel label.cre-field-spacing,
  .cre-mobile-rail-panel input#docxLine {
    display: none !important;
  }

  /* Alignment buttons inside format/text rails on mobile */
  .cre-mobile-rail-panel .cre-align-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: unset !important;
  }

  .cre-mobile-rail-panel .cre-align-group > button {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    border-radius: 10px !important;
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 38px !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .cre-mobile-rail-panel svg,
  .cre-mobile-rail-panel .byb-icon {
    width: 16px !important;
    height: 16px !important;
  }

  /* Make Word stage expand wider on mobile */
  .demo-stage,
  .demo-creative,
  .demo-word-stage {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0.15rem !important;
    padding-right: 0.15rem !important;
    margin: 0 !important;
  }

  /* Place page navigation buttons BELOW stage on mobile */
  .demo-word-multi {
    display: flex !important;
    flex-direction: column-reverse !important;
  }

  .demo-word-pages-nav {
    margin-top: 1rem !important;
    margin-bottom: 0.5rem !important;
    justify-content: center !important;
    width: 100% !important;
  }

  /* Ensure Export Dropdown menu pops over cleanly on mobile with high z-index and elevation */
  .cre-actions-dd {
    position: relative !important;
    overflow: visible !important;
  }

  .cre-actions-dd-menu {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    inset-inline-end: 0 !important;
    z-index: 100000 !important;
    min-width: 150px !important;
    background: var(--surface-elevated, #1e293b) !important;
    border: 1.5px solid var(--border-glow, #6366f1) !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65) !important;
    display: grid !important;
    gap: 0.3rem !important;
    padding: 0.45rem !important;
  }

  .cre-actions-dd-item {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0.55rem 0.8rem !important;
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    color: var(--text) !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: none !important;
  }

  .cre-actions-dd-item:hover {
    background: var(--primary-alpha, rgba(99,102,241,0.2)) !important;
    color: var(--primary) !important;
  }
  
  .cre-actions-dd-menu[hidden] {
    display: none !important;
  }
}