/* mobile1 (09.10): телефон = та же ПК-версия — те же кнопки, значки, цвета (решение владельца, макет «Станет 2.0»
   в docs/design/carousels-mobile-2026-10-08/). Всё, что меняет вид, — только в max-width:759px; ПК и app.html не затрагиваются.
   Нижняя панель по умолчанию с плашкой; вариант iOS (без плашки, просто синий) — <body data-mobile-nav="ios"> в testapp.html. */
.mobile-new-text,.quick-slide-rich,.slide-rich-wrap{display:none}
@media(max-width:759px){
 #app,.modal,.mobile-sheet{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}

 /* 1. Шапка: название · переключатель темы как на ПК · «···» · «Скачать» значком · главная синяя «Поделиться» */
 .topbar{height:56px;padding:0 10px;gap:8px}
 :is(.top-actions,.menu-theme-row) .theme-switch{order:0;display:inline-flex;flex:0 0 auto;position:relative;align-items:center;height:34px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--workspace)}
 :is(.top-actions,.menu-theme-row) .theme-switch:before{content:'';position:absolute;top:3px;left:3px;width:28px;height:26px;border-radius:999px;background:var(--surface);box-shadow:0 1px 3px rgb(0 0 0 / .14),0 0 0 .5px rgb(0 0 0 / .06);transition:transform .22s cubic-bezier(.3,.7,.2,1)}
 body.dark :is(.top-actions,.menu-theme-row) .theme-switch{background:#111113;border-color:#3a3a3e}
 body.dark :is(.top-actions,.menu-theme-row) .theme-switch:before{transform:translateX(28px);background:#5a5a60;box-shadow:0 1px 4px rgb(0 0 0 / .6),inset 0 0 0 .5px rgb(255 255 255 / .18)}
 :is(.top-actions,.menu-theme-row) .theme-switch .theme-option{position:relative;z-index:1;width:28px;min-width:28px;height:26px;min-height:26px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--muted)}
 :is(.top-actions,.menu-theme-row) .theme-switch .theme-option[aria-pressed=true]{color:var(--ink)}
 body.dark :is(.top-actions,.menu-theme-row) .theme-switch .theme-option{color:#8e8e93}
 body.dark :is(.top-actions,.menu-theme-row) .theme-switch .theme-option[aria-pressed=true]{color:#fff}
 :is(.top-actions,.menu-theme-row) .theme-switch .theme-option svg{width:16px;height:16px}
 .document-meta{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px;padding:0;border:0}
 .document-meta input{width:100%;padding:0;border:0;background:transparent;font-size:15px;font-weight:600;line-height:20px;min-height:0;text-overflow:ellipsis}
 .document-submeta{display:flex;align-items:center;min-width:0;white-space:nowrap;overflow:hidden;color:var(--muted);font-size:11px;line-height:15px}
 .document-submeta #activeTemplateName,.document-submeta .meta-dot{display:none!important}
 .document-meta #saveState{font-size:11px;overflow:hidden;text-overflow:ellipsis}
 .top-actions{gap:6px;flex-shrink:0}
 .top-actions #menuButton{order:1;width:34px;min-width:34px;min-height:40px;padding:0}
 .top-actions #exportButton{order:2;width:40px;min-width:40px;min-height:40px;padding:0;margin:0;justify-content:center;background:var(--surface);border:1px solid var(--edge,var(--line));color:var(--accent)}
 .top-actions #exportButton>span:last-child{display:none}
 .top-actions #exportButton svg{display:block!important;width:20px;height:20px}
 body.dark .top-actions #exportButton{background:var(--ctrl);border-color:transparent;color:var(--ink)}
 .top-actions #shareButton{order:3;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;font-size:13px;font-weight:600;background:var(--btn);border:1px solid var(--btn);color:#fff}
 .top-actions #shareButton svg{width:18px;height:18px}
 body.dark .top-actions #shareButton{background:var(--btn);border-color:var(--btn);color:#fff}

 /* 2. «Новый текст» на главном экране — в строке над слайдом, рядом со значками слайда (кнопка как на ПК) */
 .mobile-template-host{display:none!important}
 .preview-column .stage-heading{flex-wrap:wrap!important;min-height:0;gap:2px 4px;padding:4px 2px 0}
 .preview-column .stage-heading #editCurrentSlide,.preview-column .stage-heading #quickSlideDesign{display:none}
 .stage-heading .mobile-new-text{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;min-height:38px;padding:0 11px;margin-right:auto;font-size:13px;font-weight:500}
 .stage-heading .mobile-new-text svg{width:19px;height:19px}
 /* 3. Роль слайда — отдельной строкой над слайдом, крупно и целиком */
 .preview-column .stage-heading #currentRole{order:5;flex:0 0 100%;max-width:none!important;overflow:visible;white-space:normal;text-align:center;padding:6px 0 0;font-size:15px!important;font-weight:600;color:var(--ink)}
 .preview-column .stage-tools{flex:0 0 auto!important;margin-left:auto;border:0;padding:0}
 .preview-column .stage-tools .icon-button{width:36px!important;min-width:36px!important;min-height:40px!important}

 /* 4. Слайд занимает всё свободное место */
 .preview-column .stage{flex:1 1 auto;min-height:0;padding:2px 12px 0}
 .preview-column .canvas-area{flex:1 1 0;min-height:0;padding:4px 0}
 .preview-column .canvas-area canvas{max-height:100%;max-width:100%}

 /* 5. «‹ 2 из 9 ›» — как на ПК: квадратные кнопки с рамкой */
 .preview-column .stage-footer{min-height:48px;justify-content:center}
 .slide-navigation{gap:10px;background:transparent}
 .slide-navigation .icon-button{width:40px;min-width:40px;min-height:40px;border:1px solid var(--edge,var(--line));border-radius:8px;background:var(--surface);box-shadow:0 1px 3px #0000000d}
 .slide-navigation span{min-width:58px;font-size:12px;background:transparent;font-variant-numeric:tabular-nums}

 /* 6. Лента: номер под миниатюрой, синяя рамка выбранного, «+» серой плашкой; значок «обзор» по центру миниатюр */
 .preview-column .slide-rail{height:96px;min-height:96px;padding:6px 10px 4px;gap:8px;align-items:flex-start}
 .preview-column .rail-head{align-self:flex-start;display:flex;flex-direction:column;justify-content:center;height:60px;margin-top:3px}
 .preview-column .slide-list{gap:8px;padding:3px 3px 0}
 .preview-column .slide-item{display:grid;grid-template-rows:60px 18px;width:48px;min-width:48px;padding:0;border:0!important;background:transparent!important;box-shadow:none!important}
 .preview-column .slide-item canvas{width:48px;height:60px;border-radius:5px;outline:2px solid transparent;outline-offset:2px}
 .preview-column .slide-item[aria-current=true] canvas{outline-color:var(--blue)}
 .preview-column .slide-item .slide-number{position:static;grid-row:2;justify-self:center;align-self:end;padding:0;background:transparent;color:var(--muted);font-size:11px;line-height:14px}
 .preview-column .slide-item[aria-current=true] .slide-number{color:var(--accent);font-weight:600}
 .preview-column .slide-item .slide-label{display:none}
 .preview-column .add-slide{width:40px;min-width:40px;height:60px;margin-top:3px;border:0;border-radius:9px;background:var(--selected);color:var(--accent)}

 /* 7. Нижняя панель — с плашкой, как сейчас (привычно). Вариант iOS (без плашки, просто синий): <body data-mobile-nav="ios"> */
 body[data-mobile-nav=ios] .mobile-nav button{background:transparent!important;color:var(--muted)}
 body[data-mobile-nav=ios] .mobile-nav button[aria-current=page]{color:var(--blue)}

 /* 8–10. «Текст» и «Дизайн»: лента прячется, слайд сверху, «‹ 2 из 9 ›» столбиком справа от слайда, панель ниже — вся остальная высота */
 :is(.mobile-text-open,.mobile-design-open) .preview-column{overflow:hidden!important}
 :is(.mobile-text-open,.mobile-design-open) .preview-column .slide-rail{display:none!important}
 :is(.mobile-text-open,.mobile-design-open) .preview-column .stage-heading{display:none!important}
 :is(.mobile-text-open,.mobile-design-open) .preview-column .stage{flex:0 0 auto!important;min-height:0!important;display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center;padding:8px 12px 6px!important;gap:0}
 :is(.mobile-text-open,.mobile-design-open) .preview-column .canvas-area{--mini-h:calc(clamp(150px,24dvh,230px) + 12px);grid-column:2;grid-row:1;flex:none;height:var(--mini-h);width:calc((var(--mini-h) - 12px) * .8 + 12px);min-height:0;padding:0}
 :is(.mobile-text-open,.mobile-design-open) .preview-column .stage-footer{grid-column:3;grid-row:1;display:flex!important;justify-self:start;min-height:0;margin-left:14px}
 :is(.mobile-text-open,.mobile-design-open) .slide-navigation{flex-direction:column;gap:8px}
 :is(.mobile-text-open,.mobile-design-open) .slide-navigation .icon-button:first-child svg,:is(.mobile-text-open,.mobile-design-open) .slide-navigation .icon-button:last-child svg{transform:none}
 :is(.mobile-text-open,.mobile-design-open) .slide-navigation span{min-width:0;text-align:center}
 :is(.mobile-text-open,.mobile-design-open) .preview-column .overflow-message{grid-column:1/-1}

 /* 8. Текст: панель форматирования в три компактных ряда */
 .mobile-text-open .preview-column>.quick-slide-editor{flex:1 1 0;min-height:0;display:flex;flex-direction:column;padding:4px 12px 8px!important;border-top:1px solid var(--line)}
 .quick-slide-heading{margin-bottom:2px!important;min-height:36px;align-items:center}
 .quick-slide-heading label{font-size:15px!important;font-weight:600}
 .quick-slide-heading .inspector-close{min-height:36px!important;width:36px;min-width:36px}
 /* три ряда с одинаковым зазором 6 px: отступ снизу у групп, сам перенос строки высоты не имеет */
 .quick-slide-editor .format-toolbar-full{display:flex;flex-wrap:wrap;column-gap:6px;row-gap:0;margin-bottom:2px!important}
 .quick-slide-editor .format-toolbar-full>*{order:4;margin-bottom:6px}
 .quick-slide-editor .format-toolbar-full>.format-toolbar-group:nth-child(-n+2){order:0}
 .quick-slide-editor .format-toolbar-history{order:1!important;margin-left:auto}
 .quick-slide-editor .format-toolbar-icons:not(.format-toolbar-history){order:2}
 .quick-slide-editor .format-toolbar-full>.format-toolbar-break{display:block;order:3;flex-basis:100%;height:0;margin:0}
 .quick-slide-editor .format-toolbar-group{min-height:36px}
 .quick-slide-editor .format-toolbar-group>button{min-width:38px!important;min-height:36px!important;padding:4px 6px}
 .quick-slide-editor .format-toolbar-effects{order:4;gap:6px}
 .quick-slide-editor .format-toolbar-effects button{min-height:36px!important;font-size:13px}
 /* 9. Поле текста — оформление вместо разметки (как левое поле на ПК) и всё оставшееся место */
 #quickSlideText{display:none!important}
 .quick-slide-editor .quick-slide-rich{display:block;flex:1 1 0;height:auto;min-height:120px;max-height:none;resize:none;font-size:16px;line-height:1.45}

 /* 10. Дизайн: настройки прокручиваются под слайдом */
 .mobile-design-open .preview-column>.slide-settings-panel:not([hidden]){flex:1 1 0;min-height:0;overflow:auto;overscroll-behavior:contain;border-top:1px solid var(--line);background:var(--surface)}
 .preview-column .slide-settings-panel .inspector{padding:8px 16px 20px!important}
 .preview-column .slide-settings-panel .inspector-heading{position:sticky;top:-8px;z-index:2;background:var(--surface);padding:6px 0 4px;margin:0}
 .preview-column .slide-settings-panel .inspector-heading h2{font-size:15px}

 /* 9б. «Дизайн → Текст»: «Текст слайда» тоже с оформлением (#slideRich), textarea с разметкой скрыта */
 #slideText{display:none!important}
 .slide-rich-wrap{display:block;position:relative;margin:-4px 0 12px}
 .slide-rich-wrap .rich-field{min-height:150px;height:200px;max-height:none;font-size:16px;line-height:1.45}
 /* 11. «Текст / Фон / Элементы» — переключатель: белая плашка на сером */
 .inspector-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px;margin:8px 0 14px;border:0;border-radius:9px;background:#eeeef0}
 .inspector-tabs button{min-height:34px!important;border:0!important;border-radius:7px;background:transparent!important;color:var(--ink)!important;font-size:13px!important;font-weight:500;box-shadow:none!important}
 .inspector-tabs button[aria-selected=true]{background:#fff!important;color:#000!important;font-weight:600;box-shadow:0 1px 3px rgb(0 0 0 / .14),0 0 0 .5px rgb(0 0 0 / .05)!important}
 body.dark .inspector-tabs{background:#2c2c2e}
 body.dark .inspector-tabs button[aria-selected=true]{background:#636366!important;color:#fff!important}

 /* 12. Превью фото 180 px, кнопки «Заменить / Удалить» видны сразу */
 .photo-preview{display:block;width:100%;height:180px;margin:0;object-fit:contain;border-radius:9px;background:var(--workspace)}
 .photo-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .range-field>span{display:flex;align-items:center;justify-content:space-between;gap:12px}.range-field output{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}

 /* 13–15. Лист «Шаблоны»: «Карусель» по центру, «Готово» справа, шаблон + «Новый текст», меню как на ПК */
 .mobile-sheet .workflow-heading{display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center;min-height:48px;padding:6px 0!important;margin:0 0 6px!important;border-bottom:1px solid var(--line)}
 .mobile-sheet .workflow-heading h2{display:block!important;grid-column:2;margin:0;font-size:16px;font-weight:600}
 .mobile-sheet .workflow-heading .mobile-done{grid-column:3;justify-self:end;font-size:16px;font-weight:600;color:var(--accent)}
 .mobile-sheet .quick-template-bar{display:flex;align-items:center;gap:8px;margin:6px 0 14px}
 .mobile-sheet .quick-template-bar .template-picker{display:contents}
 .mobile-sheet .quick-template-bar .field,.mobile-sheet .quick-template-bar .template-select-control{margin:0!important}
 .mobile-sheet .quick-template-bar .field{flex:1;min-width:0;margin:0}
 .mobile-sheet .quick-template-bar .field>span:first-child{display:none}
 .mobile-sheet .template-select-control{position:relative;display:flex;align-items:center;gap:10px;height:44px;padding:0 10px 0 8px;border:1px solid var(--edge,var(--line));border-radius:8px;background:var(--field)}
 .mobile-sheet .template-select-control .template-visual{display:block;width:26px;height:26px;flex:0 0 26px;border-radius:5px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
 .mobile-sheet .template-select-control .template-visual canvas{display:block;width:26px;height:auto}
 .mobile-sheet .template-select-control .template-label{display:block!important;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:var(--ink)}
 .mobile-sheet .template-select-control #templateCount{display:none}
 .mobile-sheet .template-select-control .template-chevron{display:inline-flex!important;color:var(--ink)}
 .mobile-sheet .template-select-control .template-chevron svg{width:18px;height:18px}
 .mobile-sheet .template-select-control select{position:absolute;inset:0;width:100%;height:100%;opacity:0;min-height:0}
 .mobile-sheet .quick-template-bar #newTextButton{display:inline-flex;align-items:center;gap:8px;box-sizing:border-box;height:44px;min-height:44px;margin:0;padding:0 12px;font-size:13px;align-self:center}
 .mobile-sheet .quick-template-bar #newTextButton svg{width:20px;height:20px}
 .mobile-sheet .setup-group{border-top:1px solid var(--line)}
 .mobile-sheet .setup-group>summary{display:grid;grid-template-columns:22px minmax(0,1fr) 16px;align-items:center;column-gap:10px;min-height:56px;padding:12px 2px;font-size:14px;font-weight:550;line-height:1.25;list-style:none;cursor:pointer}
 .mobile-sheet .setup-group>summary::-webkit-details-marker{display:none}
 .mobile-sheet .setup-group>summary>.menu-icon{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center;color:currentColor}
 .mobile-sheet .setup-group>summary>.menu-icon svg{width:22px;height:22px}
 .mobile-sheet .setup-group>summary>.menu-icon-text{font-size:19px;line-height:22px;font-weight:450;letter-spacing:-.06em}
 .mobile-sheet .setup-group>summary small{display:block;margin:3px 0 0;color:var(--muted);font-size:12px;font-weight:400}
 .mobile-sheet .setup-group>summary:after{content:'';width:7px;height:7px;justify-self:center;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);transition:transform .15s ease}
 .mobile-sheet .setup-group[open]>summary:after{transform:rotate(225deg) translate(-1px,-1px)}
 .mobile-sheet #templateManagement>button{width:100%;min-height:44px;margin:0 0 8px}

 /* 16. Меню «···»: строка «Тема» с тем же переключателем, первой */
 .menu-theme-row{display:flex;align-items:center;justify-content:space-between;min-height:46px;padding:0 4px 0 14px;border:1px solid var(--edge,var(--line));border-radius:8px;font-size:14px}
 body.dark .menu-theme-row{border-color:transparent;background:var(--ctrl)}
 /* кнопки меню выровнены влево (.menu-grid button) — у значков темы снять: переключатель как в шапке, значки по центру */
 .menu-theme-row .theme-switch .theme-option{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0!important;background:transparent!important;box-shadow:none}
 .menu-theme-row .theme-switch{margin-right:2px}
}
/* Значки «капля %» и окошко телефонного поля живут в панели «Изменить слайд» — на ПК/планшете (там textarea) их не показывать */
@media(min-width:760px){#quickSlideEditor>.rich-badges,#quickSlideEditor>.rich-popover{display:none!important}}