/* Shared mobile Office panels; editor canvas, file formats and desktop rails stay intact. */
.office-tool-heading, .office-menu-close { display: none; }
.office-tool-scroll { display: contents; }
@media screen and (max-width: 900px) {
  body.office-mobile-ready.demo-creative-scope { --office-nav-height: 58px; --office-keyboard-offset: 0px; --office-visible-height: 100dvh; --office-dock-height: 260px; }
  body.office-mobile-ready.demo-creative-scope main.demo-main.container.section { padding-bottom: var(--office-dock-height) !important; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRailSwitch,#pptxRailSwitch,#excelRailSwitch) {
    position: fixed !important; inset-inline: 0 !important; top: auto !important; bottom: var(--office-keyboard-offset) !important;
    display: flex !important; width: 100% !important; height: auto !important; min-height: 50px !important;
    gap: 3px !important; padding: 4px max(6px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left)) !important;
    border: 1px solid var(--border) !important; border-radius: 0 !important; background: var(--surface-elevated,var(--surface)) !important;
    box-shadow: 0 -3px 18px #0f172a12 !important; z-index: 9101 !important; overflow: visible !important; box-sizing: border-box !important;
  }
  body.office-mobile-ready.demo-creative-scope :is(#docxRailSwitch,#pptxRailSwitch,#excelRailSwitch) > button {
    flex: 1 1 0 !important; width: 0 !important; min-width: 44px !important; max-width: none !important; min-height: 42px !important; height: 46px !important;
    margin: 0 !important; padding: 3px 1px !important; border-radius: 10px !important; font-size: 11px !important; line-height: 1.2 !important;
    display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 3px !important;
    white-space: normal !important; text-align: center !important; touch-action: manipulation; overflow: hidden !important;
  }
  body.office-mobile-ready.demo-creative-scope :is(#docxRailSwitch,#pptxRailSwitch,#excelRailSwitch) > button span { font-size: 10px !important; line-height: 1.15 !important; white-space: normal !important; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRailSwitch,#pptxRailSwitch,#excelRailSwitch) > button.is-active { color: var(--primary,#2563eb) !important; border-color: currentColor !important; background: color-mix(in srgb,var(--primary,#2563eb) 12%,var(--surface)) !important; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon.office-tool-surface,#pptxRibbon.office-tool-surface,.excel-rail.office-tool-surface) {
    position: fixed !important; inset-inline: 0 !important; top: auto !important; bottom: calc(var(--office-nav-height) + var(--office-keyboard-offset)) !important;
    width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 0 !important;
    max-height: none !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 0 !important; touch-action: auto !important;
    border: 1px solid var(--border) !important; border-bottom: 0 !important; border-radius: 16px 16px 0 0 !important;
    padding: 0 !important; margin: 0 !important; transform: none !important; overflow: visible !important;
    background: var(--surface-elevated,var(--surface)) !important; box-shadow: 0 -8px 28px #0f172a14 !important; z-index: 9100 !important;
  }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-heading { display: flex; align-items: center; gap: 8px; padding: 0 12px; min-height: 44px; border-bottom: 1px solid var(--border); font-size: 12px; }
  .office-tool-heading strong { flex: 0 0 auto; color: var(--text); }
  .office-tool-hint { color: var(--muted); font-size: 10px; visibility: hidden; }
  .office-has-more .office-tool-hint { visibility: visible; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tools-collapse { margin-inline-start: auto; padding: 0 8px !important; height: 44px !important; min-height: 44px !important; border: 0; color: var(--muted); background: transparent; font: inherit; cursor: pointer; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll {
    display: block; width: 100%; min-width: 0; max-height: min(210px,calc(var(--office-visible-height) * .34));
    padding: 8px max(10px,env(safe-area-inset-right)) 10px max(10px,env(safe-area-inset-left)); box-sizing: border-box;
    overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent; scroll-padding: 8px;
  }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll .ribbon-dock-close { display: none !important; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll :is(.cre-ribbon-group,.cre-ribbon-body,.cre-ribbon-cluster,.cre-mobile-rail-panel,.excel-mobile-slot) {
    position: static !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; max-height: none !important;
    flex-wrap: wrap !important; justify-content: flex-start !important; align-items: center !important; gap: 6px !important;
    margin: 0 !important; padding: 0 !important; overflow: visible !important; white-space: normal !important; border: 0 !important; background: transparent !important;
  }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll :is(.cre-ribbon-combo,.cre-ribbon-body--combo) { display: contents !important; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll :is(.cre-hist-actions,.cre-text-style-cluster,.cre-align-group,.cre-dir-group,.cre-list-group,.demo-docx-modes) {
    display: inline-flex !important; flex-wrap: wrap !important; align-items: center !important; width: auto !important; max-width: 100% !important; gap: 4px !important;
    padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important;
  }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll :is(.cre-ribbon-label,.cre-ribbon-sep,.cre-cluster-label,.ribbon-mini-label) { display: none !important; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll :is(button,.cre-ribbon-chip,.cre-ribbon-field,.pptx-mob-color-btn) {
    position: relative !important; inset: auto !important; flex: 0 0 auto !important; min-width: 44px !important; max-width: 100% !important;
    width: auto !important; height: auto !important; min-height: 44px !important; max-height: none !important; margin: 0 !important; padding: 6px 9px !important;
    border-radius: 9px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important;
    font-size: 12px !important; line-height: 1.3 !important; white-space: normal !important; touch-action: manipulation;
  }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll :is(.cre-ribbon-text,.excel-chip-label) { display: inline !important; font-size: 11px !important; white-space: normal !important; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll .cre-icon-only .ribbon-mini-label { display: inline !important; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll :is(select,input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea) { min-height: 44px !important; font-size: 16px !important; max-width: 100% !important; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll input[type=color] { min-width: 40px !important; width: 40px !important; padding: 2px !important; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll .cre-ribbon-field { padding: 0 !important; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll .cre-field-font { width: 130px !important; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll #docxFont { width: 130px !important; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll .docx-size-combo { height: 44px !important; width: 94px !important; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll #docxSize { width: 50px !important; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll .docx-size-caret { width: 44px !important; padding: 0 !important; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll .cre-field-spacing { width: 110px !important; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll .cre-field-spacing input { width: 100% !important; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll .demo-word-ai-prompt { flex-basis: 100%; min-width: 0; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll .demo-word-ai-prompt[hidden] { display: none !important; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll #docxDescribePrompt { width: 100%; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll .excel-mobile-slot { display: block !important; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll :is(.excel-tool-group,.excel-rail-group) { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 0 10px !important; padding: 0 !important; border: 0 !important; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll .excel-group-title { position: static !important; display: block !important; width: auto !important; margin: 0 0 5px !important; padding: 0 !important; text-align: start !important; font-size: 10px !important; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll :is(.excel-tool-list,.excel-rail-tools) { display: flex !important; flex-wrap: wrap !important; gap: 5px !important; min-width: 0 !important; width: 100% !important; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll .excel-chip { flex-direction: row !important; min-width: 44px !important; width: auto !important; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll .excel-chip--field { padding: 0 6px !important; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll .excel-chip--color { position: relative !important; min-height: 44px !important; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll .excel-chip--color input { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 0; cursor: pointer; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll .pptx-trans-buttons--mob { display: flex !important; flex-wrap: wrap !important; gap: 5px !important; overflow: visible !important; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll :is(#pptxHeaderInputMob,#pptxFooterInputMob) { flex: 1 1 120px !important; width: 120px !important; min-width: 100px !important; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll .pptx-mobile-swatches { display: flex !important; flex-wrap: wrap !important; width: 100% !important; gap: 5px !important; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll .pptx-mobile-swatches button { width: 44px !important; }
  body.office-mobile-ready.demo-creative-scope .office-popover {
    box-sizing: border-box !important; margin: 0 !important; padding: 8px !important; border: 1px solid var(--border) !important; border-radius: 14px !important;
    overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain; background: var(--surface-elevated,var(--surface)) !important; box-shadow: 0 12px 60px #0f172a40 !important;
  }
  body.office-mobile-ready.demo-creative-scope .office-popover[hidden] { display: none !important; }
  body.office-mobile-ready.demo-creative-scope .office-popover :is(button,.cre-flyout-item,.cre-flyout-field,.excel-filter-check-item) { min-height: 44px !important; height: auto !important; max-height: none !important; font-size: 13px !important; }
  body.office-mobile-ready.demo-creative-scope .office-popover :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea) { min-height: 44px !important; font-size: 16px !important; }
  body.office-mobile-ready.demo-creative-scope .office-popover .office-menu-close { display: flex !important; width: auto !important; min-width: 70px !important; margin: 0 0 5px auto !important; justify-content: center; align-items: center; border: 1px solid var(--border); border-radius: 9px; color: var(--text); background: var(--surface); }
  body.office-mobile-ready.demo-creative-scope .office-popover .cre-flyout-title { margin-top: 0 !important; }
  body.office-mobile-ready.demo-creative-scope .office-popover .excel-filter-checklist { max-height: 160px; overflow-y: auto; }
  body.office-mobile-ready.demo-creative-scope .excel-main { padding-bottom: 0 !important; }
  body.office-mobile-ready.demo-creative-scope #excelSheetTabs { display: flex !important; position: static !important; width: 100% !important; overflow-x: auto !important; order: 0 !important; flex-shrink: 0 !important; }
  body.office-mobile-ready.demo-creative-scope .excel-sheet-scroll { max-height: var(--office-sheet-space,40vh) !important; min-height: 120px !important; }
  body.office-mobile-ready.demo-creative-scope :is(.excel-sheet-tab,.excel-sheet-add,#excelApplyFormula,#excelCancelFormula) { min-height: 44px !important; min-width: 44px !important; }
  body.office-mobile-ready.demo-creative-scope #excelFormula { min-height: 44px !important; font-size: 16px !important; }
  body.office-mobile-ready.demo-creative-scope :is(#pptxTitleInput,#pptxBulletsInput) { min-height: 44px !important; font-size: 16px !important; scroll-margin-block: 100px; }
  body.office-mobile-ready.demo-creative-scope .demo-creative-actions :is(button,a.btn) { min-height: 44px !important; }
  body.office-mobile-ready.demo-creative-scope .demo-creative-actions :is(a.btn-primary,label.btn) { display: inline-flex !important; min-height: 44px !important; }
  body.office-mobile-ready.demo-creative-scope :is(button,input,select,textarea,a):focus-visible { outline: 2px solid var(--primary,#2563eb) !important; outline-offset: 2px; }
  body.office-mobile-ready.demo-creative-scope :is(.office-tool-surface,.office-popover) [hidden] { display: none !important; }
  body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll .ribbon-dock-close { display: none !important; }
  body.office-mobile-ready.demo-creative-scope #pptxRibbon .office-tool-scroll .cre-ribbon-cluster { flex: 1 1 auto !important; min-width: 0 !important; }
  body.office-mobile-ready.demo-creative-scope #docxRibbon .office-tool-scroll #docxFont { width: 130px !important; min-width: 100px !important; max-width: 130px !important; padding: 0 6px !important; }
  body.office-mobile-ready.demo-creative-scope #docxRibbon .office-tool-scroll #docxSize { min-width: 50px !important; width: 50px !important; max-width: 50px !important; padding: 0 !important; }
  body.office-mobile-ready.demo-creative-scope #docxRibbon .office-tool-scroll #docxSizeCaret { min-width: 44px !important; width: 44px !important; max-width: 44px !important; }
  body.office-mobile-ready.demo-creative-scope #docxRibbon .office-tool-scroll .cre-field-size { width: 94px !important; min-width: 94px !important; flex: 0 0 94px !important; }
  body.office-mobile-ready.demo-creative-scope #docxRibbon .office-tool-scroll :is(.cre-field-spacing,#docxLine) { display: inline-flex !important; }
  body.office-mobile-ready.demo-creative-scope #pptxRibbon .office-tool-scroll :is(#pptxHeaderInputMob,#pptxFooterInputMob) { height: 44px !important; min-height: 44px !important; }
  body.office-mobile-ready.demo-creative-scope .excel-rail .office-tool-scroll .excel-chip--field { display: flex !important; flex-direction: row !important; min-width: 85px !important; max-width: 170px !important; }
  body.office-mobile-ready.demo-creative-scope .excel-rail .office-tool-scroll .excel-ribbon-select { width: auto !important; min-width: 64px !important; max-width: 120px !important; padding-inline: 4px !important; }
  body.office-mobile-ready.demo-creative-scope .excel-rail .office-tool-scroll .excel-chip--field .excel-chip-label { display: none !important; }
  body.office-mobile-ready.demo-creative-scope .excel-rail .office-tool-scroll .excel-chip--color { min-width: 68px !important; gap: 5px !important; padding: 6px 9px !important; }
  body.office-mobile-ready.demo-creative-scope #excelMain .office-tool-scroll .excel-chip--color { display: flex !important; flex-direction: row !important; width: auto !important; min-width: 80px !important; max-width: none !important; height: 44px !important; }
  body.office-mobile-ready.demo-creative-scope #excelMain .office-tool-scroll .excel-chip--color .excel-chip-label { max-width: none !important; max-height: none !important; width: auto !important; white-space: nowrap !important; text-overflow: clip !important; overflow: visible !important; }
}
@media print {
  .office-tool-heading,.office-tool-surface,.office-menu-close { display: none !important; }
}

@media screen and (max-width:900px) {
 body.office-mobile-ready.demo-creative-scope .office-tool-heading { min-height:32px!important; padding:3px 9px!important; gap:5px!important; }
 body.office-mobile-ready.demo-creative-scope .office-tool-heading strong { font-size:11px!important; }
 body.office-mobile-ready.demo-creative-scope .office-tools-collapse { min-height:30px!important; padding:3px 7px!important; font-size:10px!important; }
 body.office-mobile-ready.demo-creative-scope .office-tool-hint { font-size:9px!important; }
 body.office-mobile-ready.demo-creative-scope .office-tool-scroll { max-height:min(156px,26vh)!important; padding:7px 8px!important; overscroll-behavior:contain; }
 body.office-mobile-ready.demo-creative-scope :is(#docxRibbon,#pptxRibbon,.excel-rail) .office-tool-scroll :is(button,.btn,.excel-chip,.cre-ribbon-btn) { min-height:36px!important; padding:5px 7px!important; font-size:11px!important; border-radius:8px!important; }
 body.office-mobile-ready.demo-creative-scope #pptxRibbon .office-tool-scroll .pptx-mobile-swatches { display:grid!important; grid-template-columns:repeat(auto-fit,minmax(32px,1fr))!important; gap:4px!important; }
 body.office-mobile-ready.demo-creative-scope #pptxRibbon .office-tool-scroll .pptx-mobile-swatches button { width:100%!important; min-width:0!important; height:34px!important; min-height:34px!important; padding:0!important; }
 body.office-mobile-ready.demo-creative-scope .office-tool-scroll :is(.cre-ribbon-cluster,.excel-tool-list,.excel-rail-tools) { gap:4px!important; }
 body.office-mobile-ready.demo-creative-scope .office-tool-scroll .excel-tool-group { margin-bottom:6px!important; }
}